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