[{"data":1,"prerenderedAt":4021},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-modifiers-composables-form-state":407,"-docs-theme-modifiers-composables-form-state-surround":4016},{"gettingStarted":4,"api":57,"theme":148},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,31,52],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/04.comparisons","i-lucide-file-diff",{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/05.tooling",[37,42,47],{"title":38,"path":39,"stem":40,"icon":41},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/05.tooling/01.cli","i-lucide-square-terminal",{"title":43,"path":44,"stem":45,"icon":46},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/05.tooling/02.scanner","i-lucide-view",{"title":48,"path":49,"stem":50,"icon":51},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/05.tooling/03.figma-plugin","i-simple-icons-figma",{"title":53,"path":54,"stem":55,"icon":56},"Licensing","/docs/getting-started/licensing","docs/getting-started/06.licensing","i-lucide-scale",[58],{"title":59,"path":60,"stem":61,"children":62,"icon":7},"API Reference","/docs/api","docs/api/00.index",[63,66,71,76,81,86,91,96,101,106,111,116,131,136,141,146],{"title":64,"path":60,"stem":61,"icon":65},"Overview","i-lucide-book-text",{"title":67,"path":68,"stem":69,"icon":70},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":72,"path":73,"stem":74,"icon":75},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":77,"path":78,"stem":79,"icon":80},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":82,"path":83,"stem":84,"icon":85},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":87,"path":88,"stem":89,"icon":90},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":92,"path":93,"stem":94,"icon":95},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":97,"path":98,"stem":99,"icon":100},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":102,"path":103,"stem":104,"icon":105},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":107,"path":108,"stem":109,"icon":110},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":112,"path":113,"stem":114,"icon":115},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":117,"path":118,"stem":119,"children":120,"icon":130},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[121,122,126],{"title":64,"path":118,"stem":119},{"title":123,"path":124,"stem":125},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":127,"path":128,"stem":129},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":132,"path":133,"stem":134,"icon":135},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":137,"path":138,"stem":139,"icon":140},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":142,"path":143,"stem":144,"icon":145},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":137,"path":138,"stem":147,"icon":140},"docs/api/14.imports",[149,223,289,362],{"title":150,"path":151,"stem":152,"children":153,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[154,155,160],{"title":64,"path":151,"stem":152,"icon":65},{"title":156,"path":157,"stem":158,"icon":159},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":132,"icon":135,"defaultOpen":7,"path":161,"stem":162,"children":163,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[164,168,172,176,180,184,188,192,207,211,215,219],{"title":165,"path":166,"stem":167,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":169,"path":170,"stem":171,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":173,"path":174,"stem":175,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":177,"path":178,"stem":179,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":181,"path":182,"stem":183,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":185,"path":186,"stem":187,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":189,"path":190,"stem":191,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":193,"path":194,"stem":195,"children":196,"icon":7,"pro":206,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[197,198,202],{"title":64,"path":194,"stem":195},{"title":199,"path":200,"stem":201},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":203,"path":204,"stem":205},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",true,{"title":208,"path":209,"stem":210,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":212,"path":213,"stem":214,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":216,"path":217,"stem":218,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":220,"path":221,"stem":222,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":224,"path":225,"stem":226,"children":227,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[228,229],{"title":64,"path":225,"stem":226,"icon":65},{"title":132,"icon":135,"defaultOpen":206,"path":230,"stem":231,"children":232,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[233,237,241,245,249,253,257,261,265,269,273,277,281,285],{"title":234,"path":235,"stem":236},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":238,"path":239,"stem":240},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":242,"path":243,"stem":244},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":246,"path":247,"stem":248},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":250,"path":251,"stem":252},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":254,"path":255,"stem":256},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":258,"path":259,"stem":260},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":262,"path":263,"stem":264},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":266,"path":267,"stem":268},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":270,"path":271,"stem":272},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":274,"path":275,"stem":276},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":278,"path":279,"stem":280},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":282,"path":283,"stem":284},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":286,"path":287,"stem":288},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":102,"path":290,"stem":291,"children":292,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[293,294,297],{"title":64,"path":290,"stem":291,"icon":65},{"title":156,"path":295,"stem":296,"icon":159},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":298,"stem":299,"children":300,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[301,305,309,313,316,320,324,328,332,336,340,343,347,351,355,359],{"title":302,"path":303,"stem":304,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":306,"path":307,"stem":308,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":310,"path":311,"stem":312,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":169,"path":314,"stem":315,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":317,"path":318,"stem":319,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":321,"path":322,"stem":323,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":325,"path":326,"stem":327,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":329,"path":330,"stem":331,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":333,"path":334,"stem":335,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":337,"path":338,"stem":339,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":212,"path":341,"stem":342,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":344,"path":345,"stem":346,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":348,"path":349,"stem":350,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":352,"path":353,"stem":354,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":356,"path":357,"stem":358,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":216,"path":360,"stem":361,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":363,"path":364,"stem":365,"children":366,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[367,368,371],{"title":64,"path":364,"stem":365,"icon":65},{"title":156,"path":369,"stem":370,"icon":159},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":372,"stem":373,"children":374,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[375,379,383,387,391,395,399,403],{"title":376,"path":377,"stem":378,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":380,"path":381,"stem":382,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":384,"path":385,"stem":386,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":388,"path":389,"stem":390,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":392,"path":393,"stem":394,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":396,"path":397,"stem":398,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":400,"path":401,"stem":402,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":404,"path":405,"stem":406,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":408,"title":409,"body":410,"description":4008,"extension":4009,"links":4010,"meta":4011,"navigation":4012,"path":385,"seo":4013,"sitemap":4014,"stem":386,"__hash__":4015},"docs_theme/docs/theme/modifiers/02.composables/02.form-state.md","Form State Modifiers",{"type":411,"value":412,"toc":3984},"minimark",[413,417,434,438,441,470,476,483,919,924,955,961,967,970,994,1000,1006,1516,1519,1543,1549,1555,1558,1582,1588,1594,1597,1621,1627,1633,1636,1660,1666,1672,2080,2083,2107,2113,2119,2122,2146,2152,2158,2447,2450,2474,2480,2486,2489,2513,2519,2525,2528,2552,2558,2564,2880,2885,3071,3075,3079,3483,3487,3860,3864,3905,3909,3980],[414,415,64],"h2",{"id":416},"overview",[418,419,420,421,425,426,429,430,433],"p",{},"Form state modifiers let you apply utility styles conditionally based on form element states. They wrap utility declarations in CSS pseudo-class selectors like ",[422,423,424],"code",{},":disabled",", ",[422,427,428],{},":checked",", and ",[422,431,432],{},":invalid",", generating variant utility classes that adapt to form element behavior.",[414,435,437],{"id":436},"why-use-form-state-modifiers","Why Use Form State Modifiers?",[418,439,440],{},"Form state modifiers help you:",[442,443,444,452,458,464],"ul",{},[445,446,447,451],"li",{},[448,449,450],"strong",{},"Style form validation states",": Apply different colors and styles for valid and invalid inputs",[445,453,454,457],{},[448,455,456],{},"Handle disabled states",": Reduce opacity or change appearance for disabled form elements",[445,459,460,463],{},[448,461,462],{},"React to user input",": Style checked checkboxes, selected radios, and filled autofill fields",[445,465,466,469],{},[448,467,468],{},"Build accessible forms",": Provide visual feedback that matches the semantic state of form controls",[414,471,473],{"id":472},"usedisabledmodifier",[422,474,475],{},"useDisabledModifier",[418,477,478,479,482],{},"The ",[422,480,481],{},"useDisabledModifier()"," function creates a modifier that applies styles when a form element is disabled.",[484,485,486,732,868],"tabs",{},[487,488,491],"tabs-item",{"icon":489,"label":490},"i-lucide-code","Code",[492,493,499],"pre",{"className":494,"code":495,"filename":496,"language":497,"meta":498,"style":498},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useOpacityUtility, useCursorUtility } from \"@styleframe/theme\";\nimport { useDisabledModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst disabled = useDisabledModifier(s);\n\nuseOpacityUtility(s, { 50: '0.5' }, [disabled]);\nuseCursorUtility(s, { 'not-allowed': 'not-allowed' }, [disabled]);\n\nexport default s;\n","styleframe.config.ts","ts","",[422,500,501,537,566,588,594,615,620,637,642,679,713,718],{"__ignoreMap":498},[502,503,506,510,514,518,521,524,527,531,534],"span",{"class":504,"line":505},"line",1,[502,507,509],{"class":508},"s7zQu","import",[502,511,513],{"class":512},"sMK4o"," {",[502,515,517],{"class":516},"sTEyZ"," styleframe",[502,519,520],{"class":512}," }",[502,522,523],{"class":508}," from",[502,525,526],{"class":512}," \"",[502,528,530],{"class":529},"sfazB","styleframe",[502,532,533],{"class":512},"\"",[502,535,536],{"class":512},";\n",[502,538,540,542,544,547,550,553,555,557,559,562,564],{"class":504,"line":539},2,[502,541,509],{"class":508},[502,543,513],{"class":512},[502,545,546],{"class":516}," useOpacityUtility",[502,548,549],{"class":512},",",[502,551,552],{"class":516}," useCursorUtility",[502,554,520],{"class":512},[502,556,523],{"class":508},[502,558,526],{"class":512},[502,560,561],{"class":529},"@styleframe/theme",[502,563,533],{"class":512},[502,565,536],{"class":512},[502,567,569,571,573,576,578,580,582,584,586],{"class":504,"line":568},3,[502,570,509],{"class":508},[502,572,513],{"class":512},[502,574,575],{"class":516}," useDisabledModifier",[502,577,520],{"class":512},[502,579,523],{"class":508},[502,581,526],{"class":512},[502,583,561],{"class":529},[502,585,533],{"class":512},[502,587,536],{"class":512},[502,589,591],{"class":504,"line":590},4,[502,592,593],{"emptyLinePlaceholder":206},"\n",[502,595,597,601,604,607,610,613],{"class":504,"line":596},5,[502,598,600],{"class":599},"spNyl","const",[502,602,603],{"class":516}," s ",[502,605,606],{"class":512},"=",[502,608,517],{"class":609},"s2Zo4",[502,611,612],{"class":516},"()",[502,614,536],{"class":512},[502,616,618],{"class":504,"line":617},6,[502,619,593],{"emptyLinePlaceholder":206},[502,621,623,625,628,630,632,635],{"class":504,"line":622},7,[502,624,600],{"class":599},[502,626,627],{"class":516}," disabled ",[502,629,606],{"class":512},[502,631,575],{"class":609},[502,633,634],{"class":516},"(s)",[502,636,536],{"class":512},[502,638,640],{"class":504,"line":639},8,[502,641,593],{"emptyLinePlaceholder":206},[502,643,645,648,651,653,655,659,662,665,668,671,674,677],{"class":504,"line":644},9,[502,646,647],{"class":609},"useOpacityUtility",[502,649,650],{"class":516},"(s",[502,652,549],{"class":512},[502,654,513],{"class":512},[502,656,658],{"class":657},"sbssI"," 50",[502,660,661],{"class":512},":",[502,663,664],{"class":512}," '",[502,666,667],{"class":529},"0.5",[502,669,670],{"class":512},"'",[502,672,673],{"class":512}," },",[502,675,676],{"class":516}," [disabled])",[502,678,536],{"class":512},[502,680,682,685,687,689,691,693,697,699,701,703,705,707,709,711],{"class":504,"line":681},10,[502,683,684],{"class":609},"useCursorUtility",[502,686,650],{"class":516},[502,688,549],{"class":512},[502,690,513],{"class":512},[502,692,664],{"class":512},[502,694,696],{"class":695},"swJcz","not-allowed",[502,698,670],{"class":512},[502,700,661],{"class":512},[502,702,664],{"class":512},[502,704,696],{"class":529},[502,706,670],{"class":512},[502,708,673],{"class":512},[502,710,676],{"class":516},[502,712,536],{"class":512},[502,714,716],{"class":504,"line":715},11,[502,717,593],{"emptyLinePlaceholder":206},[502,719,721,724,727,730],{"class":504,"line":720},12,[502,722,723],{"class":508},"export",[502,725,726],{"class":508}," default",[502,728,729],{"class":516}," s",[502,731,536],{"class":512},[487,733,735],{"icon":140,"label":734},"Output",[492,736,741],{"className":737,"code":738,"filename":739,"language":740,"meta":498,"style":498},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","._opacity\\:50 { opacity: 0.5; }\n._cursor\\:not-allowed { cursor: not-allowed; }\n\n._disabled\\:opacity\\:50 { &:disabled { opacity: 0.5; } }\n._disabled\\:cursor\\:not-allowed { &:disabled { cursor: not-allowed; } }\n","styleframe/index.css","css",[422,742,743,775,800,804,838],{"__ignoreMap":498},[502,744,745,748,752,755,758,760,764,766,769,772],{"class":504,"line":505},[502,746,747],{"class":512},".",[502,749,751],{"class":750},"sBMFI","_opacity",[502,753,754],{"class":516},"\\:",[502,756,757],{"class":750},"50",[502,759,513],{"class":512},[502,761,763],{"class":762},"sqsOY"," opacity",[502,765,661],{"class":512},[502,767,768],{"class":657}," 0.5",[502,770,771],{"class":512},";",[502,773,774],{"class":512}," }\n",[502,776,777,779,782,784,786,788,791,793,796,798],{"class":504,"line":539},[502,778,747],{"class":512},[502,780,781],{"class":750},"_cursor",[502,783,754],{"class":516},[502,785,696],{"class":750},[502,787,513],{"class":512},[502,789,790],{"class":762}," cursor",[502,792,661],{"class":512},[502,794,795],{"class":516}," not-allowed",[502,797,771],{"class":512},[502,799,774],{"class":512},[502,801,802],{"class":504,"line":568},[502,803,593],{"emptyLinePlaceholder":206},[502,805,806,808,811,813,816,818,820,822,825,827,830,832,834,836],{"class":504,"line":590},[502,807,747],{"class":512},[502,809,810],{"class":750},"_disabled",[502,812,754],{"class":516},[502,814,815],{"class":750},"opacity",[502,817,754],{"class":516},[502,819,757],{"class":750},[502,821,513],{"class":512},[502,823,824],{"class":516}," &",[502,826,661],{"class":512},[502,828,829],{"class":516},"disabled { opacity: ",[502,831,667],{"class":657},[502,833,771],{"class":512},[502,835,520],{"class":512},[502,837,774],{"class":516},[502,839,840,842,844,846,849,851,853,855,857,859,862,864,866],{"class":504,"line":596},[502,841,747],{"class":512},[502,843,810],{"class":750},[502,845,754],{"class":516},[502,847,848],{"class":750},"cursor",[502,850,754],{"class":516},[502,852,696],{"class":750},[502,854,513],{"class":512},[502,856,824],{"class":516},[502,858,661],{"class":512},[502,860,861],{"class":516},"disabled { cursor: not-allowed",[502,863,771],{"class":512},[502,865,520],{"class":512},[502,867,774],{"class":516},[487,869,872],{"icon":870,"label":871},"i-lucide-layout","Usage",[492,873,877],{"className":874,"code":875,"language":876,"meta":498,"style":498},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cbutton disabled class=\"_disabled:opacity:50 _disabled:cursor:not-allowed\">\n    Disabled button\n\u003C/button>\n","html",[422,878,879,905,910],{"__ignoreMap":498},[502,880,881,884,887,890,893,895,897,900,902],{"class":504,"line":505},[502,882,883],{"class":512},"\u003C",[502,885,886],{"class":695},"button",[502,888,889],{"class":599}," disabled",[502,891,892],{"class":599}," class",[502,894,606],{"class":512},[502,896,533],{"class":512},[502,898,899],{"class":529},"_disabled:opacity:50 _disabled:cursor:not-allowed",[502,901,533],{"class":512},[502,903,904],{"class":512},">\n",[502,906,907],{"class":504,"line":539},[502,908,909],{"class":516},"    Disabled button\n",[502,911,912,915,917],{"class":504,"line":568},[502,913,914],{"class":512},"\u003C/",[502,916,886],{"class":695},[502,918,904],{"class":512},[920,921,923],"h4",{"id":922},"css-selector","CSS Selector",[925,926,927,939],"table",{},[928,929,930],"thead",{},[931,932,933,937],"tr",{},[934,935,936],"th",{},"Modifier Name",[934,938,923],{},[940,941,942],"tbody",{},[931,943,944,950],{},[945,946,947],"td",{},[422,948,949],{},"disabled",[945,951,952],{},[422,953,954],{},"&:disabled",[414,956,958],{"id":957},"useenabledmodifier",[422,959,960],{},"useEnabledModifier",[418,962,478,963,966],{},[422,964,965],{},"useEnabledModifier()"," function creates a modifier that applies styles when a form element is enabled.",[920,968,923],{"id":969},"css-selector-1",[925,971,972,980],{},[928,973,974],{},[931,975,976,978],{},[934,977,936],{},[934,979,923],{},[940,981,982],{},[931,983,984,989],{},[945,985,986],{},[422,987,988],{},"enabled",[945,990,991],{},[422,992,993],{},"&:enabled",[414,995,997],{"id":996},"usecheckedmodifier",[422,998,999],{},"useCheckedModifier",[418,1001,478,1002,1005],{},[422,1003,1004],{},"useCheckedModifier()"," function creates a modifier that applies styles when a checkbox or radio button is checked.",[484,1007,1008,1309,1469],{},[487,1009,1010],{"icon":489,"label":490},[492,1011,1013],{"className":494,"code":1012,"filename":496,"language":497,"meta":498,"style":498},"import { styleframe } from \"styleframe\";\nimport { useColorDesignTokens } from \"@styleframe/theme\";\nimport { useBackgroundColorUtility, useBorderColorUtility } from \"@styleframe/theme\";\nimport { useCheckedModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\nconst { ref } = s;\n\nconst { colorPrimary } = useColorDesignTokens(s, { primary: '#006cff' } as const);\n\nconst checked = useCheckedModifier(s);\n\nuseBackgroundColorUtility(s, {\n    primary: ref(colorPrimary),\n}, [checked]);\n\nuseBorderColorUtility(s, {\n    primary: ref(colorPrimary),\n}, [checked]);\n\nexport default s;\n",[422,1014,1015,1035,1056,1082,1103,1107,1121,1140,1144,1190,1194,1209,1213,1226,1243,1254,1259,1271,1284,1293,1298],{"__ignoreMap":498},[502,1016,1017,1019,1021,1023,1025,1027,1029,1031,1033],{"class":504,"line":505},[502,1018,509],{"class":508},[502,1020,513],{"class":512},[502,1022,517],{"class":516},[502,1024,520],{"class":512},[502,1026,523],{"class":508},[502,1028,526],{"class":512},[502,1030,530],{"class":529},[502,1032,533],{"class":512},[502,1034,536],{"class":512},[502,1036,1037,1039,1041,1044,1046,1048,1050,1052,1054],{"class":504,"line":539},[502,1038,509],{"class":508},[502,1040,513],{"class":512},[502,1042,1043],{"class":516}," useColorDesignTokens",[502,1045,520],{"class":512},[502,1047,523],{"class":508},[502,1049,526],{"class":512},[502,1051,561],{"class":529},[502,1053,533],{"class":512},[502,1055,536],{"class":512},[502,1057,1058,1060,1062,1065,1067,1070,1072,1074,1076,1078,1080],{"class":504,"line":568},[502,1059,509],{"class":508},[502,1061,513],{"class":512},[502,1063,1064],{"class":516}," useBackgroundColorUtility",[502,1066,549],{"class":512},[502,1068,1069],{"class":516}," useBorderColorUtility",[502,1071,520],{"class":512},[502,1073,523],{"class":508},[502,1075,526],{"class":512},[502,1077,561],{"class":529},[502,1079,533],{"class":512},[502,1081,536],{"class":512},[502,1083,1084,1086,1088,1091,1093,1095,1097,1099,1101],{"class":504,"line":590},[502,1085,509],{"class":508},[502,1087,513],{"class":512},[502,1089,1090],{"class":516}," useCheckedModifier",[502,1092,520],{"class":512},[502,1094,523],{"class":508},[502,1096,526],{"class":512},[502,1098,561],{"class":529},[502,1100,533],{"class":512},[502,1102,536],{"class":512},[502,1104,1105],{"class":504,"line":596},[502,1106,593],{"emptyLinePlaceholder":206},[502,1108,1109,1111,1113,1115,1117,1119],{"class":504,"line":617},[502,1110,600],{"class":599},[502,1112,603],{"class":516},[502,1114,606],{"class":512},[502,1116,517],{"class":609},[502,1118,612],{"class":516},[502,1120,536],{"class":512},[502,1122,1123,1125,1127,1130,1133,1136,1138],{"class":504,"line":622},[502,1124,600],{"class":599},[502,1126,513],{"class":512},[502,1128,1129],{"class":516}," ref ",[502,1131,1132],{"class":512},"}",[502,1134,1135],{"class":512}," =",[502,1137,729],{"class":516},[502,1139,536],{"class":512},[502,1141,1142],{"class":504,"line":639},[502,1143,593],{"emptyLinePlaceholder":206},[502,1145,1146,1148,1150,1153,1155,1157,1159,1161,1163,1165,1168,1170,1172,1175,1177,1179,1182,1185,1188],{"class":504,"line":644},[502,1147,600],{"class":599},[502,1149,513],{"class":512},[502,1151,1152],{"class":516}," colorPrimary ",[502,1154,1132],{"class":512},[502,1156,1135],{"class":512},[502,1158,1043],{"class":609},[502,1160,650],{"class":516},[502,1162,549],{"class":512},[502,1164,513],{"class":512},[502,1166,1167],{"class":695}," primary",[502,1169,661],{"class":512},[502,1171,664],{"class":512},[502,1173,1174],{"class":529},"#006cff",[502,1176,670],{"class":512},[502,1178,520],{"class":512},[502,1180,1181],{"class":508}," as",[502,1183,1184],{"class":599}," const",[502,1186,1187],{"class":516},")",[502,1189,536],{"class":512},[502,1191,1192],{"class":504,"line":681},[502,1193,593],{"emptyLinePlaceholder":206},[502,1195,1196,1198,1201,1203,1205,1207],{"class":504,"line":715},[502,1197,600],{"class":599},[502,1199,1200],{"class":516}," checked ",[502,1202,606],{"class":512},[502,1204,1090],{"class":609},[502,1206,634],{"class":516},[502,1208,536],{"class":512},[502,1210,1211],{"class":504,"line":720},[502,1212,593],{"emptyLinePlaceholder":206},[502,1214,1216,1219,1221,1223],{"class":504,"line":1215},13,[502,1217,1218],{"class":609},"useBackgroundColorUtility",[502,1220,650],{"class":516},[502,1222,549],{"class":512},[502,1224,1225],{"class":512}," {\n",[502,1227,1229,1232,1234,1237,1240],{"class":504,"line":1228},14,[502,1230,1231],{"class":695},"    primary",[502,1233,661],{"class":512},[502,1235,1236],{"class":609}," ref",[502,1238,1239],{"class":516},"(colorPrimary)",[502,1241,1242],{"class":512},",\n",[502,1244,1246,1249,1252],{"class":504,"line":1245},15,[502,1247,1248],{"class":512},"},",[502,1250,1251],{"class":516}," [checked])",[502,1253,536],{"class":512},[502,1255,1257],{"class":504,"line":1256},16,[502,1258,593],{"emptyLinePlaceholder":206},[502,1260,1262,1265,1267,1269],{"class":504,"line":1261},17,[502,1263,1264],{"class":609},"useBorderColorUtility",[502,1266,650],{"class":516},[502,1268,549],{"class":512},[502,1270,1225],{"class":512},[502,1272,1274,1276,1278,1280,1282],{"class":504,"line":1273},18,[502,1275,1231],{"class":695},[502,1277,661],{"class":512},[502,1279,1236],{"class":609},[502,1281,1239],{"class":516},[502,1283,1242],{"class":512},[502,1285,1287,1289,1291],{"class":504,"line":1286},19,[502,1288,1248],{"class":512},[502,1290,1251],{"class":516},[502,1292,536],{"class":512},[502,1294,1296],{"class":504,"line":1295},20,[502,1297,593],{"emptyLinePlaceholder":206},[502,1299,1301,1303,1305,1307],{"class":504,"line":1300},21,[502,1302,723],{"class":508},[502,1304,726],{"class":508},[502,1306,729],{"class":516},[502,1308,536],{"class":512},[487,1310,1311],{"icon":140,"label":734},[492,1312,1314],{"className":737,"code":1313,"filename":739,"language":740,"meta":498,"style":498},"._background-color\\:primary { background-color: var(--color--primary); }\n._border-color\\:primary { border-color: var(--color--primary); }\n\n._checked\\:background-color\\:primary {\n    &:checked { background-color: var(--color--primary); }\n}\n\n._checked\\:border-color\\:primary {\n    &:checked { border-color: var(--color--primary); }\n}\n",[422,1315,1316,1349,1377,1381,1399,1420,1425,1429,1446,1465],{"__ignoreMap":498},[502,1317,1318,1320,1323,1325,1328,1330,1333,1335,1338,1341,1344,1347],{"class":504,"line":505},[502,1319,747],{"class":512},[502,1321,1322],{"class":750},"_background-color",[502,1324,754],{"class":516},[502,1326,1327],{"class":750},"primary",[502,1329,513],{"class":512},[502,1331,1332],{"class":762}," background-color",[502,1334,661],{"class":512},[502,1336,1337],{"class":609}," var",[502,1339,1340],{"class":512},"(",[502,1342,1343],{"class":516},"--color--primary",[502,1345,1346],{"class":512},");",[502,1348,774],{"class":512},[502,1350,1351,1353,1356,1358,1360,1362,1365,1367,1369,1371,1373,1375],{"class":504,"line":539},[502,1352,747],{"class":512},[502,1354,1355],{"class":750},"_border-color",[502,1357,754],{"class":516},[502,1359,1327],{"class":750},[502,1361,513],{"class":512},[502,1363,1364],{"class":762}," border-color",[502,1366,661],{"class":512},[502,1368,1337],{"class":609},[502,1370,1340],{"class":512},[502,1372,1343],{"class":516},[502,1374,1346],{"class":512},[502,1376,774],{"class":512},[502,1378,1379],{"class":504,"line":568},[502,1380,593],{"emptyLinePlaceholder":206},[502,1382,1383,1385,1388,1390,1393,1395,1397],{"class":504,"line":590},[502,1384,747],{"class":512},[502,1386,1387],{"class":750},"_checked",[502,1389,754],{"class":516},[502,1391,1392],{"class":750},"background-color",[502,1394,754],{"class":516},[502,1396,1327],{"class":750},[502,1398,1225],{"class":512},[502,1400,1401,1404,1406,1409,1412,1414,1416,1418],{"class":504,"line":596},[502,1402,1403],{"class":516},"    &",[502,1405,661],{"class":512},[502,1407,1408],{"class":516},"checked { background-color: ",[502,1410,1411],{"class":609},"var",[502,1413,1340],{"class":512},[502,1415,1343],{"class":516},[502,1417,1346],{"class":512},[502,1419,774],{"class":512},[502,1421,1422],{"class":504,"line":617},[502,1423,1424],{"class":516},"}\n",[502,1426,1427],{"class":504,"line":622},[502,1428,593],{"emptyLinePlaceholder":206},[502,1430,1431,1433,1435,1437,1440,1442,1444],{"class":504,"line":639},[502,1432,747],{"class":512},[502,1434,1387],{"class":750},[502,1436,754],{"class":516},[502,1438,1439],{"class":750},"border-color",[502,1441,754],{"class":516},[502,1443,1327],{"class":750},[502,1445,1225],{"class":512},[502,1447,1448,1450,1452,1455,1457,1459,1461,1463],{"class":504,"line":644},[502,1449,1403],{"class":516},[502,1451,661],{"class":512},[502,1453,1454],{"class":516},"checked { border-color: ",[502,1456,1411],{"class":609},[502,1458,1340],{"class":512},[502,1460,1343],{"class":516},[502,1462,1346],{"class":512},[502,1464,774],{"class":512},[502,1466,1467],{"class":504,"line":681},[502,1468,1424],{"class":516},[487,1470,1471],{"icon":870,"label":871},[492,1472,1474],{"className":874,"code":1473,"language":876,"meta":498,"style":498},"\u003Cinput\n    type=\"checkbox\"\n    class=\"_checked:background-color:primary _checked:border-color:primary\"\n>\n",[422,1475,1476,1483,1498,1512],{"__ignoreMap":498},[502,1477,1478,1480],{"class":504,"line":505},[502,1479,883],{"class":512},[502,1481,1482],{"class":695},"input\n",[502,1484,1485,1488,1490,1492,1495],{"class":504,"line":539},[502,1486,1487],{"class":599},"    type",[502,1489,606],{"class":512},[502,1491,533],{"class":512},[502,1493,1494],{"class":529},"checkbox",[502,1496,1497],{"class":512},"\"\n",[502,1499,1500,1503,1505,1507,1510],{"class":504,"line":568},[502,1501,1502],{"class":599},"    class",[502,1504,606],{"class":512},[502,1506,533],{"class":512},[502,1508,1509],{"class":529},"_checked:background-color:primary _checked:border-color:primary",[502,1511,1497],{"class":512},[502,1513,1514],{"class":504,"line":590},[502,1515,904],{"class":512},[920,1517,923],{"id":1518},"css-selector-2",[925,1520,1521,1529],{},[928,1522,1523],{},[931,1524,1525,1527],{},[934,1526,936],{},[934,1528,923],{},[940,1530,1531],{},[931,1532,1533,1538],{},[945,1534,1535],{},[422,1536,1537],{},"checked",[945,1539,1540],{},[422,1541,1542],{},"&:checked",[414,1544,1546],{"id":1545},"useindeterminatemodifier",[422,1547,1548],{},"useIndeterminateModifier",[418,1550,478,1551,1554],{},[422,1552,1553],{},"useIndeterminateModifier()"," function creates a modifier that applies styles when a checkbox is in an indeterminate state.",[920,1556,923],{"id":1557},"css-selector-3",[925,1559,1560,1568],{},[928,1561,1562],{},[931,1563,1564,1566],{},[934,1565,936],{},[934,1567,923],{},[940,1569,1570],{},[931,1571,1572,1577],{},[945,1573,1574],{},[422,1575,1576],{},"indeterminate",[945,1578,1579],{},[422,1580,1581],{},"&:indeterminate",[414,1583,1585],{"id":1584},"userequiredmodifier",[422,1586,1587],{},"useRequiredModifier",[418,1589,478,1590,1593],{},[422,1591,1592],{},"useRequiredModifier()"," function creates a modifier that applies styles to required form fields.",[920,1595,923],{"id":1596},"css-selector-4",[925,1598,1599,1607],{},[928,1600,1601],{},[931,1602,1603,1605],{},[934,1604,936],{},[934,1606,923],{},[940,1608,1609],{},[931,1610,1611,1616],{},[945,1612,1613],{},[422,1614,1615],{},"required",[945,1617,1618],{},[422,1619,1620],{},"&:required",[414,1622,1624],{"id":1623},"useoptionalmodifier",[422,1625,1626],{},"useOptionalModifier",[418,1628,478,1629,1632],{},[422,1630,1631],{},"useOptionalModifier()"," function creates a modifier that applies styles to optional form fields.",[920,1634,923],{"id":1635},"css-selector-5",[925,1637,1638,1646],{},[928,1639,1640],{},[931,1641,1642,1644],{},[934,1643,936],{},[934,1645,923],{},[940,1647,1648],{},[931,1649,1650,1655],{},[945,1651,1652],{},[422,1653,1654],{},"optional",[945,1656,1657],{},[422,1658,1659],{},"&:optional",[414,1661,1663],{"id":1662},"usevalidmodifier",[422,1664,1665],{},"useValidModifier",[418,1667,478,1668,1671],{},[422,1669,1670],{},"useValidModifier()"," function creates a modifier that applies styles when a form element passes validation.",[484,1673,1674,1873,2018],{},[487,1675,1676],{"icon":489,"label":490},[492,1677,1679],{"className":494,"code":1678,"filename":496,"language":497,"meta":498,"style":498},"import { styleframe } from \"styleframe\";\nimport { useBorderColorUtility } from \"@styleframe/theme\";\nimport { useValidModifier, useInvalidModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst valid = useValidModifier(s);\nconst invalid = useInvalidModifier(s);\n\nuseBorderColorUtility(s, {\n    success: '#28a745',\n    error: '#dc3545',\n}, [valid, invalid]);\n\nexport default s;\n",[422,1680,1681,1701,1721,1747,1751,1765,1769,1784,1799,1803,1813,1829,1845,1859,1863],{"__ignoreMap":498},[502,1682,1683,1685,1687,1689,1691,1693,1695,1697,1699],{"class":504,"line":505},[502,1684,509],{"class":508},[502,1686,513],{"class":512},[502,1688,517],{"class":516},[502,1690,520],{"class":512},[502,1692,523],{"class":508},[502,1694,526],{"class":512},[502,1696,530],{"class":529},[502,1698,533],{"class":512},[502,1700,536],{"class":512},[502,1702,1703,1705,1707,1709,1711,1713,1715,1717,1719],{"class":504,"line":539},[502,1704,509],{"class":508},[502,1706,513],{"class":512},[502,1708,1069],{"class":516},[502,1710,520],{"class":512},[502,1712,523],{"class":508},[502,1714,526],{"class":512},[502,1716,561],{"class":529},[502,1718,533],{"class":512},[502,1720,536],{"class":512},[502,1722,1723,1725,1727,1730,1732,1735,1737,1739,1741,1743,1745],{"class":504,"line":568},[502,1724,509],{"class":508},[502,1726,513],{"class":512},[502,1728,1729],{"class":516}," useValidModifier",[502,1731,549],{"class":512},[502,1733,1734],{"class":516}," useInvalidModifier",[502,1736,520],{"class":512},[502,1738,523],{"class":508},[502,1740,526],{"class":512},[502,1742,561],{"class":529},[502,1744,533],{"class":512},[502,1746,536],{"class":512},[502,1748,1749],{"class":504,"line":590},[502,1750,593],{"emptyLinePlaceholder":206},[502,1752,1753,1755,1757,1759,1761,1763],{"class":504,"line":596},[502,1754,600],{"class":599},[502,1756,603],{"class":516},[502,1758,606],{"class":512},[502,1760,517],{"class":609},[502,1762,612],{"class":516},[502,1764,536],{"class":512},[502,1766,1767],{"class":504,"line":617},[502,1768,593],{"emptyLinePlaceholder":206},[502,1770,1771,1773,1776,1778,1780,1782],{"class":504,"line":622},[502,1772,600],{"class":599},[502,1774,1775],{"class":516}," valid ",[502,1777,606],{"class":512},[502,1779,1729],{"class":609},[502,1781,634],{"class":516},[502,1783,536],{"class":512},[502,1785,1786,1788,1791,1793,1795,1797],{"class":504,"line":639},[502,1787,600],{"class":599},[502,1789,1790],{"class":516}," invalid ",[502,1792,606],{"class":512},[502,1794,1734],{"class":609},[502,1796,634],{"class":516},[502,1798,536],{"class":512},[502,1800,1801],{"class":504,"line":644},[502,1802,593],{"emptyLinePlaceholder":206},[502,1804,1805,1807,1809,1811],{"class":504,"line":681},[502,1806,1264],{"class":609},[502,1808,650],{"class":516},[502,1810,549],{"class":512},[502,1812,1225],{"class":512},[502,1814,1815,1818,1820,1822,1825,1827],{"class":504,"line":715},[502,1816,1817],{"class":695},"    success",[502,1819,661],{"class":512},[502,1821,664],{"class":512},[502,1823,1824],{"class":529},"#28a745",[502,1826,670],{"class":512},[502,1828,1242],{"class":512},[502,1830,1831,1834,1836,1838,1841,1843],{"class":504,"line":720},[502,1832,1833],{"class":695},"    error",[502,1835,661],{"class":512},[502,1837,664],{"class":512},[502,1839,1840],{"class":529},"#dc3545",[502,1842,670],{"class":512},[502,1844,1242],{"class":512},[502,1846,1847,1849,1852,1854,1857],{"class":504,"line":1215},[502,1848,1248],{"class":512},[502,1850,1851],{"class":516}," [valid",[502,1853,549],{"class":512},[502,1855,1856],{"class":516}," invalid])",[502,1858,536],{"class":512},[502,1860,1861],{"class":504,"line":1228},[502,1862,593],{"emptyLinePlaceholder":206},[502,1864,1865,1867,1869,1871],{"class":504,"line":1245},[502,1866,723],{"class":508},[502,1868,726],{"class":508},[502,1870,729],{"class":516},[502,1872,536],{"class":512},[487,1874,1875],{"icon":140,"label":734},[492,1876,1878],{"className":737,"code":1877,"filename":739,"language":740,"meta":498,"style":498},"._border-color\\:success { border-color: #28a745; }\n._border-color\\:error { border-color: #dc3545; }\n\n._valid\\:border-color\\:success {\n    &:valid { border-color: #28a745; }\n}\n\n._invalid\\:border-color\\:error {\n    &:invalid { border-color: #dc3545; }\n}\n",[422,1879,1880,1907,1933,1937,1954,1972,1976,1980,1997,2014],{"__ignoreMap":498},[502,1881,1882,1884,1886,1888,1891,1893,1895,1897,1900,1903,1905],{"class":504,"line":505},[502,1883,747],{"class":512},[502,1885,1355],{"class":750},[502,1887,754],{"class":516},[502,1889,1890],{"class":750},"success",[502,1892,513],{"class":512},[502,1894,1364],{"class":762},[502,1896,661],{"class":512},[502,1898,1899],{"class":512}," #",[502,1901,1902],{"class":516},"28a745",[502,1904,771],{"class":512},[502,1906,774],{"class":512},[502,1908,1909,1911,1913,1915,1918,1920,1922,1924,1926,1929,1931],{"class":504,"line":539},[502,1910,747],{"class":512},[502,1912,1355],{"class":750},[502,1914,754],{"class":516},[502,1916,1917],{"class":750},"error",[502,1919,513],{"class":512},[502,1921,1364],{"class":762},[502,1923,661],{"class":512},[502,1925,1899],{"class":512},[502,1927,1928],{"class":516},"dc3545",[502,1930,771],{"class":512},[502,1932,774],{"class":512},[502,1934,1935],{"class":504,"line":568},[502,1936,593],{"emptyLinePlaceholder":206},[502,1938,1939,1941,1944,1946,1948,1950,1952],{"class":504,"line":590},[502,1940,747],{"class":512},[502,1942,1943],{"class":750},"_valid",[502,1945,754],{"class":516},[502,1947,1439],{"class":750},[502,1949,754],{"class":516},[502,1951,1890],{"class":750},[502,1953,1225],{"class":512},[502,1955,1956,1958,1960,1963,1966,1968,1970],{"class":504,"line":596},[502,1957,1403],{"class":516},[502,1959,661],{"class":512},[502,1961,1962],{"class":516},"valid { border-color: ",[502,1964,1965],{"class":512},"#",[502,1967,1902],{"class":516},[502,1969,771],{"class":512},[502,1971,774],{"class":512},[502,1973,1974],{"class":504,"line":617},[502,1975,1424],{"class":516},[502,1977,1978],{"class":504,"line":622},[502,1979,593],{"emptyLinePlaceholder":206},[502,1981,1982,1984,1987,1989,1991,1993,1995],{"class":504,"line":639},[502,1983,747],{"class":512},[502,1985,1986],{"class":750},"_invalid",[502,1988,754],{"class":516},[502,1990,1439],{"class":750},[502,1992,754],{"class":516},[502,1994,1917],{"class":750},[502,1996,1225],{"class":512},[502,1998,1999,2001,2003,2006,2008,2010,2012],{"class":504,"line":644},[502,2000,1403],{"class":516},[502,2002,661],{"class":512},[502,2004,2005],{"class":516},"invalid { border-color: ",[502,2007,1965],{"class":512},[502,2009,1928],{"class":516},[502,2011,771],{"class":512},[502,2013,774],{"class":512},[502,2015,2016],{"class":504,"line":681},[502,2017,1424],{"class":516},[487,2019,2020],{"icon":870,"label":871},[492,2021,2023],{"className":874,"code":2022,"language":876,"meta":498,"style":498},"\u003Cinput\n    type=\"email\"\n    required\n    class=\"_valid:border-color:success _invalid:border-color:error\"\n    placeholder=\"Enter email\"\n>\n",[422,2024,2025,2031,2044,2049,2062,2076],{"__ignoreMap":498},[502,2026,2027,2029],{"class":504,"line":505},[502,2028,883],{"class":512},[502,2030,1482],{"class":695},[502,2032,2033,2035,2037,2039,2042],{"class":504,"line":539},[502,2034,1487],{"class":599},[502,2036,606],{"class":512},[502,2038,533],{"class":512},[502,2040,2041],{"class":529},"email",[502,2043,1497],{"class":512},[502,2045,2046],{"class":504,"line":568},[502,2047,2048],{"class":599},"    required\n",[502,2050,2051,2053,2055,2057,2060],{"class":504,"line":590},[502,2052,1502],{"class":599},[502,2054,606],{"class":512},[502,2056,533],{"class":512},[502,2058,2059],{"class":529},"_valid:border-color:success _invalid:border-color:error",[502,2061,1497],{"class":512},[502,2063,2064,2067,2069,2071,2074],{"class":504,"line":596},[502,2065,2066],{"class":599},"    placeholder",[502,2068,606],{"class":512},[502,2070,533],{"class":512},[502,2072,2073],{"class":529},"Enter email",[502,2075,1497],{"class":512},[502,2077,2078],{"class":504,"line":617},[502,2079,904],{"class":512},[920,2081,923],{"id":2082},"css-selector-6",[925,2084,2085,2093],{},[928,2086,2087],{},[931,2088,2089,2091],{},[934,2090,936],{},[934,2092,923],{},[940,2094,2095],{},[931,2096,2097,2102],{},[945,2098,2099],{},[422,2100,2101],{},"valid",[945,2103,2104],{},[422,2105,2106],{},"&:valid",[414,2108,2110],{"id":2109},"useinvalidmodifier",[422,2111,2112],{},"useInvalidModifier",[418,2114,478,2115,2118],{},[422,2116,2117],{},"useInvalidModifier()"," function creates a modifier that applies styles when a form element fails validation.",[920,2120,923],{"id":2121},"css-selector-7",[925,2123,2124,2132],{},[928,2125,2126],{},[931,2127,2128,2130],{},[934,2129,936],{},[934,2131,923],{},[940,2133,2134],{},[931,2135,2136,2141],{},[945,2137,2138],{},[422,2139,2140],{},"invalid",[945,2142,2143],{},[422,2144,2145],{},"&:invalid",[414,2147,2149],{"id":2148},"useplaceholdershownmodifier",[422,2150,2151],{},"usePlaceholderShownModifier",[418,2153,478,2154,2157],{},[422,2155,2156],{},"usePlaceholderShownModifier()"," function creates a modifier that applies styles when a form element's placeholder is visible (i.e., the input is empty).",[484,2159,2160,2320,2398],{},[487,2161,2162],{"icon":489,"label":490},[492,2163,2165],{"className":494,"code":2164,"filename":496,"language":497,"meta":498,"style":498},"import { styleframe } from \"styleframe\";\nimport { useTextColorUtility } from \"@styleframe/theme\";\nimport { usePlaceholderShownModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst placeholderShown = usePlaceholderShownModifier(s);\n\nuseTextColorUtility(s, {\n    muted: '#6c757d',\n}, [placeholderShown]);\n\nexport default s;\n",[422,2166,2167,2187,2208,2229,2233,2247,2251,2266,2270,2281,2297,2306,2310],{"__ignoreMap":498},[502,2168,2169,2171,2173,2175,2177,2179,2181,2183,2185],{"class":504,"line":505},[502,2170,509],{"class":508},[502,2172,513],{"class":512},[502,2174,517],{"class":516},[502,2176,520],{"class":512},[502,2178,523],{"class":508},[502,2180,526],{"class":512},[502,2182,530],{"class":529},[502,2184,533],{"class":512},[502,2186,536],{"class":512},[502,2188,2189,2191,2193,2196,2198,2200,2202,2204,2206],{"class":504,"line":539},[502,2190,509],{"class":508},[502,2192,513],{"class":512},[502,2194,2195],{"class":516}," useTextColorUtility",[502,2197,520],{"class":512},[502,2199,523],{"class":508},[502,2201,526],{"class":512},[502,2203,561],{"class":529},[502,2205,533],{"class":512},[502,2207,536],{"class":512},[502,2209,2210,2212,2214,2217,2219,2221,2223,2225,2227],{"class":504,"line":568},[502,2211,509],{"class":508},[502,2213,513],{"class":512},[502,2215,2216],{"class":516}," usePlaceholderShownModifier",[502,2218,520],{"class":512},[502,2220,523],{"class":508},[502,2222,526],{"class":512},[502,2224,561],{"class":529},[502,2226,533],{"class":512},[502,2228,536],{"class":512},[502,2230,2231],{"class":504,"line":590},[502,2232,593],{"emptyLinePlaceholder":206},[502,2234,2235,2237,2239,2241,2243,2245],{"class":504,"line":596},[502,2236,600],{"class":599},[502,2238,603],{"class":516},[502,2240,606],{"class":512},[502,2242,517],{"class":609},[502,2244,612],{"class":516},[502,2246,536],{"class":512},[502,2248,2249],{"class":504,"line":617},[502,2250,593],{"emptyLinePlaceholder":206},[502,2252,2253,2255,2258,2260,2262,2264],{"class":504,"line":622},[502,2254,600],{"class":599},[502,2256,2257],{"class":516}," placeholderShown ",[502,2259,606],{"class":512},[502,2261,2216],{"class":609},[502,2263,634],{"class":516},[502,2265,536],{"class":512},[502,2267,2268],{"class":504,"line":639},[502,2269,593],{"emptyLinePlaceholder":206},[502,2271,2272,2275,2277,2279],{"class":504,"line":644},[502,2273,2274],{"class":609},"useTextColorUtility",[502,2276,650],{"class":516},[502,2278,549],{"class":512},[502,2280,1225],{"class":512},[502,2282,2283,2286,2288,2290,2293,2295],{"class":504,"line":681},[502,2284,2285],{"class":695},"    muted",[502,2287,661],{"class":512},[502,2289,664],{"class":512},[502,2291,2292],{"class":529},"#6c757d",[502,2294,670],{"class":512},[502,2296,1242],{"class":512},[502,2298,2299,2301,2304],{"class":504,"line":715},[502,2300,1248],{"class":512},[502,2302,2303],{"class":516}," [placeholderShown])",[502,2305,536],{"class":512},[502,2307,2308],{"class":504,"line":720},[502,2309,593],{"emptyLinePlaceholder":206},[502,2311,2312,2314,2316,2318],{"class":504,"line":1215},[502,2313,723],{"class":508},[502,2315,726],{"class":508},[502,2317,729],{"class":516},[502,2319,536],{"class":512},[487,2321,2322],{"icon":140,"label":734},[492,2323,2325],{"className":737,"code":2324,"filename":739,"language":740,"meta":498,"style":498},"._text-color\\:muted { color: #6c757d; }\n\n._placeholder-shown\\:text-color\\:muted {\n    &:placeholder-shown { color: #6c757d; }\n}\n",[422,2326,2327,2355,2359,2377,2394],{"__ignoreMap":498},[502,2328,2329,2331,2334,2336,2339,2341,2344,2346,2348,2351,2353],{"class":504,"line":505},[502,2330,747],{"class":512},[502,2332,2333],{"class":750},"_text-color",[502,2335,754],{"class":516},[502,2337,2338],{"class":750},"muted",[502,2340,513],{"class":512},[502,2342,2343],{"class":762}," color",[502,2345,661],{"class":512},[502,2347,1899],{"class":512},[502,2349,2350],{"class":516},"6c757d",[502,2352,771],{"class":512},[502,2354,774],{"class":512},[502,2356,2357],{"class":504,"line":539},[502,2358,593],{"emptyLinePlaceholder":206},[502,2360,2361,2363,2366,2368,2371,2373,2375],{"class":504,"line":568},[502,2362,747],{"class":512},[502,2364,2365],{"class":750},"_placeholder-shown",[502,2367,754],{"class":516},[502,2369,2370],{"class":750},"text-color",[502,2372,754],{"class":516},[502,2374,2338],{"class":750},[502,2376,1225],{"class":512},[502,2378,2379,2381,2383,2386,2388,2390,2392],{"class":504,"line":590},[502,2380,1403],{"class":516},[502,2382,661],{"class":512},[502,2384,2385],{"class":516},"placeholder-shown { color: ",[502,2387,1965],{"class":512},[502,2389,2350],{"class":516},[502,2391,771],{"class":512},[502,2393,774],{"class":512},[502,2395,2396],{"class":504,"line":596},[502,2397,1424],{"class":516},[487,2399,2400],{"icon":870,"label":871},[492,2401,2403],{"className":874,"code":2402,"language":876,"meta":498,"style":498},"\u003C!-- Style input when placeholder is visible (empty) -->\n\u003Cinput\n    class=\"_placeholder-shown:text-color:muted\"\n    placeholder=\"Type something...\"\n>\n",[422,2404,2405,2411,2417,2430,2443],{"__ignoreMap":498},[502,2406,2407],{"class":504,"line":505},[502,2408,2410],{"class":2409},"sHwdD","\u003C!-- Style input when placeholder is visible (empty) -->\n",[502,2412,2413,2415],{"class":504,"line":539},[502,2414,883],{"class":512},[502,2416,1482],{"class":695},[502,2418,2419,2421,2423,2425,2428],{"class":504,"line":568},[502,2420,1502],{"class":599},[502,2422,606],{"class":512},[502,2424,533],{"class":512},[502,2426,2427],{"class":529},"_placeholder-shown:text-color:muted",[502,2429,1497],{"class":512},[502,2431,2432,2434,2436,2438,2441],{"class":504,"line":590},[502,2433,2066],{"class":599},[502,2435,606],{"class":512},[502,2437,533],{"class":512},[502,2439,2440],{"class":529},"Type something...",[502,2442,1497],{"class":512},[502,2444,2445],{"class":504,"line":596},[502,2446,904],{"class":512},[920,2448,923],{"id":2449},"css-selector-8",[925,2451,2452,2460],{},[928,2453,2454],{},[931,2455,2456,2458],{},[934,2457,936],{},[934,2459,923],{},[940,2461,2462],{},[931,2463,2464,2469],{},[945,2465,2466],{},[422,2467,2468],{},"placeholder-shown",[945,2470,2471],{},[422,2472,2473],{},"&:placeholder-shown",[414,2475,2477],{"id":2476},"useautofillmodifier",[422,2478,2479],{},"useAutofillModifier",[418,2481,478,2482,2485],{},[422,2483,2484],{},"useAutofillModifier()"," function creates a modifier that applies styles when a form element has been autofilled by the browser.",[920,2487,923],{"id":2488},"css-selector-9",[925,2490,2491,2499],{},[928,2492,2493],{},[931,2494,2495,2497],{},[934,2496,936],{},[934,2498,923],{},[940,2500,2501],{},[931,2502,2503,2508],{},[945,2504,2505],{},[422,2506,2507],{},"autofill",[945,2509,2510],{},[422,2511,2512],{},"&:autofill",[414,2514,2516],{"id":2515},"usereadonlymodifier",[422,2517,2518],{},"useReadOnlyModifier",[418,2520,478,2521,2524],{},[422,2522,2523],{},"useReadOnlyModifier()"," function creates a modifier that applies styles to read-only form elements.",[920,2526,923],{"id":2527},"css-selector-10",[925,2529,2530,2538],{},[928,2531,2532],{},[931,2533,2534,2536],{},[934,2535,936],{},[934,2537,923],{},[940,2539,2540],{},[931,2541,2542,2547],{},[945,2543,2544],{},[422,2545,2546],{},"read-only",[945,2548,2549],{},[422,2550,2551],{},"&:read-only",[414,2553,2555],{"id":2554},"useformstatemodifiers",[422,2556,2557],{},"useFormStateModifiers",[418,2559,478,2560,2563],{},[422,2561,2562],{},"useFormStateModifiers()"," function registers all form state modifiers at once and returns them as a destructurable object.",[484,2565,2566,2797],{},[487,2567,2568],{"icon":489,"label":490},[492,2569,2571],{"className":494,"code":2570,"filename":496,"language":497,"meta":498,"style":498},"import { styleframe } from \"styleframe\";\nimport { useBorderColorUtility, useOpacityUtility } from \"@styleframe/theme\";\nimport { useFormStateModifiers } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst { disabled, valid, invalid, checked } = useFormStateModifiers(s);\n\nuseBorderColorUtility(s, {\n    success: '#28a745',\n    error: '#dc3545',\n}, [valid, invalid]);\n\nuseOpacityUtility(s, {\n    50: '0.5',\n}, [disabled]);\n\nexport default s;\n",[422,2572,2573,2593,2617,2638,2642,2656,2660,2692,2696,2706,2720,2734,2746,2750,2760,2775,2783,2787],{"__ignoreMap":498},[502,2574,2575,2577,2579,2581,2583,2585,2587,2589,2591],{"class":504,"line":505},[502,2576,509],{"class":508},[502,2578,513],{"class":512},[502,2580,517],{"class":516},[502,2582,520],{"class":512},[502,2584,523],{"class":508},[502,2586,526],{"class":512},[502,2588,530],{"class":529},[502,2590,533],{"class":512},[502,2592,536],{"class":512},[502,2594,2595,2597,2599,2601,2603,2605,2607,2609,2611,2613,2615],{"class":504,"line":539},[502,2596,509],{"class":508},[502,2598,513],{"class":512},[502,2600,1069],{"class":516},[502,2602,549],{"class":512},[502,2604,546],{"class":516},[502,2606,520],{"class":512},[502,2608,523],{"class":508},[502,2610,526],{"class":512},[502,2612,561],{"class":529},[502,2614,533],{"class":512},[502,2616,536],{"class":512},[502,2618,2619,2621,2623,2626,2628,2630,2632,2634,2636],{"class":504,"line":568},[502,2620,509],{"class":508},[502,2622,513],{"class":512},[502,2624,2625],{"class":516}," useFormStateModifiers",[502,2627,520],{"class":512},[502,2629,523],{"class":508},[502,2631,526],{"class":512},[502,2633,561],{"class":529},[502,2635,533],{"class":512},[502,2637,536],{"class":512},[502,2639,2640],{"class":504,"line":590},[502,2641,593],{"emptyLinePlaceholder":206},[502,2643,2644,2646,2648,2650,2652,2654],{"class":504,"line":596},[502,2645,600],{"class":599},[502,2647,603],{"class":516},[502,2649,606],{"class":512},[502,2651,517],{"class":609},[502,2653,612],{"class":516},[502,2655,536],{"class":512},[502,2657,2658],{"class":504,"line":617},[502,2659,593],{"emptyLinePlaceholder":206},[502,2661,2662,2664,2666,2668,2670,2673,2675,2678,2680,2682,2684,2686,2688,2690],{"class":504,"line":622},[502,2663,600],{"class":599},[502,2665,513],{"class":512},[502,2667,889],{"class":516},[502,2669,549],{"class":512},[502,2671,2672],{"class":516}," valid",[502,2674,549],{"class":512},[502,2676,2677],{"class":516}," invalid",[502,2679,549],{"class":512},[502,2681,1200],{"class":516},[502,2683,1132],{"class":512},[502,2685,1135],{"class":512},[502,2687,2625],{"class":609},[502,2689,634],{"class":516},[502,2691,536],{"class":512},[502,2693,2694],{"class":504,"line":639},[502,2695,593],{"emptyLinePlaceholder":206},[502,2697,2698,2700,2702,2704],{"class":504,"line":644},[502,2699,1264],{"class":609},[502,2701,650],{"class":516},[502,2703,549],{"class":512},[502,2705,1225],{"class":512},[502,2707,2708,2710,2712,2714,2716,2718],{"class":504,"line":681},[502,2709,1817],{"class":695},[502,2711,661],{"class":512},[502,2713,664],{"class":512},[502,2715,1824],{"class":529},[502,2717,670],{"class":512},[502,2719,1242],{"class":512},[502,2721,2722,2724,2726,2728,2730,2732],{"class":504,"line":715},[502,2723,1833],{"class":695},[502,2725,661],{"class":512},[502,2727,664],{"class":512},[502,2729,1840],{"class":529},[502,2731,670],{"class":512},[502,2733,1242],{"class":512},[502,2735,2736,2738,2740,2742,2744],{"class":504,"line":720},[502,2737,1248],{"class":512},[502,2739,1851],{"class":516},[502,2741,549],{"class":512},[502,2743,1856],{"class":516},[502,2745,536],{"class":512},[502,2747,2748],{"class":504,"line":1215},[502,2749,593],{"emptyLinePlaceholder":206},[502,2751,2752,2754,2756,2758],{"class":504,"line":1228},[502,2753,647],{"class":609},[502,2755,650],{"class":516},[502,2757,549],{"class":512},[502,2759,1225],{"class":512},[502,2761,2762,2765,2767,2769,2771,2773],{"class":504,"line":1245},[502,2763,2764],{"class":657},"    50",[502,2766,661],{"class":512},[502,2768,664],{"class":512},[502,2770,667],{"class":529},[502,2772,670],{"class":512},[502,2774,1242],{"class":512},[502,2776,2777,2779,2781],{"class":504,"line":1256},[502,2778,1248],{"class":512},[502,2780,676],{"class":516},[502,2782,536],{"class":512},[502,2784,2785],{"class":504,"line":1261},[502,2786,593],{"emptyLinePlaceholder":206},[502,2788,2789,2791,2793,2795],{"class":504,"line":1273},[502,2790,723],{"class":508},[502,2792,726],{"class":508},[502,2794,729],{"class":516},[502,2796,536],{"class":512},[487,2798,2799],{"icon":870,"label":871},[492,2800,2802],{"className":874,"code":2801,"language":876,"meta":498,"style":498},"\u003Cinput\n    type=\"email\"\n    required\n    class=\"_valid:border-color:success _invalid:border-color:error\"\n>\n\n\u003Cbutton disabled class=\"_disabled:opacity:50\">\n    Submit\n\u003C/button>\n",[422,2803,2804,2810,2822,2826,2838,2842,2846,2867,2872],{"__ignoreMap":498},[502,2805,2806,2808],{"class":504,"line":505},[502,2807,883],{"class":512},[502,2809,1482],{"class":695},[502,2811,2812,2814,2816,2818,2820],{"class":504,"line":539},[502,2813,1487],{"class":599},[502,2815,606],{"class":512},[502,2817,533],{"class":512},[502,2819,2041],{"class":529},[502,2821,1497],{"class":512},[502,2823,2824],{"class":504,"line":568},[502,2825,2048],{"class":599},[502,2827,2828,2830,2832,2834,2836],{"class":504,"line":590},[502,2829,1502],{"class":599},[502,2831,606],{"class":512},[502,2833,533],{"class":512},[502,2835,2059],{"class":529},[502,2837,1497],{"class":512},[502,2839,2840],{"class":504,"line":596},[502,2841,904],{"class":512},[502,2843,2844],{"class":504,"line":617},[502,2845,593],{"emptyLinePlaceholder":206},[502,2847,2848,2850,2852,2854,2856,2858,2860,2863,2865],{"class":504,"line":622},[502,2849,883],{"class":512},[502,2851,886],{"class":695},[502,2853,889],{"class":599},[502,2855,892],{"class":599},[502,2857,606],{"class":512},[502,2859,533],{"class":512},[502,2861,2862],{"class":529},"_disabled:opacity:50",[502,2864,533],{"class":512},[502,2866,904],{"class":512},[502,2868,2869],{"class":504,"line":639},[502,2870,2871],{"class":516},"    Submit\n",[502,2873,2874,2876,2878],{"class":504,"line":644},[502,2875,914],{"class":512},[502,2877,886],{"class":695},[502,2879,904],{"class":512},[2881,2882,2884],"h3",{"id":2883},"returned-modifiers","Returned Modifiers",[925,2886,2887,2898],{},[928,2888,2889],{},[931,2890,2891,2894,2896],{},[934,2892,2893],{},"Key",[934,2895,936],{},[934,2897,923],{},[940,2899,2900,2914,2928,2942,2956,2970,2984,2998,3012,3027,3041,3056],{},[931,2901,2902,2906,2910],{},[945,2903,2904],{},[422,2905,949],{},[945,2907,2908],{},[422,2909,949],{},[945,2911,2912],{},[422,2913,954],{},[931,2915,2916,2920,2924],{},[945,2917,2918],{},[422,2919,988],{},[945,2921,2922],{},[422,2923,988],{},[945,2925,2926],{},[422,2927,993],{},[931,2929,2930,2934,2938],{},[945,2931,2932],{},[422,2933,1537],{},[945,2935,2936],{},[422,2937,1537],{},[945,2939,2940],{},[422,2941,1542],{},[931,2943,2944,2948,2952],{},[945,2945,2946],{},[422,2947,1576],{},[945,2949,2950],{},[422,2951,1576],{},[945,2953,2954],{},[422,2955,1581],{},[931,2957,2958,2962,2966],{},[945,2959,2960],{},[422,2961,1615],{},[945,2963,2964],{},[422,2965,1615],{},[945,2967,2968],{},[422,2969,1620],{},[931,2971,2972,2976,2980],{},[945,2973,2974],{},[422,2975,1654],{},[945,2977,2978],{},[422,2979,1654],{},[945,2981,2982],{},[422,2983,1659],{},[931,2985,2986,2990,2994],{},[945,2987,2988],{},[422,2989,2101],{},[945,2991,2992],{},[422,2993,2101],{},[945,2995,2996],{},[422,2997,2106],{},[931,2999,3000,3004,3008],{},[945,3001,3002],{},[422,3003,2140],{},[945,3005,3006],{},[422,3007,2140],{},[945,3009,3010],{},[422,3011,2145],{},[931,3013,3014,3019,3023],{},[945,3015,3016],{},[422,3017,3018],{},"placeholderShown",[945,3020,3021],{},[422,3022,2468],{},[945,3024,3025],{},[422,3026,2473],{},[931,3028,3029,3033,3037],{},[945,3030,3031],{},[422,3032,2507],{},[945,3034,3035],{},[422,3036,2507],{},[945,3038,3039],{},[422,3040,2512],{},[931,3042,3043,3048,3052],{},[945,3044,3045],{},[422,3046,3047],{},"readOnly",[945,3049,3050],{},[422,3051,2546],{},[945,3053,3054],{},[422,3055,2551],{},[931,3057,3058,3063,3067],{},[945,3059,3060],{},[422,3061,3062],{},"readonly",[945,3064,3065],{},[422,3066,3062],{},[945,3068,3069],{},[422,3070,2551],{},[414,3072,3074],{"id":3073},"examples","Examples",[2881,3076,3078],{"id":3077},"form-validation-feedback","Form Validation Feedback",[484,3080,3081,3348],{},[487,3082,3083],{"icon":489,"label":490},[492,3084,3086],{"className":494,"code":3085,"filename":496,"language":497,"meta":498,"style":498},"import { styleframe } from \"styleframe\";\nimport { useBorderColorUtility, useTextColorUtility } from \"@styleframe/theme\";\nimport { useFormStateModifiers } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nconst { valid, invalid, required, disabled } = useFormStateModifiers(s);\n\nuseBorderColorUtility(s, {\n    success: '#28a745',\n    error: '#dc3545',\n    warning: '#ffc107',\n}, [valid, invalid, required]);\n\nuseTextColorUtility(s, {\n    success: '#28a745',\n    error: '#dc3545',\n}, [valid, invalid]);\n\nexport default s;\n",[422,3087,3088,3108,3132,3152,3156,3170,3174,3205,3209,3219,3233,3247,3263,3280,3284,3294,3308,3322,3334,3338],{"__ignoreMap":498},[502,3089,3090,3092,3094,3096,3098,3100,3102,3104,3106],{"class":504,"line":505},[502,3091,509],{"class":508},[502,3093,513],{"class":512},[502,3095,517],{"class":516},[502,3097,520],{"class":512},[502,3099,523],{"class":508},[502,3101,526],{"class":512},[502,3103,530],{"class":529},[502,3105,533],{"class":512},[502,3107,536],{"class":512},[502,3109,3110,3112,3114,3116,3118,3120,3122,3124,3126,3128,3130],{"class":504,"line":539},[502,3111,509],{"class":508},[502,3113,513],{"class":512},[502,3115,1069],{"class":516},[502,3117,549],{"class":512},[502,3119,2195],{"class":516},[502,3121,520],{"class":512},[502,3123,523],{"class":508},[502,3125,526],{"class":512},[502,3127,561],{"class":529},[502,3129,533],{"class":512},[502,3131,536],{"class":512},[502,3133,3134,3136,3138,3140,3142,3144,3146,3148,3150],{"class":504,"line":568},[502,3135,509],{"class":508},[502,3137,513],{"class":512},[502,3139,2625],{"class":516},[502,3141,520],{"class":512},[502,3143,523],{"class":508},[502,3145,526],{"class":512},[502,3147,561],{"class":529},[502,3149,533],{"class":512},[502,3151,536],{"class":512},[502,3153,3154],{"class":504,"line":590},[502,3155,593],{"emptyLinePlaceholder":206},[502,3157,3158,3160,3162,3164,3166,3168],{"class":504,"line":596},[502,3159,600],{"class":599},[502,3161,603],{"class":516},[502,3163,606],{"class":512},[502,3165,517],{"class":609},[502,3167,612],{"class":516},[502,3169,536],{"class":512},[502,3171,3172],{"class":504,"line":617},[502,3173,593],{"emptyLinePlaceholder":206},[502,3175,3176,3178,3180,3182,3184,3186,3188,3191,3193,3195,3197,3199,3201,3203],{"class":504,"line":622},[502,3177,600],{"class":599},[502,3179,513],{"class":512},[502,3181,2672],{"class":516},[502,3183,549],{"class":512},[502,3185,2677],{"class":516},[502,3187,549],{"class":512},[502,3189,3190],{"class":516}," required",[502,3192,549],{"class":512},[502,3194,627],{"class":516},[502,3196,1132],{"class":512},[502,3198,1135],{"class":512},[502,3200,2625],{"class":609},[502,3202,634],{"class":516},[502,3204,536],{"class":512},[502,3206,3207],{"class":504,"line":639},[502,3208,593],{"emptyLinePlaceholder":206},[502,3210,3211,3213,3215,3217],{"class":504,"line":644},[502,3212,1264],{"class":609},[502,3214,650],{"class":516},[502,3216,549],{"class":512},[502,3218,1225],{"class":512},[502,3220,3221,3223,3225,3227,3229,3231],{"class":504,"line":681},[502,3222,1817],{"class":695},[502,3224,661],{"class":512},[502,3226,664],{"class":512},[502,3228,1824],{"class":529},[502,3230,670],{"class":512},[502,3232,1242],{"class":512},[502,3234,3235,3237,3239,3241,3243,3245],{"class":504,"line":715},[502,3236,1833],{"class":695},[502,3238,661],{"class":512},[502,3240,664],{"class":512},[502,3242,1840],{"class":529},[502,3244,670],{"class":512},[502,3246,1242],{"class":512},[502,3248,3249,3252,3254,3256,3259,3261],{"class":504,"line":720},[502,3250,3251],{"class":695},"    warning",[502,3253,661],{"class":512},[502,3255,664],{"class":512},[502,3257,3258],{"class":529},"#ffc107",[502,3260,670],{"class":512},[502,3262,1242],{"class":512},[502,3264,3265,3267,3269,3271,3273,3275,3278],{"class":504,"line":1215},[502,3266,1248],{"class":512},[502,3268,1851],{"class":516},[502,3270,549],{"class":512},[502,3272,2677],{"class":516},[502,3274,549],{"class":512},[502,3276,3277],{"class":516}," required])",[502,3279,536],{"class":512},[502,3281,3282],{"class":504,"line":1228},[502,3283,593],{"emptyLinePlaceholder":206},[502,3285,3286,3288,3290,3292],{"class":504,"line":1245},[502,3287,2274],{"class":609},[502,3289,650],{"class":516},[502,3291,549],{"class":512},[502,3293,1225],{"class":512},[502,3295,3296,3298,3300,3302,3304,3306],{"class":504,"line":1256},[502,3297,1817],{"class":695},[502,3299,661],{"class":512},[502,3301,664],{"class":512},[502,3303,1824],{"class":529},[502,3305,670],{"class":512},[502,3307,1242],{"class":512},[502,3309,3310,3312,3314,3316,3318,3320],{"class":504,"line":1261},[502,3311,1833],{"class":695},[502,3313,661],{"class":512},[502,3315,664],{"class":512},[502,3317,1840],{"class":529},[502,3319,670],{"class":512},[502,3321,1242],{"class":512},[502,3323,3324,3326,3328,3330,3332],{"class":504,"line":1273},[502,3325,1248],{"class":512},[502,3327,1851],{"class":516},[502,3329,549],{"class":512},[502,3331,1856],{"class":516},[502,3333,536],{"class":512},[502,3335,3336],{"class":504,"line":1286},[502,3337,593],{"emptyLinePlaceholder":206},[502,3339,3340,3342,3344,3346],{"class":504,"line":1295},[502,3341,723],{"class":508},[502,3343,726],{"class":508},[502,3345,729],{"class":516},[502,3347,536],{"class":512},[487,3349,3350],{"icon":870,"label":871},[492,3351,3353],{"className":874,"code":3352,"language":876,"meta":498,"style":498},"\u003Cform>\n    \u003Cinput\n        type=\"email\"\n        required\n        class=\"_invalid:border-color:error _valid:border-color:success\"\n        placeholder=\"Email address\"\n    >\n    \u003Cinput\n        type=\"text\"\n        class=\"_required:border-color:warning\"\n        required\n        placeholder=\"Required field\"\n    >\n\u003C/form>\n",[422,3354,3355,3364,3371,3384,3389,3403,3417,3422,3428,3441,3454,3458,3471,3475],{"__ignoreMap":498},[502,3356,3357,3359,3362],{"class":504,"line":505},[502,3358,883],{"class":512},[502,3360,3361],{"class":695},"form",[502,3363,904],{"class":512},[502,3365,3366,3369],{"class":504,"line":539},[502,3367,3368],{"class":512},"    \u003C",[502,3370,1482],{"class":695},[502,3372,3373,3376,3378,3380,3382],{"class":504,"line":568},[502,3374,3375],{"class":599},"        type",[502,3377,606],{"class":512},[502,3379,533],{"class":512},[502,3381,2041],{"class":529},[502,3383,1497],{"class":512},[502,3385,3386],{"class":504,"line":590},[502,3387,3388],{"class":599},"        required\n",[502,3390,3391,3394,3396,3398,3401],{"class":504,"line":596},[502,3392,3393],{"class":599},"        class",[502,3395,606],{"class":512},[502,3397,533],{"class":512},[502,3399,3400],{"class":529},"_invalid:border-color:error _valid:border-color:success",[502,3402,1497],{"class":512},[502,3404,3405,3408,3410,3412,3415],{"class":504,"line":617},[502,3406,3407],{"class":599},"        placeholder",[502,3409,606],{"class":512},[502,3411,533],{"class":512},[502,3413,3414],{"class":529},"Email address",[502,3416,1497],{"class":512},[502,3418,3419],{"class":504,"line":622},[502,3420,3421],{"class":512},"    >\n",[502,3423,3424,3426],{"class":504,"line":639},[502,3425,3368],{"class":512},[502,3427,1482],{"class":695},[502,3429,3430,3432,3434,3436,3439],{"class":504,"line":644},[502,3431,3375],{"class":599},[502,3433,606],{"class":512},[502,3435,533],{"class":512},[502,3437,3438],{"class":529},"text",[502,3440,1497],{"class":512},[502,3442,3443,3445,3447,3449,3452],{"class":504,"line":681},[502,3444,3393],{"class":599},[502,3446,606],{"class":512},[502,3448,533],{"class":512},[502,3450,3451],{"class":529},"_required:border-color:warning",[502,3453,1497],{"class":512},[502,3455,3456],{"class":504,"line":715},[502,3457,3388],{"class":599},[502,3459,3460,3462,3464,3466,3469],{"class":504,"line":720},[502,3461,3407],{"class":599},[502,3463,606],{"class":512},[502,3465,533],{"class":512},[502,3467,3468],{"class":529},"Required field",[502,3470,1497],{"class":512},[502,3472,3473],{"class":504,"line":1215},[502,3474,3421],{"class":512},[502,3476,3477,3479,3481],{"class":504,"line":1228},[502,3478,914],{"class":512},[502,3480,3361],{"class":695},[502,3482,904],{"class":512},[2881,3484,3486],{"id":3485},"custom-checkbox","Custom Checkbox",[484,3488,3489,3818],{},[487,3490,3491],{"icon":489,"label":490},[492,3492,3494],{"className":494,"code":3493,"filename":496,"language":497,"meta":498,"style":498},"import { styleframe } from \"styleframe\";\nimport { useColorDesignTokens } from \"@styleframe/theme\";\nimport { useBackgroundColorUtility, useBorderColorUtility } from \"@styleframe/theme\";\nimport { useCheckedModifier, useFocusVisibleModifier } from \"@styleframe/theme\";\n\nconst s = styleframe();\nconst { ref } = s;\n\nconst { colorPrimary } = useColorDesignTokens(s, { primary: '#006cff' } as const);\n\nconst checked = useCheckedModifier(s);\nconst focusVisible = useFocusVisibleModifier(s);\n\nuseBackgroundColorUtility(s, {\n    primary: ref(colorPrimary),\n    white: '#ffffff',\n}, [checked]);\n\nuseBorderColorUtility(s, {\n    primary: ref(colorPrimary),\n    muted: '#dee2e6',\n}, [checked, focusVisible]);\n\nexport default s;\n",[422,3495,3496,3516,3536,3560,3585,3589,3603,3619,3623,3663,3667,3681,3696,3700,3710,3722,3738,3746,3750,3760,3772,3787,3802,3807],{"__ignoreMap":498},[502,3497,3498,3500,3502,3504,3506,3508,3510,3512,3514],{"class":504,"line":505},[502,3499,509],{"class":508},[502,3501,513],{"class":512},[502,3503,517],{"class":516},[502,3505,520],{"class":512},[502,3507,523],{"class":508},[502,3509,526],{"class":512},[502,3511,530],{"class":529},[502,3513,533],{"class":512},[502,3515,536],{"class":512},[502,3517,3518,3520,3522,3524,3526,3528,3530,3532,3534],{"class":504,"line":539},[502,3519,509],{"class":508},[502,3521,513],{"class":512},[502,3523,1043],{"class":516},[502,3525,520],{"class":512},[502,3527,523],{"class":508},[502,3529,526],{"class":512},[502,3531,561],{"class":529},[502,3533,533],{"class":512},[502,3535,536],{"class":512},[502,3537,3538,3540,3542,3544,3546,3548,3550,3552,3554,3556,3558],{"class":504,"line":568},[502,3539,509],{"class":508},[502,3541,513],{"class":512},[502,3543,1064],{"class":516},[502,3545,549],{"class":512},[502,3547,1069],{"class":516},[502,3549,520],{"class":512},[502,3551,523],{"class":508},[502,3553,526],{"class":512},[502,3555,561],{"class":529},[502,3557,533],{"class":512},[502,3559,536],{"class":512},[502,3561,3562,3564,3566,3568,3570,3573,3575,3577,3579,3581,3583],{"class":504,"line":590},[502,3563,509],{"class":508},[502,3565,513],{"class":512},[502,3567,1090],{"class":516},[502,3569,549],{"class":512},[502,3571,3572],{"class":516}," useFocusVisibleModifier",[502,3574,520],{"class":512},[502,3576,523],{"class":508},[502,3578,526],{"class":512},[502,3580,561],{"class":529},[502,3582,533],{"class":512},[502,3584,536],{"class":512},[502,3586,3587],{"class":504,"line":596},[502,3588,593],{"emptyLinePlaceholder":206},[502,3590,3591,3593,3595,3597,3599,3601],{"class":504,"line":617},[502,3592,600],{"class":599},[502,3594,603],{"class":516},[502,3596,606],{"class":512},[502,3598,517],{"class":609},[502,3600,612],{"class":516},[502,3602,536],{"class":512},[502,3604,3605,3607,3609,3611,3613,3615,3617],{"class":504,"line":622},[502,3606,600],{"class":599},[502,3608,513],{"class":512},[502,3610,1129],{"class":516},[502,3612,1132],{"class":512},[502,3614,1135],{"class":512},[502,3616,729],{"class":516},[502,3618,536],{"class":512},[502,3620,3621],{"class":504,"line":639},[502,3622,593],{"emptyLinePlaceholder":206},[502,3624,3625,3627,3629,3631,3633,3635,3637,3639,3641,3643,3645,3647,3649,3651,3653,3655,3657,3659,3661],{"class":504,"line":644},[502,3626,600],{"class":599},[502,3628,513],{"class":512},[502,3630,1152],{"class":516},[502,3632,1132],{"class":512},[502,3634,1135],{"class":512},[502,3636,1043],{"class":609},[502,3638,650],{"class":516},[502,3640,549],{"class":512},[502,3642,513],{"class":512},[502,3644,1167],{"class":695},[502,3646,661],{"class":512},[502,3648,664],{"class":512},[502,3650,1174],{"class":529},[502,3652,670],{"class":512},[502,3654,520],{"class":512},[502,3656,1181],{"class":508},[502,3658,1184],{"class":599},[502,3660,1187],{"class":516},[502,3662,536],{"class":512},[502,3664,3665],{"class":504,"line":681},[502,3666,593],{"emptyLinePlaceholder":206},[502,3668,3669,3671,3673,3675,3677,3679],{"class":504,"line":715},[502,3670,600],{"class":599},[502,3672,1200],{"class":516},[502,3674,606],{"class":512},[502,3676,1090],{"class":609},[502,3678,634],{"class":516},[502,3680,536],{"class":512},[502,3682,3683,3685,3688,3690,3692,3694],{"class":504,"line":720},[502,3684,600],{"class":599},[502,3686,3687],{"class":516}," focusVisible ",[502,3689,606],{"class":512},[502,3691,3572],{"class":609},[502,3693,634],{"class":516},[502,3695,536],{"class":512},[502,3697,3698],{"class":504,"line":1215},[502,3699,593],{"emptyLinePlaceholder":206},[502,3701,3702,3704,3706,3708],{"class":504,"line":1228},[502,3703,1218],{"class":609},[502,3705,650],{"class":516},[502,3707,549],{"class":512},[502,3709,1225],{"class":512},[502,3711,3712,3714,3716,3718,3720],{"class":504,"line":1245},[502,3713,1231],{"class":695},[502,3715,661],{"class":512},[502,3717,1236],{"class":609},[502,3719,1239],{"class":516},[502,3721,1242],{"class":512},[502,3723,3724,3727,3729,3731,3734,3736],{"class":504,"line":1256},[502,3725,3726],{"class":695},"    white",[502,3728,661],{"class":512},[502,3730,664],{"class":512},[502,3732,3733],{"class":529},"#ffffff",[502,3735,670],{"class":512},[502,3737,1242],{"class":512},[502,3739,3740,3742,3744],{"class":504,"line":1261},[502,3741,1248],{"class":512},[502,3743,1251],{"class":516},[502,3745,536],{"class":512},[502,3747,3748],{"class":504,"line":1273},[502,3749,593],{"emptyLinePlaceholder":206},[502,3751,3752,3754,3756,3758],{"class":504,"line":1286},[502,3753,1264],{"class":609},[502,3755,650],{"class":516},[502,3757,549],{"class":512},[502,3759,1225],{"class":512},[502,3761,3762,3764,3766,3768,3770],{"class":504,"line":1295},[502,3763,1231],{"class":695},[502,3765,661],{"class":512},[502,3767,1236],{"class":609},[502,3769,1239],{"class":516},[502,3771,1242],{"class":512},[502,3773,3774,3776,3778,3780,3783,3785],{"class":504,"line":1300},[502,3775,2285],{"class":695},[502,3777,661],{"class":512},[502,3779,664],{"class":512},[502,3781,3782],{"class":529},"#dee2e6",[502,3784,670],{"class":512},[502,3786,1242],{"class":512},[502,3788,3790,3792,3795,3797,3800],{"class":504,"line":3789},22,[502,3791,1248],{"class":512},[502,3793,3794],{"class":516}," [checked",[502,3796,549],{"class":512},[502,3798,3799],{"class":516}," focusVisible])",[502,3801,536],{"class":512},[502,3803,3805],{"class":504,"line":3804},23,[502,3806,593],{"emptyLinePlaceholder":206},[502,3808,3810,3812,3814,3816],{"class":504,"line":3809},24,[502,3811,723],{"class":508},[502,3813,726],{"class":508},[502,3815,729],{"class":516},[502,3817,536],{"class":512},[487,3819,3820],{"icon":870,"label":871},[492,3821,3823],{"className":874,"code":3822,"language":876,"meta":498,"style":498},"\u003Cinput\n    type=\"checkbox\"\n    class=\"_background-color:white _border-color:muted _checked:background-color:primary _checked:border-color:primary\"\n>\n",[422,3824,3825,3831,3843,3856],{"__ignoreMap":498},[502,3826,3827,3829],{"class":504,"line":505},[502,3828,883],{"class":512},[502,3830,1482],{"class":695},[502,3832,3833,3835,3837,3839,3841],{"class":504,"line":539},[502,3834,1487],{"class":599},[502,3836,606],{"class":512},[502,3838,533],{"class":512},[502,3840,1494],{"class":529},[502,3842,1497],{"class":512},[502,3844,3845,3847,3849,3851,3854],{"class":504,"line":568},[502,3846,1502],{"class":599},[502,3848,606],{"class":512},[502,3850,533],{"class":512},[502,3852,3853],{"class":529},"_background-color:white _border-color:muted _checked:background-color:primary _checked:border-color:primary",[502,3855,1497],{"class":512},[502,3857,3858],{"class":504,"line":590},[502,3859,904],{"class":512},[414,3861,3863],{"id":3862},"best-practices","Best Practices",[442,3865,3866,3872,3878,3887,3896],{},[445,3867,3868,3871],{},[448,3869,3870],{},"Combine valid/invalid with border colors",": Provide clear visual feedback for form validation states",[445,3873,3874,3877],{},[448,3875,3876],{},"Use disabled with opacity",": Reduce opacity for disabled elements to indicate they cannot be interacted with",[445,3879,3880,3883,3884,3886],{},[448,3881,3882],{},"Pair placeholder-shown with labels",": Create floating label patterns by combining ",[422,3885,2468],{}," with CSS transforms",[445,3888,3889,3892,3893,3895],{},[448,3890,3891],{},"Test autofill styling",": Browser autofill can override your styles; use the ",[422,3894,2507],{}," modifier to handle this",[445,3897,3898,3901,3902,3904],{},[448,3899,3900],{},"Use required with visual indicators",": Add visual cues for required fields using the ",[422,3903,1615],{}," modifier",[414,3906,3908],{"id":3907},"faq","FAQ",[3910,3911,3912,3932,3947,3966],"accordion",{},[3913,3914,478,3917,3919,3920,3923,3924,3927,3928,3931],"accordion-item",{"icon":3915,"label":3916},"i-lucide-circle-help","When should I use disabled vs aria-disabled?",[422,3918,424],{}," pseudo-class only works on native form elements. For custom components or ",[422,3921,3922],{},"\u003Cdiv>","-based controls, use ",[422,3925,3926],{},"useAriaDisabledModifier"," to target ",[422,3929,3930],{},"aria-disabled=\"true\""," instead.",[3913,3933,3935,3936,3939,3940,425,3943,3946],{"icon":3915,"label":3934},"Can I combine form state and pseudo-state modifiers?","Yes! Passing ",[422,3937,3938],{},"[disabled, hover]"," to a utility generates ",[422,3941,3942],{},"_disabled:property:value",[422,3944,3945],{},"_hover:property:value",", and combined variants. This lets you create nuanced interactions like hover effects that differ for enabled vs disabled states.",[3913,3948,3950,3951,3953,3954,3956,3957,3953,3960,3962,3963,3965],{"icon":3915,"label":3949},"What's the difference between read-only and readonly modifiers?","Both ",[422,3952,2518],{}," (generates modifier name ",[422,3955,2546],{},") and ",[422,3958,3959],{},"useReadonlyModifier",[422,3961,3062],{},") target the same CSS pseudo-class ",[422,3964,2551],{},". They are aliases for convenience based on your preferred naming convention.",[3913,3967,3969,3972,3973,3976,3977,3979],{"icon":3915,"label":3968},"How does placeholder-shown work with validation?",[422,3970,3971],{},":placeholder-shown"," matches when the input value is empty and the placeholder is visible. This is independent of validation states, so you can combine it with ",[422,3974,3975],{},":valid"," or ",[422,3978,432],{}," for more specific styling logic.",[3981,3982,3983],"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 pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}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":498,"searchDepth":539,"depth":539,"links":3985},[3986,3987,3988,3989,3990,3991,3992,3993,3994,3995,3996,3997,3998,3999,4002,4006,4007],{"id":416,"depth":539,"text":64},{"id":436,"depth":539,"text":437},{"id":472,"depth":539,"text":475},{"id":957,"depth":539,"text":960},{"id":996,"depth":539,"text":999},{"id":1545,"depth":539,"text":1548},{"id":1584,"depth":539,"text":1587},{"id":1623,"depth":539,"text":1626},{"id":1662,"depth":539,"text":1665},{"id":2109,"depth":539,"text":2112},{"id":2148,"depth":539,"text":2151},{"id":2476,"depth":539,"text":2479},{"id":2515,"depth":539,"text":2518},{"id":2554,"depth":539,"text":2557,"children":4000},[4001],{"id":2883,"depth":568,"text":2884},{"id":3073,"depth":539,"text":3074,"children":4003},[4004,4005],{"id":3077,"depth":568,"text":3078},{"id":3485,"depth":568,"text":3486},{"id":3862,"depth":539,"text":3863},{"id":3907,"depth":539,"text":3908},"Create form state modifiers for styling form elements based on their validation and interaction states with full type safety.","md",null,{},{"title":384,"icon":7},{"title":409,"description":4008},{"loc":385},"O7JXYuBMS9tC464LEVfJ4i-ntlKLdOI-6gTf8U45EHA",[4017,4019],{"title":380,"path":381,"stem":382,"description":4018,"icon":7,"children":-1},"Create directional modifiers for targeting elements based on text direction (RTL/LTR) with full type safety.",{"title":388,"path":389,"stem":390,"description":4020,"icon":7,"children":-1},"Create media and preference modifiers for adaptive styling based on user preferences like dark mode, reduced motion, and more.",1776621151601]