[{"data":1,"prerenderedAt":1275},["ShallowReactive",2],{"docs-navigation":3,"page:\u002Fcomposables\u002Fuse-color":571,"surround:\u002Fcomposables\u002Fuse-color":1271,"code:v-0-0-79-2-2-0":1274},[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":49,"body":573,"description":54,"extension":1266,"links":36,"meta":1267,"navigation":1268,"path":50,"seo":1269,"stem":51,"__hash__":1270},"docs\u002F2.composables\u002Fuse-color.md",{"type":574,"value":575,"toc":1251},"minimark",[576,584,588,598,609,613,619,789,799,806,810,815,821,827,831,836,919,923,995,999,1083,1115,1119,1214,1221,1225,1231],[577,578,579,580,583],"p",{},"Use ",[581,582,49],"code",{}," to convert color strings and edit their channels. It does not render controls. Akaza's color components use it to share color state.",[585,586,5],"h2",{"id":587},"getting-started",[589,590,596],"pre",{"className":591,"code":593,"language":594,"meta":595},[592],"language-vue","\u003Cscript setup lang=\"ts\">\nimport type { ColorFormat } from \"akaza-ui\";\nimport { useColor } from \"akaza-ui\";\nimport { ref } from \"vue\";\n\nconst value = ref(\"oklch(0.65 0.2 250 \u002F 0.8)\");\nconst format = ref\u003CColorFormat>(\"oklch\");\nconst color = useColor(value, { format });\n\nfunction setBlue() {\n  color.setChannels(\"hsb\", { hue: 220, saturation: 80, brightness: 90 });\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton\n    type=\"button\"\n    @click=\"setBlue\"\n  >\n    Set blue\n  \u003C\u002Fbutton>\n  \u003Coutput>{{ value }}\u003C\u002Foutput>\n\u003C\u002Ftemplate>\n","vue","",[581,597,593],{"__ignoreMap":595},[577,599,600,601,604,605,608],{},"Pass the model ref, not ",[581,602,603],{},"value.value",". You can pass a ref or getter for ",[581,606,607],{},"format",". Each call has its own state.",[585,610,612],{"id":611},"formats","Formats",[577,614,615,616,618],{},"Set ",[581,617,607],{}," to choose the returned color string. You can enter a color in any supported format. Color components use the chosen format for model updates, events, and form values.",[620,621,622,635],"table",{},[623,624,625],"thead",{},[626,627,628,632],"tr",{},[629,630,631],"th",{},"Format",[629,633,634],{},"Output",[636,637,638,656,668,689,706,718,731,744,756,776],"tbody",{},[626,639,640,646],{},[641,642,643],"td",{},[581,644,645],{},"hex",[641,647,648,651,652,655],{},[581,649,650],{},"#rrggbb",", or ",[581,653,654],{},"#rrggbbaa"," when translucent",[626,657,658,663],{},[641,659,660],{},[581,661,662],{},"hexa",[641,664,665,666],{},"Always ",[581,667,654],{},[626,669,670,679],{},[641,671,672,675,676],{},[581,673,674],{},"rgb",", ",[581,677,678],{},"rgba",[641,680,681,682,685,686,688],{},"Modern ",[581,683,684],{},"rgb(r g b \u002F alpha)"," syntax; ",[581,687,678],{}," always includes alpha",[626,690,691,699],{},[641,692,693,675,696],{},[581,694,695],{},"hsl",[581,697,698],{},"hsla",[641,700,681,701,685,704,688],{},[581,702,703],{},"hsl(h s% l% \u002F alpha)",[581,705,698],{},[626,707,708,713],{},[641,709,710],{},[581,711,712],{},"hwb",[641,714,715],{},[581,716,717],{},"hwb(...)",[626,719,720,728],{},[641,721,722,675,725],{},[581,723,724],{},"lab",[581,726,727],{},"lch",[641,729,730],{},"CSS D50 Lab\u002FLCH",[626,732,733,741],{},[641,734,735,675,738],{},[581,736,737],{},"oklab",[581,739,740],{},"oklch",[641,742,743],{},"CSS OKLab\u002FOKLCH",[626,745,746,751],{},[641,747,748],{},[581,749,750],{},"display-p3",[641,752,753],{},[581,754,755],{},"color(display-p3 ...)",[626,757,758,769],{},[641,759,760,675,763,675,766],{},[581,761,762],{},"a98-rgb",[581,764,765],{},"prophoto-rgb",[581,767,768],{},"rec2020",[641,770,771,772,775],{},"Corresponding CSS ",[581,773,774],{},"color(...)"," spaces",[626,777,778,786],{},[641,779,780,675,783],{},[581,781,782],{},"xyz-d50",[581,784,785],{},"xyz-d65",[641,787,788],{},"Corresponding CSS XYZ spaces",[577,790,579,791,794,795,798],{},[581,792,793],{},"COLOR_FORMATS"," to build a format selector. You can also enter CSS color names, ",[581,796,797],{},"transparent",", and short HEX values. HSB\u002FHSV supports channel editing but is not a CSS output format.",[577,800,801,802,805],{},"CSS variables, ",[581,803,804],{},"currentColor",", relative color expressions, gradients, and URLs are not supported. The same input rules apply during SSR.",[585,807,809],{"id":808},"precision-and-gamut","Precision and Gamut",[577,811,812,814],{},[581,813,49],{}," keeps more precision than the returned string. Editing does not round the color on each step. It remembers hue and saturation when you pass through black, and hue when you pass through gray. Replacing the model or entering a valid text value replaces the stored color.",[577,816,817,818,820],{},"RGB and HEX cannot represent all LCH, OKLCH, or Display P3 colors. These outputs clip colors to sRGB. Changing the format back restores the original color while you keep the same ",[581,819,49],{}," instance. If you store only the HEX string and create a new instance, you lose that extra color information.",[577,822,823,826],{},[581,824,825],{},"isOutOfGamut"," tells you whether the color falls outside sRGB. Areas and slider gradients show sRGB previews. Swatches use CSS OKLCH; their appearance depends on the browser and display.",[585,828,830],{"id":829},"api-reference","API Reference",[832,833,835],"h3",{"id":834},"arguments","Arguments",[620,837,838,851],{},[623,839,840],{},[626,841,842,845,848],{},[629,843,844],{},"Argument",[629,846,847],{},"Type",[629,849,850],{},"Default",[636,852,853,869,886,905],{},[626,854,855,860,866],{},[641,856,857],{},[581,858,859],{},"model",[641,861,862,863],{},"Writable ",[581,864,865],{},"Ref\u003Cstring>",[641,867,868],{},"A local red color ref",[626,870,871,876,881],{},[641,872,873],{},[581,874,875],{},"options.format",[641,877,878],{},[581,879,880],{},"MaybeRefOrGetter\u003CColorFormat>",[641,882,883],{},[581,884,885],{},"\"hex\"",[626,887,888,893,898],{},[641,889,890],{},[581,891,892],{},"options.onChange",[641,894,895],{},[581,896,897],{},"(value, details) => void",[641,899,900,901,904],{},"None; call ",[581,902,903],{},"details.cancel()"," to reject a change",[626,906,907,912,916],{},[641,908,909],{},[581,910,911],{},"options.onCommit",[641,913,914],{},[581,915,897],{},[641,917,918],{},"None; runs when an interaction ends",[832,920,922],{"id":921},"returned-state","Returned State",[620,924,925,935],{},[623,926,927],{},[626,928,929,932],{},[629,930,931],{},"Member",[629,933,934],{},"Meaning",[636,936,937,947,956,966,976,986],{},[626,938,939,944],{},[641,940,941],{},[581,942,943],{},"value",[641,945,946],{},"Readonly computed, formatted CSS color; empty for an unparseable external value",[626,948,949,953],{},[641,950,951],{},[581,952,607],{},[641,954,955],{},"Resolved output format",[626,957,958,963],{},[641,959,960],{},[581,961,962],{},"cssColor",[641,964,965],{},"CSS OKLCH representation for previews",[626,967,968,973],{},[641,969,970],{},[581,971,972],{},"isEmpty",[641,974,975],{},"Model is an empty string; transparent is not empty",[626,977,978,983],{},[641,979,980],{},[581,981,982],{},"isValid",[641,984,985],{},"Model is empty or parseable; required validation belongs to the component\u002Fform",[626,987,988,992],{},[641,989,990],{},[581,991,825],{},[641,993,994],{},"Working color is outside sRGB",[832,996,998],{"id":997},"actions","Actions",[620,1000,1001,1011],{},[623,1002,1003],{},[626,1004,1005,1008],{},[629,1006,1007],{},"Method",[629,1009,1010],{},"Behavior",[636,1012,1013,1023,1033,1043,1053,1063,1073],{},[626,1014,1015,1020],{},[641,1016,1017],{},[581,1018,1019],{},"setValue(cssColor, reason?, event?)",[641,1021,1022],{},"Parse and request a change. Returns false for invalid input or cancellation. Empty string clears the value.",[626,1024,1025,1030],{},[641,1026,1027],{},[581,1028,1029],{},"getChannel(space, channel)",[641,1031,1032],{},"Read a channel using the units below.",[626,1034,1035,1040],{},[641,1036,1037],{},[581,1038,1039],{},"getChannelInfo(space, channel)",[641,1041,1042],{},"Get a copy of its label, minimum, maximum, default step, and channel key; null for an unsupported pair.",[626,1044,1045,1050],{},[641,1046,1047],{},[581,1048,1049],{},"setChannels(space, changes, reason?, event?)",[641,1051,1052],{},"Change several channels at once, keep them within the editor ranges, and request one update.",[626,1054,1055,1060],{},[641,1056,1057],{},[581,1058,1059],{},"toString(format?)",[641,1061,1062],{},"Return a color string without changing state.",[626,1064,1065,1070],{},[641,1066,1067],{},[581,1068,1069],{},"commit(reason?, event?)",[641,1071,1072],{},"Notify completion; does not apply or undo a change.",[626,1074,1075,1080],{},[641,1076,1077],{},[581,1078,1079],{},"reset()",[641,1081,1082],{},"Request the initial color in the current output format; clears hue memory after acceptance.",[577,1084,1085,1086,1089,1090,675,1093,675,1096,675,1099,675,1102,675,1105,675,1107,1110,1111,1114],{},"Reasons default to ",[581,1087,1088],{},"programmatic","; components also use ",[581,1091,1092],{},"input",[581,1094,1095],{},"keyboard",[581,1097,1098],{},"pointer",[581,1100,1101],{},"blur",[581,1103,1104],{},"enter",[581,1106,607],{},[581,1108,1109],{},"select",", and ",[581,1112,1113],{},"reset",". Methods requiring values must be called with explicit arguments, not bound directly as native event handlers.",[832,1116,1118],{"id":1117},"channels","Channels",[620,1120,1121,1131],{},[623,1122,1123],{},[626,1124,1125,1128],{},[629,1126,1127],{},"Editing space",[629,1129,1130],{},"Channels and bounds",[636,1132,1133,1142,1151,1161,1170,1179,1188,1197,1206],{},[626,1134,1135,1139],{},[641,1136,1137],{},[581,1138,674],{},[641,1140,1141],{},"red\u002Fgreen\u002Fblue 0-255",[626,1143,1144,1148],{},[641,1145,1146],{},[581,1147,695],{},[641,1149,1150],{},"hue 0-360; saturation\u002Flightness 0-100",[626,1152,1153,1158],{},[641,1154,1155],{},[581,1156,1157],{},"hsb",[641,1159,1160],{},"hue 0-360; saturation\u002Fbrightness 0-100",[626,1162,1163,1167],{},[641,1164,1165],{},[581,1166,712],{},[641,1168,1169],{},"hue 0-360; whiteness\u002Fblackness 0-100",[626,1171,1172,1176],{},[641,1173,1174],{},[581,1175,724],{},[641,1177,1178],{},"lightness 0-100; a\u002Fb -125 to 125",[626,1180,1181,1185],{},[641,1182,1183],{},[581,1184,727],{},[641,1186,1187],{},"lightness 0-100; chroma 0-150; hue 0-360",[626,1189,1190,1194],{},[641,1191,1192],{},[581,1193,737],{},[641,1195,1196],{},"lightness 0-100; a\u002Fb -0.4 to 0.4",[626,1198,1199,1203],{},[641,1200,1201],{},[581,1202,740],{},[641,1204,1205],{},"lightness 0-100; chroma 0-0.4; hue 0-360",[626,1207,1208,1211],{},[641,1209,1210],{},"All",[641,1212,1213],{},"alpha 0-100",[577,1215,1216,1217,1220],{},"Default steps are 1, except OKLab a\u002Fb and OKLCH chroma, which use 0.001. Editor bounds are interaction ranges, not limits on the CSS color literals accepted by ",[581,1218,1219],{},"setValue",".",[585,1222,1224],{"id":1223},"scope-and-accessibility","Scope and Accessibility",[577,1226,1227,1228,1230],{},"Call ",[581,1229,49],{}," in component setup or an effect scope so Vue cleans it up. It supports SSR and does not access the DOM, storage, or network.",[577,1232,1233,1234,675,1238,675,1241,675,1244,651,1247,1250],{},"This composable does not provide keyboard behavior or ARIA by itself. Use ",[1235,1236,1237],"a",{"href":204},"ColorPicker",[1235,1239,1240],{"href":196},"ColorField",[1235,1242,1243],{"href":188},"ColorArea",[1235,1245,1246],{"href":212},"ColorSlider",[1235,1248,1249],{"href":228},"ColorSwatchPicker"," for complete rendered controls.",{"title":595,"searchDepth":1252,"depth":1253,"links":1254},1,2,[1255,1256,1257,1258,1265],{"id":587,"depth":1253,"text":5},{"id":611,"depth":1253,"text":612},{"id":808,"depth":1253,"text":809},{"id":829,"depth":1253,"text":830,"children":1259},[1260,1262,1263,1264],{"id":834,"depth":1261,"text":835},3,{"id":921,"depth":1261,"text":922},{"id":997,"depth":1261,"text":998},{"id":1117,"depth":1261,"text":1118},{"id":1223,"depth":1253,"text":1224},"md",{},{"icon":53},{"title":49,"description":54},"qltYcswK6TM8nDeoxXR1fl42uNJxHca1e7fReQni1Eo",[1272,1273],{"title":44,"path":40,"stem":41,"icon":46,"children":-1},{"title":56,"path":57,"stem":58,"icon":60,"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\">Collapsible\u003C\u002Fspan> } \u003Cspan class=\"shj-syn-control\">from\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">'akaza-ui'\u003C\u002Fspan>\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\"><Collapsible\u003C\u002Fspan> \u003Cspan class=\"shj-syn-attr\">:ui\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"{ trigger: 'px-4 py-3 hover:bg-neutral-50' }\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n    \u003Cspan class=\"shj-syn-tag\"><template\u003C\u002Fspan> \u003Cspan class=\"shj-syn-attr\">#trigger\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"{ isOpen }\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n      \u003Cspan class=\"shj-syn-tag\"><span\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>Advanced settings\u003Cspan class=\"shj-syn-tag\"><\u002Fspan\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\n    \u003Cspan class=\"shj-syn-tag\"><template\u003C\u002Fspan> \u003Cspan class=\"shj-syn-attr\">#icon\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"{ isOpen }\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n      \u003Cspan class=\"shj-syn-tag\"><svg\u003C\u002Fspan> \u003Cspan class=\"shj-syn-attr\">:class\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"{ 'rotate-180': isOpen }\"\u003C\u002Fspan> ...\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\n    \u003Cspan class=\"shj-syn-tag\"><template\u003C\u002Fspan> \u003Cspan class=\"shj-syn-attr\">#content\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n      \u003Cspan class=\"shj-syn-tag\"><p\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>Hidden until the trigger is activated.\u003Cspan class=\"shj-syn-tag\"><\u002Fp\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\"><\u002FCollapsible\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",1793603911914]