[{"data":1,"prerenderedAt":2391},["ShallowReactive",2],{"selaras-docs-navigation":3,"selaras-docs:\u002Fcomponents\u002Fforms\u002Fcolor-picker":682},[4,11,128,525,584,626],{"title":5,"path":6,"stem":7,"order":8,"icon":9,"collapse":10,"navBadges":9},"Selaras","\u002F","index",1,null,false,{"title":12,"order":13,"icon":9,"collapse":10,"navBadges":9,"path":14,"stem":15,"children":16,"page":10},"Overview",10,"\u002Foverview","overview",[17,70,107],{"title":18,"order":13,"icon":9,"collapse":10,"navBadges":9,"path":19,"stem":20,"children":21,"page":10},"Getting Started","\u002Foverview\u002Fgetting-started","overview\u002Fgetting-started",[22,26,31,36,41,46,51,56,61,66],{"title":23,"path":24,"stem":25,"order":13,"icon":9,"collapse":10,"navBadges":9},"Introduction","\u002Foverview\u002Fgetting-started\u002Fintroduction","overview\u002Fgetting-started\u002Fintroduction",{"title":27,"path":28,"stem":29,"order":30,"icon":9,"collapse":10,"navBadges":9},"Installation","\u002Foverview\u002Fgetting-started\u002Finstallation","overview\u002Fgetting-started\u002Finstallation",20,{"title":32,"path":33,"stem":34,"order":35,"icon":9,"collapse":10,"navBadges":9},"Component usage","\u002Foverview\u002Fgetting-started\u002Fcomponent-usage","overview\u002Fgetting-started\u002Fcomponent-usage",30,{"title":37,"path":38,"stem":39,"order":40,"icon":9,"collapse":10,"navBadges":9},"Nuxt configuration","\u002Foverview\u002Fgetting-started\u002Fnuxt-configuration","overview\u002Fgetting-started\u002Fnuxt-configuration",40,{"title":42,"path":43,"stem":44,"order":45,"icon":9,"collapse":10,"navBadges":9},"Icons","\u002Foverview\u002Fgetting-started\u002Ficons","overview\u002Fgetting-started\u002Ficons",50,{"title":47,"path":48,"stem":49,"order":50,"icon":9,"collapse":10,"navBadges":9},"Messages and localization","\u002Foverview\u002Fgetting-started\u002Fmessages","overview\u002Fgetting-started\u002Fmessages",60,{"title":52,"path":53,"stem":54,"order":55,"icon":9,"collapse":10,"navBadges":9},"Adaptive interfaces","\u002Foverview\u002Fgetting-started\u002Fadaptive-interfaces","overview\u002Fgetting-started\u002Fadaptive-interfaces",70,{"title":57,"path":58,"stem":59,"order":60,"icon":9,"collapse":10,"navBadges":9},"TypeScript","\u002Foverview\u002Fgetting-started\u002Ftypescript","overview\u002Fgetting-started\u002Ftypescript",80,{"title":62,"path":63,"stem":64,"order":65,"icon":9,"collapse":10,"navBadges":9},"Accessibility","\u002Foverview\u002Fgetting-started\u002Faccessibility","overview\u002Fgetting-started\u002Faccessibility",90,{"title":67,"path":68,"stem":69,"order":65,"icon":9,"collapse":10,"navBadges":9},"Migrating to 1.0","\u002Foverview\u002Fgetting-started\u002Fmigrating-to-1","overview\u002Fgetting-started\u002Fmigrating-to-1",{"title":71,"order":30,"icon":9,"collapse":10,"navBadges":9,"path":72,"stem":73,"children":74,"page":10},"Theming","\u002Foverview\u002Ftheming","overview\u002Ftheming",[75,78,82,86,90,94,99,103],{"title":71,"path":76,"stem":77,"order":13,"icon":9,"collapse":10,"navBadges":9},"\u002Foverview\u002Ftheming\u002Foverview","overview\u002Ftheming\u002Foverview",{"title":79,"path":80,"stem":81,"order":30,"icon":9,"collapse":10,"navBadges":9},"CSS tokens","\u002Foverview\u002Ftheming\u002Fcss-tokens","overview\u002Ftheming\u002Fcss-tokens",{"title":83,"path":84,"stem":85,"order":35,"icon":9,"collapse":10,"navBadges":9},"Color roles","\u002Foverview\u002Ftheming\u002Fcolor-roles","overview\u002Ftheming\u002Fcolor-roles",{"title":87,"path":88,"stem":89,"order":40,"icon":9,"collapse":10,"navBadges":9},"Color modes","\u002Foverview\u002Ftheming\u002Fcolor-modes","overview\u002Ftheming\u002Fcolor-modes",{"title":91,"path":92,"stem":93,"order":45,"icon":9,"collapse":10,"navBadges":9},"Component styling","\u002Foverview\u002Ftheming\u002Fcomponent-styling","overview\u002Ftheming\u002Fcomponent-styling",{"title":95,"path":96,"stem":97,"order":98,"icon":9,"collapse":10,"navBadges":9},"Global configuration","\u002Foverview\u002Ftheming\u002Fglobal-configuration","overview\u002Ftheming\u002Fglobal-configuration",55,{"title":100,"path":101,"stem":102,"order":50,"icon":9,"collapse":10,"navBadges":9},"Scoped themes","\u002Foverview\u002Ftheming\u002Fscoped-themes","overview\u002Ftheming\u002Fscoped-themes",{"title":104,"path":105,"stem":106,"order":55,"icon":9,"collapse":10,"navBadges":9},"Complete themes","\u002Foverview\u002Ftheming\u002Fcomplete-themes","overview\u002Ftheming\u002Fcomplete-themes",{"title":108,"order":35,"icon":9,"collapse":10,"navBadges":9,"path":109,"stem":110,"children":111,"page":10},"Agent Support","\u002Foverview\u002Fagent-support","overview\u002Fagent-support",[112,116,120,124],{"title":113,"path":114,"stem":115,"order":13,"icon":9,"collapse":10,"navBadges":9},"Agent support","\u002Foverview\u002Fagent-support\u002Foverview","overview\u002Fagent-support\u002Foverview",{"title":117,"path":118,"stem":119,"order":30,"icon":9,"collapse":10,"navBadges":9},"Documentation exports","\u002Foverview\u002Fagent-support\u002Fdocumentation","overview\u002Fagent-support\u002Fdocumentation",{"title":121,"path":122,"stem":123,"order":35,"icon":9,"collapse":10,"navBadges":9},"Skills","\u002Foverview\u002Fagent-support\u002Fskills","overview\u002Fagent-support\u002Fskills",{"title":125,"path":126,"stem":127,"order":40,"icon":9,"collapse":10,"navBadges":9},"MCP","\u002Foverview\u002Fagent-support\u002Fmcp","overview\u002Fagent-support\u002Fmcp",{"title":129,"order":30,"icon":9,"collapse":10,"navBadges":9,"path":130,"stem":131,"children":132,"page":10},"Components","\u002Fcomponents","components",[133,210,313,336,380,433,486],{"title":134,"path":135,"stem":136,"children":137,"page":10},"Elements","\u002Fcomponents\u002Felements","components\u002Felements",[138,142,147,152,157,162,166,171,176,181,186,191,196,201,205],{"title":139,"path":140,"stem":141,"order":13,"icon":9,"collapse":10,"navBadges":9},"Button","\u002Fcomponents\u002Felements\u002Fbutton","components\u002Felements\u002Fbutton",{"title":143,"path":144,"stem":145,"order":146,"icon":9,"collapse":10,"navBadges":9},"ButtonGroup","\u002Fcomponents\u002Felements\u002Fbutton-group","components\u002Felements\u002Fbutton-group",10.5,{"title":148,"path":149,"stem":150,"order":151,"icon":9,"collapse":10,"navBadges":9},"Badge","\u002Fcomponents\u002Felements\u002Fbadge","components\u002Felements\u002Fbadge",11,{"title":153,"path":154,"stem":155,"order":156,"icon":9,"collapse":10,"navBadges":9},"Avatar","\u002Fcomponents\u002Felements\u002Favatar","components\u002Felements\u002Favatar",11.25,{"title":158,"path":159,"stem":160,"order":161,"icon":9,"collapse":10,"navBadges":9},"AvatarGroup","\u002Fcomponents\u002Felements\u002Favatar-group","components\u002Felements\u002Favatar-group",11.5,{"title":163,"path":164,"stem":165,"order":161,"icon":9,"collapse":10,"navBadges":9},"Chip","\u002Fcomponents\u002Felements\u002Fchip","components\u002Felements\u002Fchip",{"title":167,"path":168,"stem":169,"order":170,"icon":9,"collapse":10,"navBadges":9},"Icon","\u002Fcomponents\u002Felements\u002Ficon","components\u002Felements\u002Ficon",12,{"title":172,"path":173,"stem":174,"order":175,"icon":9,"collapse":10,"navBadges":9},"Skeleton","\u002Fcomponents\u002Felements\u002Fskeleton","components\u002Felements\u002Fskeleton",12.5,{"title":177,"path":178,"stem":179,"order":180,"icon":9,"collapse":10,"navBadges":9},"Separator","\u002Fcomponents\u002Felements\u002Fseparator","components\u002Felements\u002Fseparator",12.75,{"title":182,"path":183,"stem":184,"order":185,"icon":9,"collapse":10,"navBadges":9},"Alert","\u002Fcomponents\u002Felements\u002Falert","components\u002Felements\u002Falert",12.9,{"title":187,"path":188,"stem":189,"order":190,"icon":9,"collapse":10,"navBadges":9},"Toggle","\u002Fcomponents\u002Felements\u002Ftoggle","components\u002Felements\u002Ftoggle",12.92,{"title":192,"path":193,"stem":194,"order":195,"icon":9,"collapse":10,"navBadges":9},"Toggle Group","\u002Fcomponents\u002Felements\u002Ftoggle-group","components\u002Felements\u002Ftoggle-group",12.94,{"title":197,"path":198,"stem":199,"order":200,"icon":9,"collapse":10,"navBadges":9},"Kbd","\u002Fcomponents\u002Felements\u002Fkbd","components\u002Felements\u002Fkbd",12.95,{"title":202,"path":203,"stem":204,"order":200,"icon":9,"collapse":10,"navBadges":9},"Toolbar","\u002Fcomponents\u002Felements\u002Ftoolbar","components\u002Felements\u002Ftoolbar",{"title":206,"path":207,"stem":208,"order":209,"icon":9,"collapse":10,"navBadges":9},"Progress","\u002Fcomponents\u002Felements\u002Fprogress","components\u002Felements\u002Fprogress",12.97,{"title":211,"path":212,"stem":213,"children":214,"page":10},"Forms","\u002Fcomponents\u002Fforms","components\u002Fforms",[215,219,224,229,233,238,243,248,253,258,263,268,273,278,283,288,293,298,303,308],{"title":216,"path":217,"stem":218,"order":30,"icon":9,"collapse":10,"navBadges":9},"Input","\u002Fcomponents\u002Fforms\u002Finput","components\u002Fforms\u002Finput",{"title":220,"path":221,"stem":222,"order":223,"icon":9,"collapse":10,"navBadges":9},"InputGroup","\u002Fcomponents\u002Fforms\u002Finput-group","components\u002Fforms\u002Finput-group",20.25,{"title":225,"path":226,"stem":227,"order":228,"icon":9,"collapse":10,"navBadges":9},"Editable","\u002Fcomponents\u002Fforms\u002Feditable","components\u002Fforms\u002Feditable",20.5,{"title":230,"path":231,"stem":232,"order":228,"icon":9,"collapse":10,"navBadges":9},"InputNumber","\u002Fcomponents\u002Fforms\u002Finput-number","components\u002Fforms\u002Finput-number",{"title":234,"path":235,"stem":236,"order":237,"icon":9,"collapse":10,"navBadges":9},"Slider","\u002Fcomponents\u002Fforms\u002Fslider","components\u002Fforms\u002Fslider",20.75,{"title":239,"path":240,"stem":241,"order":242,"icon":9,"collapse":10,"navBadges":9},"PinInput","\u002Fcomponents\u002Fforms\u002Fpin-input","components\u002Fforms\u002Fpin-input",20.9,{"title":244,"path":245,"stem":246,"order":247,"icon":9,"collapse":10,"navBadges":9},"Textarea","\u002Fcomponents\u002Fforms\u002Ftextarea","components\u002Fforms\u002Ftextarea",21,{"title":249,"path":250,"stem":251,"order":252,"icon":9,"collapse":10,"navBadges":9},"FileUpload","\u002Fcomponents\u002Fforms\u002Ffile-upload","components\u002Fforms\u002Ffile-upload",21.5,{"title":254,"path":255,"stem":256,"order":257,"icon":9,"collapse":10,"navBadges":9},"Select","\u002Fcomponents\u002Fforms\u002Fselect","components\u002Fforms\u002Fselect",22,{"title":259,"path":260,"stem":261,"order":262,"icon":9,"collapse":10,"navBadges":9},"Listbox","\u002Fcomponents\u002Fforms\u002Flistbox","components\u002Fforms\u002Flistbox",22.5,{"title":264,"path":265,"stem":266,"order":267,"icon":9,"collapse":10,"navBadges":9},"TransferList","\u002Fcomponents\u002Fforms\u002Ftransfer-list","components\u002Fforms\u002Ftransfer-list",22.75,{"title":269,"path":270,"stem":271,"order":272,"icon":9,"collapse":10,"navBadges":9},"Autocomplete","\u002Fcomponents\u002Fforms\u002Fautocomplete","components\u002Fforms\u002Fautocomplete",23,{"title":274,"path":275,"stem":276,"order":277,"icon":9,"collapse":10,"navBadges":9},"DatePicker","\u002Fcomponents\u002Fforms\u002Fdate-picker","components\u002Fforms\u002Fdate-picker",23.5,{"title":279,"path":280,"stem":281,"order":282,"icon":9,"collapse":10,"navBadges":9},"ColorPicker","\u002Fcomponents\u002Fforms\u002Fcolor-picker","components\u002Fforms\u002Fcolor-picker",23.75,{"title":284,"path":285,"stem":286,"order":287,"icon":9,"collapse":10,"navBadges":9},"Checkbox","\u002Fcomponents\u002Fforms\u002Fcheckbox","components\u002Fforms\u002Fcheckbox",24,{"title":289,"path":290,"stem":291,"order":292,"icon":9,"collapse":10,"navBadges":9},"RadioGroup","\u002Fcomponents\u002Fforms\u002Fradio-group","components\u002Fforms\u002Fradio-group",25,{"title":294,"path":295,"stem":296,"order":297,"icon":9,"collapse":10,"navBadges":9},"Rating","\u002Fcomponents\u002Fforms\u002Frating","components\u002Fforms\u002Frating",25.5,{"title":299,"path":300,"stem":301,"order":302,"icon":9,"collapse":10,"navBadges":9},"Switch","\u002Fcomponents\u002Fforms\u002Fswitch","components\u002Fforms\u002Fswitch",26,{"title":304,"path":305,"stem":306,"order":307,"icon":9,"collapse":10,"navBadges":9},"FormField","\u002Fcomponents\u002Fforms\u002Fform-field","components\u002Fforms\u002Fform-field",27,{"title":309,"path":310,"stem":311,"order":312,"icon":9,"collapse":10,"navBadges":9},"Form Validation","\u002Fcomponents\u002Fforms\u002Fvalidation","components\u002Fforms\u002Fvalidation",28,{"title":314,"path":315,"stem":316,"children":317,"page":10},"Data","\u002Fcomponents\u002Fdata","components\u002Fdata",[318,322,327,331],{"title":319,"path":320,"stem":321,"order":312,"icon":9,"collapse":10,"navBadges":9},"EmptyState","\u002Fcomponents\u002Fdata\u002Fempty-state","components\u002Fdata\u002Fempty-state",{"title":323,"path":324,"stem":325,"order":326,"icon":9,"collapse":10,"navBadges":9},"Calendar","\u002Fcomponents\u002Fdata\u002Fcalendar","components\u002Fdata\u002Fcalendar",29,{"title":328,"path":329,"stem":330,"order":35,"icon":9,"collapse":10,"navBadges":9},"Table","\u002Fcomponents\u002Fdata\u002Ftable","components\u002Fdata\u002Ftable",{"title":332,"path":333,"stem":334,"order":335,"icon":9,"collapse":10,"navBadges":9},"Timeline","\u002Fcomponents\u002Fdata\u002Ftimeline","components\u002Fdata\u002Ftimeline",31,{"title":337,"path":338,"stem":339,"children":340,"page":10},"Navigation","\u002Fcomponents\u002Fnavigation","components\u002Fnavigation",[341,346,350,355,360,365,370,375],{"title":342,"path":343,"stem":344,"order":345,"icon":9,"collapse":10,"navBadges":9},"Breadcrumb","\u002Fcomponents\u002Fnavigation\u002Fbreadcrumb","components\u002Fnavigation\u002Fbreadcrumb",39,{"title":347,"path":348,"stem":349,"order":40,"icon":9,"collapse":10,"navBadges":9},"Tabs","\u002Fcomponents\u002Fnavigation\u002Ftabs","components\u002Fnavigation\u002Ftabs",{"title":351,"path":352,"stem":353,"order":354,"icon":9,"collapse":10,"navBadges":9},"Stepper","\u002Fcomponents\u002Fnavigation\u002Fstepper","components\u002Fnavigation\u002Fstepper",40.5,{"title":356,"path":357,"stem":358,"order":359,"icon":9,"collapse":10,"navBadges":9},"Accordion","\u002Fcomponents\u002Fnavigation\u002Faccordion","components\u002Fnavigation\u002Faccordion",41,{"title":361,"path":362,"stem":363,"order":364,"icon":9,"collapse":10,"navBadges":9},"Collapsible","\u002Fcomponents\u002Fnavigation\u002Fcollapsible","components\u002Fnavigation\u002Fcollapsible",41.5,{"title":366,"path":367,"stem":368,"order":369,"icon":9,"collapse":10,"navBadges":9},"Tree","\u002Fcomponents\u002Fnavigation\u002Ftree","components\u002Fnavigation\u002Ftree",41.75,{"title":371,"path":372,"stem":373,"order":374,"icon":9,"collapse":10,"navBadges":9},"Pagination","\u002Fcomponents\u002Fnavigation\u002Fpagination","components\u002Fnavigation\u002Fpagination",44,{"title":376,"path":377,"stem":378,"order":379,"icon":9,"collapse":10,"navBadges":9},"NavigationMenu","\u002Fcomponents\u002Fnavigation\u002Fnavigation-menu","components\u002Fnavigation\u002Fnavigation-menu",45,{"title":381,"path":382,"stem":383,"children":384,"page":10},"Overlays","\u002Fcomponents\u002Foverlays","components\u002Foverlays",[385,389,394,399,404,409,414,419,424,428],{"title":386,"path":387,"stem":388,"order":45,"icon":9,"collapse":10,"navBadges":9},"Modal","\u002Fcomponents\u002Foverlays\u002Fmodal","components\u002Foverlays\u002Fmodal",{"title":390,"path":391,"stem":392,"order":393,"icon":9,"collapse":10,"navBadges":9},"AlertDialog","\u002Fcomponents\u002Foverlays\u002Falert-dialog","components\u002Foverlays\u002Falert-dialog",50.5,{"title":395,"path":396,"stem":397,"order":398,"icon":9,"collapse":10,"navBadges":9},"Dropdown","\u002Fcomponents\u002Foverlays\u002Fdropdown","components\u002Foverlays\u002Fdropdown",51,{"title":400,"path":401,"stem":402,"order":403,"icon":9,"collapse":10,"navBadges":9},"Context Menu","\u002Fcomponents\u002Foverlays\u002Fcontext-menu","components\u002Foverlays\u002Fcontext-menu",51.5,{"title":405,"path":406,"stem":407,"order":408,"icon":9,"collapse":10,"navBadges":9},"Tooltip","\u002Fcomponents\u002Foverlays\u002Ftooltip","components\u002Foverlays\u002Ftooltip",52,{"title":410,"path":411,"stem":412,"order":413,"icon":9,"collapse":10,"navBadges":9},"Toast","\u002Fcomponents\u002Foverlays\u002Ftoast","components\u002Foverlays\u002Ftoast",53,{"title":415,"path":416,"stem":417,"order":418,"icon":9,"collapse":10,"navBadges":9},"Slideover","\u002Fcomponents\u002Foverlays\u002Fslideover","components\u002Foverlays\u002Fslideover",54,{"title":420,"path":421,"stem":422,"order":423,"icon":9,"collapse":10,"navBadges":9},"Command Palette","\u002Fcomponents\u002Foverlays\u002Fcommand-palette","components\u002Foverlays\u002Fcommand-palette",54.5,{"title":425,"path":426,"stem":427,"order":98,"icon":9,"collapse":10,"navBadges":9},"Popover","\u002Fcomponents\u002Foverlays\u002Fpopover","components\u002Foverlays\u002Fpopover",{"title":429,"path":430,"stem":431,"order":432,"icon":9,"collapse":10,"navBadges":9},"Drawer","\u002Fcomponents\u002Foverlays\u002Fdrawer","components\u002Foverlays\u002Fdrawer",56,{"title":434,"path":435,"stem":436,"children":437,"page":10},"Layout","\u002Fcomponents\u002Flayout","components\u002Flayout",[438,443,447,452,457,462,466,471,476,481],{"title":439,"path":440,"stem":441,"order":442,"icon":9,"collapse":10,"navBadges":9},"App","\u002Fcomponents\u002Flayout\u002Fapp","components\u002Flayout\u002Fapp",59,{"title":444,"path":445,"stem":446,"order":50,"icon":9,"collapse":10,"navBadges":9},"Container","\u002Fcomponents\u002Flayout\u002Fcontainer","components\u002Flayout\u002Fcontainer",{"title":448,"path":449,"stem":450,"order":451,"icon":9,"collapse":10,"navBadges":9},"Header","\u002Fcomponents\u002Flayout\u002Fheader","components\u002Flayout\u002Fheader",63,{"title":453,"path":454,"stem":455,"order":456,"icon":9,"collapse":10,"navBadges":9},"ColorModeToggle","\u002Fcomponents\u002Flayout\u002Fcolor-mode-toggle","components\u002Flayout\u002Fcolor-mode-toggle",64,{"title":458,"path":459,"stem":460,"order":461,"icon":9,"collapse":10,"navBadges":9},"ColorModeSwitch","\u002Fcomponents\u002Flayout\u002Fcolor-mode-switch","components\u002Flayout\u002Fcolor-mode-switch",65,{"title":463,"path":464,"stem":465,"order":461,"icon":9,"collapse":10,"navBadges":9},"ScrollArea","\u002Fcomponents\u002Flayout\u002Fscroll-area","components\u002Flayout\u002Fscroll-area",{"title":467,"path":468,"stem":469,"order":470,"icon":9,"collapse":10,"navBadges":9},"Card","\u002Fcomponents\u002Flayout\u002Fcard","components\u002Flayout\u002Fcard",66,{"title":472,"path":473,"stem":474,"order":475,"icon":9,"collapse":10,"navBadges":9},"CardGroup","\u002Fcomponents\u002Flayout\u002Fcard-group","components\u002Flayout\u002Fcard-group",67,{"title":477,"path":478,"stem":479,"order":480,"icon":9,"collapse":10,"navBadges":9},"Splitter","\u002Fcomponents\u002Flayout\u002Fsplitter","components\u002Flayout\u002Fsplitter",68,{"title":482,"path":483,"stem":484,"order":485,"icon":9,"collapse":10,"navBadges":9},"Theme","\u002Fcomponents\u002Flayout\u002Ftheme","components\u002Flayout\u002Ftheme",69,{"title":487,"path":488,"stem":489,"children":490,"page":10},"Typography","\u002Fcomponents\u002Ftypography","components\u002Ftypography",[491,495,500,505,510,515,520],{"title":492,"path":493,"stem":494,"order":55,"icon":9,"collapse":10,"navBadges":9},"Prose","\u002Fcomponents\u002Ftypography\u002Fprose","components\u002Ftypography\u002Fprose",{"title":496,"path":497,"stem":498,"order":499,"icon":9,"collapse":10,"navBadges":9},"CodeGroup","\u002Fcomponents\u002Ftypography\u002Fcode-group","components\u002Ftypography\u002Fcode-group",71,{"title":501,"path":502,"stem":503,"order":504,"icon":9,"collapse":10,"navBadges":9},"Callout","\u002Fcomponents\u002Ftypography\u002Fcallout","components\u002Ftypography\u002Fcallout",72,{"title":506,"path":507,"stem":508,"order":509,"icon":9,"collapse":10,"navBadges":9},"CodeButton","\u002Fcomponents\u002Ftypography\u002Fcode-button","components\u002Ftypography\u002Fcode-button",73,{"title":511,"path":512,"stem":513,"order":514,"icon":9,"collapse":10,"navBadges":9},"ReadMore","\u002Fcomponents\u002Ftypography\u002Fread-more","components\u002Ftypography\u002Fread-more",74,{"title":516,"path":517,"stem":518,"order":519,"icon":9,"collapse":10,"navBadges":9},"FileTree","\u002Fcomponents\u002Ftypography\u002Ffile-tree","components\u002Ftypography\u002Ffile-tree",75,{"title":521,"path":522,"stem":523,"order":524,"icon":9,"collapse":10,"navBadges":9},"CodeTree","\u002Fcomponents\u002Ftypography\u002Fcode-tree","components\u002Ftypography\u002Fcode-tree",76,{"title":526,"order":35,"icon":9,"collapse":10,"navBadges":9,"path":527,"stem":528,"children":529,"page":10},"Composites","\u002Fcomposites","composites",[530,559],{"title":531,"path":532,"stem":533,"children":534,"page":10},"Dashboard","\u002Fcomposites\u002Fdashboard","composites\u002Fdashboard",[535,539,543,547,551,555],{"title":536,"path":537,"stem":538,"order":13,"icon":9,"collapse":10,"navBadges":9},"DashboardGroup","\u002Fcomposites\u002Fdashboard\u002Fdashboard-group","composites\u002Fdashboard\u002Fdashboard-group",{"title":540,"path":541,"stem":542,"order":30,"icon":9,"collapse":10,"navBadges":9},"DashboardSidebar","\u002Fcomposites\u002Fdashboard\u002Fdashboard-sidebar","composites\u002Fdashboard\u002Fdashboard-sidebar",{"title":544,"path":545,"stem":546,"order":35,"icon":9,"collapse":10,"navBadges":9},"DashboardPanel","\u002Fcomposites\u002Fdashboard\u002Fdashboard-panel","composites\u002Fdashboard\u002Fdashboard-panel",{"title":548,"path":549,"stem":550,"order":40,"icon":9,"collapse":10,"navBadges":9},"DashboardResizeHandle","\u002Fcomposites\u002Fdashboard\u002Fdashboard-resize-handle","composites\u002Fdashboard\u002Fdashboard-resize-handle",{"title":552,"path":553,"stem":554,"order":45,"icon":9,"collapse":10,"navBadges":9},"DashboardNavbar","\u002Fcomposites\u002Fdashboard\u002Fdashboard-navbar","composites\u002Fdashboard\u002Fdashboard-navbar",{"title":556,"path":557,"stem":558,"order":50,"icon":9,"collapse":10,"navBadges":9},"DashboardSidebarToggle","\u002Fcomposites\u002Fdashboard\u002Fdashboard-sidebar-toggle","composites\u002Fdashboard\u002Fdashboard-sidebar-toggle",{"title":560,"path":561,"stem":562,"children":563,"page":10},"Documentation","\u002Fcomposites\u002Fdocumentation","composites\u002Fdocumentation",[564,568,572,576,580],{"title":565,"path":566,"stem":567,"order":13,"icon":9,"collapse":10,"navBadges":9},"PageHeader","\u002Fcomposites\u002Fdocumentation\u002Fpage-header","composites\u002Fdocumentation\u002Fpage-header",{"title":569,"path":570,"stem":571,"order":30,"icon":9,"collapse":10,"navBadges":9},"PageAside","\u002Fcomposites\u002Fdocumentation\u002Fpage-aside","composites\u002Fdocumentation\u002Fpage-aside",{"title":573,"path":574,"stem":575,"order":35,"icon":9,"collapse":10,"navBadges":9},"ContentNavigation","\u002Fcomposites\u002Fdocumentation\u002Fcontent-navigation","composites\u002Fdocumentation\u002Fcontent-navigation",{"title":577,"path":578,"stem":579,"order":40,"icon":9,"collapse":10,"navBadges":9},"ContentToc","\u002Fcomposites\u002Fdocumentation\u002Fcontent-toc","composites\u002Fdocumentation\u002Fcontent-toc",{"title":581,"path":582,"stem":583,"order":45,"icon":9,"collapse":10,"navBadges":9},"ContentSurround","\u002Fcomposites\u002Fdocumentation\u002Fcontent-surround","composites\u002Fdocumentation\u002Fcontent-surround",{"title":585,"order":586,"icon":9,"collapse":10,"navBadges":9,"path":587,"stem":588,"children":589,"page":10},"Blocks",35,"\u002Fblocks","blocks",[590,593,597,601,605,609],{"title":585,"path":591,"stem":592,"order":13,"icon":9,"collapse":10,"navBadges":9},"\u002Fblocks\u002Foverview","blocks\u002Foverview",{"title":594,"path":595,"stem":596,"order":30,"icon":9,"collapse":10,"navBadges":9},"Sign in","\u002Fblocks\u002Fsign-in","blocks\u002Fsign-in",{"title":598,"path":599,"stem":600,"order":35,"icon":9,"collapse":10,"navBadges":9},"Dashboard overview","\u002Fblocks\u002Fdashboard-overview","blocks\u002Fdashboard-overview",{"title":602,"path":603,"stem":604,"order":40,"icon":9,"collapse":10,"navBadges":9},"Profile settings","\u002Fblocks\u002Fprofile-settings","blocks\u002Fprofile-settings",{"title":606,"path":607,"stem":608,"order":45,"icon":9,"collapse":10,"navBadges":9},"Data management","\u002Fblocks\u002Fdata-management","blocks\u002Fdata-management",{"title":610,"order":50,"icon":9,"collapse":10,"navBadges":9,"path":611,"stem":612,"children":613,"page":10},"Editors","\u002Fblocks\u002Feditors","blocks\u002Feditors",[614,618,622],{"title":615,"path":616,"stem":617,"order":13,"icon":9,"collapse":10,"navBadges":9},"Tiptap editor","\u002Fblocks\u002Feditors\u002Ftiptap","blocks\u002Feditors\u002Ftiptap",{"title":619,"path":620,"stem":621,"order":30,"icon":9,"collapse":10,"navBadges":9},"Lexical editor","\u002Fblocks\u002Feditors\u002Flexical","blocks\u002Feditors\u002Flexical",{"title":623,"path":624,"stem":625,"order":35,"icon":9,"collapse":10,"navBadges":9},"Quill editor","\u002Fblocks\u002Feditors\u002Fquill","blocks\u002Feditors\u002Fquill",{"title":627,"order":40,"icon":9,"collapse":10,"navBadges":9,"path":628,"stem":629,"children":630,"page":10},"Utilities","\u002Futilities","utilities",[631,665],{"title":632,"path":633,"stem":634,"children":635,"page":10},"Composables","\u002Futilities\u002Fcomposables","utilities\u002Fcomposables",[636,640,644,649,653,657,661],{"title":637,"path":638,"stem":639,"order":13,"icon":9,"collapse":10,"navBadges":9},"useModal","\u002Futilities\u002Fcomposables\u002Fuse-modal","utilities\u002Fcomposables\u002Fuse-modal",{"title":641,"path":642,"stem":643,"order":170,"icon":9,"collapse":10,"navBadges":9},"useConfirm","\u002Futilities\u002Fcomposables\u002Fuse-confirm","utilities\u002Fcomposables\u002Fuse-confirm",{"title":645,"path":646,"stem":647,"order":648,"icon":9,"collapse":10,"navBadges":9},"useDrawer","\u002Futilities\u002Fcomposables\u002Fuse-drawer","utilities\u002Fcomposables\u002Fuse-drawer",15,{"title":650,"path":651,"stem":652,"order":30,"icon":9,"collapse":10,"navBadges":9},"useSlideover","\u002Futilities\u002Fcomposables\u002Fuse-slideover","utilities\u002Fcomposables\u002Fuse-slideover",{"title":654,"path":655,"stem":656,"order":35,"icon":9,"collapse":10,"navBadges":9},"useIcons","\u002Futilities\u002Fcomposables\u002Fuse-icons","utilities\u002Fcomposables\u002Fuse-icons",{"title":658,"path":659,"stem":660,"order":40,"icon":9,"collapse":10,"navBadges":9},"useMessages","\u002Futilities\u002Fcomposables\u002Fuse-messages","utilities\u002Fcomposables\u002Fuse-messages",{"title":662,"path":663,"stem":664,"order":45,"icon":9,"collapse":10,"navBadges":9},"useLocale","\u002Futilities\u002Fcomposables\u002Fuse-locale","utilities\u002Fcomposables\u002Fuse-locale",{"title":666,"path":667,"stem":668,"children":669,"page":10},"Directives","\u002Futilities\u002Fdirectives","utilities\u002Fdirectives",[670,674,678],{"title":671,"path":672,"stem":673,"order":13,"icon":9,"collapse":10,"navBadges":9},"v-ripple","\u002Futilities\u002Fdirectives\u002Fripple","utilities\u002Fdirectives\u002Fripple",{"title":675,"path":676,"stem":677,"order":648,"icon":9,"collapse":10,"navBadges":9},"v-hotkey","\u002Futilities\u002Fdirectives\u002Fhotkey","utilities\u002Fdirectives\u002Fhotkey",{"title":679,"path":680,"stem":681,"order":30,"icon":9,"collapse":10,"navBadges":9},"v-mask","\u002Futilities\u002Fdirectives\u002Fmask","utilities\u002Fdirectives\u002Fmask",{"byLocale":683,"defaultPath":280},{"en":684,"id":1615},{"id":685,"title":279,"aside":686,"body":687,"collapse":10,"description":1611,"editLink":686,"extension":1028,"icon":9,"issueLink":686,"meta":1612,"navBadges":9,"navigation":9,"order":282,"path":280,"prevNext":686,"seo":1613,"stem":281,"toc":686,"__hash__":1614},"docs\u002Fcomponents\u002Fforms\u002Fcolor-picker.md",true,{"type":688,"value":689,"toc":1597},"minimark",[690,695,711,715,839,844,857,860,898,902,907,910,973,976,982,985,1015,1019,1039,1042,1123,1127,1140,1143,1147,1152,1232,1258,1265,1271,1275,1279,1544,1548,1593],[691,692,694],"h2",{"id":693},"usage","Usage",[696,697,698,702,703,706,707,710],"p",{},[699,700,701],"code",{},"v-model"," is a hex color string (",[699,704,705],{},"#rrggbb",", or ",[699,708,709],{},"#rrggbbaa"," once alpha\ndrops below 1) - the trigger shows a live swatch preview plus the hex\nvalue, and opens a popover with a saturation\u002Fbrightness area, a hue\nslider, an alpha slider, and a hex text field:",[712,713],"component-example",{"name":714},"color-picker-basic",[716,717,722],"pre",{"className":718,"code":719,"language":720,"meta":721,"style":721},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\nconst color = ref('#7c3aed')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CSColorPicker v-model=\"color\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[699,723,724,753,779,789,795,805,830],{"__ignoreMap":721},[725,726,728,732,736,740,743,746,750],"span",{"class":727,"line":8},"line",[725,729,731],{"class":730},"sVt8B","\u003C",[725,733,735],{"class":734},"s9eBZ","script",[725,737,739],{"class":738},"sScJk"," setup",[725,741,742],{"class":738}," lang",[725,744,745],{"class":730},"=",[725,747,749],{"class":748},"sZZnC","\"ts\"",[725,751,752],{"class":730},">\n",[725,754,756,760,764,767,770,773,776],{"class":727,"line":755},2,[725,757,759],{"class":758},"szBVR","const",[725,761,763],{"class":762},"sj4cs"," color",[725,765,766],{"class":758}," =",[725,768,769],{"class":738}," ref",[725,771,772],{"class":730},"(",[725,774,775],{"class":748},"'#7c3aed'",[725,777,778],{"class":730},")\n",[725,780,782,785,787],{"class":727,"line":781},3,[725,783,784],{"class":730},"\u003C\u002F",[725,786,735],{"class":734},[725,788,752],{"class":730},[725,790,792],{"class":727,"line":791},4,[725,793,794],{"emptyLinePlaceholder":686},"\n",[725,796,798,800,803],{"class":727,"line":797},5,[725,799,731],{"class":730},[725,801,802],{"class":734},"template",[725,804,752],{"class":730},[725,806,808,811,814,817,819,822,825,827],{"class":727,"line":807},6,[725,809,810],{"class":730},"  \u003C",[725,812,813],{"class":734},"SColorPicker",[725,815,816],{"class":738}," v-model",[725,818,745],{"class":730},[725,820,821],{"class":748},"\"",[725,823,824],{"class":730},"color",[725,826,821],{"class":748},[725,828,829],{"class":730}," \u002F>\n",[725,831,833,835,837],{"class":727,"line":832},7,[725,834,784],{"class":730},[725,836,802],{"class":734},[725,838,752],{"class":730},[840,841,843],"h3",{"id":842},"alpha","Alpha",[696,845,846,848,849,852,853,856],{},[699,847,842],{}," (default ",[699,850,851],{},"true",") shows the opacity slider. Set it to ",[699,854,855],{},"false","\nfor a consumer that only ever wants an opaque color:",[712,858],{"name":859},"color-picker-no-alpha",[716,861,865],{"className":862,"code":863,"language":864,"meta":721,"style":721},"language-vue-html shiki shiki-themes github-light github-dark","\u003CSColorPicker v-model=\"color\" :alpha=\"false\" \u002F>\n","vue-html",[699,866,867],{"__ignoreMap":721},[725,868,869,871,873,875,877,879,881,883,886,888,890,892,894,896],{"class":727,"line":8},[725,870,731],{"class":730},[725,872,813],{"class":734},[725,874,816],{"class":738},[725,876,745],{"class":730},[725,878,821],{"class":748},[725,880,824],{"class":730},[725,882,821],{"class":748},[725,884,885],{"class":730}," :",[725,887,842],{"class":738},[725,889,745],{"class":730},[725,891,821],{"class":748},[725,893,855],{"class":762},[725,895,821],{"class":748},[725,897,829],{"class":730},[840,899,901],{"id":900},"swatches","Swatches",[696,903,904,906],{},[699,905,900],{}," renders a row of preset colors below the hex field - omitted\nentirely unless given. Clicking one sets that exact color (including its\nown alpha, if it has one):",[712,908],{"name":909},"color-picker-swatches",[716,911,913],{"className":862,"code":912,"language":864,"meta":721,"style":721},"\u003CSColorPicker v-model=\"color\" :swatches=\"['#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6']\" \u002F>\n",[699,914,915],{"__ignoreMap":721},[725,916,917,919,921,923,925,927,929,931,933,935,937,939,942,945,948,951,953,956,958,961,963,966,969,971],{"class":727,"line":8},[725,918,731],{"class":730},[725,920,813],{"class":734},[725,922,816],{"class":738},[725,924,745],{"class":730},[725,926,821],{"class":748},[725,928,824],{"class":730},[725,930,821],{"class":748},[725,932,885],{"class":730},[725,934,900],{"class":738},[725,936,745],{"class":730},[725,938,821],{"class":748},[725,940,941],{"class":730},"[",[725,943,944],{"class":748},"'#ef4444'",[725,946,947],{"class":730},", ",[725,949,950],{"class":748},"'#f97316'",[725,952,947],{"class":730},[725,954,955],{"class":748},"'#eab308'",[725,957,947],{"class":730},[725,959,960],{"class":748},"'#22c55e'",[725,962,947],{"class":730},[725,964,965],{"class":748},"'#3b82f6'",[725,967,968],{"class":730},"]",[725,970,821],{"class":748},[725,972,829],{"class":730},[840,974,975],{"id":824},"Color",[696,977,978,979,981],{},"Controls the trigger's own focus-ring color, same scope as every other\nform control's ",[699,980,824],{}," prop - it has no effect on the color being\npicked:",[712,983],{"name":984},"color-picker-color",[716,986,988],{"className":862,"code":987,"language":864,"meta":721,"style":721},"\u003CSColorPicker v-model=\"color\" color=\"danger\" \u002F>\n",[699,989,990],{"__ignoreMap":721},[725,991,992,994,996,998,1000,1002,1004,1006,1008,1010,1013],{"class":727,"line":8},[725,993,731],{"class":730},[725,995,813],{"class":734},[725,997,816],{"class":738},[725,999,745],{"class":730},[725,1001,821],{"class":748},[725,1003,824],{"class":730},[725,1005,821],{"class":748},[725,1007,763],{"class":738},[725,1009,745],{"class":730},[725,1011,1012],{"class":748},"\"danger\"",[725,1014,829],{"class":730},[840,1016,1018],{"id":1017},"size","Size",[696,1020,1021,1022,1025,1026,1025,1029,1032,1033,1038],{},"The default trigger follows the same 32 \u002F 40 \u002F 44px height scale as Button and\nInput for ",[699,1023,1024],{},"sm"," \u002F ",[699,1027,1028],{},"md",[699,1030,1031],{},"lg"," at a 16px root font size. See\n",[1034,1035,1037],"a",{"href":1036},"\u002Foverview\u002Ftheming\u002Fcomponent-styling#control-sizes","Control sizes",".",[712,1040],{"name":1041},"color-picker-size",[716,1043,1045],{"className":862,"code":1044,"language":864,"meta":721,"style":721},"\u003CSColorPicker v-model=\"color\" size=\"sm\" \u002F>\n\u003CSColorPicker v-model=\"color\" size=\"md\" \u002F>\n\u003CSColorPicker v-model=\"color\" size=\"lg\" \u002F>\n",[699,1046,1047,1073,1098],{"__ignoreMap":721},[725,1048,1049,1051,1053,1055,1057,1059,1061,1063,1066,1068,1071],{"class":727,"line":8},[725,1050,731],{"class":730},[725,1052,813],{"class":734},[725,1054,816],{"class":738},[725,1056,745],{"class":730},[725,1058,821],{"class":748},[725,1060,824],{"class":730},[725,1062,821],{"class":748},[725,1064,1065],{"class":738}," size",[725,1067,745],{"class":730},[725,1069,1070],{"class":748},"\"sm\"",[725,1072,829],{"class":730},[725,1074,1075,1077,1079,1081,1083,1085,1087,1089,1091,1093,1096],{"class":727,"line":755},[725,1076,731],{"class":730},[725,1078,813],{"class":734},[725,1080,816],{"class":738},[725,1082,745],{"class":730},[725,1084,821],{"class":748},[725,1086,824],{"class":730},[725,1088,821],{"class":748},[725,1090,1065],{"class":738},[725,1092,745],{"class":730},[725,1094,1095],{"class":748},"\"md\"",[725,1097,829],{"class":730},[725,1099,1100,1102,1104,1106,1108,1110,1112,1114,1116,1118,1121],{"class":727,"line":781},[725,1101,731],{"class":730},[725,1103,813],{"class":734},[725,1105,816],{"class":738},[725,1107,745],{"class":730},[725,1109,821],{"class":748},[725,1111,824],{"class":730},[725,1113,821],{"class":748},[725,1115,1065],{"class":738},[725,1117,745],{"class":730},[725,1119,1120],{"class":748},"\"lg\"",[725,1122,829],{"class":730},[840,1124,1126],{"id":1125},"adaptive-presentation","Adaptive presentation",[696,1128,1129,1130,1133,1134,1136,1137,1139],{},"Below your configured adaptive breakpoint, ",[699,1131,1132],{},"adaptive"," presents the popover as\na centered ",[1034,1135,386],{"href":387}," instead of a small anchored\npanel. It is opt-in (defaults ",[699,1138,855],{},") and follows the shared adaptive\ncontract:",[712,1141],{"name":1142},"color-picker-adaptive",[840,1144,1146],{"id":1145},"arrow","Arrow",[696,1148,1149,1151],{},[699,1150,1145],{}," adds a pointer between the anchored picker and its trigger. It is off\nby default and has no effect on the adaptive modal.",[716,1153,1155],{"className":862,"code":1154,"language":864,"meta":721,"style":721},"\u003CSColorPicker v-model=\"color\" arrow \u002F>\n\u003CSColorPicker v-model=\"color\" :arrow=\"{ width: 16, height: 8, rounded: true, padding: 12 }\" \u002F>\n",[699,1156,1157,1178],{"__ignoreMap":721},[725,1158,1159,1161,1163,1165,1167,1169,1171,1173,1176],{"class":727,"line":8},[725,1160,731],{"class":730},[725,1162,813],{"class":734},[725,1164,816],{"class":738},[725,1166,745],{"class":730},[725,1168,821],{"class":748},[725,1170,824],{"class":730},[725,1172,821],{"class":748},[725,1174,1175],{"class":738}," arrow",[725,1177,829],{"class":730},[725,1179,1180,1182,1184,1186,1188,1190,1192,1194,1196,1198,1200,1202,1205,1208,1211,1214,1217,1219,1222,1225,1228,1230],{"class":727,"line":755},[725,1181,731],{"class":730},[725,1183,813],{"class":734},[725,1185,816],{"class":738},[725,1187,745],{"class":730},[725,1189,821],{"class":748},[725,1191,824],{"class":730},[725,1193,821],{"class":748},[725,1195,885],{"class":730},[725,1197,1145],{"class":738},[725,1199,745],{"class":730},[725,1201,821],{"class":748},[725,1203,1204],{"class":730},"{ width: ",[725,1206,1207],{"class":762},"16",[725,1209,1210],{"class":730},", height: ",[725,1212,1213],{"class":762},"8",[725,1215,1216],{"class":730},", rounded: ",[725,1218,851],{"class":762},[725,1220,1221],{"class":730},", padding: ",[725,1223,1224],{"class":762},"12",[725,1226,1227],{"class":730}," }",[725,1229,821],{"class":748},[725,1231,829],{"class":730},[696,1233,1234,1235,1238,1239,1242,1243,1245,1246,1249,1250,1253,1254,1257],{},"Use ",[699,1236,1237],{},"positioning"," to place the anchored picker and ",[699,1240,1241],{},"portal"," to render it\ninline (",[699,1244,855],{},") or teleport it to a CSS selector or ",[699,1247,1248],{},"HTMLElement",". The\ndefault portal target is the document body. These props apply to the anchored\npopover, which starts aligned with its trigger by default; the adaptive modal\nhas its own layout. Set ",[699,1251,1252],{},"positioning.align"," to override the alignment.\n",[699,1255,1256],{},"ui.content"," styles the panel.",[840,1259,1261,1262],{"id":1260},"custom-ui","Custom ",[699,1263,1264],{},":ui",[696,1266,1267,1268,1270],{},"To see exactly what you'd be overriding - the current default classes for\nevery slot and variant - here's ",[699,1269,279],{},"'s own theme file:",[1272,1273],"theme-source",{"name":1274},"color-picker",[691,1276,1278],{"id":1277},"props","Props",[1280,1281,1282,1298],"table",{},[1283,1284,1285],"thead",{},[1286,1287,1288,1292,1295],"tr",{},[1289,1290,1291],"th",{},"Prop",[1289,1293,1294],{},"Type",[1289,1296,1297],{},"Default",[1299,1300,1301,1317,1330,1343,1356,1370,1385,1400,1414,1427,1440,1454,1469,1483,1499,1514,1530],"tbody",{},[1286,1302,1303,1309,1314],{},[1304,1305,1306],"td",{},[699,1307,1308],{},"name",[1304,1310,1311],{},[699,1312,1313],{},"string",[1304,1315,1316],{},"-",[1286,1318,1319,1324,1328],{},[1304,1320,1321],{},[699,1322,1323],{},"form",[1304,1325,1326],{},[699,1327,1313],{},[1304,1329,1316],{},[1286,1331,1332,1337,1341],{},[1304,1333,1334],{},[699,1335,1336],{},"modelValue",[1304,1338,1339],{},[699,1340,1313],{},[1304,1342,1316],{},[1286,1344,1345,1350,1354],{},[1304,1346,1347],{},[699,1348,1349],{},"defaultValue",[1304,1351,1352],{},[699,1353,1313],{},[1304,1355,1316],{},[1286,1357,1358,1363,1368],{},[1304,1359,1360],{},[699,1361,1362],{},"open",[1304,1364,1365],{},[699,1366,1367],{},"boolean",[1304,1369,1316],{},[1286,1371,1372,1377,1381],{},[1304,1373,1374],{},[699,1375,1376],{},"defaultOpen",[1304,1378,1379],{},[699,1380,1367],{},[1304,1382,1383],{},[699,1384,855],{},[1286,1386,1387,1392,1396],{},[1304,1388,1389],{},[699,1390,1391],{},"disabled",[1304,1393,1394],{},[699,1395,1367],{},[1304,1397,1398],{},[699,1399,855],{},[1286,1401,1402,1406,1410],{},[1304,1403,1404],{},[699,1405,842],{},[1304,1407,1408],{},[699,1409,1367],{},[1304,1411,1412],{},[699,1413,851],{},[1286,1415,1416,1420,1425],{},[1304,1417,1418],{},[699,1419,900],{},[1304,1421,1422],{},[699,1423,1424],{},"string[]",[1304,1426,1316],{},[1286,1428,1429,1434,1438],{},[1304,1430,1431],{},[699,1432,1433],{},"placeholder",[1304,1435,1436],{},[699,1437,1313],{},[1304,1439,1316],{},[1286,1441,1442,1446,1450],{},[1304,1443,1444],{},[699,1445,1132],{},[1304,1447,1448],{},[699,1449,1367],{},[1304,1451,1452],{},[699,1453,855],{},[1286,1455,1456,1460,1465],{},[1304,1457,1458],{},[699,1459,1145],{},[1304,1461,1462],{},[699,1463,1464],{},"boolean | RoundedArrowConfig",[1304,1466,1467],{},[699,1468,855],{},[1286,1470,1471,1475,1480],{},[1304,1472,1473],{},[699,1474,1237],{},[1304,1476,1477],{},[699,1478,1479],{},"OverlayPositioning",[1304,1481,1482],{},"anchored picker defaults",[1286,1484,1485,1489,1494],{},[1304,1486,1487],{},[699,1488,1241],{},[1304,1490,1491],{},[699,1492,1493],{},"boolean | string | HTMLElement",[1304,1495,1496,1498],{},[699,1497,851],{}," (document body)",[1286,1500,1501,1505,1510],{},[1304,1502,1503],{},[699,1504,1017],{},[1304,1506,1507],{},[699,1508,1509],{},"'sm' | 'md' | 'lg'",[1304,1511,1512],{},[699,1513,1028],{},[1286,1515,1516,1520,1525],{},[1304,1517,1518],{},[699,1519,824],{},[1304,1521,1522],{},[1034,1523,1524],{"href":84},"ColorRole",[1304,1526,1527],{},[699,1528,1529],{},"primary",[1286,1531,1532,1537,1542],{},[1304,1533,1534],{},[699,1535,1536],{},"ui",[1304,1538,1539],{},[699,1540,1541],{},"Partial\u003CRecord\u003CColorPickerSlot, string | object>>",[1304,1543,1316],{},[691,1545,1547],{"id":1546},"events","Events",[1280,1549,1550,1563],{},[1283,1551,1552],{},[1286,1553,1554,1557,1560],{},[1289,1555,1556],{},"Event",[1289,1558,1559],{},"Payload",[1289,1561,1562],{},"Description",[1299,1564,1565,1579],{},[1286,1566,1567,1572,1576],{},[1304,1568,1569],{},[699,1570,1571],{},"update:open",[1304,1573,1574],{},[699,1575,1367],{},[1304,1577,1578],{},"Fires when the picker requests opening or closing",[1286,1580,1581,1586,1590],{},[1304,1582,1583],{},[699,1584,1585],{},"update:modelValue",[1304,1587,1588],{},[699,1589,1313],{},[1304,1591,1592],{},"Fires whenever the color changes - dragging the area\u002Fsliders, typing (and committing) the hex field, or picking a swatch",[1594,1595,1596],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":721,"searchDepth":781,"depth":781,"links":1598},[1599,1609,1610],{"id":693,"depth":755,"text":694,"children":1600},[1601,1602,1603,1604,1605,1606,1607],{"id":842,"depth":781,"text":843},{"id":900,"depth":781,"text":901},{"id":824,"depth":781,"text":975},{"id":1017,"depth":781,"text":1018},{"id":1125,"depth":781,"text":1126},{"id":1145,"depth":781,"text":1146},{"id":1260,"depth":781,"text":1608},"Custom :ui",{"id":1277,"depth":755,"text":1278},{"id":1546,"depth":755,"text":1547},"A trigger-and-popover control for picking a color, built on five independent Reka UI color primitives sharing one hex value.",{},{"title":279,"description":1611},"RJ2Hif9m3Hr59rCwk8I4xLc4psz4Kjysi1nqOl-dLDY",{"id":1616,"title":279,"aside":686,"body":1617,"collapse":10,"description":2385,"editLink":686,"extension":1028,"icon":9,"issueLink":686,"meta":2386,"navBadges":9,"navigation":9,"order":282,"path":2387,"prevNext":686,"seo":2388,"stem":2389,"toc":686,"__hash__":2390},"docs\u002Fid\u002Fcomponents\u002Fforms\u002Fcolor-picker.md",{"type":688,"value":1618,"toc":2372},[1619,1623,1634,1636,1718,1720,1730,1732,1766,1768,1773,1775,1829,1833,1839,1841,1869,1873,1886,1888,1964,1966,1978,1980,1982,1987,2057,2078,2082,2088,2090,2092,2327,2329,2370],[691,1620,1622],{"id":1621},"penggunaan","Penggunaan",[696,1624,1625,1627,1628,1630,1631,1633],{},[699,1626,701],{}," adalah string hex (",[699,1629,705],{},", atau ",[699,1632,709],{}," setelah alpha turun di bawah 1) - trigger menunjukkan preview swatch live plus nilai hex, dan membuka popover dengan area saturation\u002Fbrightness, slider hue, slider alpha, dan field teks hex:",[712,1635],{"name":714},[716,1637,1638],{"className":718,"code":719,"language":720,"meta":721,"style":721},[699,1639,1640,1656,1672,1680,1684,1692,1710],{"__ignoreMap":721},[725,1641,1642,1644,1646,1648,1650,1652,1654],{"class":727,"line":8},[725,1643,731],{"class":730},[725,1645,735],{"class":734},[725,1647,739],{"class":738},[725,1649,742],{"class":738},[725,1651,745],{"class":730},[725,1653,749],{"class":748},[725,1655,752],{"class":730},[725,1657,1658,1660,1662,1664,1666,1668,1670],{"class":727,"line":755},[725,1659,759],{"class":758},[725,1661,763],{"class":762},[725,1663,766],{"class":758},[725,1665,769],{"class":738},[725,1667,772],{"class":730},[725,1669,775],{"class":748},[725,1671,778],{"class":730},[725,1673,1674,1676,1678],{"class":727,"line":781},[725,1675,784],{"class":730},[725,1677,735],{"class":734},[725,1679,752],{"class":730},[725,1681,1682],{"class":727,"line":791},[725,1683,794],{"emptyLinePlaceholder":686},[725,1685,1686,1688,1690],{"class":727,"line":797},[725,1687,731],{"class":730},[725,1689,802],{"class":734},[725,1691,752],{"class":730},[725,1693,1694,1696,1698,1700,1702,1704,1706,1708],{"class":727,"line":807},[725,1695,810],{"class":730},[725,1697,813],{"class":734},[725,1699,816],{"class":738},[725,1701,745],{"class":730},[725,1703,821],{"class":748},[725,1705,824],{"class":730},[725,1707,821],{"class":748},[725,1709,829],{"class":730},[725,1711,1712,1714,1716],{"class":727,"line":832},[725,1713,784],{"class":730},[725,1715,802],{"class":734},[725,1717,752],{"class":730},[840,1719,843],{"id":842},[696,1721,1722,848,1724,1726,1727,1729],{},[699,1723,842],{},[699,1725,851],{},") menunjukkan slider opacity. Atur ke ",[699,1728,855],{}," untuk konsumen yang hanya ingin warna opaque:",[712,1731],{"name":859},[716,1733,1734],{"className":862,"code":863,"language":864,"meta":721,"style":721},[699,1735,1736],{"__ignoreMap":721},[725,1737,1738,1740,1742,1744,1746,1748,1750,1752,1754,1756,1758,1760,1762,1764],{"class":727,"line":8},[725,1739,731],{"class":730},[725,1741,813],{"class":734},[725,1743,816],{"class":738},[725,1745,745],{"class":730},[725,1747,821],{"class":748},[725,1749,824],{"class":730},[725,1751,821],{"class":748},[725,1753,885],{"class":730},[725,1755,842],{"class":738},[725,1757,745],{"class":730},[725,1759,821],{"class":748},[725,1761,855],{"class":762},[725,1763,821],{"class":748},[725,1765,829],{"class":730},[840,1767,901],{"id":900},[696,1769,1770,1772],{},[699,1771,900],{}," merender baris warna preset di bawah field hex - dihilangkan sepenuhnya kecuali diberikan. Mengklik satu mengatur warna persis itu (termasuk alpha sendiri, jika ada):",[712,1774],{"name":909},[716,1776,1777],{"className":862,"code":912,"language":864,"meta":721,"style":721},[699,1778,1779],{"__ignoreMap":721},[725,1780,1781,1783,1785,1787,1789,1791,1793,1795,1797,1799,1801,1803,1805,1807,1809,1811,1813,1815,1817,1819,1821,1823,1825,1827],{"class":727,"line":8},[725,1782,731],{"class":730},[725,1784,813],{"class":734},[725,1786,816],{"class":738},[725,1788,745],{"class":730},[725,1790,821],{"class":748},[725,1792,824],{"class":730},[725,1794,821],{"class":748},[725,1796,885],{"class":730},[725,1798,900],{"class":738},[725,1800,745],{"class":730},[725,1802,821],{"class":748},[725,1804,941],{"class":730},[725,1806,944],{"class":748},[725,1808,947],{"class":730},[725,1810,950],{"class":748},[725,1812,947],{"class":730},[725,1814,955],{"class":748},[725,1816,947],{"class":730},[725,1818,960],{"class":748},[725,1820,947],{"class":730},[725,1822,965],{"class":748},[725,1824,968],{"class":730},[725,1826,821],{"class":748},[725,1828,829],{"class":730},[840,1830,1832],{"id":1831},"warna","Warna",[696,1834,1835,1836,1838],{},"Mengontrol warna focus-ring trigger sendiri, scope yang sama seperti prop ",[699,1837,824],{}," kontrol formulir lainnya - tidak berpengaruh pada warna yang dipilih:",[712,1840],{"name":984},[716,1842,1843],{"className":862,"code":987,"language":864,"meta":721,"style":721},[699,1844,1845],{"__ignoreMap":721},[725,1846,1847,1849,1851,1853,1855,1857,1859,1861,1863,1865,1867],{"class":727,"line":8},[725,1848,731],{"class":730},[725,1850,813],{"class":734},[725,1852,816],{"class":738},[725,1854,745],{"class":730},[725,1856,821],{"class":748},[725,1858,824],{"class":730},[725,1860,821],{"class":748},[725,1862,763],{"class":738},[725,1864,745],{"class":730},[725,1866,1012],{"class":748},[725,1868,829],{"class":730},[840,1870,1872],{"id":1871},"ukuran","Ukuran",[696,1874,1875,1876,1025,1878,1025,1880,1882,1883,1038],{},"Trigger default mengikuti skala tinggi 32 \u002F 40 \u002F 44px yang sama seperti Button dan Input untuk ",[699,1877,1024],{},[699,1879,1028],{},[699,1881,1031],{}," pada root font size 16px. Lihat ",[1034,1884,1885],{"href":1036},"Ukuran kontrol",[712,1887],{"name":1041},[716,1889,1890],{"className":862,"code":1044,"language":864,"meta":721,"style":721},[699,1891,1892,1916,1940],{"__ignoreMap":721},[725,1893,1894,1896,1898,1900,1902,1904,1906,1908,1910,1912,1914],{"class":727,"line":8},[725,1895,731],{"class":730},[725,1897,813],{"class":734},[725,1899,816],{"class":738},[725,1901,745],{"class":730},[725,1903,821],{"class":748},[725,1905,824],{"class":730},[725,1907,821],{"class":748},[725,1909,1065],{"class":738},[725,1911,745],{"class":730},[725,1913,1070],{"class":748},[725,1915,829],{"class":730},[725,1917,1918,1920,1922,1924,1926,1928,1930,1932,1934,1936,1938],{"class":727,"line":755},[725,1919,731],{"class":730},[725,1921,813],{"class":734},[725,1923,816],{"class":738},[725,1925,745],{"class":730},[725,1927,821],{"class":748},[725,1929,824],{"class":730},[725,1931,821],{"class":748},[725,1933,1065],{"class":738},[725,1935,745],{"class":730},[725,1937,1095],{"class":748},[725,1939,829],{"class":730},[725,1941,1942,1944,1946,1948,1950,1952,1954,1956,1958,1960,1962],{"class":727,"line":781},[725,1943,731],{"class":730},[725,1945,813],{"class":734},[725,1947,816],{"class":738},[725,1949,745],{"class":730},[725,1951,821],{"class":748},[725,1953,824],{"class":730},[725,1955,821],{"class":748},[725,1957,1065],{"class":738},[725,1959,745],{"class":730},[725,1961,1120],{"class":748},[725,1963,829],{"class":730},[840,1965,1126],{"id":1125},[696,1967,1968,1969,1971,1972,1974,1975,1977],{},"Di bawah breakpoint adaptif yang dikonfigurasi, ",[699,1970,1132],{}," menampilkan popover sebagai ",[1034,1973,386],{"href":387}," yang dipusatkan sebagai gantinya. Ini opt-in (default ",[699,1976,855],{},") dan mengikuti kontrak adaptive bersama:",[712,1979],{"name":1142},[840,1981,1146],{"id":1145},[696,1983,1984,1986],{},[699,1985,1145],{}," menambahkan penunjuk antara picker anchored dan trigger-nya. Default mati dan tidak berpengaruh pada modal adaptive.",[716,1988,1989],{"className":862,"code":1154,"language":864,"meta":721,"style":721},[699,1990,1991,2011],{"__ignoreMap":721},[725,1992,1993,1995,1997,1999,2001,2003,2005,2007,2009],{"class":727,"line":8},[725,1994,731],{"class":730},[725,1996,813],{"class":734},[725,1998,816],{"class":738},[725,2000,745],{"class":730},[725,2002,821],{"class":748},[725,2004,824],{"class":730},[725,2006,821],{"class":748},[725,2008,1175],{"class":738},[725,2010,829],{"class":730},[725,2012,2013,2015,2017,2019,2021,2023,2025,2027,2029,2031,2033,2035,2037,2039,2041,2043,2045,2047,2049,2051,2053,2055],{"class":727,"line":755},[725,2014,731],{"class":730},[725,2016,813],{"class":734},[725,2018,816],{"class":738},[725,2020,745],{"class":730},[725,2022,821],{"class":748},[725,2024,824],{"class":730},[725,2026,821],{"class":748},[725,2028,885],{"class":730},[725,2030,1145],{"class":738},[725,2032,745],{"class":730},[725,2034,821],{"class":748},[725,2036,1204],{"class":730},[725,2038,1207],{"class":762},[725,2040,1210],{"class":730},[725,2042,1213],{"class":762},[725,2044,1216],{"class":730},[725,2046,851],{"class":762},[725,2048,1221],{"class":730},[725,2050,1224],{"class":762},[725,2052,1227],{"class":730},[725,2054,821],{"class":748},[725,2056,829],{"class":730},[696,2058,2059,2060,2062,2063,2065,2066,2068,2069,2071,2072,2074,2075,2077],{},"Gunakan ",[699,2061,1237],{}," untuk menempatkan picker anchored dan ",[699,2064,1241],{}," untuk merender inline (",[699,2067,855],{},") atau teleport ke CSS selector atau ",[699,2070,1248],{},". Target portal default adalah document body. Props ini berlaku untuk popover anchored, yang secara default mulai sejajar dengan trigger-nya; modal adaptive memiliki tata letak sendiri. Atur ",[699,2073,1252],{}," untuk override alignment. ",[699,2076,1256],{}," men-style panel.",[840,2079,1261,2080],{"id":1260},[699,2081,1264],{},[696,2083,2084,2085,2087],{},"Untuk melihat dengan tepat apa yang akan Anda timpa - kelas default untuk setiap slot dan varian - berikut adalah file tema ",[699,2086,279],{}," sendiri:",[1272,2089],{"name":1274},[691,2091,1278],{"id":1277},[1280,2093,2094,2105],{},[1283,2095,2096],{},[1286,2097,2098,2100,2103],{},[1289,2099,1291],{},[1289,2101,2102],{},"Tipe",[1289,2104,1297],{},[1299,2106,2107,2119,2131,2143,2155,2167,2181,2195,2209,2221,2233,2247,2261,2273,2287,2301,2315],{},[1286,2108,2109,2113,2117],{},[1304,2110,2111],{},[699,2112,1308],{},[1304,2114,2115],{},[699,2116,1313],{},[1304,2118,1316],{},[1286,2120,2121,2125,2129],{},[1304,2122,2123],{},[699,2124,1323],{},[1304,2126,2127],{},[699,2128,1313],{},[1304,2130,1316],{},[1286,2132,2133,2137,2141],{},[1304,2134,2135],{},[699,2136,1336],{},[1304,2138,2139],{},[699,2140,1313],{},[1304,2142,1316],{},[1286,2144,2145,2149,2153],{},[1304,2146,2147],{},[699,2148,1349],{},[1304,2150,2151],{},[699,2152,1313],{},[1304,2154,1316],{},[1286,2156,2157,2161,2165],{},[1304,2158,2159],{},[699,2160,1362],{},[1304,2162,2163],{},[699,2164,1367],{},[1304,2166,1316],{},[1286,2168,2169,2173,2177],{},[1304,2170,2171],{},[699,2172,1376],{},[1304,2174,2175],{},[699,2176,1367],{},[1304,2178,2179],{},[699,2180,855],{},[1286,2182,2183,2187,2191],{},[1304,2184,2185],{},[699,2186,1391],{},[1304,2188,2189],{},[699,2190,1367],{},[1304,2192,2193],{},[699,2194,855],{},[1286,2196,2197,2201,2205],{},[1304,2198,2199],{},[699,2200,842],{},[1304,2202,2203],{},[699,2204,1367],{},[1304,2206,2207],{},[699,2208,851],{},[1286,2210,2211,2215,2219],{},[1304,2212,2213],{},[699,2214,900],{},[1304,2216,2217],{},[699,2218,1424],{},[1304,2220,1316],{},[1286,2222,2223,2227,2231],{},[1304,2224,2225],{},[699,2226,1433],{},[1304,2228,2229],{},[699,2230,1313],{},[1304,2232,1316],{},[1286,2234,2235,2239,2243],{},[1304,2236,2237],{},[699,2238,1132],{},[1304,2240,2241],{},[699,2242,1367],{},[1304,2244,2245],{},[699,2246,855],{},[1286,2248,2249,2253,2257],{},[1304,2250,2251],{},[699,2252,1145],{},[1304,2254,2255],{},[699,2256,1464],{},[1304,2258,2259],{},[699,2260,855],{},[1286,2262,2263,2267,2271],{},[1304,2264,2265],{},[699,2266,1237],{},[1304,2268,2269],{},[699,2270,1479],{},[1304,2272,1482],{},[1286,2274,2275,2279,2283],{},[1304,2276,2277],{},[699,2278,1241],{},[1304,2280,2281],{},[699,2282,1493],{},[1304,2284,2285,1498],{},[699,2286,851],{},[1286,2288,2289,2293,2297],{},[1304,2290,2291],{},[699,2292,1017],{},[1304,2294,2295],{},[699,2296,1509],{},[1304,2298,2299],{},[699,2300,1028],{},[1286,2302,2303,2307,2311],{},[1304,2304,2305],{},[699,2306,824],{},[1304,2308,2309],{},[1034,2310,1524],{"href":84},[1304,2312,2313],{},[699,2314,1529],{},[1286,2316,2317,2321,2325],{},[1304,2318,2319],{},[699,2320,1536],{},[1304,2322,2323],{},[699,2324,1541],{},[1304,2326,1316],{},[691,2328,1547],{"id":1546},[1280,2330,2331,2342],{},[1283,2332,2333],{},[1286,2334,2335,2337,2339],{},[1289,2336,1556],{},[1289,2338,1559],{},[1289,2340,2341],{},"Deskripsi",[1299,2343,2344,2357],{},[1286,2345,2346,2350,2354],{},[1304,2347,2348],{},[699,2349,1571],{},[1304,2351,2352],{},[699,2353,1367],{},[1304,2355,2356],{},"Terpicu saat picker meminta membuka atau menutup",[1286,2358,2359,2363,2367],{},[1304,2360,2361],{},[699,2362,1585],{},[1304,2364,2365],{},[699,2366,1313],{},[1304,2368,2369],{},"Terpicu saat warna berubah - dragging area\u002Fslider, mengetik (dan committing) field hex, atau memilih swatch",[1594,2371,1596],{},{"title":721,"searchDepth":781,"depth":781,"links":2373},[2374,2383,2384],{"id":1621,"depth":755,"text":1622,"children":2375},[2376,2377,2378,2379,2380,2381,2382],{"id":842,"depth":781,"text":843},{"id":900,"depth":781,"text":901},{"id":1831,"depth":781,"text":1832},{"id":1871,"depth":781,"text":1872},{"id":1125,"depth":781,"text":1126},{"id":1145,"depth":781,"text":1146},{"id":1260,"depth":781,"text":1608},{"id":1277,"depth":755,"text":1278},{"id":1546,"depth":755,"text":1547},"Kontrol trigger-and-popover untuk memilih warna, dibangun di atas lima primitif warna Reka UI yang independen yang berbagi satu nilai hex.",{},"\u002Fid\u002Fcomponents\u002Fforms\u002Fcolor-picker",{"title":279,"description":2385},"id\u002Fcomponents\u002Fforms\u002Fcolor-picker","p4LW_nbEcno7UY6AQ7G13RJoLt0tZBCXlbpMeQMOz0s",1792925235043]