[{"data":1,"prerenderedAt":980},["ShallowReactive",2],{"docs-navigation":3,"page:\u002Fcomponents\u002Fcolor-swatch":571,"surround:\u002Fcomponents\u002Fcolor-swatch":971,"code:v-0-0-79-2-4-0-0":976,"code:v-0-0-79-2-8-0":977,"code:v-0-0-79-2-11-0":978,"code:v-0-0-79-2-14-0":979},[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":219,"body":573,"description":224,"extension":965,"links":36,"meta":966,"navigation":967,"path":220,"seo":969,"stem":221,"__hash__":970},"docs\u002F3.components\u002Fcolor-swatch.md",{"type":574,"value":575,"toc":942},"minimark",[576,581,607,610,616,629,633,638,642,648,652,659,665,669,672,678,681,685,694,698,705,714,718,722,821,825,828,832,846,850,874,878,918,928,932,935,939],[577,578,580],"h2",{"id":579},"anatomy","Anatomy",[582,583,584],"ul",{},[585,586,587,594,595,598,599,602,603,606],"li",{},[588,589,590],"strong",{},[591,592,593],"code",{},"#default",": Optional overlay or empty-state content. Receives ",[591,596,597],{},"color",", ",[591,600,601],{},"cssColor",", and ",[591,604,605],{},"isEmpty",".",[577,608,29],{"id":609},"usage",[611,612,613],"component-preview",{},[614,615],"examples-color-swatch-demo",{},[617,618,619],"component-code",{},[620,621,627],"pre",{"className":622,"code":624,"language":625,"meta":626},[623],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { ColorSwatch } from \"akaza-ui\";\nconst color = \"oklch(0.65 0.2 250)\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CColorSwatch\n    :color=\"color\"\n    aria-label=\"Brand color\"\n    :ui=\"{ root: 'block size-9 rounded-md border' }\"\n  \u002F>\n\u003C\u002Ftemplate>\n","vue","",[591,628,624],{"__ignoreMap":626},[577,630,632],{"id":631},"examples","Examples",[634,635,637],"h3",{"id":636},"formats-and-transparency","Formats and transparency",[639,640,641],"p",{},"Show colors in different CSS formats. Transparent is a valid color, not an empty selection.",[620,643,646],{"className":644,"code":645,"language":625,"meta":626},[623],"\u003Ctemplate>\n  \u003Cdiv class=\"grid gap-3\">\n    \u003Cdiv\n      v-for=\"color in colors\"\n      :key=\"color\"\n      class=\"flex min-w-0 items-center gap-3\"\n    >\n      \u003CColorSwatch\n        :color=\"color\"\n        :ui=\"swatchUi\"\n      \u002F>\n      \u003Ccode class=\"min-w-0 break-all text-xs text-muted-foreground\">{{ color }}\u003C\u002Fcode>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[591,647,645],{"__ignoreMap":626},[634,649,651],{"id":650},"decorative-and-custom-content","Decorative and custom content",[639,653,654,655,658],{},"Use ",[591,656,657],{},"decorative"," when nearby text names the color. Add an indicator through the default slot.",[620,660,663],{"className":661,"code":662,"language":625,"meta":626},[623],"\u003Ctemplate>\n  \u003Cspan class=\"inline-flex items-center gap-2 text-sm\">\n    \u003CColorSwatch\n      color=\"#22c55e\"\n      decorative\n      :ui=\"swatchUi\"\n    \u002F>\n    Available\n  \u003C\u002Fspan>\n  \u003CColorSwatch\n    color=\"#171717\"\n    aria-label=\"Black, selected\"\n    :ui=\"{\n      root: 'flex size-10 items-center justify-center rounded-md border border-border text-white',\n    }\"\n  >\n    \u003Cspan aria-hidden=\"true\">✓\u003C\u002Fspan>\n  \u003C\u002FColorSwatch>\n\u003C\u002Ftemplate>\n",[591,664,662],{"__ignoreMap":626},[634,666,668],{"id":667},"empty-state","Empty state",[639,670,671],{},"An empty or invalid color shows an empty swatch. CSS variables are not supported.",[620,673,676],{"className":674,"code":675,"language":625,"meta":626},[623],"\u003Ctemplate>\n  \u003CColorSwatch\n    color=\"\"\n    aria-label=\"No brand color selected\"\n    :ui=\"{ root: 'block size-9 rounded-md border border-dashed border-input' }\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[591,677,675],{"__ignoreMap":626},[639,679,680],{},"See the live demo's code for the state and style objects used in these examples.",[577,682,684],{"id":683},"formats","Formats",[639,686,687,688,693],{},"ColorSwatch accepts the ",[689,690,692],"a",{"href":691},"\u002Fcomposables\u002Fuse-color#formats","supported color formats",". It shows the color without changing or returning a value.",[577,695,697],{"id":696},"behavior","Behavior",[639,699,700,701,704],{},"ColorSwatch is read-only and does not emit selection events. Set its size, border, and background pattern in your own styles. The component sets the color fill and ",[591,702,703],{},"--akaza-color"," CSS variable.",[639,706,654,707,709,710,713],{},[591,708,657],{}," beside text that names the color. Empty or unsupported values set ",[591,711,712],{},"data-akaza-empty",". Transparent remains a valid color.",[577,715,717],{"id":716},"api-reference","API Reference",[634,719,721],{"id":720},"props","Props",[723,724,725,744],"table",{},[726,727,728],"thead",{},[729,730,731,735,738,741],"tr",{},[732,733,734],"th",{},"Prop",[732,736,737],{},"Type",[732,739,740],{},"Default",[732,742,743],{},"Purpose",[745,746,747,767,784,803],"tbody",{},[729,748,749,754,759,764],{},[750,751,752],"td",{},[591,753,597],{},[750,755,756],{},[591,757,758],{},"string",[750,760,761],{},[591,762,763],{},"\"\"",[750,765,766],{},"Any supported CSS color literal.",[729,768,769,774,778,781],{},[750,770,771],{},[591,772,773],{},"ariaLabel",[750,775,776],{},[591,777,758],{},[750,779,780],{},"Color string, or No color",[750,782,783],{},"Accessible preview name.",[729,785,786,790,795,800],{},[750,787,788],{},[591,789,657],{},[750,791,792],{},[591,793,794],{},"boolean",[750,796,797],{},[591,798,799],{},"false",[750,801,802],{},"Remove the image role and hide the preview from assistive technology.",[729,804,805,810,815,818],{},[750,806,807],{},[591,808,809],{},"ui",[750,811,812],{},[591,813,814],{},"ColorSwatchUi",[750,816,817],{},"-",[750,819,820],{},"Root class.",[634,822,824],{"id":823},"emits","Emits",[639,826,827],{},"ColorSwatch has no custom events. Native attributes and listeners apply to its root.",[634,829,831],{"id":830},"slots","Slots",[582,833,834],{},[585,835,836,594,840,598,842,602,844,606],{},[588,837,838],{},[591,839,593],{},[591,841,597],{},[591,843,601],{},[591,845,605],{},[634,847,849],{"id":848},"ui-options","UI Options",[723,851,852,862],{},[726,853,854],{},[729,855,856,859],{},[732,857,858],{},"Key",[732,860,861],{},"Element",[745,863,864],{},[729,865,866,871],{},[750,867,868],{},[591,869,870],{},"root",[750,872,873],{},"Color preview",[634,875,877],{"id":876},"styling-hooks","Styling Hooks",[723,879,880,893],{},[726,881,882],{},[729,883,884,887,890],{},[732,885,886],{},"UI key",[732,888,889],{},"CSS class",[732,891,892],{},"Data attributes \u002F semantics",[745,894,895],{},[729,896,897,901,906],{},[750,898,899],{},[591,900,870],{},[750,902,903],{},[591,904,905],{},"akaza-color-swatch",[750,907,908,910,911,914,915],{},[591,909,712],{},"; conditional ",[591,912,913],{},"role=\"img\""," \u002F ",[591,916,917],{},"aria-hidden",[639,919,654,920,923,924,927],{},[591,921,922],{},"class"," or ",[591,925,926],{},"ui.root"," to style the swatch.",[634,929,931],{"id":930},"keyboard","Keyboard",[639,933,934],{},"ColorSwatch is not interactive and does not create a keyboard stop.",[577,936,938],{"id":937},"parity-notes","Parity Notes",[639,940,941],{},"ColorSwatch provides a color preview and an optional content slot. The supplied Base UI reference has no color swatch component.",{"title":626,"searchDepth":943,"depth":944,"links":945},1,2,[946,947,948,954,955,956,964],{"id":579,"depth":944,"text":580},{"id":609,"depth":944,"text":29},{"id":631,"depth":944,"text":632,"children":949},[950,952,953],{"id":636,"depth":951,"text":637},3,{"id":650,"depth":951,"text":651},{"id":667,"depth":951,"text":668},{"id":683,"depth":944,"text":684},{"id":696,"depth":944,"text":697},{"id":716,"depth":944,"text":717,"children":957},[958,959,960,961,962,963],{"id":720,"depth":951,"text":721},{"id":823,"depth":951,"text":824},{"id":830,"depth":951,"text":831},{"id":848,"depth":951,"text":849},{"id":876,"depth":951,"text":877},{"id":930,"depth":951,"text":931},{"id":937,"depth":944,"text":938},"md",{},{"icon":53,"badge":968},{"label":69,"color":70},{"title":219,"description":224},"hXyjNkDEp9S9ZCzNYJ5oktCrZOf3N0SIyHCSLoJQabI",[972,974],{"title":211,"path":212,"stem":213,"icon":53,"badge":973,"children":-1},{"label":69,"color":70},{"title":227,"path":228,"stem":229,"icon":53,"badge":975,"children":-1},{"label":69,"color":70},"\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",1793603913542]