[{"data":1,"prerenderedAt":6039},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-slider":682,"-docs-theme-components-slider-surround":6034},{"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":472,"body":684,"description":6028,"extension":1436,"links":6029,"meta":6030,"navigation":6031,"path":473,"seo":6032,"stem":474,"__hash__":6033},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.slider.md",{"type":685,"value":686,"toc":5998},"minimark",[687,691,724,731,735,738,794,798,3673,3676,3715,3721,3724,3729,3733,3738,3885,3890,3943,3953,3957,3971,3974,3978,3982,4096,4103,4106,4116,4119,4126,4128,4131,4138,4142,4192,4195,4205,4208,4242,4251,4255,4258,4335,4349,4491,4499,4502,4516,4597,4636,4714,4752,4938,4942,4946,4949,5128,5132,5139,5336,5341,5344,5350,5353,5358,5429,5435,5438,5442,5512,5518,5521,5525,5585,5591,5594,5598,5664,5669,5791,5796,5800,5870,5874,5994],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698,699,703,704,707,708,711,712,715,716,720,721,723],"p",{},"The ",[696,697,472],"strong",{}," is an interactive form control used to select a numeric value from a continuous range. It is composed of four recipe parts: ",[700,701,702],"code",{},"useSliderRecipe()"," for the positioning root, ",[700,705,706],{},"useSliderTrackRecipe()"," for the neutral rail, ",[700,709,710],{},"useSliderRangeRecipe()"," for the colored fill, and ",[700,713,714],{},"useSliderThumbRecipe()"," for the draggable handle. Each composable creates a fully configured ",[717,718,719],"a",{"href":132},"recipe"," — the colored parts share the full palette, while the track stays neutral, mirroring the ",[717,722,416],{"href":417}," recipe with an added handle.",[692,725,726,727,730],{},"The Slider recipes integrate directly with the default ",[717,728,729],{"href":171},"design tokens preset"," and generate type-safe utility classes at build time with zero runtime CSS.",[688,732,734],{"id":733},"why-use-the-slider-recipe","Why use the Slider recipe?",[692,736,737],{},"The Slider recipe helps you:",[739,740,741,748,754,764,770,776,782,788],"ul",{},[742,743,744,747],"li",{},[696,745,746],{},"Ship faster with sensible defaults",": Get 9 range and thumb colors, 5 sizes, and 2 orientations out of the box with four composable calls.",[742,749,750,753],{},[696,751,752],{},"Compose a structured handle",": Four coordinated recipes (root, track, range, thumb) share size and orientation axes, so every part stays internally consistent.",[742,755,756,759,760,763],{},[696,757,758],{},"Stay accessible by construction",": The thumb is built to carry ",[700,761,762],{},"role=\"slider\""," semantics, so keyboard and screen-reader support drops straight in.",[742,765,766,769],{},[696,767,768],{},"Maintain consistency",": Compound variants ensure every color combination follows the same design rules, including dark mode overrides.",[742,771,772,775],{},[696,773,774],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[742,777,778,781],{},[696,779,780],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, size, or orientation values at compile time.",[742,783,784,787],{},[696,785,786],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[742,789,790,793],{},[696,791,792],{},"Support dark mode",": Track, range, and thumb colors adapt automatically between light and dark color schemes.",[688,795,797],{"id":796},"usage","Usage",[799,800,802,807,814,1148,1152,1155,3665,3669],"steps",{"level":801},"4",[803,804,806],"h4",{"id":805},"register-the-recipes","Register the recipes",[692,808,809,810,813],{},"Add the Slider recipes to a local Styleframe instance. The global ",[700,811,812],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[815,816,818,1041],"code-tree",{"default-value":817},"src\u002Fcomponents\u002Fslider.styleframe.ts",[819,820,825],"pre",{"className":821,"code":822,"filename":817,"language":823,"meta":824,"style":824},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport {\n    useSliderRecipe,\n    useSliderTrackRecipe,\n    useSliderRangeRecipe,\n    useSliderThumbRecipe,\n} from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst slider = useSliderRecipe(s);\nconst sliderTrack = useSliderTrackRecipe(s);\nconst sliderRange = useSliderRangeRecipe(s);\nconst sliderThumb = useSliderThumbRecipe(s);\n\nexport default s;\n","ts","",[700,826,827,863,871,880,888,896,904,921,927,948,953,971,988,1005,1022,1027],{"__ignoreMap":824},[828,829,832,836,840,844,847,850,853,857,860],"span",{"class":830,"line":831},"line",1,[828,833,835],{"class":834},"s7zQu","import",[828,837,839],{"class":838},"sMK4o"," {",[828,841,843],{"class":842},"sTEyZ"," styleframe",[828,845,846],{"class":838}," }",[828,848,849],{"class":834}," from",[828,851,852],{"class":838}," '",[828,854,856],{"class":855},"sfazB","virtual:styleframe",[828,858,859],{"class":838},"'",[828,861,862],{"class":838},";\n",[828,864,866,868],{"class":830,"line":865},2,[828,867,835],{"class":834},[828,869,870],{"class":838}," {\n",[828,872,874,877],{"class":830,"line":873},3,[828,875,876],{"class":842},"    useSliderRecipe",[828,878,879],{"class":838},",\n",[828,881,883,886],{"class":830,"line":882},4,[828,884,885],{"class":842},"    useSliderTrackRecipe",[828,887,879],{"class":838},[828,889,891,894],{"class":830,"line":890},5,[828,892,893],{"class":842},"    useSliderRangeRecipe",[828,895,879],{"class":838},[828,897,899,902],{"class":830,"line":898},6,[828,900,901],{"class":842},"    useSliderThumbRecipe",[828,903,879],{"class":838},[828,905,907,910,912,914,917,919],{"class":830,"line":906},7,[828,908,909],{"class":838},"}",[828,911,849],{"class":834},[828,913,852],{"class":838},[828,915,916],{"class":855},"@styleframe\u002Ftheme",[828,918,859],{"class":838},[828,920,862],{"class":838},[828,922,924],{"class":830,"line":923},8,[828,925,926],{"emptyLinePlaceholder":223},"\n",[828,928,930,934,937,940,943,946],{"class":830,"line":929},9,[828,931,933],{"class":932},"spNyl","const",[828,935,936],{"class":842}," s ",[828,938,939],{"class":838},"=",[828,941,843],{"class":942},"s2Zo4",[828,944,945],{"class":842},"()",[828,947,862],{"class":838},[828,949,951],{"class":830,"line":950},10,[828,952,926],{"emptyLinePlaceholder":223},[828,954,956,958,961,963,966,969],{"class":830,"line":955},11,[828,957,933],{"class":932},[828,959,960],{"class":842}," slider ",[828,962,939],{"class":838},[828,964,965],{"class":942}," useSliderRecipe",[828,967,968],{"class":842},"(s)",[828,970,862],{"class":838},[828,972,974,976,979,981,984,986],{"class":830,"line":973},12,[828,975,933],{"class":932},[828,977,978],{"class":842}," sliderTrack ",[828,980,939],{"class":838},[828,982,983],{"class":942}," useSliderTrackRecipe",[828,985,968],{"class":842},[828,987,862],{"class":838},[828,989,991,993,996,998,1001,1003],{"class":830,"line":990},13,[828,992,933],{"class":932},[828,994,995],{"class":842}," sliderRange ",[828,997,939],{"class":838},[828,999,1000],{"class":942}," useSliderRangeRecipe",[828,1002,968],{"class":842},[828,1004,862],{"class":838},[828,1006,1008,1010,1013,1015,1018,1020],{"class":830,"line":1007},14,[828,1009,933],{"class":932},[828,1011,1012],{"class":842}," sliderThumb ",[828,1014,939],{"class":838},[828,1016,1017],{"class":942}," useSliderThumbRecipe",[828,1019,968],{"class":842},[828,1021,862],{"class":838},[828,1023,1025],{"class":830,"line":1024},15,[828,1026,926],{"emptyLinePlaceholder":223},[828,1028,1030,1033,1036,1039],{"class":830,"line":1029},16,[828,1031,1032],{"class":834},"export",[828,1034,1035],{"class":834}," default",[828,1037,1038],{"class":842}," s",[828,1040,862],{"class":838},[819,1042,1044],{"className":821,"code":1043,"filename":812,"language":823,"meta":824,"style":824},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[700,1045,1046,1067,1094,1098,1112,1116,1125,1134,1138],{"__ignoreMap":824},[828,1047,1048,1050,1052,1054,1056,1058,1060,1063,1065],{"class":830,"line":831},[828,1049,835],{"class":834},[828,1051,839],{"class":838},[828,1053,843],{"class":842},[828,1055,846],{"class":838},[828,1057,849],{"class":834},[828,1059,852],{"class":838},[828,1061,1062],{"class":855},"styleframe",[828,1064,859],{"class":838},[828,1066,862],{"class":838},[828,1068,1069,1071,1073,1076,1079,1082,1084,1086,1088,1090,1092],{"class":830,"line":865},[828,1070,835],{"class":834},[828,1072,839],{"class":838},[828,1074,1075],{"class":842}," useDesignTokensPreset",[828,1077,1078],{"class":838},",",[828,1080,1081],{"class":842}," useUtilitiesPreset",[828,1083,846],{"class":838},[828,1085,849],{"class":834},[828,1087,852],{"class":838},[828,1089,916],{"class":855},[828,1091,859],{"class":838},[828,1093,862],{"class":838},[828,1095,1096],{"class":830,"line":873},[828,1097,926],{"emptyLinePlaceholder":223},[828,1099,1100,1102,1104,1106,1108,1110],{"class":830,"line":882},[828,1101,933],{"class":932},[828,1103,936],{"class":842},[828,1105,939],{"class":838},[828,1107,843],{"class":942},[828,1109,945],{"class":842},[828,1111,862],{"class":838},[828,1113,1114],{"class":830,"line":890},[828,1115,926],{"emptyLinePlaceholder":223},[828,1117,1118,1121,1123],{"class":830,"line":898},[828,1119,1120],{"class":942},"useDesignTokensPreset",[828,1122,968],{"class":842},[828,1124,862],{"class":838},[828,1126,1127,1130,1132],{"class":830,"line":906},[828,1128,1129],{"class":942},"useUtilitiesPreset",[828,1131,968],{"class":842},[828,1133,862],{"class":838},[828,1135,1136],{"class":830,"line":923},[828,1137,926],{"emptyLinePlaceholder":223},[828,1139,1140,1142,1144,1146],{"class":830,"line":929},[828,1141,1032],{"class":834},[828,1143,1035],{"class":834},[828,1145,1038],{"class":842},[828,1147,862],{"class":838},[803,1149,1151],{"id":1150},"build-the-component","Build the component",[692,1153,1154],{},"Import the four runtime functions from the virtual module and pass variant props to compute class names. The recipes own the slider's appearance; the current value drives the fill length and thumb offset, which you bind from your model:",[1156,1157,1158,2433,3209],"framework-switcher",{},[1159,1160,1161],"template",{"v-slot:vue":824},[819,1162,1167],{"className":1163,"code":1164,"filename":1165,"language":1166,"meta":824,"style":824},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport {\n    slider,\n    sliderTrack,\n    sliderRange,\n    sliderThumb,\n    type SliderProps,\n    type SliderRangeProps,\n    type SliderThumbProps,\n} from \"virtual:styleframe\";\n\nconst props = withDefaults(\n    defineProps\u003C\n        SliderProps &\n            SliderRangeProps &\n            SliderThumbProps & {\n                modelValue?: number;\n                min?: number;\n                max?: number;\n                disabled?: boolean;\n            }\n    >(),\n    { color: \"primary\", size: \"md\", orientation: \"horizontal\", modelValue: 50, min: 0, max: 100 },\n);\n\n\u002F\u002F Percentage of the track the value occupies.\nconst fill = computed(() => {\n    const ratio = (props.modelValue - props.min) \u002F (props.max - props.min);\n    return `${Math.min(100, Math.max(0, ratio * 100))}%`;\n});\n\nconst rootClasses = computed(() =>\n    slider({ size: props.size, orientation: props.orientation, disabled: props.disabled ? \"true\" : \"false\" }),\n);\nconst trackClasses = computed(() => sliderTrack({ size: props.size, orientation: props.orientation }));\nconst rangeClasses = computed(() => sliderRange({ color: props.color, orientation: props.orientation }));\nconst thumbClasses = computed(() => sliderThumb({ color: props.color, size: props.size }));\n\n\u002F\u002F The value owns position; the recipe owns appearance.\nconst rangeStyle = computed(() =>\n    props.orientation === \"vertical\" ? { height: fill.value } : { width: fill.value },\n);\nconst thumbStyle = computed(() =>\n    props.orientation === \"vertical\"\n        ? { insetInlineStart: \"50%\", bottom: fill.value, transform: \"translate(-50%, 50%)\" }\n        : { top: \"50%\", insetInlineStart: fill.value, transform: \"translate(-50%, -50%)\" },\n);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cspan :class=\"rootClasses\">\n        \u003Cspan :class=\"trackClasses\">\n            \u003Cspan :class=\"rangeClasses\" :style=\"rangeStyle\" \u002F>\n        \u003C\u002Fspan>\n        \u003Cspan\n            :class=\"thumbClasses\"\n            :style=\"thumbStyle\"\n            role=\"slider\"\n            tabindex=\"0\"\n            :aria-valuemin=\"min\"\n            :aria-valuemax=\"max\"\n            :aria-valuenow=\"modelValue\"\n            :aria-orientation=\"orientation\"\n            :aria-disabled=\"disabled || undefined\"\n        \u002F>\n    \u003C\u002Fspan>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FSlider.vue","vue",[700,1168,1169,1196,1218,1224,1231,1238,1245,1252,1262,1271,1280,1294,1298,1313,1321,1329,1336,1347,1359,1370,1380,1391,1397,1407,1487,1495,1500,1507,1529,1591,1649,1658,1663,1682,1756,1763,1817,1871,1925,1930,1936,1954,2012,2019,2037,2055,2106,2152,2159,2169,2174,2183,2205,2226,2260,2270,2278,2293,2308,2323,2337,2351,2365,2379,2393,2408,2414,2424],{"__ignoreMap":824},[828,1170,1171,1174,1178,1181,1184,1186,1189,1191,1193],{"class":830,"line":831},[828,1172,1173],{"class":838},"\u003C",[828,1175,1177],{"class":1176},"swJcz","script",[828,1179,1180],{"class":932}," setup",[828,1182,1183],{"class":932}," lang",[828,1185,939],{"class":838},[828,1187,1188],{"class":838},"\"",[828,1190,823],{"class":855},[828,1192,1188],{"class":838},[828,1194,1195],{"class":838},">\n",[828,1197,1198,1200,1202,1205,1207,1209,1212,1214,1216],{"class":830,"line":865},[828,1199,835],{"class":834},[828,1201,839],{"class":838},[828,1203,1204],{"class":842}," computed",[828,1206,846],{"class":838},[828,1208,849],{"class":834},[828,1210,1211],{"class":838}," \"",[828,1213,1166],{"class":855},[828,1215,1188],{"class":838},[828,1217,862],{"class":838},[828,1219,1220,1222],{"class":830,"line":873},[828,1221,835],{"class":834},[828,1223,870],{"class":838},[828,1225,1226,1229],{"class":830,"line":882},[828,1227,1228],{"class":842},"    slider",[828,1230,879],{"class":838},[828,1232,1233,1236],{"class":830,"line":890},[828,1234,1235],{"class":842},"    sliderTrack",[828,1237,879],{"class":838},[828,1239,1240,1243],{"class":830,"line":898},[828,1241,1242],{"class":842},"    sliderRange",[828,1244,879],{"class":838},[828,1246,1247,1250],{"class":830,"line":906},[828,1248,1249],{"class":842},"    sliderThumb",[828,1251,879],{"class":838},[828,1253,1254,1257,1260],{"class":830,"line":923},[828,1255,1256],{"class":834},"    type",[828,1258,1259],{"class":842}," SliderProps",[828,1261,879],{"class":838},[828,1263,1264,1266,1269],{"class":830,"line":929},[828,1265,1256],{"class":834},[828,1267,1268],{"class":842}," SliderRangeProps",[828,1270,879],{"class":838},[828,1272,1273,1275,1278],{"class":830,"line":950},[828,1274,1256],{"class":834},[828,1276,1277],{"class":842}," SliderThumbProps",[828,1279,879],{"class":838},[828,1281,1282,1284,1286,1288,1290,1292],{"class":830,"line":955},[828,1283,909],{"class":838},[828,1285,849],{"class":834},[828,1287,1211],{"class":838},[828,1289,856],{"class":855},[828,1291,1188],{"class":838},[828,1293,862],{"class":838},[828,1295,1296],{"class":830,"line":973},[828,1297,926],{"emptyLinePlaceholder":223},[828,1299,1300,1302,1305,1307,1310],{"class":830,"line":990},[828,1301,933],{"class":932},[828,1303,1304],{"class":842}," props ",[828,1306,939],{"class":838},[828,1308,1309],{"class":942}," withDefaults",[828,1311,1312],{"class":842},"(\n",[828,1314,1315,1318],{"class":830,"line":1007},[828,1316,1317],{"class":842},"    defineProps",[828,1319,1320],{"class":838},"\u003C\n",[828,1322,1323,1326],{"class":830,"line":1024},[828,1324,1325],{"class":842},"        SliderProps ",[828,1327,1328],{"class":838},"&\n",[828,1330,1331,1334],{"class":830,"line":1029},[828,1332,1333],{"class":842},"            SliderRangeProps ",[828,1335,1328],{"class":838},[828,1337,1339,1342,1345],{"class":830,"line":1338},17,[828,1340,1341],{"class":842},"            SliderThumbProps ",[828,1343,1344],{"class":838},"&",[828,1346,870],{"class":838},[828,1348,1350,1353,1356],{"class":830,"line":1349},18,[828,1351,1352],{"class":842},"                modelValue?",[828,1354,1355],{"class":838},":",[828,1357,1358],{"class":842}," number;\n",[828,1360,1362,1365,1368],{"class":830,"line":1361},19,[828,1363,1364],{"class":842},"                min",[828,1366,1367],{"class":838},"?:",[828,1369,1358],{"class":842},[828,1371,1373,1376,1378],{"class":830,"line":1372},20,[828,1374,1375],{"class":842},"                max",[828,1377,1367],{"class":838},[828,1379,1358],{"class":842},[828,1381,1383,1386,1388],{"class":830,"line":1382},21,[828,1384,1385],{"class":842},"                disabled",[828,1387,1367],{"class":838},[828,1389,1390],{"class":842}," boolean;\n",[828,1392,1394],{"class":830,"line":1393},22,[828,1395,1396],{"class":838},"            }\n",[828,1398,1400,1403,1405],{"class":830,"line":1399},23,[828,1401,1402],{"class":838},"    >",[828,1404,945],{"class":842},[828,1406,879],{"class":838},[828,1408,1410,1413,1416,1418,1420,1423,1425,1427,1430,1432,1434,1437,1439,1441,1444,1446,1448,1451,1453,1455,1458,1460,1464,1466,1469,1471,1474,1476,1479,1481,1484],{"class":830,"line":1409},24,[828,1411,1412],{"class":838},"    {",[828,1414,1415],{"class":1176}," color",[828,1417,1355],{"class":838},[828,1419,1211],{"class":838},[828,1421,1422],{"class":855},"primary",[828,1424,1188],{"class":838},[828,1426,1078],{"class":838},[828,1428,1429],{"class":1176}," size",[828,1431,1355],{"class":838},[828,1433,1211],{"class":838},[828,1435,1436],{"class":855},"md",[828,1438,1188],{"class":838},[828,1440,1078],{"class":838},[828,1442,1443],{"class":1176}," orientation",[828,1445,1355],{"class":838},[828,1447,1211],{"class":838},[828,1449,1450],{"class":855},"horizontal",[828,1452,1188],{"class":838},[828,1454,1078],{"class":838},[828,1456,1457],{"class":1176}," modelValue",[828,1459,1355],{"class":838},[828,1461,1463],{"class":1462},"sbssI"," 50",[828,1465,1078],{"class":838},[828,1467,1468],{"class":1176}," min",[828,1470,1355],{"class":838},[828,1472,1473],{"class":1462}," 0",[828,1475,1078],{"class":838},[828,1477,1478],{"class":1176}," max",[828,1480,1355],{"class":838},[828,1482,1483],{"class":1462}," 100",[828,1485,1486],{"class":838}," },\n",[828,1488,1490,1493],{"class":830,"line":1489},25,[828,1491,1492],{"class":842},")",[828,1494,862],{"class":838},[828,1496,1498],{"class":830,"line":1497},26,[828,1499,926],{"emptyLinePlaceholder":223},[828,1501,1503],{"class":830,"line":1502},27,[828,1504,1506],{"class":1505},"sHwdD","\u002F\u002F Percentage of the track the value occupies.\n",[828,1508,1510,1512,1515,1517,1519,1522,1524,1527],{"class":830,"line":1509},28,[828,1511,933],{"class":932},[828,1513,1514],{"class":842}," fill ",[828,1516,939],{"class":838},[828,1518,1204],{"class":942},[828,1520,1521],{"class":842},"(",[828,1523,945],{"class":838},[828,1525,1526],{"class":932}," =>",[828,1528,870],{"class":838},[828,1530,1532,1535,1538,1541,1544,1547,1550,1553,1556,1559,1561,1564,1567,1570,1572,1574,1576,1579,1581,1583,1585,1587,1589],{"class":830,"line":1531},29,[828,1533,1534],{"class":932},"    const",[828,1536,1537],{"class":842}," ratio",[828,1539,1540],{"class":838}," =",[828,1542,1543],{"class":1176}," (",[828,1545,1546],{"class":842},"props",[828,1548,1549],{"class":838},".",[828,1551,1552],{"class":842},"modelValue",[828,1554,1555],{"class":838}," -",[828,1557,1558],{"class":842}," props",[828,1560,1549],{"class":838},[828,1562,1563],{"class":842},"min",[828,1565,1566],{"class":1176},") ",[828,1568,1569],{"class":838},"\u002F",[828,1571,1543],{"class":1176},[828,1573,1546],{"class":842},[828,1575,1549],{"class":838},[828,1577,1578],{"class":842},"max",[828,1580,1555],{"class":838},[828,1582,1558],{"class":842},[828,1584,1549],{"class":838},[828,1586,1563],{"class":842},[828,1588,1492],{"class":1176},[828,1590,862],{"class":838},[828,1592,1594,1597,1600,1603,1605,1607,1609,1612,1614,1617,1619,1621,1623,1626,1628,1631,1634,1636,1639,1641,1644,1647],{"class":830,"line":1593},30,[828,1595,1596],{"class":834},"    return",[828,1598,1599],{"class":838}," `${",[828,1601,1602],{"class":842},"Math",[828,1604,1549],{"class":838},[828,1606,1563],{"class":942},[828,1608,1521],{"class":842},[828,1610,1611],{"class":1462},"100",[828,1613,1078],{"class":838},[828,1615,1616],{"class":842}," Math",[828,1618,1549],{"class":838},[828,1620,1578],{"class":942},[828,1622,1521],{"class":842},[828,1624,1625],{"class":1462},"0",[828,1627,1078],{"class":838},[828,1629,1630],{"class":842}," ratio ",[828,1632,1633],{"class":838},"*",[828,1635,1483],{"class":1462},[828,1637,1638],{"class":842},"))",[828,1640,909],{"class":838},[828,1642,1643],{"class":855},"%",[828,1645,1646],{"class":838},"`",[828,1648,862],{"class":838},[828,1650,1652,1654,1656],{"class":830,"line":1651},31,[828,1653,909],{"class":838},[828,1655,1492],{"class":842},[828,1657,862],{"class":838},[828,1659,1661],{"class":830,"line":1660},32,[828,1662,926],{"emptyLinePlaceholder":223},[828,1664,1666,1668,1671,1673,1675,1677,1679],{"class":830,"line":1665},33,[828,1667,933],{"class":932},[828,1669,1670],{"class":842}," rootClasses ",[828,1672,939],{"class":838},[828,1674,1204],{"class":942},[828,1676,1521],{"class":842},[828,1678,945],{"class":838},[828,1680,1681],{"class":932}," =>\n",[828,1683,1685,1687,1689,1692,1694,1696,1698,1700,1703,1705,1707,1709,1711,1713,1716,1718,1721,1723,1725,1727,1730,1733,1735,1738,1740,1743,1745,1748,1750,1752,1754],{"class":830,"line":1684},34,[828,1686,1228],{"class":942},[828,1688,1521],{"class":842},[828,1690,1691],{"class":838},"{",[828,1693,1429],{"class":1176},[828,1695,1355],{"class":838},[828,1697,1558],{"class":842},[828,1699,1549],{"class":838},[828,1701,1702],{"class":842},"size",[828,1704,1078],{"class":838},[828,1706,1443],{"class":1176},[828,1708,1355],{"class":838},[828,1710,1558],{"class":842},[828,1712,1549],{"class":838},[828,1714,1715],{"class":842},"orientation",[828,1717,1078],{"class":838},[828,1719,1720],{"class":1176}," disabled",[828,1722,1355],{"class":838},[828,1724,1558],{"class":842},[828,1726,1549],{"class":838},[828,1728,1729],{"class":842},"disabled ",[828,1731,1732],{"class":838},"?",[828,1734,1211],{"class":838},[828,1736,1737],{"class":855},"true",[828,1739,1188],{"class":838},[828,1741,1742],{"class":838}," :",[828,1744,1211],{"class":838},[828,1746,1747],{"class":855},"false",[828,1749,1188],{"class":838},[828,1751,846],{"class":838},[828,1753,1492],{"class":842},[828,1755,879],{"class":838},[828,1757,1759,1761],{"class":830,"line":1758},35,[828,1760,1492],{"class":842},[828,1762,862],{"class":838},[828,1764,1766,1768,1771,1773,1775,1777,1779,1781,1784,1786,1788,1790,1792,1794,1796,1798,1800,1802,1804,1806,1808,1811,1813,1815],{"class":830,"line":1765},36,[828,1767,933],{"class":932},[828,1769,1770],{"class":842}," trackClasses ",[828,1772,939],{"class":838},[828,1774,1204],{"class":942},[828,1776,1521],{"class":842},[828,1778,945],{"class":838},[828,1780,1526],{"class":932},[828,1782,1783],{"class":942}," sliderTrack",[828,1785,1521],{"class":842},[828,1787,1691],{"class":838},[828,1789,1429],{"class":1176},[828,1791,1355],{"class":838},[828,1793,1558],{"class":842},[828,1795,1549],{"class":838},[828,1797,1702],{"class":842},[828,1799,1078],{"class":838},[828,1801,1443],{"class":1176},[828,1803,1355],{"class":838},[828,1805,1558],{"class":842},[828,1807,1549],{"class":838},[828,1809,1810],{"class":842},"orientation ",[828,1812,909],{"class":838},[828,1814,1638],{"class":842},[828,1816,862],{"class":838},[828,1818,1820,1822,1825,1827,1829,1831,1833,1835,1838,1840,1842,1844,1846,1848,1850,1853,1855,1857,1859,1861,1863,1865,1867,1869],{"class":830,"line":1819},37,[828,1821,933],{"class":932},[828,1823,1824],{"class":842}," rangeClasses ",[828,1826,939],{"class":838},[828,1828,1204],{"class":942},[828,1830,1521],{"class":842},[828,1832,945],{"class":838},[828,1834,1526],{"class":932},[828,1836,1837],{"class":942}," sliderRange",[828,1839,1521],{"class":842},[828,1841,1691],{"class":838},[828,1843,1415],{"class":1176},[828,1845,1355],{"class":838},[828,1847,1558],{"class":842},[828,1849,1549],{"class":838},[828,1851,1852],{"class":842},"color",[828,1854,1078],{"class":838},[828,1856,1443],{"class":1176},[828,1858,1355],{"class":838},[828,1860,1558],{"class":842},[828,1862,1549],{"class":838},[828,1864,1810],{"class":842},[828,1866,909],{"class":838},[828,1868,1638],{"class":842},[828,1870,862],{"class":838},[828,1872,1874,1876,1879,1881,1883,1885,1887,1889,1892,1894,1896,1898,1900,1902,1904,1906,1908,1910,1912,1914,1916,1919,1921,1923],{"class":830,"line":1873},38,[828,1875,933],{"class":932},[828,1877,1878],{"class":842}," thumbClasses ",[828,1880,939],{"class":838},[828,1882,1204],{"class":942},[828,1884,1521],{"class":842},[828,1886,945],{"class":838},[828,1888,1526],{"class":932},[828,1890,1891],{"class":942}," sliderThumb",[828,1893,1521],{"class":842},[828,1895,1691],{"class":838},[828,1897,1415],{"class":1176},[828,1899,1355],{"class":838},[828,1901,1558],{"class":842},[828,1903,1549],{"class":838},[828,1905,1852],{"class":842},[828,1907,1078],{"class":838},[828,1909,1429],{"class":1176},[828,1911,1355],{"class":838},[828,1913,1558],{"class":842},[828,1915,1549],{"class":838},[828,1917,1918],{"class":842},"size ",[828,1920,909],{"class":838},[828,1922,1638],{"class":842},[828,1924,862],{"class":838},[828,1926,1928],{"class":830,"line":1927},39,[828,1929,926],{"emptyLinePlaceholder":223},[828,1931,1933],{"class":830,"line":1932},40,[828,1934,1935],{"class":1505},"\u002F\u002F The value owns position; the recipe owns appearance.\n",[828,1937,1939,1941,1944,1946,1948,1950,1952],{"class":830,"line":1938},41,[828,1940,933],{"class":932},[828,1942,1943],{"class":842}," rangeStyle ",[828,1945,939],{"class":838},[828,1947,1204],{"class":942},[828,1949,1521],{"class":842},[828,1951,945],{"class":838},[828,1953,1681],{"class":932},[828,1955,1957,1960,1962,1964,1967,1969,1972,1974,1977,1979,1982,1984,1987,1989,1992,1994,1996,1998,2001,2003,2005,2007,2009],{"class":830,"line":1956},42,[828,1958,1959],{"class":842},"    props",[828,1961,1549],{"class":838},[828,1963,1810],{"class":842},[828,1965,1966],{"class":838},"===",[828,1968,1211],{"class":838},[828,1970,1971],{"class":855},"vertical",[828,1973,1188],{"class":838},[828,1975,1976],{"class":838}," ?",[828,1978,839],{"class":838},[828,1980,1981],{"class":1176}," height",[828,1983,1355],{"class":838},[828,1985,1986],{"class":842}," fill",[828,1988,1549],{"class":838},[828,1990,1991],{"class":842},"value ",[828,1993,909],{"class":838},[828,1995,1742],{"class":838},[828,1997,839],{"class":838},[828,1999,2000],{"class":1176}," width",[828,2002,1355],{"class":838},[828,2004,1986],{"class":842},[828,2006,1549],{"class":838},[828,2008,1991],{"class":842},[828,2010,2011],{"class":838},"},\n",[828,2013,2015,2017],{"class":830,"line":2014},43,[828,2016,1492],{"class":842},[828,2018,862],{"class":838},[828,2020,2022,2024,2027,2029,2031,2033,2035],{"class":830,"line":2021},44,[828,2023,933],{"class":932},[828,2025,2026],{"class":842}," thumbStyle ",[828,2028,939],{"class":838},[828,2030,1204],{"class":942},[828,2032,1521],{"class":842},[828,2034,945],{"class":838},[828,2036,1681],{"class":932},[828,2038,2040,2042,2044,2046,2048,2050,2052],{"class":830,"line":2039},45,[828,2041,1959],{"class":842},[828,2043,1549],{"class":838},[828,2045,1810],{"class":842},[828,2047,1966],{"class":838},[828,2049,1211],{"class":838},[828,2051,1971],{"class":855},[828,2053,2054],{"class":838},"\"\n",[828,2056,2058,2061,2063,2066,2068,2070,2073,2075,2077,2080,2082,2084,2086,2089,2091,2094,2096,2098,2101,2103],{"class":830,"line":2057},46,[828,2059,2060],{"class":838},"        ?",[828,2062,839],{"class":838},[828,2064,2065],{"class":1176}," insetInlineStart",[828,2067,1355],{"class":838},[828,2069,1211],{"class":838},[828,2071,2072],{"class":855},"50%",[828,2074,1188],{"class":838},[828,2076,1078],{"class":838},[828,2078,2079],{"class":1176}," bottom",[828,2081,1355],{"class":838},[828,2083,1986],{"class":842},[828,2085,1549],{"class":838},[828,2087,2088],{"class":842},"value",[828,2090,1078],{"class":838},[828,2092,2093],{"class":1176}," transform",[828,2095,1355],{"class":838},[828,2097,1211],{"class":838},[828,2099,2100],{"class":855},"translate(-50%, 50%)",[828,2102,1188],{"class":838},[828,2104,2105],{"class":838}," }\n",[828,2107,2109,2112,2114,2117,2119,2121,2123,2125,2127,2129,2131,2133,2135,2137,2139,2141,2143,2145,2148,2150],{"class":830,"line":2108},47,[828,2110,2111],{"class":838},"        :",[828,2113,839],{"class":838},[828,2115,2116],{"class":1176}," top",[828,2118,1355],{"class":838},[828,2120,1211],{"class":838},[828,2122,2072],{"class":855},[828,2124,1188],{"class":838},[828,2126,1078],{"class":838},[828,2128,2065],{"class":1176},[828,2130,1355],{"class":838},[828,2132,1986],{"class":842},[828,2134,1549],{"class":838},[828,2136,2088],{"class":842},[828,2138,1078],{"class":838},[828,2140,2093],{"class":1176},[828,2142,1355],{"class":838},[828,2144,1211],{"class":838},[828,2146,2147],{"class":855},"translate(-50%, -50%)",[828,2149,1188],{"class":838},[828,2151,1486],{"class":838},[828,2153,2155,2157],{"class":830,"line":2154},48,[828,2156,1492],{"class":842},[828,2158,862],{"class":838},[828,2160,2162,2165,2167],{"class":830,"line":2161},49,[828,2163,2164],{"class":838},"\u003C\u002F",[828,2166,1177],{"class":1176},[828,2168,1195],{"class":838},[828,2170,2172],{"class":830,"line":2171},50,[828,2173,926],{"emptyLinePlaceholder":223},[828,2175,2177,2179,2181],{"class":830,"line":2176},51,[828,2178,1173],{"class":838},[828,2180,1159],{"class":1176},[828,2182,1195],{"class":838},[828,2184,2186,2189,2191,2194,2196,2198,2201,2203],{"class":830,"line":2185},52,[828,2187,2188],{"class":838},"    \u003C",[828,2190,828],{"class":1176},[828,2192,2193],{"class":932}," :class",[828,2195,939],{"class":838},[828,2197,1188],{"class":838},[828,2199,2200],{"class":855},"rootClasses",[828,2202,1188],{"class":838},[828,2204,1195],{"class":838},[828,2206,2208,2211,2213,2215,2217,2219,2222,2224],{"class":830,"line":2207},53,[828,2209,2210],{"class":838},"        \u003C",[828,2212,828],{"class":1176},[828,2214,2193],{"class":932},[828,2216,939],{"class":838},[828,2218,1188],{"class":838},[828,2220,2221],{"class":855},"trackClasses",[828,2223,1188],{"class":838},[828,2225,1195],{"class":838},[828,2227,2229,2232,2234,2236,2238,2240,2243,2245,2248,2250,2252,2255,2257],{"class":830,"line":2228},54,[828,2230,2231],{"class":838},"            \u003C",[828,2233,828],{"class":1176},[828,2235,2193],{"class":932},[828,2237,939],{"class":838},[828,2239,1188],{"class":838},[828,2241,2242],{"class":855},"rangeClasses",[828,2244,1188],{"class":838},[828,2246,2247],{"class":932}," :style",[828,2249,939],{"class":838},[828,2251,1188],{"class":838},[828,2253,2254],{"class":855},"rangeStyle",[828,2256,1188],{"class":838},[828,2258,2259],{"class":838}," \u002F>\n",[828,2261,2263,2266,2268],{"class":830,"line":2262},55,[828,2264,2265],{"class":838},"        \u003C\u002F",[828,2267,828],{"class":1176},[828,2269,1195],{"class":838},[828,2271,2273,2275],{"class":830,"line":2272},56,[828,2274,2210],{"class":838},[828,2276,2277],{"class":1176},"span\n",[828,2279,2281,2284,2286,2288,2291],{"class":830,"line":2280},57,[828,2282,2283],{"class":932},"            :class",[828,2285,939],{"class":838},[828,2287,1188],{"class":838},[828,2289,2290],{"class":855},"thumbClasses",[828,2292,2054],{"class":838},[828,2294,2296,2299,2301,2303,2306],{"class":830,"line":2295},58,[828,2297,2298],{"class":932},"            :style",[828,2300,939],{"class":838},[828,2302,1188],{"class":838},[828,2304,2305],{"class":855},"thumbStyle",[828,2307,2054],{"class":838},[828,2309,2311,2314,2316,2318,2321],{"class":830,"line":2310},59,[828,2312,2313],{"class":932},"            role",[828,2315,939],{"class":838},[828,2317,1188],{"class":838},[828,2319,2320],{"class":855},"slider",[828,2322,2054],{"class":838},[828,2324,2326,2329,2331,2333,2335],{"class":830,"line":2325},60,[828,2327,2328],{"class":932},"            tabindex",[828,2330,939],{"class":838},[828,2332,1188],{"class":838},[828,2334,1625],{"class":855},[828,2336,2054],{"class":838},[828,2338,2340,2343,2345,2347,2349],{"class":830,"line":2339},61,[828,2341,2342],{"class":932},"            :aria-valuemin",[828,2344,939],{"class":838},[828,2346,1188],{"class":838},[828,2348,1563],{"class":855},[828,2350,2054],{"class":838},[828,2352,2354,2357,2359,2361,2363],{"class":830,"line":2353},62,[828,2355,2356],{"class":932},"            :aria-valuemax",[828,2358,939],{"class":838},[828,2360,1188],{"class":838},[828,2362,1578],{"class":855},[828,2364,2054],{"class":838},[828,2366,2368,2371,2373,2375,2377],{"class":830,"line":2367},63,[828,2369,2370],{"class":932},"            :aria-valuenow",[828,2372,939],{"class":838},[828,2374,1188],{"class":838},[828,2376,1552],{"class":855},[828,2378,2054],{"class":838},[828,2380,2382,2385,2387,2389,2391],{"class":830,"line":2381},64,[828,2383,2384],{"class":932},"            :aria-orientation",[828,2386,939],{"class":838},[828,2388,1188],{"class":838},[828,2390,1715],{"class":855},[828,2392,2054],{"class":838},[828,2394,2396,2399,2401,2403,2406],{"class":830,"line":2395},65,[828,2397,2398],{"class":932},"            :aria-disabled",[828,2400,939],{"class":838},[828,2402,1188],{"class":838},[828,2404,2405],{"class":855},"disabled || undefined",[828,2407,2054],{"class":838},[828,2409,2411],{"class":830,"line":2410},66,[828,2412,2413],{"class":838},"        \u002F>\n",[828,2415,2417,2420,2422],{"class":830,"line":2416},67,[828,2418,2419],{"class":838},"    \u003C\u002F",[828,2421,828],{"class":1176},[828,2423,1195],{"class":838},[828,2425,2427,2429,2431],{"class":830,"line":2426},68,[828,2428,2164],{"class":838},[828,2430,1159],{"class":1176},[828,2432,1195],{"class":838},[1159,2434,2435],{"v-slot:react":824},[819,2436,2439],{"className":821,"code":2437,"filename":2438,"language":823,"meta":824,"style":824},"import {\n    slider,\n    sliderTrack,\n    sliderRange,\n    sliderThumb,\n    type SliderProps,\n    type SliderRangeProps,\n    type SliderThumbProps,\n} from \"virtual:styleframe\";\n\ninterface SliderComponentProps extends SliderProps, SliderRangeProps, SliderThumbProps {\n    value?: number;\n    min?: number;\n    max?: number;\n    disabled?: boolean;\n}\n\nexport function Slider({\n    color = \"primary\",\n    size = \"md\",\n    orientation = \"horizontal\",\n    value = 50,\n    min = 0,\n    max = 100,\n    disabled = false,\n}: SliderComponentProps) {\n    const ratio = (value - min) \u002F (max - min);\n    const fill = `${Math.min(100, Math.max(0, ratio * 100))}%`;\n    const isVertical = orientation === \"vertical\";\n\n    return (\n        \u003Cspan className={slider({ size, orientation, disabled: String(disabled) })}>\n            \u003Cspan className={sliderTrack({ size, orientation })}>\n                \u003Cspan\n                    className={sliderRange({ color, orientation })}\n                    style={isVertical ? { height: fill } : { width: fill }}\n                \u002F>\n            \u003C\u002Fspan>\n            \u003Cspan\n                className={sliderThumb({ color, size })}\n                style={\n                    isVertical\n                        ? { insetInlineStart: \"50%\", bottom: fill, transform: \"translate(-50%, 50%)\" }\n                        : { top: \"50%\", insetInlineStart: fill, transform: \"translate(-50%, -50%)\" }\n                }\n                role=\"slider\"\n                tabIndex={0}\n                aria-valuemin={min}\n                aria-valuemax={max}\n                aria-valuenow={value}\n                aria-orientation={orientation}\n                aria-disabled={disabled || undefined}\n            \u002F>\n        \u003C\u002Fspan>\n    );\n}\n","src\u002Fcomponents\u002FSlider.tsx",[700,2440,2441,2447,2453,2459,2465,2471,2479,2487,2495,2509,2513,2537,2549,2560,2571,2583,2588,2592,2605,2621,2636,2651,2661,2671,2681,2693,2704,2736,2786,2808,2812,2819,2861,2885,2892,2913,2946,2951,2960,2966,2986,2994,2999,3038,3077,3082,3095,3106,3123,3138,3153,3167,3185,3190,3198,3205],{"__ignoreMap":824},[828,2442,2443,2445],{"class":830,"line":831},[828,2444,835],{"class":834},[828,2446,870],{"class":838},[828,2448,2449,2451],{"class":830,"line":865},[828,2450,1228],{"class":842},[828,2452,879],{"class":838},[828,2454,2455,2457],{"class":830,"line":873},[828,2456,1235],{"class":842},[828,2458,879],{"class":838},[828,2460,2461,2463],{"class":830,"line":882},[828,2462,1242],{"class":842},[828,2464,879],{"class":838},[828,2466,2467,2469],{"class":830,"line":890},[828,2468,1249],{"class":842},[828,2470,879],{"class":838},[828,2472,2473,2475,2477],{"class":830,"line":898},[828,2474,1256],{"class":834},[828,2476,1259],{"class":842},[828,2478,879],{"class":838},[828,2480,2481,2483,2485],{"class":830,"line":906},[828,2482,1256],{"class":834},[828,2484,1268],{"class":842},[828,2486,879],{"class":838},[828,2488,2489,2491,2493],{"class":830,"line":923},[828,2490,1256],{"class":834},[828,2492,1277],{"class":842},[828,2494,879],{"class":838},[828,2496,2497,2499,2501,2503,2505,2507],{"class":830,"line":929},[828,2498,909],{"class":838},[828,2500,849],{"class":834},[828,2502,1211],{"class":838},[828,2504,856],{"class":855},[828,2506,1188],{"class":838},[828,2508,862],{"class":838},[828,2510,2511],{"class":830,"line":950},[828,2512,926],{"emptyLinePlaceholder":223},[828,2514,2515,2518,2522,2525,2527,2529,2531,2533,2535],{"class":830,"line":955},[828,2516,2517],{"class":932},"interface",[828,2519,2521],{"class":2520},"sBMFI"," SliderComponentProps",[828,2523,2524],{"class":932}," extends",[828,2526,1259],{"class":2520},[828,2528,1078],{"class":838},[828,2530,1268],{"class":2520},[828,2532,1078],{"class":838},[828,2534,1277],{"class":2520},[828,2536,870],{"class":838},[828,2538,2539,2542,2544,2547],{"class":830,"line":973},[828,2540,2541],{"class":1176},"    value",[828,2543,1367],{"class":838},[828,2545,2546],{"class":2520}," number",[828,2548,862],{"class":838},[828,2550,2551,2554,2556,2558],{"class":830,"line":990},[828,2552,2553],{"class":1176},"    min",[828,2555,1367],{"class":838},[828,2557,2546],{"class":2520},[828,2559,862],{"class":838},[828,2561,2562,2565,2567,2569],{"class":830,"line":1007},[828,2563,2564],{"class":1176},"    max",[828,2566,1367],{"class":838},[828,2568,2546],{"class":2520},[828,2570,862],{"class":838},[828,2572,2573,2576,2578,2581],{"class":830,"line":1024},[828,2574,2575],{"class":1176},"    disabled",[828,2577,1367],{"class":838},[828,2579,2580],{"class":2520}," boolean",[828,2582,862],{"class":838},[828,2584,2585],{"class":830,"line":1029},[828,2586,2587],{"class":838},"}\n",[828,2589,2590],{"class":830,"line":1338},[828,2591,926],{"emptyLinePlaceholder":223},[828,2593,2594,2596,2599,2602],{"class":830,"line":1349},[828,2595,1032],{"class":834},[828,2597,2598],{"class":932}," function",[828,2600,2601],{"class":942}," Slider",[828,2603,2604],{"class":838},"({\n",[828,2606,2607,2611,2613,2615,2617,2619],{"class":830,"line":1361},[828,2608,2610],{"class":2609},"sHdIc","    color",[828,2612,1540],{"class":838},[828,2614,1211],{"class":838},[828,2616,1422],{"class":855},[828,2618,1188],{"class":838},[828,2620,879],{"class":838},[828,2622,2623,2626,2628,2630,2632,2634],{"class":830,"line":1372},[828,2624,2625],{"class":2609},"    size",[828,2627,1540],{"class":838},[828,2629,1211],{"class":838},[828,2631,1436],{"class":855},[828,2633,1188],{"class":838},[828,2635,879],{"class":838},[828,2637,2638,2641,2643,2645,2647,2649],{"class":830,"line":1382},[828,2639,2640],{"class":2609},"    orientation",[828,2642,1540],{"class":838},[828,2644,1211],{"class":838},[828,2646,1450],{"class":855},[828,2648,1188],{"class":838},[828,2650,879],{"class":838},[828,2652,2653,2655,2657,2659],{"class":830,"line":1393},[828,2654,2541],{"class":2609},[828,2656,1540],{"class":838},[828,2658,1463],{"class":1462},[828,2660,879],{"class":838},[828,2662,2663,2665,2667,2669],{"class":830,"line":1399},[828,2664,2553],{"class":2609},[828,2666,1540],{"class":838},[828,2668,1473],{"class":1462},[828,2670,879],{"class":838},[828,2672,2673,2675,2677,2679],{"class":830,"line":1409},[828,2674,2564],{"class":2609},[828,2676,1540],{"class":838},[828,2678,1483],{"class":1462},[828,2680,879],{"class":838},[828,2682,2683,2685,2687,2691],{"class":830,"line":1489},[828,2684,2575],{"class":2609},[828,2686,1540],{"class":838},[828,2688,2690],{"class":2689},"sfNiH"," false",[828,2692,879],{"class":838},[828,2694,2695,2698,2700,2702],{"class":830,"line":1497},[828,2696,2697],{"class":838},"}:",[828,2699,2521],{"class":2520},[828,2701,1492],{"class":838},[828,2703,870],{"class":838},[828,2705,2706,2708,2710,2712,2714,2716,2718,2720,2722,2724,2726,2728,2730,2732,2734],{"class":830,"line":1502},[828,2707,1534],{"class":932},[828,2709,1537],{"class":842},[828,2711,1540],{"class":838},[828,2713,1543],{"class":1176},[828,2715,2088],{"class":842},[828,2717,1555],{"class":838},[828,2719,1468],{"class":842},[828,2721,1566],{"class":1176},[828,2723,1569],{"class":838},[828,2725,1543],{"class":1176},[828,2727,1578],{"class":842},[828,2729,1555],{"class":838},[828,2731,1468],{"class":842},[828,2733,1492],{"class":1176},[828,2735,862],{"class":838},[828,2737,2738,2740,2742,2744,2746,2748,2750,2752,2754,2756,2758,2760,2762,2764,2766,2768,2770,2772,2774,2776,2778,2780,2782,2784],{"class":830,"line":1509},[828,2739,1534],{"class":932},[828,2741,1986],{"class":842},[828,2743,1540],{"class":838},[828,2745,1599],{"class":838},[828,2747,1602],{"class":842},[828,2749,1549],{"class":838},[828,2751,1563],{"class":942},[828,2753,1521],{"class":842},[828,2755,1611],{"class":1462},[828,2757,1078],{"class":838},[828,2759,1616],{"class":842},[828,2761,1549],{"class":838},[828,2763,1578],{"class":942},[828,2765,1521],{"class":842},[828,2767,1625],{"class":1462},[828,2769,1078],{"class":838},[828,2771,1630],{"class":842},[828,2773,1633],{"class":838},[828,2775,1483],{"class":1462},[828,2777,1638],{"class":842},[828,2779,909],{"class":838},[828,2781,1643],{"class":855},[828,2783,1646],{"class":838},[828,2785,862],{"class":838},[828,2787,2788,2790,2793,2795,2797,2800,2802,2804,2806],{"class":830,"line":1531},[828,2789,1534],{"class":932},[828,2791,2792],{"class":842}," isVertical",[828,2794,1540],{"class":838},[828,2796,1443],{"class":842},[828,2798,2799],{"class":838}," ===",[828,2801,1211],{"class":838},[828,2803,1971],{"class":855},[828,2805,1188],{"class":838},[828,2807,862],{"class":838},[828,2809,2810],{"class":830,"line":1593},[828,2811,926],{"emptyLinePlaceholder":223},[828,2813,2814,2816],{"class":830,"line":1651},[828,2815,1596],{"class":834},[828,2817,2818],{"class":1176}," (\n",[828,2820,2821,2823,2825,2828,2831,2833,2836,2838,2840,2842,2844,2846,2848,2851,2853,2856,2858],{"class":830,"line":1660},[828,2822,2210],{"class":838},[828,2824,828],{"class":842},[828,2826,2827],{"class":842}," className",[828,2829,2830],{"class":838},"={",[828,2832,2320],{"class":1176},[828,2834,2835],{"class":838},"({",[828,2837,1429],{"class":2609},[828,2839,1078],{"class":838},[828,2841,1443],{"class":2609},[828,2843,1078],{"class":838},[828,2845,1720],{"class":1176},[828,2847,1355],{"class":838},[828,2849,2850],{"class":2609}," String",[828,2852,1521],{"class":1176},[828,2854,2855],{"class":842},"disabled",[828,2857,1566],{"class":1176},[828,2859,2860],{"class":838},"})}>\n",[828,2862,2863,2865,2867,2869,2871,2874,2876,2878,2880,2882],{"class":830,"line":1665},[828,2864,2231],{"class":838},[828,2866,828],{"class":842},[828,2868,2827],{"class":842},[828,2870,2830],{"class":838},[828,2872,2873],{"class":1176},"sliderTrack",[828,2875,2835],{"class":838},[828,2877,1429],{"class":2609},[828,2879,1078],{"class":838},[828,2881,1443],{"class":2609},[828,2883,2884],{"class":838}," })}>\n",[828,2886,2887,2890],{"class":830,"line":1684},[828,2888,2889],{"class":838},"                \u003C",[828,2891,2277],{"class":2609},[828,2893,2894,2897,2899,2902,2904,2906,2908,2910],{"class":830,"line":1758},[828,2895,2896],{"class":842},"                    className",[828,2898,2830],{"class":838},[828,2900,2901],{"class":1176},"sliderRange",[828,2903,2835],{"class":838},[828,2905,1415],{"class":2609},[828,2907,1078],{"class":838},[828,2909,1443],{"class":2609},[828,2911,2912],{"class":838}," })}\n",[828,2914,2915,2918,2920,2923,2925,2927,2929,2931,2933,2935,2937,2939,2941,2943],{"class":830,"line":1765},[828,2916,2917],{"class":842},"                    style",[828,2919,2830],{"class":838},[828,2921,2922],{"class":1176},"isVertical ? ",[828,2924,1691],{"class":838},[828,2926,1981],{"class":2520},[828,2928,1355],{"class":838},[828,2930,1986],{"class":842},[828,2932,846],{"class":838},[828,2934,1742],{"class":838},[828,2936,839],{"class":838},[828,2938,2000],{"class":1176},[828,2940,1355],{"class":838},[828,2942,1986],{"class":842},[828,2944,2945],{"class":838}," }}\n",[828,2947,2948],{"class":830,"line":1819},[828,2949,2950],{"class":838},"                \u002F>\n",[828,2952,2953,2956,2958],{"class":830,"line":1873},[828,2954,2955],{"class":838},"            \u003C\u002F",[828,2957,828],{"class":842},[828,2959,1195],{"class":838},[828,2961,2962,2964],{"class":830,"line":1927},[828,2963,2231],{"class":838},[828,2965,2277],{"class":2609},[828,2967,2968,2971,2973,2976,2978,2980,2982,2984],{"class":830,"line":1932},[828,2969,2970],{"class":842},"                className",[828,2972,2830],{"class":838},[828,2974,2975],{"class":1176},"sliderThumb",[828,2977,2835],{"class":838},[828,2979,1415],{"class":2609},[828,2981,1078],{"class":838},[828,2983,1429],{"class":2609},[828,2985,2912],{"class":838},[828,2987,2988,2991],{"class":830,"line":1938},[828,2989,2990],{"class":842},"                style",[828,2992,2993],{"class":838},"={\n",[828,2995,2996],{"class":830,"line":1956},[828,2997,2998],{"class":842},"                    isVertical\n",[828,3000,3001,3004,3006,3008,3010,3012,3014,3016,3018,3020,3022,3024,3026,3028,3030,3032,3034,3036],{"class":830,"line":2014},[828,3002,3003],{"class":1176},"                        ? ",[828,3005,1691],{"class":838},[828,3007,2065],{"class":2520},[828,3009,1355],{"class":838},[828,3011,1211],{"class":838},[828,3013,2072],{"class":855},[828,3015,1188],{"class":838},[828,3017,1078],{"class":838},[828,3019,2079],{"class":2520},[828,3021,1355],{"class":838},[828,3023,1986],{"class":842},[828,3025,1078],{"class":838},[828,3027,2093],{"class":2520},[828,3029,1355],{"class":838},[828,3031,1211],{"class":838},[828,3033,2100],{"class":855},[828,3035,1188],{"class":838},[828,3037,2105],{"class":838},[828,3039,3040,3043,3045,3047,3049,3051,3053,3055,3057,3059,3061,3063,3065,3067,3069,3071,3073,3075],{"class":830,"line":2021},[828,3041,3042],{"class":838},"                        :",[828,3044,839],{"class":838},[828,3046,2116],{"class":1176},[828,3048,1355],{"class":838},[828,3050,1211],{"class":838},[828,3052,2072],{"class":855},[828,3054,1188],{"class":838},[828,3056,1078],{"class":838},[828,3058,2065],{"class":1176},[828,3060,1355],{"class":838},[828,3062,1986],{"class":842},[828,3064,1078],{"class":838},[828,3066,2093],{"class":1176},[828,3068,1355],{"class":838},[828,3070,1211],{"class":838},[828,3072,2147],{"class":855},[828,3074,1188],{"class":838},[828,3076,2105],{"class":838},[828,3078,3079],{"class":830,"line":2039},[828,3080,3081],{"class":838},"                }\n",[828,3083,3084,3087,3089,3091,3093],{"class":830,"line":2057},[828,3085,3086],{"class":842},"                role",[828,3088,939],{"class":838},[828,3090,1188],{"class":838},[828,3092,2320],{"class":855},[828,3094,2054],{"class":838},[828,3096,3097,3100,3102,3104],{"class":830,"line":2108},[828,3098,3099],{"class":842},"                tabIndex",[828,3101,2830],{"class":838},[828,3103,1625],{"class":1462},[828,3105,2587],{"class":838},[828,3107,3108,3111,3114,3117,3119,3121],{"class":830,"line":2154},[828,3109,3110],{"class":842},"                aria",[828,3112,3113],{"class":838},"-",[828,3115,3116],{"class":842},"valuemin",[828,3118,2830],{"class":838},[828,3120,1563],{"class":842},[828,3122,2587],{"class":838},[828,3124,3125,3127,3129,3132,3134,3136],{"class":830,"line":2161},[828,3126,3110],{"class":842},[828,3128,3113],{"class":838},[828,3130,3131],{"class":842},"valuemax",[828,3133,2830],{"class":838},[828,3135,1578],{"class":842},[828,3137,2587],{"class":838},[828,3139,3140,3142,3144,3147,3149,3151],{"class":830,"line":2171},[828,3141,3110],{"class":842},[828,3143,3113],{"class":838},[828,3145,3146],{"class":842},"valuenow",[828,3148,2830],{"class":838},[828,3150,2088],{"class":842},[828,3152,2587],{"class":838},[828,3154,3155,3157,3159,3161,3163,3165],{"class":830,"line":2176},[828,3156,3110],{"class":842},[828,3158,3113],{"class":838},[828,3160,1715],{"class":842},[828,3162,2830],{"class":838},[828,3164,1715],{"class":842},[828,3166,2587],{"class":838},[828,3168,3169,3171,3173,3175,3177,3180,3183],{"class":830,"line":2185},[828,3170,3110],{"class":842},[828,3172,3113],{"class":838},[828,3174,2855],{"class":842},[828,3176,2830],{"class":838},[828,3178,3179],{"class":1176},"disabled || ",[828,3181,3182],{"class":842},"undefined",[828,3184,2587],{"class":838},[828,3186,3187],{"class":830,"line":2207},[828,3188,3189],{"class":838},"            \u002F>\n",[828,3191,3192,3194,3196],{"class":830,"line":2228},[828,3193,2265],{"class":838},[828,3195,828],{"class":842},[828,3197,1195],{"class":838},[828,3199,3200,3203],{"class":830,"line":2262},[828,3201,3202],{"class":1176},"    )",[828,3204,862],{"class":838},[828,3206,3207],{"class":830,"line":2272},[828,3208,2587],{"class":838},[1159,3210,3211,3214,3457],{"v-slot:other":824},[692,3212,3213],{},"Each runtime returns a class string. Apply them however your framework binds classes, and set the fill length and thumb offset from the current value:",[819,3215,3218],{"className":821,"code":3216,"filename":3217,"language":823,"meta":824,"style":824},"import { slider, sliderTrack, sliderRange, sliderThumb } from \"virtual:styleframe\";\n\nconst rootClasses = slider({ size: \"md\", orientation: \"horizontal\", disabled: \"false\" });\n\u002F\u002F → \"slider _position:relative _display:inline-flex ...\"\nconst trackClasses = sliderTrack({ size: \"md\", orientation: \"horizontal\" });\n\u002F\u002F → \"slider-track _background:gray-200 _border-radius:full _overflow:hidden ...\"\nconst rangeClasses = sliderRange({ color: \"primary\", orientation: \"horizontal\" });\n\u002F\u002F → \"slider-range _background:primary _height:full ...\"\nconst thumbClasses = sliderThumb({ color: \"primary\", size: \"md\" });\n\u002F\u002F → \"slider-thumb _background:primary _border-radius:full ...\"\n","src\u002Fcomponents\u002Fslider.ts",[700,3219,3220,3253,3257,3311,3316,3358,3363,3405,3410,3452],{"__ignoreMap":824},[828,3221,3222,3224,3226,3229,3231,3233,3235,3237,3239,3241,3243,3245,3247,3249,3251],{"class":830,"line":831},[828,3223,835],{"class":834},[828,3225,839],{"class":838},[828,3227,3228],{"class":842}," slider",[828,3230,1078],{"class":838},[828,3232,1783],{"class":842},[828,3234,1078],{"class":838},[828,3236,1837],{"class":842},[828,3238,1078],{"class":838},[828,3240,1891],{"class":842},[828,3242,846],{"class":838},[828,3244,849],{"class":834},[828,3246,1211],{"class":838},[828,3248,856],{"class":855},[828,3250,1188],{"class":838},[828,3252,862],{"class":838},[828,3254,3255],{"class":830,"line":865},[828,3256,926],{"emptyLinePlaceholder":223},[828,3258,3259,3261,3263,3265,3267,3269,3271,3273,3275,3277,3279,3281,3283,3285,3287,3289,3291,3293,3295,3297,3299,3301,3303,3305,3307,3309],{"class":830,"line":873},[828,3260,933],{"class":932},[828,3262,1670],{"class":842},[828,3264,939],{"class":838},[828,3266,3228],{"class":942},[828,3268,1521],{"class":842},[828,3270,1691],{"class":838},[828,3272,1429],{"class":1176},[828,3274,1355],{"class":838},[828,3276,1211],{"class":838},[828,3278,1436],{"class":855},[828,3280,1188],{"class":838},[828,3282,1078],{"class":838},[828,3284,1443],{"class":1176},[828,3286,1355],{"class":838},[828,3288,1211],{"class":838},[828,3290,1450],{"class":855},[828,3292,1188],{"class":838},[828,3294,1078],{"class":838},[828,3296,1720],{"class":1176},[828,3298,1355],{"class":838},[828,3300,1211],{"class":838},[828,3302,1747],{"class":855},[828,3304,1188],{"class":838},[828,3306,846],{"class":838},[828,3308,1492],{"class":842},[828,3310,862],{"class":838},[828,3312,3313],{"class":830,"line":882},[828,3314,3315],{"class":1505},"\u002F\u002F → \"slider _position:relative _display:inline-flex ...\"\n",[828,3317,3318,3320,3322,3324,3326,3328,3330,3332,3334,3336,3338,3340,3342,3344,3346,3348,3350,3352,3354,3356],{"class":830,"line":890},[828,3319,933],{"class":932},[828,3321,1770],{"class":842},[828,3323,939],{"class":838},[828,3325,1783],{"class":942},[828,3327,1521],{"class":842},[828,3329,1691],{"class":838},[828,3331,1429],{"class":1176},[828,3333,1355],{"class":838},[828,3335,1211],{"class":838},[828,3337,1436],{"class":855},[828,3339,1188],{"class":838},[828,3341,1078],{"class":838},[828,3343,1443],{"class":1176},[828,3345,1355],{"class":838},[828,3347,1211],{"class":838},[828,3349,1450],{"class":855},[828,3351,1188],{"class":838},[828,3353,846],{"class":838},[828,3355,1492],{"class":842},[828,3357,862],{"class":838},[828,3359,3360],{"class":830,"line":898},[828,3361,3362],{"class":1505},"\u002F\u002F → \"slider-track _background:gray-200 _border-radius:full _overflow:hidden ...\"\n",[828,3364,3365,3367,3369,3371,3373,3375,3377,3379,3381,3383,3385,3387,3389,3391,3393,3395,3397,3399,3401,3403],{"class":830,"line":906},[828,3366,933],{"class":932},[828,3368,1824],{"class":842},[828,3370,939],{"class":838},[828,3372,1837],{"class":942},[828,3374,1521],{"class":842},[828,3376,1691],{"class":838},[828,3378,1415],{"class":1176},[828,3380,1355],{"class":838},[828,3382,1211],{"class":838},[828,3384,1422],{"class":855},[828,3386,1188],{"class":838},[828,3388,1078],{"class":838},[828,3390,1443],{"class":1176},[828,3392,1355],{"class":838},[828,3394,1211],{"class":838},[828,3396,1450],{"class":855},[828,3398,1188],{"class":838},[828,3400,846],{"class":838},[828,3402,1492],{"class":842},[828,3404,862],{"class":838},[828,3406,3407],{"class":830,"line":923},[828,3408,3409],{"class":1505},"\u002F\u002F → \"slider-range _background:primary _height:full ...\"\n",[828,3411,3412,3414,3416,3418,3420,3422,3424,3426,3428,3430,3432,3434,3436,3438,3440,3442,3444,3446,3448,3450],{"class":830,"line":929},[828,3413,933],{"class":932},[828,3415,1878],{"class":842},[828,3417,939],{"class":838},[828,3419,1891],{"class":942},[828,3421,1521],{"class":842},[828,3423,1691],{"class":838},[828,3425,1415],{"class":1176},[828,3427,1355],{"class":838},[828,3429,1211],{"class":838},[828,3431,1422],{"class":855},[828,3433,1188],{"class":838},[828,3435,1078],{"class":838},[828,3437,1429],{"class":1176},[828,3439,1355],{"class":838},[828,3441,1211],{"class":838},[828,3443,1436],{"class":855},[828,3445,1188],{"class":838},[828,3447,846],{"class":838},[828,3449,1492],{"class":842},[828,3451,862],{"class":838},[828,3453,3454],{"class":830,"line":950},[828,3455,3456],{"class":1505},"\u002F\u002F → \"slider-thumb _background:primary _border-radius:full ...\"\n",[819,3458,3463],{"className":3459,"code":3460,"filename":3461,"language":3462,"meta":824,"style":824},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cspan class=\"slider _position:relative ...\">\n    \u003Cspan class=\"slider-track _background:gray-200 ...\">\n        \u003Cspan class=\"slider-range _background:primary ...\" style=\"width: 50%\">\u003C\u002Fspan>\n    \u003C\u002Fspan>\n    \u003Cspan\n        class=\"slider-thumb _background:primary ...\"\n        style=\"top: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%)\"\n        role=\"slider\"\n        tabindex=\"0\"\n        aria-valuenow=\"50\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n    >\u003C\u002Fspan>\n\u003C\u002Fspan>\n","src\u002Fcomponents\u002Fslider.html","html",[700,3464,3465,3485,3504,3540,3548,3554,3568,3582,3595,3608,3622,3635,3648,3657],{"__ignoreMap":824},[828,3466,3467,3469,3471,3474,3476,3478,3481,3483],{"class":830,"line":831},[828,3468,1173],{"class":838},[828,3470,828],{"class":1176},[828,3472,3473],{"class":932}," class",[828,3475,939],{"class":838},[828,3477,1188],{"class":838},[828,3479,3480],{"class":855},"slider _position:relative ...",[828,3482,1188],{"class":838},[828,3484,1195],{"class":838},[828,3486,3487,3489,3491,3493,3495,3497,3500,3502],{"class":830,"line":865},[828,3488,2188],{"class":838},[828,3490,828],{"class":1176},[828,3492,3473],{"class":932},[828,3494,939],{"class":838},[828,3496,1188],{"class":838},[828,3498,3499],{"class":855},"slider-track _background:gray-200 ...",[828,3501,1188],{"class":838},[828,3503,1195],{"class":838},[828,3505,3506,3508,3510,3512,3514,3516,3519,3521,3524,3526,3528,3531,3533,3536,3538],{"class":830,"line":873},[828,3507,2210],{"class":838},[828,3509,828],{"class":1176},[828,3511,3473],{"class":932},[828,3513,939],{"class":838},[828,3515,1188],{"class":838},[828,3517,3518],{"class":855},"slider-range _background:primary ...",[828,3520,1188],{"class":838},[828,3522,3523],{"class":932}," style",[828,3525,939],{"class":838},[828,3527,1188],{"class":838},[828,3529,3530],{"class":855},"width: 50%",[828,3532,1188],{"class":838},[828,3534,3535],{"class":838},">\u003C\u002F",[828,3537,828],{"class":1176},[828,3539,1195],{"class":838},[828,3541,3542,3544,3546],{"class":830,"line":882},[828,3543,2419],{"class":838},[828,3545,828],{"class":1176},[828,3547,1195],{"class":838},[828,3549,3550,3552],{"class":830,"line":890},[828,3551,2188],{"class":838},[828,3553,2277],{"class":1176},[828,3555,3556,3559,3561,3563,3566],{"class":830,"line":898},[828,3557,3558],{"class":932},"        class",[828,3560,939],{"class":838},[828,3562,1188],{"class":838},[828,3564,3565],{"class":855},"slider-thumb _background:primary ...",[828,3567,2054],{"class":838},[828,3569,3570,3573,3575,3577,3580],{"class":830,"line":906},[828,3571,3572],{"class":932},"        style",[828,3574,939],{"class":838},[828,3576,1188],{"class":838},[828,3578,3579],{"class":855},"top: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%)",[828,3581,2054],{"class":838},[828,3583,3584,3587,3589,3591,3593],{"class":830,"line":923},[828,3585,3586],{"class":932},"        role",[828,3588,939],{"class":838},[828,3590,1188],{"class":838},[828,3592,2320],{"class":855},[828,3594,2054],{"class":838},[828,3596,3597,3600,3602,3604,3606],{"class":830,"line":929},[828,3598,3599],{"class":932},"        tabindex",[828,3601,939],{"class":838},[828,3603,1188],{"class":838},[828,3605,1625],{"class":855},[828,3607,2054],{"class":838},[828,3609,3610,3613,3615,3617,3620],{"class":830,"line":950},[828,3611,3612],{"class":932},"        aria-valuenow",[828,3614,939],{"class":838},[828,3616,1188],{"class":838},[828,3618,3619],{"class":855},"50",[828,3621,2054],{"class":838},[828,3623,3624,3627,3629,3631,3633],{"class":830,"line":955},[828,3625,3626],{"class":932},"        aria-valuemin",[828,3628,939],{"class":838},[828,3630,1188],{"class":838},[828,3632,1625],{"class":855},[828,3634,2054],{"class":838},[828,3636,3637,3640,3642,3644,3646],{"class":830,"line":973},[828,3638,3639],{"class":932},"        aria-valuemax",[828,3641,939],{"class":838},[828,3643,1188],{"class":838},[828,3645,1611],{"class":855},[828,3647,2054],{"class":838},[828,3649,3650,3653,3655],{"class":830,"line":990},[828,3651,3652],{"class":838},"    >\u003C\u002F",[828,3654,828],{"class":1176},[828,3656,1195],{"class":838},[828,3658,3659,3661,3663],{"class":830,"line":1007},[828,3660,2164],{"class":838},[828,3662,828],{"class":1176},[828,3664,1195],{"class":838},[803,3666,3668],{"id":3667},"see-it-in-action","See it in action",[3670,3671],"story-preview",{"story":3672,":panel":1737},"theme-recipes-forms-slider--default",[688,3674,195],{"id":3675},"colors",[692,3677,3678,3679,3681,3682,3681,3685,3681,3688,3681,3691,3681,3694,3697,3698,3681,3701,3681,3704,3707,3708,3681,3710,3681,3712,3714],{},"The Slider range and thumb recipes include 9 color variants: the 6 semantic colors (",[700,3680,1422],{},", ",[700,3683,3684],{},"secondary",[700,3686,3687],{},"success",[700,3689,3690],{},"info",[700,3692,3693],{},"warning",[700,3695,3696],{},"error",") plus 3 neutral-spectrum colors (",[700,3699,3700],{},"light",[700,3702,3703],{},"dark",[700,3705,3706],{},"neutral","). The track recipe uses only the 3 neutral-spectrum colors (",[700,3709,3700],{},[700,3711,3703],{},[700,3713,3706],{},") to provide a subtle rail behind the fill.",[692,3716,3717,3718,3720],{},"Each color is applied through compound variants with automatic dark mode overrides. The ",[700,3719,3706],{}," color adapts between light and dark mode automatically.",[3670,3722],{"story":3723,":panel":1737},"theme-recipes-forms-slider--primary",[3725,3726,3728],"h3",{"id":3727},"color-reference","Color Reference",[3670,3730],{"story":3731,":height":3732},"theme-recipes-forms-slider--all-colors","600",[692,3734,3735],{},[696,3736,3737],{},"Range & thumb colors:",[3739,3740,3741,3757],"table",{},[3742,3743,3744],"thead",{},[3745,3746,3747,3751,3754],"tr",{},[3748,3749,3750],"th",{},"Color",[3748,3752,3753],{},"Token",[3748,3755,3756],{},"Use Case",[3758,3759,3760,3775,3789,3803,3817,3831,3845,3859,3873],"tbody",{},[3745,3761,3762,3767,3772],{},[3763,3764,3765],"td",{},[700,3766,1422],{},[3763,3768,3769],{},[700,3770,3771],{},"@color.primary",[3763,3773,3774],{},"Default. Primary brand control",[3745,3776,3777,3781,3786],{},[3763,3778,3779],{},[700,3780,3684],{},[3763,3782,3783],{},[700,3784,3785],{},"@color.secondary",[3763,3787,3788],{},"Secondary or supporting control",[3745,3790,3791,3795,3800],{},[3763,3792,3793],{},[700,3794,3687],{},[3763,3796,3797],{},[700,3798,3799],{},"@color.success",[3763,3801,3802],{},"Positive ranges, confirmations",[3745,3804,3805,3809,3814],{},[3763,3806,3807],{},[700,3808,3690],{},[3763,3810,3811],{},[700,3812,3813],{},"@color.info",[3763,3815,3816],{},"Informational ranges",[3745,3818,3819,3823,3828],{},[3763,3820,3821],{},[700,3822,3693],{},[3763,3824,3825],{},[700,3826,3827],{},"@color.warning",[3763,3829,3830],{},"Caution states, approaching limits",[3745,3832,3833,3837,3842],{},[3763,3834,3835],{},[700,3836,3696],{},[3763,3838,3839],{},[700,3840,3841],{},"@color.error",[3763,3843,3844],{},"Error states, destructive ranges",[3745,3846,3847,3851,3856],{},[3763,3848,3849],{},[700,3850,3700],{},[3763,3852,3853],{},[700,3854,3855],{},"@color.gray-400",[3763,3857,3858],{},"Light-themed fill, fixed across color schemes",[3745,3860,3861,3865,3870],{},[3763,3862,3863],{},[700,3864,3703],{},[3763,3866,3867],{},[700,3868,3869],{},"@color.gray-600",[3763,3871,3872],{},"Dark-themed fill, fixed across color schemes",[3745,3874,3875,3879,3882],{},[3763,3876,3877],{},[700,3878,3706],{},[3763,3880,3881],{},"Adaptive",[3763,3883,3884],{},"Light fill in light mode, dark fill in dark mode",[692,3886,3887],{},[696,3888,3889],{},"Track colors:",[3739,3891,3892,3902],{},[3742,3893,3894],{},[3745,3895,3896,3898,3900],{},[3748,3897,3750],{},[3748,3899,3753],{},[3748,3901,3756],{},[3758,3903,3904,3918,3932],{},[3745,3905,3906,3910,3915],{},[3763,3907,3908],{},[700,3909,3700],{},[3763,3911,3912],{},[700,3913,3914],{},"@color.gray-200",[3763,3916,3917],{},"Light rail, fixed across color schemes",[3745,3919,3920,3924,3929],{},[3763,3921,3922],{},[700,3923,3703],{},[3763,3925,3926],{},[700,3927,3928],{},"@color.gray-800",[3763,3930,3931],{},"Dark rail, fixed across color schemes",[3745,3933,3934,3938,3940],{},[3763,3935,3936],{},[700,3937,3706],{},[3763,3939,3881],{},[3763,3941,3942],{},"Default. Light rail in light mode, dark rail in dark mode",[3944,3945,3946,3949,3950,3952],"tip",{},[696,3947,3948],{},"Pro tip:"," Keep the track ",[700,3951,3706],{}," and let the range and thumb carry the semantic color. The rail is a background; the fill communicates the value's meaning.",[688,3954,3956],{"id":3955},"sizes","Sizes",[692,3958,3959,3960,3963,3964,3967,3968,3970],{},"Five size variants from ",[700,3961,3962],{},"xs"," to ",[700,3965,3966],{},"xl"," control the rail thickness (height, or width in vertical orientation) and the thumb diameter. Pass the same ",[700,3969,1702],{}," to the root, track, and thumb so the handle and rail stay proportional.",[3670,3972],{"story":3973,":panel":1737},"theme-recipes-forms-slider--medium",[3725,3975,3977],{"id":3976},"size-reference","Size Reference",[3670,3979],{"story":3980,":height":3981},"theme-recipes-forms-slider--all-sizes","400",[3739,3983,3984,3999],{},[3742,3985,3986],{},[3745,3987,3988,3991,3994,3997],{},[3748,3989,3990],{},"Size",[3748,3992,3993],{},"Rail Thickness",[3748,3995,3996],{},"Thumb Diameter",[3748,3998,3756],{},[3758,4000,4001,4020,4040,4059,4078],{},[3745,4002,4003,4007,4012,4017],{},[3763,4004,4005],{},[700,4006,3962],{},[3763,4008,4009],{},[700,4010,4011],{},"@0.25",[3763,4013,4014],{},[700,4015,4016],{},"@0.75",[3763,4018,4019],{},"Thin, compact controls",[3745,4021,4022,4027,4032,4037],{},[3763,4023,4024],{},[700,4025,4026],{},"sm",[3763,4028,4029],{},[700,4030,4031],{},"@0.375",[3763,4033,4034],{},[700,4035,4036],{},"@1",[3763,4038,4039],{},"Dense forms",[3745,4041,4042,4046,4051,4056],{},[3763,4043,4044],{},[700,4045,1436],{},[3763,4047,4048],{},[700,4049,4050],{},"@0.5",[3763,4052,4053],{},[700,4054,4055],{},"@1.25",[3763,4057,4058],{},"Default. Standard controls",[3745,4060,4061,4066,4070,4075],{},[3763,4062,4063],{},[700,4064,4065],{},"lg",[3763,4067,4068],{},[700,4069,4016],{},[3763,4071,4072],{},[700,4073,4074],{},"@1.5",[3763,4076,4077],{},"Prominent controls",[3745,4079,4080,4084,4088,4093],{},[3763,4081,4082],{},[700,4083,3966],{},[3763,4085,4086],{},[700,4087,4036],{},[3763,4089,4090],{},[700,4091,4092],{},"@2",[3763,4094,4095],{},"Large, touch-friendly controls",[4097,4098,4099,4102],"note",{},[696,4100,4101],{},"Good to know:"," The thumb diameter sets the root's cross-axis clearance, so the handle is never clipped by adjacent content.",[688,4104,4105],{"id":1715},"Orientation",[692,4107,694,4108,4110,4111,4113,4114,1549],{},[700,4109,1715],{}," variant controls the layout direction of the slider. Two options are available: ",[700,4112,1450],{}," (default) and ",[700,4115,1971],{},[3725,4117,4118],{"id":1450},"Horizontal",[692,4120,4121,4122,4125],{},"The range fills from the start of the track. The root stretches to ",[700,4123,4124],{},"width: 100%"," of its container.",[3670,4127],{"story":3672,":panel":1737},[3725,4129,4130],{"id":1971},"Vertical",[692,4132,4133,4134,4137],{},"The range fills from the bottom of the track. The root stretches to ",[700,4135,4136],{},"height: 100%",", so the parent container must have an explicit height for a vertical slider to be visible.",[3670,4139],{"story":4140,":height":4141},"theme-recipes-forms-slider--vertical","300",[3739,4143,4144,4158],{},[3742,4145,4146],{},[3745,4147,4148,4150,4153,4156],{},[3748,4149,4105],{},[3748,4151,4152],{},"Fill Direction",[3748,4154,4155],{},"Root Sizing",[3748,4157,3756],{},[3758,4159,4160,4176],{},[3745,4161,4162,4166,4169,4173],{},[3763,4163,4164],{},[700,4165,1450],{},[3763,4167,4168],{},"Start to end",[3763,4170,4171],{},[700,4172,4124],{},[3763,4174,4175],{},"Default. Standard sliders",[3745,4177,4178,4182,4185,4189],{},[3763,4179,4180],{},[700,4181,1971],{},[3763,4183,4184],{},"Bottom to top",[3763,4186,4187],{},[700,4188,4136],{},[3763,4190,4191],{},"Volume, brightness, level controls",[688,4193,4194],{"id":2855},"Disabled",[692,4196,4197,4198,4200,4201,4204],{},"The root recipe exposes a ",[700,4199,2855],{}," variant. When set, it dims the whole control and sets ",[700,4202,4203],{},"pointer-events: none",", which cascades to the track, range, and thumb — you only set it in one place.",[3670,4206],{"story":4207,":panel":1737},"theme-recipes-forms-slider--disabled",[819,4209,4211],{"className":821,"code":4210,"language":823,"meta":824,"style":824},"slider({ disabled: \"true\" });\n\u002F\u002F → \"slider ... _opacity:0.5 _cursor:not-allowed _pointer-events:none\"\n",[700,4212,4213,4237],{"__ignoreMap":824},[828,4214,4215,4217,4219,4221,4223,4225,4227,4229,4231,4233,4235],{"class":830,"line":831},[828,4216,2320],{"class":942},[828,4218,1521],{"class":842},[828,4220,1691],{"class":838},[828,4222,1720],{"class":1176},[828,4224,1355],{"class":838},[828,4226,1211],{"class":838},[828,4228,1737],{"class":855},[828,4230,1188],{"class":838},[828,4232,846],{"class":838},[828,4234,1492],{"class":842},[828,4236,862],{"class":838},[828,4238,4239],{"class":830,"line":865},[828,4240,4241],{"class":1505},"\u002F\u002F → \"slider ... _opacity:0.5 _cursor:not-allowed _pointer-events:none\"\n",[4097,4243,4244,4246,4247,4250],{},[696,4245,4101],{}," Mirror the disabled state to ",[700,4248,4249],{},"aria-disabled"," on the thumb so assistive technology announces it, in addition to the recipe's visual treatment.",[688,4252,4254],{"id":4253},"anatomy","Anatomy",[692,4256,4257],{},"The Slider recipe is composed of four recipes that work together:",[3739,4259,4260,4273],{},[3742,4261,4262],{},[3745,4263,4264,4267,4270],{},[3748,4265,4266],{},"Part",[3748,4268,4269],{},"Recipe",[3748,4271,4272],{},"Role",[3758,4274,4275,4289,4307,4321],{},[3745,4276,4277,4282,4286],{},[3763,4278,4279],{},[696,4280,4281],{},"Root",[3763,4283,4284],{},[700,4285,702],{},[3763,4287,4288],{},"Positioning wrapper. Owns orientation, thumb clearance, and the disabled state",[3745,4290,4291,4296,4300],{},[3763,4292,4293],{},[696,4294,4295],{},"Track",[3763,4297,4298],{},[700,4299,706],{},[3763,4301,4302,4303,4306],{},"Neutral rail with ",[700,4304,4305],{},"overflow: hidden",". Holds the range",[3745,4308,4309,4314,4318],{},[3763,4310,4311],{},[696,4312,4313],{},"Range",[3763,4315,4316],{},[700,4317,710],{},[3763,4319,4320],{},"Colored fill from the start of the track to the thumb",[3745,4322,4323,4328,4332],{},[3763,4324,4325],{},[696,4326,4327],{},"Thumb",[3763,4329,4330],{},[700,4331,714],{},[3763,4333,4334],{},"Draggable handle with focus, hover, and active states",[692,4336,4337,4338,4341,4342,4344,4345,4348],{},"The thumb is a ",[696,4339,4340],{},"sibling"," of the track, not a child: the track clips its content with ",[700,4343,4305],{},", which would crop the larger handle. The root is ",[700,4346,4347],{},"position: relative"," so the thumb can be positioned absolutely along the track.",[819,4350,4352],{"className":3459,"code":4351,"language":3462,"meta":824,"style":824},"\u003C!-- All four parts working together -->\n\u003Cspan class=\"slider(...)\">\n    \u003Cspan class=\"sliderTrack(...)\">\n        \u003Cspan class=\"sliderRange(...)\" style=\"width: 50%\">\u003C\u002Fspan>\n    \u003C\u002Fspan>\n    \u003Cspan class=\"sliderThumb(...)\" style=\"inset-inline-start: 50%\" role=\"slider\">\u003C\u002Fspan>\n\u003C\u002Fspan>\n",[700,4353,4354,4359,4378,4397,4430,4438,4483],{"__ignoreMap":824},[828,4355,4356],{"class":830,"line":831},[828,4357,4358],{"class":1505},"\u003C!-- All four parts working together -->\n",[828,4360,4361,4363,4365,4367,4369,4371,4374,4376],{"class":830,"line":865},[828,4362,1173],{"class":838},[828,4364,828],{"class":1176},[828,4366,3473],{"class":932},[828,4368,939],{"class":838},[828,4370,1188],{"class":838},[828,4372,4373],{"class":855},"slider(...)",[828,4375,1188],{"class":838},[828,4377,1195],{"class":838},[828,4379,4380,4382,4384,4386,4388,4390,4393,4395],{"class":830,"line":873},[828,4381,2188],{"class":838},[828,4383,828],{"class":1176},[828,4385,3473],{"class":932},[828,4387,939],{"class":838},[828,4389,1188],{"class":838},[828,4391,4392],{"class":855},"sliderTrack(...)",[828,4394,1188],{"class":838},[828,4396,1195],{"class":838},[828,4398,4399,4401,4403,4405,4407,4409,4412,4414,4416,4418,4420,4422,4424,4426,4428],{"class":830,"line":882},[828,4400,2210],{"class":838},[828,4402,828],{"class":1176},[828,4404,3473],{"class":932},[828,4406,939],{"class":838},[828,4408,1188],{"class":838},[828,4410,4411],{"class":855},"sliderRange(...)",[828,4413,1188],{"class":838},[828,4415,3523],{"class":932},[828,4417,939],{"class":838},[828,4419,1188],{"class":838},[828,4421,3530],{"class":855},[828,4423,1188],{"class":838},[828,4425,3535],{"class":838},[828,4427,828],{"class":1176},[828,4429,1195],{"class":838},[828,4431,4432,4434,4436],{"class":830,"line":890},[828,4433,2419],{"class":838},[828,4435,828],{"class":1176},[828,4437,1195],{"class":838},[828,4439,4440,4442,4444,4446,4448,4450,4453,4455,4457,4459,4461,4464,4466,4469,4471,4473,4475,4477,4479,4481],{"class":830,"line":898},[828,4441,2188],{"class":838},[828,4443,828],{"class":1176},[828,4445,3473],{"class":932},[828,4447,939],{"class":838},[828,4449,1188],{"class":838},[828,4451,4452],{"class":855},"sliderThumb(...)",[828,4454,1188],{"class":838},[828,4456,3523],{"class":932},[828,4458,939],{"class":838},[828,4460,1188],{"class":838},[828,4462,4463],{"class":855},"inset-inline-start: 50%",[828,4465,1188],{"class":838},[828,4467,4468],{"class":932}," role",[828,4470,939],{"class":838},[828,4472,1188],{"class":838},[828,4474,2320],{"class":855},[828,4476,1188],{"class":838},[828,4478,3535],{"class":838},[828,4480,828],{"class":1176},[828,4482,1195],{"class":838},[828,4484,4485,4487,4489],{"class":830,"line":906},[828,4486,2164],{"class":838},[828,4488,828],{"class":1176},[828,4490,1195],{"class":838},[3944,4492,4493,4495,4496,4498],{},[696,4494,3948],{}," The range and thumb share the same ",[700,4497,1852],{}," so the active value reads as one coloured unit. Drive their position from the value with an inline style (or a CSS custom property) — the recipes intentionally leave layout to the data.",[688,4500,568],{"id":4501},"accessibility",[739,4503,4504],{},[742,4505,4506,4512,4513,4515],{},[696,4507,4508,4509,4511],{},"Use the ",[700,4510,2320],{}," role."," Apply ",[700,4514,762],{}," to the thumb element. This tells assistive technology that the element represents an adjustable value.",[819,4517,4519],{"className":3459,"code":4518,"language":3462,"meta":824,"style":824},"\u003Cspan class=\"sliderThumb(...)\" role=\"slider\" tabindex=\"0\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\">\u003C\u002Fspan>\n",[700,4520,4521],{"__ignoreMap":824},[828,4522,4523,4525,4527,4529,4531,4533,4535,4537,4539,4541,4543,4545,4547,4550,4552,4554,4556,4558,4561,4563,4565,4567,4569,4572,4574,4576,4578,4580,4583,4585,4587,4589,4591,4593,4595],{"class":830,"line":831},[828,4524,1173],{"class":838},[828,4526,828],{"class":1176},[828,4528,3473],{"class":932},[828,4530,939],{"class":838},[828,4532,1188],{"class":838},[828,4534,4452],{"class":855},[828,4536,1188],{"class":838},[828,4538,4468],{"class":932},[828,4540,939],{"class":838},[828,4542,1188],{"class":838},[828,4544,2320],{"class":855},[828,4546,1188],{"class":838},[828,4548,4549],{"class":932}," tabindex",[828,4551,939],{"class":838},[828,4553,1188],{"class":838},[828,4555,1625],{"class":855},[828,4557,1188],{"class":838},[828,4559,4560],{"class":932}," aria-valuenow",[828,4562,939],{"class":838},[828,4564,1188],{"class":838},[828,4566,3619],{"class":855},[828,4568,1188],{"class":838},[828,4570,4571],{"class":932}," aria-valuemin",[828,4573,939],{"class":838},[828,4575,1188],{"class":838},[828,4577,1625],{"class":855},[828,4579,1188],{"class":838},[828,4581,4582],{"class":932}," aria-valuemax",[828,4584,939],{"class":838},[828,4586,1188],{"class":838},[828,4588,1611],{"class":855},[828,4590,1188],{"class":838},[828,4592,3535],{"class":838},[828,4594,828],{"class":1176},[828,4596,1195],{"class":838},[739,4598,4599,4615],{},[742,4600,4601,4614],{},[696,4602,4603,4604,3681,4607,4610,4611,1549],{},"Set ",[700,4605,4606],{},"aria-valuenow",[700,4608,4609],{},"aria-valuemin",", and ",[700,4612,4613],{},"aria-valuemax"," These attributes communicate the current value and its bounds to screen readers.",[742,4616,4617,4620,4621,4624,4625,1569,4628,4631,4632,4635],{},[696,4618,4619],{},"Make the thumb focusable and keyboard-operable."," Give the thumb ",[700,4622,4623],{},"tabindex=\"0\""," and handle arrow keys (increment\u002Fdecrement by step), plus ",[700,4626,4627],{},"Home",[700,4629,4630],{},"End"," to jump to the minimum and maximum. The recipe's ",[700,4633,4634],{},":focus-visible"," ring makes keyboard focus visible.",[819,4637,4639],{"className":3459,"code":4638,"language":3462,"meta":824,"style":824},"\u003Cspan role=\"slider\" tabindex=\"0\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-orientation=\"horizontal\">\u003C\u002Fspan>\n",[700,4640,4641],{"__ignoreMap":824},[828,4642,4643,4645,4647,4649,4651,4653,4655,4657,4659,4661,4663,4665,4667,4669,4671,4673,4675,4677,4679,4681,4683,4685,4687,4689,4691,4693,4695,4697,4700,4702,4704,4706,4708,4710,4712],{"class":830,"line":831},[828,4644,1173],{"class":838},[828,4646,828],{"class":1176},[828,4648,4468],{"class":932},[828,4650,939],{"class":838},[828,4652,1188],{"class":838},[828,4654,2320],{"class":855},[828,4656,1188],{"class":838},[828,4658,4549],{"class":932},[828,4660,939],{"class":838},[828,4662,1188],{"class":838},[828,4664,1625],{"class":855},[828,4666,1188],{"class":838},[828,4668,4560],{"class":932},[828,4670,939],{"class":838},[828,4672,1188],{"class":838},[828,4674,3619],{"class":855},[828,4676,1188],{"class":838},[828,4678,4571],{"class":932},[828,4680,939],{"class":838},[828,4682,1188],{"class":838},[828,4684,1625],{"class":855},[828,4686,1188],{"class":838},[828,4688,4582],{"class":932},[828,4690,939],{"class":838},[828,4692,1188],{"class":838},[828,4694,1611],{"class":855},[828,4696,1188],{"class":838},[828,4698,4699],{"class":932}," aria-orientation",[828,4701,939],{"class":838},[828,4703,1188],{"class":838},[828,4705,1450],{"class":855},[828,4707,1188],{"class":838},[828,4709,3535],{"class":838},[828,4711,828],{"class":1176},[828,4713,1195],{"class":838},[739,4715,4716,4725,4738],{},[742,4717,4718,4724],{},[696,4719,4603,4720,4723],{},[700,4721,4722],{},"aria-orientation"," for vertical sliders."," This tells assistive technology the orientation of the control.",[742,4726,4727,4730,4731,4734,4735,4737],{},[696,4728,4729],{},"Reflect the disabled state."," Add ",[700,4732,4733],{},"aria-disabled=\"true\""," to the thumb when the slider is disabled, alongside the recipe's ",[700,4736,2855],{}," variant.",[742,4739,4740,4743,4744,4747,4748,4751],{},[696,4741,4742],{},"Add a label."," Use ",[700,4745,4746],{},"aria-label"," or ",[700,4749,4750],{},"aria-labelledby"," to give the slider a descriptive name, especially when several sliders appear together.",[819,4753,4755],{"className":3459,"code":4754,"language":3462,"meta":824,"style":824},"\u003Clabel id=\"volume-label\">Volume\u003C\u002Flabel>\n\u003Cspan class=\"slider(...)\">\n    \u003Cspan class=\"sliderTrack(...)\">\u003Cspan class=\"sliderRange(...)\" style=\"width: 50%\">\u003C\u002Fspan>\u003C\u002Fspan>\n    \u003Cspan role=\"slider\" tabindex=\"0\" aria-labelledby=\"volume-label\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\">\u003C\u002Fspan>\n\u003C\u002Fspan>\n",[700,4756,4757,4788,4806,4857,4930],{"__ignoreMap":824},[828,4758,4759,4761,4764,4767,4769,4771,4774,4776,4779,4782,4784,4786],{"class":830,"line":831},[828,4760,1173],{"class":838},[828,4762,4763],{"class":1176},"label",[828,4765,4766],{"class":932}," id",[828,4768,939],{"class":838},[828,4770,1188],{"class":838},[828,4772,4773],{"class":855},"volume-label",[828,4775,1188],{"class":838},[828,4777,4778],{"class":838},">",[828,4780,4781],{"class":842},"Volume",[828,4783,2164],{"class":838},[828,4785,4763],{"class":1176},[828,4787,1195],{"class":838},[828,4789,4790,4792,4794,4796,4798,4800,4802,4804],{"class":830,"line":865},[828,4791,1173],{"class":838},[828,4793,828],{"class":1176},[828,4795,3473],{"class":932},[828,4797,939],{"class":838},[828,4799,1188],{"class":838},[828,4801,4373],{"class":855},[828,4803,1188],{"class":838},[828,4805,1195],{"class":838},[828,4807,4808,4810,4812,4814,4816,4818,4820,4822,4825,4827,4829,4831,4833,4835,4837,4839,4841,4843,4845,4847,4849,4851,4853,4855],{"class":830,"line":873},[828,4809,2188],{"class":838},[828,4811,828],{"class":1176},[828,4813,3473],{"class":932},[828,4815,939],{"class":838},[828,4817,1188],{"class":838},[828,4819,4392],{"class":855},[828,4821,1188],{"class":838},[828,4823,4824],{"class":838},">\u003C",[828,4826,828],{"class":1176},[828,4828,3473],{"class":932},[828,4830,939],{"class":838},[828,4832,1188],{"class":838},[828,4834,4411],{"class":855},[828,4836,1188],{"class":838},[828,4838,3523],{"class":932},[828,4840,939],{"class":838},[828,4842,1188],{"class":838},[828,4844,3530],{"class":855},[828,4846,1188],{"class":838},[828,4848,3535],{"class":838},[828,4850,828],{"class":1176},[828,4852,3535],{"class":838},[828,4854,828],{"class":1176},[828,4856,1195],{"class":838},[828,4858,4859,4861,4863,4865,4867,4869,4871,4873,4875,4877,4879,4881,4883,4886,4888,4890,4892,4894,4896,4898,4900,4902,4904,4906,4908,4910,4912,4914,4916,4918,4920,4922,4924,4926,4928],{"class":830,"line":882},[828,4860,2188],{"class":838},[828,4862,828],{"class":1176},[828,4864,4468],{"class":932},[828,4866,939],{"class":838},[828,4868,1188],{"class":838},[828,4870,2320],{"class":855},[828,4872,1188],{"class":838},[828,4874,4549],{"class":932},[828,4876,939],{"class":838},[828,4878,1188],{"class":838},[828,4880,1625],{"class":855},[828,4882,1188],{"class":838},[828,4884,4885],{"class":932}," aria-labelledby",[828,4887,939],{"class":838},[828,4889,1188],{"class":838},[828,4891,4773],{"class":855},[828,4893,1188],{"class":838},[828,4895,4560],{"class":932},[828,4897,939],{"class":838},[828,4899,1188],{"class":838},[828,4901,3619],{"class":855},[828,4903,1188],{"class":838},[828,4905,4571],{"class":932},[828,4907,939],{"class":838},[828,4909,1188],{"class":838},[828,4911,1625],{"class":855},[828,4913,1188],{"class":838},[828,4915,4582],{"class":932},[828,4917,939],{"class":838},[828,4919,1188],{"class":838},[828,4921,1611],{"class":855},[828,4923,1188],{"class":838},[828,4925,3535],{"class":838},[828,4927,828],{"class":1176},[828,4929,1195],{"class":838},[828,4931,4932,4934,4936],{"class":830,"line":890},[828,4933,2164],{"class":838},[828,4935,828],{"class":1176},[828,4937,1195],{"class":838},[688,4939,4941],{"id":4940},"customization","Customization",[3725,4943,4945],{"id":4944},"overriding-defaults","Overriding Defaults",[692,4947,4948],{},"Each slider composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults, so you only specify what you want to change:",[819,4950,4952],{"className":821,"code":4951,"filename":817,"language":823,"meta":824,"style":824},"import { styleframe } from 'virtual:styleframe';\nimport { useSliderThumbRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst sliderThumb = useSliderThumbRecipe(s, {\n    base: {\n        boxShadow: '@box-shadow.md',\n    },\n    defaultVariants: {\n        color: 'neutral',\n        size: 'lg',\n    },\n});\n\nexport default s;\n",[700,4953,4954,4974,4994,4998,5012,5016,5033,5042,5058,5063,5072,5087,5102,5106,5114,5118],{"__ignoreMap":824},[828,4955,4956,4958,4960,4962,4964,4966,4968,4970,4972],{"class":830,"line":831},[828,4957,835],{"class":834},[828,4959,839],{"class":838},[828,4961,843],{"class":842},[828,4963,846],{"class":838},[828,4965,849],{"class":834},[828,4967,852],{"class":838},[828,4969,856],{"class":855},[828,4971,859],{"class":838},[828,4973,862],{"class":838},[828,4975,4976,4978,4980,4982,4984,4986,4988,4990,4992],{"class":830,"line":865},[828,4977,835],{"class":834},[828,4979,839],{"class":838},[828,4981,1017],{"class":842},[828,4983,846],{"class":838},[828,4985,849],{"class":834},[828,4987,852],{"class":838},[828,4989,916],{"class":855},[828,4991,859],{"class":838},[828,4993,862],{"class":838},[828,4995,4996],{"class":830,"line":873},[828,4997,926],{"emptyLinePlaceholder":223},[828,4999,5000,5002,5004,5006,5008,5010],{"class":830,"line":882},[828,5001,933],{"class":932},[828,5003,936],{"class":842},[828,5005,939],{"class":838},[828,5007,843],{"class":942},[828,5009,945],{"class":842},[828,5011,862],{"class":838},[828,5013,5014],{"class":830,"line":890},[828,5015,926],{"emptyLinePlaceholder":223},[828,5017,5018,5020,5022,5024,5026,5029,5031],{"class":830,"line":898},[828,5019,933],{"class":932},[828,5021,1012],{"class":842},[828,5023,939],{"class":838},[828,5025,1017],{"class":942},[828,5027,5028],{"class":842},"(s",[828,5030,1078],{"class":838},[828,5032,870],{"class":838},[828,5034,5035,5038,5040],{"class":830,"line":906},[828,5036,5037],{"class":1176},"    base",[828,5039,1355],{"class":838},[828,5041,870],{"class":838},[828,5043,5044,5047,5049,5051,5054,5056],{"class":830,"line":923},[828,5045,5046],{"class":1176},"        boxShadow",[828,5048,1355],{"class":838},[828,5050,852],{"class":838},[828,5052,5053],{"class":855},"@box-shadow.md",[828,5055,859],{"class":838},[828,5057,879],{"class":838},[828,5059,5060],{"class":830,"line":929},[828,5061,5062],{"class":838},"    },\n",[828,5064,5065,5068,5070],{"class":830,"line":950},[828,5066,5067],{"class":1176},"    defaultVariants",[828,5069,1355],{"class":838},[828,5071,870],{"class":838},[828,5073,5074,5077,5079,5081,5083,5085],{"class":830,"line":955},[828,5075,5076],{"class":1176},"        color",[828,5078,1355],{"class":838},[828,5080,852],{"class":838},[828,5082,3706],{"class":855},[828,5084,859],{"class":838},[828,5086,879],{"class":838},[828,5088,5089,5092,5094,5096,5098,5100],{"class":830,"line":973},[828,5090,5091],{"class":1176},"        size",[828,5093,1355],{"class":838},[828,5095,852],{"class":838},[828,5097,4065],{"class":855},[828,5099,859],{"class":838},[828,5101,879],{"class":838},[828,5103,5104],{"class":830,"line":990},[828,5105,5062],{"class":838},[828,5107,5108,5110,5112],{"class":830,"line":1007},[828,5109,909],{"class":838},[828,5111,1492],{"class":842},[828,5113,862],{"class":838},[828,5115,5116],{"class":830,"line":1024},[828,5117,926],{"emptyLinePlaceholder":223},[828,5119,5120,5122,5124,5126],{"class":830,"line":1029},[828,5121,1032],{"class":834},[828,5123,1035],{"class":834},[828,5125,1038],{"class":842},[828,5127,862],{"class":838},[3725,5129,5131],{"id":5130},"filtering-variants","Filtering Variants",[692,5133,5134,5135,5138],{},"If you only need a subset of the available variants, use the ",[700,5136,5137],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[819,5140,5142],{"className":821,"code":5141,"filename":817,"language":823,"meta":824,"style":824},"import { styleframe } from 'virtual:styleframe';\nimport { useSliderRangeRecipe, useSliderThumbRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate primary and success colors\nconst sliderRange = useSliderRangeRecipe(s, { filter: { color: ['primary', 'success'] } });\nconst sliderThumb = useSliderThumbRecipe(s, { filter: { color: ['primary', 'success'] } });\n\nexport default s;\n",[700,5143,5144,5164,5188,5192,5206,5210,5215,5270,5322,5326],{"__ignoreMap":824},[828,5145,5146,5148,5150,5152,5154,5156,5158,5160,5162],{"class":830,"line":831},[828,5147,835],{"class":834},[828,5149,839],{"class":838},[828,5151,843],{"class":842},[828,5153,846],{"class":838},[828,5155,849],{"class":834},[828,5157,852],{"class":838},[828,5159,856],{"class":855},[828,5161,859],{"class":838},[828,5163,862],{"class":838},[828,5165,5166,5168,5170,5172,5174,5176,5178,5180,5182,5184,5186],{"class":830,"line":865},[828,5167,835],{"class":834},[828,5169,839],{"class":838},[828,5171,1000],{"class":842},[828,5173,1078],{"class":838},[828,5175,1017],{"class":842},[828,5177,846],{"class":838},[828,5179,849],{"class":834},[828,5181,852],{"class":838},[828,5183,916],{"class":855},[828,5185,859],{"class":838},[828,5187,862],{"class":838},[828,5189,5190],{"class":830,"line":873},[828,5191,926],{"emptyLinePlaceholder":223},[828,5193,5194,5196,5198,5200,5202,5204],{"class":830,"line":882},[828,5195,933],{"class":932},[828,5197,936],{"class":842},[828,5199,939],{"class":838},[828,5201,843],{"class":942},[828,5203,945],{"class":842},[828,5205,862],{"class":838},[828,5207,5208],{"class":830,"line":890},[828,5209,926],{"emptyLinePlaceholder":223},[828,5211,5212],{"class":830,"line":898},[828,5213,5214],{"class":1505},"\u002F\u002F Only generate primary and success colors\n",[828,5216,5217,5219,5221,5223,5225,5227,5229,5231,5234,5236,5238,5240,5242,5245,5247,5249,5251,5253,5255,5257,5259,5262,5264,5266,5268],{"class":830,"line":906},[828,5218,933],{"class":932},[828,5220,995],{"class":842},[828,5222,939],{"class":838},[828,5224,1000],{"class":942},[828,5226,5028],{"class":842},[828,5228,1078],{"class":838},[828,5230,839],{"class":838},[828,5232,5233],{"class":1176}," filter",[828,5235,1355],{"class":838},[828,5237,839],{"class":838},[828,5239,1415],{"class":1176},[828,5241,1355],{"class":838},[828,5243,5244],{"class":842}," [",[828,5246,859],{"class":838},[828,5248,1422],{"class":855},[828,5250,859],{"class":838},[828,5252,1078],{"class":838},[828,5254,852],{"class":838},[828,5256,3687],{"class":855},[828,5258,859],{"class":838},[828,5260,5261],{"class":842},"] ",[828,5263,909],{"class":838},[828,5265,846],{"class":838},[828,5267,1492],{"class":842},[828,5269,862],{"class":838},[828,5271,5272,5274,5276,5278,5280,5282,5284,5286,5288,5290,5292,5294,5296,5298,5300,5302,5304,5306,5308,5310,5312,5314,5316,5318,5320],{"class":830,"line":923},[828,5273,933],{"class":932},[828,5275,1012],{"class":842},[828,5277,939],{"class":838},[828,5279,1017],{"class":942},[828,5281,5028],{"class":842},[828,5283,1078],{"class":838},[828,5285,839],{"class":838},[828,5287,5233],{"class":1176},[828,5289,1355],{"class":838},[828,5291,839],{"class":838},[828,5293,1415],{"class":1176},[828,5295,1355],{"class":838},[828,5297,5244],{"class":842},[828,5299,859],{"class":838},[828,5301,1422],{"class":855},[828,5303,859],{"class":838},[828,5305,1078],{"class":838},[828,5307,852],{"class":838},[828,5309,3687],{"class":855},[828,5311,859],{"class":838},[828,5313,5261],{"class":842},[828,5315,909],{"class":838},[828,5317,846],{"class":838},[828,5319,1492],{"class":842},[828,5321,862],{"class":838},[828,5323,5324],{"class":830,"line":929},[828,5325,926],{"emptyLinePlaceholder":223},[828,5327,5328,5330,5332,5334],{"class":830,"line":950},[828,5329,1032],{"class":834},[828,5331,1035],{"class":834},[828,5333,1038],{"class":842},[828,5335,862],{"class":838},[4097,5337,5338,5340],{},[696,5339,4101],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[688,5342,73],{"id":5343},"api-reference",[3725,5345,5347],{"id":5346},"usesliderrecipes-options",[700,5348,5349],{},"useSliderRecipe(s, options?)",[692,5351,5352],{},"Creates the slider root recipe — the positioning wrapper that lays out the track and thumb and owns the disabled state.",[692,5354,5355],{},[696,5356,5357],{},"Variants:",[3739,5359,5360,5373],{},[3742,5361,5362],{},[3745,5363,5364,5367,5370],{},[3748,5365,5366],{},"Variant",[3748,5368,5369],{},"Options",[3748,5371,5372],{},"Default",[3758,5374,5375,5391,5413],{},[3745,5376,5377,5381,5387],{},[3763,5378,5379],{},[700,5380,1715],{},[3763,5382,5383,3681,5385],{},[700,5384,1450],{},[700,5386,1971],{},[3763,5388,5389],{},[700,5390,1450],{},[3745,5392,5393,5397,5409],{},[3763,5394,5395],{},[700,5396,1702],{},[3763,5398,5399,3681,5401,3681,5403,3681,5405,3681,5407],{},[700,5400,3962],{},[700,5402,4026],{},[700,5404,1436],{},[700,5406,4065],{},[700,5408,3966],{},[3763,5410,5411],{},[700,5412,1436],{},[3745,5414,5415,5419,5425],{},[3763,5416,5417],{},[700,5418,2855],{},[3763,5420,5421,3681,5423],{},[700,5422,1737],{},[700,5424,1747],{},[3763,5426,5427],{},[700,5428,1747],{},[3725,5430,5432],{"id":5431},"useslidertrackrecipes-options",[700,5433,5434],{},"useSliderTrackRecipe(s, options?)",[692,5436,5437],{},"Creates the neutral rail recipe with background color, pill radius, and orientation support.",[692,5439,5440],{},[696,5441,5357],{},[3739,5443,5444,5454],{},[3742,5445,5446],{},[3745,5447,5448,5450,5452],{},[3748,5449,5366],{},[3748,5451,5369],{},[3748,5453,5372],{},[3758,5455,5456,5474,5490],{},[3745,5457,5458,5462,5470],{},[3763,5459,5460],{},[700,5461,1852],{},[3763,5463,5464,3681,5466,3681,5468],{},[700,5465,3700],{},[700,5467,3703],{},[700,5469,3706],{},[3763,5471,5472],{},[700,5473,3706],{},[3745,5475,5476,5480,5486],{},[3763,5477,5478],{},[700,5479,1715],{},[3763,5481,5482,3681,5484],{},[700,5483,1450],{},[700,5485,1971],{},[3763,5487,5488],{},[700,5489,1450],{},[3745,5491,5492,5496,5508],{},[3763,5493,5494],{},[700,5495,1702],{},[3763,5497,5498,3681,5500,3681,5502,3681,5504,3681,5506],{},[700,5499,3962],{},[700,5501,4026],{},[700,5503,1436],{},[700,5505,4065],{},[700,5507,3966],{},[3763,5509,5510],{},[700,5511,1436],{},[3725,5513,5515],{"id":5514},"usesliderrangerecipes-options",[700,5516,5517],{},"useSliderRangeRecipe(s, options?)",[692,5519,5520],{},"Creates the colored fill recipe. Its length is data-driven, so set the fill dimension from the value rather than a variant.",[692,5522,5523],{},[696,5524,5357],{},[3739,5526,5527,5537],{},[3742,5528,5529],{},[3745,5530,5531,5533,5535],{},[3748,5532,5366],{},[3748,5534,5369],{},[3748,5536,5372],{},[3758,5538,5539,5569],{},[3745,5540,5541,5545,5565],{},[3763,5542,5543],{},[700,5544,1852],{},[3763,5546,5547,3681,5549,3681,5551,3681,5553,3681,5555,3681,5557,3681,5559,3681,5561,3681,5563],{},[700,5548,1422],{},[700,5550,3684],{},[700,5552,3687],{},[700,5554,3690],{},[700,5556,3693],{},[700,5558,3696],{},[700,5560,3700],{},[700,5562,3703],{},[700,5564,3706],{},[3763,5566,5567],{},[700,5568,1422],{},[3745,5570,5571,5575,5581],{},[3763,5572,5573],{},[700,5574,1715],{},[3763,5576,5577,3681,5579],{},[700,5578,1450],{},[700,5580,1971],{},[3763,5582,5583],{},[700,5584,1450],{},[3725,5586,5588],{"id":5587},"usesliderthumbrecipes-options",[700,5589,5590],{},"useSliderThumbRecipe(s, options?)",[692,5592,5593],{},"Creates the draggable handle recipe with full color support and interactive focus, hover, and active states.",[692,5595,5596],{},[696,5597,5357],{},[3739,5599,5600,5610],{},[3742,5601,5602],{},[3745,5603,5604,5606,5608],{},[3748,5605,5366],{},[3748,5607,5369],{},[3748,5609,5372],{},[3758,5611,5612,5642],{},[3745,5613,5614,5618,5638],{},[3763,5615,5616],{},[700,5617,1852],{},[3763,5619,5620,3681,5622,3681,5624,3681,5626,3681,5628,3681,5630,3681,5632,3681,5634,3681,5636],{},[700,5621,1422],{},[700,5623,3684],{},[700,5625,3687],{},[700,5627,3690],{},[700,5629,3693],{},[700,5631,3696],{},[700,5633,3700],{},[700,5635,3703],{},[700,5637,3706],{},[3763,5639,5640],{},[700,5641,1422],{},[3745,5643,5644,5648,5660],{},[3763,5645,5646],{},[700,5647,1702],{},[3763,5649,5650,3681,5652,3681,5654,3681,5656,3681,5658],{},[700,5651,3962],{},[700,5653,4026],{},[700,5655,1436],{},[700,5657,4065],{},[700,5659,3966],{},[3763,5661,5662],{},[700,5663,1436],{},[692,5665,5666],{},[696,5667,5668],{},"Common parameters (all four recipes):",[3739,5670,5671,5684],{},[3742,5672,5673],{},[3745,5674,5675,5678,5681],{},[3748,5676,5677],{},"Parameter",[3748,5679,5680],{},"Type",[3748,5682,5683],{},"Description",[3758,5685,5686,5701,5716,5731,5746,5761,5776],{},[3745,5687,5688,5693,5698],{},[3763,5689,5690],{},[700,5691,5692],{},"s",[3763,5694,5695],{},[700,5696,5697],{},"Styleframe",[3763,5699,5700],{},"The Styleframe instance",[3745,5702,5703,5708,5713],{},[3763,5704,5705],{},[700,5706,5707],{},"options",[3763,5709,5710],{},[700,5711,5712],{},"DeepPartial\u003CRecipeConfig>",[3763,5714,5715],{},"Optional overrides for the recipe configuration",[3745,5717,5718,5723,5728],{},[3763,5719,5720],{},[700,5721,5722],{},"options.base",[3763,5724,5725],{},[700,5726,5727],{},"VariantDeclarationsBlock",[3763,5729,5730],{},"Custom base styles",[3745,5732,5733,5738,5743],{},[3763,5734,5735],{},[700,5736,5737],{},"options.variants",[3763,5739,5740],{},[700,5741,5742],{},"Variants",[3763,5744,5745],{},"Custom variant definitions",[3745,5747,5748,5753,5758],{},[3763,5749,5750],{},[700,5751,5752],{},"options.defaultVariants",[3763,5754,5755],{},[700,5756,5757],{},"Record\u003Ckeyof Variants, string>",[3763,5759,5760],{},"Default variant values",[3745,5762,5763,5768,5773],{},[3763,5764,5765],{},[700,5766,5767],{},"options.compoundVariants",[3763,5769,5770],{},[700,5771,5772],{},"CompoundVariant[]",[3763,5774,5775],{},"Custom compound variant definitions",[3745,5777,5778,5783,5788],{},[3763,5779,5780],{},[700,5781,5782],{},"options.filter",[3763,5784,5785],{},[700,5786,5787],{},"Record\u003Cstring, string[]>",[3763,5789,5790],{},"Limit which variant values are generated",[692,5792,5793],{},[717,5794,5795],{"href":132},"Learn more about recipes →",[688,5797,5799],{"id":5798},"best-practices","Best Practices",[739,5801,5802,5814,5822,5831,5837,5852,5861],{},[742,5803,5804,5810,5811,5813],{},[696,5805,5806,5807,5809],{},"Pass ",[700,5808,1702],{}," to the root, track, and thumb",": All three share the ",[700,5812,1702],{}," axis so the rail thickness and handle diameter stay proportional.",[742,5815,5816,5821],{},[696,5817,5818,5819],{},"Keep the track ",[700,5820,3706],{},": The rail is a background. Save color for the range and thumb where it communicates the value's meaning.",[742,5823,5824,5830],{},[696,5825,5826,5827,5829],{},"Use the same ",[700,5828,1852],{}," for the range and thumb",": This makes the filled portion and handle read as a single coloured unit.",[742,5832,5833,5836],{},[696,5834,5835],{},"Drive position from the value",": The recipes own appearance, but the range length and thumb offset must be set from the current value via an inline style or a CSS custom property.",[742,5838,5839,5842,5843,5845,5846,5848,5849,5851],{},[696,5840,5841],{},"Disable in one place",": Set ",[700,5844,2855],{}," on the root only — ",[700,5847,4203],{}," cascades to every part. Mirror it to ",[700,5850,4249],{}," on the thumb.",[742,5853,5854,5857,5858,5860],{},[696,5855,5856],{},"Provide an explicit height for vertical sliders",": The vertical root uses ",[700,5859,4136],{},", so the parent container must have an explicit height.",[742,5862,5863,5866,5867,5869],{},[696,5864,5865],{},"Filter what you don't need",": If your component only uses a few colors, pass a ",[700,5868,5137],{}," option to reduce generated CSS.",[688,5871,5873],{"id":5872},"faq","FAQ",[5875,5876,5877,5892,5902,5921,5936,5959,5977],"accordion",{},[5878,5879,5882,5883,5885,5886,5888,5889,5891],"accordion-item",{"icon":5880,"label":5881},"i-lucide-circle-help","Why are there four separate recipes instead of one?","A slider has four distinct visual elements: a positioning root, a neutral rail, a colored fill, and a draggable handle. Each needs independent styling — the track is neutral with ",[700,5884,4305],{},", the range carries semantic color, and the thumb adds interactive focus and hover states. Four recipes give each part its own variants while sharing the ",[700,5887,1702],{}," and ",[700,5890,1715],{}," axes.",[5878,5893,5895,5896,5898,5899,5901],{"icon":5880,"label":5894},"Why is the thumb a sibling of the track instead of a child?","The track uses ",[700,5897,4305],{}," so the range fill is clipped to the rail's rounded corners. The thumb is larger than the rail, so placing it inside the track would crop it. Instead, the thumb is a sibling positioned absolutely against the ",[700,5900,4347],{}," root.",[5878,5903,5905,5906,5909,5910,5913,5914,5909,5917,5920],{"icon":5880,"label":5904},"How do I set the fill and thumb position?","The recipes deliberately leave layout to the data. Compute a percentage from the value, then set the range's ",[700,5907,5908],{},"width"," (or ",[700,5911,5912],{},"height"," in vertical) and the thumb's ",[700,5915,5916],{},"inset-inline-start",[700,5918,5919],{},"bottom",") from it with an inline style or a CSS custom property. See the Usage example above.",[5878,5922,5924,5926,5927,5929,5930,5932,5933,5935],{"icon":5880,"label":5923},"What is the difference between light, dark, and neutral colors?",[700,5925,3700],{}," always uses the same gray tones regardless of the color scheme. ",[700,5928,3703],{}," always uses darker gray tones. ",[700,5931,3706],{}," adapts to the current color scheme: it appears light in light mode and dark in dark mode. Use ",[700,5934,3706],{}," when you want the slider to blend naturally with the surrounding interface.",[5878,5937,5939,5940,3681,5942,4610,5944,1569,5946,1569,5948,5950,5951,1569,5953,5955,5956,5958],{"icon":5880,"label":5938},"How do I make the slider keyboard accessible?","Give the thumb ",[700,5941,762],{},[700,5943,4623],{},[700,5945,4609],{},[700,5947,4613],{},[700,5949,4606],{},". Handle arrow keys to change the value by your step, and ",[700,5952,4627],{},[700,5954,4630],{}," to jump to the bounds. The recipe's ",[700,5957,4634],{}," ring makes keyboard focus visible automatically.",[5878,5960,5962,5963,5965,5966,5888,5969,5972,5973,5976],{"icon":5880,"label":5961},"Why does the disabled variant use string keys instead of a boolean?","Recipe variant values are always strings in the configuration object. The ",[700,5964,2855],{}," variant uses ",[700,5967,5968],{},"\"true\"",[700,5970,5971],{},"\"false\""," as string keys internally, but your component can accept a boolean prop and convert it with ",[700,5974,5975],{},"String(disabled)"," when passing it to the recipe function.",[5878,5978,5980,5981,3681,5983,4610,5986,5989,5990,5993],{"icon":5880,"label":5979},"Can I use the Slider recipe without the design tokens preset?","The Slider recipes reference design tokens like ",[700,5982,3771],{},[700,5984,5985],{},"@border-radius.full",[700,5987,5988],{},"@box-shadow.sm"," through string refs. These tokens need to be defined in your Styleframe instance for the recipes to generate valid CSS. The easiest way is to use ",[700,5991,5992],{},"useDesignTokensPreset(s)",", but you can also define the required tokens manually.",[5995,5996,5997],"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 .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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":824,"searchDepth":865,"depth":865,"links":5999},[6000,6001,6002,6003,6006,6009,6013,6014,6015,6016,6020,6026,6027],{"id":690,"depth":865,"text":78},{"id":733,"depth":865,"text":734},{"id":796,"depth":865,"text":797},{"id":3675,"depth":865,"text":195,"children":6004},[6005],{"id":3727,"depth":873,"text":3728},{"id":3955,"depth":865,"text":3956,"children":6007},[6008],{"id":3976,"depth":873,"text":3977},{"id":1715,"depth":865,"text":4105,"children":6010},[6011,6012],{"id":1450,"depth":873,"text":4118},{"id":1971,"depth":873,"text":4130},{"id":2855,"depth":865,"text":4194},{"id":4253,"depth":865,"text":4254},{"id":4501,"depth":865,"text":568},{"id":4940,"depth":865,"text":4941,"children":6017},[6018,6019],{"id":4944,"depth":873,"text":4945},{"id":5130,"depth":873,"text":5131},{"id":5343,"depth":865,"text":73,"children":6021},[6022,6023,6024,6025],{"id":5346,"depth":873,"text":5349},{"id":5431,"depth":873,"text":5434},{"id":5514,"depth":873,"text":5517},{"id":5587,"depth":873,"text":5590},{"id":5798,"depth":865,"text":5799},{"id":5872,"depth":865,"text":5873},"An input control for selecting a value from a range by dragging a thumb along a track. Composed of a root, track, range, and thumb recipe, with color, size, and orientation options through the recipe system.",null,{},{"icon":7},{"title":472,"description":6028},"CyNEY9sbqsvRHmSiQsqtqItM73UDUDg561z2qmmIACQ",[6035,6037],{"title":468,"path":469,"stem":470,"description":6036,"icon":7,"children":-1},"A multi-select form control composed of a trigger, a floating listbox panel, selectable options, dismissable value chips, a chevron indicator, group labels, and separators. Supports light, dark, and neutral colors, per-part visual styles, and three sizes through the recipe system.",{"title":476,"path":477,"stem":478,"description":6038,"icon":7,"children":-1},"A switch built on the native checkbox input, with a sliding knob, on, disabled, and focus states, light, dark, and neutral track colors, and three sizes through the recipe system.",1781596341217]