[{"data":1,"prerenderedAt":1507},["ShallowReactive",2],{"docs-navigation":3,"page:\u002Fcomponents\u002Fcolor-slider":571,"surround:\u002Fcomponents\u002Fcolor-slider":1498,"code:v-0-0-79-2-8-0":1503,"code:v-0-0-79-2-11-0":1504,"code:v-0-0-79-2-14-0":1505,"code:v-0-0-79-2-4-0-0":1506},[4,38,112,555],{"title":5,"path":6,"stem":7,"children":8,"navigation":35,"description":36,"icon":37},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,14,21,28],{"title":10,"path":6,"stem":7,"navigation":11,"description":13,"icon":12},"Introduction",{"icon":12},"i-lucide-house","Unstyled Vue UI primitives with a Vue-native slots API.",{"title":15,"path":16,"stem":17,"navigation":18,"description":20,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"icon":19},"i-lucide-download","Add Akaza UI to your Vue or Nuxt project in minutes.",{"title":22,"path":23,"stem":24,"navigation":25,"description":27,"icon":26},"Styling","\u002Fgetting-started\u002Fstyling","1.getting-started\u002F3.styling",{"icon":26},"i-lucide-paintbrush","Style Akaza UI with the ui prop, CSS classes, and data attributes.",{"title":29,"path":30,"stem":31,"navigation":32,"description":34,"icon":33},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F4.usage",{"icon":33},"i-lucide-sliders","Learn the core patterns for using Akaza UI components.",true,null,false,{"title":39,"path":40,"stem":41,"children":42,"navigation":35,"description":36,"icon":37},"Composables","\u002Fcomposables","2.composables\u002F1.index",[43,48,55,62,73,82,89,96,103],{"title":44,"path":40,"stem":41,"navigation":45,"description":47,"icon":46},"All Composables",{"icon":46},"i-lucide-braces","Public Vue composables for programmatic control and shared state.",{"title":49,"path":50,"stem":51,"navigation":52,"description":54,"icon":53},"useColor","\u002Fcomposables\u002Fuse-color","2.composables\u002Fuse-color",{"icon":53},"i-lucide-palette","Convert color strings and edit color channels.",{"title":56,"path":57,"stem":58,"navigation":59,"description":61,"icon":60},"useDataTable","\u002Fcomposables\u002Fuse-data-table","2.composables\u002Fuse-data-table",{"icon":60},"i-lucide-table-2","Reactive table data, selection, sorting, filtering, pagination, and column state.",{"title":63,"path":64,"stem":65,"navigation":66,"description":71,"icon":67,"badge":72},"useDisclosure","\u002Fcomposables\u002Fuse-disclosure","2.composables\u002Fuse-disclosure",{"icon":67,"badge":68},"i-lucide-panel-top-open",{"label":69,"color":70},"NEW","success","Share boolean open state between controls.",{"label":69,"color":70},{"title":74,"path":75,"stem":76,"navigation":77,"description":80,"icon":78,"badge":81},"useFormReset","\u002Fcomposables\u002Fuse-form-reset","2.composables\u002Fuse-form-reset",{"icon":78,"badge":79},"i-lucide-rotate-ccw",{"label":69,"color":70},"Reset custom control state when its native form resets.",{"label":69,"color":70},{"title":83,"path":84,"stem":85,"navigation":86,"description":88,"icon":87},"useOverlay","\u002Fcomposables\u002Fuse-overlay","2.composables\u002Fuse-overlay",{"icon":87},"i-lucide-panels-top-left","Open dialogs, drawers, and custom overlays from Vue code.",{"title":90,"path":91,"stem":92,"navigation":93,"description":95,"icon":94},"useSidebar","\u002Fcomposables\u002Fuse-sidebar","2.composables\u002Fuse-sidebar",{"icon":94},"i-lucide-panel-left","Control one Sidebar instance or share responsive sidebar state.",{"title":97,"path":98,"stem":99,"navigation":100,"description":102,"icon":101},"useToast","\u002Fcomposables\u002Fuse-toast","2.composables\u002Fuse-toast",{"icon":101},"i-lucide-bell","Manage notification queues, actions, timers, and promise results.",{"title":104,"path":105,"stem":106,"navigation":107,"description":110,"icon":108,"badge":111},"useTypeahead","\u002Fcomposables\u002Fuse-typeahead","2.composables\u002Fuse-typeahead",{"icon":108,"badge":109},"i-lucide-keyboard",{"label":69,"color":70},"Buffer typed text for keyboard navigation.",{"label":69,"color":70},{"title":113,"path":114,"stem":115,"children":116,"navigation":35,"description":36,"icon":120},"Components","\u002Fcomponents","3.components\u002F1.index",[117,122,129,136,144,151,158,165,172,179,186,194,202,210,218,226,234,241,248,254,261,268,275,282,289,296,303,310,317,324,330,336,343,350,357,363,369,376,383,389,396,403,410,417,424,431,438,445,455,462,469,476,482,489,496,503,509,516,522,529,536,543,549],{"title":118,"path":114,"stem":115,"navigation":119,"description":121,"icon":120},"All Components",{"icon":120},"i-lucide-component","All available Akaza UI headless components.",{"title":123,"path":124,"stem":125,"navigation":126,"description":128,"icon":127},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion",{"icon":127},"i-lucide-layout-panel-top","A set of collapsible sections with headings.",{"title":130,"path":131,"stem":132,"navigation":133,"description":135,"icon":134},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog",{"icon":134},"i-lucide-triangle-alert","A modal dialog that interrupts the user and requires a response.",{"title":137,"path":138,"stem":139,"navigation":140,"description":142,"icon":87,"badge":143},"App Layout","\u002Fcomponents\u002Fapp-layout","3.components\u002Fapp-layout",{"icon":87,"badge":141},{"label":69,"color":70},"Header, content, sidebars, and footer in one application shell.",{"label":69,"color":70},{"title":145,"path":146,"stem":147,"navigation":148,"description":150,"icon":149},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar",{"icon":149},"i-lucide-circle-user","An image element with a fallback for when the image fails to load.",{"title":152,"path":153,"stem":154,"navigation":155,"description":157,"icon":156},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton",{"icon":156},"i-lucide-mouse-pointer-click","A button that can show a loading state during async operations.",{"title":159,"path":160,"stem":161,"navigation":162,"description":164,"icon":163},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar",{"icon":163},"i-lucide-calendar-days","Locale-aware date grid with keyboard navigation, constraints, and single, multiple, or range selection.",{"title":166,"path":167,"stem":168,"navigation":169,"description":171,"icon":170},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox",{"icon":170},"i-lucide-square-check","A control that allows the user to toggle between checked and unchecked states.",{"title":173,"path":174,"stem":175,"navigation":176,"description":178,"icon":177},"Checkbox Group","\u002Fcomponents\u002Fcheckbox-group","3.components\u002Fcheckbox-group",{"icon":177},"i-lucide-list-checks","Items-based multi-select built on Checkbox.",{"title":180,"path":181,"stem":182,"navigation":183,"description":185,"icon":184},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible",{"icon":184},"i-lucide-chevrons-down-up","A single section that can be expanded or collapsed.",{"title":187,"path":188,"stem":189,"navigation":190,"description":192,"icon":53,"badge":193},"Color Area","\u002Fcomponents\u002Fcolor-area","3.components\u002Fcolor-area",{"icon":53,"badge":191},{"label":69,"color":70},"A two-dimensional color selector.",{"label":69,"color":70},{"title":195,"path":196,"stem":197,"navigation":198,"description":200,"icon":53,"badge":201},"Color Field","\u002Fcomponents\u002Fcolor-field","3.components\u002Fcolor-field",{"icon":53,"badge":199},{"label":69,"color":70},"An input for CSS colors or a single color channel.",{"label":69,"color":70},{"title":203,"path":204,"stem":205,"navigation":206,"description":208,"icon":53,"badge":209},"Color Picker","\u002Fcomponents\u002Fcolor-picker","3.components\u002Fcolor-picker",{"icon":53,"badge":207},{"label":69,"color":70},"A color editor with an area, sliders, and text input.",{"label":69,"color":70},{"title":211,"path":212,"stem":213,"navigation":214,"description":216,"icon":53,"badge":217},"Color Slider","\u002Fcomponents\u002Fcolor-slider","3.components\u002Fcolor-slider",{"icon":53,"badge":215},{"label":69,"color":70},"A slider for hue, opacity, or another color channel.",{"label":69,"color":70},{"title":219,"path":220,"stem":221,"navigation":222,"description":224,"icon":53,"badge":225},"Color Swatch","\u002Fcomponents\u002Fcolor-swatch","3.components\u002Fcolor-swatch",{"icon":53,"badge":223},{"label":69,"color":70},"A read-only color preview.",{"label":69,"color":70},{"title":227,"path":228,"stem":229,"navigation":230,"description":232,"icon":53,"badge":233},"Color Swatch Picker","\u002Fcomponents\u002Fcolor-swatch-picker","3.components\u002Fcolor-swatch-picker",{"icon":53,"badge":231},{"label":69,"color":70},"Choose one or more colors from a list.",{"label":69,"color":70},{"title":235,"path":236,"stem":237,"navigation":238,"description":240,"icon":239},"Combobox","\u002Fcomponents\u002Fcombobox","3.components\u002Fcombobox",{"icon":239},"i-lucide-search","Input plus listbox selection with filtering and active-descendant navigation.",{"title":242,"path":243,"stem":244,"navigation":245,"description":247,"icon":246},"Context Menu","\u002Fcomponents\u002Fcontext-menu","3.components\u002Fcontext-menu",{"icon":246},"i-lucide-mouse-pointer-2","Right-click triggered menu positioned at the pointer.",{"title":249,"path":250,"stem":251,"navigation":252,"description":253,"icon":60},"Data Table","\u002Fcomponents\u002Fdata-table","3.components\u002Fdata-table",{"icon":60},"Semantic tables with sorting, filtering, selection, pagination, expansion, and resizing.",{"title":255,"path":256,"stem":257,"navigation":258,"description":260,"icon":259},"Date Field","\u002Fcomponents\u002Fdate-field","3.components\u002Fdate-field",{"icon":259},"i-lucide-calendar-clock","Locale-ordered segmented date input with keyboard editing, optional Calendar, validation, paste, and native forms.",{"title":262,"path":263,"stem":264,"navigation":265,"description":267,"icon":266},"Date Range Field","\u002Fcomponents\u002Fdate-range-field","3.components\u002Fdate-range-field",{"icon":266},"i-lucide-calendar-range","Locale-ordered segmented start and end dates with aggregate validation, fixed endpoints, and native forms.",{"title":269,"path":270,"stem":271,"navigation":272,"description":274,"icon":273},"Date Range Picker","\u002Fcomponents\u002Fdate-range-picker","3.components\u002Fdate-range-picker",{"icon":273},"i-lucide-calendar-search","Segmented date-range entry and an accessible range Calendar in one collision-aware popup.",{"title":276,"path":277,"stem":278,"navigation":279,"description":281,"icon":280},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog",{"icon":280},"i-lucide-square","A modal dialog that appears over the page and traps focus.",{"title":283,"path":284,"stem":285,"navigation":286,"description":288,"icon":287},"Drawer","\u002Fcomponents\u002Fdrawer","3.components\u002Fdrawer",{"icon":287},"i-lucide-panel-right","A panel that slides in from the edge of the viewport.",{"title":290,"path":291,"stem":292,"navigation":293,"description":295,"icon":294},"Editable","\u002Fcomponents\u002Feditable","3.components\u002Feditable",{"icon":294},"i-lucide-square-pen","Inline text editing with preview, draft, submit, cancel, and native form behavior.",{"title":297,"path":298,"stem":299,"navigation":300,"description":302,"icon":301},"Field","\u002Fcomponents\u002Ffield","3.components\u002Ffield",{"icon":301},"i-lucide-text-cursor-input","Label, description, and error wiring for form controls.",{"title":304,"path":305,"stem":306,"navigation":307,"description":309,"icon":308},"Fieldset","\u002Fcomponents\u002Ffieldset","3.components\u002Ffieldset",{"icon":308},"i-lucide-group","Native fieldset and legend wrapper for related controls.",{"title":311,"path":312,"stem":313,"navigation":314,"description":316,"icon":315},"Form","\u002Fcomponents\u002Fform","3.components\u002Fform",{"icon":315},"i-lucide-clipboard-check","Submit wrapper that exposes FormData and native validity state.",{"title":318,"path":319,"stem":320,"navigation":321,"description":323,"icon":322},"Hover Preview Card","\u002Fcomponents\u002Fhover-preview-card","3.components\u002Fhover-preview-card",{"icon":322},"i-lucide-id-card","Hover-triggered rich content preview for links, users, and entities.",{"title":325,"path":326,"stem":327,"navigation":328,"description":329,"icon":301},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput",{"icon":301},"Native text input with Field integration and invalid state attributes.",{"title":331,"path":332,"stem":333,"navigation":334,"description":335,"icon":177},"Listbox","\u002Fcomponents\u002Flistbox","3.components\u002Flistbox",{"icon":177},"Standalone selectable list with single, multiple, filtered, and virtualized modes.",{"title":337,"path":338,"stem":339,"navigation":340,"description":342,"icon":341},"Menu","\u002Fcomponents\u002Fmenu","3.components\u002Fmenu",{"icon":341},"i-lucide-list","A floating menu of actions, anchored to a trigger element.",{"title":344,"path":345,"stem":346,"navigation":347,"description":349,"icon":348},"Menubar","\u002Fcomponents\u002Fmenubar","3.components\u002Fmenubar",{"icon":348},"i-lucide-panel-top","Horizontal menu strip with arrow-key navigation across menus.",{"title":351,"path":352,"stem":353,"navigation":354,"description":356,"icon":355},"Meter","\u002Fcomponents\u002Fmeter","3.components\u002Fmeter",{"icon":355},"i-lucide-gauge","Read-only gauge for displaying a bounded numeric value.",{"title":358,"path":359,"stem":360,"navigation":361,"description":362,"icon":266},"Month Picker","\u002Fcomponents\u002Fmonth-picker","3.components\u002Fmonth-picker",{"icon":266},"Accessible month grid with locale labels, paging, constraints, and single or multiple selection.",{"title":364,"path":365,"stem":366,"navigation":367,"description":368,"icon":266},"Month Range Picker","\u002Fcomponents\u002Fmonth-range-picker","3.components\u002Fmonth-range-picker",{"icon":266},"Accessible month-level range selection with preview, limits, fixed endpoints, and constraints.",{"title":370,"path":371,"stem":372,"navigation":373,"description":375,"icon":374},"Navigation Menu","\u002Fcomponents\u002Fnavigation-menu","3.components\u002Fnavigation-menu",{"icon":374},"i-lucide-navigation","Horizontal flyout and vertical application navigation from one items API.",{"title":377,"path":378,"stem":379,"navigation":380,"description":382,"icon":381},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field",{"icon":381},"i-lucide-badge-plus","Spinbutton number input with increment and decrement controls.",{"title":384,"path":385,"stem":386,"navigation":387,"description":388,"icon":87},"Overlay Provider","\u002Fcomponents\u002Foverlay","3.components\u002Foverlay",{"icon":87},"Programmatic overlay mounting with useOverlay.",{"title":390,"path":391,"stem":392,"navigation":393,"description":395,"icon":394},"Pagination","\u002Fcomponents\u002Fpagination","3.components\u002Fpagination",{"icon":394},"i-lucide-ellipsis","Accessible page navigation with ranges, ellipses, boundary controls, and optional links.",{"title":397,"path":398,"stem":399,"navigation":400,"description":402,"icon":401},"Pin \u002F OTP Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input",{"icon":401},"i-lucide-binary","Multi-cell input for verification codes, PINs, and fixed-length tokens.",{"title":404,"path":405,"stem":406,"navigation":407,"description":409,"icon":408},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover",{"icon":408},"i-lucide-message-square","A floating panel anchored to a trigger element.",{"title":411,"path":412,"stem":413,"navigation":414,"description":416,"icon":415},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress",{"icon":415},"i-lucide-loader","Displays a value indicating completion of a task.",{"title":418,"path":419,"stem":420,"navigation":421,"description":423,"icon":422},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group",{"icon":422},"i-lucide-circle-dot","A group of radio buttons where only one can be selected at a time.",{"title":425,"path":426,"stem":427,"navigation":428,"description":430,"icon":429},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating",{"icon":429},"i-lucide-star","Accessible rating input with fractional values, hover preview, keyboard navigation, and forms.",{"title":432,"path":433,"stem":434,"navigation":435,"description":437,"icon":436},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect",{"icon":436},"i-lucide-list-filter","Single or multiple listbox select with keyboard navigation, typeahead, and form submission.",{"title":439,"path":440,"stem":441,"navigation":442,"description":444,"icon":443},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator",{"icon":443},"i-lucide-minus","A visual or semantic divider between content sections.",{"title":446,"path":447,"stem":448,"navigation":449,"description":453,"icon":94,"badge":454},"Sidebar","\u002Fcomponents\u002Fsidebar","3.components\u002Fsidebar",{"icon":94,"badge":450},{"label":451,"color":452},"UPDATED","warning","Responsive application sidebar with desktop collapse, resizing, and mobile dialog behavior.",{"label":451,"color":452},{"title":456,"path":457,"stem":458,"navigation":459,"description":461,"icon":460},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider",{"icon":460},"i-lucide-sliders-horizontal","Single-value or range slider with pointer drag, keyboard step, and ARIA metadata.",{"title":463,"path":464,"stem":465,"navigation":466,"description":468,"icon":467},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper",{"icon":467},"i-lucide-list-ordered","Multi-step progress and navigation with linear rules, roving focus, and associated panels.",{"title":470,"path":471,"stem":472,"navigation":473,"description":475,"icon":474},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch",{"icon":474},"i-lucide-toggle-left","A toggle control for binary or custom on\u002Foff values.",{"title":477,"path":478,"stem":479,"navigation":480,"description":481,"icon":127},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"icon":127},"A set of layered sections of content, one visible at a time.",{"title":483,"path":484,"stem":485,"navigation":486,"description":488,"icon":487},"Tags Input","\u002Fcomponents\u002Ftags-input","3.components\u002Ftags-input",{"icon":487},"i-lucide-tags","Tokenized text input with keyboard editing, paste handling, validation, and form submission.",{"title":490,"path":491,"stem":492,"navigation":493,"description":495,"icon":494},"Time Field","\u002Fcomponents\u002Ftime-field","3.components\u002Ftime-field",{"icon":494},"i-lucide-clock-3","Locale-aware segmented time input with keyboard editing, constraints, granularity, and native forms.",{"title":497,"path":498,"stem":499,"navigation":500,"description":502,"icon":501},"Time Range Field","\u002Fcomponents\u002Ftime-range-field","3.components\u002Ftime-range-field",{"icon":501},"i-lucide-clock-arrow-up","Coordinated segmented start and end times with aggregate validation and native form values.",{"title":504,"path":505,"stem":506,"navigation":507,"description":508,"icon":408},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"icon":408},"Queued status and alert notifications with stacking, actions, updates, promise state, and swipe dismissal.",{"title":510,"path":511,"stem":512,"navigation":513,"description":515,"icon":514},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle",{"icon":514},"i-lucide-toggle-right","A two-state button that can be on or off.",{"title":517,"path":518,"stem":519,"navigation":520,"description":521,"icon":177},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"icon":177},"Single or multiple pressed values with roving keyboard focus.",{"title":523,"path":524,"stem":525,"navigation":526,"description":528,"icon":527},"Toolbar","\u002Fcomponents\u002Ftoolbar","3.components\u002Ftoolbar",{"icon":527},"i-lucide-wrench","Command strip with roving focus across buttons, links, inputs, groups, and separators.",{"title":530,"path":531,"stem":532,"navigation":533,"description":535,"icon":534},"Tooltip","\u002Fcomponents\u002Ftooltip","3.components\u002Ftooltip",{"icon":534},"i-lucide-info","A floating label that appears when the user hovers or focuses an element.",{"title":537,"path":538,"stem":539,"navigation":540,"description":542,"icon":541},"Tree","\u002Fcomponents\u002Ftree","3.components\u002Ftree",{"icon":541},"i-lucide-folder-tree","Accessible hierarchical navigation and selection with lazy loading, propagation, typeahead, and virtualization.",{"title":544,"path":545,"stem":546,"navigation":547,"description":548,"icon":163},"Year Picker","\u002Fcomponents\u002Fyear-picker","3.components\u002Fyear-picker",{"icon":163},"Accessible paged year grid with constraints and single or multiple selection.",{"title":550,"path":551,"stem":552,"navigation":553,"description":554,"icon":266},"Year Range Picker","\u002Fcomponents\u002Fyear-range-picker","3.components\u002Fyear-range-picker",{"icon":266},"Accessible year-level range selection with preview, limits, fixed endpoints, and paging.",{"title":556,"path":557,"stem":558,"children":559,"navigation":35,"description":36,"icon":37},"Builders","\u002Fbuilders","4.builders\u002F1.index",[560,564],{"title":561,"path":557,"stem":558,"navigation":562,"description":563,"icon":87},"All Builders",{"icon":87},"Configure component combinations and get their Vue markup.",{"title":565,"path":566,"stem":567,"navigation":568,"description":570,"icon":569},"Layout Builder","\u002Fbuilders\u002Flayout-builder","4.builders\u002Flayout-builder",{"icon":569},"i-lucide-layout-dashboard","Arrange an application shell and generate its Vue structure.",{"id":572,"title":211,"body":573,"description":216,"extension":1492,"links":36,"meta":1493,"navigation":1494,"path":212,"seo":1496,"stem":213,"__hash__":1497},"docs\u002F3.components\u002Fcolor-slider.md",{"type":574,"value":575,"toc":1469},"minimark",[576,581,621,624,630,643,647,652,656,662,666,669,675,679,682,688,691,695,719,727,742,746,752,779,782,785,800,804,808,1078,1082,1152,1156,1180,1184,1248,1252,1353,1380,1393,1397,1455,1459],[577,578,580],"h2",{"id":579},"anatomy","Anatomy",[582,583,584,603],"ul",{},[585,586,587,594,595,598,599,602],"li",{},[588,589,590],"strong",{},[591,592,593],"code",{},"#track",": Content inside the generated gradient track. Receives ",[591,596,597],{},"value"," and ",[591,600,601],{},"channel",".",[585,604,605,610,611,613,614,617,618,602],{},[588,606,607],{},[591,608,609],{},"#thumb",": Decorative thumb content. Receives ",[591,612,597],{},", ",[591,615,616],{},"channelValue",", and ",[591,619,620],{},"percentage",[577,622,29],{"id":623},"usage",[625,626,627],"component-preview",{},[628,629],"examples-color-slider-demo",{},[631,632,633],"component-code",{},[634,635,641],"pre",{"className":636,"code":638,"language":639,"meta":640},[637],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { ColorSlider, ColorSwatch } from \"akaza-ui\";\nimport { ref } from \"vue\";\nconst color = ref(\"#56d799\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"grid gap-4\">\n    \u003CColorSlider\n      v-model=\"color\"\n      channel=\"hue\"\n      aria-label=\"Hue\"\n      :ui=\"{\n        root: 'h-6 w-64 max-w-full rounded-md data-[akaza-disabled]:opacity-50',\n        axis: 'peer outline-none',\n        track: 'h-3 w-full rounded-full',\n        thumb:\n          'size-6 rounded-full border-2 border-neutral-400 bg-white shadow-sm peer-data-[akaza-focus-visible]:ring-2 peer-data-[akaza-focus-visible]:ring-ring peer-data-[akaza-focus-visible]:ring-offset-2 peer-data-[akaza-focus-visible]:ring-offset-background',\n      }\"\n    \u002F>\n    \u003Cdiv class=\"flex items-center gap-3\">\n      \u003CColorSwatch\n        :color=\"color\"\n        :ui=\"{ root: 'block size-9 rounded-md border border-border' }\"\n      \u002F>\n      \u003Coutput class=\"font-mono text-xs text-muted-foreground\">{{ color }}\u003C\u002Foutput>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","",[591,642,638],{"__ignoreMap":640},[577,644,646],{"id":645},"examples","Examples",[648,649,651],"h3",{"id":650},"hue-and-opacity","Hue and opacity",[653,654,655],"p",{},"Change hue and opacity with separate sliders. Both update the same color value.",[634,657,660],{"className":658,"code":659,"language":639,"meta":640},[637],"\u003Ctemplate>\n  \u003CColorSlider\n    v-model=\"color\"\n    channel=\"hue\"\n    :ui=\"sliderUi\"\n    aria-label=\"Hue\"\n  \u002F>\n  \u003Cdiv class=\"flex items-center gap-3\">\n    \u003CColorSwatch\n      :color=\"color\"\n      :ui=\"swatchUi\"\n    \u002F>\n    \u003Coutput class=\"font-mono text-xs text-muted-foreground\">{{ color }}\u003C\u002Foutput>\n  \u003C\u002Fdiv>\n  \u003Clabel class=\"grid max-w-sm gap-2 text-xs\">\n    Opacity\n    \u003CColorSlider\n      v-model=\"color\"\n      format=\"oklch\"\n      channel=\"alpha\"\n      :ui=\"sliderUi\"\n    \u002F>\n  \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n",[591,661,659],{"__ignoreMap":640},[648,663,665],{"id":664},"vertical-and-rtl","Vertical and RTL",[653,667,668],{},"Vertical tracks increase upward. RTL reverses horizontal pointer and arrow direction.",[634,670,673],{"className":671,"code":672,"language":639,"meta":640},[637],"\u003Ctemplate>\n  \u003Cdiv class=\"flex items-start gap-6\">\n    \u003CColorSlider\n      v-model=\"color\"\n      orientation=\"vertical\"\n      aria-label=\"Vertical hue\"\n      :ui=\"{ ...sliderUi, root: 'h-40 w-6', track: 'h-full w-3 rounded-md' }\"\n    \u002F>\n    \u003CColorSlider\n      v-model=\"color\"\n      dir=\"rtl\"\n      aria-label=\"RTL hue\"\n      :ui=\"sliderUi\"\n    \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[591,674,672],{"__ignoreMap":640},[648,676,678],{"id":677},"oklch-and-read-only","OKLCH and read-only",[653,680,681],{},"Use a smaller step for OKLCH chroma. Read-only sliders accept keyboard focus but prevent changes.",[634,683,686],{"className":684,"code":685,"language":639,"meta":640},[637],"\u003Ctemplate>\n  \u003CColorSlider\n    v-model=\"color\"\n    channel=\"chroma\"\n    color-space=\"oklch\"\n    format=\"oklch\"\n    :step=\"0.001\"\n    :ui=\"sliderUi\"\n    aria-label=\"OKLCH chroma\"\n  \u002F>\n  \u003CColorSlider\n    :model-value=\"color\"\n    read-only\n    :ui=\"sliderUi\"\n    aria-label=\"Read-only hue\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[591,687,685],{"__ignoreMap":640},[653,689,690],{},"See the live demo's code for the state and style objects used in these examples.",[577,692,694],{"id":693},"formats","Formats",[653,696,697,698,701,702,707,708,711,712,714,715,718],{},"Set ",[591,699,700],{},"format"," to choose the returned color string. It does not change which colors you can enter or which channels you edit. See ",[703,704,706],"a",{"href":705},"\u002Fcomposables\u002Fuse-color#formats","supported formats",". Changing the format keeps opacity and emits ",[591,709,710],{},"value-change"," with reason ",[591,713,700],{},". HEX uses eight digits for transparent colors; ",[591,716,717],{},"hexa"," uses eight digits for all colors.",[653,720,721,722,726],{},"HEX and RGB can lose colors outside sRGB. The control keeps the original color until you replace the model or enter a new value. Area and slider previews use sRGB. See ",[703,723,725],{"href":724},"\u002Fcomposables\u002Fuse-color#precision-and-gamut","precision and gamut"," for details.",[653,728,729,730,733,734,737,738,741],{},"Use a color value such as ",[591,731,732],{},"#56d799"," or ",[591,735,736],{},"oklch(0.65 0.2 250)",". CSS variables, ",[591,739,740],{},"currentColor",", and relative color expressions are not supported.",[577,743,745],{"id":744},"behavior","Behavior",[653,747,748,749,602],{},"The slider uses a visually hidden native range input for keyboard and screen reader support. Style the visible track and thumb through ",[591,750,751],{},"ui",[653,753,754,755,758,759,762,763,766,767,770,771,774,775,778],{},"For a keyboard focus ring on the thumb, set ",[591,756,757],{},"ui.axis"," to ",[591,760,761],{},"peer outline-none"," and use ",[591,764,765],{},"peer-data-[akaza-focus-visible]"," classes on ",[591,768,769],{},"ui.thumb",". The root and axis expose ",[591,772,773],{},"data-akaza-focus-visible"," for keyboard focus. ",[591,776,777],{},"data-akaza-focused"," also includes focus from a pointer.",[653,780,781],{},"For a vertical slider, give the root a height and the track a width and full height.",[653,783,784],{},"Hue tracks stay visible for gray and transparent colors. Other channel tracks show opaque colors. The alpha track shows transparency against your background. The component positions the thumb; do not add transforms to position it.",[653,786,787,788,791,792,795,796,799],{},"The thumb exposes ",[591,789,790],{},"--akaza-color"," but does not force a background. Use ",[591,793,794],{},"ui.thumb: 'bg-white'"," for a white handle, or ",[591,797,798],{},"bg-[var(--akaza-color)]"," for a color-filled handle.",[577,801,803],{"id":802},"api-reference","API Reference",[648,805,807],{"id":806},"props","Props",[809,810,811,830],"table",{},[812,813,814],"thead",{},[815,816,817,821,824,827],"tr",{},[818,819,820],"th",{},"Prop",[818,822,823],{},"Type",[818,825,826],{},"Default",[818,828,829],{},"Purpose",[831,832,833,857,876,896,925,948,963,982,1002,1020,1040,1060],"tbody",{},[815,834,835,841,846,851],{},[836,837,838],"td",{},[591,839,840],{},"modelValue",[836,842,843],{},[591,844,845],{},"string",[836,847,848],{},[591,849,850],{},"\"#ff0000\"",[836,852,853,854,602],{},"Selected CSS color. Bind with ",[591,855,856],{},"v-model",[815,858,859,863,868,873],{},[836,860,861],{},[591,862,700],{},[836,864,865],{},[591,866,867],{},"ColorFormat",[836,869,870],{},[591,871,872],{},"\"hex\"",[836,874,875],{},"Format for the returned and submitted color string.",[815,877,878,886,890,893],{},[836,879,880,613,883],{},[591,881,882],{},"id",[591,884,885],{},"name",[836,887,888],{},[591,889,845],{},[836,891,892],{},"From Field",[836,894,895],{},"Input ID and form field name.",[815,897,898,912,917,922],{},[836,899,900,613,903,613,906,613,909],{},[591,901,902],{},"required",[591,904,905],{},"disabled",[591,907,908],{},"readOnly",[591,910,911],{},"invalid",[836,913,914],{},[591,915,916],{},"boolean",[836,918,919],{},[591,920,921],{},"false",[836,923,924],{},"Native validation and interaction states; disabled\u002Frequired also inherit from Field.",[815,926,927,938,942,945],{},[836,928,929,613,932,613,935],{},[591,930,931],{},"ariaLabel",[591,933,934],{},"ariaLabelledby",[591,936,937],{},"ariaDescribedby",[836,939,940],{},[591,941,845],{},[836,943,944],{},"From Field where applicable",[836,946,947],{},"Accessible naming and description.",[815,949,950,954,957,960],{},[836,951,952],{},[591,953,751],{},[836,955,956],{},"Component UI object",[836,958,959],{},"-",[836,961,962],{},"Classes for the named parts below.",[815,964,965,969,974,979],{},[836,966,967],{},[591,968,601],{},[836,970,971],{},[591,972,973],{},"ColorChannel",[836,975,976],{},[591,977,978],{},"\"hue\"",[836,980,981],{},"Channel to edit.",[815,983,984,989,994,999],{},[836,985,986],{},[591,987,988],{},"colorSpace",[836,990,991],{},[591,992,993],{},"ColorSpace",[836,995,996],{},[591,997,998],{},"\"hsb\"",[836,1000,1001],{},"Space used for channel interpretation.",[815,1003,1004,1009,1014,1017],{},[836,1005,1006],{},[591,1007,1008],{},"step",[836,1010,1011],{},[591,1012,1013],{},"number",[836,1015,1016],{},"Channel default",[836,1018,1019],{},"Increment; OKLCH chroma defaults to 0.001.",[815,1021,1022,1027,1032,1037],{},[836,1023,1024],{},[591,1025,1026],{},"orientation",[836,1028,1029],{},[591,1030,1031],{},"\"horizontal\" | \"vertical\"",[836,1033,1034],{},[591,1035,1036],{},"\"horizontal\"",[836,1038,1039],{},"Layout and pointer axis.",[815,1041,1042,1047,1052,1057],{},[836,1043,1044],{},[591,1045,1046],{},"dir",[836,1048,1049],{},[591,1050,1051],{},"\"ltr\" | \"rtl\"",[836,1053,1054],{},[591,1055,1056],{},"\"ltr\"",[836,1058,1059],{},"Horizontal reading direction.",[815,1061,1062,1067,1071,1075],{},[836,1063,1064],{},[591,1065,1066],{},"inverted",[836,1068,1069],{},[591,1070,916],{},[836,1072,1073],{},[591,1074,921],{},[836,1076,1077],{},"Reverse the visual scale.",[648,1079,1081],{"id":1080},"emits","Emits",[809,1083,1084,1097],{},[812,1085,1086],{},[815,1087,1088,1091,1094],{},[818,1089,1090],{},"Event",[818,1092,1093],{},"Payload",[818,1095,1096],{},"Meaning",[831,1098,1099,1112,1138],{},[815,1100,1101,1106,1109],{},[836,1102,1103],{},[591,1104,1105],{},"update:modelValue",[836,1107,1108],{},"Selected color",[836,1110,1111],{},"Vue model update.",[815,1113,1114,1118,1123],{},[836,1115,1116],{},[591,1117,710],{},[836,1119,1120],{},[591,1121,1122],{},"(value, details)",[836,1124,1125,1126,1129,1130,1133,1134,1137],{},"Runs before a change. Use ",[591,1127,1128],{},"details.cancel()"," to stop it. Includes ",[591,1131,1132],{},"reason"," and the native ",[591,1135,1136],{},"event"," when available.",[815,1139,1140,1145,1149],{},[836,1141,1142],{},[591,1143,1144],{},"value-commit",[836,1146,1147],{},[591,1148,1122],{},[836,1150,1151],{},"Runs when an interaction ends. Canceling it does not undo the value change.",[648,1153,1155],{"id":1154},"slots","Slots",[582,1157,1158,1168],{},[585,1159,1160,594,1164,598,1166,602],{},[588,1161,1162],{},[591,1163,593],{},[591,1165,597],{},[591,1167,601],{},[585,1169,1170,610,1174,613,1176,617,1178,602],{},[588,1171,1172],{},[591,1173,609],{},[591,1175,597],{},[591,1177,616],{},[591,1179,620],{},[648,1181,1183],{"id":1182},"ui-options","UI Options",[809,1185,1186,1196],{},[812,1187,1188],{},[815,1189,1190,1193],{},[818,1191,1192],{},"Key",[818,1194,1195],{},"Element",[831,1197,1198,1208,1218,1228,1238],{},[815,1199,1200,1205],{},[836,1201,1202],{},[591,1203,1204],{},"root",[836,1206,1207],{},"Pointer surface",[815,1209,1210,1215],{},[836,1211,1212],{},[591,1213,1214],{},"track",[836,1216,1217],{},"Computed channel gradient",[815,1219,1220,1225],{},[836,1221,1222],{},[591,1223,1224],{},"thumb",[836,1226,1227],{},"Visual position and selected color",[815,1229,1230,1235],{},[836,1231,1232],{},[591,1233,1234],{},"axis",[836,1236,1237],{},"Keyboard and assistive-technology control",[815,1239,1240,1245],{},[836,1241,1242],{},[591,1243,1244],{},"input",[836,1246,1247],{},"Form input for the full color value",[648,1249,1251],{"id":1250},"styling-hooks","Styling Hooks",[809,1253,1254,1267],{},[812,1255,1256],{},[815,1257,1258,1261,1264],{},[818,1259,1260],{},"UI key",[818,1262,1263],{},"CSS class",[818,1265,1266],{},"Data attributes \u002F semantics",[831,1268,1269,1294,1307,1323,1339],{},[815,1270,1271,1275,1280],{},[836,1272,1273],{},[591,1274,1204],{},[836,1276,1277],{},[591,1278,1279],{},"akaza-color-slider",[836,1281,1282,1283,613,1286,613,1289,613,1292],{},"Shared form flags; ",[591,1284,1285],{},"data-akaza-channel",[591,1287,1288],{},"data-akaza-orientation",[591,1290,1291],{},"data-akaza-dragging",[591,1293,773],{},[815,1295,1296,1300,1305],{},[836,1297,1298],{},[591,1299,1214],{},[836,1301,1302],{},[591,1303,1304],{},"akaza-color-slider-track",[836,1306,959],{},[815,1308,1309,1313,1318],{},[836,1310,1311],{},[591,1312,1224],{},[836,1314,1315],{},[591,1316,1317],{},"akaza-color-slider-thumb",[836,1319,1320],{},[591,1321,1322],{},"aria-hidden",[815,1324,1325,1329,1334],{},[836,1326,1327],{},[591,1328,1234],{},[836,1330,1331],{},[591,1332,1333],{},"akaza-color-slider-axis",[836,1335,1336,1337],{},"Native range\u002Fslider attributes; ",[591,1338,773],{},[815,1340,1341,1345,1350],{},[836,1342,1343],{},[591,1344,1244],{},[836,1346,1347],{},[591,1348,1349],{},"akaza-color-slider-input",[836,1351,1352],{},"Native validation attributes",[653,1354,1355,1356,613,1359,613,1362,613,1365,613,1367,613,1370,613,1373,617,1376,1379],{},"Form state attributes: ",[591,1357,1358],{},"data-akaza-disabled",[591,1360,1361],{},"data-akaza-readonly",[591,1363,1364],{},"data-akaza-invalid",[591,1366,777],{},[591,1368,1369],{},"data-akaza-touched",[591,1371,1372],{},"data-akaza-dirty",[591,1374,1375],{},"data-akaza-filled",[591,1377,1378],{},"data-akaza-out-of-gamut",". Each appears only when true.",[653,1381,1382,1383,733,1386,1389,1390,1392],{},"Use ",[591,1384,1385],{},"class",[591,1387,1388],{},"ui.root"," to style the root. Use the other ",[591,1391,751],{}," keys for inner parts. Set sizes, borders, and colors in your own styles.",[648,1394,1396],{"id":1395},"keyboard","Keyboard",[809,1398,1399,1407],{},[812,1400,1401],{},[815,1402,1403,1405],{},[818,1404,1192],{},[818,1406,745],{},[831,1408,1409,1417,1432,1445],{},[815,1410,1411,1414],{},[836,1412,1413],{},"Arrow keys",[836,1415,1416],{},"Adjust by one step; horizontal arrows follow RTL\u002Finversion.",[815,1418,1419,1429],{},[836,1420,1421,1424,1425,1428],{},[591,1422,1423],{},"PageUp"," \u002F ",[591,1426,1427],{},"PageDown",", Shift+Arrow",[836,1430,1431],{},"Adjust by ten steps.",[815,1433,1434,1442],{},[836,1435,1436,1424,1439],{},[591,1437,1438],{},"Home",[591,1440,1441],{},"End",[836,1443,1444],{},"Set the channel minimum\u002Fmaximum.",[815,1446,1447,1452],{},[836,1448,1449],{},[591,1450,1451],{},"Tab",[836,1453,1454],{},"Enter\u002Fleave the slider, including readonly sliders. Disabled sliders are skipped.",[577,1456,1458],{"id":1457},"parity-notes","Parity Notes",[653,1460,1461,1462,613,1464,617,1466,1468],{},"ColorSlider combines Reka's root, track, and thumb parts in one component. Use ",[591,1463,751],{},[591,1465,593],{},[591,1467,609],{}," to customize them. The supplied Base UI reference has no color slider component.",{"title":640,"searchDepth":1470,"depth":1471,"links":1472},1,2,[1473,1474,1475,1481,1482,1483,1491],{"id":579,"depth":1471,"text":580},{"id":623,"depth":1471,"text":29},{"id":645,"depth":1471,"text":646,"children":1476},[1477,1479,1480],{"id":650,"depth":1478,"text":651},3,{"id":664,"depth":1478,"text":665},{"id":677,"depth":1478,"text":678},{"id":693,"depth":1471,"text":694},{"id":744,"depth":1471,"text":745},{"id":802,"depth":1471,"text":803,"children":1484},[1485,1486,1487,1488,1489,1490],{"id":806,"depth":1478,"text":807},{"id":1080,"depth":1478,"text":1081},{"id":1154,"depth":1478,"text":1155},{"id":1182,"depth":1478,"text":1183},{"id":1250,"depth":1478,"text":1251},{"id":1395,"depth":1478,"text":1396},{"id":1457,"depth":1471,"text":1458},"md",{},{"icon":53,"badge":1495},{"label":69,"color":70},{"title":211,"description":216},"GbxkT-PseVzVW2VANSja0gsZWFToC_yKPbb7Evl2swI",[1499,1501],{"title":203,"path":204,"stem":205,"icon":53,"badge":1500,"children":-1},{"label":69,"color":70},{"title":219,"path":220,"stem":221,"icon":53,"badge":1502,"children":-1},{"label":69,"color":70},"\u003Cspan class=\"shj-syn-tag\"><Dialog\u003C\u002Fspan>\n  \u003Cspan class=\"shj-syn-attr\">:ui\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"{\n    overlay: 'fixed inset-0 bg-black\u002F50 backdrop-blur-sm',\n    content: 'bg-white rounded-xl shadow-xl w-full max-w-md',\n    header: 'flex items-center justify-between p-6 border-b',\n    body: 'p-6',\n    footer: 'flex justify-end gap-2 p-6 border-t',\n  }\"\u003C\u002Fspan>\n\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n","\u003Cspan class=\"shj-syn-control\">import\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">'.\u002Fmain.css'\u003C\u002Fspan>\n","\u003Cspan class=\"shj-syn-tag\"><template\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n  \u003Cspan class=\"shj-syn-tag\"><Accordion\u003C\u002Fspan>\n    \u003Cspan class=\"shj-syn-attr\">:items\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"items\"\u003C\u002Fspan>\n    \u003Cspan class=\"shj-syn-attr\">type\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"multiple\"\u003C\u002Fspan>\n  \u003Cspan class=\"shj-syn-oper\">\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n\u003Cspan class=\"shj-syn-tag\"><\u002Ftemplate\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n","\u003Cspan class=\"shj-syn-tag\"><script\u003C\u002Fspan> setup \u003Cspan class=\"shj-syn-attr\">lang\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"ts\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n\u003Cspan class=\"shj-syn-control\">import\u003C\u002Fspan> { \u003Cspan class=\"shj-syn-attr\">ColorArea\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-syn-attr\">ColorPicker\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-syn-attr\">ColorSlider\u003C\u002Fspan> } \u003Cspan class=\"shj-syn-control\">from\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"akaza-ui\"\u003C\u002Fspan>;\n\u003Cspan class=\"shj-syn-control\">import\u003C\u002Fspan> { ref } \u003Cspan class=\"shj-syn-control\">from\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"vue\"\u003C\u002Fspan>;\n\u003Cspan class=\"shj-syn-kwd\">const\u003C\u002Fspan> color \u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-syn-func\">ref\u003C\u002Fspan>(\u003Cspan class=\"shj-syn-str\">\"#56d799\"\u003C\u002Fspan>);\n\u003Cspan class=\"shj-syn-kwd\">const\u003C\u002Fspan> areaUi \u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan> {\n  root\u003Cspan class=\"shj-syn-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"aspect-square w-full rounded-lg data-[akaza-focused]:ring-2 data-[akaza-focused]:ring-ring\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">,\u003C\u002Fspan>\n  area\u003Cspan class=\"shj-syn-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"rounded-lg\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">,\u003C\u002Fspan>\n  thumb\u003Cspan class=\"shj-syn-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"size-5 rounded-full border-2 border-neutral-400 bg-white shadow-sm\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">,\u003C\u002Fspan>\n};\n\u003Cspan class=\"shj-syn-kwd\">const\u003C\u002Fspan> sliderUi \u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan> {\n  root\u003Cspan class=\"shj-syn-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"h-6 w-full rounded-md data-[akaza-disabled]:opacity-50\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">,\u003C\u002Fspan>\n  axis\u003Cspan class=\"shj-syn-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"peer outline-none\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">,\u003C\u002Fspan>\n  track\u003Cspan class=\"shj-syn-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"h-3 w-full rounded-full bg-muted\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">,\u003C\u002Fspan>\n  thumb\u003Cspan class=\"shj-syn-oper\">:\u003C\u002Fspan>\n    \u003Cspan class=\"shj-syn-str\">\"size-6 rounded-full border-2 border-neutral-400 bg-white shadow-sm peer-data-[akaza-focus-visible]:ring-2 peer-data-[akaza-focus-visible]:ring-ring peer-data-[akaza-focus-visible]:ring-offset-2 peer-data-[akaza-focus-visible]:ring-offset-background\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">,\u003C\u002Fspan>\n};\n\u003Cspan class=\"shj-syn-tag\"><\u002Fscript\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-syn-tag\"><template\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n  \u003Cspan class=\"shj-syn-tag\"><div\u003C\u002Fspan> \u003Cspan class=\"shj-syn-attr\">class\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"grid gap-4\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n    \u003Cspan class=\"shj-syn-tag\"><output\u003C\u002Fspan> \u003Cspan class=\"shj-syn-attr\">class\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"text-sm text-muted-foreground\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>Current: {{ color }}\u003Cspan class=\"shj-syn-tag\"><\u002Foutput\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n    \u003Cspan class=\"shj-syn-tag\"><ColorPicker\u003C\u002Fspan>\n      \u003Cspan class=\"shj-syn-attr\">v-model\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"color\"\u003C\u002Fspan>\n      \u003Cspan class=\"shj-syn-attr\">:ui\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"{ root: 'grid w-full max-w-64 gap-3' }\"\u003C\u002Fspan>\n      \u003Cspan class=\"shj-syn-attr\">aria-label\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"Brand color controls\"\u003C\u002Fspan>\n    \u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n      \u003Cspan class=\"shj-syn-tag\"><ColorArea\u003C\u002Fspan>\n        \u003Cspan class=\"shj-syn-attr\">color-space\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"hsl\"\u003C\u002Fspan>\n        \u003Cspan class=\"shj-syn-attr\">x-channel\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"hue\"\u003C\u002Fspan>\n        \u003Cspan class=\"shj-syn-attr\">y-channel\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"saturation\"\u003C\u002Fspan>\n        \u003Cspan class=\"shj-syn-attr\">:ui\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"areaUi\"\u003C\u002Fspan>\n        \u003Cspan class=\"shj-syn-attr\">aria-label\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"Brand area\"\u003C\u002Fspan>\n      \u003Cspan class=\"shj-syn-oper\">\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n      \u003Cspan class=\"shj-syn-tag\"><label\u003C\u002Fspan> \u003Cspan class=\"shj-syn-attr\">class\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"grid gap-1 text-xs text-muted-foreground\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n        Lightness\n        \u003Cspan class=\"shj-syn-tag\"><ColorSlider\u003C\u002Fspan>\n          \u003Cspan class=\"shj-syn-attr\">channel\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"lightness\"\u003C\u002Fspan>\n          \u003Cspan class=\"shj-syn-attr\">color-space\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"hsl\"\u003C\u002Fspan>\n          \u003Cspan class=\"shj-syn-attr\">:ui\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"sliderUi\"\u003C\u002Fspan>\n          \u003Cspan class=\"shj-syn-attr\">aria-label\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"Lightness\"\u003C\u002Fspan>\n        \u003Cspan class=\"shj-syn-oper\">\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n      \u003Cspan class=\"shj-syn-tag\"><\u002Flabel\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n      \u003Cspan class=\"shj-syn-tag\"><label\u003C\u002Fspan> \u003Cspan class=\"shj-syn-attr\">class\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"grid gap-1 text-xs text-muted-foreground\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n        Opacity\n        \u003Cspan class=\"shj-syn-tag\"><ColorSlider\u003C\u002Fspan>\n          \u003Cspan class=\"shj-syn-attr\">channel\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"alpha\"\u003C\u002Fspan>\n          \u003Cspan class=\"shj-syn-attr\">color-space\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"hsl\"\u003C\u002Fspan>\n          \u003Cspan class=\"shj-syn-attr\">:ui\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"sliderUi\"\u003C\u002Fspan>\n          \u003Cspan class=\"shj-syn-attr\">aria-label\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"Opacity\"\u003C\u002Fspan>\n        \u003Cspan class=\"shj-syn-oper\">\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n      \u003Cspan class=\"shj-syn-tag\"><\u002Flabel\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n    \u003Cspan class=\"shj-syn-tag\"><\u002FColorPicker\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n  \u003Cspan class=\"shj-syn-tag\"><\u002Fdiv\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n\u003Cspan class=\"shj-syn-tag\"><\u002Ftemplate\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n",1793603913483]