[{"data":1,"prerenderedAt":1464},["ShallowReactive",2],{"landing-copy":3,"\u002Fdocs\u002Fv1\u002Fgetting-started\u002Fmigrating-from-0-x":65,"nav:v1":1329},{"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":16,"body":67,"changed":1316,"description":1317,"extension":1318,"from":84,"meta":1319,"navigation":1320,"path":1321,"seo":1322,"since":1323,"stem":1324,"tags":1325,"to":1327,"__hash__":1328},"docs_v1\u002Fdocs\u002Fv1\u002F01.getting-started\u002F04.migrating-from-0-x.md",{"type":68,"value":69,"toc":1298},"minimark",[70,74,79,102,108,112,128,165,190,193,232,236,246,261,265,280,385,403,407,659,664,713,740,744,769,776,780,800,803,807,857,864,868,871,915,925,929,944,959,962,966,972,997,1043,1047,1214,1235,1239,1261,1265,1294],[71,72,73],"p",{},"Nothing here is guesswork on your side: the changes are mechanical, and this\npage lists every one of them.",[75,76,78],"h2",{"id":77},"why","Why",[71,80,81,85,86,89,90,93,94,97,98,101],{},[82,83,84],"code",{},"0.23.0"," shipped a CSS reset, imported a font, styled bare elements like ",[82,87,88],{},"ul","\nand ",[82,91,92],{},"a",", used ",[82,95,96],{},"!important",", and ran JavaScript on import that re-initialised the\nwhole DOM through a ",[82,99,100],{},"MutationObserver",". That made it hard to drop into an\nexisting project, awkward with React and Vue, and unsuitable for server\nrendering.",[71,103,104,107],{},[82,105,106],{},"1.0.0"," touches nothing you did not ask for, ships less, and leans on the\nplatform for the behavior it used to implement itself.",[75,109,111],{"id":110},"_1-update-the-imports","1. Update the imports",[71,113,114,115,119,120,123,124,127],{},"The package is ",[116,117,118],"strong",{},"ESM only"," and no longer puts anything on ",[82,121,122],{},"window"," or\n",[82,125,126],{},"document",".",[129,130,135],"pre",{"className":131,"code":132,"language":133,"meta":134,"style":134},"language-diff shiki shiki-themes perfectui-site","-import \"@chrissgon\u002Fperfectui\u002Fdist\u002Fperfectui.css\";\n-import \"@chrissgon\u002Fperfectui\";\n+import \"@chrissgon\u002Fperfectui\u002Fperfectui.css\";\n+import \"@chrissgon\u002Fperfectui\"; \u002F\u002F only for overlays and the indeterminate checkbox\n","diff","",[82,136,137,146,152,159],{"__ignoreMap":134},[138,139,142],"span",{"class":140,"line":141},"line",1,[138,143,145],{"class":144},"sUVsD","-import \"@chrissgon\u002Fperfectui\u002Fdist\u002Fperfectui.css\";\n",[138,147,149],{"class":140,"line":148},2,[138,150,151],{"class":144},"-import \"@chrissgon\u002Fperfectui\";\n",[138,153,155],{"class":140,"line":154},3,[138,156,158],{"class":157},"s8AH5","+import \"@chrissgon\u002Fperfectui\u002Fperfectui.css\";\n",[138,160,162],{"class":140,"line":161},4,[138,163,164],{"class":157},"+import \"@chrissgon\u002Fperfectui\"; \u002F\u002F only for overlays and the indeterminate checkbox\n",[129,166,168],{"className":131,"code":167,"language":133,"meta":134,"style":134},"-\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@chrissgon\u002Fperfectui@latest\u002Fdist\u002Fperfectui.js\">\u003C\u002Fscript>\n+\u003Cscript type=\"module\">\n+  import \"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@chrissgon\u002Fperfectui@latest\u002Fdist\u002Fjs\u002Findex.js\";\n+\u003C\u002Fscript>\n",[82,169,170,175,180,185],{"__ignoreMap":134},[138,171,172],{"class":140,"line":141},[138,173,174],{"class":144},"-\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@chrissgon\u002Fperfectui@latest\u002Fdist\u002Fperfectui.js\">\u003C\u002Fscript>\n",[138,176,177],{"class":140,"line":148},[138,178,179],{"class":157},"+\u003Cscript type=\"module\">\n",[138,181,182],{"class":140,"line":154},[138,183,184],{"class":157},"+  import \"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@chrissgon\u002Fperfectui@latest\u002Fdist\u002Fjs\u002Findex.js\";\n",[138,186,187],{"class":140,"line":161},[138,188,189],{"class":157},"+\u003C\u002Fscript>\n",[71,191,192],{},"You can now import only the components you use:",[129,194,198],{"className":195,"code":196,"language":197,"meta":134,"style":134},"language-js shiki shiki-themes perfectui-site","import \"@chrissgon\u002Fperfectui\u002Fcore.css\";\nimport \"@chrissgon\u002Fperfectui\u002Fcomponents\u002Fbutton.css\";\n","js",[82,199,200,219],{"__ignoreMap":134},[138,201,202,206,210,213,216],{"class":140,"line":141},[138,203,205],{"class":204},"sz5At","import",[138,207,209],{"class":208},"s8qk9"," \"",[138,211,212],{"class":157},"@chrissgon\u002Fperfectui\u002Fcore.css",[138,214,215],{"class":208},"\"",[138,217,218],{"class":208},";\n",[138,220,221,223,225,228,230],{"class":140,"line":148},[138,222,205],{"class":204},[138,224,209],{"class":208},[138,226,227],{"class":157},"@chrissgon\u002Fperfectui\u002Fcomponents\u002Fbutton.css",[138,229,215],{"class":208},[138,231,218],{"class":208},[75,233,235],{"id":234},"_2-add-the-prefix","2. Add the prefix",[71,237,238,239,242,243,127],{},"Every class is prefixed with ",[82,240,241],{},"pui-",", every custom property with ",[82,244,245],{},"--pui-",[129,247,249],{"className":131,"code":248,"language":133,"meta":134,"style":134},"-\u003Cbutton class=\"btn style-solid-primary\">Save\u003C\u002Fbutton>\n+\u003Cbutton class=\"pui-btn pui-solid pui-theme\">Save\u003C\u002Fbutton>\n",[82,250,251,256],{"__ignoreMap":134},[138,252,253],{"class":140,"line":141},[138,254,255],{"class":144},"-\u003Cbutton class=\"btn style-solid-primary\">Save\u003C\u002Fbutton>\n",[138,257,258],{"class":140,"line":148},[138,259,260],{"class":157},"+\u003Cbutton class=\"pui-btn pui-solid pui-theme\">Save\u003C\u002Fbutton>\n",[75,262,264],{"id":263},"_3-split-style-from-color","3. Split style from color",[71,266,267,268,271,272,275,276,279],{},"A combined class like ",[82,269,270],{},"style-solid-primary"," became two independent classes: one\nfor ",[116,273,274],{},"how"," the color is applied, one for ",[116,277,278],{},"which"," color. Adding a color no\nlonger multiplies the number of classes.",[281,282,283,298],"table",{},[284,285,286],"thead",{},[287,288,289,294],"tr",{},[290,291,292],"th",{},[82,293,84],{},[290,295,296],{},[82,297,106],{},[299,300,301,313,325,337,349,361,373],"tbody",{},[287,302,303,308],{},[304,305,306],"td",{},[82,307,270],{},[304,309,310],{},[82,311,312],{},"pui-solid pui-theme",[287,314,315,320],{},[304,316,317],{},[82,318,319],{},"style-soft-success",[304,321,322],{},[82,323,324],{},"pui-soft pui-success",[287,326,327,332],{},[304,328,329],{},[82,330,331],{},"style-outline-error",[304,333,334],{},[82,335,336],{},"pui-outline pui-error",[287,338,339,344],{},[304,340,341],{},[82,342,343],{},"style-link-warn",[304,345,346],{},[82,347,348],{},"pui-link pui-warn",[287,350,351,356],{},[304,352,353],{},[82,354,355],{},"style-*-secondary",[304,357,358],{},[82,359,360],{},"pui-\u003Cstyle> pui-muted",[287,362,363,368],{},[304,364,365],{},[82,366,367],{},"style-white",[304,369,370],{},[82,371,372],{},"pui-solid pui-surface",[287,374,375,380],{},[304,376,377],{},[82,378,379],{},"style-black",[304,381,382],{},[82,383,384],{},"pui-solid pui-inverse",[71,386,387,390,391,394,395,398,399,402],{},[82,388,389],{},"secondary"," is now ",[82,392,393],{},"muted",", and the two page-relative colors have real names:\n",[82,396,397],{},"pui-surface"," follows the page background, ",[82,400,401],{},"pui-inverse"," is its opposite.",[75,404,406],{"id":405},"_4-components","4. Components",[281,408,409,421],{},[284,410,411],{},[287,412,413,417],{},[290,414,415],{},[82,416,84],{},[290,418,419],{},[82,420,106],{},[299,422,423,440,460,489,511,526,551,573,585,613,641],{},[287,424,425,435],{},[304,426,427],{},[92,428,432],{"href":429,"rel":430},"https:\u002F\u002Fgithub.com\u002Fchrissgon\u002Fperfectui\u002Fblob\u002Fv0.23.0\u002Fdocs\u002Fbutton.md",[431],"nofollow",[82,433,434],{},"btn",[304,436,437],{},[82,438,439],{},"pui-btn",[287,441,442,451],{},[304,443,444],{},[92,445,448],{"href":446,"rel":447},"https:\u002F\u002Fgithub.com\u002Fchrissgon\u002Fperfectui\u002Fblob\u002Fv0.23.0\u002Fdocs\u002Fbadge.md",[431],[82,449,450],{},"badge",[304,452,453,456,457],{},[82,454,455],{},"pui-badge",", plus the new ",[82,458,459],{},"pui-chip",[287,461,462,478],{},[304,463,464,471,472,471,475],{},[92,465,468],{"href":466,"rel":467},"https:\u002F\u002Fgithub.com\u002Fchrissgon\u002Fperfectui\u002Fblob\u002Fv0.23.0\u002Fdocs\u002Fcard.md",[431],[82,469,470],{},"card",", ",[82,473,474],{},"card-header",[82,476,477],{},"card-content",[304,479,480,471,483,471,486],{},[82,481,482],{},"pui-card",[82,484,485],{},"pui-card-header",[82,487,488],{},"pui-card-content",[287,490,491,503],{},[304,492,493,471,500],{},[92,494,497],{"href":495,"rel":496},"https:\u002F\u002Fgithub.com\u002Fchrissgon\u002Fperfectui\u002Fblob\u002Fv0.23.0\u002Fdocs\u002Flist.md",[431],[82,498,499],{},"list",[82,501,502],{},"list-item",[304,504,505,471,508],{},[82,506,507],{},"pui-list",[82,509,510],{},"pui-list-item",[287,512,513,521],{},[304,514,515],{},[92,516,519],{"href":517,"rel":518},"https:\u002F\u002Fgithub.com\u002Fchrissgon\u002Fperfectui\u002Fblob\u002Fv0.23.0\u002Fdocs\u002Ftable.md",[431],[82,520,281],{},[304,522,523],{},[82,524,525],{},"pui-table",[287,527,528,540],{},[304,529,530,471,537],{},[92,531,534],{"href":532,"rel":533},"https:\u002F\u002Fgithub.com\u002Fchrissgon\u002Fperfectui\u002Fblob\u002Fv0.23.0\u002Fdocs\u002Ftimeline.md",[431],[82,535,536],{},"timeline",[82,538,539],{},"checkpoint",[304,541,542,471,545,471,548],{},[82,543,544],{},"pui-timeline",[82,546,547],{},"pui-checkpoint",[82,549,550],{},"pui-checkpoint-icon",[287,552,553,565],{},[304,554,555,471,562],{},[92,556,559],{"href":557,"rel":558},"https:\u002F\u002Fgithub.com\u002Fchrissgon\u002Fperfectui\u002Fblob\u002Fv0.23.0\u002Fdocs\u002Flayout-group.md",[431],[82,560,561],{},"group-row",[82,563,564],{},"group-col",[304,566,567,471,570],{},[82,568,569],{},"pui-group-row",[82,571,572],{},"pui-group-col",[287,574,575,580],{},[304,576,577],{},[82,578,579],{},"float",[304,581,582],{},[82,583,584],{},"pui-float",[287,586,587,602],{},[304,588,589,471,596,471,599],{},[92,590,593],{"href":591,"rel":592},"https:\u002F\u002Fgithub.com\u002Fchrissgon\u002Fperfectui\u002Fblob\u002Fv0.23.0\u002Fdocs\u002Finput.md",[431],[82,594,595],{},"input",[82,597,598],{},"addon",[82,600,601],{},"input-group",[304,603,604,471,607,471,610],{},[82,605,606],{},"pui-input",[82,608,609],{},"pui-addon",[82,611,612],{},"pui-input-group",[287,614,615,630],{},[304,616,617,471,624,471,627],{},[92,618,621],{"href":619,"rel":620},"https:\u002F\u002Fgithub.com\u002Fchrissgon\u002Fperfectui\u002Fblob\u002Fv0.23.0\u002Fdocs\u002Fcheckbox.md",[431],[82,622,623],{},"checkbox",[82,625,626],{},"radio",[82,628,629],{},"switch",[304,631,632,471,635,471,638],{},[82,633,634],{},"pui-checkbox",[82,636,637],{},"pui-radio",[82,639,640],{},"pui-switch",[287,642,643,651],{},[304,644,645,471,648],{},[82,646,647],{},"rounded",[82,649,650],{},"rounded-full",[304,652,653,471,656],{},[82,654,655],{},"pui-rounded",[82,657,658],{},"pui-rounded-full",[660,661,663],"h3",{"id":662},"modal","Modal",[129,665,667],{"className":131,"code":666,"language":133,"meta":134,"style":134},"-\u003Cbutton class=\"btn style-solid-primary\" data-modal=\"confirm\">Open\u003C\u002Fbutton>\n-\u003Cdiv class=\"modal\" id=\"confirm\">\n-  \u003Cdiv class=\"card\">…\u003C\u002Fdiv>\n-\u003C\u002Fdiv>\n+\u003Cbutton class=\"pui-btn pui-solid pui-theme\" commandfor=\"confirm\" command=\"show-modal\">Open\u003C\u002Fbutton>\n+\u003Cdialog class=\"pui-modal\" id=\"confirm\" closedby=\"any\">\n+  \u003Cdiv class=\"pui-card\">…\u003C\u002Fdiv>\n+\u003C\u002Fdialog>\n",[82,668,669,674,679,684,689,695,701,707],{"__ignoreMap":134},[138,670,671],{"class":140,"line":141},[138,672,673],{"class":144},"-\u003Cbutton class=\"btn style-solid-primary\" data-modal=\"confirm\">Open\u003C\u002Fbutton>\n",[138,675,676],{"class":140,"line":148},[138,677,678],{"class":144},"-\u003Cdiv class=\"modal\" id=\"confirm\">\n",[138,680,681],{"class":140,"line":154},[138,682,683],{"class":144},"-  \u003Cdiv class=\"card\">…\u003C\u002Fdiv>\n",[138,685,686],{"class":140,"line":161},[138,687,688],{"class":144},"-\u003C\u002Fdiv>\n",[138,690,692],{"class":140,"line":691},5,[138,693,694],{"class":157},"+\u003Cbutton class=\"pui-btn pui-solid pui-theme\" commandfor=\"confirm\" command=\"show-modal\">Open\u003C\u002Fbutton>\n",[138,696,698],{"class":140,"line":697},6,[138,699,700],{"class":157},"+\u003Cdialog class=\"pui-modal\" id=\"confirm\" closedby=\"any\">\n",[138,702,704],{"class":140,"line":703},7,[138,705,706],{"class":157},"+  \u003Cdiv class=\"pui-card\">…\u003C\u002Fdiv>\n",[138,708,710],{"class":140,"line":709},8,[138,711,712],{"class":157},"+\u003C\u002Fdialog>\n",[88,714,715,724],{},[716,717,718,390,721,127],"li",{},[82,719,720],{},"data-autoclose",[82,722,723],{},"commandfor=\"id\" command=\"close\"",[716,725,726,729,730,733,734,733,737,127],{},[82,727,728],{},"modal.static-backdrop"," is now a ",[82,731,732],{},"\u003Cdialog>"," ",[116,735,736],{},"without",[82,738,739],{},"closedby",[660,741,743],{"id":742},"dropdown","Dropdown",[129,745,747],{"className":131,"code":746,"language":133,"meta":134,"style":134},"-\u003Cbutton class=\"dropdown-trigger\">Menu\u003C\u002Fbutton>\n-\u003Cdiv class=\"dropdown\">…\u003C\u002Fdiv>\n+\u003Cbutton class=\"pui-btn pui-outline pui-surface\" popovertarget=\"menu\">Menu\u003C\u002Fbutton>\n+\u003Cdiv class=\"pui-dropdown\" id=\"menu\" popover>…\u003C\u002Fdiv>\n",[82,748,749,754,759,764],{"__ignoreMap":134},[138,750,751],{"class":140,"line":141},[138,752,753],{"class":144},"-\u003Cbutton class=\"dropdown-trigger\">Menu\u003C\u002Fbutton>\n",[138,755,756],{"class":140,"line":148},[138,757,758],{"class":144},"-\u003Cdiv class=\"dropdown\">…\u003C\u002Fdiv>\n",[138,760,761],{"class":140,"line":154},[138,762,763],{"class":157},"+\u003Cbutton class=\"pui-btn pui-outline pui-surface\" popovertarget=\"menu\">Menu\u003C\u002Fbutton>\n",[138,765,766],{"class":140,"line":161},[138,767,768],{"class":157},"+\u003Cdiv class=\"pui-dropdown\" id=\"menu\" popover>…\u003C\u002Fdiv>\n",[71,770,771,772,775],{},"The ",[82,773,774],{},".ignore"," class is gone: a click inside a popover does not close it.",[660,777,779],{"id":778},"tooltip","Tooltip",[129,781,783],{"className":131,"code":782,"language":133,"meta":134,"style":134},"-\u003Cbutton class=\"tooltip\" data-tooltip=\"Help text\">?\u003C\u002Fbutton>\n+\u003Cbutton interestfor=\"help\">?\u003C\u002Fbutton>\n+\u003Cdiv class=\"pui-tooltip\" id=\"help\" popover=\"hint\">Help text\u003C\u002Fdiv>\n",[82,784,785,790,795],{"__ignoreMap":134},[138,786,787],{"class":140,"line":141},[138,788,789],{"class":144},"-\u003Cbutton class=\"tooltip\" data-tooltip=\"Help text\">?\u003C\u002Fbutton>\n",[138,791,792],{"class":140,"line":148},[138,793,794],{"class":157},"+\u003Cbutton interestfor=\"help\">?\u003C\u002Fbutton>\n",[138,796,797],{"class":140,"line":154},[138,798,799],{"class":157},"+\u003Cdiv class=\"pui-tooltip\" id=\"help\" popover=\"hint\">Help text\u003C\u002Fdiv>\n",[71,801,802],{},"This is the change that fixes tooltips on touch screens.",[660,804,806],{"id":805},"accordion","Accordion",[129,808,810],{"className":131,"code":809,"language":133,"meta":134,"style":134},"-\u003Cdiv class=\"accordion\">\n-  \u003Cdiv class=\"accordion-item\">…\u003C\u002Fdiv>\n-\u003C\u002Fdiv>\n+\u003Cdiv class=\"pui-accordion\">\n+  \u003Cdetails class=\"pui-accordion-item\" name=\"faq\">\n+    \u003Csummary>Question\u003C\u002Fsummary>\n+    \u003Cp>Answer\u003C\u002Fp>\n+  \u003C\u002Fdetails>\n+\u003C\u002Fdiv>\n",[82,811,812,817,822,826,831,836,841,846,851],{"__ignoreMap":134},[138,813,814],{"class":140,"line":141},[138,815,816],{"class":144},"-\u003Cdiv class=\"accordion\">\n",[138,818,819],{"class":140,"line":148},[138,820,821],{"class":144},"-  \u003Cdiv class=\"accordion-item\">…\u003C\u002Fdiv>\n",[138,823,824],{"class":140,"line":154},[138,825,688],{"class":144},[138,827,828],{"class":140,"line":161},[138,829,830],{"class":157},"+\u003Cdiv class=\"pui-accordion\">\n",[138,832,833],{"class":140,"line":691},[138,834,835],{"class":157},"+  \u003Cdetails class=\"pui-accordion-item\" name=\"faq\">\n",[138,837,838],{"class":140,"line":697},[138,839,840],{"class":157},"+    \u003Csummary>Question\u003C\u002Fsummary>\n",[138,842,843],{"class":140,"line":703},[138,844,845],{"class":157},"+    \u003Cp>Answer\u003C\u002Fp>\n",[138,847,848],{"class":140,"line":709},[138,849,850],{"class":157},"+  \u003C\u002Fdetails>\n",[138,852,854],{"class":140,"line":853},9,[138,855,856],{"class":157},"+\u003C\u002Fdiv>\n",[71,858,859,860,863],{},"One open at a time is the shared ",[82,861,862],{},"name",", handled by the browser.",[660,865,867],{"id":866},"field-group","Field group",[71,869,870],{},"The label and the message used to be data attributes rendered as pseudo\nelements. They are real elements now, which is what makes them announced by\nscreen readers, translatable and selectable.",[129,872,874],{"className":131,"code":873,"language":133,"meta":134,"style":134},"-\u003Cdiv class=\"field-group field-group-error\" data-label=\"Email\" data-message=\"Invalid\">\n-  \u003Cinput class=\"input\" \u002F>\n-\u003C\u002Fdiv>\n+\u003Clabel class=\"pui-field-group\">\n+  \u003Cspan>Email\u003C\u002Fspan>\n+  \u003Cinput class=\"pui-input\" aria-invalid=\"true\" aria-describedby=\"email-error\" \u002F>\n+  \u003Csmall id=\"email-error\">Invalid\u003C\u002Fsmall>\n+\u003C\u002Flabel>\n",[82,875,876,881,886,890,895,900,905,910],{"__ignoreMap":134},[138,877,878],{"class":140,"line":141},[138,879,880],{"class":144},"-\u003Cdiv class=\"field-group field-group-error\" data-label=\"Email\" data-message=\"Invalid\">\n",[138,882,883],{"class":140,"line":148},[138,884,885],{"class":144},"-  \u003Cinput class=\"input\" \u002F>\n",[138,887,888],{"class":140,"line":154},[138,889,688],{"class":144},[138,891,892],{"class":140,"line":161},[138,893,894],{"class":157},"+\u003Clabel class=\"pui-field-group\">\n",[138,896,897],{"class":140,"line":691},[138,898,899],{"class":157},"+  \u003Cspan>Email\u003C\u002Fspan>\n",[138,901,902],{"class":140,"line":697},[138,903,904],{"class":157},"+  \u003Cinput class=\"pui-input\" aria-invalid=\"true\" aria-describedby=\"email-error\" \u002F>\n",[138,906,907],{"class":140,"line":703},[138,908,909],{"class":157},"+  \u003Csmall id=\"email-error\">Invalid\u003C\u002Fsmall>\n",[138,911,912],{"class":140,"line":709},[138,913,914],{"class":157},"+\u003C\u002Flabel>\n",[71,916,917,920,921,924],{},[82,918,919],{},"field-group-\u003Cstate>"," is gone: the state is ",[82,922,923],{},"aria-invalid"," on the control.",[75,926,928],{"id":927},"_5-dark-mode","5. Dark mode",[129,930,932],{"className":131,"code":931,"language":133,"meta":134,"style":134},"-\u003Chtml class=\"dark\">\n+\u003Chtml data-pui-mode=\"dark\">\n",[82,933,934,939],{"__ignoreMap":134},[138,935,936],{"class":140,"line":141},[138,937,938],{"class":144},"-\u003Chtml class=\"dark\">\n",[138,940,941],{"class":140,"line":148},[138,942,943],{"class":157},"+\u003Chtml data-pui-mode=\"dark\">\n",[129,945,947],{"className":131,"code":946,"language":133,"meta":134,"style":134},"-import { setMode } from \"@chrissgon\u002Fperfectui\";\n+import { setMode } from \"@chrissgon\u002Fperfectui\u002Fmode\";\n",[82,948,949,954],{"__ignoreMap":134},[138,950,951],{"class":140,"line":141},[138,952,953],{"class":144},"-import { setMode } from \"@chrissgon\u002Fperfectui\";\n",[138,955,956],{"class":140,"line":148},[138,957,958],{"class":157},"+import { setMode } from \"@chrissgon\u002Fperfectui\u002Fmode\";\n",[71,960,961],{},"With no attribute at all the library follows the operating system, which it\ncould not do before. The choice is persisted in a cookie so a server can render\nit on the first paint.",[75,963,965],{"id":964},"_6-theming","6. Theming",[71,967,968,971],{},[82,969,970],{},"setThemeColor()"," is gone. Theming is CSS:",[129,973,975],{"className":131,"code":974,"language":133,"meta":134,"style":134},"-setThemeColor(\"#7c3aed\");\n+:root {\n+  --pui-theme: #7c3aed;\n+}\n",[82,976,977,982,987,992],{"__ignoreMap":134},[138,978,979],{"class":140,"line":141},[138,980,981],{"class":144},"-setThemeColor(\"#7c3aed\");\n",[138,983,984],{"class":140,"line":148},[138,985,986],{"class":157},"+:root {\n",[138,988,989],{"class":140,"line":154},[138,990,991],{"class":157},"+  --pui-theme: #7c3aed;\n",[138,993,994],{"class":140,"line":161},[138,995,996],{"class":157},"+}\n",[71,998,999,1000,1003,1004,471,1007,471,1010,1013,1014,1017,1018,1021,1022,1025,1026,1003,1029,1013,1032,1003,1035,1038,1039,127],{},"The palettes went with it. ",[82,1001,1002],{},"--theme50"," … ",[82,1005,1006],{},"--theme950",[82,1008,1009],{},"--gray*",[82,1011,1012],{},"--red*",",\n",[82,1015,1016],{},"--amber*"," and ",[82,1019,1020],{},"--green*"," no longer exist: every tone is derived from one value\nwith ",[82,1023,1024],{},"color-mix()",". The size scales are gone too — ",[82,1027,1028],{},"--fontXS",[82,1030,1031],{},"--font9XL",[82,1033,1034],{},"--spacingXS",[82,1036,1037],{},"--spacingXL"," — replaced by four base tokens that every\ncomponent derives from. See\n",[92,1040,1042],{"href":1041},"\u002Fdocs\u002Fv1\u002Fcustomization\u002Ftheme-color","Theme Color",[75,1044,1046],{"id":1045},"_7-things-that-were-removed-with-no-replacement","7. Things that were removed with no replacement",[281,1048,1049,1059],{},[284,1050,1051],{},[287,1052,1053,1056],{},[290,1054,1055],{},"Removed",[290,1057,1058],{},"What to do instead",[299,1060,1061,1069,1088,1101,1116,1137,1162,1179,1201],{},[287,1062,1063,1066],{},[304,1064,1065],{},"The CSS reset and the Poppins import",[304,1067,1068],{},"Nothing: Perfect UI no longer touches your page",[287,1070,1071,1085],{},[304,1072,1073,471,1076,471,1079,471,1082],{},[82,1074,1075],{},".bg-*",[82,1077,1078],{},".text-*",[82,1080,1081],{},".border-*",[82,1083,1084],{},".spacing-*",[304,1086,1087],{},"Your own CSS, or Tailwind",[287,1089,1090,1098],{},[304,1091,1092,471,1095],{},[82,1093,1094],{},"overflow-hidden",[82,1096,1097],{},"hr.vertical",[304,1099,1100],{},"Your own CSS",[287,1102,1103,1113],{},[304,1104,1105,1108,1109,1112],{},[82,1106,1107],{},"group-item"," and the ",[82,1110,1111],{},"[class*=\"item\"]"," rule",[304,1114,1115],{},"Nothing: a group styles its direct children",[287,1117,1118,1129],{},[304,1119,1120,471,1123,471,1126],{},[82,1121,1122],{},"table-bordered",[82,1124,1125],{},"table-borderless",[82,1127,1128],{},"table-responsive",[304,1130,1131,1132,1136],{},"Recipes in the ",[92,1133,1135],{"href":1134},"\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftable","Table"," docs",[287,1138,1139,1150],{},[304,1140,1141,471,1144,471,1147],{},[82,1142,1143],{},"list-bordered",[82,1145,1146],{},"unmarker",[82,1148,1149],{},".active",[304,1151,1152,1153,471,1156,471,1159],{},"Composition: ",[82,1154,1155],{},"pui-outline pui-surface",[82,1157,1158],{},"list-style: none",[82,1160,1161],{},"pui-soft pui-theme",[287,1163,1164,1172],{},[304,1165,1166,471,1169],{},[82,1167,1168],{},"float-right",[82,1170,1171],{},"float-top",[304,1173,1174,1175],{},"One declaration, see ",[92,1176,1178],{"href":1177},"\u002Fdocs\u002Fv1\u002Fgeneral\u002Ffloat","Float",[287,1180,1181,1198],{},[304,1182,1183,471,1186,471,1189,471,1192,471,1195],{},[82,1184,1185],{},"loadFunctions()",[82,1187,1188],{},"Accordion()",[82,1190,1191],{},"Dropdown()",[82,1193,1194],{},"Modal()",[82,1196,1197],{},"Checkbox()",[304,1199,1200],{},"Nothing: the browser does it now",[287,1202,1203,1211],{},[304,1204,1205,471,1208],{},[82,1206,1207],{},"window.perfectui",[82,1209,1210],{},"document.perfectui",[304,1212,1213],{},"ESM imports",[71,1215,1216,471,1219,471,1222,1017,1225,1228,1229,1017,1232,127],{},[82,1217,1218],{},"table-striped",[82,1220,1221],{},"table-hoverable",[82,1223,1224],{},"list-striped",[82,1226,1227],{},"list-hoverable"," survive\nas ",[82,1230,1231],{},"pui-striped",[82,1233,1234],{},"pui-hoverable",[75,1236,1238],{"id":1237},"_8-what-you-no-longer-have-to-do","8. What you no longer have to do",[88,1240,1241,1250,1253,1258],{},[716,1242,1243,1244,1246,1247,1249],{},"No ",[82,1245,1185],{}," after rendering. Components inserted at any time work,\nbecause the library listens on ",[82,1248,126],{}," instead of scanning the DOM.",[716,1251,1252],{},"No overrides to undo the reset.",[716,1254,1243,1255,1257],{},[82,1256,96],{}," to beat the library: every rule lives in a cascade layer, so\nany plain CSS of yours already wins.",[716,1259,1260],{},"No guard for server rendering: importing the JavaScript does nothing without a\nDOM.",[75,1262,1264],{"id":1263},"known-trade-offs","Known trade-offs",[88,1266,1267,1284],{},[716,1268,1269,1270,471,1273,1276,1277,1280,1281,1283],{},"In light mode, a solid ",[82,1271,1272],{},"theme",[82,1274,1275],{},"success"," or ",[82,1278,1279],{},"warn"," fill sits between 3.2:1\nand 3.5:1 against its white label — above the 3:1 floor for interface\nelements, below the 4.5:1 that WCAG AA asks for text. This keeps the\n",[82,1282,84],{}," palette. If you need AA, override the three tokens with a darker\ntone.",[716,1285,1286,1289,1290,1293],{},[82,1287,1288],{},"pui-soft pui-surface"," has nothing to paint, since it tints the page\nbackground over the page background. Use ",[82,1291,1292],{},"pui-soft pui-muted"," for a neutral\nfill.",[1295,1296,1297],"style",{},"html pre.shiki code .sz5At, html code.shiki .sz5At{--shiki-default:var(--site-code-tag)}html pre.shiki code .s8qk9, html code.shiki .s8qk9{--shiki-default:var(--site-code-punct)}html pre.shiki code .s8AH5, html code.shiki .s8AH5{--shiki-default:var(--site-code-value)}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);}html pre.shiki code .sUVsD, html code.shiki .sUVsD{--shiki-default:var(--site-code-deleted)}",{"title":134,"searchDepth":148,"depth":148,"links":1299},[1300,1301,1302,1303,1304,1311,1312,1313,1314,1315],{"id":77,"depth":148,"text":78},{"id":110,"depth":148,"text":111},{"id":234,"depth":148,"text":235},{"id":263,"depth":148,"text":264},{"id":405,"depth":148,"text":406,"children":1305},[1306,1307,1308,1309,1310],{"id":662,"depth":154,"text":663},{"id":742,"depth":154,"text":743},{"id":778,"depth":154,"text":779},{"id":805,"depth":154,"text":806},{"id":866,"depth":154,"text":867},{"id":927,"depth":148,"text":928},{"id":964,"depth":148,"text":965},{"id":1045,"depth":148,"text":1046},{"id":1237,"depth":148,"text":1238},{"id":1263,"depth":148,"text":1264},"1.0","`1.0.0` is a rewrite. The SCSS build is gone, every class is prefixed, and the components that used to be driven by Perfect UI's JavaScript are now driven by the browser.","md",{},true,"\u002Fdocs\u002Fv1\u002Fgetting-started\u002Fmigrating-from-0-x",{"title":16,"description":1317},null,"docs\u002Fv1\u002F01.getting-started\u002F04.migrating-from-0-x",[1326,52],"guide","1.0.0-beta.1","_M8RFfKpcqtzkxtAorA-p4Vx5_oCsu_lcLrC7WnGpCs",[1330],{"title":1331,"path":14,"stem":1332,"children":1333,"page":1361},"Docs","docs",[1334],{"title":1335,"path":1336,"stem":1337,"children":1338,"page":1361},"V1","\u002Fdocs\u002Fv1","docs\u002Fv1",[1339,1362,1373,1384,1427],{"title":1340,"path":1341,"stem":1342,"children":1343,"page":1361},"Getting Started","\u002Fdocs\u002Fv1\u002Fgetting-started","docs\u002Fv1\u002F01.getting-started",[1344,1348,1352,1356,1357],{"title":1345,"path":1346,"stem":1347},"Installation","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Finstallation","docs\u002Fv1\u002F01.getting-started\u002F01.installation",{"title":1349,"path":1350,"stem":1351},"TypeScript","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftypescript","docs\u002Fv1\u002F01.getting-started\u002F02.typescript",{"title":1353,"path":1354,"stem":1355},"Tailwind CSS","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftailwind-css","docs\u002Fv1\u002F01.getting-started\u002F03.tailwind-css",{"title":16,"path":1321,"stem":1324},{"title":1358,"path":1359,"stem":1360},"License","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Flicense","docs\u002Fv1\u002F01.getting-started\u002F05.license",false,{"title":1363,"path":1364,"stem":1365,"children":1366,"page":1361},"Customization","\u002Fdocs\u002Fv1\u002Fcustomization","docs\u002Fv1\u002F02.customization",[1367,1371],{"title":1368,"path":1369,"stem":1370},"Dark Mode","\u002Fdocs\u002Fv1\u002Fcustomization\u002Fdark-mode","docs\u002Fv1\u002F02.customization\u002F01.dark-mode",{"title":1042,"path":1041,"stem":1372},"docs\u002Fv1\u002F02.customization\u002F02.theme-color",{"title":1374,"path":1375,"stem":1376,"children":1377,"page":1361},"General","\u002Fdocs\u002Fv1\u002Fgeneral","docs\u002Fv1\u002F03.general",[1378,1382],{"title":1379,"path":1380,"stem":1381},"Layout Group","\u002Fdocs\u002Fv1\u002Fgeneral\u002Flayout-group","docs\u002Fv1\u002F03.general\u002F01.layout-group",{"title":1178,"path":1177,"stem":1383},"docs\u002Fv1\u002F03.general\u002F02.float",{"title":1385,"path":1386,"stem":1387,"children":1388,"page":1361},"Components","\u002Fdocs\u002Fv1\u002Fcomponents","docs\u002Fv1\u002F04.components",[1389,1392,1396,1400,1404,1408,1411,1415,1418,1420,1424],{"title":806,"path":1390,"stem":1391},"\u002Fdocs\u002Fv1\u002Fcomponents\u002Faccordion","docs\u002Fv1\u002F04.components\u002F01.accordion",{"title":1393,"path":1394,"stem":1395},"Badge","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbadge","docs\u002Fv1\u002F04.components\u002F02.badge",{"title":1397,"path":1398,"stem":1399},"Button","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbutton","docs\u002Fv1\u002F04.components\u002F03.button",{"title":1401,"path":1402,"stem":1403},"Card","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fcard","docs\u002Fv1\u002F04.components\u002F04.card",{"title":1405,"path":1406,"stem":1407},"Chip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fchip","docs\u002Fv1\u002F04.components\u002F05.chip",{"title":743,"path":1409,"stem":1410},"\u002Fdocs\u002Fv1\u002Fcomponents\u002Fdropdown","docs\u002Fv1\u002F04.components\u002F06.dropdown",{"title":1412,"path":1413,"stem":1414},"List","\u002Fdocs\u002Fv1\u002Fcomponents\u002Flist","docs\u002Fv1\u002F04.components\u002F07.list",{"title":663,"path":1416,"stem":1417},"\u002Fdocs\u002Fv1\u002Fcomponents\u002Fmodal","docs\u002Fv1\u002F04.components\u002F08.modal",{"title":1135,"path":1134,"stem":1419},"docs\u002Fv1\u002F04.components\u002F09.table",{"title":1421,"path":1422,"stem":1423},"Timeline","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftimeline","docs\u002Fv1\u002F04.components\u002F10.timeline",{"title":779,"path":1425,"stem":1426},"\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftooltip","docs\u002Fv1\u002F04.components\u002F11.tooltip",{"title":1428,"path":1429,"stem":1430,"children":1431,"page":1361},"Forms","\u002Fdocs\u002Fv1\u002Fforms","docs\u002Fv1\u002F05.forms",[1432,1436,1440,1444,1448,1452,1456,1460],{"title":1433,"path":1434,"stem":1435},"Field Group","\u002Fdocs\u002Fv1\u002Fforms\u002Ffield-group","docs\u002Fv1\u002F05.forms\u002F01.field-group",{"title":1437,"path":1438,"stem":1439},"Input","\u002Fdocs\u002Fv1\u002Fforms\u002Finput","docs\u002Fv1\u002F05.forms\u002F02.input",{"title":1441,"path":1442,"stem":1443},"Input Group","\u002Fdocs\u002Fv1\u002Fforms\u002Finput-group","docs\u002Fv1\u002F05.forms\u002F03.input-group",{"title":1445,"path":1446,"stem":1447},"Textarea","\u002Fdocs\u002Fv1\u002Fforms\u002Ftextarea","docs\u002Fv1\u002F05.forms\u002F04.textarea",{"title":1449,"path":1450,"stem":1451},"Select","\u002Fdocs\u002Fv1\u002Fforms\u002Fselect","docs\u002Fv1\u002F05.forms\u002F05.select",{"title":1453,"path":1454,"stem":1455},"Checkbox","\u002Fdocs\u002Fv1\u002Fforms\u002Fcheckbox","docs\u002Fv1\u002F05.forms\u002F06.checkbox",{"title":1457,"path":1458,"stem":1459},"Radio","\u002Fdocs\u002Fv1\u002Fforms\u002Fradio","docs\u002Fv1\u002F05.forms\u002F07.radio",{"title":1461,"path":1462,"stem":1463},"Switch","\u002Fdocs\u002Fv1\u002Fforms\u002Fswitch","docs\u002Fv1\u002F05.forms\u002F08.switch",1790369303495]