[{"data":1,"prerenderedAt":541},["ShallowReactive",2],{"landing-copy":3,"\u002Fdocs\u002Fv1\u002Fcomponents\u002Fchip":65,"nav:v1":399},{"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":387,"description":388,"extension":389,"from":387,"meta":390,"navigation":391,"path":392,"seo":393,"since":387,"stem":394,"tags":395,"to":387,"__hash__":398},"docs_v1\u002Fdocs\u002Fv1\u002F04.components\u002F05.chip.md","Chip",{"type":69,"value":70,"toc":382},"minimark",[71,156,161,165,257,261,296,300,307,378],[72,73,74],"example",{},[75,76,81],"pre",{"className":77,"code":78,"language":79,"meta":80,"style":80},"language-html shiki shiki-themes perfectui-site","\u003Cspan class=\"pui-chip pui-soft pui-success\">Active\u003C\u002Fspan>\n\u003Cspan class=\"pui-chip pui-outline pui-muted\">Draft\u003C\u002Fspan>\n","html","",[82,83,84,127],"code",{"__ignoreMap":80},[85,86,89,93,96,100,103,106,110,112,115,119,122,124],"span",{"class":87,"line":88},"line",1,[85,90,92],{"class":91},"s8qk9","\u003C",[85,94,85],{"class":95},"sz5At",[85,97,99],{"class":98},"sz6eq"," class",[85,101,102],{"class":91},"=",[85,104,105],{"class":91},"\"",[85,107,109],{"class":108},"s8AH5","pui-chip pui-soft pui-success",[85,111,105],{"class":91},[85,113,114],{"class":91},">",[85,116,118],{"class":117},"stV6K","Active",[85,120,121],{"class":91},"\u003C\u002F",[85,123,85],{"class":95},[85,125,126],{"class":91},">\n",[85,128,130,132,134,136,138,140,143,145,147,150,152,154],{"class":87,"line":129},2,[85,131,92],{"class":91},[85,133,85],{"class":95},[85,135,99],{"class":98},[85,137,102],{"class":91},[85,139,105],{"class":91},[85,141,142],{"class":108},"pui-chip pui-outline pui-muted",[85,144,105],{"class":91},[85,146,114],{"class":91},[85,148,149],{"class":117},"Draft",[85,151,121],{"class":91},[85,153,85],{"class":95},[85,155,126],{"class":91},[157,158,160],"h2",{"id":159},"sizing","Sizing",[162,163,164],"p",{},"Perfect UI has no size modifiers. Size is expressed by choosing the component:",[72,166,167],{},[75,168,170],{"className":77,"code":169,"language":79,"meta":80,"style":80},"\u003Cbutton class=\"pui-btn pui-solid pui-theme\">Button\u003C\u002Fbutton>\n\u003Cspan class=\"pui-chip pui-solid pui-theme\">Chip\u003C\u002Fspan>\n\u003Cspan class=\"pui-badge pui-solid pui-theme\">Badge\u003C\u002Fspan>\n",[82,171,172,201,228],{"__ignoreMap":80},[85,173,174,176,179,181,183,185,188,190,192,195,197,199],{"class":87,"line":88},[85,175,92],{"class":91},[85,177,178],{"class":95},"button",[85,180,99],{"class":98},[85,182,102],{"class":91},[85,184,105],{"class":91},[85,186,187],{"class":108},"pui-btn pui-solid pui-theme",[85,189,105],{"class":91},[85,191,114],{"class":91},[85,193,194],{"class":117},"Button",[85,196,121],{"class":91},[85,198,178],{"class":95},[85,200,126],{"class":91},[85,202,203,205,207,209,211,213,216,218,220,222,224,226],{"class":87,"line":129},[85,204,92],{"class":91},[85,206,85],{"class":95},[85,208,99],{"class":98},[85,210,102],{"class":91},[85,212,105],{"class":91},[85,214,215],{"class":108},"pui-chip pui-solid pui-theme",[85,217,105],{"class":91},[85,219,114],{"class":91},[85,221,67],{"class":117},[85,223,121],{"class":91},[85,225,85],{"class":95},[85,227,126],{"class":91},[85,229,231,233,235,237,239,241,244,246,248,251,253,255],{"class":87,"line":230},3,[85,232,92],{"class":91},[85,234,85],{"class":95},[85,236,99],{"class":98},[85,238,102],{"class":91},[85,240,105],{"class":91},[85,242,243],{"class":108},"pui-badge pui-solid pui-theme",[85,245,105],{"class":91},[85,247,114],{"class":91},[85,249,250],{"class":117},"Badge",[85,252,121],{"class":91},[85,254,85],{"class":95},[85,256,126],{"class":91},[157,258,260],{"id":259},"rounded","Rounded",[72,262,263],{},[75,264,266],{"className":77,"code":265,"language":79,"meta":80,"style":80},"\u003Cspan class=\"pui-chip pui-soft pui-theme pui-rounded-full\">Pill\u003C\u002Fspan>\n",[82,267,268],{"__ignoreMap":80},[85,269,270,272,274,276,278,280,283,285,287,290,292,294],{"class":87,"line":88},[85,271,92],{"class":91},[85,273,85],{"class":95},[85,275,99],{"class":98},[85,277,102],{"class":91},[85,279,105],{"class":91},[85,281,282],{"class":108},"pui-chip pui-soft pui-theme pui-rounded-full",[85,284,105],{"class":91},[85,286,114],{"class":91},[85,288,289],{"class":117},"Pill",[85,291,121],{"class":91},[85,293,85],{"class":95},[85,295,126],{"class":91},[157,297,299],{"id":298},"interactive","Interactive",[162,301,302,303,306],{},"A chip can be a ",[82,304,305],{},"\u003Cbutton>"," when it does something:",[72,308,309],{},[75,310,312],{"className":77,"code":311,"language":79,"meta":80,"style":80},"\u003Cbutton class=\"pui-chip pui-outline pui-muted\">\n  TypeScript\n  \u003Cspan aria-hidden=\"true\">×\u003C\u002Fspan>\n\u003C\u002Fbutton>\n",[82,313,314,332,337,369],{"__ignoreMap":80},[85,315,316,318,320,322,324,326,328,330],{"class":87,"line":88},[85,317,92],{"class":91},[85,319,178],{"class":95},[85,321,99],{"class":98},[85,323,102],{"class":91},[85,325,105],{"class":91},[85,327,142],{"class":108},[85,329,105],{"class":91},[85,331,126],{"class":91},[85,333,334],{"class":87,"line":129},[85,335,336],{"class":117},"  TypeScript\n",[85,338,339,342,344,347,349,351,354,356,359,362,365,367],{"class":87,"line":230},[85,340,341],{"class":91},"  \u003C",[85,343,85],{"class":95},[85,345,346],{"class":98}," aria-hidden",[85,348,102],{"class":91},[85,350,105],{"class":91},[85,352,353],{"class":108},"true",[85,355,105],{"class":91},[85,357,358],{"class":91},">&",[85,360,361],{"class":117},"times",[85,363,364],{"class":91},";\u003C\u002F",[85,366,85],{"class":95},[85,368,126],{"class":91},[85,370,372,374,376],{"class":87,"line":371},4,[85,373,121],{"class":91},[85,375,178],{"class":95},[85,377,126],{"class":91},[379,380,381],"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":80,"searchDepth":129,"depth":129,"links":383},[384,385,386],{"id":159,"depth":129,"text":160},{"id":259,"depth":129,"text":260},{"id":298,"depth":129,"text":299},null,"A chip is a button-sized label: smaller than `pui-btn`, larger than `pui-badge`. Use it for filters, tags and selections.","md",{},true,"\u002Fdocs\u002Fv1\u002Fcomponents\u002Fchip",{"title":67,"description":388},"docs\u002Fv1\u002F04.components\u002F05.chip",[396,397],"component","chip","PCLphbb6_BEzMKU_Otwg7u3pZtkhgztF1tIkbwpl5rE",[400],{"title":401,"path":14,"stem":402,"children":403,"page":433},"Docs","docs",[404],{"title":405,"path":406,"stem":407,"children":408,"page":433},"V1","\u002Fdocs\u002Fv1","docs\u002Fv1",[409,434,447,460,504],{"title":410,"path":411,"stem":412,"children":413,"page":433},"Getting Started","\u002Fdocs\u002Fv1\u002Fgetting-started","docs\u002Fv1\u002F01.getting-started",[414,418,422,426,429],{"title":415,"path":416,"stem":417},"Installation","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Finstallation","docs\u002Fv1\u002F01.getting-started\u002F01.installation",{"title":419,"path":420,"stem":421},"TypeScript","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftypescript","docs\u002Fv1\u002F01.getting-started\u002F02.typescript",{"title":423,"path":424,"stem":425},"Tailwind CSS","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftailwind-css","docs\u002Fv1\u002F01.getting-started\u002F03.tailwind-css",{"title":16,"path":427,"stem":428},"\u002Fdocs\u002Fv1\u002Fgetting-started\u002Fmigrating-from-0-x","docs\u002Fv1\u002F01.getting-started\u002F04.migrating-from-0-x",{"title":430,"path":431,"stem":432},"License","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Flicense","docs\u002Fv1\u002F01.getting-started\u002F05.license",false,{"title":435,"path":436,"stem":437,"children":438,"page":433},"Customization","\u002Fdocs\u002Fv1\u002Fcustomization","docs\u002Fv1\u002F02.customization",[439,443],{"title":440,"path":441,"stem":442},"Dark Mode","\u002Fdocs\u002Fv1\u002Fcustomization\u002Fdark-mode","docs\u002Fv1\u002F02.customization\u002F01.dark-mode",{"title":444,"path":445,"stem":446},"Theme Color","\u002Fdocs\u002Fv1\u002Fcustomization\u002Ftheme-color","docs\u002Fv1\u002F02.customization\u002F02.theme-color",{"title":448,"path":449,"stem":450,"children":451,"page":433},"General","\u002Fdocs\u002Fv1\u002Fgeneral","docs\u002Fv1\u002F03.general",[452,456],{"title":453,"path":454,"stem":455},"Layout Group","\u002Fdocs\u002Fv1\u002Fgeneral\u002Flayout-group","docs\u002Fv1\u002F03.general\u002F01.layout-group",{"title":457,"path":458,"stem":459},"Float","\u002Fdocs\u002Fv1\u002Fgeneral\u002Ffloat","docs\u002Fv1\u002F03.general\u002F02.float",{"title":461,"path":462,"stem":463,"children":464,"page":433},"Components","\u002Fdocs\u002Fv1\u002Fcomponents","docs\u002Fv1\u002F04.components",[465,469,472,475,479,480,484,488,492,496,500],{"title":466,"path":467,"stem":468},"Accordion","\u002Fdocs\u002Fv1\u002Fcomponents\u002Faccordion","docs\u002Fv1\u002F04.components\u002F01.accordion",{"title":250,"path":470,"stem":471},"\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbadge","docs\u002Fv1\u002F04.components\u002F02.badge",{"title":194,"path":473,"stem":474},"\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbutton","docs\u002Fv1\u002F04.components\u002F03.button",{"title":476,"path":477,"stem":478},"Card","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fcard","docs\u002Fv1\u002F04.components\u002F04.card",{"title":67,"path":392,"stem":394},{"title":481,"path":482,"stem":483},"Dropdown","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fdropdown","docs\u002Fv1\u002F04.components\u002F06.dropdown",{"title":485,"path":486,"stem":487},"List","\u002Fdocs\u002Fv1\u002Fcomponents\u002Flist","docs\u002Fv1\u002F04.components\u002F07.list",{"title":489,"path":490,"stem":491},"Modal","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fmodal","docs\u002Fv1\u002F04.components\u002F08.modal",{"title":493,"path":494,"stem":495},"Table","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftable","docs\u002Fv1\u002F04.components\u002F09.table",{"title":497,"path":498,"stem":499},"Timeline","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftimeline","docs\u002Fv1\u002F04.components\u002F10.timeline",{"title":501,"path":502,"stem":503},"Tooltip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftooltip","docs\u002Fv1\u002F04.components\u002F11.tooltip",{"title":505,"path":506,"stem":507,"children":508,"page":433},"Forms","\u002Fdocs\u002Fv1\u002Fforms","docs\u002Fv1\u002F05.forms",[509,513,517,521,525,529,533,537],{"title":510,"path":511,"stem":512},"Field Group","\u002Fdocs\u002Fv1\u002Fforms\u002Ffield-group","docs\u002Fv1\u002F05.forms\u002F01.field-group",{"title":514,"path":515,"stem":516},"Input","\u002Fdocs\u002Fv1\u002Fforms\u002Finput","docs\u002Fv1\u002F05.forms\u002F02.input",{"title":518,"path":519,"stem":520},"Input Group","\u002Fdocs\u002Fv1\u002Fforms\u002Finput-group","docs\u002Fv1\u002F05.forms\u002F03.input-group",{"title":522,"path":523,"stem":524},"Textarea","\u002Fdocs\u002Fv1\u002Fforms\u002Ftextarea","docs\u002Fv1\u002F05.forms\u002F04.textarea",{"title":526,"path":527,"stem":528},"Select","\u002Fdocs\u002Fv1\u002Fforms\u002Fselect","docs\u002Fv1\u002F05.forms\u002F05.select",{"title":530,"path":531,"stem":532},"Checkbox","\u002Fdocs\u002Fv1\u002Fforms\u002Fcheckbox","docs\u002Fv1\u002F05.forms\u002F06.checkbox",{"title":534,"path":535,"stem":536},"Radio","\u002Fdocs\u002Fv1\u002Fforms\u002Fradio","docs\u002Fv1\u002F05.forms\u002F07.radio",{"title":538,"path":539,"stem":540},"Switch","\u002Fdocs\u002Fv1\u002Fforms\u002Fswitch","docs\u002Fv1\u002F05.forms\u002F08.switch",1790354564775]