[{"data":1,"prerenderedAt":1564},["ShallowReactive",2],{"docs-navigation":3,"page:\u002Fcomponents\u002Fcolor-swatch-picker":571,"surround:\u002Fcomponents\u002Fcolor-swatch-picker":1556,"code:v-0-0-79-2-4-0-0":1560,"code:v-0-0-79-2-8-0":1561,"code:v-0-0-79-2-11-0":1562,"code:v-0-0-79-2-14-0":1563},[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":227,"body":573,"description":232,"extension":1550,"links":36,"meta":1551,"navigation":1552,"path":228,"seo":1554,"stem":229,"__hash__":1555},"docs\u002F3.components\u002Fcolor-swatch-picker.md",{"type":574,"value":575,"toc":1527},"minimark",[576,581,643,646,652,665,669,674,681,687,691,694,700,704,707,713,716,720,739,751,755,766,776,780,784,1033,1037,1107,1111,1151,1155,1257,1261,1406,1432,1445,1449,1520,1524],[577,578,580],"h2",{"id":579},"anatomy","Anatomy",[582,583,584,625,635],"ul",{},[585,586,587,594,595,598,599,598,602,598,605,598,608,598,611,598,614,598,617,620,621,624],"li",{},[588,589,590],"strong",{},[591,592,593],"code",{},"#item",": Replace content inside each option. Receives ",[591,596,597],{},"item",", ",[591,600,601],{},"option",[591,603,604],{},"color",[591,606,607],{},"value",[591,609,610],{},"label",[591,612,613],{},"isSelected",[591,615,616],{},"isHighlighted",[591,618,619],{},"isDisabled",", and ",[591,622,623],{},"select",".",[585,626,627,632,633,624],{},[588,628,629],{},[591,630,631],{},"#indicator",": Custom selection indicator. Receives the same props as ",[591,634,593],{},[585,636,637,642],{},[588,638,639],{},[591,640,641],{},"#empty",": Content for an empty palette.",[577,644,29],{"id":645},"usage",[647,648,649],"component-preview",{},[650,651],"examples-color-swatch-picker-demo",{},[653,654,655],"component-code",{},[656,657,663],"pre",{"className":658,"code":660,"language":661,"meta":662},[659],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { ColorSwatchPicker } from \"akaza-ui\";\nimport { ref } from \"vue\";\nconst color = ref(\"#2a9d6f\");\nconst colors = [\n  \"#ef4444\",\n  \"#f97316\",\n  \"#fde047\",\n  \"#2a9d6f\",\n  \"#0090ff\",\n  \"#4263eb\",\n  \"#7950c7\",\n];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CColorSwatchPicker\n    v-model=\"color\"\n    :items=\"colors\"\n    aria-label=\"Brand palette\"\n    :ui=\"{\n      viewport: 'rounded-md outline-none',\n      content: 'flex flex-wrap gap-2',\n      item: 'relative rounded-md data-[akaza-state=checked]:ring-2 data-[akaza-state=checked]:ring-foreground\u002F60 data-[akaza-highlighted]:ring-2 data-[akaza-highlighted]:ring-ring',\n      swatch: 'block size-10 rounded-md border border-white\u002F25',\n      label: 'sr-only',\n      indicator:\n        'pointer-events-none absolute inset-0 flex items-center justify-center text-white',\n    }\"\n  >\n    \u003Ctemplate #indicator=\"{ isSelected }\">\n      \u003Csvg\n        v-if=\"isSelected\"\n        class=\"size-4 drop-shadow-sm\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        \u003Cpath d=\"m20 6-11 12-5-5\" \u002F>\n      \u003C\u002Fsvg>\n    \u003C\u002Ftemplate>\n  \u003C\u002FColorSwatchPicker>\n\u003C\u002Ftemplate>\n","vue","",[591,664,660],{"__ignoreMap":662},[577,666,668],{"id":667},"examples","Examples",[670,671,673],"h3",{"id":672},"single-selection","Single selection",[675,676,677,678,680],"p",{},"Use ",[591,679,631],{}," to add a checkmark to the selected color. The labels remain available to screen readers.",[656,682,685],{"className":683,"code":684,"language":661,"meta":662},[659],"\u003Ctemplate>\n  \u003CColorSwatchPicker\n    v-model=\"color\"\n    :items=\"palette.filter((item) => !item.disabled)\"\n    :ui=\"paletteUi\"\n    aria-label=\"Brand palette\"\n  >\n    \u003Ctemplate #indicator=\"{ isSelected }\">\n      \u003CUIcon\n        v-if=\"isSelected\"\n        name=\"i-lucide-check\"\n        class=\"size-4 drop-shadow-sm\"\n        aria-hidden=\"true\"\n      \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FColorSwatchPicker>\n  \u003Coutput class=\"block break-all font-mono text-xs\">{{ color }}\u003C\u002Foutput>\n\u003C\u002Ftemplate>\n",[591,686,684],{"__ignoreMap":662},[670,688,690],{"id":689},"multiple-selection-and-rtl","Multiple selection and RTL",[675,692,693],{},"Toggle several colors, use Shift with navigation to extend selection, and skip disabled options.",[656,695,698],{"className":696,"code":697,"language":661,"meta":662},[659],"\u003Ctemplate>\n  \u003CColorSwatchPicker\n    v-model=\"colors\"\n    :items=\"palette\"\n    multiple\n    dir=\"rtl\"\n    format=\"lch\"\n    :ui=\"paletteUi\"\n    aria-label=\"Multiple colors\"\n  >\n    \u003Ctemplate #indicator=\"{ isSelected }\">\n      \u003CUIcon\n        v-if=\"isSelected\"\n        name=\"i-lucide-check\"\n        class=\"size-4 drop-shadow-sm\"\n        aria-hidden=\"true\"\n      \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FColorSwatchPicker>\n  \u003Coutput class=\"block whitespace-pre-wrap break-all font-mono text-xs\">{{\n    JSON.stringify(colors, null, 2)\n  }}\u003C\u002Foutput>\n\u003C\u002Ftemplate>\n",[591,699,697],{"__ignoreMap":662},[670,701,703],{"id":702},"custom-item-slot","Custom item slot",[675,705,706],{},"Replace the swatch, label, and indicator. The option wrapper still handles selection and focus.",[656,708,711],{"className":709,"code":710,"language":661,"meta":662},[659],"\u003Ctemplate>\n  \u003CColorSwatchPicker\n    v-model=\"color\"\n    :items=\"customItems\"\n    :ui=\"{\n      ...paletteUi,\n      content: 'grid gap-2',\n      item: 'flex items-center gap-3 rounded-md border border-border p-2 data-[akaza-state=checked]:bg-accent',\n    }\"\n    aria-label=\"Environment colors\"\n  >\n    \u003Ctemplate #item=\"{ color: itemColor, label, isSelected }\">\n      \u003CColorSwatch\n        :color=\"itemColor\"\n        decorative\n        :ui=\"swatchUi\"\n      \u002F>\n      \u003Cspan class=\"text-sm\">{{ label }}\u003C\u002Fspan>\n      \u003Cspan\n        v-if=\"isSelected\"\n        class=\"ml-auto text-xs text-muted-foreground\"\n      >\n        Selected\n      \u003C\u002Fspan>\n    \u003C\u002Ftemplate>\n  \u003C\u002FColorSwatchPicker>\n\u003C\u002Ftemplate>\n",[591,712,710],{"__ignoreMap":662},[675,714,715],{},"See the live demo's code for the state and style objects used in these examples.",[577,717,719],{"id":718},"formats","Formats",[675,721,722,723,726,727,732,733,736,737,624],{},"Set ",[591,724,725],{},"format"," to choose the returned color string. It does not change the palette. See ",[728,729,731],"a",{"href":730},"\u002Fcomposables\u002Fuse-color#formats","supported formats",". Changing the format keeps opacity and emits ",[591,734,735],{},"value-change"," with reason ",[591,738,725],{},[675,740,741,742,745,746,750],{},"HEX and RGB can lose colors outside sRGB. The picker keeps the original preset colors when you change format. CSS variables, ",[591,743,744],{},"currentColor",", and relative color expressions are not supported. See ",[728,747,749],{"href":748},"\u002Fcomposables\u002Fuse-color#precision-and-gamut","precision and gamut"," for details.",[577,752,754],{"id":753},"behavior","Behavior",[675,756,757,758,761,762,765],{},"The picker uses Listbox for selection, keyboard navigation, and form submission. It compares colors by value, so ",[591,759,760],{},"red"," and ",[591,763,764],{},"#ff0000"," match. Invalid colors are disabled. Duplicate colors can both appear selected; use unique colors if you need separate options.",[675,767,768,769,772,773,775],{},"Pass color strings or objects with ",[591,770,771],{},"{ value: string; label?: string; disabled?: boolean }",". Multiple selections submit one value per color under the same form name. The ",[591,774,593],{}," slot replaces the option content, not its wrapper.",[577,777,779],{"id":778},"api-reference","API Reference",[670,781,783],{"id":782},"props","Props",[785,786,787,806],"table",{},[788,789,790],"thead",{},[791,792,793,797,800,803],"tr",{},[794,795,796],"th",{},"Prop",[794,798,799],{},"Type",[794,801,802],{},"Default",[794,804,805],{},"Purpose",[807,808,809,830,848,867,887,907,936,958,988,1015],"tbody",{},[791,810,811,817,822,827],{},[812,813,814],"td",{},[591,815,816],{},"modelValue",[812,818,819],{},[591,820,821],{},"string | string[]",[812,823,824],{},[591,825,826],{},"\"\"",[812,828,829],{},"Use an array with multiple selection.",[791,831,832,837,842,845],{},[812,833,834],{},[591,835,836],{},"items",[812,838,839],{},[591,840,841],{},"Array\u003Cstring | ColorSwatchOption>",[812,843,844],{},"Required",[812,846,847],{},"Preset colors and optional labels\u002Fdisabled state.",[791,849,850,854,859,864],{},[812,851,852],{},[591,853,725],{},[812,855,856],{},[591,857,858],{},"ColorFormat",[812,860,861],{},[591,862,863],{},"\"hex\"",[812,865,866],{},"Format for selected color strings.",[791,868,869,874,879,884],{},[812,870,871],{},[591,872,873],{},"multiple",[812,875,876],{},[591,877,878],{},"boolean",[812,880,881],{},[591,882,883],{},"false",[812,885,886],{},"Allow multiple colors.",[791,888,889,894,899,904],{},[812,890,891],{},[591,892,893],{},"selectionBehavior",[812,895,896],{},[591,897,898],{},"\"toggle\" | \"replace\"",[812,900,901],{},[591,902,903],{},"\"toggle\"",[812,905,906],{},"How multiple selections accumulate.",[791,908,909,917,925,933],{},[812,910,911,598,914],{},[591,912,913],{},"orientation",[591,915,916],{},"dir",[812,918,919,598,922],{},[591,920,921],{},"\"horizontal\" | \"vertical\"",[591,923,924],{},"\"ltr\" | \"rtl\"",[812,926,927,598,930],{},[591,928,929],{},"\"horizontal\"",[591,931,932],{},"\"ltr\"",[812,934,935],{},"Keyboard direction.",[791,937,938,946,950,955],{},[812,939,940,598,943],{},[591,941,942],{},"loop",[591,944,945],{},"highlightOnHover",[812,947,948],{},[591,949,878],{},[812,951,952],{},[591,953,954],{},"true",[812,956,957],{},"Focus wrapping and pointer highlighting.",[791,959,960,977,982,985],{},[812,961,962,598,965,598,968,598,971,598,974],{},[591,963,964],{},"id",[591,966,967],{},"name",[591,969,970],{},"ariaLabel",[591,972,973],{},"ariaLabelledby",[591,975,976],{},"ariaDescribedby",[812,978,979],{},[591,980,981],{},"string",[812,983,984],{},"From Field where applicable",[812,986,987],{},"Association, form name, and accessible naming.",[791,989,990,1004,1008,1012],{},[812,991,992,598,995,598,998,598,1001],{},[591,993,994],{},"required",[591,996,997],{},"disabled",[591,999,1000],{},"readOnly",[591,1002,1003],{},"invalid",[812,1005,1006],{},[591,1007,878],{},[812,1009,1010],{},[591,1011,883],{},[812,1013,1014],{},"Form and interaction state.",[791,1016,1017,1022,1027,1030],{},[812,1018,1019],{},[591,1020,1021],{},"ui",[812,1023,1024],{},[591,1025,1026],{},"ColorSwatchPickerUi",[812,1028,1029],{},"-",[812,1031,1032],{},"Classes for named parts.",[670,1034,1036],{"id":1035},"emits","Emits",[785,1038,1039,1052],{},[788,1040,1041],{},[791,1042,1043,1046,1049],{},[794,1044,1045],{},"Event",[794,1047,1048],{},"Payload",[794,1050,1051],{},"Meaning",[807,1053,1054,1067,1093],{},[791,1055,1056,1061,1064],{},[812,1057,1058],{},[591,1059,1060],{},"update:modelValue",[812,1062,1063],{},"Selected color or color array",[812,1065,1066],{},"Vue model update.",[791,1068,1069,1073,1078],{},[812,1070,1071],{},[591,1072,735],{},[812,1074,1075],{},[591,1076,1077],{},"(value, details)",[812,1079,1080,1081,1084,1085,1088,1089,1092],{},"Runs before a change. Use ",[591,1082,1083],{},"details.cancel()"," to stop it. Includes ",[591,1086,1087],{},"reason"," and the native ",[591,1090,1091],{},"event"," when available.",[791,1094,1095,1100,1104],{},[812,1096,1097],{},[591,1098,1099],{},"value-commit",[812,1101,1102],{},[591,1103,1077],{},[812,1105,1106],{},"Runs when an interaction ends. Canceling it does not undo the value change.",[670,1108,1110],{"id":1109},"slots","Slots",[582,1112,1113,1137,1145],{},[585,1114,1115,594,1119,598,1121,598,1123,598,1125,598,1127,598,1129,598,1131,598,1133,620,1135,624],{},[588,1116,1117],{},[591,1118,593],{},[591,1120,597],{},[591,1122,601],{},[591,1124,604],{},[591,1126,607],{},[591,1128,610],{},[591,1130,613],{},[591,1132,616],{},[591,1134,619],{},[591,1136,623],{},[585,1138,1139,632,1143,624],{},[588,1140,1141],{},[591,1142,631],{},[591,1144,593],{},[585,1146,1147,642],{},[588,1148,1149],{},[591,1150,641],{},[670,1152,1154],{"id":1153},"ui-options","UI Options",[785,1156,1157,1167],{},[788,1158,1159],{},[791,1160,1161,1164],{},[794,1162,1163],{},"Key",[794,1165,1166],{},"Element",[807,1168,1169,1179,1189,1199,1208,1218,1227,1237,1247],{},[791,1170,1171,1176],{},[812,1172,1173],{},[591,1174,1175],{},"root",[812,1177,1178],{},"Outer Listbox root",[791,1180,1181,1186],{},[812,1182,1183],{},[591,1184,1185],{},"viewport",[812,1187,1188],{},"Focusable Listbox viewport",[791,1190,1191,1196],{},[812,1192,1193],{},[591,1194,1195],{},"content",[812,1197,1198],{},"Options container",[791,1200,1201,1205],{},[812,1202,1203],{},[591,1204,597],{},[812,1206,1207],{},"Generated option",[791,1209,1210,1215],{},[812,1211,1212],{},[591,1213,1214],{},"swatch",[812,1216,1217],{},"Decorative color preview",[791,1219,1220,1224],{},[812,1221,1222],{},[591,1223,610],{},[812,1225,1226],{},"Accessible color name",[791,1228,1229,1234],{},[812,1230,1231],{},[591,1232,1233],{},"indicator",[812,1235,1236],{},"Selection indicator",[791,1238,1239,1244],{},[812,1240,1241],{},[591,1242,1243],{},"input",[812,1245,1246],{},"Form input",[791,1248,1249,1254],{},[812,1250,1251],{},[591,1252,1253],{},"empty",[812,1255,1256],{},"Empty palette content",[670,1258,1260],{"id":1259},"styling-hooks","Styling Hooks",[785,1262,1263,1276],{},[788,1264,1265],{},[791,1266,1267,1270,1273],{},[794,1268,1269],{},"UI key",[794,1271,1272],{},"CSS class",[794,1274,1275],{},"Data attributes \u002F semantics",[807,1277,1278,1295,1311,1325,1339,1353,1366,1379,1393],{},[791,1279,1280,1284,1289],{},[812,1281,1282],{},[591,1283,1175],{},[812,1285,1286],{},[591,1287,1288],{},"akaza-color-swatch-picker",[812,1290,1291,1292],{},"Listbox form state; ",[591,1293,1294],{},"data-akaza-orientation",[791,1296,1297,1301,1306],{},[812,1298,1299],{},[591,1300,1185],{},[812,1302,1303],{},[591,1304,1305],{},"akaza-color-swatch-picker-viewport",[812,1307,1308],{},[591,1309,1310],{},"role=\"listbox\"",[791,1312,1313,1317,1322],{},[812,1314,1315],{},[591,1316,1195],{},[812,1318,1319],{},[591,1320,1321],{},"akaza-color-swatch-picker-content",[812,1323,1324],{},"Options wrapper",[791,1326,1327,1331,1336],{},[812,1328,1329],{},[591,1330,597],{},[812,1332,1333],{},[591,1334,1335],{},"akaza-color-swatch-picker-item",[812,1337,1338],{},"`data-akaza-state=\"checked",[791,1340,1341,1345,1350],{},[812,1342,1343],{},[591,1344,1214],{},[812,1346,1347],{},[591,1348,1349],{},"akaza-color-swatch-picker-swatch",[812,1351,1352],{},"Color Swatch empty state",[791,1354,1355,1359,1364],{},[812,1356,1357],{},[591,1358,610],{},[812,1360,1361],{},[591,1362,1363],{},"akaza-color-swatch-picker-label",[812,1365,1029],{},[791,1367,1368,1372,1377],{},[812,1369,1370],{},[591,1371,1233],{},[812,1373,1374],{},[591,1375,1376],{},"akaza-color-swatch-picker-indicator",[812,1378,1338],{},[791,1380,1381,1385,1390],{},[812,1382,1383],{},[591,1384,1243],{},[812,1386,1387],{},[591,1388,1389],{},"akaza-color-swatch-picker-input",[812,1391,1392],{},"Native form attributes",[791,1394,1395,1399,1404],{},[812,1396,1397],{},[591,1398,1253],{},[812,1400,1401],{},[591,1402,1403],{},"akaza-color-swatch-picker-empty",[812,1405,1029],{},[675,1407,1408,1409,1412,1413,598,1416,598,1419,598,1422,620,1425,1428,1429,624],{},"The root exposes ",[591,1410,1411],{},"data-akaza-state=\"selected|empty\"",". It also sets ",[591,1414,1415],{},"data-akaza-disabled",[591,1417,1418],{},"data-akaza-readonly",[591,1420,1421],{},"data-akaza-invalid",[591,1423,1424],{},"data-akaza-focused",[591,1426,1427],{},"data-akaza-filled"," when true. Each item has its own selection and highlight attributes. The picker does not expose ",[591,1430,1431],{},"data-akaza-out-of-gamut",[675,1433,677,1434,1437,1438,1441,1442,1444],{},[591,1435,1436],{},"class"," or ",[591,1439,1440],{},"ui.root"," to style the root. Use the other ",[591,1443,1021],{}," keys for inner parts. Set sizes, borders, and colors in your own styles.",[670,1446,1448],{"id":1447},"keyboard","Keyboard",[785,1450,1451,1459],{},[788,1452,1453],{},[791,1454,1455,1457],{},[794,1456,1163],{},[794,1458,754],{},[807,1460,1461,1469,1483,1496,1504,1512],{},[791,1462,1463,1466],{},[812,1464,1465],{},"Orientation arrow keys",[812,1467,1468],{},"Move the highlighted option, respecting RTL, wrapping, and disabled entries.",[791,1470,1471,1480],{},[812,1472,1473,1476,1477],{},[591,1474,1475],{},"Home"," \u002F ",[591,1478,1479],{},"End",[812,1481,1482],{},"Highlight first\u002Flast enabled option.",[791,1484,1485,1493],{},[812,1486,1487,1476,1490],{},[591,1488,1489],{},"Enter",[591,1491,1492],{},"Space",[812,1494,1495],{},"Select\u002Ftoggle the highlighted color.",[791,1497,1498,1501],{},[812,1499,1500],{},"Shift+navigation",[812,1502,1503],{},"Extend selection in multiple mode.",[791,1505,1506,1509],{},[812,1507,1508],{},"Ctrl\u002FCmd+A",[812,1510,1511],{},"Select all enabled colors in multiple mode.",[791,1513,1514,1517],{},[812,1515,1516],{},"Character keys",[812,1518,1519],{},"Typeahead by option label.",[577,1521,1523],{"id":1522},"parity-notes","Parity Notes",[675,1525,1526],{},"Like Reka's color swatch picker, this component supports single and multiple selection, keyboard navigation, RTL, and disabled options. Customize its items through slots. The supplied Base UI reference has no color swatch picker component.",{"title":662,"searchDepth":1528,"depth":1529,"links":1530},1,2,[1531,1532,1533,1539,1540,1541,1549],{"id":579,"depth":1529,"text":580},{"id":645,"depth":1529,"text":29},{"id":667,"depth":1529,"text":668,"children":1534},[1535,1537,1538],{"id":672,"depth":1536,"text":673},3,{"id":689,"depth":1536,"text":690},{"id":702,"depth":1536,"text":703},{"id":718,"depth":1529,"text":719},{"id":753,"depth":1529,"text":754},{"id":778,"depth":1529,"text":779,"children":1542},[1543,1544,1545,1546,1547,1548],{"id":782,"depth":1536,"text":783},{"id":1035,"depth":1536,"text":1036},{"id":1109,"depth":1536,"text":1110},{"id":1153,"depth":1536,"text":1154},{"id":1259,"depth":1536,"text":1260},{"id":1447,"depth":1536,"text":1448},{"id":1522,"depth":1529,"text":1523},"md",{},{"icon":53,"badge":1553},{"label":69,"color":70},{"title":227,"description":232},"GGaCb_XMetcfbvWatIELZsplqlS6G1F4-f8QrGYvAXw",[1557,1559],{"title":219,"path":220,"stem":221,"icon":53,"badge":1558,"children":-1},{"label":69,"color":70},{"title":235,"path":236,"stem":237,"icon":239,"children":-1},"\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","\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",1793603913575]