[{"data":1,"prerenderedAt":1168},["ShallowReactive",2],{"landing-copy":3,"\u002Fdocs\u002Fv1\u002Fcomponents\u002Fdropdown":65,"nav:v1":1024},{"id":4,"extension":5,"meta":6,"sections":7,"stem":62,"tagline":63,"__hash__":64},"landing\u002Flanding.yml","yml",{},[8,18,22,29,33,40,47,51,57],{"id":9,"headline":10,"body":11,"cta":12,"secondary":15},"hero","The bare minimum for elegant interfaces.","Three classes, no framework, {css.kB}. A CSS and JavaScript library with no reset, no font, no runtime dependencies and no rule outside a `pui-` class; the browser does the work.",{"label":13,"to":14},"Get started","\u002Fdocs",{"label":16,"to":17},"Migrating from 0.x","\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-0-x",{"id":19,"headline":20,"body":21},"size","{css.kB}. Measured, not promised.","`perfectui.css` is {css.bytes} bytes gzip; the optional JavaScript loader is {js.bytes}. The bars below are the same measurement run on the published builds of the alternatives.",{"id":23,"headline":24,"body":25,"cta":26},"classes","A shape, a style, a colour.","Every element is up to three classes you can combine freely: what it is, how the colour is applied, which colour. Seven colours and four styles give 28 looks per shape, and adding a colour never multiplies your classes.",{"label":27,"to":28},"See the components","\u002Fdocs\u002Fcomponents\u002Fbutton",{"id":30,"headline":31,"body":32},"overlays","Overlays without a plugin.","Modals are `\u003Cdialog>`, menus are `popover`, tooltips are `interestfor`, accordions are `\u003Cdetails>`. The optional loader downloads a fallback only when a browser is missing one of them.",{"id":34,"headline":35,"body":36,"cta":37},"mode-theme","One attribute for dark mode. One variable for your colour.","With no attribute, perfectui follows the operating system. Set `data-pui-mode` to choose, and `--pui-theme` to make every component yours.",{"label":38,"to":39},"Dark mode docs","\u002Fdocs\u002Fcustomization\u002Fdark-mode",{"id":41,"headline":42,"body":43,"cta":44},"tailwind","Your utilities always win.","One `@layer` line keeps Tailwind's reset below perfectui and every utility above it.",{"label":45,"to":46},"Tailwind guide","\u002Fdocs\u002Fgetting-started\u002Ftailwind-css",{"id":48,"headline":49,"body":50},"nothing-to-undo","Nothing you have to undo.","No reset to override, no font to remove, no `!important` to beat, no initialiser to call after rendering, no guard for server rendering. ESM only, nothing on `window`.",{"id":52,"headline":53,"body":54,"cta":55},"migration","Coming from 0.x?","1.0 is a rewrite: every class is prefixed, styles and colours are separate classes, and the browser replaced the JavaScript. The guide lists every change.",{"label":56,"to":17},"Read the migration guide",{"id":58,"headline":59,"body":60,"cta":61},"install","Install it your way.","A package for npm, yarn, pnpm or bun, or two tags from a CDN. Import everything or only the components you use.",{"label":13,"to":14},"landing","Components the browser already knows how to run.","QsxvMnCQ8bgawTVgX6YLkvZoqMKaQbFt0j1urNnrKQw",{"id":66,"title":67,"body":68,"changed":1013,"description":1014,"extension":1015,"from":1013,"meta":1016,"navigation":151,"path":1017,"seo":1018,"since":1013,"stem":1019,"tags":1020,"to":1013,"__hash__":1023},"docs_v1\u002Fdocs\u002Fv1\u002F04.components\u002F06.dropdown.md","Dropdown",{"type":69,"value":70,"toc":1006},"minimark",[71,329,340,345,348,351,476,537,540,544,547,636,678,683,686,690,693,803,807,917,927,931,1002],[72,73,75],"example",{"name":74},"basic",[76,77,82],"pre",{"className":78,"code":79,"language":80,"meta":81,"style":81},"language-html shiki shiki-themes perfectui-site","\u003Cbutton class=\"pui-btn pui-outline pui-surface\" popovertarget=\"menu\">\n  Menu\n\u003C\u002Fbutton>\n\n\u003Cdiv class=\"pui-dropdown\" id=\"menu\" popover>\n  \u003Cul class=\"pui-list pui-hoverable\" style=\"list-style: none\">\n    \u003Cli class=\"pui-list-item\">Profile\u003C\u002Fli>\n    \u003Cli class=\"pui-list-item\">Billing\u003C\u002Fli>\n    \u003Cli class=\"pui-list-item\">Sign out\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fdiv>\n","html","",[83,84,85,129,136,146,153,188,222,254,282,310,320],"code",{"__ignoreMap":81},[86,87,90,94,98,102,105,108,112,114,117,119,121,124,126],"span",{"class":88,"line":89},"line",1,[86,91,93],{"class":92},"s8qk9","\u003C",[86,95,97],{"class":96},"sz5At","button",[86,99,101],{"class":100},"sz6eq"," class",[86,103,104],{"class":92},"=",[86,106,107],{"class":92},"\"",[86,109,111],{"class":110},"s8AH5","pui-btn pui-outline pui-surface",[86,113,107],{"class":92},[86,115,116],{"class":100}," popovertarget",[86,118,104],{"class":92},[86,120,107],{"class":92},[86,122,123],{"class":110},"menu",[86,125,107],{"class":92},[86,127,128],{"class":92},">\n",[86,130,132],{"class":88,"line":131},2,[86,133,135],{"class":134},"stV6K","  Menu\n",[86,137,139,142,144],{"class":88,"line":138},3,[86,140,141],{"class":92},"\u003C\u002F",[86,143,97],{"class":96},[86,145,128],{"class":92},[86,147,149],{"class":88,"line":148},4,[86,150,152],{"emptyLinePlaceholder":151},true,"\n",[86,154,156,158,161,163,165,167,170,172,175,177,179,181,183,186],{"class":88,"line":155},5,[86,157,93],{"class":92},[86,159,160],{"class":96},"div",[86,162,101],{"class":100},[86,164,104],{"class":92},[86,166,107],{"class":92},[86,168,169],{"class":110},"pui-dropdown",[86,171,107],{"class":92},[86,173,174],{"class":100}," id",[86,176,104],{"class":92},[86,178,107],{"class":92},[86,180,123],{"class":110},[86,182,107],{"class":92},[86,184,185],{"class":100}," popover",[86,187,128],{"class":92},[86,189,191,194,197,199,201,203,206,208,211,213,215,218,220],{"class":88,"line":190},6,[86,192,193],{"class":92},"  \u003C",[86,195,196],{"class":96},"ul",[86,198,101],{"class":100},[86,200,104],{"class":92},[86,202,107],{"class":92},[86,204,205],{"class":110},"pui-list pui-hoverable",[86,207,107],{"class":92},[86,209,210],{"class":100}," style",[86,212,104],{"class":92},[86,214,107],{"class":92},[86,216,217],{"class":110},"list-style: none",[86,219,107],{"class":92},[86,221,128],{"class":92},[86,223,225,228,231,233,235,237,240,242,245,248,250,252],{"class":88,"line":224},7,[86,226,227],{"class":92},"    \u003C",[86,229,230],{"class":96},"li",[86,232,101],{"class":100},[86,234,104],{"class":92},[86,236,107],{"class":92},[86,238,239],{"class":110},"pui-list-item",[86,241,107],{"class":92},[86,243,244],{"class":92},">",[86,246,247],{"class":134},"Profile",[86,249,141],{"class":92},[86,251,230],{"class":96},[86,253,128],{"class":92},[86,255,257,259,261,263,265,267,269,271,273,276,278,280],{"class":88,"line":256},8,[86,258,227],{"class":92},[86,260,230],{"class":96},[86,262,101],{"class":100},[86,264,104],{"class":92},[86,266,107],{"class":92},[86,268,239],{"class":110},[86,270,107],{"class":92},[86,272,244],{"class":92},[86,274,275],{"class":134},"Billing",[86,277,141],{"class":92},[86,279,230],{"class":96},[86,281,128],{"class":92},[86,283,285,287,289,291,293,295,297,299,301,304,306,308],{"class":88,"line":284},9,[86,286,227],{"class":92},[86,288,230],{"class":96},[86,290,101],{"class":100},[86,292,104],{"class":92},[86,294,107],{"class":92},[86,296,239],{"class":110},[86,298,107],{"class":92},[86,300,244],{"class":92},[86,302,303],{"class":134},"Sign out",[86,305,141],{"class":92},[86,307,230],{"class":96},[86,309,128],{"class":92},[86,311,313,316,318],{"class":88,"line":312},10,[86,314,315],{"class":92},"  \u003C\u002F",[86,317,196],{"class":96},[86,319,128],{"class":92},[86,321,323,325,327],{"class":88,"line":322},11,[86,324,141],{"class":92},[86,326,160],{"class":96},[86,328,128],{"class":92},[330,331,332,335,336,339],"p",{},[83,333,334],{},"popovertarget"," on the trigger, ",[83,337,338],{},"popover"," on the panel. There is no script and no wiring.",[341,342,344],"h2",{"id":343},"placement","Placement",[330,346,347],{},"The panel is placed under its trigger, aligned to its starting edge, and flips above when there is no room below.",[330,349,350],{},"Three classes move it elsewhere:",[76,352,354],{"className":78,"code":353,"language":80,"meta":81,"style":81},"\u003Cdiv class=\"pui-dropdown pui-top\" id=\"menu\" popover>Above the trigger\u003C\u002Fdiv>\n\u003Cdiv class=\"pui-dropdown pui-start\" id=\"menu\" popover>Before the trigger\u003C\u002Fdiv>\n\u003Cdiv class=\"pui-dropdown pui-end\" id=\"menu\" popover>After the trigger\u003C\u002Fdiv>\n",[83,355,356,396,436],{"__ignoreMap":81},[86,357,358,360,362,364,366,368,371,373,375,377,379,381,383,385,387,390,392,394],{"class":88,"line":89},[86,359,93],{"class":92},[86,361,160],{"class":96},[86,363,101],{"class":100},[86,365,104],{"class":92},[86,367,107],{"class":92},[86,369,370],{"class":110},"pui-dropdown pui-top",[86,372,107],{"class":92},[86,374,174],{"class":100},[86,376,104],{"class":92},[86,378,107],{"class":92},[86,380,123],{"class":110},[86,382,107],{"class":92},[86,384,185],{"class":100},[86,386,244],{"class":92},[86,388,389],{"class":134},"Above the trigger",[86,391,141],{"class":92},[86,393,160],{"class":96},[86,395,128],{"class":92},[86,397,398,400,402,404,406,408,411,413,415,417,419,421,423,425,427,430,432,434],{"class":88,"line":131},[86,399,93],{"class":92},[86,401,160],{"class":96},[86,403,101],{"class":100},[86,405,104],{"class":92},[86,407,107],{"class":92},[86,409,410],{"class":110},"pui-dropdown pui-start",[86,412,107],{"class":92},[86,414,174],{"class":100},[86,416,104],{"class":92},[86,418,107],{"class":92},[86,420,123],{"class":110},[86,422,107],{"class":92},[86,424,185],{"class":100},[86,426,244],{"class":92},[86,428,429],{"class":134},"Before the trigger",[86,431,141],{"class":92},[86,433,160],{"class":96},[86,435,128],{"class":92},[86,437,438,440,442,444,446,448,451,453,455,457,459,461,463,465,467,470,472,474],{"class":88,"line":138},[86,439,93],{"class":92},[86,441,160],{"class":96},[86,443,101],{"class":100},[86,445,104],{"class":92},[86,447,107],{"class":92},[86,449,450],{"class":110},"pui-dropdown pui-end",[86,452,107],{"class":92},[86,454,174],{"class":100},[86,456,104],{"class":92},[86,458,107],{"class":92},[86,460,123],{"class":110},[86,462,107],{"class":92},[86,464,185],{"class":100},[86,466,244],{"class":92},[86,468,469],{"class":134},"After the trigger",[86,471,141],{"class":92},[86,473,160],{"class":96},[86,475,128],{"class":92},[477,478,479,492],"table",{},[480,481,482],"thead",{},[483,484,485,489],"tr",{},[486,487,488],"th",{},"Class",[486,490,491],{},"Where it goes",[493,494,495,507,517,527],"tbody",{},[483,496,497,504],{},[498,499,500],"td",{},[501,502,503],"em",{},"(none)",[498,505,506],{},"below",[483,508,509,514],{},[498,510,511],{},[83,512,513],{},"pui-top",[498,515,516],{},"above",[483,518,519,524],{},[498,520,521],{},[83,522,523],{},"pui-start",[498,525,526],{},"to the left, or the right in RTL",[483,528,529,534],{},[498,530,531],{},[83,532,533],{},"pui-end",[498,535,536],{},"to the right, or the left in RTL",[330,538,539],{},"Each one flips to the opposite side when the preferred one does not fit, so a menu never opens off screen.",[341,541,543],{"id":542},"alignment","Alignment",[330,545,546],{},"A panel that opens above or below lines up with the trigger's starting edge. Two classes move it along that axis:",[76,548,550],{"className":78,"code":549,"language":80,"meta":81,"style":81},"\u003Cdiv class=\"pui-dropdown pui-align-center\" id=\"menu\" popover>Centered\u003C\u002Fdiv>\n\u003Cdiv class=\"pui-dropdown pui-align-end\" id=\"menu\" popover>\n  Aligned to the end\n\u003C\u002Fdiv>\n",[83,551,552,592,623,628],{"__ignoreMap":81},[86,553,554,556,558,560,562,564,567,569,571,573,575,577,579,581,583,586,588,590],{"class":88,"line":89},[86,555,93],{"class":92},[86,557,160],{"class":96},[86,559,101],{"class":100},[86,561,104],{"class":92},[86,563,107],{"class":92},[86,565,566],{"class":110},"pui-dropdown pui-align-center",[86,568,107],{"class":92},[86,570,174],{"class":100},[86,572,104],{"class":92},[86,574,107],{"class":92},[86,576,123],{"class":110},[86,578,107],{"class":92},[86,580,185],{"class":100},[86,582,244],{"class":92},[86,584,585],{"class":134},"Centered",[86,587,141],{"class":92},[86,589,160],{"class":96},[86,591,128],{"class":92},[86,593,594,596,598,600,602,604,607,609,611,613,615,617,619,621],{"class":88,"line":131},[86,595,93],{"class":92},[86,597,160],{"class":96},[86,599,101],{"class":100},[86,601,104],{"class":92},[86,603,107],{"class":92},[86,605,606],{"class":110},"pui-dropdown pui-align-end",[86,608,107],{"class":92},[86,610,174],{"class":100},[86,612,104],{"class":92},[86,614,107],{"class":92},[86,616,123],{"class":110},[86,618,107],{"class":92},[86,620,185],{"class":100},[86,622,128],{"class":92},[86,624,625],{"class":88,"line":138},[86,626,627],{"class":134},"  Aligned to the end\n",[86,629,630,632,634],{"class":88,"line":148},[86,631,141],{"class":92},[86,633,160],{"class":96},[86,635,128],{"class":92},[477,637,638,647],{},[480,639,640],{},[483,641,642,644],{},[486,643,488],{},[486,645,646],{},"Where it lines up",[493,648,649,658,668],{},[483,650,651,655],{},[498,652,653],{},[501,654,503],{},[498,656,657],{},"with the trigger's starting edge",[483,659,660,665],{},[498,661,662],{},[83,663,664],{},"pui-align-center",[498,666,667],{},"centered on the trigger",[483,669,670,675],{},[498,671,672],{},[83,673,674],{},"pui-align-end",[498,676,677],{},"with the trigger's ending edge",[330,679,680,682],{},[83,681,674],{}," is what a menu at the end of a header wants, so it opens inward instead of running off the page.",[330,684,685],{},"Placement uses CSS anchor positioning. Browsers that do not have it yet get the same placement, including the direction classes, from the fallback in the script.",[341,687,689],{"id":688},"anything-can-go-inside","Anything can go inside",[330,691,692],{},"The panel is a container, not a menu. A list is the common case, but a form or a card work just as well:",[76,694,696],{"className":78,"code":695,"language":80,"meta":81,"style":81},"\u003Cdiv class=\"pui-dropdown\" id=\"filters\" popover>\n  \u003Clabel class=\"pui-field-group\">\n    \u003Cspan>Search\u003C\u002Fspan>\n    \u003Cinput class=\"pui-input\" \u002F>\n  \u003C\u002Flabel>\n\u003C\u002Fdiv>\n",[83,697,698,729,749,766,787,795],{"__ignoreMap":81},[86,699,700,702,704,706,708,710,712,714,716,718,720,723,725,727],{"class":88,"line":89},[86,701,93],{"class":92},[86,703,160],{"class":96},[86,705,101],{"class":100},[86,707,104],{"class":92},[86,709,107],{"class":92},[86,711,169],{"class":110},[86,713,107],{"class":92},[86,715,174],{"class":100},[86,717,104],{"class":92},[86,719,107],{"class":92},[86,721,722],{"class":110},"filters",[86,724,107],{"class":92},[86,726,185],{"class":100},[86,728,128],{"class":92},[86,730,731,733,736,738,740,742,745,747],{"class":88,"line":131},[86,732,193],{"class":92},[86,734,735],{"class":96},"label",[86,737,101],{"class":100},[86,739,104],{"class":92},[86,741,107],{"class":92},[86,743,744],{"class":110},"pui-field-group",[86,746,107],{"class":92},[86,748,128],{"class":92},[86,750,751,753,755,757,760,762,764],{"class":88,"line":138},[86,752,227],{"class":92},[86,754,86],{"class":96},[86,756,244],{"class":92},[86,758,759],{"class":134},"Search",[86,761,141],{"class":92},[86,763,86],{"class":96},[86,765,128],{"class":92},[86,767,768,770,773,775,777,779,782,784],{"class":88,"line":148},[86,769,227],{"class":92},[86,771,772],{"class":96},"input",[86,774,101],{"class":100},[86,776,104],{"class":92},[86,778,107],{"class":92},[86,780,781],{"class":110},"pui-input",[86,783,107],{"class":92},[86,785,786],{"class":92}," \u002F>\n",[86,788,789,791,793],{"class":88,"line":155},[86,790,315],{"class":92},[86,792,735],{"class":96},[86,794,128],{"class":92},[86,796,797,799,801],{"class":88,"line":190},[86,798,141],{"class":92},[86,800,160],{"class":96},[86,802,128],{"class":92},[341,804,806],{"id":805},"closing-from-inside","Closing from inside",[76,808,810],{"className":78,"code":809,"language":80,"meta":81,"style":81},"\u003Cdiv class=\"pui-dropdown\" id=\"menu\" popover>\n  \u003Cbutton\n    class=\"pui-btn pui-link pui-theme\"\n    popovertarget=\"menu\"\n    popovertargetaction=\"hide\"\n  >\n    Close\n  \u003C\u002Fbutton>\n\u003C\u002Fdiv>\n",[83,811,812,842,849,864,877,891,896,901,909],{"__ignoreMap":81},[86,813,814,816,818,820,822,824,826,828,830,832,834,836,838,840],{"class":88,"line":89},[86,815,93],{"class":92},[86,817,160],{"class":96},[86,819,101],{"class":100},[86,821,104],{"class":92},[86,823,107],{"class":92},[86,825,169],{"class":110},[86,827,107],{"class":92},[86,829,174],{"class":100},[86,831,104],{"class":92},[86,833,107],{"class":92},[86,835,123],{"class":110},[86,837,107],{"class":92},[86,839,185],{"class":100},[86,841,128],{"class":92},[86,843,844,846],{"class":88,"line":131},[86,845,193],{"class":92},[86,847,848],{"class":96},"button\n",[86,850,851,854,856,858,861],{"class":88,"line":138},[86,852,853],{"class":100},"    class",[86,855,104],{"class":92},[86,857,107],{"class":92},[86,859,860],{"class":110},"pui-btn pui-link pui-theme",[86,862,863],{"class":92},"\"\n",[86,865,866,869,871,873,875],{"class":88,"line":148},[86,867,868],{"class":100},"    popovertarget",[86,870,104],{"class":92},[86,872,107],{"class":92},[86,874,123],{"class":110},[86,876,863],{"class":92},[86,878,879,882,884,886,889],{"class":88,"line":155},[86,880,881],{"class":100},"    popovertargetaction",[86,883,104],{"class":92},[86,885,107],{"class":92},[86,887,888],{"class":110},"hide",[86,890,863],{"class":92},[86,892,893],{"class":88,"line":190},[86,894,895],{"class":92},"  >\n",[86,897,898],{"class":88,"line":224},[86,899,900],{"class":134},"    Close\n",[86,902,903,905,907],{"class":88,"line":256},[86,904,315],{"class":92},[86,906,97],{"class":96},[86,908,128],{"class":92},[86,910,911,913,915],{"class":88,"line":284},[86,912,141],{"class":92},[86,914,160],{"class":96},[86,916,128],{"class":92},[918,919,920],"warning",{},[330,921,922,923,926],{},"Clicking inside a popover does not close it, so the old ",[83,924,925],{},".ignore"," class is gone.",[341,928,930],{"id":929},"from-javascript","From JavaScript",[76,932,936],{"className":933,"code":934,"language":935,"meta":81,"style":81},"language-js shiki shiki-themes perfectui-site","const menu = document.getElementById(\"menu\");\nmenu.showPopover();\nmenu.hidePopover();\nmenu.togglePopover();\n","js",[83,937,938,969,980,991],{"__ignoreMap":81},[86,939,940,943,946,948,951,954,957,959,961,963,966],{"class":88,"line":89},[86,941,942],{"class":96},"const",[86,944,945],{"class":134}," menu ",[86,947,104],{"class":96},[86,949,950],{"class":134}," document",[86,952,953],{"class":92},".",[86,955,956],{"class":134},"getElementById(",[86,958,107],{"class":92},[86,960,123],{"class":110},[86,962,107],{"class":92},[86,964,965],{"class":134},")",[86,967,968],{"class":92},";\n",[86,970,971,973,975,978],{"class":88,"line":131},[86,972,123],{"class":134},[86,974,953],{"class":92},[86,976,977],{"class":134},"showPopover()",[86,979,968],{"class":92},[86,981,982,984,986,989],{"class":88,"line":138},[86,983,123],{"class":134},[86,985,953],{"class":92},[86,987,988],{"class":134},"hidePopover()",[86,990,968],{"class":92},[86,992,993,995,997,1000],{"class":88,"line":148},[86,994,123],{"class":134},[86,996,953],{"class":92},[86,998,999],{"class":134},"togglePopover()",[86,1001,968],{"class":92},[1003,1004,1005],"style",{},"html pre.shiki code .s8qk9, html code.shiki .s8qk9{--shiki-default:var(--site-code-punct)}html pre.shiki code .sz5At, html code.shiki .sz5At{--shiki-default:var(--site-code-tag)}html pre.shiki code .sz6eq, html code.shiki .sz6eq{--shiki-default:var(--site-code-attr)}html pre.shiki code .s8AH5, html code.shiki .s8AH5{--shiki-default:var(--site-code-value)}html pre.shiki code .stV6K, html code.shiki .stV6K{--shiki-default:var(--site-code-text)}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":81,"searchDepth":131,"depth":131,"links":1007},[1008,1009,1010,1011,1012],{"id":343,"depth":131,"text":344},{"id":542,"depth":131,"text":543},{"id":688,"depth":131,"text":689},{"id":805,"depth":131,"text":806},{"id":929,"depth":131,"text":930},null,"Built on the popover API. The browser handles the top layer, closing on an outside click, and closing on escape.","md",{},"\u002Fdocs\u002Fv1\u002Fcomponents\u002Fdropdown",{"title":67,"description":1014},"docs\u002Fv1\u002F04.components\u002F06.dropdown",[1021,1022],"component","dropdown","owHJ6MYM5CZBoIKPnb33GixYY3Wq-w74XJwZYnXA1wk",[1025],{"title":1026,"path":14,"stem":1027,"children":1028,"page":1058},"Docs","docs",[1029],{"title":1030,"path":1031,"stem":1032,"children":1033,"page":1058},"V1","\u002Fdocs\u002Fv1","docs\u002Fv1",[1034,1059,1072,1085,1131],{"title":1035,"path":1036,"stem":1037,"children":1038,"page":1058},"Getting Started","\u002Fdocs\u002Fv1\u002Fgetting-started","docs\u002Fv1\u002F01.getting-started",[1039,1043,1047,1051,1054],{"title":1040,"path":1041,"stem":1042},"Installation","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Finstallation","docs\u002Fv1\u002F01.getting-started\u002F01.installation",{"title":1044,"path":1045,"stem":1046},"TypeScript","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftypescript","docs\u002Fv1\u002F01.getting-started\u002F02.typescript",{"title":1048,"path":1049,"stem":1050},"Tailwind CSS","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftailwind-css","docs\u002Fv1\u002F01.getting-started\u002F03.tailwind-css",{"title":16,"path":1052,"stem":1053},"\u002Fdocs\u002Fv1\u002Fgetting-started\u002Fmigrating-from-0-x","docs\u002Fv1\u002F01.getting-started\u002F04.migrating-from-0-x",{"title":1055,"path":1056,"stem":1057},"License","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Flicense","docs\u002Fv1\u002F01.getting-started\u002F05.license",false,{"title":1060,"path":1061,"stem":1062,"children":1063,"page":1058},"Customization","\u002Fdocs\u002Fv1\u002Fcustomization","docs\u002Fv1\u002F02.customization",[1064,1068],{"title":1065,"path":1066,"stem":1067},"Dark Mode","\u002Fdocs\u002Fv1\u002Fcustomization\u002Fdark-mode","docs\u002Fv1\u002F02.customization\u002F01.dark-mode",{"title":1069,"path":1070,"stem":1071},"Theme Color","\u002Fdocs\u002Fv1\u002Fcustomization\u002Ftheme-color","docs\u002Fv1\u002F02.customization\u002F02.theme-color",{"title":1073,"path":1074,"stem":1075,"children":1076,"page":1058},"General","\u002Fdocs\u002Fv1\u002Fgeneral","docs\u002Fv1\u002F03.general",[1077,1081],{"title":1078,"path":1079,"stem":1080},"Layout Group","\u002Fdocs\u002Fv1\u002Fgeneral\u002Flayout-group","docs\u002Fv1\u002F03.general\u002F01.layout-group",{"title":1082,"path":1083,"stem":1084},"Float","\u002Fdocs\u002Fv1\u002Fgeneral\u002Ffloat","docs\u002Fv1\u002F03.general\u002F02.float",{"title":1086,"path":1087,"stem":1088,"children":1089,"page":1058},"Components","\u002Fdocs\u002Fv1\u002Fcomponents","docs\u002Fv1\u002F04.components",[1090,1094,1098,1102,1106,1110,1111,1115,1119,1123,1127],{"title":1091,"path":1092,"stem":1093},"Accordion","\u002Fdocs\u002Fv1\u002Fcomponents\u002Faccordion","docs\u002Fv1\u002F04.components\u002F01.accordion",{"title":1095,"path":1096,"stem":1097},"Badge","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbadge","docs\u002Fv1\u002F04.components\u002F02.badge",{"title":1099,"path":1100,"stem":1101},"Button","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbutton","docs\u002Fv1\u002F04.components\u002F03.button",{"title":1103,"path":1104,"stem":1105},"Card","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fcard","docs\u002Fv1\u002F04.components\u002F04.card",{"title":1107,"path":1108,"stem":1109},"Chip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fchip","docs\u002Fv1\u002F04.components\u002F05.chip",{"title":67,"path":1017,"stem":1019},{"title":1112,"path":1113,"stem":1114},"List","\u002Fdocs\u002Fv1\u002Fcomponents\u002Flist","docs\u002Fv1\u002F04.components\u002F07.list",{"title":1116,"path":1117,"stem":1118},"Modal","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fmodal","docs\u002Fv1\u002F04.components\u002F08.modal",{"title":1120,"path":1121,"stem":1122},"Table","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftable","docs\u002Fv1\u002F04.components\u002F09.table",{"title":1124,"path":1125,"stem":1126},"Timeline","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftimeline","docs\u002Fv1\u002F04.components\u002F10.timeline",{"title":1128,"path":1129,"stem":1130},"Tooltip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftooltip","docs\u002Fv1\u002F04.components\u002F11.tooltip",{"title":1132,"path":1133,"stem":1134,"children":1135,"page":1058},"Forms","\u002Fdocs\u002Fv1\u002Fforms","docs\u002Fv1\u002F05.forms",[1136,1140,1144,1148,1152,1156,1160,1164],{"title":1137,"path":1138,"stem":1139},"Field Group","\u002Fdocs\u002Fv1\u002Fforms\u002Ffield-group","docs\u002Fv1\u002F05.forms\u002F01.field-group",{"title":1141,"path":1142,"stem":1143},"Input","\u002Fdocs\u002Fv1\u002Fforms\u002Finput","docs\u002Fv1\u002F05.forms\u002F02.input",{"title":1145,"path":1146,"stem":1147},"Input Group","\u002Fdocs\u002Fv1\u002Fforms\u002Finput-group","docs\u002Fv1\u002F05.forms\u002F03.input-group",{"title":1149,"path":1150,"stem":1151},"Textarea","\u002Fdocs\u002Fv1\u002Fforms\u002Ftextarea","docs\u002Fv1\u002F05.forms\u002F04.textarea",{"title":1153,"path":1154,"stem":1155},"Select","\u002Fdocs\u002Fv1\u002Fforms\u002Fselect","docs\u002Fv1\u002F05.forms\u002F05.select",{"title":1157,"path":1158,"stem":1159},"Checkbox","\u002Fdocs\u002Fv1\u002Fforms\u002Fcheckbox","docs\u002Fv1\u002F05.forms\u002F06.checkbox",{"title":1161,"path":1162,"stem":1163},"Radio","\u002Fdocs\u002Fv1\u002Fforms\u002Fradio","docs\u002Fv1\u002F05.forms\u002F07.radio",{"title":1165,"path":1166,"stem":1167},"Switch","\u002Fdocs\u002Fv1\u002Fforms\u002Fswitch","docs\u002Fv1\u002F05.forms\u002F08.switch",1790376112115]