[{"data":1,"prerenderedAt":4264},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-color-picker":682,"-docs-theme-components-color-picker-surround":4259},{"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":444,"body":684,"description":4253,"extension":1288,"links":4254,"meta":4255,"navigation":4256,"path":445,"seo":4257,"stem":446,"__hash__":4258},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker.md",{"type":685,"value":686,"toc":4229},"minimark",[687,691,699,744,755,763,767,770,813,817,2802,2806,2818,2824,2855,2858,2865,2869,2881,2885,2890,3049,3052,3063,3066,3070,3073,3162,3355,3374,3377,3435,3439,3443,3446,3610,3614,3621,3772,3777,3780,3786,3798,3803,3910,3915,3955,3961,3980,3984,4020,4026,4040,4044,4080,4086,4102,4105,4110,4114,4163,4167,4225],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698],"p",{},"The ",[696,697,444],"strong",{}," is a control for choosing a color visually. It is composed of four recipe parts:",[700,701,702,716,728,736],"ul",{},[703,704,705,711,712,715],"li",{},[696,706,707],{},[708,709,710],"code",{},"useColorPickerRecipe()"," — the root container that lays the saturation\u002Fvalue selector next to the vertical hue track and owns the ",[708,713,714],{},"[data-disabled]"," state.",[703,717,718,723,724,727],{},[696,719,720],{},[708,721,722],{},"useColorPickerSelectorRecipe()"," — the square saturation\u002Fvalue (HSV) area, painted with a gradient driven by the ",[708,725,726],{},"--color-picker--hue"," variable.",[703,729,730,735],{},[696,731,732],{},[708,733,734],{},"useColorPickerTrackRecipe()"," — the narrow vertical hue slider, painted with the full 0–360° hue rainbow.",[703,737,738,743],{},[696,739,740],{},[708,741,742],{},"useColorPickerThumbRecipe()"," — the draggable handle, shared by both the selector and the track.",[692,745,746,747,750,751,754],{},"Unlike most recipes, the Color Picker has ",[696,748,749],{},"no color axis"," — it renders arbitrary user colors through CSS gradients and a hue variable, not theme tokens. The recipe is the ",[696,752,753],{},"styling shell",": it draws the surfaces and the handles, while dragging, color math, and format conversion stay in your application's JavaScript (or a headless library).",[692,756,757,758,762],{},"The Color Picker recipes integrate directly with the default ",[759,760,761],"a",{"href":171},"design tokens preset"," and generate type-safe utility classes at build time with zero runtime CSS.",[688,764,766],{"id":765},"why-use-the-color-picker-recipe","Why use the Color Picker recipe?",[692,768,769],{},"The Color Picker recipe helps you:",[700,771,772,778,787,801,807],{},[703,773,774,777],{},[696,775,776],{},"Ship the hard CSS for free",": The HSV gradient, the hue rainbow, the aligned square\u002Ftrack, and the contrast-ringed thumbs are all handled — you wire up the interaction.",[703,779,780,783,784,786],{},[696,781,782],{},"Render any color with one variable",": Set ",[708,785,726],{}," (0–360) and the selector gradient follows; position the thumbs to reflect the current selection.",[703,788,789,792,793,796,797,800],{},[696,790,791],{},"Scale consistently",": Five sizes from ",[708,794,795],{},"xs"," to ",[708,798,799],{},"xl"," keep the selector and track in proportion, with a fixed-size thumb that stays easy to grab.",[703,802,803,806],{},[696,804,805],{},"Customize without forking",": Override base styles, default variants, or filter out sizes you don't need — all through the options API.",[703,808,809,812],{},[696,810,811],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid size values at compile time.",[688,814,816],{"id":815},"usage","Usage",[818,819,821,826,833,1167,1171,1177,2793,2797],"steps",{"level":820},"4",[822,823,825],"h4",{"id":824},"register-the-recipes","Register the recipes",[692,827,828,829,832],{},"Add the Color Picker recipes to a local Styleframe instance. The global ",[708,830,831],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[834,835,837,1060],"code-tree",{"default-value":836},"src\u002Fcomponents\u002Fcolor-picker.styleframe.ts",[838,839,844],"pre",{"className":840,"code":841,"filename":836,"language":842,"meta":843,"style":843},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport {\n    useColorPickerRecipe,\n    useColorPickerSelectorRecipe,\n    useColorPickerTrackRecipe,\n    useColorPickerThumbRecipe,\n} from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst colorPicker = useColorPickerRecipe(s);\nconst colorPickerSelector = useColorPickerSelectorRecipe(s);\nconst colorPickerTrack = useColorPickerTrackRecipe(s);\nconst colorPickerThumb = useColorPickerThumbRecipe(s);\n\nexport default s;\n","ts","",[708,845,846,882,890,899,907,915,923,940,946,967,972,990,1007,1024,1041,1046],{"__ignoreMap":843},[847,848,851,855,859,863,866,869,872,876,879],"span",{"class":849,"line":850},"line",1,[847,852,854],{"class":853},"s7zQu","import",[847,856,858],{"class":857},"sMK4o"," {",[847,860,862],{"class":861},"sTEyZ"," styleframe",[847,864,865],{"class":857}," }",[847,867,868],{"class":853}," from",[847,870,871],{"class":857}," '",[847,873,875],{"class":874},"sfazB","virtual:styleframe",[847,877,878],{"class":857},"'",[847,880,881],{"class":857},";\n",[847,883,885,887],{"class":849,"line":884},2,[847,886,854],{"class":853},[847,888,889],{"class":857}," {\n",[847,891,893,896],{"class":849,"line":892},3,[847,894,895],{"class":861},"    useColorPickerRecipe",[847,897,898],{"class":857},",\n",[847,900,902,905],{"class":849,"line":901},4,[847,903,904],{"class":861},"    useColorPickerSelectorRecipe",[847,906,898],{"class":857},[847,908,910,913],{"class":849,"line":909},5,[847,911,912],{"class":861},"    useColorPickerTrackRecipe",[847,914,898],{"class":857},[847,916,918,921],{"class":849,"line":917},6,[847,919,920],{"class":861},"    useColorPickerThumbRecipe",[847,922,898],{"class":857},[847,924,926,929,931,933,936,938],{"class":849,"line":925},7,[847,927,928],{"class":857},"}",[847,930,868],{"class":853},[847,932,871],{"class":857},[847,934,935],{"class":874},"@styleframe\u002Ftheme",[847,937,878],{"class":857},[847,939,881],{"class":857},[847,941,943],{"class":849,"line":942},8,[847,944,945],{"emptyLinePlaceholder":223},"\n",[847,947,949,953,956,959,962,965],{"class":849,"line":948},9,[847,950,952],{"class":951},"spNyl","const",[847,954,955],{"class":861}," s ",[847,957,958],{"class":857},"=",[847,960,862],{"class":961},"s2Zo4",[847,963,964],{"class":861},"()",[847,966,881],{"class":857},[847,968,970],{"class":849,"line":969},10,[847,971,945],{"emptyLinePlaceholder":223},[847,973,975,977,980,982,985,988],{"class":849,"line":974},11,[847,976,952],{"class":951},[847,978,979],{"class":861}," colorPicker ",[847,981,958],{"class":857},[847,983,984],{"class":961}," useColorPickerRecipe",[847,986,987],{"class":861},"(s)",[847,989,881],{"class":857},[847,991,993,995,998,1000,1003,1005],{"class":849,"line":992},12,[847,994,952],{"class":951},[847,996,997],{"class":861}," colorPickerSelector ",[847,999,958],{"class":857},[847,1001,1002],{"class":961}," useColorPickerSelectorRecipe",[847,1004,987],{"class":861},[847,1006,881],{"class":857},[847,1008,1010,1012,1015,1017,1020,1022],{"class":849,"line":1009},13,[847,1011,952],{"class":951},[847,1013,1014],{"class":861}," colorPickerTrack ",[847,1016,958],{"class":857},[847,1018,1019],{"class":961}," useColorPickerTrackRecipe",[847,1021,987],{"class":861},[847,1023,881],{"class":857},[847,1025,1027,1029,1032,1034,1037,1039],{"class":849,"line":1026},14,[847,1028,952],{"class":951},[847,1030,1031],{"class":861}," colorPickerThumb ",[847,1033,958],{"class":857},[847,1035,1036],{"class":961}," useColorPickerThumbRecipe",[847,1038,987],{"class":861},[847,1040,881],{"class":857},[847,1042,1044],{"class":849,"line":1043},15,[847,1045,945],{"emptyLinePlaceholder":223},[847,1047,1049,1052,1055,1058],{"class":849,"line":1048},16,[847,1050,1051],{"class":853},"export",[847,1053,1054],{"class":853}," default",[847,1056,1057],{"class":861}," s",[847,1059,881],{"class":857},[838,1061,1063],{"className":840,"code":1062,"filename":831,"language":842,"meta":843,"style":843},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[708,1064,1065,1086,1113,1117,1131,1135,1144,1153,1157],{"__ignoreMap":843},[847,1066,1067,1069,1071,1073,1075,1077,1079,1082,1084],{"class":849,"line":850},[847,1068,854],{"class":853},[847,1070,858],{"class":857},[847,1072,862],{"class":861},[847,1074,865],{"class":857},[847,1076,868],{"class":853},[847,1078,871],{"class":857},[847,1080,1081],{"class":874},"styleframe",[847,1083,878],{"class":857},[847,1085,881],{"class":857},[847,1087,1088,1090,1092,1095,1098,1101,1103,1105,1107,1109,1111],{"class":849,"line":884},[847,1089,854],{"class":853},[847,1091,858],{"class":857},[847,1093,1094],{"class":861}," useDesignTokensPreset",[847,1096,1097],{"class":857},",",[847,1099,1100],{"class":861}," useUtilitiesPreset",[847,1102,865],{"class":857},[847,1104,868],{"class":853},[847,1106,871],{"class":857},[847,1108,935],{"class":874},[847,1110,878],{"class":857},[847,1112,881],{"class":857},[847,1114,1115],{"class":849,"line":892},[847,1116,945],{"emptyLinePlaceholder":223},[847,1118,1119,1121,1123,1125,1127,1129],{"class":849,"line":901},[847,1120,952],{"class":951},[847,1122,955],{"class":861},[847,1124,958],{"class":857},[847,1126,862],{"class":961},[847,1128,964],{"class":861},[847,1130,881],{"class":857},[847,1132,1133],{"class":849,"line":909},[847,1134,945],{"emptyLinePlaceholder":223},[847,1136,1137,1140,1142],{"class":849,"line":917},[847,1138,1139],{"class":961},"useDesignTokensPreset",[847,1141,987],{"class":861},[847,1143,881],{"class":857},[847,1145,1146,1149,1151],{"class":849,"line":925},[847,1147,1148],{"class":961},"useUtilitiesPreset",[847,1150,987],{"class":861},[847,1152,881],{"class":857},[847,1154,1155],{"class":849,"line":942},[847,1156,945],{"emptyLinePlaceholder":223},[847,1158,1159,1161,1163,1165],{"class":849,"line":948},[847,1160,1051],{"class":853},[847,1162,1054],{"class":853},[847,1164,1057],{"class":861},[847,1166,881],{"class":857},[822,1168,1170],{"id":1169},"build-the-component","Build the component",[692,1172,1173,1174,1176],{},"Import the runtime functions from the virtual module. Set the current hue on the root via the ",[708,1175,726],{}," custom property, and position each thumb to reflect the selection — those two inputs are runtime data, so they are applied inline and driven by your drag handlers:",[1178,1179,1180,1756,2397],"framework-switcher",{},[1181,1182,1183],"template",{"v-slot:vue":843},[838,1184,1189],{"className":1185,"code":1186,"filename":1187,"language":1188,"meta":843,"style":843},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport {\n    colorPicker,\n    colorPickerSelector,\n    colorPickerTrack,\n    colorPickerThumb,\n} from \"virtual:styleframe\";\n\nconst {\n    size = \"md\",\n    hue = 0,\n    saturation = 1,\n    value = 1,\n    disabled = false,\n} = defineProps\u003C{\n    size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n    hue?: number; \u002F\u002F 0–360\n    saturation?: number; \u002F\u002F 0–1\n    value?: number; \u002F\u002F 0–1\n    disabled?: boolean;\n}>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv\n        :class=\"colorPicker({ size })\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        :style=\"{ '--color-picker--hue': hue }\"\n        role=\"group\"\n        aria-label=\"Color picker\"\n    >\n        \u003Cdiv :class=\"colorPickerSelector({ size })\">\n            \u003Cdiv\n                :class=\"colorPickerThumb()\"\n                :style=\"{ left: `${saturation * 100}%`, top: `${(1 - value) * 100}%`, transform: 'translate(-50%, -50%)' }\"\n            \u002F>\n        \u003C\u002Fdiv>\n        \u003Cdiv :class=\"colorPickerTrack({ size })\">\n            \u003Cdiv\n                :class=\"colorPickerThumb()\"\n                :style=\"{ left: '50%', top: `${(hue \u002F 360) * 100}%`, transform: 'translate(-50%, -50%)' }\"\n            \u002F>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FColorPicker.vue","vue",[708,1190,1191,1218,1224,1231,1238,1245,1252,1267,1271,1277,1293,1306,1318,1329,1342,1355,1406,1425,1440,1454,1467,1477,1487,1492,1501,1510,1526,1541,1556,1571,1586,1592,1615,1623,1638,1653,1659,1669,1689,1696,1709,1723,1728,1737,1747],{"__ignoreMap":843},[847,1192,1193,1196,1200,1203,1206,1208,1211,1213,1215],{"class":849,"line":850},[847,1194,1195],{"class":857},"\u003C",[847,1197,1199],{"class":1198},"swJcz","script",[847,1201,1202],{"class":951}," setup",[847,1204,1205],{"class":951}," lang",[847,1207,958],{"class":857},[847,1209,1210],{"class":857},"\"",[847,1212,842],{"class":874},[847,1214,1210],{"class":857},[847,1216,1217],{"class":857},">\n",[847,1219,1220,1222],{"class":849,"line":884},[847,1221,854],{"class":853},[847,1223,889],{"class":857},[847,1225,1226,1229],{"class":849,"line":892},[847,1227,1228],{"class":861},"    colorPicker",[847,1230,898],{"class":857},[847,1232,1233,1236],{"class":849,"line":901},[847,1234,1235],{"class":861},"    colorPickerSelector",[847,1237,898],{"class":857},[847,1239,1240,1243],{"class":849,"line":909},[847,1241,1242],{"class":861},"    colorPickerTrack",[847,1244,898],{"class":857},[847,1246,1247,1250],{"class":849,"line":917},[847,1248,1249],{"class":861},"    colorPickerThumb",[847,1251,898],{"class":857},[847,1253,1254,1256,1258,1261,1263,1265],{"class":849,"line":925},[847,1255,928],{"class":857},[847,1257,868],{"class":853},[847,1259,1260],{"class":857}," \"",[847,1262,875],{"class":874},[847,1264,1210],{"class":857},[847,1266,881],{"class":857},[847,1268,1269],{"class":849,"line":942},[847,1270,945],{"emptyLinePlaceholder":223},[847,1272,1273,1275],{"class":849,"line":948},[847,1274,952],{"class":951},[847,1276,889],{"class":857},[847,1278,1279,1282,1284,1286,1289,1291],{"class":849,"line":969},[847,1280,1281],{"class":861},"    size ",[847,1283,958],{"class":857},[847,1285,1260],{"class":857},[847,1287,1288],{"class":874},"md",[847,1290,1210],{"class":857},[847,1292,898],{"class":857},[847,1294,1295,1298,1300,1304],{"class":849,"line":974},[847,1296,1297],{"class":861},"    hue ",[847,1299,958],{"class":857},[847,1301,1303],{"class":1302},"sbssI"," 0",[847,1305,898],{"class":857},[847,1307,1308,1311,1313,1316],{"class":849,"line":992},[847,1309,1310],{"class":861},"    saturation ",[847,1312,958],{"class":857},[847,1314,1315],{"class":1302}," 1",[847,1317,898],{"class":857},[847,1319,1320,1323,1325,1327],{"class":849,"line":1009},[847,1321,1322],{"class":861},"    value ",[847,1324,958],{"class":857},[847,1326,1315],{"class":1302},[847,1328,898],{"class":857},[847,1330,1331,1334,1336,1340],{"class":849,"line":1026},[847,1332,1333],{"class":861},"    disabled ",[847,1335,958],{"class":857},[847,1337,1339],{"class":1338},"sfNiH"," false",[847,1341,898],{"class":857},[847,1343,1344,1346,1349,1352],{"class":849,"line":1043},[847,1345,928],{"class":857},[847,1347,1348],{"class":857}," =",[847,1350,1351],{"class":961}," defineProps",[847,1353,1354],{"class":857},"\u003C{\n",[847,1356,1357,1360,1363,1365,1367,1369,1372,1374,1377,1379,1381,1383,1385,1387,1389,1391,1394,1396,1398,1400,1402,1404],{"class":849,"line":1048},[847,1358,1359],{"class":1198},"    size",[847,1361,1362],{"class":857},"?:",[847,1364,1260],{"class":857},[847,1366,795],{"class":874},[847,1368,1210],{"class":857},[847,1370,1371],{"class":857}," |",[847,1373,1260],{"class":857},[847,1375,1376],{"class":874},"sm",[847,1378,1210],{"class":857},[847,1380,1371],{"class":857},[847,1382,1260],{"class":857},[847,1384,1288],{"class":874},[847,1386,1210],{"class":857},[847,1388,1371],{"class":857},[847,1390,1260],{"class":857},[847,1392,1393],{"class":874},"lg",[847,1395,1210],{"class":857},[847,1397,1371],{"class":857},[847,1399,1260],{"class":857},[847,1401,799],{"class":874},[847,1403,1210],{"class":857},[847,1405,881],{"class":857},[847,1407,1409,1412,1414,1418,1421],{"class":849,"line":1408},17,[847,1410,1411],{"class":1198},"    hue",[847,1413,1362],{"class":857},[847,1415,1417],{"class":1416},"sBMFI"," number",[847,1419,1420],{"class":857},";",[847,1422,1424],{"class":1423},"sHwdD"," \u002F\u002F 0–360\n",[847,1426,1428,1431,1433,1435,1437],{"class":849,"line":1427},18,[847,1429,1430],{"class":1198},"    saturation",[847,1432,1362],{"class":857},[847,1434,1417],{"class":1416},[847,1436,1420],{"class":857},[847,1438,1439],{"class":1423}," \u002F\u002F 0–1\n",[847,1441,1443,1446,1448,1450,1452],{"class":849,"line":1442},19,[847,1444,1445],{"class":1198},"    value",[847,1447,1362],{"class":857},[847,1449,1417],{"class":1416},[847,1451,1420],{"class":857},[847,1453,1439],{"class":1423},[847,1455,1457,1460,1462,1465],{"class":849,"line":1456},20,[847,1458,1459],{"class":1198},"    disabled",[847,1461,1362],{"class":857},[847,1463,1464],{"class":1416}," boolean",[847,1466,881],{"class":857},[847,1468,1470,1473,1475],{"class":849,"line":1469},21,[847,1471,1472],{"class":857},"}>",[847,1474,964],{"class":861},[847,1476,881],{"class":857},[847,1478,1480,1483,1485],{"class":849,"line":1479},22,[847,1481,1482],{"class":857},"\u003C\u002F",[847,1484,1199],{"class":1198},[847,1486,1217],{"class":857},[847,1488,1490],{"class":849,"line":1489},23,[847,1491,945],{"emptyLinePlaceholder":223},[847,1493,1495,1497,1499],{"class":849,"line":1494},24,[847,1496,1195],{"class":857},[847,1498,1181],{"class":1198},[847,1500,1217],{"class":857},[847,1502,1504,1507],{"class":849,"line":1503},25,[847,1505,1506],{"class":857},"    \u003C",[847,1508,1509],{"class":1198},"div\n",[847,1511,1513,1516,1518,1520,1523],{"class":849,"line":1512},26,[847,1514,1515],{"class":951},"        :class",[847,1517,958],{"class":857},[847,1519,1210],{"class":857},[847,1521,1522],{"class":874},"colorPicker({ size })",[847,1524,1525],{"class":857},"\"\n",[847,1527,1529,1532,1534,1536,1539],{"class":849,"line":1528},27,[847,1530,1531],{"class":951},"        :data-disabled",[847,1533,958],{"class":857},[847,1535,1210],{"class":857},[847,1537,1538],{"class":874},"disabled ? '' : undefined",[847,1540,1525],{"class":857},[847,1542,1544,1547,1549,1551,1554],{"class":849,"line":1543},28,[847,1545,1546],{"class":951},"        :style",[847,1548,958],{"class":857},[847,1550,1210],{"class":857},[847,1552,1553],{"class":874},"{ '--color-picker--hue': hue }",[847,1555,1525],{"class":857},[847,1557,1559,1562,1564,1566,1569],{"class":849,"line":1558},29,[847,1560,1561],{"class":951},"        role",[847,1563,958],{"class":857},[847,1565,1210],{"class":857},[847,1567,1568],{"class":874},"group",[847,1570,1525],{"class":857},[847,1572,1574,1577,1579,1581,1584],{"class":849,"line":1573},30,[847,1575,1576],{"class":951},"        aria-label",[847,1578,958],{"class":857},[847,1580,1210],{"class":857},[847,1582,1583],{"class":874},"Color picker",[847,1585,1525],{"class":857},[847,1587,1589],{"class":849,"line":1588},31,[847,1590,1591],{"class":857},"    >\n",[847,1593,1595,1598,1601,1604,1606,1608,1611,1613],{"class":849,"line":1594},32,[847,1596,1597],{"class":857},"        \u003C",[847,1599,1600],{"class":1198},"div",[847,1602,1603],{"class":951}," :class",[847,1605,958],{"class":857},[847,1607,1210],{"class":857},[847,1609,1610],{"class":874},"colorPickerSelector({ size })",[847,1612,1210],{"class":857},[847,1614,1217],{"class":857},[847,1616,1618,1621],{"class":849,"line":1617},33,[847,1619,1620],{"class":857},"            \u003C",[847,1622,1509],{"class":1198},[847,1624,1626,1629,1631,1633,1636],{"class":849,"line":1625},34,[847,1627,1628],{"class":951},"                :class",[847,1630,958],{"class":857},[847,1632,1210],{"class":857},[847,1634,1635],{"class":874},"colorPickerThumb()",[847,1637,1525],{"class":857},[847,1639,1641,1644,1646,1648,1651],{"class":849,"line":1640},35,[847,1642,1643],{"class":951},"                :style",[847,1645,958],{"class":857},[847,1647,1210],{"class":857},[847,1649,1650],{"class":874},"{ left: `${saturation * 100}%`, top: `${(1 - value) * 100}%`, transform: 'translate(-50%, -50%)' }",[847,1652,1525],{"class":857},[847,1654,1656],{"class":849,"line":1655},36,[847,1657,1658],{"class":857},"            \u002F>\n",[847,1660,1662,1665,1667],{"class":849,"line":1661},37,[847,1663,1664],{"class":857},"        \u003C\u002F",[847,1666,1600],{"class":1198},[847,1668,1217],{"class":857},[847,1670,1672,1674,1676,1678,1680,1682,1685,1687],{"class":849,"line":1671},38,[847,1673,1597],{"class":857},[847,1675,1600],{"class":1198},[847,1677,1603],{"class":951},[847,1679,958],{"class":857},[847,1681,1210],{"class":857},[847,1683,1684],{"class":874},"colorPickerTrack({ size })",[847,1686,1210],{"class":857},[847,1688,1217],{"class":857},[847,1690,1692,1694],{"class":849,"line":1691},39,[847,1693,1620],{"class":857},[847,1695,1509],{"class":1198},[847,1697,1699,1701,1703,1705,1707],{"class":849,"line":1698},40,[847,1700,1628],{"class":951},[847,1702,958],{"class":857},[847,1704,1210],{"class":857},[847,1706,1635],{"class":874},[847,1708,1525],{"class":857},[847,1710,1712,1714,1716,1718,1721],{"class":849,"line":1711},41,[847,1713,1643],{"class":951},[847,1715,958],{"class":857},[847,1717,1210],{"class":857},[847,1719,1720],{"class":874},"{ left: '50%', top: `${(hue \u002F 360) * 100}%`, transform: 'translate(-50%, -50%)' }",[847,1722,1525],{"class":857},[847,1724,1726],{"class":849,"line":1725},42,[847,1727,1658],{"class":857},[847,1729,1731,1733,1735],{"class":849,"line":1730},43,[847,1732,1664],{"class":857},[847,1734,1600],{"class":1198},[847,1736,1217],{"class":857},[847,1738,1740,1743,1745],{"class":849,"line":1739},44,[847,1741,1742],{"class":857},"    \u003C\u002F",[847,1744,1600],{"class":1198},[847,1746,1217],{"class":857},[847,1748,1750,1752,1754],{"class":849,"line":1749},45,[847,1751,1482],{"class":857},[847,1753,1181],{"class":1198},[847,1755,1217],{"class":857},[1181,1757,1758],{"v-slot:react":843},[838,1759,1762],{"className":840,"code":1760,"filename":1761,"language":842,"meta":843,"style":843},"import {\n    colorPicker,\n    colorPickerSelector,\n    colorPickerTrack,\n    colorPickerThumb,\n} from \"virtual:styleframe\";\n\ninterface ColorPickerProps {\n    size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n    hue?: number; \u002F\u002F 0–360\n    saturation?: number; \u002F\u002F 0–1\n    value?: number; \u002F\u002F 0–1\n    disabled?: boolean;\n}\n\nexport function ColorPicker({\n    size = \"md\",\n    hue = 0,\n    saturation = 1,\n    value = 1,\n    disabled = false,\n}: ColorPickerProps) {\n    return (\n        \u003Cdiv\n            className={colorPicker({ size })}\n            data-disabled={disabled ? \"\" : undefined}\n            style={{ \"--color-picker--hue\": hue } as React.CSSProperties}\n            role=\"group\"\n            aria-label=\"Color picker\"\n        >\n            \u003Cdiv className={colorPickerSelector({ size })}>\n                \u003Cdiv\n                    className={colorPickerThumb()}\n                    style={{ left: `${saturation * 100}%`, top: `${(1 - value) * 100}%`, transform: \"translate(-50%, -50%)\" }}\n                \u002F>\n            \u003C\u002Fdiv>\n            \u003Cdiv className={colorPickerTrack({ size })}>\n                \u003Cdiv\n                    className={colorPickerThumb()}\n                    style={{ left: \"50%\", top: `${(hue \u002F 360) * 100}%`, transform: \"translate(-50%, -50%)\" }}\n                \u002F>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n    );\n}\n","src\u002Fcomponents\u002FColorPicker.tsx",[708,1763,1764,1770,1776,1782,1788,1794,1808,1812,1822,1868,1880,1892,1904,1914,1919,1923,1936,1951,1961,1971,1981,1991,2003,2011,2017,2037,2062,2098,2111,2129,2134,2155,2162,2175,2256,2261,2270,2289,2295,2305,2366,2370,2378,2386,2393],{"__ignoreMap":843},[847,1765,1766,1768],{"class":849,"line":850},[847,1767,854],{"class":853},[847,1769,889],{"class":857},[847,1771,1772,1774],{"class":849,"line":884},[847,1773,1228],{"class":861},[847,1775,898],{"class":857},[847,1777,1778,1780],{"class":849,"line":892},[847,1779,1235],{"class":861},[847,1781,898],{"class":857},[847,1783,1784,1786],{"class":849,"line":901},[847,1785,1242],{"class":861},[847,1787,898],{"class":857},[847,1789,1790,1792],{"class":849,"line":909},[847,1791,1249],{"class":861},[847,1793,898],{"class":857},[847,1795,1796,1798,1800,1802,1804,1806],{"class":849,"line":917},[847,1797,928],{"class":857},[847,1799,868],{"class":853},[847,1801,1260],{"class":857},[847,1803,875],{"class":874},[847,1805,1210],{"class":857},[847,1807,881],{"class":857},[847,1809,1810],{"class":849,"line":925},[847,1811,945],{"emptyLinePlaceholder":223},[847,1813,1814,1817,1820],{"class":849,"line":942},[847,1815,1816],{"class":951},"interface",[847,1818,1819],{"class":1416}," ColorPickerProps",[847,1821,889],{"class":857},[847,1823,1824,1826,1828,1830,1832,1834,1836,1838,1840,1842,1844,1846,1848,1850,1852,1854,1856,1858,1860,1862,1864,1866],{"class":849,"line":948},[847,1825,1359],{"class":1198},[847,1827,1362],{"class":857},[847,1829,1260],{"class":857},[847,1831,795],{"class":874},[847,1833,1210],{"class":857},[847,1835,1371],{"class":857},[847,1837,1260],{"class":857},[847,1839,1376],{"class":874},[847,1841,1210],{"class":857},[847,1843,1371],{"class":857},[847,1845,1260],{"class":857},[847,1847,1288],{"class":874},[847,1849,1210],{"class":857},[847,1851,1371],{"class":857},[847,1853,1260],{"class":857},[847,1855,1393],{"class":874},[847,1857,1210],{"class":857},[847,1859,1371],{"class":857},[847,1861,1260],{"class":857},[847,1863,799],{"class":874},[847,1865,1210],{"class":857},[847,1867,881],{"class":857},[847,1869,1870,1872,1874,1876,1878],{"class":849,"line":969},[847,1871,1411],{"class":1198},[847,1873,1362],{"class":857},[847,1875,1417],{"class":1416},[847,1877,1420],{"class":857},[847,1879,1424],{"class":1423},[847,1881,1882,1884,1886,1888,1890],{"class":849,"line":974},[847,1883,1430],{"class":1198},[847,1885,1362],{"class":857},[847,1887,1417],{"class":1416},[847,1889,1420],{"class":857},[847,1891,1439],{"class":1423},[847,1893,1894,1896,1898,1900,1902],{"class":849,"line":992},[847,1895,1445],{"class":1198},[847,1897,1362],{"class":857},[847,1899,1417],{"class":1416},[847,1901,1420],{"class":857},[847,1903,1439],{"class":1423},[847,1905,1906,1908,1910,1912],{"class":849,"line":1009},[847,1907,1459],{"class":1198},[847,1909,1362],{"class":857},[847,1911,1464],{"class":1416},[847,1913,881],{"class":857},[847,1915,1916],{"class":849,"line":1026},[847,1917,1918],{"class":857},"}\n",[847,1920,1921],{"class":849,"line":1043},[847,1922,945],{"emptyLinePlaceholder":223},[847,1924,1925,1927,1930,1933],{"class":849,"line":1048},[847,1926,1051],{"class":853},[847,1928,1929],{"class":951}," function",[847,1931,1932],{"class":961}," ColorPicker",[847,1934,1935],{"class":857},"({\n",[847,1937,1938,1941,1943,1945,1947,1949],{"class":849,"line":1408},[847,1939,1359],{"class":1940},"sHdIc",[847,1942,1348],{"class":857},[847,1944,1260],{"class":857},[847,1946,1288],{"class":874},[847,1948,1210],{"class":857},[847,1950,898],{"class":857},[847,1952,1953,1955,1957,1959],{"class":849,"line":1427},[847,1954,1411],{"class":1940},[847,1956,1348],{"class":857},[847,1958,1303],{"class":1302},[847,1960,898],{"class":857},[847,1962,1963,1965,1967,1969],{"class":849,"line":1442},[847,1964,1430],{"class":1940},[847,1966,1348],{"class":857},[847,1968,1315],{"class":1302},[847,1970,898],{"class":857},[847,1972,1973,1975,1977,1979],{"class":849,"line":1456},[847,1974,1445],{"class":1940},[847,1976,1348],{"class":857},[847,1978,1315],{"class":1302},[847,1980,898],{"class":857},[847,1982,1983,1985,1987,1989],{"class":849,"line":1469},[847,1984,1459],{"class":1940},[847,1986,1348],{"class":857},[847,1988,1339],{"class":1338},[847,1990,898],{"class":857},[847,1992,1993,1996,1998,2001],{"class":849,"line":1479},[847,1994,1995],{"class":857},"}:",[847,1997,1819],{"class":1416},[847,1999,2000],{"class":857},")",[847,2002,889],{"class":857},[847,2004,2005,2008],{"class":849,"line":1489},[847,2006,2007],{"class":853},"    return",[847,2009,2010],{"class":1198}," (\n",[847,2012,2013,2015],{"class":849,"line":1494},[847,2014,1597],{"class":857},[847,2016,1509],{"class":1940},[847,2018,2019,2022,2025,2028,2031,2034],{"class":849,"line":1503},[847,2020,2021],{"class":861},"            className",[847,2023,2024],{"class":857},"={",[847,2026,2027],{"class":1198},"colorPicker",[847,2029,2030],{"class":857},"({",[847,2032,2033],{"class":1940}," size",[847,2035,2036],{"class":857}," })}\n",[847,2038,2039,2042,2045,2048,2050,2053,2056,2059],{"class":849,"line":1512},[847,2040,2041],{"class":861},"            data",[847,2043,2044],{"class":857},"-",[847,2046,2047],{"class":861},"disabled",[847,2049,2024],{"class":857},[847,2051,2052],{"class":1198},"disabled ? ",[847,2054,2055],{"class":857},"\"\"",[847,2057,2058],{"class":857}," :",[847,2060,2061],{"class":857}," undefined}\n",[847,2063,2064,2067,2070,2072,2074,2076,2079,2082,2084,2087,2090,2093,2096],{"class":849,"line":1528},[847,2065,2066],{"class":861},"            style",[847,2068,2069],{"class":857},"={{",[847,2071,1260],{"class":857},[847,2073,726],{"class":874},[847,2075,1210],{"class":857},[847,2077,2078],{"class":1198},": ",[847,2080,2081],{"class":861},"hue",[847,2083,865],{"class":857},[847,2085,2086],{"class":853}," as",[847,2088,2089],{"class":1416}," React",[847,2091,2092],{"class":857},".",[847,2094,2095],{"class":1416},"CSSProperties",[847,2097,1918],{"class":857},[847,2099,2100,2103,2105,2107,2109],{"class":849,"line":1543},[847,2101,2102],{"class":861},"            role",[847,2104,958],{"class":857},[847,2106,1210],{"class":857},[847,2108,1568],{"class":874},[847,2110,1525],{"class":857},[847,2112,2113,2116,2118,2121,2123,2125,2127],{"class":849,"line":1558},[847,2114,2115],{"class":861},"            aria",[847,2117,2044],{"class":857},[847,2119,2120],{"class":861},"label",[847,2122,958],{"class":857},[847,2124,1210],{"class":857},[847,2126,1583],{"class":874},[847,2128,1525],{"class":857},[847,2130,2131],{"class":849,"line":1573},[847,2132,2133],{"class":857},"        >\n",[847,2135,2136,2138,2140,2143,2145,2148,2150,2152],{"class":849,"line":1588},[847,2137,1620],{"class":857},[847,2139,1600],{"class":861},[847,2141,2142],{"class":861}," className",[847,2144,2024],{"class":857},[847,2146,2147],{"class":1198},"colorPickerSelector",[847,2149,2030],{"class":857},[847,2151,2033],{"class":1940},[847,2153,2154],{"class":857}," })}>\n",[847,2156,2157,2160],{"class":849,"line":1594},[847,2158,2159],{"class":857},"                \u003C",[847,2161,1509],{"class":1940},[847,2163,2164,2167,2169,2172],{"class":849,"line":1617},[847,2165,2166],{"class":861},"                    className",[847,2168,2024],{"class":857},[847,2170,2171],{"class":1198},"colorPickerThumb",[847,2173,2174],{"class":857},"()}\n",[847,2176,2177,2180,2182,2185,2188,2191,2194,2197,2200,2202,2205,2208,2210,2213,2215,2217,2220,2223,2226,2229,2231,2233,2235,2237,2239,2241,2244,2246,2248,2251,2253],{"class":849,"line":1625},[847,2178,2179],{"class":861},"                    style",[847,2181,2069],{"class":857},[847,2183,2184],{"class":1416}," left",[847,2186,2187],{"class":857},":",[847,2189,2190],{"class":857}," `${",[847,2192,2193],{"class":861},"saturation ",[847,2195,2196],{"class":857},"*",[847,2198,2199],{"class":1302}," 100",[847,2201,928],{"class":857},[847,2203,2204],{"class":874},"%",[847,2206,2207],{"class":857},"`",[847,2209,1097],{"class":857},[847,2211,2212],{"class":1416}," top",[847,2214,2187],{"class":857},[847,2216,2190],{"class":857},[847,2218,2219],{"class":861},"(",[847,2221,2222],{"class":1302},"1",[847,2224,2225],{"class":857}," -",[847,2227,2228],{"class":861}," value) ",[847,2230,2196],{"class":857},[847,2232,2199],{"class":1302},[847,2234,928],{"class":857},[847,2236,2204],{"class":874},[847,2238,2207],{"class":857},[847,2240,1097],{"class":857},[847,2242,2243],{"class":1416}," transform",[847,2245,2187],{"class":857},[847,2247,1260],{"class":857},[847,2249,2250],{"class":874},"translate(-50%, -50%)",[847,2252,1210],{"class":857},[847,2254,2255],{"class":857}," }}\n",[847,2257,2258],{"class":849,"line":1640},[847,2259,2260],{"class":857},"                \u002F>\n",[847,2262,2263,2266,2268],{"class":849,"line":1655},[847,2264,2265],{"class":857},"            \u003C\u002F",[847,2267,1600],{"class":861},[847,2269,1217],{"class":857},[847,2271,2272,2274,2276,2278,2280,2283,2285,2287],{"class":849,"line":1661},[847,2273,1620],{"class":857},[847,2275,1600],{"class":861},[847,2277,2142],{"class":861},[847,2279,2024],{"class":857},[847,2281,2282],{"class":1198},"colorPickerTrack",[847,2284,2030],{"class":857},[847,2286,2033],{"class":1940},[847,2288,2154],{"class":857},[847,2290,2291,2293],{"class":849,"line":1671},[847,2292,2159],{"class":857},[847,2294,1509],{"class":1940},[847,2296,2297,2299,2301,2303],{"class":849,"line":1691},[847,2298,2166],{"class":861},[847,2300,2024],{"class":857},[847,2302,2171],{"class":1198},[847,2304,2174],{"class":857},[847,2306,2307,2309,2311,2313,2315,2317,2320,2322,2324,2326,2328,2330,2333,2336,2339,2342,2344,2346,2348,2350,2352,2354,2356,2358,2360,2362,2364],{"class":849,"line":1698},[847,2308,2179],{"class":861},[847,2310,2069],{"class":857},[847,2312,2184],{"class":1416},[847,2314,2187],{"class":857},[847,2316,1260],{"class":857},[847,2318,2319],{"class":874},"50%",[847,2321,1210],{"class":857},[847,2323,1097],{"class":857},[847,2325,2212],{"class":1416},[847,2327,2187],{"class":857},[847,2329,2190],{"class":857},[847,2331,2332],{"class":861},"(hue ",[847,2334,2335],{"class":857},"\u002F",[847,2337,2338],{"class":1302}," 360",[847,2340,2341],{"class":861},") ",[847,2343,2196],{"class":857},[847,2345,2199],{"class":1302},[847,2347,928],{"class":857},[847,2349,2204],{"class":874},[847,2351,2207],{"class":857},[847,2353,1097],{"class":857},[847,2355,2243],{"class":1416},[847,2357,2187],{"class":857},[847,2359,1260],{"class":857},[847,2361,2250],{"class":874},[847,2363,1210],{"class":857},[847,2365,2255],{"class":857},[847,2367,2368],{"class":849,"line":1711},[847,2369,2260],{"class":857},[847,2371,2372,2374,2376],{"class":849,"line":1725},[847,2373,2265],{"class":857},[847,2375,1600],{"class":861},[847,2377,1217],{"class":857},[847,2379,2380,2382,2384],{"class":849,"line":1730},[847,2381,1664],{"class":857},[847,2383,1600],{"class":861},[847,2385,1217],{"class":857},[847,2387,2388,2391],{"class":849,"line":1739},[847,2389,2390],{"class":1198},"    )",[847,2392,881],{"class":857},[847,2394,2395],{"class":849,"line":1749},[847,2396,1918],{"class":857},[1181,2398,2399,2402,2601],{"v-slot:other":843},[692,2400,2401],{},"Each runtime returns a class string. Apply the result however your framework binds classes, and drive the hue variable and thumb offsets from your pointer handlers:",[838,2403,2406],{"className":840,"code":2404,"filename":2405,"language":842,"meta":843,"style":843},"import {\n    colorPicker,\n    colorPickerSelector,\n    colorPickerTrack,\n    colorPickerThumb,\n} from \"virtual:styleframe\";\n\nconst rootClasses = colorPicker({ size: \"md\" });\n\u002F\u002F → \"color-picker _display:flex _align-items:flex-start ...\"\n\nconst selectorClasses = colorPickerSelector({ size: \"md\" });\n\u002F\u002F → \"color-picker-selector _position:relative _border-radius:md ...\"\n\nconst trackClasses = colorPickerTrack({ size: \"md\" });\n\u002F\u002F → \"color-picker-track _position:relative _width:0.5 ...\"\n\nconst thumbClasses = colorPickerThumb();\n\u002F\u002F → \"color-picker-thumb _position:absolute _width:1 ...\"\n","src\u002Fcomponents\u002Fcolor-picker.ts",[708,2407,2408,2414,2420,2426,2432,2438,2452,2456,2489,2494,2498,2530,2535,2539,2571,2576,2580,2596],{"__ignoreMap":843},[847,2409,2410,2412],{"class":849,"line":850},[847,2411,854],{"class":853},[847,2413,889],{"class":857},[847,2415,2416,2418],{"class":849,"line":884},[847,2417,1228],{"class":861},[847,2419,898],{"class":857},[847,2421,2422,2424],{"class":849,"line":892},[847,2423,1235],{"class":861},[847,2425,898],{"class":857},[847,2427,2428,2430],{"class":849,"line":901},[847,2429,1242],{"class":861},[847,2431,898],{"class":857},[847,2433,2434,2436],{"class":849,"line":909},[847,2435,1249],{"class":861},[847,2437,898],{"class":857},[847,2439,2440,2442,2444,2446,2448,2450],{"class":849,"line":917},[847,2441,928],{"class":857},[847,2443,868],{"class":853},[847,2445,1260],{"class":857},[847,2447,875],{"class":874},[847,2449,1210],{"class":857},[847,2451,881],{"class":857},[847,2453,2454],{"class":849,"line":925},[847,2455,945],{"emptyLinePlaceholder":223},[847,2457,2458,2460,2463,2465,2468,2470,2473,2475,2477,2479,2481,2483,2485,2487],{"class":849,"line":942},[847,2459,952],{"class":951},[847,2461,2462],{"class":861}," rootClasses ",[847,2464,958],{"class":857},[847,2466,2467],{"class":961}," colorPicker",[847,2469,2219],{"class":861},[847,2471,2472],{"class":857},"{",[847,2474,2033],{"class":1198},[847,2476,2187],{"class":857},[847,2478,1260],{"class":857},[847,2480,1288],{"class":874},[847,2482,1210],{"class":857},[847,2484,865],{"class":857},[847,2486,2000],{"class":861},[847,2488,881],{"class":857},[847,2490,2491],{"class":849,"line":948},[847,2492,2493],{"class":1423},"\u002F\u002F → \"color-picker _display:flex _align-items:flex-start ...\"\n",[847,2495,2496],{"class":849,"line":969},[847,2497,945],{"emptyLinePlaceholder":223},[847,2499,2500,2502,2505,2507,2510,2512,2514,2516,2518,2520,2522,2524,2526,2528],{"class":849,"line":974},[847,2501,952],{"class":951},[847,2503,2504],{"class":861}," selectorClasses ",[847,2506,958],{"class":857},[847,2508,2509],{"class":961}," colorPickerSelector",[847,2511,2219],{"class":861},[847,2513,2472],{"class":857},[847,2515,2033],{"class":1198},[847,2517,2187],{"class":857},[847,2519,1260],{"class":857},[847,2521,1288],{"class":874},[847,2523,1210],{"class":857},[847,2525,865],{"class":857},[847,2527,2000],{"class":861},[847,2529,881],{"class":857},[847,2531,2532],{"class":849,"line":992},[847,2533,2534],{"class":1423},"\u002F\u002F → \"color-picker-selector _position:relative _border-radius:md ...\"\n",[847,2536,2537],{"class":849,"line":1009},[847,2538,945],{"emptyLinePlaceholder":223},[847,2540,2541,2543,2546,2548,2551,2553,2555,2557,2559,2561,2563,2565,2567,2569],{"class":849,"line":1026},[847,2542,952],{"class":951},[847,2544,2545],{"class":861}," trackClasses ",[847,2547,958],{"class":857},[847,2549,2550],{"class":961}," colorPickerTrack",[847,2552,2219],{"class":861},[847,2554,2472],{"class":857},[847,2556,2033],{"class":1198},[847,2558,2187],{"class":857},[847,2560,1260],{"class":857},[847,2562,1288],{"class":874},[847,2564,1210],{"class":857},[847,2566,865],{"class":857},[847,2568,2000],{"class":861},[847,2570,881],{"class":857},[847,2572,2573],{"class":849,"line":1043},[847,2574,2575],{"class":1423},"\u002F\u002F → \"color-picker-track _position:relative _width:0.5 ...\"\n",[847,2577,2578],{"class":849,"line":1048},[847,2579,945],{"emptyLinePlaceholder":223},[847,2581,2582,2584,2587,2589,2592,2594],{"class":849,"line":1408},[847,2583,952],{"class":951},[847,2585,2586],{"class":861}," thumbClasses ",[847,2588,958],{"class":857},[847,2590,2591],{"class":961}," colorPickerThumb",[847,2593,964],{"class":861},[847,2595,881],{"class":857},[847,2597,2598],{"class":849,"line":1427},[847,2599,2600],{"class":1423},"\u002F\u002F → \"color-picker-thumb _position:absolute _width:1 ...\"\n",[838,2602,2607],{"className":2603,"code":2604,"filename":2605,"language":2606,"meta":843,"style":843},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"color-picker ...\" role=\"group\" aria-label=\"Color picker\" style=\"--color-picker--hue: 217\">\n    \u003Cdiv class=\"color-picker-selector ...\">\n        \u003Cdiv class=\"color-picker-thumb ...\" style=\"left: 80%; top: 20%; transform: translate(-50%, -50%)\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"color-picker-track ...\">\n        \u003Cdiv class=\"color-picker-thumb ...\" style=\"left: 50%; top: 60%; transform: translate(-50%, -50%)\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","src\u002Fcomponents\u002Fcolor-picker.html","html",[708,2608,2609,2663,2682,2717,2725,2744,2777,2785],{"__ignoreMap":843},[847,2610,2611,2613,2615,2618,2620,2622,2625,2627,2630,2632,2634,2636,2638,2641,2643,2645,2647,2649,2652,2654,2656,2659,2661],{"class":849,"line":850},[847,2612,1195],{"class":857},[847,2614,1600],{"class":1198},[847,2616,2617],{"class":951}," class",[847,2619,958],{"class":857},[847,2621,1210],{"class":857},[847,2623,2624],{"class":874},"color-picker ...",[847,2626,1210],{"class":857},[847,2628,2629],{"class":951}," role",[847,2631,958],{"class":857},[847,2633,1210],{"class":857},[847,2635,1568],{"class":874},[847,2637,1210],{"class":857},[847,2639,2640],{"class":951}," aria-label",[847,2642,958],{"class":857},[847,2644,1210],{"class":857},[847,2646,1583],{"class":874},[847,2648,1210],{"class":857},[847,2650,2651],{"class":951}," style",[847,2653,958],{"class":857},[847,2655,1210],{"class":857},[847,2657,2658],{"class":874},"--color-picker--hue: 217",[847,2660,1210],{"class":857},[847,2662,1217],{"class":857},[847,2664,2665,2667,2669,2671,2673,2675,2678,2680],{"class":849,"line":884},[847,2666,1506],{"class":857},[847,2668,1600],{"class":1198},[847,2670,2617],{"class":951},[847,2672,958],{"class":857},[847,2674,1210],{"class":857},[847,2676,2677],{"class":874},"color-picker-selector ...",[847,2679,1210],{"class":857},[847,2681,1217],{"class":857},[847,2683,2684,2686,2688,2690,2692,2694,2697,2699,2701,2703,2705,2708,2710,2713,2715],{"class":849,"line":892},[847,2685,1597],{"class":857},[847,2687,1600],{"class":1198},[847,2689,2617],{"class":951},[847,2691,958],{"class":857},[847,2693,1210],{"class":857},[847,2695,2696],{"class":874},"color-picker-thumb ...",[847,2698,1210],{"class":857},[847,2700,2651],{"class":951},[847,2702,958],{"class":857},[847,2704,1210],{"class":857},[847,2706,2707],{"class":874},"left: 80%; top: 20%; transform: translate(-50%, -50%)",[847,2709,1210],{"class":857},[847,2711,2712],{"class":857},">\u003C\u002F",[847,2714,1600],{"class":1198},[847,2716,1217],{"class":857},[847,2718,2719,2721,2723],{"class":849,"line":901},[847,2720,1742],{"class":857},[847,2722,1600],{"class":1198},[847,2724,1217],{"class":857},[847,2726,2727,2729,2731,2733,2735,2737,2740,2742],{"class":849,"line":909},[847,2728,1506],{"class":857},[847,2730,1600],{"class":1198},[847,2732,2617],{"class":951},[847,2734,958],{"class":857},[847,2736,1210],{"class":857},[847,2738,2739],{"class":874},"color-picker-track ...",[847,2741,1210],{"class":857},[847,2743,1217],{"class":857},[847,2745,2746,2748,2750,2752,2754,2756,2758,2760,2762,2764,2766,2769,2771,2773,2775],{"class":849,"line":917},[847,2747,1597],{"class":857},[847,2749,1600],{"class":1198},[847,2751,2617],{"class":951},[847,2753,958],{"class":857},[847,2755,1210],{"class":857},[847,2757,2696],{"class":874},[847,2759,1210],{"class":857},[847,2761,2651],{"class":951},[847,2763,958],{"class":857},[847,2765,1210],{"class":857},[847,2767,2768],{"class":874},"left: 50%; top: 60%; transform: translate(-50%, -50%)",[847,2770,1210],{"class":857},[847,2772,2712],{"class":857},[847,2774,1600],{"class":1198},[847,2776,1217],{"class":857},[847,2778,2779,2781,2783],{"class":849,"line":925},[847,2780,1742],{"class":857},[847,2782,1600],{"class":1198},[847,2784,1217],{"class":857},[847,2786,2787,2789,2791],{"class":849,"line":942},[847,2788,1482],{"class":857},[847,2790,1600],{"class":1198},[847,2792,1217],{"class":857},[822,2794,2796],{"id":2795},"see-it-in-action","See it in action",[2798,2799],"story-preview",{"story":2800,":panel":2801},"theme-recipes-forms-color-picker--default","true",[688,2803,2805],{"id":2804},"selecting-a-color","Selecting a color",[692,2807,2808,2809,2813,2814,2817],{},"The picker exposes a single public input: the ",[696,2810,2811],{},[708,2812,726],{}," custom property (0–360, default ",[708,2815,2816],{},"0","). Set it on the root — it cascades to the selector, whose gradient repaints to the chosen hue. The hue track itself is a fixed rainbow, so it never changes.",[692,2819,694,2820,2823],{},[696,2821,2822],{},"thumb positions"," are the other half of the state, and they belong to you:",[700,2825,2826,2840],{},[703,2827,2828,2831,2832,2835,2836,2839],{},[696,2829,2830],{},"Selector thumb"," — ",[708,2833,2834],{},"left"," is the saturation (0–100%), ",[708,2837,2838],{},"top"," is the inverse of value\u002Fbrightness (0% = full brightness at the top).",[703,2841,2842,2831,2845,2847,2848,2851,2852,2854],{},[696,2843,2844],{},"Track thumb",[708,2846,2838],{}," is the hue as a fraction of 360 (e.g. hue ",[708,2849,2850],{},"180"," → ",[708,2853,2319],{},").",[692,2856,2857],{},"Because hue, saturation, and value are live data, they are applied inline and updated by your drag handlers — the recipe deliberately leaves positioning to the consumer. Pair it with your own pointer logic or a headless color library to compute the values.",[2859,2860,2861,2864],"note",{},[696,2862,2863],{},"Good to know:"," The selector's black\u002Fwhite gradient overlays and the track's rainbow are fixed color-model constants, so they are intentionally literal rather than themeable tokens — the math only works with real black, white, and a full-saturation hue.",[688,2866,2868],{"id":2867},"sizes","Sizes",[692,2870,2871,2872,796,2874,2876,2877,2880],{},"Five size variants from ",[708,2873,795],{},[708,2875,799],{}," scale the selector square, the hue track (both its height and its pill rail thickness), and the container gap together. The thumb stays a constant size so the handle is always comfortable to grab. Pass the same ",[708,2878,2879],{},"size"," to the root, selector, and track.",[2798,2882],{"story":2883,":height":2884},"theme-recipes-forms-color-picker--all-sizes","320",[2886,2887,2889],"h3",{"id":2888},"size-reference","Size Reference",[2891,2892,2893,2915],"table",{},[2894,2895,2896],"thead",{},[2897,2898,2899,2903,2906,2909,2912],"tr",{},[2900,2901,2902],"th",{},"Size",[2900,2904,2905],{},"Selector (square)",[2900,2907,2908],{},"Track height",[2900,2910,2911],{},"Track width (rail)",[2900,2913,2914],{},"Thumb",[2916,2917,2918,2947,2973,2999,3025],"tbody",{},[2897,2919,2920,2925,2931,2935,2941],{},[2921,2922,2923],"td",{},[708,2924,795],{},[2921,2926,2927,2930],{},[708,2928,2929],{},"@9.5"," (152px)",[2921,2932,2933],{},[708,2934,2929],{},[2921,2936,2937,2940],{},[708,2938,2939],{},"@0.25"," (4px)",[2921,2942,2943,2946],{},[708,2944,2945],{},"@1"," (16px)",[2897,2948,2949,2953,2959,2963,2969],{},[2921,2950,2951],{},[708,2952,1376],{},[2921,2954,2955,2958],{},[708,2956,2957],{},"@10"," (160px)",[2921,2960,2961],{},[708,2962,2957],{},[2921,2964,2965,2968],{},[708,2966,2967],{},"@0.375"," (6px)",[2921,2970,2971],{},[708,2972,2945],{},[2897,2974,2975,2979,2985,2989,2995],{},[2921,2976,2977],{},[708,2978,1288],{},[2921,2980,2981,2984],{},[708,2982,2983],{},"@10.5"," (168px)",[2921,2986,2987],{},[708,2988,2983],{},[2921,2990,2991,2994],{},[708,2992,2993],{},"@0.5"," (8px)",[2921,2996,2997],{},[708,2998,2945],{},[2897,3000,3001,3005,3011,3015,3021],{},[2921,3002,3003],{},[708,3004,1393],{},[2921,3006,3007,3010],{},[708,3008,3009],{},"@11"," (176px)",[2921,3012,3013],{},[708,3014,3009],{},[2921,3016,3017,3020],{},[708,3018,3019],{},"@0.75"," (12px)",[2921,3022,3023],{},[708,3024,2945],{},[2897,3026,3027,3031,3037,3041,3045],{},[2921,3028,3029],{},[708,3030,799],{},[2921,3032,3033,3036],{},[708,3034,3035],{},"@11.5"," (184px)",[2921,3038,3039],{},[708,3040,3035],{},[2921,3042,3043,2946],{},[708,3044,2945],{},[2921,3046,3047],{},[708,3048,2945],{},[688,3050,3051],{"id":2047},"Disabled",[692,3053,3054,3055,3058,3059,3062],{},"Signal a disabled picker with the ",[708,3056,3057],{},"data-disabled"," attribute on the root (the reka-ui convention). The whole control dims and every thumb shows a ",[708,3060,3061],{},"not-allowed"," cursor. The recipe styles the disabled appearance only — block the pointer interaction in your own handlers.",[2798,3064],{"story":3065,":height":2884},"theme-recipes-forms-color-picker--states",[688,3067,3069],{"id":3068},"anatomy","Anatomy",[692,3071,3072],{},"The Color Picker is composed of four independent recipes. The root lays out the selector and the track; a thumb is dropped into each:",[2891,3074,3075,3088],{},[2894,3076,3077],{},[2897,3078,3079,3082,3085],{},[2900,3080,3081],{},"Part",[2900,3083,3084],{},"Recipe",[2900,3086,3087],{},"Role",[2916,3089,3090,3110,3129,3146],{},[2897,3091,3092,3097,3101],{},[2921,3093,3094],{},[696,3095,3096],{},"Root",[2921,3098,3099],{},[708,3100,710],{},[2921,3102,694,3103,3106,3107,3109],{},[708,3104,3105],{},".color-picker"," flex container — lays out the selector and track and owns the ",[708,3108,714],{}," state",[2897,3111,3112,3117,3121],{},[2921,3113,3114],{},[696,3115,3116],{},"Selector",[2921,3118,3119],{},[708,3120,722],{},[2921,3122,694,3123,3126,3127],{},[708,3124,3125],{},".color-picker-selector"," HSV square — saturation\u002Fvalue gradient driven by ",[708,3128,726],{},[2897,3130,3131,3136,3140],{},[2921,3132,3133],{},[696,3134,3135],{},"Track",[2921,3137,3138],{},[708,3139,734],{},[2921,3141,694,3142,3145],{},[708,3143,3144],{},".color-picker-track"," hue slider — the fixed 0–360° rainbow",[2897,3147,3148,3152,3156],{},[2921,3149,3150],{},[696,3151,2914],{},[2921,3153,3154],{},[708,3155,742],{},[2921,3157,694,3158,3161],{},[708,3159,3160],{},".color-picker-thumb"," handle — a fixed-size circle with a white contrast ring; used in both the selector and the track",[838,3163,3165],{"className":2603,"code":3164,"language":2606,"meta":843,"style":843},"\u003Cdiv class=\"colorPicker(...)\" role=\"group\" aria-label=\"Color picker\" style=\"--color-picker--hue: 217\">\n    \u003C!-- Saturation \u002F value square -->\n    \u003Cdiv class=\"colorPickerSelector(...)\">\n        \u003Cdiv class=\"colorPickerThumb(...)\" style=\"left: 80%; top: 20%\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003C!-- Hue track -->\n    \u003Cdiv class=\"colorPickerTrack(...)\">\n        \u003Cdiv class=\"colorPickerThumb(...)\" style=\"top: 60%\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[708,3166,3167,3216,3221,3240,3274,3282,3287,3306,3339,3347],{"__ignoreMap":843},[847,3168,3169,3171,3173,3175,3177,3179,3182,3184,3186,3188,3190,3192,3194,3196,3198,3200,3202,3204,3206,3208,3210,3212,3214],{"class":849,"line":850},[847,3170,1195],{"class":857},[847,3172,1600],{"class":1198},[847,3174,2617],{"class":951},[847,3176,958],{"class":857},[847,3178,1210],{"class":857},[847,3180,3181],{"class":874},"colorPicker(...)",[847,3183,1210],{"class":857},[847,3185,2629],{"class":951},[847,3187,958],{"class":857},[847,3189,1210],{"class":857},[847,3191,1568],{"class":874},[847,3193,1210],{"class":857},[847,3195,2640],{"class":951},[847,3197,958],{"class":857},[847,3199,1210],{"class":857},[847,3201,1583],{"class":874},[847,3203,1210],{"class":857},[847,3205,2651],{"class":951},[847,3207,958],{"class":857},[847,3209,1210],{"class":857},[847,3211,2658],{"class":874},[847,3213,1210],{"class":857},[847,3215,1217],{"class":857},[847,3217,3218],{"class":849,"line":884},[847,3219,3220],{"class":1423},"    \u003C!-- Saturation \u002F value square -->\n",[847,3222,3223,3225,3227,3229,3231,3233,3236,3238],{"class":849,"line":892},[847,3224,1506],{"class":857},[847,3226,1600],{"class":1198},[847,3228,2617],{"class":951},[847,3230,958],{"class":857},[847,3232,1210],{"class":857},[847,3234,3235],{"class":874},"colorPickerSelector(...)",[847,3237,1210],{"class":857},[847,3239,1217],{"class":857},[847,3241,3242,3244,3246,3248,3250,3252,3255,3257,3259,3261,3263,3266,3268,3270,3272],{"class":849,"line":901},[847,3243,1597],{"class":857},[847,3245,1600],{"class":1198},[847,3247,2617],{"class":951},[847,3249,958],{"class":857},[847,3251,1210],{"class":857},[847,3253,3254],{"class":874},"colorPickerThumb(...)",[847,3256,1210],{"class":857},[847,3258,2651],{"class":951},[847,3260,958],{"class":857},[847,3262,1210],{"class":857},[847,3264,3265],{"class":874},"left: 80%; top: 20%",[847,3267,1210],{"class":857},[847,3269,2712],{"class":857},[847,3271,1600],{"class":1198},[847,3273,1217],{"class":857},[847,3275,3276,3278,3280],{"class":849,"line":909},[847,3277,1742],{"class":857},[847,3279,1600],{"class":1198},[847,3281,1217],{"class":857},[847,3283,3284],{"class":849,"line":917},[847,3285,3286],{"class":1423},"    \u003C!-- Hue track -->\n",[847,3288,3289,3291,3293,3295,3297,3299,3302,3304],{"class":849,"line":925},[847,3290,1506],{"class":857},[847,3292,1600],{"class":1198},[847,3294,2617],{"class":951},[847,3296,958],{"class":857},[847,3298,1210],{"class":857},[847,3300,3301],{"class":874},"colorPickerTrack(...)",[847,3303,1210],{"class":857},[847,3305,1217],{"class":857},[847,3307,3308,3310,3312,3314,3316,3318,3320,3322,3324,3326,3328,3331,3333,3335,3337],{"class":849,"line":942},[847,3309,1597],{"class":857},[847,3311,1600],{"class":1198},[847,3313,2617],{"class":951},[847,3315,958],{"class":857},[847,3317,1210],{"class":857},[847,3319,3254],{"class":874},[847,3321,1210],{"class":857},[847,3323,2651],{"class":951},[847,3325,958],{"class":857},[847,3327,1210],{"class":857},[847,3329,3330],{"class":874},"top: 60%",[847,3332,1210],{"class":857},[847,3334,2712],{"class":857},[847,3336,1600],{"class":1198},[847,3338,1217],{"class":857},[847,3340,3341,3343,3345],{"class":849,"line":948},[847,3342,1742],{"class":857},[847,3344,1600],{"class":1198},[847,3346,1217],{"class":857},[847,3348,3349,3351,3353],{"class":849,"line":969},[847,3350,1482],{"class":857},[847,3352,1600],{"class":1198},[847,3354,1217],{"class":857},[3356,3357,3358,3361,3362,3364,3365,3367,3368,3370,3371,3373],"tip",{},[696,3359,3360],{},"Pro tip:"," The thumb recipe is intentionally generic — the same ",[708,3363,3160],{}," is reused for both handles. Position it with ",[708,3366,2834],{}," \u002F ",[708,3369,2838],{}," and a ",[708,3372,2250],{}," to center it on the selection point.",[688,3375,568],{"id":3376},"accessibility",[700,3378,3379,3397,3407,3420,3426],{},[703,3380,3381,3384,3385,3388,3389,3392,3393,3396],{},[696,3382,3383],{},"Group and label the control."," Give the root ",[708,3386,3387],{},"role=\"group\""," and an ",[708,3390,3391],{},"aria-label"," (or ",[708,3394,3395],{},"aria-labelledby",") so assistive technology announces it as a color picker. The recipe styles the surfaces but does not manage the interaction — pair it with your own pointer logic or a headless library.",[703,3398,3399,3402,3403,3406],{},[696,3400,3401],{},"Expose the value in text."," Visual gradients are invisible to screen readers; render the selected color as text (hex or rgb) alongside the picker, or mirror it into a native ",[708,3404,3405],{},"\u003Cinput type=\"color\">"," for keyboard and assistive access.",[703,3408,3409,3412,3413,3415,3416,3419],{},[696,3410,3411],{},"Keep the thumbs decorative."," Mark each ",[708,3414,3160],{}," ",[708,3417,3418],{},"aria-hidden=\"true\""," — the meaningful value lives in your text field, not the handle.",[703,3421,3422,3425],{},[696,3423,3424],{},"Support keyboard input."," A pure drag surface is not keyboard-accessible on its own; provide arrow-key handling on a focusable element or a paired text input so the color can be set without a pointer.",[703,3427,3428,3431,3432,3434],{},[696,3429,3430],{},"Reflect the disabled state."," When you set ",[708,3433,3057],{},", also disable the paired inputs and skip your pointer handlers so the dimmed appearance matches real behavior.",[688,3436,3438],{"id":3437},"customization","Customization",[2886,3440,3442],{"id":3441},"overriding-defaults","Overriding Defaults",[692,3444,3445],{},"Each color-picker 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 what you want to change:",[838,3447,3449],{"className":840,"code":3448,"filename":836,"language":842,"meta":843,"style":843},"import { styleframe } from 'virtual:styleframe';\nimport { useColorPickerSelectorRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst colorPickerSelector = useColorPickerSelectorRecipe(s, {\n    base: {\n        borderRadius: '@border-radius.lg',\n    },\n    defaultVariants: {\n        size: 'lg',\n    },\n});\n\nexport default s;\n",[708,3450,3451,3471,3491,3495,3509,3513,3530,3539,3555,3560,3569,3584,3588,3596,3600],{"__ignoreMap":843},[847,3452,3453,3455,3457,3459,3461,3463,3465,3467,3469],{"class":849,"line":850},[847,3454,854],{"class":853},[847,3456,858],{"class":857},[847,3458,862],{"class":861},[847,3460,865],{"class":857},[847,3462,868],{"class":853},[847,3464,871],{"class":857},[847,3466,875],{"class":874},[847,3468,878],{"class":857},[847,3470,881],{"class":857},[847,3472,3473,3475,3477,3479,3481,3483,3485,3487,3489],{"class":849,"line":884},[847,3474,854],{"class":853},[847,3476,858],{"class":857},[847,3478,1002],{"class":861},[847,3480,865],{"class":857},[847,3482,868],{"class":853},[847,3484,871],{"class":857},[847,3486,935],{"class":874},[847,3488,878],{"class":857},[847,3490,881],{"class":857},[847,3492,3493],{"class":849,"line":892},[847,3494,945],{"emptyLinePlaceholder":223},[847,3496,3497,3499,3501,3503,3505,3507],{"class":849,"line":901},[847,3498,952],{"class":951},[847,3500,955],{"class":861},[847,3502,958],{"class":857},[847,3504,862],{"class":961},[847,3506,964],{"class":861},[847,3508,881],{"class":857},[847,3510,3511],{"class":849,"line":909},[847,3512,945],{"emptyLinePlaceholder":223},[847,3514,3515,3517,3519,3521,3523,3526,3528],{"class":849,"line":917},[847,3516,952],{"class":951},[847,3518,997],{"class":861},[847,3520,958],{"class":857},[847,3522,1002],{"class":961},[847,3524,3525],{"class":861},"(s",[847,3527,1097],{"class":857},[847,3529,889],{"class":857},[847,3531,3532,3535,3537],{"class":849,"line":925},[847,3533,3534],{"class":1198},"    base",[847,3536,2187],{"class":857},[847,3538,889],{"class":857},[847,3540,3541,3544,3546,3548,3551,3553],{"class":849,"line":942},[847,3542,3543],{"class":1198},"        borderRadius",[847,3545,2187],{"class":857},[847,3547,871],{"class":857},[847,3549,3550],{"class":874},"@border-radius.lg",[847,3552,878],{"class":857},[847,3554,898],{"class":857},[847,3556,3557],{"class":849,"line":948},[847,3558,3559],{"class":857},"    },\n",[847,3561,3562,3565,3567],{"class":849,"line":969},[847,3563,3564],{"class":1198},"    defaultVariants",[847,3566,2187],{"class":857},[847,3568,889],{"class":857},[847,3570,3571,3574,3576,3578,3580,3582],{"class":849,"line":974},[847,3572,3573],{"class":1198},"        size",[847,3575,2187],{"class":857},[847,3577,871],{"class":857},[847,3579,1393],{"class":874},[847,3581,878],{"class":857},[847,3583,898],{"class":857},[847,3585,3586],{"class":849,"line":992},[847,3587,3559],{"class":857},[847,3589,3590,3592,3594],{"class":849,"line":1009},[847,3591,928],{"class":857},[847,3593,2000],{"class":861},[847,3595,881],{"class":857},[847,3597,3598],{"class":849,"line":1026},[847,3599,945],{"emptyLinePlaceholder":223},[847,3601,3602,3604,3606,3608],{"class":849,"line":1043},[847,3603,1051],{"class":853},[847,3605,1054],{"class":853},[847,3607,1057],{"class":861},[847,3609,881],{"class":857},[2886,3611,3613],{"id":3612},"filtering-variants","Filtering Variants",[692,3615,3616,3617,3620],{},"If you only need a subset of the available sizes, use the ",[708,3618,3619],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[838,3622,3624],{"className":840,"code":3623,"filename":836,"language":842,"meta":843,"style":843},"import { styleframe } from 'virtual:styleframe';\nimport { useColorPickerRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate the md and lg sizes\nconst colorPicker = useColorPickerRecipe(s, {\n    filter: {\n        size: ['md', 'lg'],\n    },\n});\n\nexport default s;\n",[708,3625,3626,3646,3666,3670,3684,3688,3693,3709,3718,3746,3750,3758,3762],{"__ignoreMap":843},[847,3627,3628,3630,3632,3634,3636,3638,3640,3642,3644],{"class":849,"line":850},[847,3629,854],{"class":853},[847,3631,858],{"class":857},[847,3633,862],{"class":861},[847,3635,865],{"class":857},[847,3637,868],{"class":853},[847,3639,871],{"class":857},[847,3641,875],{"class":874},[847,3643,878],{"class":857},[847,3645,881],{"class":857},[847,3647,3648,3650,3652,3654,3656,3658,3660,3662,3664],{"class":849,"line":884},[847,3649,854],{"class":853},[847,3651,858],{"class":857},[847,3653,984],{"class":861},[847,3655,865],{"class":857},[847,3657,868],{"class":853},[847,3659,871],{"class":857},[847,3661,935],{"class":874},[847,3663,878],{"class":857},[847,3665,881],{"class":857},[847,3667,3668],{"class":849,"line":892},[847,3669,945],{"emptyLinePlaceholder":223},[847,3671,3672,3674,3676,3678,3680,3682],{"class":849,"line":901},[847,3673,952],{"class":951},[847,3675,955],{"class":861},[847,3677,958],{"class":857},[847,3679,862],{"class":961},[847,3681,964],{"class":861},[847,3683,881],{"class":857},[847,3685,3686],{"class":849,"line":909},[847,3687,945],{"emptyLinePlaceholder":223},[847,3689,3690],{"class":849,"line":917},[847,3691,3692],{"class":1423},"\u002F\u002F Only generate the md and lg sizes\n",[847,3694,3695,3697,3699,3701,3703,3705,3707],{"class":849,"line":925},[847,3696,952],{"class":951},[847,3698,979],{"class":861},[847,3700,958],{"class":857},[847,3702,984],{"class":961},[847,3704,3525],{"class":861},[847,3706,1097],{"class":857},[847,3708,889],{"class":857},[847,3710,3711,3714,3716],{"class":849,"line":942},[847,3712,3713],{"class":1198},"    filter",[847,3715,2187],{"class":857},[847,3717,889],{"class":857},[847,3719,3720,3722,3724,3727,3729,3731,3733,3735,3737,3739,3741,3744],{"class":849,"line":948},[847,3721,3573],{"class":1198},[847,3723,2187],{"class":857},[847,3725,3726],{"class":861}," [",[847,3728,878],{"class":857},[847,3730,1288],{"class":874},[847,3732,878],{"class":857},[847,3734,1097],{"class":857},[847,3736,871],{"class":857},[847,3738,1393],{"class":874},[847,3740,878],{"class":857},[847,3742,3743],{"class":861},"]",[847,3745,898],{"class":857},[847,3747,3748],{"class":849,"line":969},[847,3749,3559],{"class":857},[847,3751,3752,3754,3756],{"class":849,"line":974},[847,3753,928],{"class":857},[847,3755,2000],{"class":861},[847,3757,881],{"class":857},[847,3759,3760],{"class":849,"line":992},[847,3761,945],{"emptyLinePlaceholder":223},[847,3763,3764,3766,3768,3770],{"class":849,"line":1009},[847,3765,1051],{"class":853},[847,3767,1054],{"class":853},[847,3769,1057],{"class":861},[847,3771,881],{"class":857},[2859,3773,3774,3776],{},[696,3775,2863],{}," Filtering also adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[688,3778,73],{"id":3779},"api-reference",[2886,3781,3783],{"id":3782},"usecolorpickerrecipes-options",[708,3784,3785],{},"useColorPickerRecipe(s, options?)",[692,3787,3788,3789,3791,3792,3795,3796,2092],{},"Creates the root recipe — the ",[708,3790,3105],{}," flex container. Registers nested ",[708,3793,3794],{},".color-picker[data-disabled]"," selectors that dim the control and mark thumbs as ",[708,3797,3061],{},[692,3799,3800],{},[696,3801,3802],{},"Parameters:",[2891,3804,3805,3818],{},[2894,3806,3807],{},[2897,3808,3809,3812,3815],{},[2900,3810,3811],{},"Parameter",[2900,3813,3814],{},"Type",[2900,3816,3817],{},"Description",[2916,3819,3820,3835,3850,3865,3880,3895],{},[2897,3821,3822,3827,3832],{},[2921,3823,3824],{},[708,3825,3826],{},"s",[2921,3828,3829],{},[708,3830,3831],{},"Styleframe",[2921,3833,3834],{},"The Styleframe instance",[2897,3836,3837,3842,3847],{},[2921,3838,3839],{},[708,3840,3841],{},"options",[2921,3843,3844],{},[708,3845,3846],{},"DeepPartial\u003CRecipeConfig>",[2921,3848,3849],{},"Optional overrides for the recipe configuration",[2897,3851,3852,3857,3862],{},[2921,3853,3854],{},[708,3855,3856],{},"options.base",[2921,3858,3859],{},[708,3860,3861],{},"VariantDeclarationsBlock",[2921,3863,3864],{},"Custom base styles for the container",[2897,3866,3867,3872,3877],{},[2921,3868,3869],{},[708,3870,3871],{},"options.variants",[2921,3873,3874],{},[708,3875,3876],{},"Variants",[2921,3878,3879],{},"Custom variant definitions for the recipe",[2897,3881,3882,3887,3892],{},[2921,3883,3884],{},[708,3885,3886],{},"options.defaultVariants",[2921,3888,3889],{},[708,3890,3891],{},"Record\u003Ckeyof Variants, string>",[2921,3893,3894],{},"Default variant values for the recipe",[2897,3896,3897,3902,3907],{},[2921,3898,3899],{},[708,3900,3901],{},"options.filter",[2921,3903,3904],{},[708,3905,3906],{},"Record\u003Cstring, string[]>",[2921,3908,3909],{},"Limit which variant values are generated",[692,3911,3912],{},[696,3913,3914],{},"Variants:",[2891,3916,3917,3930],{},[2894,3918,3919],{},[2897,3920,3921,3924,3927],{},[2900,3922,3923],{},"Variant",[2900,3925,3926],{},"Options",[2900,3928,3929],{},"Default",[2916,3931,3932],{},[2897,3933,3934,3938,3951],{},[2921,3935,3936],{},[708,3937,2879],{},[2921,3939,3940,3942,3943,3942,3945,3942,3947,3942,3949],{},[708,3941,795],{},", ",[708,3944,1376],{},[708,3946,1288],{},[708,3948,1393],{},[708,3950,799],{},[2921,3952,3953],{},[708,3954,1288],{},[2886,3956,3958],{"id":3957},"usecolorpickerselectorrecipes-options",[708,3959,3960],{},"useColorPickerSelectorRecipe(s, options?)",[692,3962,3963,3964,3966,3967,3970,3971,3973,3974,3976,3977,2092],{},"Creates the selector recipe — the ",[708,3965,3125],{}," saturation\u002Fvalue square. Registers the ",[708,3968,3969],{},"color-picker.hue"," variable (",[708,3972,726],{},", default ",[708,3975,2816],{},") and paints the HSV gradient. Accepts the same parameters as ",[708,3978,3979],{},"useColorPickerRecipe",[692,3981,3982],{},[696,3983,3914],{},[2891,3985,3986,3996],{},[2894,3987,3988],{},[2897,3989,3990,3992,3994],{},[2900,3991,3923],{},[2900,3993,3926],{},[2900,3995,3929],{},[2916,3997,3998],{},[2897,3999,4000,4004,4016],{},[2921,4001,4002],{},[708,4003,2879],{},[2921,4005,4006,3942,4008,3942,4010,3942,4012,3942,4014],{},[708,4007,795],{},[708,4009,1376],{},[708,4011,1288],{},[708,4013,1393],{},[708,4015,799],{},[2921,4017,4018],{},[708,4019,1288],{},[2886,4021,4023],{"id":4022},"usecolorpickertrackrecipes-options",[708,4024,4025],{},"useColorPickerTrackRecipe(s, options?)",[692,4027,4028,4029,4031,4032,4034,4035,4037,4038,2092],{},"Creates the track recipe — the ",[708,4030,3144],{}," vertical hue slider, a pill-shaped rail modeled on the ",[759,4033,472],{"href":473}," track and filled with the rainbow. The ",[708,4036,2879],{}," axis scales both the rail thickness (width) and the height to match the selector. Paints the fixed 0–360° hue rainbow. Accepts the same parameters as ",[708,4039,3979],{},[692,4041,4042],{},[696,4043,3914],{},[2891,4045,4046,4056],{},[2894,4047,4048],{},[2897,4049,4050,4052,4054],{},[2900,4051,3923],{},[2900,4053,3926],{},[2900,4055,3929],{},[2916,4057,4058],{},[2897,4059,4060,4064,4076],{},[2921,4061,4062],{},[708,4063,2879],{},[2921,4065,4066,3942,4068,3942,4070,3942,4072,3942,4074],{},[708,4067,795],{},[708,4069,1376],{},[708,4071,1288],{},[708,4073,1393],{},[708,4075,799],{},[2921,4077,4078],{},[708,4079,1288],{},[2886,4081,4083],{"id":4082},"usecolorpickerthumbrecipes-options",[708,4084,4085],{},"useColorPickerThumbRecipe(s, options?)",[692,4087,4088,4089,4091,4092,4095,4096,4099,4100,2092],{},"Creates the thumb recipe — the ",[708,4090,3160],{}," handle shared by both the selector and the track. A fixed-size circle with a white contrast ring; has ",[696,4093,4094],{},"no"," variant axis. Registers a ",[708,4097,4098],{},".color-picker-thumb[data-disabled]"," selector for the disabled cursor. Accepts the same parameters as ",[708,4101,3979],{},[692,4103,4104],{},"This recipe has no variants — the thumb is a constant size across all picker sizes.",[692,4106,4107],{},[759,4108,4109],{"href":132},"Learn more about recipes →",[688,4111,4113],{"id":4112},"best-practices","Best Practices",[700,4115,4116,4125,4136,4148,4157],{},[703,4117,4118,4124],{},[696,4119,4120,4121,4123],{},"Drive ",[708,4122,726],{}," from your state",": Set the hue variable on the root and let the selector gradient follow; never hard-code the gradient yourself.",[703,4126,4127,4130,4131,3367,4133,4135],{},[696,4128,4129],{},"Own the thumb positions",": Compute ",[708,4132,2834],{},[708,4134,2838],{}," from your hue, saturation, and value — the recipe leaves positioning to you on purpose.",[703,4137,4138,4144,4145,4147],{},[696,4139,4140,4141,4143],{},"Pass ",[708,4142,2879],{}," consistently",": Spread the same ",[708,4146,2879],{}," to the root, selector, and track so the control scales as one.",[703,4149,4150,4153,4154,4156],{},[696,4151,4152],{},"Mirror the value into text or a native input",": Expose the selected color as text or an ",[708,4155,3405],{}," for accessibility and keyboard support.",[703,4158,4159,4162],{},[696,4160,4161],{},"Pair with interaction logic",": The recipe is CSS only — add your own pointer handlers or a headless color library for dragging and color conversion.",[688,4164,4166],{"id":4165},"faq","FAQ",[4168,4169,4170,4179,4197,4216],"accordion",{},[4171,4172,4175,4176,4178],"accordion-item",{"icon":4173,"label":4174},"i-lucide-circle-help","Does this recipe handle the color-picking logic?","No. The Color Picker recipe is a pure-CSS styling shell — it draws the selector gradient, the hue rainbow, and the thumbs. Dragging, hue\u002Fsaturation\u002Fvalue math, and format conversion (hex, rgb, hsl) live in your application's JavaScript. Wire it up yourself or pair it with a headless color library, then feed the result into ",[708,4177,726],{}," and the thumb positions.",[4171,4180,4182,4183,4187,4188,4191,4192,4194,4195,2092],{"icon":4173,"label":4181},"Why is there no color variant?","A color picker renders ",[4184,4185,4186],"em",{},"arbitrary"," colors chosen by the user, not the theme's semantic palette. So instead of a ",[708,4189,4190],{},"color"," axis, it exposes the ",[708,4193,726],{}," variable and gradient-painted surfaces. The only static axis is ",[708,4196,2879],{},[4171,4198,4200,4201,4203,4204,4206,4207,4209,4210,4212,4213,2092],{"icon":4173,"label":4199},"How do I show the currently selected color?","Set ",[708,4202,726],{}," on the root and position the two thumbs: the selector thumb by saturation (",[708,4205,2834],{},") and value (",[708,4208,2838],{},"), the track thumb by hue (",[708,4211,2838],{},"). See ",[759,4214,2805],{"href":4215},"#selecting-a-color",[4171,4217,4219,4220,4222,4223,2092],{"icon":4173,"label":4218},"Can I add an alpha (opacity) slider?","There's no alpha track built in (matching the Nuxt UI reference). You can add one by composing a second ",[708,4221,734],{}," element with your own checkerboard-plus-alpha gradient and a shared ",[708,4224,3160],{},[4226,4227,4228],"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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}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}",{"title":843,"searchDepth":884,"depth":884,"links":4230},[4231,4232,4233,4234,4235,4238,4239,4240,4241,4245,4251,4252],{"id":690,"depth":884,"text":78},{"id":765,"depth":884,"text":766},{"id":815,"depth":884,"text":816},{"id":2804,"depth":884,"text":2805},{"id":2867,"depth":884,"text":2868,"children":4236},[4237],{"id":2888,"depth":892,"text":2889},{"id":2047,"depth":884,"text":3051},{"id":3068,"depth":884,"text":3069},{"id":3376,"depth":884,"text":568},{"id":3437,"depth":884,"text":3438,"children":4242},[4243,4244],{"id":3441,"depth":892,"text":3442},{"id":3612,"depth":892,"text":3613},{"id":3779,"depth":884,"text":73,"children":4246},[4247,4248,4249,4250],{"id":3782,"depth":892,"text":3785},{"id":3957,"depth":892,"text":3960},{"id":4022,"depth":892,"text":4025},{"id":4082,"depth":892,"text":4085},{"id":4112,"depth":884,"text":4113},{"id":4165,"depth":884,"text":4166},"A color selection control composed of a saturation\u002Fvalue selector square, a vertical hue track, and shared draggable thumbs. Renders any color through a CSS variable and gradients, with five sizes through the recipe system.",null,{},{"icon":7},{"title":444,"description":4253},"bKbM6CmiX2oXiOYrU2W7Lwi9f8FbTb7Kg3LfyISxU8o",[4260,4262],{"title":440,"path":441,"stem":442,"description":4261,"icon":7,"children":-1},"A layout component for arranging a set of checkboxes with shared orientation and spacing. Supports vertical and horizontal layouts and three gap sizes through the recipe system.",{"title":448,"path":449,"stem":450,"description":4263,"icon":7,"children":-1},"A layout component for joining buttons, inputs, selects, and other bordered controls into a single unit with merged borders and shared orientation. Supports horizontal and vertical layouts plus full-width block mode through the recipe system.",1781596339346]