[{"data":1,"prerenderedAt":5084},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-textarea":682,"-docs-theme-components-textarea-surround":5079},{"gettingStarted":4,"api":71,"theme":162},[5,36,51],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002Fgetting-started",[11,16,21,26,31],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002Fgetting-started\u002F01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002Fgetting-started\u002F02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","\u002Fdocs\u002Fgetting-started\u002Fguides","docs\u002Fgetting-started\u002F03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","\u002Fdocs\u002Fgetting-started\u002Fcomparisons","docs\u002Fgetting-started\u002F06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","\u002Fdocs\u002Fgetting-started\u002Flicensing","docs\u002Fgetting-started\u002F07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","\u002Fdocs\u002Fgetting-started\u002Ftooling","docs\u002Fgetting-started\u002Ftooling",[41,46],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli","docs\u002Fgetting-started\u002Ftooling\u002F01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fscanner","docs\u002Fgetting-started\u002Ftooling\u002F02.scanner","i-lucide-view",{"title":52,"icon":7,"path":53,"stem":54,"children":55,"page":7},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002Fgetting-started\u002Fintegrations",[56,61,66],{"title":57,"path":58,"stem":59,"icon":60},"DTCG","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fdtcg","docs\u002Fgetting-started\u002Fintegrations\u002F01.dtcg","i-lucide-square-code",{"title":62,"path":63,"stem":64,"icon":65},"Figma Plugin","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffigma-plugin","docs\u002Fgetting-started\u002Fintegrations\u002F02.figma-plugin","i-simple-icons-figma",{"title":67,"path":68,"stem":69,"icon":70},"Storybook","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fstorybook","docs\u002Fgetting-started\u002Fintegrations\u002F03.storybook","i-simple-icons-storybook",[72],{"title":73,"path":74,"stem":75,"children":76,"icon":7},"API Reference","\u002Fdocs\u002Fapi","docs\u002Fapi\u002F00.index",[77,80,85,90,95,100,105,110,115,120,125,130,145,150,155,160],{"title":78,"path":74,"stem":75,"icon":79},"Overview","i-lucide-book-text",{"title":81,"path":82,"stem":83,"icon":84},"Instance","\u002Fdocs\u002Fapi\u002Finstance","docs\u002Fapi\u002F01.instance","i-lucide-cloud-lightning",{"title":86,"path":87,"stem":88,"icon":89},"Variables","\u002Fdocs\u002Fapi\u002Fvariables","docs\u002Fapi\u002F02.variables","i-lucide-variable",{"title":91,"path":92,"stem":93,"icon":94},"Selectors","\u002Fdocs\u002Fapi\u002Fselectors","docs\u002Fapi\u002F03.selectors","i-lucide-scan-text",{"title":96,"path":97,"stem":98,"icon":99},"At-Rules","\u002Fdocs\u002Fapi\u002Fat-rules","docs\u002Fapi\u002F04.at-rules","i-lucide-at-sign",{"title":101,"path":102,"stem":103,"icon":104},"Media Queries","\u002Fdocs\u002Fapi\u002Fmedia-queries","docs\u002Fapi\u002F05.media-queries","i-lucide-image-upscale",{"title":106,"path":107,"stem":108,"icon":109},"Keyframes","\u002Fdocs\u002Fapi\u002Fkeyframes","docs\u002Fapi\u002F06.keyframes","i-lucide-square-play",{"title":111,"path":112,"stem":113,"icon":114},"Interpolation","\u002Fdocs\u002Fapi\u002Finterpolation","docs\u002Fapi\u002F07.interpolation","i-lucide-wrap-text",{"title":116,"path":117,"stem":118,"icon":119},"Utilities","\u002Fdocs\u002Fapi\u002Futilities","docs\u002Fapi\u002F08.utilities","i-lucide-sparkles",{"title":121,"path":122,"stem":123,"icon":124},"Utility Modifiers","\u002Fdocs\u002Fapi\u002Futility-modifiers","docs\u002Fapi\u002F09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":126,"path":127,"stem":128,"icon":129},"Themes","\u002Fdocs\u002Fapi\u002Fthemes","docs\u002Fapi\u002F10.themes","i-lucide-paintbrush",{"title":131,"path":132,"stem":133,"children":134,"icon":144},"Recipes","\u002Fdocs\u002Fapi\u002Frecipes","docs\u002Fapi\u002F11.recipes\u002F00.index",[135,136,140],{"title":78,"path":132,"stem":133},{"title":137,"path":138,"stem":139},"Runtime","\u002Fdocs\u002Fapi\u002Frecipes\u002Fruntime","docs\u002Fapi\u002F11.recipes\u002F01.runtime",{"title":141,"path":142,"stem":143},"Output Format","\u002Fdocs\u002Fapi\u002Frecipes\u002Foutput-format","docs\u002Fapi\u002F11.recipes\u002F02.output-format","i-lucide-chef-hat",{"title":146,"path":147,"stem":148,"icon":149},"Composables","\u002Fdocs\u002Fapi\u002Fcomposables","docs\u002Fapi\u002F12.composables","i-lucide-component",{"title":151,"path":152,"stem":153,"icon":154},"Imports","\u002Fdocs\u002Fapi\u002Fimports","docs\u002Fapi\u002F13.imports","i-lucide-file-input",{"title":156,"path":157,"stem":158,"icon":159},"Merging","\u002Fdocs\u002Fapi\u002Fmerging","docs\u002Fapi\u002F13.merging","i-lucide-squares-intersect",{"title":151,"path":152,"stem":161,"icon":154},"docs\u002Fapi\u002F14.imports",[163,243,357,558,635],{"title":164,"path":165,"stem":166,"children":167,"icon":7},"Design Tokens","\u002Fdocs\u002Ftheme\u002Fdesign-tokens","docs\u002Ftheme\u002Fdesign-tokens\u002F00.index",[168,169,174,179,184,189,194,199,204,209,224,228,233,238],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Preset","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpreset","docs\u002Ftheme\u002Fdesign-tokens\u002F01.preset","i-lucide-package",{"title":175,"path":176,"stem":177,"icon":178},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.border-radiuses","i-lucide-square-round-corner",{"title":180,"path":181,"stem":182,"icon":183},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F03.borders","i-lucide-square-dashed-top-solid",{"title":185,"path":186,"stem":187,"icon":188},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows","i-lucide-layers-2",{"title":190,"path":191,"stem":192,"icon":193},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints","i-lucide-monitor-smartphone",{"title":195,"path":196,"stem":197,"icon":198},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F06.colors","i-lucide-palette",{"title":200,"path":201,"stem":202,"icon":203},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F07.duration","i-lucide-timer",{"title":205,"path":206,"stem":207,"icon":208},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F08.easing","i-lucide-spline",{"title":210,"path":211,"stem":212,"children":213,"icon":104,"defaultOpen":223},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index",[214,215,219],{"title":78,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport",{"title":220,"path":221,"stem":222},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography",true,{"title":225,"path":226,"stem":227,"icon":35},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F10.scales",{"title":229,"path":230,"stem":231,"icon":232},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing","i-lucide-move-horizontal",{"title":234,"path":235,"stem":236,"icon":237},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F12.typography","i-lucide-type",{"title":239,"path":240,"stem":241,"icon":242},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index","i-lucide-layers",{"title":244,"path":245,"stem":246,"children":247,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[248,249,252,259,281,301,313,329,341],{"title":78,"path":245,"stem":246,"icon":79},{"title":170,"path":250,"stem":251,"icon":173},"\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":253,"icon":242,"defaultOpen":223,"page":7,"children":254},"Base",[255],{"title":256,"path":257,"stem":258,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.base\u002F00.body",{"title":234,"icon":237,"defaultOpen":223,"page":7,"children":260},[261,265,269,273,277],{"title":262,"path":263,"stem":264,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fheadings","docs\u002Ftheme\u002Felements\u002F03.typography\u002F01.headings",{"title":266,"path":267,"stem":268,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F03.typography\u002F02.paragraphs",{"title":270,"path":271,"stem":272,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Flinks","docs\u002Ftheme\u002Felements\u002F03.typography\u002F03.links",{"title":274,"path":275,"stem":276,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Flists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F04.lists",{"title":278,"path":279,"stem":280,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F05.definition-lists",{"title":282,"icon":283,"defaultOpen":223,"page":7,"children":284},"Inline Text","i-lucide-whole-word",[285,289,293,297],{"title":286,"path":287,"stem":288,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F00.abbreviation",{"title":290,"path":291,"stem":292,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcode","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F01.code",{"title":294,"path":295,"stem":296,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fkbd","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F02.kbd",{"title":298,"path":299,"stem":300,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fmark","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F03.mark",{"title":302,"icon":303,"defaultOpen":223,"page":7,"children":304},"Media & Embeds","i-lucide-image",[305,309],{"title":306,"path":307,"stem":308,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fimage","docs\u002Ftheme\u002Felements\u002F05.media\u002F00.image",{"title":310,"path":311,"stem":312,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fiframe","docs\u002Ftheme\u002Felements\u002F05.media\u002F01.iframe",{"title":314,"icon":315,"defaultOpen":223,"page":7,"children":316},"Forms & Tables","i-lucide-table",[317,321,325],{"title":318,"path":319,"stem":320,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcaption","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F00.caption",{"title":322,"path":323,"stem":324,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Flegend","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F01.legend",{"title":326,"path":327,"stem":328,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Foutput","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F02.output",{"title":330,"icon":331,"defaultOpen":223,"page":7,"children":332},"Structure","i-lucide-separator-horizontal",[333,337],{"title":334,"path":335,"stem":336,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Faddress","docs\u002Ftheme\u002Felements\u002F07.structure\u002F00.address",{"title":338,"path":339,"stem":340,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F07.structure\u002F01.horizontal-rule",{"title":342,"icon":343,"defaultOpen":223,"page":7,"children":344},"States","i-lucide-mouse-pointer-click",[345,349,353],{"title":346,"path":347,"stem":348,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Ffocus","docs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus",{"title":350,"path":351,"stem":352,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fselection","docs\u002Ftheme\u002Felements\u002F08.states\u002F01.selection",{"title":354,"path":355,"stem":356,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fsummary","docs\u002Ftheme\u002Felements\u002F08.states\u002F02.summary",{"title":358,"path":359,"stem":360,"children":361,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[362,363,375,399,427,491,518,550],{"title":78,"path":359,"stem":360,"icon":79},{"title":364,"icon":365,"defaultOpen":223,"page":7,"children":366},"Actions","i-lucide-square-mouse-pointer",[367,371],{"title":368,"path":369,"stem":370,"icon":7},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button",{"title":372,"path":373,"stem":374,"icon":7},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F01.hamburger-menu",{"title":376,"icon":377,"defaultOpen":223,"page":7,"children":378},"Navigation","i-lucide-navigation",[379,383,387,391,395],{"title":380,"path":381,"stem":382,"icon":7},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F00.breadcrumb",{"title":384,"path":385,"stem":386,"icon":7},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F01.nav",{"title":388,"path":389,"stem":390,"icon":7},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F02.pagination",{"title":392,"path":393,"stem":394,"icon":7},"Sidebar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fsidebar","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F03.sidebar",{"title":396,"path":397,"stem":398,"icon":7},"Tabs","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftabs","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs",{"title":400,"icon":401,"defaultOpen":223,"page":7,"children":402},"Feedback","i-lucide-megaphone",[403,407,411,415,419,423],{"title":404,"path":405,"stem":406,"icon":7},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge",{"title":408,"path":409,"stem":410,"icon":7},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout",{"title":412,"path":413,"stem":414,"icon":7},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F02.chip",{"title":416,"path":417,"stem":418,"icon":7},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress",{"title":420,"path":421,"stem":422,"icon":7},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F04.skeleton",{"title":424,"path":425,"stem":426,"icon":7},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner",{"title":428,"icon":429,"defaultOpen":223,"page":7,"children":430},"Forms","i-lucide-text-cursor-input",[431,435,439,443,447,451,455,459,463,467,471,475,479,483,487],{"title":432,"path":433,"stem":434,"icon":7},"Calendar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcalendar","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar",{"title":436,"path":437,"stem":438,"icon":7},"Checkbox","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox",{"title":440,"path":441,"stem":442,"icon":7},"Checkbox Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group",{"title":444,"path":445,"stem":446,"icon":7},"Color Picker","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcolor-picker","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker",{"title":448,"path":449,"stem":450,"icon":7},"Field Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ffield-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group",{"title":452,"path":453,"stem":454,"icon":7},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F05.input",{"title":456,"path":457,"stem":458,"icon":7},"OTP","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fotp","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.otp",{"title":460,"path":461,"stem":462,"icon":7},"Radio","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F07.radio",{"title":464,"path":465,"stem":466,"icon":7},"Radio Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio-group",{"title":468,"path":469,"stem":470,"icon":7},"Select","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fselect","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.select",{"title":472,"path":473,"stem":474,"icon":7},"Slider","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fslider","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.slider",{"title":476,"path":477,"stem":478,"icon":7},"Switch","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fswitch","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.switch",{"title":480,"path":481,"stem":482,"icon":7},"Textarea","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftextarea","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.textarea",{"title":484,"path":485,"stem":486,"icon":7},"Toggle","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F13.toggle",{"title":488,"path":489,"stem":490,"icon":7},"Toggle Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle-group",{"title":492,"icon":242,"defaultOpen":223,"page":7,"children":493},"Overlays",[494,498,502,506,510,514],{"title":495,"path":496,"stem":497,"icon":7},"ContextMenu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcontext-menu","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F00.context-menu",{"title":499,"path":500,"stem":501,"icon":7},"Drawer","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdrawer","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F01.drawer",{"title":503,"path":504,"stem":505,"icon":7},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F02.dropdown",{"title":507,"path":508,"stem":509,"icon":7},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F03.modal",{"title":511,"path":512,"stem":513,"icon":7},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F04.popover",{"title":515,"path":516,"stem":517,"icon":7},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F05.tooltip",{"title":519,"icon":520,"defaultOpen":223,"page":7,"children":521},"Layout","i-lucide-layout",[522,526,530,534,538,542,546],{"title":523,"path":524,"stem":525,"icon":7},"Accordion","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Faccordion","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion",{"title":527,"path":528,"stem":529,"icon":7},"Avatar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar",{"title":531,"path":532,"stem":533,"icon":7},"Avatar Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar-group","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group",{"title":535,"path":536,"stem":537,"icon":7},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F03.card",{"title":539,"path":540,"stem":541,"icon":7},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F04.media",{"title":543,"path":544,"stem":545,"icon":7},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero",{"title":547,"path":548,"stem":549,"icon":7},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F06.placeholder",{"title":551,"icon":552,"defaultOpen":223,"page":7,"children":553},"AI Chat","i-lucide-message-circle",[554],{"title":555,"path":556,"stem":557,"icon":7},"ChatMessage","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchat-message","docs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message",{"title":116,"path":559,"stem":560,"children":561,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[562,563,567,572,577,581,584,588,593,598,602,605,610,613,618,622,627,632],{"title":78,"path":559,"stem":560,"icon":79},{"title":564,"path":565,"stem":566,"icon":173},"Presets","\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset","docs\u002Ftheme\u002Futilities\u002F01.preset",{"title":568,"path":569,"stem":570,"icon":571},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.accessibility","i-lucide-accessibility",{"title":573,"path":574,"stem":575,"icon":576},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F03.animations","i-lucide-loader-circle",{"title":578,"path":579,"stem":580,"icon":303},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F04.backgrounds",{"title":180,"path":582,"stem":583,"icon":183},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fborders","docs\u002Ftheme\u002Futilities\u002F05.borders",{"title":585,"path":586,"stem":587,"icon":119},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Feffects","docs\u002Ftheme\u002Futilities\u002F06.effects",{"title":589,"path":590,"stem":591,"icon":592},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F07.filters","i-lucide-aperture",{"title":594,"path":595,"stem":596,"icon":597},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F08.flexbox-grid","i-lucide-layout-grid",{"title":599,"path":600,"stem":601,"icon":343},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F09.interactivity",{"title":519,"path":603,"stem":604,"icon":520},"\u002Fdocs\u002Ftheme\u002Futilities\u002Flayout","docs\u002Ftheme\u002Futilities\u002F10.layout",{"title":606,"path":607,"stem":608,"icon":609},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F11.sizing","i-lucide-scaling",{"title":229,"path":611,"stem":612,"icon":232},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F12.spacing",{"title":614,"path":615,"stem":616,"icon":617},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F13.svg","i-lucide-pen-tool",{"title":619,"path":620,"stem":621,"icon":315},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftables","docs\u002Ftheme\u002Futilities\u002F14.tables",{"title":623,"path":624,"stem":625,"icon":626},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F15.transforms","i-lucide-rotate-3d",{"title":628,"path":629,"stem":630,"icon":631},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F16.transitions","i-lucide-arrow-left-right",{"title":234,"path":633,"stem":634,"icon":237},"\u002Fdocs\u002Ftheme\u002Futilities\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F17.typography",{"title":636,"path":637,"stem":638,"children":639,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[640,641,644,648,653,657,662,667,672,677],{"title":78,"path":637,"stem":638,"icon":79},{"title":564,"path":642,"stem":643,"icon":173},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpreset","docs\u002Ftheme\u002Fmodifiers\u002F01.preset",{"title":645,"path":646,"stem":647,"icon":571},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.aria-state",{"title":649,"path":650,"stem":651,"icon":652},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F03.directional","i-lucide-flip-horizontal",{"title":654,"path":655,"stem":656,"icon":429},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F04.form-state",{"title":658,"path":659,"stem":660,"icon":661},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences","i-lucide-sun-moon",{"title":663,"path":664,"stem":665,"icon":666},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F06.other-state","i-lucide-toggle-left",{"title":668,"path":669,"stem":670,"icon":671},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F07.pseudo-elements","i-lucide-box-select",{"title":673,"path":674,"stem":675,"icon":676},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state","i-lucide-pointer",{"title":678,"path":679,"stem":680,"icon":681},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F09.structural","i-lucide-list-ordered",{"id":683,"title":480,"body":684,"description":5073,"extension":1339,"links":5074,"meta":5075,"navigation":5076,"path":481,"seo":5077,"stem":482,"__hash__":5078},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.textarea.md",{"type":685,"value":686,"toc":5034},"minimark",[687,691,703,740,747,753,760,764,767,819,823,3040,3043,3053,3058,3061,3066,3070,3137,3147,3151,3159,3162,3167,3170,3173,3176,3179,3182,3188,3191,3195,3204,3208,3212,3302,3321,3324,3341,3391,3394,3408,3411,3428,3431,3438,3441,3444,3458,3461,3465,3471,3474,3488,3492,3507,3511,3514,3517,3520,3523,3527,3537,3540,3554,3558,3561,3631,3643,3873,3883,3886,3960,3964,3968,3971,4180,4184,4191,4360,4365,4368,4374,4386,4391,4512,4517,4659,4665,4671,4675,4707,4713,4718,4722,4754,4760,4765,4769,4863,4867,5030],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698,699,702],"p",{},"The ",[696,697,480],"strong",{}," is a multi-line text-field container used to capture longer user input. It mirrors the ",[700,701,452],"a",{"href":453}," recipe and is composed of three recipe parts:",[704,705,706,724,732],"ul",{},[707,708,709,715,716,719,720,723],"li",{},[696,710,711],{},[712,713,714],"code",{},"useTextareaRecipe()"," — the wrapper that owns the visual field: border, background, padding, and the ",[712,717,718],{},":focus-within"," ring. It also carries the ",[712,721,722],{},"resize"," axis.",[707,725,726,731],{},[696,727,728],{},[712,729,730],{},"useTextareaPrefixRecipe()"," — an inline leading addon that sits inside the field, sharing its surface.",[707,733,734,739],{},[696,735,736],{},[712,737,738],{},"useTextareaSuffixRecipe()"," — an inline trailing addon that sits inside the field, sharing its surface.",[692,741,742,743,746],{},"Each composable creates a fully configured ",[700,744,745],{"href":132},"recipe"," with color, variant, and size options — plus compound variants on the wrapper that handle every color-variant combination and the invalid, disabled, and readonly states automatically.",[692,748,749,750,752],{},"To join a textarea with a button or other bordered control as an attached block, wrap them in a ",[700,751,448],{"href":449}," rather than reaching for a built-in slot.",[692,754,755,756,759],{},"The Textarea recipes integrate directly with the default ",[700,757,758],{"href":171},"design tokens preset"," and generate type-safe utility classes at build time with zero runtime CSS.",[688,761,763],{"id":762},"why-use-the-textarea-recipe","Why use the Textarea recipe?",[692,765,766],{},"The Textarea recipe helps you:",[704,768,769,775,781,801,807,813],{},[707,770,771,774],{},[696,772,773],{},"Ship faster with sensible defaults",": Get 3 colors, 3 visual styles, 3 sizes, a resize axis, and three native state axes out of the box with a single set of composable calls.",[707,776,777,780],{},[696,778,779],{},"Match your single-line fields",": Textarea shares the Input recipe's color, variant, size, and state system, so multi-line and single-line fields look identical in a form.",[707,782,783,786,787,789,790,792,793,796,797,800],{},[696,784,785],{},"Control resizing",": The ",[712,788,722],{}," axis maps to the native ",[712,791,722],{}," property on the underlying ",[712,794,795],{},"\u003Ctextarea>",", with a safe ",[712,798,799],{},"vertical"," default that won't break your layout.",[707,802,803,806],{},[696,804,805],{},"Maintain consistency",": Compound variants ensure every color-variant combination and every state follows the same design rules, including dark mode overrides.",[707,808,809,812],{},[696,810,811],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[707,814,815,818],{},[696,816,817],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, variant, size, resize, or state values at compile time.",[688,820,822],{"id":821},"usage","Usage",[824,825,827,832,839,1148,1152,1187,3031,3035],"steps",{"level":826},"4",[828,829,831],"h4",{"id":830},"register-the-recipes","Register the recipes",[692,833,834,835,838],{},"Add the Textarea recipes to a local Styleframe instance. The global ",[712,836,837],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[840,841,843,1041],"code-tree",{"default-value":842},"src\u002Fcomponents\u002Ftextarea.styleframe.ts",[844,845,850],"pre",{"className":846,"code":847,"filename":842,"language":848,"meta":849,"style":849},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport {\n    useTextareaRecipe,\n    useTextareaPrefixRecipe,\n    useTextareaSuffixRecipe,\n} from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst textarea = useTextareaRecipe(s);\nconst textareaPrefix = useTextareaPrefixRecipe(s);\nconst textareaSuffix = useTextareaSuffixRecipe(s);\n\nexport default s;\n","ts","",[712,851,852,888,896,905,913,921,938,944,965,970,988,1005,1022,1027],{"__ignoreMap":849},[853,854,857,861,865,869,872,875,878,882,885],"span",{"class":855,"line":856},"line",1,[853,858,860],{"class":859},"s7zQu","import",[853,862,864],{"class":863},"sMK4o"," {",[853,866,868],{"class":867},"sTEyZ"," styleframe",[853,870,871],{"class":863}," }",[853,873,874],{"class":859}," from",[853,876,877],{"class":863}," '",[853,879,881],{"class":880},"sfazB","virtual:styleframe",[853,883,884],{"class":863},"'",[853,886,887],{"class":863},";\n",[853,889,891,893],{"class":855,"line":890},2,[853,892,860],{"class":859},[853,894,895],{"class":863}," {\n",[853,897,899,902],{"class":855,"line":898},3,[853,900,901],{"class":867},"    useTextareaRecipe",[853,903,904],{"class":863},",\n",[853,906,908,911],{"class":855,"line":907},4,[853,909,910],{"class":867},"    useTextareaPrefixRecipe",[853,912,904],{"class":863},[853,914,916,919],{"class":855,"line":915},5,[853,917,918],{"class":867},"    useTextareaSuffixRecipe",[853,920,904],{"class":863},[853,922,924,927,929,931,934,936],{"class":855,"line":923},6,[853,925,926],{"class":863},"}",[853,928,874],{"class":859},[853,930,877],{"class":863},[853,932,933],{"class":880},"@styleframe\u002Ftheme",[853,935,884],{"class":863},[853,937,887],{"class":863},[853,939,941],{"class":855,"line":940},7,[853,942,943],{"emptyLinePlaceholder":223},"\n",[853,945,947,951,954,957,960,963],{"class":855,"line":946},8,[853,948,950],{"class":949},"spNyl","const",[853,952,953],{"class":867}," s ",[853,955,956],{"class":863},"=",[853,958,868],{"class":959},"s2Zo4",[853,961,962],{"class":867},"()",[853,964,887],{"class":863},[853,966,968],{"class":855,"line":967},9,[853,969,943],{"emptyLinePlaceholder":223},[853,971,973,975,978,980,983,986],{"class":855,"line":972},10,[853,974,950],{"class":949},[853,976,977],{"class":867}," textarea ",[853,979,956],{"class":863},[853,981,982],{"class":959}," useTextareaRecipe",[853,984,985],{"class":867},"(s)",[853,987,887],{"class":863},[853,989,991,993,996,998,1001,1003],{"class":855,"line":990},11,[853,992,950],{"class":949},[853,994,995],{"class":867}," textareaPrefix ",[853,997,956],{"class":863},[853,999,1000],{"class":959}," useTextareaPrefixRecipe",[853,1002,985],{"class":867},[853,1004,887],{"class":863},[853,1006,1008,1010,1013,1015,1018,1020],{"class":855,"line":1007},12,[853,1009,950],{"class":949},[853,1011,1012],{"class":867}," textareaSuffix ",[853,1014,956],{"class":863},[853,1016,1017],{"class":959}," useTextareaSuffixRecipe",[853,1019,985],{"class":867},[853,1021,887],{"class":863},[853,1023,1025],{"class":855,"line":1024},13,[853,1026,943],{"emptyLinePlaceholder":223},[853,1028,1030,1033,1036,1039],{"class":855,"line":1029},14,[853,1031,1032],{"class":859},"export",[853,1034,1035],{"class":859}," default",[853,1037,1038],{"class":867}," s",[853,1040,887],{"class":863},[844,1042,1044],{"className":846,"code":1043,"filename":837,"language":848,"meta":849,"style":849},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[712,1045,1046,1067,1094,1098,1112,1116,1125,1134,1138],{"__ignoreMap":849},[853,1047,1048,1050,1052,1054,1056,1058,1060,1063,1065],{"class":855,"line":856},[853,1049,860],{"class":859},[853,1051,864],{"class":863},[853,1053,868],{"class":867},[853,1055,871],{"class":863},[853,1057,874],{"class":859},[853,1059,877],{"class":863},[853,1061,1062],{"class":880},"styleframe",[853,1064,884],{"class":863},[853,1066,887],{"class":863},[853,1068,1069,1071,1073,1076,1079,1082,1084,1086,1088,1090,1092],{"class":855,"line":890},[853,1070,860],{"class":859},[853,1072,864],{"class":863},[853,1074,1075],{"class":867}," useDesignTokensPreset",[853,1077,1078],{"class":863},",",[853,1080,1081],{"class":867}," useUtilitiesPreset",[853,1083,871],{"class":863},[853,1085,874],{"class":859},[853,1087,877],{"class":863},[853,1089,933],{"class":880},[853,1091,884],{"class":863},[853,1093,887],{"class":863},[853,1095,1096],{"class":855,"line":898},[853,1097,943],{"emptyLinePlaceholder":223},[853,1099,1100,1102,1104,1106,1108,1110],{"class":855,"line":907},[853,1101,950],{"class":949},[853,1103,953],{"class":867},[853,1105,956],{"class":863},[853,1107,868],{"class":959},[853,1109,962],{"class":867},[853,1111,887],{"class":863},[853,1113,1114],{"class":855,"line":915},[853,1115,943],{"emptyLinePlaceholder":223},[853,1117,1118,1121,1123],{"class":855,"line":923},[853,1119,1120],{"class":959},"useDesignTokensPreset",[853,1122,985],{"class":867},[853,1124,887],{"class":863},[853,1126,1127,1130,1132],{"class":855,"line":940},[853,1128,1129],{"class":959},"useUtilitiesPreset",[853,1131,985],{"class":867},[853,1133,887],{"class":863},[853,1135,1136],{"class":855,"line":946},[853,1137,943],{"emptyLinePlaceholder":223},[853,1139,1140,1142,1144,1146],{"class":855,"line":967},[853,1141,1032],{"class":859},[853,1143,1035],{"class":859},[853,1145,1038],{"class":867},[853,1147,887],{"class":863},[828,1149,1151],{"id":1150},"build-the-component","Build the component",[692,1153,1154,1155,1158,1159,1162,1163,1166,1167,1170,1171,1173,1174,1176,1177,1158,1180,1162,1183,1186],{},"Import the ",[712,1156,1157],{},"textarea",", ",[712,1160,1161],{},"textareaPrefix",", and ",[712,1164,1165],{},"textareaSuffix"," runtime functions from the virtual module. The wrapper paints the visual field and the nested ",[712,1168,1169],{},".textarea-field"," is a transparent native ",[712,1172,795],{}," that inherits typography. The ",[712,1175,722],{}," axis controls the nested textarea's resize handle, and the ",[712,1178,1179],{},"invalid",[712,1181,1182],{},"disabled",[712,1184,1185],{},"readonly"," axes accept booleans directly:",[1188,1189,1190,2011,2643],"framework-switcher",{},[1191,1192,1193],"template",{"v-slot:vue":849},[844,1194,1199],{"className":1195,"code":1196,"filename":1197,"language":1198,"meta":849,"style":849},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { computed, useSlots } from \"vue\";\nimport { textarea, textareaPrefix, textareaSuffix } from \"virtual:styleframe\";\n\nconst {\n    color = \"neutral\",\n    variant = \"default\",\n    size = \"md\",\n    resize = \"vertical\",\n    invalid = false,\n    disabled = false,\n    readonly = false,\n    rows = 4,\n} = defineProps\u003C{\n    color?: \"light\" | \"dark\" | \"neutral\";\n    variant?: \"default\" | \"soft\" | \"ghost\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    resize?: \"none\" | \"vertical\" | \"horizontal\" | \"both\";\n    invalid?: boolean;\n    disabled?: boolean;\n    readonly?: boolean;\n    rows?: number;\n}>();\n\nconst slots = useSlots();\n\nconst wrapper = computed(() =>\n    textarea({ color, variant, size, resize, invalid, disabled, readonly }),\n);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cspan :class=\"wrapper\">\n        \u003Cspan v-if=\"slots.prefix\" :class=\"textareaPrefix({ size })\">\n            \u003Cslot name=\"prefix\" \u002F>\n        \u003C\u002Fspan>\n        \u003Ctextarea\n            class=\"textarea-field\"\n            :rows=\"rows\"\n            :disabled=\"disabled\"\n            :readonly=\"readonly\"\n            :aria-invalid=\"invalid\"\n        \u002F>\n        \u003Cspan v-if=\"slots.suffix\" :class=\"textareaSuffix({ size })\">\n            \u003Cslot name=\"suffix\" \u002F>\n        \u003C\u002Fspan>\n    \u003C\u002Fspan>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FTextarea.vue","vue",[712,1200,1201,1228,1255,1286,1290,1296,1312,1328,1344,1359,1372,1383,1394,1407,1420,1456,1490,1524,1567,1581,1593,1605,1618,1628,1633,1649,1654,1674,1725,1732,1742,1747,1756,1778,1811,1835,1845,1853,1869,1884,1898,1912,1926,1932,1963,1983,1992,2002],{"__ignoreMap":849},[853,1202,1203,1206,1210,1213,1216,1218,1221,1223,1225],{"class":855,"line":856},[853,1204,1205],{"class":863},"\u003C",[853,1207,1209],{"class":1208},"swJcz","script",[853,1211,1212],{"class":949}," setup",[853,1214,1215],{"class":949}," lang",[853,1217,956],{"class":863},[853,1219,1220],{"class":863},"\"",[853,1222,848],{"class":880},[853,1224,1220],{"class":863},[853,1226,1227],{"class":863},">\n",[853,1229,1230,1232,1234,1237,1239,1242,1244,1246,1249,1251,1253],{"class":855,"line":890},[853,1231,860],{"class":859},[853,1233,864],{"class":863},[853,1235,1236],{"class":867}," computed",[853,1238,1078],{"class":863},[853,1240,1241],{"class":867}," useSlots",[853,1243,871],{"class":863},[853,1245,874],{"class":859},[853,1247,1248],{"class":863}," \"",[853,1250,1198],{"class":880},[853,1252,1220],{"class":863},[853,1254,887],{"class":863},[853,1256,1257,1259,1261,1264,1266,1269,1271,1274,1276,1278,1280,1282,1284],{"class":855,"line":898},[853,1258,860],{"class":859},[853,1260,864],{"class":863},[853,1262,1263],{"class":867}," textarea",[853,1265,1078],{"class":863},[853,1267,1268],{"class":867}," textareaPrefix",[853,1270,1078],{"class":863},[853,1272,1273],{"class":867}," textareaSuffix",[853,1275,871],{"class":863},[853,1277,874],{"class":859},[853,1279,1248],{"class":863},[853,1281,881],{"class":880},[853,1283,1220],{"class":863},[853,1285,887],{"class":863},[853,1287,1288],{"class":855,"line":907},[853,1289,943],{"emptyLinePlaceholder":223},[853,1291,1292,1294],{"class":855,"line":915},[853,1293,950],{"class":949},[853,1295,895],{"class":863},[853,1297,1298,1301,1303,1305,1308,1310],{"class":855,"line":923},[853,1299,1300],{"class":867},"    color ",[853,1302,956],{"class":863},[853,1304,1248],{"class":863},[853,1306,1307],{"class":880},"neutral",[853,1309,1220],{"class":863},[853,1311,904],{"class":863},[853,1313,1314,1317,1319,1321,1324,1326],{"class":855,"line":940},[853,1315,1316],{"class":867},"    variant ",[853,1318,956],{"class":863},[853,1320,1248],{"class":863},[853,1322,1323],{"class":880},"default",[853,1325,1220],{"class":863},[853,1327,904],{"class":863},[853,1329,1330,1333,1335,1337,1340,1342],{"class":855,"line":946},[853,1331,1332],{"class":867},"    size ",[853,1334,956],{"class":863},[853,1336,1248],{"class":863},[853,1338,1339],{"class":880},"md",[853,1341,1220],{"class":863},[853,1343,904],{"class":863},[853,1345,1346,1349,1351,1353,1355,1357],{"class":855,"line":967},[853,1347,1348],{"class":867},"    resize ",[853,1350,956],{"class":863},[853,1352,1248],{"class":863},[853,1354,799],{"class":880},[853,1356,1220],{"class":863},[853,1358,904],{"class":863},[853,1360,1361,1364,1366,1370],{"class":855,"line":972},[853,1362,1363],{"class":867},"    invalid ",[853,1365,956],{"class":863},[853,1367,1369],{"class":1368},"sfNiH"," false",[853,1371,904],{"class":863},[853,1373,1374,1377,1379,1381],{"class":855,"line":990},[853,1375,1376],{"class":867},"    disabled ",[853,1378,956],{"class":863},[853,1380,1369],{"class":1368},[853,1382,904],{"class":863},[853,1384,1385,1388,1390,1392],{"class":855,"line":1007},[853,1386,1387],{"class":867},"    readonly ",[853,1389,956],{"class":863},[853,1391,1369],{"class":1368},[853,1393,904],{"class":863},[853,1395,1396,1399,1401,1405],{"class":855,"line":1024},[853,1397,1398],{"class":867},"    rows ",[853,1400,956],{"class":863},[853,1402,1404],{"class":1403},"sbssI"," 4",[853,1406,904],{"class":863},[853,1408,1409,1411,1414,1417],{"class":855,"line":1029},[853,1410,926],{"class":863},[853,1412,1413],{"class":863}," =",[853,1415,1416],{"class":959}," defineProps",[853,1418,1419],{"class":863},"\u003C{\n",[853,1421,1423,1426,1429,1431,1434,1436,1439,1441,1444,1446,1448,1450,1452,1454],{"class":855,"line":1422},15,[853,1424,1425],{"class":1208},"    color",[853,1427,1428],{"class":863},"?:",[853,1430,1248],{"class":863},[853,1432,1433],{"class":880},"light",[853,1435,1220],{"class":863},[853,1437,1438],{"class":863}," |",[853,1440,1248],{"class":863},[853,1442,1443],{"class":880},"dark",[853,1445,1220],{"class":863},[853,1447,1438],{"class":863},[853,1449,1248],{"class":863},[853,1451,1307],{"class":880},[853,1453,1220],{"class":863},[853,1455,887],{"class":863},[853,1457,1459,1462,1464,1466,1468,1470,1472,1474,1477,1479,1481,1483,1486,1488],{"class":855,"line":1458},16,[853,1460,1461],{"class":1208},"    variant",[853,1463,1428],{"class":863},[853,1465,1248],{"class":863},[853,1467,1323],{"class":880},[853,1469,1220],{"class":863},[853,1471,1438],{"class":863},[853,1473,1248],{"class":863},[853,1475,1476],{"class":880},"soft",[853,1478,1220],{"class":863},[853,1480,1438],{"class":863},[853,1482,1248],{"class":863},[853,1484,1485],{"class":880},"ghost",[853,1487,1220],{"class":863},[853,1489,887],{"class":863},[853,1491,1493,1496,1498,1500,1503,1505,1507,1509,1511,1513,1515,1517,1520,1522],{"class":855,"line":1492},17,[853,1494,1495],{"class":1208},"    size",[853,1497,1428],{"class":863},[853,1499,1248],{"class":863},[853,1501,1502],{"class":880},"sm",[853,1504,1220],{"class":863},[853,1506,1438],{"class":863},[853,1508,1248],{"class":863},[853,1510,1339],{"class":880},[853,1512,1220],{"class":863},[853,1514,1438],{"class":863},[853,1516,1248],{"class":863},[853,1518,1519],{"class":880},"lg",[853,1521,1220],{"class":863},[853,1523,887],{"class":863},[853,1525,1527,1530,1532,1534,1537,1539,1541,1543,1545,1547,1549,1551,1554,1556,1558,1560,1563,1565],{"class":855,"line":1526},18,[853,1528,1529],{"class":1208},"    resize",[853,1531,1428],{"class":863},[853,1533,1248],{"class":863},[853,1535,1536],{"class":880},"none",[853,1538,1220],{"class":863},[853,1540,1438],{"class":863},[853,1542,1248],{"class":863},[853,1544,799],{"class":880},[853,1546,1220],{"class":863},[853,1548,1438],{"class":863},[853,1550,1248],{"class":863},[853,1552,1553],{"class":880},"horizontal",[853,1555,1220],{"class":863},[853,1557,1438],{"class":863},[853,1559,1248],{"class":863},[853,1561,1562],{"class":880},"both",[853,1564,1220],{"class":863},[853,1566,887],{"class":863},[853,1568,1570,1573,1575,1579],{"class":855,"line":1569},19,[853,1571,1572],{"class":1208},"    invalid",[853,1574,1428],{"class":863},[853,1576,1578],{"class":1577},"sBMFI"," boolean",[853,1580,887],{"class":863},[853,1582,1584,1587,1589,1591],{"class":855,"line":1583},20,[853,1585,1586],{"class":1208},"    disabled",[853,1588,1428],{"class":863},[853,1590,1578],{"class":1577},[853,1592,887],{"class":863},[853,1594,1596,1599,1601,1603],{"class":855,"line":1595},21,[853,1597,1598],{"class":1208},"    readonly",[853,1600,1428],{"class":863},[853,1602,1578],{"class":1577},[853,1604,887],{"class":863},[853,1606,1608,1611,1613,1616],{"class":855,"line":1607},22,[853,1609,1610],{"class":1208},"    rows",[853,1612,1428],{"class":863},[853,1614,1615],{"class":1577}," number",[853,1617,887],{"class":863},[853,1619,1621,1624,1626],{"class":855,"line":1620},23,[853,1622,1623],{"class":863},"}>",[853,1625,962],{"class":867},[853,1627,887],{"class":863},[853,1629,1631],{"class":855,"line":1630},24,[853,1632,943],{"emptyLinePlaceholder":223},[853,1634,1636,1638,1641,1643,1645,1647],{"class":855,"line":1635},25,[853,1637,950],{"class":949},[853,1639,1640],{"class":867}," slots ",[853,1642,956],{"class":863},[853,1644,1241],{"class":959},[853,1646,962],{"class":867},[853,1648,887],{"class":863},[853,1650,1652],{"class":855,"line":1651},26,[853,1653,943],{"emptyLinePlaceholder":223},[853,1655,1657,1659,1662,1664,1666,1669,1671],{"class":855,"line":1656},27,[853,1658,950],{"class":949},[853,1660,1661],{"class":867}," wrapper ",[853,1663,956],{"class":863},[853,1665,1236],{"class":959},[853,1667,1668],{"class":867},"(",[853,1670,962],{"class":863},[853,1672,1673],{"class":949}," =>\n",[853,1675,1677,1680,1682,1685,1688,1690,1693,1695,1698,1700,1703,1705,1708,1710,1713,1715,1718,1720,1723],{"class":855,"line":1676},28,[853,1678,1679],{"class":959},"    textarea",[853,1681,1668],{"class":867},[853,1683,1684],{"class":863},"{",[853,1686,1687],{"class":867}," color",[853,1689,1078],{"class":863},[853,1691,1692],{"class":867}," variant",[853,1694,1078],{"class":863},[853,1696,1697],{"class":867}," size",[853,1699,1078],{"class":863},[853,1701,1702],{"class":867}," resize",[853,1704,1078],{"class":863},[853,1706,1707],{"class":867}," invalid",[853,1709,1078],{"class":863},[853,1711,1712],{"class":867}," disabled",[853,1714,1078],{"class":863},[853,1716,1717],{"class":867}," readonly ",[853,1719,926],{"class":863},[853,1721,1722],{"class":867},")",[853,1724,904],{"class":863},[853,1726,1728,1730],{"class":855,"line":1727},29,[853,1729,1722],{"class":867},[853,1731,887],{"class":863},[853,1733,1735,1738,1740],{"class":855,"line":1734},30,[853,1736,1737],{"class":863},"\u003C\u002F",[853,1739,1209],{"class":1208},[853,1741,1227],{"class":863},[853,1743,1745],{"class":855,"line":1744},31,[853,1746,943],{"emptyLinePlaceholder":223},[853,1748,1750,1752,1754],{"class":855,"line":1749},32,[853,1751,1205],{"class":863},[853,1753,1191],{"class":1208},[853,1755,1227],{"class":863},[853,1757,1759,1762,1764,1767,1769,1771,1774,1776],{"class":855,"line":1758},33,[853,1760,1761],{"class":863},"    \u003C",[853,1763,853],{"class":1208},[853,1765,1766],{"class":949}," :class",[853,1768,956],{"class":863},[853,1770,1220],{"class":863},[853,1772,1773],{"class":880},"wrapper",[853,1775,1220],{"class":863},[853,1777,1227],{"class":863},[853,1779,1781,1784,1786,1789,1791,1793,1796,1798,1800,1802,1804,1807,1809],{"class":855,"line":1780},34,[853,1782,1783],{"class":863},"        \u003C",[853,1785,853],{"class":1208},[853,1787,1788],{"class":949}," v-if",[853,1790,956],{"class":863},[853,1792,1220],{"class":863},[853,1794,1795],{"class":880},"slots.prefix",[853,1797,1220],{"class":863},[853,1799,1766],{"class":949},[853,1801,956],{"class":863},[853,1803,1220],{"class":863},[853,1805,1806],{"class":880},"textareaPrefix({ size })",[853,1808,1220],{"class":863},[853,1810,1227],{"class":863},[853,1812,1814,1817,1820,1823,1825,1827,1830,1832],{"class":855,"line":1813},35,[853,1815,1816],{"class":863},"            \u003C",[853,1818,1819],{"class":1208},"slot",[853,1821,1822],{"class":949}," name",[853,1824,956],{"class":863},[853,1826,1220],{"class":863},[853,1828,1829],{"class":880},"prefix",[853,1831,1220],{"class":863},[853,1833,1834],{"class":863}," \u002F>\n",[853,1836,1838,1841,1843],{"class":855,"line":1837},36,[853,1839,1840],{"class":863},"        \u003C\u002F",[853,1842,853],{"class":1208},[853,1844,1227],{"class":863},[853,1846,1848,1850],{"class":855,"line":1847},37,[853,1849,1783],{"class":863},[853,1851,1852],{"class":1208},"textarea\n",[853,1854,1856,1859,1861,1863,1866],{"class":855,"line":1855},38,[853,1857,1858],{"class":949},"            class",[853,1860,956],{"class":863},[853,1862,1220],{"class":863},[853,1864,1865],{"class":880},"textarea-field",[853,1867,1868],{"class":863},"\"\n",[853,1870,1872,1875,1877,1879,1882],{"class":855,"line":1871},39,[853,1873,1874],{"class":949},"            :rows",[853,1876,956],{"class":863},[853,1878,1220],{"class":863},[853,1880,1881],{"class":880},"rows",[853,1883,1868],{"class":863},[853,1885,1887,1890,1892,1894,1896],{"class":855,"line":1886},40,[853,1888,1889],{"class":949},"            :disabled",[853,1891,956],{"class":863},[853,1893,1220],{"class":863},[853,1895,1182],{"class":880},[853,1897,1868],{"class":863},[853,1899,1901,1904,1906,1908,1910],{"class":855,"line":1900},41,[853,1902,1903],{"class":949},"            :readonly",[853,1905,956],{"class":863},[853,1907,1220],{"class":863},[853,1909,1185],{"class":880},[853,1911,1868],{"class":863},[853,1913,1915,1918,1920,1922,1924],{"class":855,"line":1914},42,[853,1916,1917],{"class":949},"            :aria-invalid",[853,1919,956],{"class":863},[853,1921,1220],{"class":863},[853,1923,1179],{"class":880},[853,1925,1868],{"class":863},[853,1927,1929],{"class":855,"line":1928},43,[853,1930,1931],{"class":863},"        \u002F>\n",[853,1933,1935,1937,1939,1941,1943,1945,1948,1950,1952,1954,1956,1959,1961],{"class":855,"line":1934},44,[853,1936,1783],{"class":863},[853,1938,853],{"class":1208},[853,1940,1788],{"class":949},[853,1942,956],{"class":863},[853,1944,1220],{"class":863},[853,1946,1947],{"class":880},"slots.suffix",[853,1949,1220],{"class":863},[853,1951,1766],{"class":949},[853,1953,956],{"class":863},[853,1955,1220],{"class":863},[853,1957,1958],{"class":880},"textareaSuffix({ size })",[853,1960,1220],{"class":863},[853,1962,1227],{"class":863},[853,1964,1966,1968,1970,1972,1974,1976,1979,1981],{"class":855,"line":1965},45,[853,1967,1816],{"class":863},[853,1969,1819],{"class":1208},[853,1971,1822],{"class":949},[853,1973,956],{"class":863},[853,1975,1220],{"class":863},[853,1977,1978],{"class":880},"suffix",[853,1980,1220],{"class":863},[853,1982,1834],{"class":863},[853,1984,1986,1988,1990],{"class":855,"line":1985},46,[853,1987,1840],{"class":863},[853,1989,853],{"class":1208},[853,1991,1227],{"class":863},[853,1993,1995,1998,2000],{"class":855,"line":1994},47,[853,1996,1997],{"class":863},"    \u003C\u002F",[853,1999,853],{"class":1208},[853,2001,1227],{"class":863},[853,2003,2005,2007,2009],{"class":855,"line":2004},48,[853,2006,1737],{"class":863},[853,2008,1191],{"class":1208},[853,2010,1227],{"class":863},[1191,2012,2013],{"v-slot:react":849},[844,2014,2017],{"className":846,"code":2015,"filename":2016,"language":848,"meta":849,"style":849},"import { textarea, textareaPrefix, textareaSuffix } from \"virtual:styleframe\";\n\ninterface TextareaProps {\n    color?: \"light\" | \"dark\" | \"neutral\";\n    variant?: \"default\" | \"soft\" | \"ghost\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    resize?: \"none\" | \"vertical\" | \"horizontal\" | \"both\";\n    invalid?: boolean;\n    disabled?: boolean;\n    readonly?: boolean;\n    prefix?: React.ReactNode;\n    suffix?: React.ReactNode;\n}\n\nexport function Textarea({\n    color = \"neutral\",\n    variant = \"default\",\n    size = \"md\",\n    resize = \"vertical\",\n    invalid = false,\n    disabled = false,\n    readonly = false,\n    prefix,\n    suffix,\n    ...textareaProps\n}: TextareaProps & React.TextareaHTMLAttributes\u003CHTMLTextAreaElement>) {\n    const wrapper = textarea({ color, variant, size, resize, invalid, disabled, readonly });\n\n    return (\n        \u003Cspan className={wrapper}>\n            {prefix && \u003Cspan className={textareaPrefix({ size })}>{prefix}\u003C\u002Fspan>}\n            \u003Ctextarea\n                className=\"textarea-field\"\n                disabled={disabled}\n                readOnly={readonly}\n                aria-invalid={invalid}\n                {...textareaProps}\n            \u002F>\n            {suffix && \u003Cspan className={textareaSuffix({ size })}>{suffix}\u003C\u002Fspan>}\n        \u003C\u002Fspan>\n    );\n}\n","src\u002Fcomponents\u002FTextarea.tsx",[712,2018,2019,2047,2051,2061,2091,2121,2151,2189,2199,2209,2219,2237,2252,2257,2261,2274,2289,2303,2317,2331,2341,2351,2361,2367,2373,2381,2408,2457,2461,2469,2486,2522,2528,2541,2552,2563,2579,2589,2594,2624,2632,2639],{"__ignoreMap":849},[853,2020,2021,2023,2025,2027,2029,2031,2033,2035,2037,2039,2041,2043,2045],{"class":855,"line":856},[853,2022,860],{"class":859},[853,2024,864],{"class":863},[853,2026,1263],{"class":867},[853,2028,1078],{"class":863},[853,2030,1268],{"class":867},[853,2032,1078],{"class":863},[853,2034,1273],{"class":867},[853,2036,871],{"class":863},[853,2038,874],{"class":859},[853,2040,1248],{"class":863},[853,2042,881],{"class":880},[853,2044,1220],{"class":863},[853,2046,887],{"class":863},[853,2048,2049],{"class":855,"line":890},[853,2050,943],{"emptyLinePlaceholder":223},[853,2052,2053,2056,2059],{"class":855,"line":898},[853,2054,2055],{"class":949},"interface",[853,2057,2058],{"class":1577}," TextareaProps",[853,2060,895],{"class":863},[853,2062,2063,2065,2067,2069,2071,2073,2075,2077,2079,2081,2083,2085,2087,2089],{"class":855,"line":907},[853,2064,1425],{"class":1208},[853,2066,1428],{"class":863},[853,2068,1248],{"class":863},[853,2070,1433],{"class":880},[853,2072,1220],{"class":863},[853,2074,1438],{"class":863},[853,2076,1248],{"class":863},[853,2078,1443],{"class":880},[853,2080,1220],{"class":863},[853,2082,1438],{"class":863},[853,2084,1248],{"class":863},[853,2086,1307],{"class":880},[853,2088,1220],{"class":863},[853,2090,887],{"class":863},[853,2092,2093,2095,2097,2099,2101,2103,2105,2107,2109,2111,2113,2115,2117,2119],{"class":855,"line":915},[853,2094,1461],{"class":1208},[853,2096,1428],{"class":863},[853,2098,1248],{"class":863},[853,2100,1323],{"class":880},[853,2102,1220],{"class":863},[853,2104,1438],{"class":863},[853,2106,1248],{"class":863},[853,2108,1476],{"class":880},[853,2110,1220],{"class":863},[853,2112,1438],{"class":863},[853,2114,1248],{"class":863},[853,2116,1485],{"class":880},[853,2118,1220],{"class":863},[853,2120,887],{"class":863},[853,2122,2123,2125,2127,2129,2131,2133,2135,2137,2139,2141,2143,2145,2147,2149],{"class":855,"line":923},[853,2124,1495],{"class":1208},[853,2126,1428],{"class":863},[853,2128,1248],{"class":863},[853,2130,1502],{"class":880},[853,2132,1220],{"class":863},[853,2134,1438],{"class":863},[853,2136,1248],{"class":863},[853,2138,1339],{"class":880},[853,2140,1220],{"class":863},[853,2142,1438],{"class":863},[853,2144,1248],{"class":863},[853,2146,1519],{"class":880},[853,2148,1220],{"class":863},[853,2150,887],{"class":863},[853,2152,2153,2155,2157,2159,2161,2163,2165,2167,2169,2171,2173,2175,2177,2179,2181,2183,2185,2187],{"class":855,"line":940},[853,2154,1529],{"class":1208},[853,2156,1428],{"class":863},[853,2158,1248],{"class":863},[853,2160,1536],{"class":880},[853,2162,1220],{"class":863},[853,2164,1438],{"class":863},[853,2166,1248],{"class":863},[853,2168,799],{"class":880},[853,2170,1220],{"class":863},[853,2172,1438],{"class":863},[853,2174,1248],{"class":863},[853,2176,1553],{"class":880},[853,2178,1220],{"class":863},[853,2180,1438],{"class":863},[853,2182,1248],{"class":863},[853,2184,1562],{"class":880},[853,2186,1220],{"class":863},[853,2188,887],{"class":863},[853,2190,2191,2193,2195,2197],{"class":855,"line":946},[853,2192,1572],{"class":1208},[853,2194,1428],{"class":863},[853,2196,1578],{"class":1577},[853,2198,887],{"class":863},[853,2200,2201,2203,2205,2207],{"class":855,"line":967},[853,2202,1586],{"class":1208},[853,2204,1428],{"class":863},[853,2206,1578],{"class":1577},[853,2208,887],{"class":863},[853,2210,2211,2213,2215,2217],{"class":855,"line":972},[853,2212,1598],{"class":1208},[853,2214,1428],{"class":863},[853,2216,1578],{"class":1577},[853,2218,887],{"class":863},[853,2220,2221,2224,2226,2229,2232,2235],{"class":855,"line":990},[853,2222,2223],{"class":1208},"    prefix",[853,2225,1428],{"class":863},[853,2227,2228],{"class":1577}," React",[853,2230,2231],{"class":863},".",[853,2233,2234],{"class":1577},"ReactNode",[853,2236,887],{"class":863},[853,2238,2239,2242,2244,2246,2248,2250],{"class":855,"line":1007},[853,2240,2241],{"class":1208},"    suffix",[853,2243,1428],{"class":863},[853,2245,2228],{"class":1577},[853,2247,2231],{"class":863},[853,2249,2234],{"class":1577},[853,2251,887],{"class":863},[853,2253,2254],{"class":855,"line":1024},[853,2255,2256],{"class":863},"}\n",[853,2258,2259],{"class":855,"line":1029},[853,2260,943],{"emptyLinePlaceholder":223},[853,2262,2263,2265,2268,2271],{"class":855,"line":1422},[853,2264,1032],{"class":859},[853,2266,2267],{"class":949}," function",[853,2269,2270],{"class":959}," Textarea",[853,2272,2273],{"class":863},"({\n",[853,2275,2276,2279,2281,2283,2285,2287],{"class":855,"line":1458},[853,2277,1425],{"class":2278},"sHdIc",[853,2280,1413],{"class":863},[853,2282,1248],{"class":863},[853,2284,1307],{"class":880},[853,2286,1220],{"class":863},[853,2288,904],{"class":863},[853,2290,2291,2293,2295,2297,2299,2301],{"class":855,"line":1492},[853,2292,1461],{"class":2278},[853,2294,1413],{"class":863},[853,2296,1248],{"class":863},[853,2298,1323],{"class":880},[853,2300,1220],{"class":863},[853,2302,904],{"class":863},[853,2304,2305,2307,2309,2311,2313,2315],{"class":855,"line":1526},[853,2306,1495],{"class":2278},[853,2308,1413],{"class":863},[853,2310,1248],{"class":863},[853,2312,1339],{"class":880},[853,2314,1220],{"class":863},[853,2316,904],{"class":863},[853,2318,2319,2321,2323,2325,2327,2329],{"class":855,"line":1569},[853,2320,1529],{"class":2278},[853,2322,1413],{"class":863},[853,2324,1248],{"class":863},[853,2326,799],{"class":880},[853,2328,1220],{"class":863},[853,2330,904],{"class":863},[853,2332,2333,2335,2337,2339],{"class":855,"line":1583},[853,2334,1572],{"class":2278},[853,2336,1413],{"class":863},[853,2338,1369],{"class":1368},[853,2340,904],{"class":863},[853,2342,2343,2345,2347,2349],{"class":855,"line":1595},[853,2344,1586],{"class":2278},[853,2346,1413],{"class":863},[853,2348,1369],{"class":1368},[853,2350,904],{"class":863},[853,2352,2353,2355,2357,2359],{"class":855,"line":1607},[853,2354,1598],{"class":2278},[853,2356,1413],{"class":863},[853,2358,1369],{"class":1368},[853,2360,904],{"class":863},[853,2362,2363,2365],{"class":855,"line":1620},[853,2364,2223],{"class":2278},[853,2366,904],{"class":863},[853,2368,2369,2371],{"class":855,"line":1630},[853,2370,2241],{"class":2278},[853,2372,904],{"class":863},[853,2374,2375,2378],{"class":855,"line":1635},[853,2376,2377],{"class":863},"    ...",[853,2379,2380],{"class":2278},"textareaProps\n",[853,2382,2383,2386,2388,2391,2393,2395,2398,2400,2403,2406],{"class":855,"line":1651},[853,2384,2385],{"class":863},"}:",[853,2387,2058],{"class":1577},[853,2389,2390],{"class":863}," &",[853,2392,2228],{"class":1577},[853,2394,2231],{"class":863},[853,2396,2397],{"class":1577},"TextareaHTMLAttributes",[853,2399,1205],{"class":863},[853,2401,2402],{"class":1577},"HTMLTextAreaElement",[853,2404,2405],{"class":863},">)",[853,2407,895],{"class":863},[853,2409,2410,2413,2416,2418,2420,2422,2424,2426,2428,2430,2432,2434,2436,2438,2440,2442,2444,2446,2448,2451,2453,2455],{"class":855,"line":1656},[853,2411,2412],{"class":949},"    const",[853,2414,2415],{"class":867}," wrapper",[853,2417,1413],{"class":863},[853,2419,1263],{"class":959},[853,2421,1668],{"class":1208},[853,2423,1684],{"class":863},[853,2425,1687],{"class":867},[853,2427,1078],{"class":863},[853,2429,1692],{"class":867},[853,2431,1078],{"class":863},[853,2433,1697],{"class":867},[853,2435,1078],{"class":863},[853,2437,1702],{"class":867},[853,2439,1078],{"class":863},[853,2441,1707],{"class":867},[853,2443,1078],{"class":863},[853,2445,1712],{"class":867},[853,2447,1078],{"class":863},[853,2449,2450],{"class":867}," readonly",[853,2452,871],{"class":863},[853,2454,1722],{"class":1208},[853,2456,887],{"class":863},[853,2458,2459],{"class":855,"line":1676},[853,2460,943],{"emptyLinePlaceholder":223},[853,2462,2463,2466],{"class":855,"line":1727},[853,2464,2465],{"class":859},"    return",[853,2467,2468],{"class":1208}," (\n",[853,2470,2471,2473,2475,2478,2481,2483],{"class":855,"line":1734},[853,2472,1783],{"class":863},[853,2474,853],{"class":867},[853,2476,2477],{"class":867}," className",[853,2479,2480],{"class":863},"={",[853,2482,1773],{"class":867},[853,2484,2485],{"class":863},"}>\n",[853,2487,2488,2491,2493,2496,2498,2500,2502,2504,2507,2509,2512,2514,2517,2519],{"class":855,"line":1744},[853,2489,2490],{"class":863},"            {",[853,2492,1829],{"class":2278},[853,2494,2495],{"class":1208}," && \u003C",[853,2497,853],{"class":2278},[853,2499,2477],{"class":2278},[853,2501,2480],{"class":863},[853,2503,1161],{"class":1208},[853,2505,2506],{"class":863},"({",[853,2508,1697],{"class":2278},[853,2510,2511],{"class":863}," })}>{",[853,2513,1829],{"class":867},[853,2515,2516],{"class":863},"}\u003C\u002F",[853,2518,853],{"class":867},[853,2520,2521],{"class":863},">}\n",[853,2523,2524,2526],{"class":855,"line":1749},[853,2525,1816],{"class":863},[853,2527,1852],{"class":2278},[853,2529,2530,2533,2535,2537,2539],{"class":855,"line":1758},[853,2531,2532],{"class":867},"                className",[853,2534,956],{"class":863},[853,2536,1220],{"class":863},[853,2538,1865],{"class":880},[853,2540,1868],{"class":863},[853,2542,2543,2546,2548,2550],{"class":855,"line":1780},[853,2544,2545],{"class":867},"                disabled",[853,2547,2480],{"class":863},[853,2549,1182],{"class":867},[853,2551,2256],{"class":863},[853,2553,2554,2557,2559,2561],{"class":855,"line":1813},[853,2555,2556],{"class":867},"                readOnly",[853,2558,2480],{"class":863},[853,2560,1185],{"class":867},[853,2562,2256],{"class":863},[853,2564,2565,2568,2571,2573,2575,2577],{"class":855,"line":1837},[853,2566,2567],{"class":867},"                aria",[853,2569,2570],{"class":863},"-",[853,2572,1179],{"class":867},[853,2574,2480],{"class":863},[853,2576,1179],{"class":867},[853,2578,2256],{"class":863},[853,2580,2581,2584,2587],{"class":855,"line":1847},[853,2582,2583],{"class":863},"                {...",[853,2585,2586],{"class":2278},"textareaProps",[853,2588,2256],{"class":863},[853,2590,2591],{"class":855,"line":1855},[853,2592,2593],{"class":863},"            \u002F>\n",[853,2595,2596,2598,2600,2602,2604,2606,2608,2610,2612,2614,2616,2618,2620,2622],{"class":855,"line":1871},[853,2597,2490],{"class":863},[853,2599,1978],{"class":2278},[853,2601,2495],{"class":1208},[853,2603,853],{"class":2278},[853,2605,2477],{"class":2278},[853,2607,2480],{"class":863},[853,2609,1165],{"class":1208},[853,2611,2506],{"class":863},[853,2613,1697],{"class":2278},[853,2615,2511],{"class":863},[853,2617,1978],{"class":867},[853,2619,2516],{"class":863},[853,2621,853],{"class":867},[853,2623,2521],{"class":863},[853,2625,2626,2628,2630],{"class":855,"line":1886},[853,2627,1840],{"class":863},[853,2629,853],{"class":867},[853,2631,1227],{"class":863},[853,2633,2634,2637],{"class":855,"line":1900},[853,2635,2636],{"class":1208},"    )",[853,2638,887],{"class":863},[853,2640,2641],{"class":855,"line":1914},[853,2642,2256],{"class":863},[1191,2644,2645,2657,2892],{"v-slot:other":849},[692,2646,694,2647,1158,2650,1162,2653,2656],{},[712,2648,2649],{},"textarea()",[712,2651,2652],{},"textareaPrefix()",[712,2654,2655],{},"textareaSuffix()"," runtimes each return a class string. Apply the result however your framework binds classes:",[844,2658,2661],{"className":846,"code":2659,"filename":2660,"language":848,"meta":849,"style":849},"import { textarea, textareaPrefix, textareaSuffix } from \"virtual:styleframe\";\n\nconst wrapperClasses = textarea({\n    color: \"neutral\",\n    variant: \"default\",\n    size: \"md\",\n    resize: \"vertical\",\n    invalid: false,\n    disabled: false,\n    readonly: false,\n});\n\u002F\u002F → \"textarea -resize-vertical _border-width:thin _border-radius:md ...\"\n\nconst prefixClasses = textareaPrefix({ size: \"md\" });\n\u002F\u002F → \"textarea-prefix _font-size:sm ...\"\n\nconst suffixClasses = textareaSuffix({ size: \"md\" });\n\u002F\u002F → \"textarea-suffix _font-size:sm ...\"\n","src\u002Fcomponents\u002Ftextarea.ts",[712,2662,2663,2691,2695,2711,2726,2740,2754,2768,2778,2788,2798,2806,2812,2816,2847,2852,2856,2887],{"__ignoreMap":849},[853,2664,2665,2667,2669,2671,2673,2675,2677,2679,2681,2683,2685,2687,2689],{"class":855,"line":856},[853,2666,860],{"class":859},[853,2668,864],{"class":863},[853,2670,1263],{"class":867},[853,2672,1078],{"class":863},[853,2674,1268],{"class":867},[853,2676,1078],{"class":863},[853,2678,1273],{"class":867},[853,2680,871],{"class":863},[853,2682,874],{"class":859},[853,2684,1248],{"class":863},[853,2686,881],{"class":880},[853,2688,1220],{"class":863},[853,2690,887],{"class":863},[853,2692,2693],{"class":855,"line":890},[853,2694,943],{"emptyLinePlaceholder":223},[853,2696,2697,2699,2702,2704,2706,2708],{"class":855,"line":898},[853,2698,950],{"class":949},[853,2700,2701],{"class":867}," wrapperClasses ",[853,2703,956],{"class":863},[853,2705,1263],{"class":959},[853,2707,1668],{"class":867},[853,2709,2710],{"class":863},"{\n",[853,2712,2713,2715,2718,2720,2722,2724],{"class":855,"line":907},[853,2714,1425],{"class":1208},[853,2716,2717],{"class":863},":",[853,2719,1248],{"class":863},[853,2721,1307],{"class":880},[853,2723,1220],{"class":863},[853,2725,904],{"class":863},[853,2727,2728,2730,2732,2734,2736,2738],{"class":855,"line":915},[853,2729,1461],{"class":1208},[853,2731,2717],{"class":863},[853,2733,1248],{"class":863},[853,2735,1323],{"class":880},[853,2737,1220],{"class":863},[853,2739,904],{"class":863},[853,2741,2742,2744,2746,2748,2750,2752],{"class":855,"line":923},[853,2743,1495],{"class":1208},[853,2745,2717],{"class":863},[853,2747,1248],{"class":863},[853,2749,1339],{"class":880},[853,2751,1220],{"class":863},[853,2753,904],{"class":863},[853,2755,2756,2758,2760,2762,2764,2766],{"class":855,"line":940},[853,2757,1529],{"class":1208},[853,2759,2717],{"class":863},[853,2761,1248],{"class":863},[853,2763,799],{"class":880},[853,2765,1220],{"class":863},[853,2767,904],{"class":863},[853,2769,2770,2772,2774,2776],{"class":855,"line":946},[853,2771,1572],{"class":1208},[853,2773,2717],{"class":863},[853,2775,1369],{"class":1368},[853,2777,904],{"class":863},[853,2779,2780,2782,2784,2786],{"class":855,"line":967},[853,2781,1586],{"class":1208},[853,2783,2717],{"class":863},[853,2785,1369],{"class":1368},[853,2787,904],{"class":863},[853,2789,2790,2792,2794,2796],{"class":855,"line":972},[853,2791,1598],{"class":1208},[853,2793,2717],{"class":863},[853,2795,1369],{"class":1368},[853,2797,904],{"class":863},[853,2799,2800,2802,2804],{"class":855,"line":990},[853,2801,926],{"class":863},[853,2803,1722],{"class":867},[853,2805,887],{"class":863},[853,2807,2808],{"class":855,"line":1007},[853,2809,2811],{"class":2810},"sHwdD","\u002F\u002F → \"textarea -resize-vertical _border-width:thin _border-radius:md ...\"\n",[853,2813,2814],{"class":855,"line":1024},[853,2815,943],{"emptyLinePlaceholder":223},[853,2817,2818,2820,2823,2825,2827,2829,2831,2833,2835,2837,2839,2841,2843,2845],{"class":855,"line":1029},[853,2819,950],{"class":949},[853,2821,2822],{"class":867}," prefixClasses ",[853,2824,956],{"class":863},[853,2826,1268],{"class":959},[853,2828,1668],{"class":867},[853,2830,1684],{"class":863},[853,2832,1697],{"class":1208},[853,2834,2717],{"class":863},[853,2836,1248],{"class":863},[853,2838,1339],{"class":880},[853,2840,1220],{"class":863},[853,2842,871],{"class":863},[853,2844,1722],{"class":867},[853,2846,887],{"class":863},[853,2848,2849],{"class":855,"line":1422},[853,2850,2851],{"class":2810},"\u002F\u002F → \"textarea-prefix _font-size:sm ...\"\n",[853,2853,2854],{"class":855,"line":1458},[853,2855,943],{"emptyLinePlaceholder":223},[853,2857,2858,2860,2863,2865,2867,2869,2871,2873,2875,2877,2879,2881,2883,2885],{"class":855,"line":1492},[853,2859,950],{"class":949},[853,2861,2862],{"class":867}," suffixClasses ",[853,2864,956],{"class":863},[853,2866,1273],{"class":959},[853,2868,1668],{"class":867},[853,2870,1684],{"class":863},[853,2872,1697],{"class":1208},[853,2874,2717],{"class":863},[853,2876,1248],{"class":863},[853,2878,1339],{"class":880},[853,2880,1220],{"class":863},[853,2882,871],{"class":863},[853,2884,1722],{"class":867},[853,2886,887],{"class":863},[853,2888,2889],{"class":855,"line":1526},[853,2890,2891],{"class":2810},"\u002F\u002F → \"textarea-suffix _font-size:sm ...\"\n",[844,2893,2898],{"className":2894,"code":2895,"filename":2896,"language":2897,"meta":849,"style":849},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cspan class=\"textarea -resize-vertical _border-width:thin _border-radius:md ...\">\n    \u003Cspan class=\"textarea-prefix _font-size:sm ...\">✎\u003C\u002Fspan>\n    \u003Ctextarea class=\"textarea-field\" rows=\"4\" placeholder=\"Write a note...\">\u003C\u002Ftextarea>\n    \u003Cspan class=\"textarea-suffix _font-size:sm ...\">0\u002F280\u003C\u002Fspan>\n\u003C\u002Fspan>\n","src\u002Fcomponents\u002Ftextarea.html","html",[712,2899,2900,2920,2949,2995,3023],{"__ignoreMap":849},[853,2901,2902,2904,2906,2909,2911,2913,2916,2918],{"class":855,"line":856},[853,2903,1205],{"class":863},[853,2905,853],{"class":1208},[853,2907,2908],{"class":949}," class",[853,2910,956],{"class":863},[853,2912,1220],{"class":863},[853,2914,2915],{"class":880},"textarea -resize-vertical _border-width:thin _border-radius:md ...",[853,2917,1220],{"class":863},[853,2919,1227],{"class":863},[853,2921,2922,2924,2926,2928,2930,2932,2935,2937,2940,2943,2945,2947],{"class":855,"line":890},[853,2923,1761],{"class":863},[853,2925,853],{"class":1208},[853,2927,2908],{"class":949},[853,2929,956],{"class":863},[853,2931,1220],{"class":863},[853,2933,2934],{"class":880},"textarea-prefix _font-size:sm ...",[853,2936,1220],{"class":863},[853,2938,2939],{"class":863},">",[853,2941,2942],{"class":867},"✎",[853,2944,1737],{"class":863},[853,2946,853],{"class":1208},[853,2948,1227],{"class":863},[853,2950,2951,2953,2955,2957,2959,2961,2963,2965,2968,2970,2972,2974,2976,2979,2981,2983,2986,2988,2991,2993],{"class":855,"line":898},[853,2952,1761],{"class":863},[853,2954,1157],{"class":1208},[853,2956,2908],{"class":949},[853,2958,956],{"class":863},[853,2960,1220],{"class":863},[853,2962,1865],{"class":880},[853,2964,1220],{"class":863},[853,2966,2967],{"class":949}," rows",[853,2969,956],{"class":863},[853,2971,1220],{"class":863},[853,2973,826],{"class":880},[853,2975,1220],{"class":863},[853,2977,2978],{"class":949}," placeholder",[853,2980,956],{"class":863},[853,2982,1220],{"class":863},[853,2984,2985],{"class":880},"Write a note...",[853,2987,1220],{"class":863},[853,2989,2990],{"class":863},">\u003C\u002F",[853,2992,1157],{"class":1208},[853,2994,1227],{"class":863},[853,2996,2997,2999,3001,3003,3005,3007,3010,3012,3014,3017,3019,3021],{"class":855,"line":907},[853,2998,1761],{"class":863},[853,3000,853],{"class":1208},[853,3002,2908],{"class":949},[853,3004,956],{"class":863},[853,3006,1220],{"class":863},[853,3008,3009],{"class":880},"textarea-suffix _font-size:sm ...",[853,3011,1220],{"class":863},[853,3013,2939],{"class":863},[853,3015,3016],{"class":867},"0\u002F280",[853,3018,1737],{"class":863},[853,3020,853],{"class":1208},[853,3022,1227],{"class":863},[853,3024,3025,3027,3029],{"class":855,"line":915},[853,3026,1737],{"class":863},[853,3028,853],{"class":1208},[853,3030,1227],{"class":863},[828,3032,3034],{"id":3033},"see-it-in-action","See it in action",[3036,3037],"story-preview",{"story":3038,":panel":3039},"theme-recipes-forms-textarea--default","true",[688,3041,195],{"id":3042},"colors",[692,3044,3045,3046,1158,3048,1162,3050,3052],{},"The Textarea recipe includes 3 color variants: ",[712,3047,1433],{},[712,3049,1443],{},[712,3051,1307],{},". Like the Input, Card, and ChatMessage recipes, Textarea uses neutral-spectrum colors designed for content surfaces rather than status communication — a field's color reflects its surface, not a state. The wrapper combines each color with every visual style variant through compound variants, so you get consistent, predictable styling across all combinations — including dark mode overrides.",[692,3054,694,3055,3057],{},[712,3056,1307],{}," color adapts automatically: it uses a light appearance in light mode and a dark appearance in dark mode, making it the safest default for general-purpose forms.",[3036,3059],{"story":3060,":panel":3039},"theme-recipes-forms-textarea--neutral",[3062,3063,3065],"h3",{"id":3064},"color-reference","Color Reference",[3036,3067],{"story":3068,":height":3069},"theme-recipes-forms-textarea--all-variants","520",[3071,3072,3073,3089],"table",{},[3074,3075,3076],"thead",{},[3077,3078,3079,3083,3086],"tr",{},[3080,3081,3082],"th",{},"Color",[3080,3084,3085],{},"Token",[3080,3087,3088],{},"Use Case",[3090,3091,3092,3111,3125],"tbody",{},[3077,3093,3094,3099,3108],{},[3095,3096,3097],"td",{},[712,3098,1433],{},[3095,3100,3101,3104,3105],{},[712,3102,3103],{},"@color.white"," \u002F ",[712,3106,3107],{},"@color.gray-*",[3095,3109,3110],{},"Light surfaces, stays light in dark mode",[3077,3112,3113,3117,3122],{},[3095,3114,3115],{},[712,3116,1443],{},[3095,3118,3119],{},[712,3120,3121],{},"@color.gray-900",[3095,3123,3124],{},"Dark surfaces, stays dark in light mode",[3077,3126,3127,3131,3134],{},[3095,3128,3129],{},[712,3130,1307],{},[3095,3132,3133],{},"Adaptive (light ↔ dark)",[3095,3135,3136],{},"Default color, adapts to the current color scheme",[3138,3139,3140,3143,3144,3146],"tip",{},[696,3141,3142],{},"Pro tip:"," Use ",[712,3145,1307],{}," as your default textarea color. It adapts to the user's color scheme automatically, so you don't need to manage light and dark variants separately.",[688,3148,3150],{"id":3149},"variants","Variants",[692,3152,3153,3154,3158],{},"Three visual style variants control how the field surface is rendered. Each variant is combined with the selected color through ",[700,3155,3157],{"href":3156},"\u002Fdocs\u002Fapi\u002Frecipes#compound-variants","compound variants",", so you always get the correct background, text, and border colors for your chosen color.",[3062,3160,3161],{"id":1323},"Default",[692,3163,3164,3165,2231],{},"Opaque surface with a visible border — the standard bordered text field. Sits above the page with a solid background and reveals a primary-colored focus ring on ",[712,3166,718],{},[3036,3168],{"story":3169,":panel":3039},"theme-recipes-forms-textarea--default-variant",[3062,3171,3172],{"id":1476},"Soft",[692,3174,3175],{},"Tinted gray background with a matching border. A gentler, lower-contrast field that blends into dense forms.",[3036,3177],{"story":3178,":panel":3039},"theme-recipes-forms-textarea--soft",[3062,3180,3181],{"id":1485},"Ghost",[692,3183,3184,3185,3187],{},"No background and no border until interaction. The field shows only the focus ring on ",[712,3186,718],{},", making it ideal for inline editing and borderless layouts.",[3036,3189],{"story":3190,":panel":3039},"theme-recipes-forms-textarea--ghost",[688,3192,3194],{"id":3193},"sizes","Sizes",[692,3196,3197,3198,3200,3201,3203],{},"Three size variants from ",[712,3199,1502],{}," to ",[712,3202,1519],{}," control the field's font size, padding, and border radius. The prefix and suffix addons share the same size axis, scaling their font size, inner padding, and gap to stay aligned with the field.",[3036,3205],{"story":3206,":height":3207},"theme-recipes-forms-textarea--all-sizes","420",[3062,3209,3211],{"id":3210},"size-reference","Size Reference",[3071,3213,3214,3230],{},[3074,3215,3216],{},[3077,3217,3218,3221,3224,3227],{},[3080,3219,3220],{},"Size",[3080,3222,3223],{},"Font Size",[3080,3225,3226],{},"Padding (V \u002F H)",[3080,3228,3229],{},"Border Radius",[3090,3231,3232,3256,3280],{},[3077,3233,3234,3238,3243,3251],{},[3095,3235,3236],{},[712,3237,1502],{},[3095,3239,3240],{},[712,3241,3242],{},"@font-size.xs",[3095,3244,3245,3104,3248],{},[712,3246,3247],{},"@0.375",[712,3249,3250],{},"@0.625",[3095,3252,3253],{},[712,3254,3255],{},"@border-radius.sm",[3077,3257,3258,3262,3267,3275],{},[3095,3259,3260],{},[712,3261,1339],{},[3095,3263,3264],{},[712,3265,3266],{},"@font-size.sm",[3095,3268,3269,3104,3272],{},[712,3270,3271],{},"@0.5",[712,3273,3274],{},"@0.75",[3095,3276,3277],{},[712,3278,3279],{},"@border-radius.md",[3077,3281,3282,3286,3291,3298],{},[3095,3283,3284],{},[712,3285,1519],{},[3095,3287,3288],{},[712,3289,3290],{},"@font-size.md",[3095,3292,3293,3104,3295],{},[712,3294,3250],{},[712,3296,3297],{},"@0.875",[3095,3299,3300],{},[712,3301,3279],{},[3303,3304,3305,3308,3309,3311,3312,3314,3315,3317,3318,3320],"note",{},[696,3306,3307],{},"Good to know:"," Use the native ",[712,3310,1881],{}," attribute on the nested ",[712,3313,795],{}," to set the initial height. The recipe controls the surface (border, padding, radius) and typography; ",[712,3316,1881],{}," and the ",[712,3319,722],{}," axis control the height.",[688,3322,3323],{"id":722},"Resize",[692,3325,694,3326,3328,3329,3331,3332,3334,3335,3338,3339,2231],{},[712,3327,722],{}," axis maps to the native CSS ",[712,3330,722],{}," property on the nested ",[712,3333,795],{},". Because resizing must apply to the real control rather than the wrapper, each value adds a marker class on the wrapper (",[712,3336,3337],{},"-resize-vertical",", ...) that the recipe maps onto the ",[712,3340,1169],{},[3071,3342,3343,3353],{},[3074,3344,3345],{},[3077,3346,3347,3350],{},[3080,3348,3349],{},"Value",[3080,3351,3352],{},"Behavior",[3090,3354,3355,3364,3373,3382],{},[3077,3356,3357,3361],{},[3095,3358,3359],{},[712,3360,1536],{},[3095,3362,3363],{},"The field cannot be resized",[3077,3365,3366,3370],{},[3095,3367,3368],{},[712,3369,799],{},[3095,3371,3372],{},"The field can be resized vertically (default)",[3077,3374,3375,3379],{},[3095,3376,3377],{},[712,3378,1553],{},[3095,3380,3381],{},"The field can be resized horizontally",[3077,3383,3384,3388],{},[3095,3385,3386],{},[712,3387,1562],{},[3095,3389,3390],{},"The field can be resized in both directions",[3036,3392],{"story":3393,":height":3069},"theme-recipes-forms-textarea--all-resize",[3138,3395,3396,3398,3399,3401,3402,3404,3405,3407],{},[696,3397,3142],{}," Keep the default ",[712,3400,799],{}," for most forms. It lets users expand the field for longer content without letting horizontal resizing break your layout. Use ",[712,3403,1536],{}," for fixed-height fields and ",[712,3406,1562],{}," only when the surrounding layout can absorb width changes.",[688,3409,342],{"id":3410},"states",[692,3412,3413,3414,3416,3417,3104,3420,3423,3424,3427],{},"The wrapper exposes three boolean state axes that map directly to the equivalent native ",[712,3415,795],{}," attributes. Pass each as a boolean — the recipe also accepts the ",[712,3418,3419],{},"\"true\"",[712,3421,3422],{},"\"false\""," string keys, but the boolean form is simpler (see ",[700,3425,1151],{"href":3426},"#build-the-component",").",[3062,3429,3430],{"id":1179},"Invalid",[692,3432,3433,3434,3437],{},"Overrides the border and the focus ring to the error color. Set it alongside ",[712,3435,3436],{},"aria-invalid"," on the native textarea so assistive technology hears the error.",[3036,3439],{"story":3440,":panel":3039},"theme-recipes-forms-textarea--invalid",[3062,3442,3443],{"id":1182},"Disabled",[692,3445,3446,3447,3450,3451,3454,3455,3457],{},"Dims the field to ",[712,3448,3449],{},"0.5"," opacity, switches the cursor to ",[712,3452,3453],{},"not-allowed",", and blocks pointer interaction (including the resize handle). Mirror it with the native ",[712,3456,1182],{}," attribute so the textarea is also removed from the tab order.",[3036,3459],{"story":3460,":panel":3039},"theme-recipes-forms-textarea--disabled",[3062,3462,3464],{"id":3463},"read-only","Read-only",[692,3466,3467,3468,3470],{},"Applies a subtle background shift and a default cursor while keeping the value selectable. Mirror it with the native ",[712,3469,1185],{}," attribute so the value is submitted but not editable.",[3036,3472],{"story":3473,":panel":3039},"theme-recipes-forms-textarea--read-only",[3303,3475,3476,3478,3479,3481,3482,3484,3485,3487],{},[696,3477,3307],{}," ",[712,3480,1179],{}," is applied before ",[712,3483,1185],{}," and ",[712,3486,1182],{}," in the compound variant order, so an invalid field keeps its error border even when it is also read-only, and a disabled field still dims on top of any other state.",[688,3489,3491],{"id":3490},"addons","Addons",[692,3493,3494,3495,3498,3499,1158,3501,3503,3504,3506],{},"Textarea supports ",[696,3496,3497],{},"inline"," addons (",[712,3500,1829],{},[712,3502,1978],{},") that render inside the field and share its surface — with the wrapper top-aligned, they anchor to the top of the field. Use them for icons or character counters. To attach an interactive block such as a button outside the field, group the controls with a ",[700,3505,448],{"href":449}," instead.",[3062,3508,3510],{"id":3509},"prefix-and-suffix-inline","Prefix and suffix (inline)",[692,3512,3513],{},"The prefix and suffix sit inside the wrapper, to the left and right of the text, sharing the field's background and focus ring. They are size-aware and use a muted text color.",[3036,3515],{"story":3516,":panel":3039},"theme-recipes-forms-textarea--with-prefix",[3036,3518],{"story":3519,":panel":3039},"theme-recipes-forms-textarea--with-suffix",[3036,3521],{"story":3522,":panel":3039},"theme-recipes-forms-textarea--with-prefix-and-suffix",[3062,3524,3526],{"id":3525},"attached-controls-field-group","Attached controls (field group)",[692,3528,3529,3530,3532,3533,3536],{},"To attach a button, select, or other bordered control to the textarea, place them as direct children of a ",[700,3531,448],{"href":449},". A vertical group stacks the action beneath the field; the group flattens the border radius and inner border at the seam so they read as one joined unit. Set ",[712,3534,3535],{},"resize=\"none\""," on the textarea so the joined edge stays tidy.",[3036,3538],{"story":3539,":panel":3039},"theme-recipes-forms-textarea--with-field-group",[3138,3541,3542,3544,3545,3547,3548,3550,3551,3553],{},[696,3543,3142],{}," Reach for ",[712,3546,1829],{},"\u002F",[712,3549,1978],{}," when the addon is decorative or informational (an icon, a counter) and lives inside the field. Reach for a ",[700,3552,448],{"href":449}," when the addon is an interactive control (a button, a dropdown) attached outside the field.",[688,3555,3557],{"id":3556},"anatomy","Anatomy",[692,3559,3560],{},"The Textarea is composed of three independent recipes that build a standalone field with inline addons:",[3071,3562,3563,3576],{},[3074,3564,3565],{},[3077,3566,3567,3570,3573],{},[3080,3568,3569],{},"Part",[3080,3571,3572],{},"Recipe",[3080,3574,3575],{},"Role",[3090,3577,3578,3603,3617],{},[3077,3579,3580,3585,3589],{},[3095,3581,3582],{},[696,3583,3584],{},"Field",[3095,3586,3587],{},[712,3588,714],{},[3095,3590,694,3591,3594,3595,3597,3598,3600,3601,1263],{},[712,3592,3593],{},".textarea"," wrapper — owns the visual field (border, background, padding, ",[712,3596,718],{}," ring) and the ",[712,3599,722],{}," axis, and contains the transparent nested ",[712,3602,1169],{},[3077,3604,3605,3610,3614],{},[3095,3606,3607],{},[696,3608,3609],{},"Prefix",[3095,3611,3612],{},[712,3613,730],{},[3095,3615,3616],{},"Leading inline addon inside the field — icons or small affordances",[3077,3618,3619,3624,3628],{},[3095,3620,3621],{},[696,3622,3623],{},"Suffix",[3095,3625,3626],{},[712,3627,738],{},[3095,3629,3630],{},"Trailing inline addon inside the field — icons, character counters",[692,3632,3633,3634,3636,3637,3639,3640,3642],{},"The nested ",[712,3635,1169],{}," element is the real ",[712,3638,795],{},": it is transparent, has no border or padding of its own, and inherits typography and color from the wrapper. The wrapper owns the entire visual field via ",[712,3641,718],{},", so the focus ring appears whenever the inner textarea is focused.",[844,3644,3646],{"className":2894,"code":3645,"language":2897,"meta":849,"style":849},"\u003C!-- Standalone field with inline addons -->\n\u003Cspan class=\"textarea(...)\">\n    \u003Cspan class=\"textareaPrefix(...)\">✎\u003C\u002Fspan>\n    \u003Ctextarea class=\"textarea-field\" rows=\"4\">\u003C\u002Ftextarea>\n    \u003Cspan class=\"textareaSuffix(...)\">0\u002F280\u003C\u002Fspan>\n\u003C\u002Fspan>\n\n\u003C!-- Field attached to a button via a vertical field group -->\n\u003Cdiv class=\"fieldGroup(...)\">\n    \u003Cspan class=\"textarea(...)\">\u003Ctextarea class=\"textarea-field\">\u003C\u002Ftextarea>\u003C\u002Fspan>\n    \u003Cbutton class=\"button(...)\">Send\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n",[712,3647,3648,3653,3672,3699,3731,3758,3766,3770,3775,3795,3836,3865],{"__ignoreMap":849},[853,3649,3650],{"class":855,"line":856},[853,3651,3652],{"class":2810},"\u003C!-- Standalone field with inline addons -->\n",[853,3654,3655,3657,3659,3661,3663,3665,3668,3670],{"class":855,"line":890},[853,3656,1205],{"class":863},[853,3658,853],{"class":1208},[853,3660,2908],{"class":949},[853,3662,956],{"class":863},[853,3664,1220],{"class":863},[853,3666,3667],{"class":880},"textarea(...)",[853,3669,1220],{"class":863},[853,3671,1227],{"class":863},[853,3673,3674,3676,3678,3680,3682,3684,3687,3689,3691,3693,3695,3697],{"class":855,"line":898},[853,3675,1761],{"class":863},[853,3677,853],{"class":1208},[853,3679,2908],{"class":949},[853,3681,956],{"class":863},[853,3683,1220],{"class":863},[853,3685,3686],{"class":880},"textareaPrefix(...)",[853,3688,1220],{"class":863},[853,3690,2939],{"class":863},[853,3692,2942],{"class":867},[853,3694,1737],{"class":863},[853,3696,853],{"class":1208},[853,3698,1227],{"class":863},[853,3700,3701,3703,3705,3707,3709,3711,3713,3715,3717,3719,3721,3723,3725,3727,3729],{"class":855,"line":907},[853,3702,1761],{"class":863},[853,3704,1157],{"class":1208},[853,3706,2908],{"class":949},[853,3708,956],{"class":863},[853,3710,1220],{"class":863},[853,3712,1865],{"class":880},[853,3714,1220],{"class":863},[853,3716,2967],{"class":949},[853,3718,956],{"class":863},[853,3720,1220],{"class":863},[853,3722,826],{"class":880},[853,3724,1220],{"class":863},[853,3726,2990],{"class":863},[853,3728,1157],{"class":1208},[853,3730,1227],{"class":863},[853,3732,3733,3735,3737,3739,3741,3743,3746,3748,3750,3752,3754,3756],{"class":855,"line":915},[853,3734,1761],{"class":863},[853,3736,853],{"class":1208},[853,3738,2908],{"class":949},[853,3740,956],{"class":863},[853,3742,1220],{"class":863},[853,3744,3745],{"class":880},"textareaSuffix(...)",[853,3747,1220],{"class":863},[853,3749,2939],{"class":863},[853,3751,3016],{"class":867},[853,3753,1737],{"class":863},[853,3755,853],{"class":1208},[853,3757,1227],{"class":863},[853,3759,3760,3762,3764],{"class":855,"line":923},[853,3761,1737],{"class":863},[853,3763,853],{"class":1208},[853,3765,1227],{"class":863},[853,3767,3768],{"class":855,"line":940},[853,3769,943],{"emptyLinePlaceholder":223},[853,3771,3772],{"class":855,"line":946},[853,3773,3774],{"class":2810},"\u003C!-- Field attached to a button via a vertical field group -->\n",[853,3776,3777,3779,3782,3784,3786,3788,3791,3793],{"class":855,"line":967},[853,3778,1205],{"class":863},[853,3780,3781],{"class":1208},"div",[853,3783,2908],{"class":949},[853,3785,956],{"class":863},[853,3787,1220],{"class":863},[853,3789,3790],{"class":880},"fieldGroup(...)",[853,3792,1220],{"class":863},[853,3794,1227],{"class":863},[853,3796,3797,3799,3801,3803,3805,3807,3809,3811,3814,3816,3818,3820,3822,3824,3826,3828,3830,3832,3834],{"class":855,"line":972},[853,3798,1761],{"class":863},[853,3800,853],{"class":1208},[853,3802,2908],{"class":949},[853,3804,956],{"class":863},[853,3806,1220],{"class":863},[853,3808,3667],{"class":880},[853,3810,1220],{"class":863},[853,3812,3813],{"class":863},">\u003C",[853,3815,1157],{"class":1208},[853,3817,2908],{"class":949},[853,3819,956],{"class":863},[853,3821,1220],{"class":863},[853,3823,1865],{"class":880},[853,3825,1220],{"class":863},[853,3827,2990],{"class":863},[853,3829,1157],{"class":1208},[853,3831,2990],{"class":863},[853,3833,853],{"class":1208},[853,3835,1227],{"class":863},[853,3837,3838,3840,3843,3845,3847,3849,3852,3854,3856,3859,3861,3863],{"class":855,"line":990},[853,3839,1761],{"class":863},[853,3841,3842],{"class":1208},"button",[853,3844,2908],{"class":949},[853,3846,956],{"class":863},[853,3848,1220],{"class":863},[853,3850,3851],{"class":880},"button(...)",[853,3853,1220],{"class":863},[853,3855,2939],{"class":863},[853,3857,3858],{"class":867},"Send",[853,3860,1737],{"class":863},[853,3862,3842],{"class":1208},[853,3864,1227],{"class":863},[853,3866,3867,3869,3871],{"class":855,"line":1007},[853,3868,1737],{"class":863},[853,3870,3781],{"class":1208},[853,3872,1227],{"class":863},[3138,3874,3875,3143,3877,3879,3880,3882],{},[696,3876,3142],{},[712,3878,714],{}," on its own (with optional prefix\u002Fsuffix) for most textareas, and reach for a ",[700,3881,448],{"href":449}," only when you attach interactive blocks.",[688,3884,568],{"id":3885},"accessibility",[704,3887,3888,3907,3918,3935,3945],{},[707,3889,3890,3898,3899,3902,3903,3906],{},[696,3891,3892,3893,3895,3896,2231],{},"Pair the ",[712,3894,1179],{}," state with ",[712,3897,3436],{}," The error border is a visual cue only. Set ",[712,3900,3901],{},"aria-invalid=\"true\""," on the native textarea and reference an error message with ",[712,3904,3905],{},"aria-describedby"," so screen readers announce the problem.",[707,3908,3909,3912,3913,3484,3915,3917],{},[696,3910,3911],{},"Mirror states on the native textarea."," Set the real ",[712,3914,1182],{},[712,3916,1185],{}," attributes in addition to the recipe state, so the field is correctly removed from (or kept in) the tab order and submitted accordingly.",[707,3919,3920,3923,3924,3927,3928,3547,3931,3934],{},[696,3921,3922],{},"Label every field."," Associate a ",[712,3925,3926],{},"\u003Clabel>"," with the nested textarea via ",[712,3929,3930],{},"for",[712,3932,3933],{},"id",", or wrap the textarea in the label. The recipe styles the surface but does not provide a name.",[707,3936,3937,3940,3941,3944],{},[696,3938,3939],{},"Give inline addons text alternatives."," A prefix or suffix that conveys meaning (a character counter, an icon) should be exposed to assistive technology — keep it as readable text, or add an ",[712,3942,3943],{},"aria-label"," to the textarea that includes it.",[707,3946,3947,3950,3951,3953,3954,2231],{},[696,3948,3949],{},"Verify contrast ratios."," The ",[712,3952,1443],{}," color places light text on a dark surface. Default tokens meet WCAG AA 4.5:1 contrast. If you override colors, verify with the ",[700,3955,3959],{"href":3956,"rel":3957},"https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F",[3958],"nofollow","WebAIM Contrast Checker",[688,3961,3963],{"id":3962},"customization","Customization",[3062,3965,3967],{"id":3966},"overriding-defaults","Overriding Defaults",[692,3969,3970],{},"Each textarea composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults, so you only need to specify the properties you want to change:",[844,3972,3974],{"className":846,"code":3973,"filename":842,"language":848,"meta":849,"style":849},"import { styleframe } from 'virtual:styleframe';\nimport { useTextareaRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst textarea = useTextareaRecipe(s, {\n    base: {\n        borderRadius: '@border-radius.lg',\n    },\n    defaultVariants: {\n        color: 'neutral',\n        variant: 'soft',\n        size: 'lg',\n        resize: 'none',\n    },\n});\n\nexport default s;\n",[712,3975,3976,3996,4016,4020,4034,4038,4055,4064,4080,4085,4094,4109,4124,4139,4154,4158,4166,4170],{"__ignoreMap":849},[853,3977,3978,3980,3982,3984,3986,3988,3990,3992,3994],{"class":855,"line":856},[853,3979,860],{"class":859},[853,3981,864],{"class":863},[853,3983,868],{"class":867},[853,3985,871],{"class":863},[853,3987,874],{"class":859},[853,3989,877],{"class":863},[853,3991,881],{"class":880},[853,3993,884],{"class":863},[853,3995,887],{"class":863},[853,3997,3998,4000,4002,4004,4006,4008,4010,4012,4014],{"class":855,"line":890},[853,3999,860],{"class":859},[853,4001,864],{"class":863},[853,4003,982],{"class":867},[853,4005,871],{"class":863},[853,4007,874],{"class":859},[853,4009,877],{"class":863},[853,4011,933],{"class":880},[853,4013,884],{"class":863},[853,4015,887],{"class":863},[853,4017,4018],{"class":855,"line":898},[853,4019,943],{"emptyLinePlaceholder":223},[853,4021,4022,4024,4026,4028,4030,4032],{"class":855,"line":907},[853,4023,950],{"class":949},[853,4025,953],{"class":867},[853,4027,956],{"class":863},[853,4029,868],{"class":959},[853,4031,962],{"class":867},[853,4033,887],{"class":863},[853,4035,4036],{"class":855,"line":915},[853,4037,943],{"emptyLinePlaceholder":223},[853,4039,4040,4042,4044,4046,4048,4051,4053],{"class":855,"line":923},[853,4041,950],{"class":949},[853,4043,977],{"class":867},[853,4045,956],{"class":863},[853,4047,982],{"class":959},[853,4049,4050],{"class":867},"(s",[853,4052,1078],{"class":863},[853,4054,895],{"class":863},[853,4056,4057,4060,4062],{"class":855,"line":940},[853,4058,4059],{"class":1208},"    base",[853,4061,2717],{"class":863},[853,4063,895],{"class":863},[853,4065,4066,4069,4071,4073,4076,4078],{"class":855,"line":946},[853,4067,4068],{"class":1208},"        borderRadius",[853,4070,2717],{"class":863},[853,4072,877],{"class":863},[853,4074,4075],{"class":880},"@border-radius.lg",[853,4077,884],{"class":863},[853,4079,904],{"class":863},[853,4081,4082],{"class":855,"line":967},[853,4083,4084],{"class":863},"    },\n",[853,4086,4087,4090,4092],{"class":855,"line":972},[853,4088,4089],{"class":1208},"    defaultVariants",[853,4091,2717],{"class":863},[853,4093,895],{"class":863},[853,4095,4096,4099,4101,4103,4105,4107],{"class":855,"line":990},[853,4097,4098],{"class":1208},"        color",[853,4100,2717],{"class":863},[853,4102,877],{"class":863},[853,4104,1307],{"class":880},[853,4106,884],{"class":863},[853,4108,904],{"class":863},[853,4110,4111,4114,4116,4118,4120,4122],{"class":855,"line":1007},[853,4112,4113],{"class":1208},"        variant",[853,4115,2717],{"class":863},[853,4117,877],{"class":863},[853,4119,1476],{"class":880},[853,4121,884],{"class":863},[853,4123,904],{"class":863},[853,4125,4126,4129,4131,4133,4135,4137],{"class":855,"line":1024},[853,4127,4128],{"class":1208},"        size",[853,4130,2717],{"class":863},[853,4132,877],{"class":863},[853,4134,1519],{"class":880},[853,4136,884],{"class":863},[853,4138,904],{"class":863},[853,4140,4141,4144,4146,4148,4150,4152],{"class":855,"line":1029},[853,4142,4143],{"class":1208},"        resize",[853,4145,2717],{"class":863},[853,4147,877],{"class":863},[853,4149,1536],{"class":880},[853,4151,884],{"class":863},[853,4153,904],{"class":863},[853,4155,4156],{"class":855,"line":1422},[853,4157,4084],{"class":863},[853,4159,4160,4162,4164],{"class":855,"line":1458},[853,4161,926],{"class":863},[853,4163,1722],{"class":867},[853,4165,887],{"class":863},[853,4167,4168],{"class":855,"line":1492},[853,4169,943],{"emptyLinePlaceholder":223},[853,4171,4172,4174,4176,4178],{"class":855,"line":1526},[853,4173,1032],{"class":859},[853,4175,1035],{"class":859},[853,4177,1038],{"class":867},[853,4179,887],{"class":863},[3062,4181,4183],{"id":4182},"filtering-variants","Filtering Variants",[692,4185,4186,4187,4190],{},"If you only need a subset of the available variants, use the ",[712,4188,4189],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[844,4192,4194],{"className":846,"code":4193,"filename":842,"language":848,"meta":849,"style":849},"import { styleframe } from 'virtual:styleframe';\nimport { useTextareaRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate the neutral color with the default and soft styles\nconst textarea = useTextareaRecipe(s, {\n    filter: {\n        color: ['neutral'],\n        variant: ['default', 'soft'],\n    },\n});\n\nexport default s;\n",[712,4195,4196,4216,4236,4240,4254,4258,4263,4279,4288,4308,4334,4338,4346,4350],{"__ignoreMap":849},[853,4197,4198,4200,4202,4204,4206,4208,4210,4212,4214],{"class":855,"line":856},[853,4199,860],{"class":859},[853,4201,864],{"class":863},[853,4203,868],{"class":867},[853,4205,871],{"class":863},[853,4207,874],{"class":859},[853,4209,877],{"class":863},[853,4211,881],{"class":880},[853,4213,884],{"class":863},[853,4215,887],{"class":863},[853,4217,4218,4220,4222,4224,4226,4228,4230,4232,4234],{"class":855,"line":890},[853,4219,860],{"class":859},[853,4221,864],{"class":863},[853,4223,982],{"class":867},[853,4225,871],{"class":863},[853,4227,874],{"class":859},[853,4229,877],{"class":863},[853,4231,933],{"class":880},[853,4233,884],{"class":863},[853,4235,887],{"class":863},[853,4237,4238],{"class":855,"line":898},[853,4239,943],{"emptyLinePlaceholder":223},[853,4241,4242,4244,4246,4248,4250,4252],{"class":855,"line":907},[853,4243,950],{"class":949},[853,4245,953],{"class":867},[853,4247,956],{"class":863},[853,4249,868],{"class":959},[853,4251,962],{"class":867},[853,4253,887],{"class":863},[853,4255,4256],{"class":855,"line":915},[853,4257,943],{"emptyLinePlaceholder":223},[853,4259,4260],{"class":855,"line":923},[853,4261,4262],{"class":2810},"\u002F\u002F Only generate the neutral color with the default and soft styles\n",[853,4264,4265,4267,4269,4271,4273,4275,4277],{"class":855,"line":940},[853,4266,950],{"class":949},[853,4268,977],{"class":867},[853,4270,956],{"class":863},[853,4272,982],{"class":959},[853,4274,4050],{"class":867},[853,4276,1078],{"class":863},[853,4278,895],{"class":863},[853,4280,4281,4284,4286],{"class":855,"line":946},[853,4282,4283],{"class":1208},"    filter",[853,4285,2717],{"class":863},[853,4287,895],{"class":863},[853,4289,4290,4292,4294,4297,4299,4301,4303,4306],{"class":855,"line":967},[853,4291,4098],{"class":1208},[853,4293,2717],{"class":863},[853,4295,4296],{"class":867}," [",[853,4298,884],{"class":863},[853,4300,1307],{"class":880},[853,4302,884],{"class":863},[853,4304,4305],{"class":867},"]",[853,4307,904],{"class":863},[853,4309,4310,4312,4314,4316,4318,4320,4322,4324,4326,4328,4330,4332],{"class":855,"line":972},[853,4311,4113],{"class":1208},[853,4313,2717],{"class":863},[853,4315,4296],{"class":867},[853,4317,884],{"class":863},[853,4319,1323],{"class":880},[853,4321,884],{"class":863},[853,4323,1078],{"class":863},[853,4325,877],{"class":863},[853,4327,1476],{"class":880},[853,4329,884],{"class":863},[853,4331,4305],{"class":867},[853,4333,904],{"class":863},[853,4335,4336],{"class":855,"line":990},[853,4337,4084],{"class":863},[853,4339,4340,4342,4344],{"class":855,"line":1007},[853,4341,926],{"class":863},[853,4343,1722],{"class":867},[853,4345,887],{"class":863},[853,4347,4348],{"class":855,"line":1024},[853,4349,943],{"emptyLinePlaceholder":223},[853,4351,4352,4354,4356,4358],{"class":855,"line":1029},[853,4353,1032],{"class":859},[853,4355,1035],{"class":859},[853,4357,1038],{"class":867},[853,4359,887],{"class":863},[3303,4361,4362,4364],{},[696,4363,3307],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[688,4366,73],{"id":4367},"api-reference",[3062,4369,4371],{"id":4370},"usetextarearecipes-options",[712,4372,4373],{},"useTextareaRecipe(s, options?)",[692,4375,4376,4377,4379,4380,4382,4383,4385],{},"Creates the textarea wrapper recipe — the ",[712,4378,3593],{}," element that owns the visual field. Registers a nested ",[712,4381,1169],{}," selector for the transparent native textarea and the ",[712,4384,722],{}," marker selectors. Owns the full compound matrix: 9 color-variant combinations, 3 state overrides, and 4 resize markers.",[692,4387,4388],{},[696,4389,4390],{},"Parameters:",[3071,4392,4393,4406],{},[3074,4394,4395],{},[3077,4396,4397,4400,4403],{},[3080,4398,4399],{},"Parameter",[3080,4401,4402],{},"Type",[3080,4404,4405],{},"Description",[3090,4407,4408,4423,4438,4453,4467,4482,4497],{},[3077,4409,4410,4415,4420],{},[3095,4411,4412],{},[712,4413,4414],{},"s",[3095,4416,4417],{},[712,4418,4419],{},"Styleframe",[3095,4421,4422],{},"The Styleframe instance",[3077,4424,4425,4430,4435],{},[3095,4426,4427],{},[712,4428,4429],{},"options",[3095,4431,4432],{},[712,4433,4434],{},"DeepPartial\u003CRecipeConfig>",[3095,4436,4437],{},"Optional overrides for the recipe configuration",[3077,4439,4440,4445,4450],{},[3095,4441,4442],{},[712,4443,4444],{},"options.base",[3095,4446,4447],{},[712,4448,4449],{},"VariantDeclarationsBlock",[3095,4451,4452],{},"Custom base styles for the field wrapper",[3077,4454,4455,4460,4464],{},[3095,4456,4457],{},[712,4458,4459],{},"options.variants",[3095,4461,4462],{},[712,4463,3150],{},[3095,4465,4466],{},"Custom variant definitions for the recipe",[3077,4468,4469,4474,4479],{},[3095,4470,4471],{},[712,4472,4473],{},"options.defaultVariants",[3095,4475,4476],{},[712,4477,4478],{},"Record\u003Ckeyof Variants, string>",[3095,4480,4481],{},"Default variant values for the recipe",[3077,4483,4484,4489,4494],{},[3095,4485,4486],{},[712,4487,4488],{},"options.compoundVariants",[3095,4490,4491],{},[712,4492,4493],{},"CompoundVariant[]",[3095,4495,4496],{},"Custom compound variant definitions for the recipe",[3077,4498,4499,4504,4509],{},[3095,4500,4501],{},[712,4502,4503],{},"options.filter",[3095,4505,4506],{},[712,4507,4508],{},"Record\u003Cstring, string[]>",[3095,4510,4511],{},"Limit which variant values are generated",[692,4513,4514],{},[696,4515,4516],{},"Variants:",[3071,4518,4519,4531],{},[3074,4520,4521],{},[3077,4522,4523,4526,4529],{},[3080,4524,4525],{},"Variant",[3080,4527,4528],{},"Options",[3080,4530,3161],{},[3090,4532,4533,4552,4571,4590,4610,4627,4643],{},[3077,4534,4535,4540,4548],{},[3095,4536,4537],{},[712,4538,4539],{},"color",[3095,4541,4542,1158,4544,1158,4546],{},[712,4543,1433],{},[712,4545,1443],{},[712,4547,1307],{},[3095,4549,4550],{},[712,4551,1307],{},[3077,4553,4554,4559,4567],{},[3095,4555,4556],{},[712,4557,4558],{},"variant",[3095,4560,4561,1158,4563,1158,4565],{},[712,4562,1323],{},[712,4564,1476],{},[712,4566,1485],{},[3095,4568,4569],{},[712,4570,1323],{},[3077,4572,4573,4578,4586],{},[3095,4574,4575],{},[712,4576,4577],{},"size",[3095,4579,4580,1158,4582,1158,4584],{},[712,4581,1502],{},[712,4583,1339],{},[712,4585,1519],{},[3095,4587,4588],{},[712,4589,1339],{},[3077,4591,4592,4596,4606],{},[3095,4593,4594],{},[712,4595,722],{},[3095,4597,4598,1158,4600,1158,4602,1158,4604],{},[712,4599,1536],{},[712,4601,799],{},[712,4603,1553],{},[712,4605,1562],{},[3095,4607,4608],{},[712,4609,799],{},[3077,4611,4612,4616,4623],{},[3095,4613,4614],{},[712,4615,1179],{},[3095,4617,4618,1158,4620],{},[712,4619,3039],{},[712,4621,4622],{},"false",[3095,4624,4625],{},[712,4626,4622],{},[3077,4628,4629,4633,4639],{},[3095,4630,4631],{},[712,4632,1182],{},[3095,4634,4635,1158,4637],{},[712,4636,3039],{},[712,4638,4622],{},[3095,4640,4641],{},[712,4642,4622],{},[3077,4644,4645,4649,4655],{},[3095,4646,4647],{},[712,4648,1185],{},[3095,4650,4651,1158,4653],{},[712,4652,3039],{},[712,4654,4622],{},[3095,4656,4657],{},[712,4658,4622],{},[3062,4660,4662],{"id":4661},"usetextareaprefixrecipes-options",[712,4663,4664],{},"useTextareaPrefixRecipe(s, options?)",[692,4666,4667,4668,2231],{},"Creates the inline prefix recipe — a leading addon rendered inside the field, sharing its surface. Size-aware (font size, inner padding, gap) with a muted text color. Accepts the same parameters as ",[712,4669,4670],{},"useTextareaRecipe",[692,4672,4673],{},[696,4674,4516],{},[3071,4676,4677,4687],{},[3074,4678,4679],{},[3077,4680,4681,4683,4685],{},[3080,4682,4525],{},[3080,4684,4528],{},[3080,4686,3161],{},[3090,4688,4689],{},[3077,4690,4691,4695,4703],{},[3095,4692,4693],{},[712,4694,4577],{},[3095,4696,4697,1158,4699,1158,4701],{},[712,4698,1502],{},[712,4700,1339],{},[712,4702,1519],{},[3095,4704,4705],{},[712,4706,1339],{},[3062,4708,4710],{"id":4709},"usetextareasuffixrecipes-options",[712,4711,4712],{},"useTextareaSuffixRecipe(s, options?)",[692,4714,4715,4716,2231],{},"Creates the inline suffix recipe — a trailing addon rendered inside the field, sharing its surface. Mirrors the prefix recipe with trailing inner padding. Accepts the same parameters as ",[712,4717,4670],{},[692,4719,4720],{},[696,4721,4516],{},[3071,4723,4724,4734],{},[3074,4725,4726],{},[3077,4727,4728,4730,4732],{},[3080,4729,4525],{},[3080,4731,4528],{},[3080,4733,3161],{},[3090,4735,4736],{},[3077,4737,4738,4742,4750],{},[3095,4739,4740],{},[712,4741,4577],{},[3095,4743,4744,1158,4746,1158,4748],{},[712,4745,1502],{},[712,4747,1339],{},[712,4749,1519],{},[3095,4751,4752],{},[712,4753,1339],{},[692,4755,4756,4757,2231],{},"To attach interactive blocks outside the field, see the ",[700,4758,4759],{"href":449},"Field Group recipe",[692,4761,4762],{},[700,4763,4764],{"href":132},"Learn more about recipes →",[688,4766,4768],{"id":4767},"best-practices","Best Practices",[704,4770,4771,4783,4797,4814,4831,4845,4854],{},[707,4772,4773,4779,4780,4782],{},[696,4774,4775,4776,4778],{},"Pass ",[712,4777,4577],{}," consistently",": Spread the same ",[712,4781,4577],{}," to the wrapper and to every prefix and suffix part so the whole field scales together.",[707,4784,4785,4790,4791,4793,4794,4796],{},[696,4786,4787,4788],{},"Set the initial height with ",[712,4789,1881],{},": Use the native ",[712,4792,1881],{}," attribute for the starting height and the ",[712,4795,722],{}," axis to control whether (and how) users can grow the field.",[707,4798,4799,4805,4806,4808,4809,3484,4811,4813],{},[696,4800,4801,4802,4804],{},"Keep ",[712,4803,722],{}," vertical",": The default ",[712,4807,799],{}," lets users expand for longer content without breaking the layout. Reserve ",[712,4810,1553],{},[712,4812,1562],{}," for layouts that can absorb width changes.",[707,4815,4816,786,4819,1158,4821,1162,4823,4825,4826,3104,4828,4830],{},[696,4817,4818],{},"Pass states as booleans",[712,4820,1179],{},[712,4822,1182],{},[712,4824,1185],{}," axes accept a boolean directly — no ",[712,4827,3419],{},[712,4829,3422],{}," conversion needed (the string keys still work if you prefer them).",[707,4832,4833,4836,4837,3104,4839,4841,4842,4844],{},[696,4834,4835],{},"Mirror states on the native textarea",": Always set the real ",[712,4838,1182],{},[712,4840,1185],{}," attributes and ",[712,4843,3436],{}," in addition to the recipe state.",[707,4846,4847,4853],{},[696,4848,4849,4850,4852],{},"Use ",[712,4851,1307],{}," for general forms",": The neutral color adapts to light and dark mode automatically, making it the safest default.",[707,4855,4856,4859,4860,4862],{},[696,4857,4858],{},"Filter what you don't need",": If your forms use only one color or two variants, pass a ",[712,4861,4189],{}," option to reduce generated CSS.",[688,4864,4866],{"id":4865},"faq","FAQ",[4868,4869,4870,4889,4914,4933,4959,4973,5014],"accordion",{},[4871,4872,694,4875,4877,4878,4880,4881,1170,4883,4885,4886,4888],"accordion-item",{"icon":4873,"label":4874},"i-lucide-circle-help","Why is there a separate wrapper and textarea-field?",[712,4876,3593],{}," wrapper owns the visual field — border, background, padding, and the ",[712,4879,718],{}," ring — while the nested ",[712,4882,1169],{},[712,4884,795],{}," that inherits typography. This split lets inline prefix and suffix addons share the same surface as the typed text, and lets the focus ring respond to the inner textarea through ",[712,4887,718],{}," without extra JavaScript.",[4871,4890,694,4892,4894,4895,4897,4898,4900,4901,4903,4904,4907,4908,4911,4912,2231],{"icon":4873,"label":4891},"How does the resize axis work?",[712,4893,722],{}," property has to live on the real ",[712,4896,795],{},", not the wrapper. So each ",[712,4899,722],{}," value adds a marker class on the wrapper (for example ",[712,4902,3337],{},"), and the recipe registers a selector — ",[712,4905,4906],{},".textarea.-resize-vertical .textarea-field { resize: vertical }"," — that applies the property to the nested field. Pass it like any other variant: ",[712,4909,4910],{},"textarea({ resize: 'vertical' })",". The default is ",[712,4913,799],{},[4871,4915,4917,3484,4919,4921,4922,4925,4926,4929,4930,4932],{"icon":4873,"label":4916},"How do I attach a button to the textarea?",[712,4918,1829],{},[712,4920,1978],{}," render ",[696,4923,4924],{},"inside"," the field and share its background and focus ring — use them for icons and character counters. To attach an interactive control such as a button ",[696,4927,4928],{},"outside"," the field, wrap the textarea and the control in a ",[700,4931,448],{"href":449}," (a vertical group stacks the action beneath the field), which flattens the border radii at the seams so they read as one joined unit.",[4871,4934,4936,4937,4940,4941,3104,4943,4945,4946,3104,4948,4950,4951,1158,4953,4955,4956,4958],{"icon":4873,"label":4935},"How do I pass the invalid, disabled, and readonly states?","Pass each as a boolean: ",[712,4938,4939],{},"textarea({ invalid, disabled, readonly })",". The recipe coerces the value to the matching ",[712,4942,3419],{},[712,4944,3422],{}," variant key, so the ",[712,4947,3419],{},[712,4949,3422],{}," strings work too — the boolean form is just simpler. Always set the matching native attribute (",[712,4952,1182],{},[712,4954,1185],{},") and ",[712,4957,3436],{}," so the field behaves correctly for keyboard and assistive-technology users.",[4871,4960,4962,4963,1158,4965,1162,4967,4969,4970,4972],{"icon":4873,"label":4961},"Why doesn't the Textarea recipe include semantic colors like primary or success?","A field's color reflects its surface, not a status. Semantic colors (primary, success, error) communicate meaning through color, which is better suited to focused elements like badges, buttons, and callouts. Textarea uses ",[712,4964,1433],{},[712,4966,1443],{},[712,4968,1307],{}," to provide surface variations that work across all forms. Error communication is handled by the dedicated ",[712,4971,1179],{}," state, which switches the border and focus ring to the error color.",[4871,4974,4976,5009],{"icon":4873,"label":4975},"How do compound variants work in the Textarea recipe?",[692,4977,4978,4979,4981,4982,4984,4985,3484,4987,4984,4989,4991,4992,1158,4995,1162,4998,5001,5002,1158,5004,1162,5006,5008],{},"The wrapper recipe (",[712,4980,4670],{},") maps each color-variant combination to specific styles. For example, when ",[712,4983,4539],{}," is ",[712,4986,1307],{},[712,4988,4558],{},[712,4990,1323],{},", the compound variant applies ",[712,4993,4994],{},"background: @color.white",[712,4996,4997],{},"borderColor: @color.gray-200",[712,4999,5000],{},"color: @color.text",", along with dark mode overrides. The recipe has 16 compound entries: 9 from the color × variant matrix (3 colors × 3 variants), 3 state overrides for ",[712,5003,1179],{},[712,5005,1185],{},[712,5007,1182],{},", and 4 resize markers.",[692,5010,5011],{},[700,5012,5013],{"href":3156},"Learn more about compound variants →",[4871,5015,5017,5018,1158,5020,1162,5022,5025,5026,5029],{"icon":4873,"label":5016},"Can I use the Textarea recipe without the design tokens preset?","The Textarea recipe references design tokens like ",[712,5019,3103],{},[712,5021,3279],{},[712,5023,5024],{},"@color.error"," through string refs. These tokens need to be defined in your Styleframe instance for the recipe to generate valid CSS. The easiest way is to use ",[712,5027,5028],{},"useDesignTokensPreset(s)",", but you can also define the required tokens manually.",[5031,5032,5033],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":849,"searchDepth":890,"depth":890,"links":5035},[5036,5037,5038,5039,5042,5047,5050,5051,5056,5060,5061,5062,5066,5071,5072],{"id":690,"depth":890,"text":78},{"id":762,"depth":890,"text":763},{"id":821,"depth":890,"text":822},{"id":3042,"depth":890,"text":195,"children":5040},[5041],{"id":3064,"depth":898,"text":3065},{"id":3149,"depth":890,"text":3150,"children":5043},[5044,5045,5046],{"id":1323,"depth":898,"text":3161},{"id":1476,"depth":898,"text":3172},{"id":1485,"depth":898,"text":3181},{"id":3193,"depth":890,"text":3194,"children":5048},[5049],{"id":3210,"depth":898,"text":3211},{"id":722,"depth":890,"text":3323},{"id":3410,"depth":890,"text":342,"children":5052},[5053,5054,5055],{"id":1179,"depth":898,"text":3430},{"id":1182,"depth":898,"text":3443},{"id":3463,"depth":898,"text":3464},{"id":3490,"depth":890,"text":3491,"children":5057},[5058,5059],{"id":3509,"depth":898,"text":3510},{"id":3525,"depth":898,"text":3526},{"id":3556,"depth":890,"text":3557},{"id":3885,"depth":890,"text":568},{"id":3962,"depth":890,"text":3963,"children":5063},[5064,5065],{"id":3966,"depth":898,"text":3967},{"id":4182,"depth":898,"text":4183},{"id":4367,"depth":890,"text":73,"children":5067},[5068,5069,5070],{"id":4370,"depth":898,"text":4373},{"id":4661,"depth":898,"text":4664},{"id":4709,"depth":898,"text":4712},{"id":4767,"depth":890,"text":4768},{"id":4865,"depth":890,"text":4866},"A multi-line text-field component with a wrapper-owned visual surface, inline prefix\u002Fsuffix addons, a resize axis, and invalid\u002Fdisabled\u002Freadonly states. Supports light, dark, and neutral colors, default\u002Fsoft\u002Fghost styles, and three sizes through the recipe system.",null,{},{"icon":7},{"title":480,"description":5073},"uXvsTe0Hdzt3D7ErPVm3WIogER3JnI5pGEnKt2gbg48",[5080,5082],{"title":476,"path":477,"stem":478,"description":5081,"icon":7,"children":-1},"A switch built on the native checkbox input, with a sliding knob, on, disabled, and focus states, light, dark, and neutral track colors, and three sizes through the recipe system.",{"title":484,"path":485,"stem":486,"description":5083,"icon":7,"children":-1},"A button-styled two-state control with an on state driven by aria-pressed, solid, outline, and ghost visual styles, light, dark, and neutral surface colors, and three sizes through the recipe system.",1781596341520]