[{"data":1,"prerenderedAt":1392},["ShallowReactive",2],{"docs-navigation":3,"page:\u002Fcomponents\u002Fcolor-field":571,"surround:\u002Fcomponents\u002Fcolor-field":1385,"code:v-0-0-79-2-8-0":1390,"code:v-0-0-79-2-4-0-0":1391},[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":195,"body":573,"description":200,"extension":1379,"links":36,"meta":1380,"navigation":1381,"path":196,"seo":1383,"stem":197,"__hash__":1384},"docs\u002F3.components\u002Fcolor-field.md",{"type":574,"value":575,"toc":1358},"minimark",[576,581,607,610,616,629,633,638,642,648,655,659,683,691,706,710,720,739,754,758,762,1022,1026,1095,1099,1113,1117,1164,1168,1232,1260,1272,1276,1348,1352],[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 content after the input. Receives ",[591,596,597],{},"value",", ",[591,600,601],{},"draft",", and ",[591,604,605],{},"isInvalid",".",[577,608,29],{"id":609},"usage",[611,612,613],"component-preview",{},[614,615],"examples-color-field-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 { ColorField, ColorSwatch, Field } from \"akaza-ui\";\nimport { ref } from \"vue\";\nconst color = ref(\"#56d799\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CField\n    label=\"Color\"\n    :ui=\"{ root: 'grid w-full max-w-64 gap-2', label: 'text-sm font-medium' }\"\n  >\n    \u003Cdiv class=\"flex min-w-0 items-center gap-3\">\n      \u003CColorSwatch\n        :color=\"color\"\n        decorative\n        :ui=\"{ root: 'block size-9 shrink-0 rounded-md border border-border' }\"\n      \u002F>\n      \u003CColorField\n        v-model=\"color\"\n        :ui=\"{\n          root: 'block min-w-0 flex-1',\n          input:\n            'h-9 w-full min-w-0 rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring',\n        }\"\n      \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002FField>\n\u003C\u002Ftemplate>\n","vue","",[591,628,624],{"__ignoreMap":626},[577,630,632],{"id":631},"examples","Examples",[634,635,637],"h3",{"id":636},"required-field-and-form-reset","Required field and form reset",[639,640,641],"p",{},"Enter a valid color to submit the form. This example submits LCH text. Reset clears the field.",[620,643,646],{"className":644,"code":645,"language":625,"meta":626},[623],"\u003Ctemplate>\n  \u003Cform\n    class=\"grid max-w-sm gap-3\"\n    @submit.prevent=\"submit\"\n  >\n    \u003CField\n      label=\"Brand color\"\n      name=\"brand\"\n      required\n      :ui=\"{\n        root: 'grid gap-1',\n        label: 'text-sm font-medium',\n        error: 'text-xs text-destructive',\n      }\"\n    >\n      \u003CColorField\n        v-model=\"requiredColor\"\n        format=\"lch\"\n        placeholder=\"Enter a color\"\n        :ui=\"fieldUi\"\n      \u002F>\n    \u003C\u002FField>\n    \u003Cdiv class=\"flex gap-2\">\n      \u003Cbutton\n        class=\"rounded-md border border-input px-3 py-1.5 text-sm\"\n        type=\"submit\"\n      >\n        Submit color\n      \u003C\u002Fbutton>\n      \u003Cbutton\n        class=\"rounded-md border border-input px-3 py-1.5 text-sm\"\n        type=\"reset\"\n      >\n        Reset\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Coutput class=\"break-all font-mono text-xs\">{{ result || \"Not submitted\" }}\u003C\u002Foutput>\n  \u003C\u002Fform>\n\u003C\u002Ftemplate>\n",[591,647,645],{"__ignoreMap":626},[639,649,650,651,654],{},"See the live demo's code for ",[591,652,653],{},"fieldUi"," and the submit handler.",[577,656,658],{"id":657},"formats","Formats",[639,660,661,662,665,666,671,672,675,676,678,679,682],{},"Set ",[591,663,664],{},"format"," to choose the returned color string. It does not change which colors you can enter or which channels you edit. See ",[667,668,670],"a",{"href":669},"\u002Fcomposables\u002Fuse-color#formats","supported formats",". Changing the format keeps opacity and emits ",[591,673,674],{},"value-change"," with reason ",[591,677,664],{},". HEX uses eight digits for transparent colors; ",[591,680,681],{},"hexa"," uses eight digits for all colors.",[639,684,685,686,690],{},"HEX and RGB can lose colors outside sRGB. The control keeps the original color until you replace the model or enter a new value. Area and slider previews use sRGB. See ",[667,687,689],{"href":688},"\u002Fcomposables\u002Fuse-color#precision-and-gamut","precision and gamut"," for details.",[639,692,693,694,697,698,701,702,705],{},"Use a color value such as ",[591,695,696],{},"#56d799"," or ",[591,699,700],{},"oklch(0.65 0.2 250)",". CSS variables, ",[591,703,704],{},"currentColor",", and relative color expressions are not supported.",[577,707,709],{"id":708},"behavior","Behavior",[639,711,712,713,697,716,719],{},"The field starts empty. While you type an incomplete value such as ",[591,714,715],{},"#",[591,717,718],{},"oklch(",", the model keeps its last valid color. The field shows validation state after you leave it. Invalid drafts block form submission. Press Escape to restore the last valid color.",[639,721,722,723,726,727,730,731,734,735,738],{},"Valid input updates ",[591,724,725],{},"v-model"," as you type. Leaving the input or pressing Enter emits ",[591,728,729],{},"value-commit",". The visible input handles browser validation; a hidden input submits the color in the chosen format. Use ",[591,732,733],{},"ui.input"," to style the text box; ",[591,736,737],{},"class"," styles its wrapper.",[639,740,661,741,744,745,748,749,753],{},[591,742,743],{},"channel"," to edit one number, such as hue or opacity. Set ",[591,746,747],{},"colorSpace"," to choose its units. See ",[667,750,752],{"href":751},"\u002Fcomposables\u002Fuse-color#channels","useColor channels"," for the ranges and steps.",[577,755,757],{"id":756},"api-reference","API Reference",[634,759,761],{"id":760},"props","Props",[763,764,765,784],"table",{},[766,767,768],"thead",{},[769,770,771,775,778,781],"tr",{},[772,773,774],"th",{},"Prop",[772,776,777],{},"Type",[772,779,780],{},"Default",[772,782,783],{},"Purpose",[785,786,787,810,829,849,878,901,917,933,952,970,987,1006],"tbody",{},[769,788,789,795,800,805],{},[790,791,792],"td",{},[591,793,794],{},"modelValue",[790,796,797],{},[591,798,799],{},"string",[790,801,802],{},[591,803,804],{},"\"\"",[790,806,807,808,606],{},"Selected CSS color. Bind with ",[591,809,725],{},[769,811,812,816,821,826],{},[790,813,814],{},[591,815,664],{},[790,817,818],{},[591,819,820],{},"ColorFormat",[790,822,823],{},[591,824,825],{},"\"hex\"",[790,827,828],{},"Format for the returned and submitted color string.",[769,830,831,839,843,846],{},[790,832,833,598,836],{},[591,834,835],{},"id",[591,837,838],{},"name",[790,840,841],{},[591,842,799],{},[790,844,845],{},"From Field",[790,847,848],{},"Input ID and form field name.",[769,850,851,865,870,875],{},[790,852,853,598,856,598,859,598,862],{},[591,854,855],{},"required",[591,857,858],{},"disabled",[591,860,861],{},"readOnly",[591,863,864],{},"invalid",[790,866,867],{},[591,868,869],{},"boolean",[790,871,872],{},[591,873,874],{},"false",[790,876,877],{},"Native validation and interaction states; disabled\u002Frequired also inherit from Field.",[769,879,880,891,895,898],{},[790,881,882,598,885,598,888],{},[591,883,884],{},"ariaLabel",[591,886,887],{},"ariaLabelledby",[591,889,890],{},"ariaDescribedby",[790,892,893],{},[591,894,799],{},[790,896,897],{},"From Field where applicable",[790,899,900],{},"Accessible naming and description.",[769,902,903,908,911,914],{},[790,904,905],{},[591,906,907],{},"ui",[790,909,910],{},"Component UI object",[790,912,913],{},"-",[790,915,916],{},"Classes for the named parts below.",[769,918,919,923,928,930],{},[790,920,921],{},[591,922,743],{},[790,924,925],{},[591,926,927],{},"ColorChannel",[790,929,913],{},[790,931,932],{},"Omit for a complete CSS color; provide for a numeric channel.",[769,934,935,939,944,949],{},[790,936,937],{},[591,938,747],{},[790,940,941],{},[591,942,943],{},"ColorSpace",[790,945,946],{},[591,947,948],{},"\"hsb\"",[790,950,951],{},"Space used by numeric channel editing.",[769,953,954,959,964,967],{},[790,955,956],{},[591,957,958],{},"step",[790,960,961],{},[591,962,963],{},"number",[790,965,966],{},"Channel default",[790,968,969],{},"Increment for arrow\u002Fwheel actions.",[769,971,972,977,981,984],{},[790,973,974],{},[591,975,976],{},"locale",[790,978,979],{},[591,980,799],{},[790,982,983],{},"Runtime locale",[790,985,986],{},"Number formatting and decimal separator for channel editing.",[769,988,989,994,998,1003],{},[790,990,991],{},[591,992,993],{},"disableWheelChange",[790,995,996],{},[591,997,869],{},[790,999,1000],{},[591,1001,1002],{},"true",[790,1004,1005],{},"Wheel adjustment is opt-in and only applies while focused.",[769,1007,1008,1013,1017,1019],{},[790,1009,1010],{},[591,1011,1012],{},"placeholder",[790,1014,1015],{},[591,1016,799],{},[790,1018,913],{},[790,1020,1021],{},"Empty input hint.",[634,1023,1025],{"id":1024},"emits","Emits",[763,1027,1028,1041],{},[766,1029,1030],{},[769,1031,1032,1035,1038],{},[772,1033,1034],{},"Event",[772,1036,1037],{},"Payload",[772,1039,1040],{},"Meaning",[785,1042,1043,1056,1082],{},[769,1044,1045,1050,1053],{},[790,1046,1047],{},[591,1048,1049],{},"update:modelValue",[790,1051,1052],{},"Selected color",[790,1054,1055],{},"Vue model update.",[769,1057,1058,1062,1067],{},[790,1059,1060],{},[591,1061,674],{},[790,1063,1064],{},[591,1065,1066],{},"(value, details)",[790,1068,1069,1070,1073,1074,1077,1078,1081],{},"Runs before a change. Use ",[591,1071,1072],{},"details.cancel()"," to stop it. Includes ",[591,1075,1076],{},"reason"," and the native ",[591,1079,1080],{},"event"," when available.",[769,1083,1084,1088,1092],{},[790,1085,1086],{},[591,1087,729],{},[790,1089,1090],{},[591,1091,1066],{},[790,1093,1094],{},"Runs when an interaction ends. Canceling it does not undo the value change.",[634,1096,1098],{"id":1097},"slots","Slots",[582,1100,1101],{},[585,1102,1103,594,1107,598,1109,602,1111,606],{},[588,1104,1105],{},[591,1106,593],{},[591,1108,597],{},[591,1110,601],{},[591,1112,605],{},[634,1114,1116],{"id":1115},"ui-options","UI Options",[763,1118,1119,1129],{},[766,1120,1121],{},[769,1122,1123,1126],{},[772,1124,1125],{},"Key",[772,1127,1128],{},"Element",[785,1130,1131,1141,1154],{},[769,1132,1133,1138],{},[790,1134,1135],{},[591,1136,1137],{},"root",[790,1139,1140],{},"Wrapper; direct class styles this wrapper",[769,1142,1143,1148],{},[790,1144,1145],{},[591,1146,1147],{},"input",[790,1149,1150,1151,1153],{},"Visible input; use ",[591,1152,733],{}," for borders and typography",[769,1155,1156,1161],{},[790,1157,1158],{},[591,1159,1160],{},"hiddenInput",[790,1162,1163],{},"Normalized form value",[634,1165,1167],{"id":1166},"styling-hooks","Styling Hooks",[763,1169,1170,1183],{},[766,1171,1172],{},[769,1173,1174,1177,1180],{},[772,1175,1176],{},"UI key",[772,1178,1179],{},"CSS class",[772,1181,1182],{},"Data attributes \u002F semantics",[785,1184,1185,1199,1213],{},[769,1186,1187,1191,1196],{},[790,1188,1189],{},[591,1190,1137],{},[790,1192,1193],{},[591,1194,1195],{},"akaza-color-field",[790,1197,1198],{},"Shared form flags",[769,1200,1201,1205,1210],{},[790,1202,1203],{},[591,1204,1147],{},[790,1206,1207],{},[591,1208,1209],{},"akaza-color-field-input",[790,1211,1212],{},"Shared form flags; native input attributes",[769,1214,1215,1219,1224],{},[790,1216,1217],{},[591,1218,1160],{},[790,1220,1221],{},[591,1222,1223],{},"akaza-color-field-hidden-input",[790,1225,1226,598,1228,598,1230],{},[591,1227,838],{},[591,1229,597],{},[591,1231,858],{},[639,1233,1234,1235,598,1238,598,1241,598,1244,598,1247,598,1250,598,1253,602,1256,1259],{},"Form state attributes: ",[591,1236,1237],{},"data-akaza-disabled",[591,1239,1240],{},"data-akaza-readonly",[591,1242,1243],{},"data-akaza-invalid",[591,1245,1246],{},"data-akaza-focused",[591,1248,1249],{},"data-akaza-touched",[591,1251,1252],{},"data-akaza-dirty",[591,1254,1255],{},"data-akaza-filled",[591,1257,1258],{},"data-akaza-out-of-gamut",". Each appears only when true.",[639,1261,1262,1263,697,1265,1268,1269,1271],{},"Use ",[591,1264,737],{},[591,1266,1267],{},"ui.root"," to style the root. Use the other ",[591,1270,907],{}," keys for inner parts. Set sizes, borders, and colors in your own styles.",[634,1273,1275],{"id":1274},"keyboard","Keyboard",[763,1277,1278,1286],{},[766,1279,1280],{},[769,1281,1282,1284],{},[772,1283,1125],{},[772,1285,709],{},[785,1287,1288,1302,1315,1328,1338],{},[769,1289,1290,1299],{},[790,1291,1292,1295,1296],{},[591,1293,1294],{},"ArrowUp"," \u002F ",[591,1297,1298],{},"ArrowDown",[790,1300,1301],{},"Increment\u002Fdecrement the channel. In whole-color mode, increment\u002Fdecrement the RGB HEX integer.",[769,1303,1304,1312],{},[790,1305,1306,1295,1309],{},[591,1307,1308],{},"PageUp",[591,1310,1311],{},"PageDown",[790,1313,1314],{},"Adjust by ten steps.",[769,1316,1317,1325],{},[790,1318,1319,1295,1322],{},[591,1320,1321],{},"Home",[591,1323,1324],{},"End",[790,1326,1327],{},"Use channel minimum\u002Fmaximum; whole-color text retains normal caret behavior.",[769,1329,1330,1335],{},[790,1331,1332],{},[591,1333,1334],{},"Enter",[790,1336,1337],{},"Commit a valid draft without suppressing normal form submission.",[769,1339,1340,1345],{},[790,1341,1342],{},[591,1343,1344],{},"Escape",[790,1346,1347],{},"Restore a pending draft without committing it. With nothing to restore, allow the parent popup to handle Escape.",[577,1349,1351],{"id":1350},"parity-notes","Parity Notes",[639,1353,1354,1355,1357],{},"ColorField combines Reka's root and input parts in one component. Use ",[591,1356,733],{}," to style the input. The supplied Base UI reference has no color field component.",{"title":626,"searchDepth":1359,"depth":1360,"links":1361},1,2,[1362,1363,1364,1368,1369,1370,1378],{"id":579,"depth":1360,"text":580},{"id":609,"depth":1360,"text":29},{"id":631,"depth":1360,"text":632,"children":1365},[1366],{"id":636,"depth":1367,"text":637},3,{"id":657,"depth":1360,"text":658},{"id":708,"depth":1360,"text":709},{"id":756,"depth":1360,"text":757,"children":1371},[1372,1373,1374,1375,1376,1377],{"id":760,"depth":1367,"text":761},{"id":1024,"depth":1367,"text":1025},{"id":1097,"depth":1367,"text":1098},{"id":1115,"depth":1367,"text":1116},{"id":1166,"depth":1367,"text":1167},{"id":1274,"depth":1367,"text":1275},{"id":1350,"depth":1360,"text":1351},"md",{},{"icon":53,"badge":1382},{"label":69,"color":70},{"title":195,"description":200},"MtsNgF31IAo0dG2_tar1XsTQ7uBdsAogHUkQP23-9iY",[1386,1388],{"title":187,"path":188,"stem":189,"icon":53,"badge":1387,"children":-1},{"label":69,"color":70},{"title":203,"path":204,"stem":205,"icon":53,"badge":1389,"children":-1},{"label":69,"color":70},"\u003Cspan class=\"shj-syn-tag\"><Dialog\u003C\u002Fspan>\n  \u003Cspan class=\"shj-syn-attr\">:ui\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"{\n    overlay: 'fixed inset-0 bg-black\u002F50 backdrop-blur-sm',\n    content: 'bg-white rounded-xl shadow-xl w-full max-w-md',\n    header: 'flex items-center justify-between p-6 border-b',\n    body: 'p-6',\n    footer: 'flex justify-end gap-2 p-6 border-t',\n  }\"\u003C\u002Fspan>\n\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n","\u003Cspan class=\"shj-syn-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",1793603913404]