[{"data":1,"prerenderedAt":905},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":124,"api-BbColorInput":352,"page-en-\u002Fcomponents\u002Fbb-color-input\u002Fapi":377},{"\u002Fit\u002Fcomponenti\u002Fbb-accordion":4,"\u002Fen\u002Fcomponents\u002Fbb-accordion":5,"\u002Fit\u002Fcomponenti\u002Fbb-alert":6,"\u002Fen\u002Fcomponents\u002Fbb-alert":7,"\u002Fit\u002Fcomponenti\u002Fbb-asterisk":8,"\u002Fen\u002Fcomponents\u002Fbb-asterisk":9,"\u002Fit\u002Fcomponenti\u002Fbb-avatar":10,"\u002Fen\u002Fcomponents\u002Fbb-avatar":11,"\u002Fit\u002Fcomponenti\u002Fbb-badge":12,"\u002Fen\u002Fcomponents\u002Fbb-badge":13,"\u002Fit\u002Fcomponenti\u002Fbb-base-button":14,"\u002Fen\u002Fcomponents\u002Fbb-base-button":15,"\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs":16,"\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs":17,"\u002Fit\u002Fcomponenti\u002Fbb-button":18,"\u002Fen\u002Fcomponents\u002Fbb-button":19,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":20,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":21,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":22,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":23,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":24,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":25,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":26,"\u002Fen\u002Fcomponents\u002Fbb-color-input":27,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":28,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":29,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":30,"\u002Fen\u002Fcomponents\u002Fbb-confirm":31,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":32,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":33,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":34,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":35,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":36,"\u002Fen\u002Fcomponents\u002Fbb-dialog":37,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":38,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":39,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":40,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":41,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":42,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":43,"\u002Fit\u002Fcomponenti\u002Fbb-form":44,"\u002Fen\u002Fcomponents\u002Fbb-form":45,"\u002Fit\u002Fcomponenti\u002Fbb-icon":46,"\u002Fen\u002Fcomponents\u002Fbb-icon":47,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":48,"\u002Fen\u002Fcomponents\u002Fbb-indicator":49,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":50,"\u002Fen\u002Fcomponents\u002Fbb-number-input":51,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":52,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":53,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":54,"\u002Fen\u002Fcomponents\u002Fbb-pagination":55,"\u002Fit\u002Fcomponenti\u002Fbb-popover":56,"\u002Fen\u002Fcomponents\u002Fbb-popover":57,"\u002Fit\u002Fcomponenti\u002Fbb-progress":58,"\u002Fen\u002Fcomponents\u002Fbb-progress":59,"\u002Fit\u002Fcomponenti\u002Fbb-radio":60,"\u002Fen\u002Fcomponents\u002Fbb-radio":61,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":62,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":63,"\u002Fit\u002Fcomponenti\u002Fbb-rating":64,"\u002Fen\u002Fcomponents\u002Fbb-rating":65,"\u002Fit\u002Fcomponenti\u002Fbb-select":66,"\u002Fen\u002Fcomponents\u002Fbb-select":67,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":68,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":69,"\u002Fit\u002Fcomponenti\u002Fbb-slider":70,"\u002Fen\u002Fcomponents\u002Fbb-slider":71,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":72,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":73,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":74,"\u002Fen\u002Fcomponents\u002Fbb-spinner":75,"\u002Fit\u002Fcomponenti\u002Fbb-switch":76,"\u002Fen\u002Fcomponents\u002Fbb-switch":77,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":78,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":79,"\u002Fit\u002Fcomponenti\u002Fbb-table":80,"\u002Fen\u002Fcomponents\u002Fbb-table":81,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":82,"\u002Fen\u002Fcomponents\u002Fbb-tabs":83,"\u002Fit\u002Fcomponenti\u002Fbb-tag":84,"\u002Fen\u002Fcomponents\u002Fbb-tag":85,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":86,"\u002Fen\u002Fcomponents\u002Fbb-text-input":87,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":88,"\u002Fen\u002Fcomponents\u002Fbb-textarea":89,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":90,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":91,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":92,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":93,"\u002Fit\u002Fcomponenti\u002Fbb-toast":94,"\u002Fen\u002Fcomponents\u002Fbb-toast":95,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":96,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":97,"\u002Fit\u002Fcomponenti\u002Fbb-tree":98,"\u002Fen\u002Fcomponents\u002Fbb-tree":99,"\u002Fit\u002Fguide\u002Fai-agents":100,"\u002Fen\u002Fguides\u002Fai-agents":101,"\u002Fit\u002Fguide\u002Fcoherence":102,"\u002Fen\u002Fguides\u002Fcoherence":103,"\u002Fit\u002Fguide\u002Fdesign-language":104,"\u002Fen\u002Fguides\u002Fdesign-language":105,"\u002Fit\u002Fguide\u002Fdesign-tokens":106,"\u002Fen\u002Fguides\u002Fdesign-tokens":107,"\u002Fit\u002Fguide\u002Ffetching-data":108,"\u002Fen\u002Fguides\u002Ffetching-data":109,"\u002Fit\u002Fguide\u002Ficons":110,"\u002Fen\u002Fguides\u002Ficons":111,"\u002Fit\u002Fguide\u002Finertia":112,"\u002Fen\u002Fguides\u002Finertia":113,"\u002Fit\u002Fguide\u002Finstallation":114,"\u002Fen\u002Fguides\u002Finstallation":115,"\u002Fit\u002Fguide\u002Fmigration":116,"\u002Fen\u002Fguides\u002Fmigration":117,"\u002Fit\u002Fguide\u002Fnuxt":118,"\u002Fen\u002Fguides\u002Fnuxt":119,"\u002Fit\u002Fguide\u002Foptions-and-items":120,"\u002Fen\u002Fguides\u002Foptions-and-items":121,"\u002Fit\u002Fguide\u002Fvalidated-forms":122,"\u002Fen\u002Fguides\u002Fvalidated-forms":123},"\u002Fen\u002Fcomponents\u002Fbb-accordion","\u002Fit\u002Fcomponenti\u002Fbb-accordion","\u002Fen\u002Fcomponents\u002Fbb-alert","\u002Fit\u002Fcomponenti\u002Fbb-alert","\u002Fen\u002Fcomponents\u002Fbb-asterisk","\u002Fit\u002Fcomponenti\u002Fbb-asterisk","\u002Fen\u002Fcomponents\u002Fbb-avatar","\u002Fit\u002Fcomponenti\u002Fbb-avatar","\u002Fen\u002Fcomponents\u002Fbb-badge","\u002Fit\u002Fcomponenti\u002Fbb-badge","\u002Fen\u002Fcomponents\u002Fbb-base-button","\u002Fit\u002Fcomponenti\u002Fbb-base-button","\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs","\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs","\u002Fen\u002Fcomponents\u002Fbb-button","\u002Fit\u002Fcomponenti\u002Fbb-button","\u002Fen\u002Fcomponents\u002Fbb-checkbox","\u002Fit\u002Fcomponenti\u002Fbb-checkbox","\u002Fen\u002Fcomponents\u002Fbb-checkbox-group","\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group","\u002Fen\u002Fcomponents\u002Fbb-collapsible","\u002Fit\u002Fcomponenti\u002Fbb-collapsible","\u002Fen\u002Fcomponents\u002Fbb-color-input","\u002Fit\u002Fcomponenti\u002Fbb-color-input","\u002Fen\u002Fcomponents\u002Fbb-color-palette","\u002Fit\u002Fcomponenti\u002Fbb-color-palette","\u002Fen\u002Fcomponents\u002Fbb-confirm","\u002Fit\u002Fcomponenti\u002Fbb-confirm","\u002Fen\u002Fcomponents\u002Fbb-date-picker","\u002Fit\u002Fcomponenti\u002Fbb-date-picker","\u002Fen\u002Fcomponents\u002Fbb-date-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input","\u002Fen\u002Fcomponents\u002Fbb-dialog","\u002Fit\u002Fcomponenti\u002Fbb-dialog","\u002Fen\u002Fcomponents\u002Fbb-dropdown","\u002Fit\u002Fcomponenti\u002Fbb-dropdown","\u002Fen\u002Fcomponents\u002Fbb-dropdown-button","\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button","\u002Fen\u002Fcomponents\u002Fbb-dropzone","\u002Fit\u002Fcomponenti\u002Fbb-dropzone","\u002Fen\u002Fcomponents\u002Fbb-form","\u002Fit\u002Fcomponenti\u002Fbb-form","\u002Fen\u002Fcomponents\u002Fbb-icon","\u002Fit\u002Fcomponenti\u002Fbb-icon","\u002Fen\u002Fcomponents\u002Fbb-indicator","\u002Fit\u002Fcomponenti\u002Fbb-indicator","\u002Fen\u002Fcomponents\u002Fbb-number-input","\u002Fit\u002Fcomponenti\u002Fbb-number-input","\u002Fen\u002Fcomponents\u002Fbb-off-canvas","\u002Fit\u002Fcomponenti\u002Fbb-off-canvas","\u002Fen\u002Fcomponents\u002Fbb-pagination","\u002Fit\u002Fcomponenti\u002Fbb-pagination","\u002Fen\u002Fcomponents\u002Fbb-popover","\u002Fit\u002Fcomponenti\u002Fbb-popover","\u002Fen\u002Fcomponents\u002Fbb-progress","\u002Fit\u002Fcomponenti\u002Fbb-progress","\u002Fen\u002Fcomponents\u002Fbb-radio","\u002Fit\u002Fcomponenti\u002Fbb-radio","\u002Fen\u002Fcomponents\u002Fbb-radio-group","\u002Fit\u002Fcomponenti\u002Fbb-radio-group","\u002Fen\u002Fcomponents\u002Fbb-rating","\u002Fit\u002Fcomponenti\u002Fbb-rating","\u002Fen\u002Fcomponents\u002Fbb-select","\u002Fit\u002Fcomponenti\u002Fbb-select","\u002Fen\u002Fcomponents\u002Fbb-select-popover","\u002Fit\u002Fcomponenti\u002Fbb-select-popover","\u002Fen\u002Fcomponents\u002Fbb-slider","\u002Fit\u002Fcomponenti\u002Fbb-slider","\u002Fen\u002Fcomponents\u002Fbb-smooth-height","\u002Fit\u002Fcomponenti\u002Fbb-smooth-height","\u002Fen\u002Fcomponents\u002Fbb-spinner","\u002Fit\u002Fcomponenti\u002Fbb-spinner","\u002Fen\u002Fcomponents\u002Fbb-switch","\u002Fit\u002Fcomponenti\u002Fbb-switch","\u002Fen\u002Fcomponents\u002Fbb-switch-group","\u002Fit\u002Fcomponenti\u002Fbb-switch-group","\u002Fen\u002Fcomponents\u002Fbb-table","\u002Fit\u002Fcomponenti\u002Fbb-table","\u002Fen\u002Fcomponents\u002Fbb-tabs","\u002Fit\u002Fcomponenti\u002Fbb-tabs","\u002Fen\u002Fcomponents\u002Fbb-tag","\u002Fit\u002Fcomponenti\u002Fbb-tag","\u002Fen\u002Fcomponents\u002Fbb-text-input","\u002Fit\u002Fcomponenti\u002Fbb-text-input","\u002Fen\u002Fcomponents\u002Fbb-textarea","\u002Fit\u002Fcomponenti\u002Fbb-textarea","\u002Fen\u002Fcomponents\u002Fbb-time-picker","\u002Fit\u002Fcomponenti\u002Fbb-time-picker","\u002Fen\u002Fcomponents\u002Fbb-time-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input","\u002Fen\u002Fcomponents\u002Fbb-toast","\u002Fit\u002Fcomponenti\u002Fbb-toast","\u002Fen\u002Fcomponents\u002Fbb-tooltip","\u002Fit\u002Fcomponenti\u002Fbb-tooltip","\u002Fen\u002Fcomponents\u002Fbb-tree","\u002Fit\u002Fcomponenti\u002Fbb-tree","\u002Fen\u002Fguides\u002Fai-agents","\u002Fit\u002Fguide\u002Fai-agents","\u002Fen\u002Fguides\u002Fcoherence","\u002Fit\u002Fguide\u002Fcoherence","\u002Fen\u002Fguides\u002Fdesign-language","\u002Fit\u002Fguide\u002Fdesign-language","\u002Fen\u002Fguides\u002Fdesign-tokens","\u002Fit\u002Fguide\u002Fdesign-tokens","\u002Fen\u002Fguides\u002Ffetching-data","\u002Fit\u002Fguide\u002Ffetching-data","\u002Fen\u002Fguides\u002Ficons","\u002Fit\u002Fguide\u002Ficons","\u002Fen\u002Fguides\u002Finertia","\u002Fit\u002Fguide\u002Finertia","\u002Fen\u002Fguides\u002Finstallation","\u002Fit\u002Fguide\u002Finstallation","\u002Fen\u002Fguides\u002Fmigration","\u002Fit\u002Fguide\u002Fmigration","\u002Fen\u002Fguides\u002Fnuxt","\u002Fit\u002Fguide\u002Fnuxt","\u002Fen\u002Fguides\u002Foptions-and-items","\u002Fit\u002Fguide\u002Foptions-and-items","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",[125,136,145,166,178,220,253,286,307,328,340,346],{"label":126,"entries":127},"Getting started",[128,132],{"title":129,"path":130,"order":131},"Installation","\u002Fguides\u002Finstallation",1,{"title":133,"path":134,"order":135},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"label":137,"entries":138},"Design system",[139,142],{"title":140,"path":141,"order":131},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":143,"path":144,"order":135},"Design language","\u002Fguides\u002Fdesign-language",{"label":146,"entries":147},"Playbooks",[148,151,154,158,162],{"title":149,"path":150,"order":131},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":152,"path":153,"order":135},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":155,"path":156,"order":157},"Coherence","\u002Fguides\u002Fcoherence",3,{"title":159,"path":160,"order":161},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":163,"path":164,"order":165},"Icons","\u002Fguides\u002Ficons",5,{"label":167,"entries":168},"Ecosystem",[169,172,175],{"title":170,"path":171,"order":131},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":173,"path":174,"order":135},"Nuxt","\u002Fguides\u002Fnuxt",{"title":176,"path":177,"order":157},"AI agents","\u002Fguides\u002Fai-agents",{"label":179,"entries":180},"Inputs",[181,184,187,190,193,196,200,204,208,212,216],{"title":182,"path":183,"component":182,"order":131},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":185,"path":186,"component":185,"order":135},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":188,"path":189,"component":188,"order":157},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":191,"path":192,"component":191,"order":161},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":194,"path":195,"component":194,"order":165},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":197,"path":198,"component":197,"order":199},"BbForm","\u002Fcomponents\u002Fbb-form",6,{"title":201,"path":202,"component":201,"order":203},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":205,"path":206,"component":205,"order":207},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":209,"path":210,"component":209,"order":211},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":213,"path":214,"component":213,"order":215},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":217,"path":218,"component":217,"order":219},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":221,"entries":222},"Selection",[223,226,229,232,235,238,241,244,247,250],{"title":224,"path":225,"component":224,"order":131},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":227,"path":228,"component":227,"order":135},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":230,"path":231,"component":230,"order":157},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":233,"path":234,"component":233,"order":161},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":236,"path":237,"component":236,"order":165},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":239,"path":240,"component":239,"order":199},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":242,"path":243,"component":242,"order":203},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":245,"path":246,"component":245,"order":207},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":248,"path":249,"component":248,"order":211},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":251,"path":252,"component":251,"order":215},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":254,"entries":255},"Overlay",[256,259,262,265,268,271,274,277,280,283],{"title":257,"path":258,"component":257,"order":131},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":260,"path":261,"component":260,"order":135},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":263,"path":264,"component":263,"order":157},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":266,"path":267,"component":266,"order":161},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":269,"path":270,"component":269,"order":165},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":272,"path":273,"component":272,"order":199},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":275,"path":276,"component":275,"order":203},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":278,"path":279,"component":278,"order":207},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":281,"path":282,"component":281,"order":211},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":284,"path":285,"component":284,"order":215},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":287,"entries":288},"Navigation",[289,292,295,298,301,304],{"title":290,"path":291,"component":290,"order":131},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":293,"path":294,"component":293,"order":135},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":296,"path":297,"component":296,"order":157},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":299,"path":300,"component":299,"order":161},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":302,"path":303,"component":302,"order":165},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":305,"path":306,"component":305,"order":199},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":308,"entries":309},"Feedback",[310,313,316,319,322,325],{"title":311,"path":312,"component":311,"order":131},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":314,"path":315,"component":314,"order":135},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":317,"path":318,"component":317,"order":157},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":320,"path":321,"component":320,"order":161},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":323,"path":324,"component":323,"order":165},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":326,"path":327,"component":326,"order":199},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":329,"entries":330},"Data Display",[331,334,337],{"title":332,"path":333,"component":332,"order":131},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":335,"path":336,"component":335,"order":135},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":338,"path":339,"component":338,"order":157},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":341,"entries":342},"Layout & Utility",[343],{"title":344,"path":345,"component":344,"order":131},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":347,"entries":348},"Other",[349],{"title":350,"path":351,"component":350,"order":131},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",{"name":188,"slug":353,"group":179,"description":354,"entrypoint":355,"docs":356,"props":359,"models":726,"events":729,"slots":784,"exposed":811,"pt":812,"validated":873,"migration":889},"bb-color-input","Captures color values through input controls.","bitboss-ui",{"contract":357,"source":358},"ai\u002FBbColorInput.md","ai\u002Fsource\u002FBbColorInput.md",[360,368,374,381,385,389,393,396,399,404,408,413,417,420,423,426,429,432,439,443,447,450,455,459,463,466,469,472,476,479,481,483,485,487,489,491,493,495,497,499,501,503,505,507,509,511,513,515,517,519,521,523,525,527,529,531,533,535,537,539,541,543,545,547,549,551,553,555,557,559,561,563,565,567,569,571,573,575,577,579,581,583,585,587,589,591,593,595,597,599,601,603,605,607,609,611,613,615,617,619,621,623,625,627,629,631,633,635,637,639,641,643,645,647,649,651,653,655,657,659,661,663,665,667,669,671,673,675,677,679,681,683,685,687,689,691,693,695,697,699,701,703,707,710,713,718,723],{"name":361,"type":362,"required":363,"default":364,"description":365,"note":366,"demo":367},"adaptive","boolean | undefined",false,"`config.adaptive` (`true`)","When `true`, the color palette opens as a bottom off-canvas sheet on mobile\nviewports instead of a floating popover; on desktop it stays a popover.\nMirrors the adaptive behaviour of `BbSelect`\u002F`BbDatePickerInput`.\n\nWhen unset, falls back to the global `config.adaptive`.","Only the picker adapts: below `config.mobileMaxWidth` it opens as a bottom sheet instead of a popover, and the text field is untouched. The surface is latched when the picker opens, so a mid-open resize never swaps one for the other.","mobile",{"name":369,"type":362,"required":363,"default":370,"description":371,"note":372,"demo":373},"alpha","false","Enable the alpha channel. Shows an opacity slider and uses `#RRGGBBAA` hex8 format.","It widens the mask as well as the picker, which is why an incoming `#RRGGBBAA` value cannot be represented without it. Turn it on wherever eight-digit colors can occur — and expect every emitted value to carry the two extra digits, `ff` included.","picker",{"name":375,"type":376,"required":363,"default":377,"description":378,"note":379,"demo":380},"append:icon","string | undefined",null,"Name of the icon to be added at the end of the input.","The append position is where the swatch dot already lives, and the clear button and error icon compete for it too. Anything that must stay visible belongs in `append-outer`.","validation",{"name":382,"type":376,"required":363,"default":383,"description":384,"note":377,"demo":377},"autocomplete","\"off\"","Guides the browser as to the type of information expected in the field.",{"name":386,"type":387,"required":363,"default":377,"description":388,"note":377,"demo":377},"autofocus","Booleanish | undefined","Sets autofocus on page load.",{"name":390,"type":362,"required":363,"default":370,"description":391,"note":392,"demo":380},"clearable","Displays a clear button when the input has a value and is being interacted with.","Emits `null`, which is the only value other than a complete hex this model ever holds. There is no `clear` event — watch the model.",{"name":394,"type":362,"required":363,"default":370,"description":395,"note":377,"demo":367},"compact","Displays the component in a compact version.",{"name":397,"type":376,"required":363,"default":377,"description":398,"note":377,"demo":380},"description","Descriptive text displayed below the label and above the input. Unlike the hint it is always\nvisible, and it is linked to the input via `aria-describedby` (after any\n`errors` \u002F `warnings`, before the `hint`).",{"name":400,"type":401,"required":363,"default":377,"description":402,"note":403,"demo":367},"direction","InputDirection | undefined","Direction of the layout of the component. Can either be a predefined value or a pattern separated by a space like `xx xxxxx`.","Worth reaching for on a settings page, where a column of colors reads better as label-then-swatch rows. As everywhere in the family it applies only while the resolved label mode is `outside`.",{"name":405,"type":362,"required":363,"default":370,"description":406,"note":407,"demo":380},"disabled","Disables the component.","Blocks the picker dot as well as the text. For an imported or derived color prefer `readonly`, which keeps the value focusable and copyable.",{"name":409,"type":410,"required":363,"default":377,"description":411,"note":412,"demo":380},"errors","string | string[] | undefined","Can be a string or an array of string containing the messages to display.\nThey render in an `aria-live=\"polite\"` region (announced when they appear)\nand, while the list is non-empty, are referenced FIRST from the control's\n`aria-describedby`, so the reason the field is invalid is re-read whenever\nthe control regains focus.","The mask guarantees the shape, so \"that is not a color\" is not an error this field can produce. What is left is presence — a `null` check on submit — and rules that live on your server.",{"name":414,"type":362,"required":363,"default":370,"description":415,"note":416,"demo":373},"eyeDropper","Show an eyedropper button to sample any color on screen.\nUses the native EyeDropper API — hidden automatically on unsupported browsers.","The button renders only where the browser implements the native `EyeDropper` API — Chromium-based browsers, not Firefox or Safari — and is simply absent elsewhere, with nothing in its place. Never the only path to a color. Called `picker` in v2; a leftover `picker` falls into `$attrs` and does nothing.",{"name":418,"type":362,"required":363,"default":370,"description":419,"note":377,"demo":377},"hasErrors","Define if the component should be in an error state.\nIt usually attaches a CSS class for styling purposes.",{"name":421,"type":362,"required":363,"default":370,"description":422,"note":377,"demo":377},"hasWarnings","Define if the component should be in a warning state.\nSame chrome as errors with `--bb-warn`; errors take priority.",{"name":424,"type":362,"required":363,"default":370,"description":425,"note":377,"demo":377},"hideLabel","Visually hides the label of the input while maintaining accessibility.",{"name":427,"type":376,"required":363,"default":377,"description":428,"note":377,"demo":380},"hint","Text box to be displayed near the input, usually to indicate instructions.",{"name":430,"type":376,"required":363,"default":377,"description":431,"note":377,"demo":377},"id","The identifier of the component.",{"name":433,"type":434,"required":435,"default":377,"description":436,"note":437,"demo":438},"label","string",true,"Text content of the label of the element.","Required, and display and accessibility only — it does not set the `name` attribute. `hide-label` is how you drop it visually without losing the accessible name.","default",{"name":440,"type":441,"required":363,"default":377,"description":442,"note":377,"demo":377},"labelMode","\"outside\" | \"floating\" | \"inside\" | undefined","Label rendering mode: `outside` places the label above the input,\n`floating` overlays it on the field and shrinks it when a value is set,\n`inside` keeps it inside the field.",{"name":444,"type":445,"required":363,"default":377,"description":446,"note":377,"demo":377},"labelPosition","\"left\" | \"center\" | \"right\" | undefined","Sets the text alignment of the label.",{"name":448,"type":362,"required":363,"default":370,"description":449,"note":377,"demo":377},"loading","Sets the component in a loading state, usually triggering some visual styles.",{"name":451,"type":452,"required":435,"default":453,"description":454,"note":377,"demo":377},"modelValue","string | null","null","Used by v-model.",{"name":456,"type":376,"required":363,"default":377,"description":457,"note":458,"demo":438},"name","Defines the name of the input.","Unset, the rendered `\u003Cinput>` carries no name at all, so a native form post or a `FormData` read drops the color silently.",{"name":460,"type":461,"required":363,"default":377,"description":462,"note":377,"demo":377},"offCanvasProps","Partial\u003CBbOffCanvasProps> | undefined","Props for the phone sheet. A `pt` inside it, object or colon keys, styles\nonly that sheet.\n\nExtra props forwarded to the `BbOffCanvas` sheet when `adaptive` is active on\nmobile (e.g. `size`, `persistent`). Spread over the defaults: the sheet's\n`title` is the field `label`, it is `draggable` (the colour square and\nsliders never drag it) and it hides its ✕; pass `{ hideClose: false }` to\nbring the ✕ back.\n\nA `pt` inside it styles ONLY the sheet, in `BbOffCanvas`'s part words\n(`root`, `header`, `title`, `description`, `content`, `footer`, `close`;\nstate `open`), object (`{ pt: { header: '…' } }`) or colon keys\n(`{ 'pt:header': '…' }`) alike. It merges after what this component\nforwards to its sheet, so it wins a conflict and drops nothing — see the\npassthrough guide § Inside the sheet.\n\nFor this component it is the only way to style the sheet's header,\ntitle and ✕: none of its own parts reach inside the sheet.",{"name":464,"type":362,"required":363,"default":370,"description":465,"note":377,"demo":377},"persistentHint","Keeps the hint displayed.",{"name":467,"type":376,"required":363,"default":377,"description":468,"note":377,"demo":377},"placeholder","String displayed when there's no data.",{"name":470,"type":376,"required":363,"default":377,"description":471,"note":377,"demo":377},"prepend:icon","Name of the icon to be added at the start of the input.",{"name":473,"type":474,"required":363,"default":377,"description":475,"note":377,"demo":377},"pt","(PtMap\u003CBbColorInputPtPart, FormControlPtState> & { 'swatch:selected'?: PtValue | undefined; }) | undefined","Passthrough, object form: `{ box: '…', 'box:errors': '…' }` — the same\nkeys as the `pt:*` attributes without the prefix. See the `pt:\u003Cpart>` row.",{"name":477,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:box","PtValue | undefined",{"name":480,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:box:disabled",{"name":482,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:box:errors",{"name":484,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:box:has-value",{"name":486,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:box:loading",{"name":488,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:box:readonly",{"name":490,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:box:warnings",{"name":492,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:clear",{"name":494,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:clear:disabled",{"name":496,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:clear:errors",{"name":498,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:clear:has-value",{"name":500,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:clear:loading",{"name":502,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:clear:readonly",{"name":504,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:clear:warnings",{"name":506,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:description",{"name":508,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:description:disabled",{"name":510,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:description:errors",{"name":512,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:description:has-value",{"name":514,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:description:loading",{"name":516,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:description:readonly",{"name":518,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:description:warnings",{"name":520,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:hint",{"name":522,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:hint:disabled",{"name":524,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:hint:errors",{"name":526,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:hint:has-value",{"name":528,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:hint:loading",{"name":530,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:hint:readonly",{"name":532,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:hint:warnings",{"name":534,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:icon",{"name":536,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:icon:disabled",{"name":538,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:icon:errors",{"name":540,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:icon:has-value",{"name":542,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:icon:loading",{"name":544,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:icon:readonly",{"name":546,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:icon:warnings",{"name":548,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:indicator",{"name":550,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:indicator:disabled",{"name":552,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:indicator:errors",{"name":554,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:indicator:has-value",{"name":556,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:indicator:loading",{"name":558,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:indicator:readonly",{"name":560,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:indicator:warnings",{"name":562,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:input",{"name":564,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:input:disabled",{"name":566,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:input:errors",{"name":568,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:input:has-value",{"name":570,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:input:loading",{"name":572,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:input:readonly",{"name":574,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:input:warnings",{"name":576,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:label",{"name":578,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:label:disabled",{"name":580,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:label:errors",{"name":582,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:label:has-value",{"name":584,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:label:loading",{"name":586,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:label:readonly",{"name":588,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:label:warnings",{"name":590,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:message",{"name":592,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:message:disabled",{"name":594,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:message:errors",{"name":596,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:message:has-value",{"name":598,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:message:loading",{"name":600,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:message:readonly",{"name":602,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:message:warnings",{"name":604,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:panel",{"name":606,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:panel:disabled",{"name":608,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:panel:errors",{"name":610,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:panel:has-value",{"name":612,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:panel:loading",{"name":614,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:panel:readonly",{"name":616,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:panel:warnings",{"name":618,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:prefix",{"name":620,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:prefix:disabled",{"name":622,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:prefix:errors",{"name":624,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:prefix:has-value",{"name":626,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:prefix:loading",{"name":628,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:prefix:readonly",{"name":630,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:prefix:warnings",{"name":632,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:root",{"name":634,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:root:disabled",{"name":636,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:root:errors",{"name":638,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:root:has-value",{"name":640,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:root:loading",{"name":642,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:root:readonly",{"name":644,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:root:warnings",{"name":646,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:sheet",{"name":648,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:sheet:disabled",{"name":650,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:sheet:errors",{"name":652,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:sheet:has-value",{"name":654,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:sheet:loading",{"name":656,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:sheet:readonly",{"name":658,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:sheet:warnings",{"name":660,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:spinner",{"name":662,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:spinner:disabled",{"name":664,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:spinner:errors",{"name":666,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:spinner:has-value",{"name":668,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:spinner:loading",{"name":670,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:spinner:readonly",{"name":672,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:spinner:warnings",{"name":674,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:suffix",{"name":676,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:suffix:disabled",{"name":678,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:suffix:errors",{"name":680,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:suffix:has-value",{"name":682,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:suffix:loading",{"name":684,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:suffix:readonly",{"name":686,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:suffix:warnings",{"name":688,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:swatch",{"name":690,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:swatch:disabled",{"name":692,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:swatch:errors",{"name":694,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:swatch:has-value",{"name":696,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:swatch:loading",{"name":698,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:swatch:readonly",{"name":700,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:swatch:selected",{"name":702,"type":478,"required":363,"default":377,"description":377,"note":377,"demo":377},"pt:swatch:warnings",{"name":704,"type":362,"required":363,"default":370,"description":705,"note":706,"demo":380},"readonly","Sets the input in a readonly state.","Blocks the picker dot too, while the hex stays focusable, selectable and copyable. The honest state for a color that was imported rather than chosen.",{"name":708,"type":362,"required":363,"default":370,"description":709,"note":377,"demo":377},"required","Sets the input as required.",{"name":711,"type":362,"required":363,"default":370,"description":712,"note":377,"demo":377},"reverse","Reverses the layout. Applicable in every direction the order of the label and the input is swapped.",{"name":714,"type":715,"required":363,"default":377,"description":716,"note":717,"demo":373},"swatches","boolean | string[][] | undefined","Controls swatches display in the picker:\n- `true`       — show the built-in Material-palette swatches\n- `string[][]` — show custom swatches (each inner array = a column of shades)\n- `false` \u002F omitted — no swatches section","Each inner array is a **column** of shades, so ramps are designed vertically. A row-wise `string[][]` type-checks and renders a grid nobody can scan. Presets never restrict the value: the gradient and the text field stay available beside them.",{"name":719,"type":720,"required":363,"default":721,"description":722,"note":377,"demo":377},"variant","InputVariantType | undefined","'outline'","Visual variant of the field box — the same names and tokens as the\n`BbButton` variants. Colours only: height, padding and border width are\nidentical across variants, so a form never reflows when one changes.\n`'ghost'` has no border in any state (errors and warnings show through\nthe icon and the messages); every variant keeps the focus ring.\nRegister extra names with the plugin's `inputVariants` option.",{"name":724,"type":410,"required":363,"default":377,"description":725,"note":377,"demo":377},"warnings","Warning messages to display beneath the field, in their own `aria-live`\nregion and amber (`--bb-text-warn`). A string or array; a non-empty list\nimplies the warning state. Errors suppress warnings when both are set.\nWhile displayed they are also referenced from the control's\n`aria-describedby`, after any errors and before the description\u002Fhint.",[727],{"name":451,"type":452,"note":728,"demo":438},"Hex only, lowercase on emit, and it moves only when the typed text is a complete color — or `null` when the field is emptied. Half-typed values never reach it, so nothing downstream needs to guard against one.",[730,733,736,739,742,745,748,751,754,758,761,764,767,770,773,776,779],{"name":731,"signature":732,"description":377,"note":377,"demo":377},"blur","(event: \"blur\", event: FocusEvent): void",{"name":734,"signature":735,"description":377,"note":377,"demo":377},"change","(event: \"change\", event: Event): void",{"name":737,"signature":738,"description":377,"note":377,"demo":377},"click","(event: \"click\", event: MouseEvent): void",{"name":740,"signature":741,"description":377,"note":377,"demo":377},"compositionend","(event: \"compositionend\", event: CompositionEvent): void",{"name":743,"signature":744,"description":377,"note":377,"demo":377},"compositionstart","(event: \"compositionstart\", event: CompositionEvent): void",{"name":746,"signature":747,"description":377,"note":377,"demo":377},"focus","(event: \"focus\", event: FocusEvent): void",{"name":749,"signature":750,"description":377,"note":377,"demo":377},"hidden","(event: \"hidden\"): void",{"name":752,"signature":753,"description":377,"note":377,"demo":377},"hide","(event: \"hide\"): void",{"name":755,"signature":756,"description":377,"note":757,"demo":438},"input","(event: \"input\", event: Event): void","The raw DOM event, fired per keystroke on text that may not be a color yet. Do not parse it — the model is the one that only ever holds a complete hex.",{"name":759,"signature":760,"description":377,"note":377,"demo":377},"keydown","(event: \"keydown\", event: KeyboardEvent): void",{"name":762,"signature":763,"description":377,"note":377,"demo":377},"keyup","(event: \"keyup\", event: KeyboardEvent): void",{"name":765,"signature":766,"description":377,"note":377,"demo":377},"mousedown","(event: \"mousedown\", event: MouseEvent): void",{"name":768,"signature":769,"description":377,"note":377,"demo":377},"mouseup","(event: \"mouseup\", event: MouseEvent): void",{"name":771,"signature":772,"description":377,"note":377,"demo":377},"paste","(event: \"paste\", event: ClipboardEvent): void",{"name":774,"signature":775,"description":377,"note":377,"demo":377},"show","(event: \"show\"): void",{"name":777,"signature":778,"description":377,"note":377,"demo":377},"shown","(event: \"shown\"): void",{"name":780,"signature":781,"description":377,"note":782,"demo":783},"update:modelValue","(event: \"update:modelValue\", value: string | null): void","Fires on every drag frame while someone is inside the picker, so a live preview is free and a save on this event is not. Debounce persistence, or hang it on `blur` or on submit.","persistence",[785,790,793,796,799,802,805,808],{"name":786,"type":787,"description":788,"note":789,"demo":380},"append","Record\u003Cstring, never>","Content rendered after the color picker indicator button, at the end of the inner container.\nMutually exclusive with `suffix`: the `suffix` slot renders inside this\nslot's default content, so providing `append` replaces the suffix\nrendering entirely and any `suffix` content is silently dropped.\nThis slot receives no scoped props.","Renders after the swatch dot the component draws there, and replaces the default suffix wrapper. For an action beside the field use `append-outer`, which nothing competes for.",{"name":791,"type":787,"description":792,"note":377,"demo":377},"append-outer","Content rendered after the entire input control, outside the input chrome.\nThis slot receives no scoped props.",{"name":397,"type":794,"description":795,"note":377,"demo":377},"BbColorInputDescriptionSlotProps","Replaces the description text. Provided alone (no `description` prop) it still\nrenders the description region and wires it into `aria-describedby`.",{"name":433,"type":797,"description":798,"note":377,"demo":377},"BbColorInputLabelSlotProps","Replaces the default label text rendered above the color input.",{"name":800,"type":787,"description":801,"note":377,"demo":377},"prefix","Inline content rendered at the start of the input field area, before the typed text.\nThis slot receives no scoped props.",{"name":803,"type":787,"description":804,"note":377,"demo":377},"prepend","Content rendered before the text input, at the start of the inner container.\nThis slot receives no scoped props.",{"name":806,"type":787,"description":807,"note":377,"demo":377},"prepend-outer","Content rendered before the entire input control, outside the input chrome.\nThis slot receives no scoped props.",{"name":809,"type":787,"description":810,"note":377,"demo":377},"suffix","Inline content rendered at the end of the input field area, after the typed text.\nRenders inside the default `append` area's suffix wrapper — mutually\nexclusive with `append`: if an `append` slot is provided it replaces this\nwrapper and the `suffix` content is not rendered.\nThis slot receives no scoped props.",[],{"parts":813,"states":856},[814,817,819,821,824,826,829,831,834,837,839,841,844,847,850,853],{"name":815,"description":816},"root","The field's outer container: the label, the box and the lines under it.",{"name":433,"description":818},"The label text above the box (the `label` prop).",{"name":397,"description":820},"The muted line under the label (the `description` prop).",{"name":822,"description":823},"message","The errors \u002F warnings line under the box. A node of its own: it can show at the same time as `hint`.",{"name":427,"description":825},"The helper line (the `hint` prop), shown on focus, or always with `persistent-hint`.",{"name":827,"description":828},"box","The bordered box around the input — border, background and radius; the `variant` paints here.",{"name":755,"description":830},"The native input element inside the box.",{"name":832,"description":833},"icon","The content icons, prepend and append — a broadcast. Chrome (the clear ✕, a chevron, the error \u002F warning glyph) is never in it.",{"name":835,"description":836},"spinner","The spinner inside the box while `loading`.",{"name":800,"description":838},"The `#prefix` slot's wrapper, inside the box before the input.",{"name":809,"description":840},"The `#suffix` slot's wrapper, inside the box after the input.",{"name":842,"description":843},"clear","The ✕ that empties this control (`clearable`) — one node, never a chip's own ✕.",{"name":845,"description":846},"indicator","The colour dot in the box that opens the palette.",{"name":848,"description":849},"panel","The palette surface — the popover's painted bubble on desktop, the sheet itself on a phone.",{"name":851,"description":852},"sheet","The bottom sheet the palette opens in on a phone — no node on desktop.",{"name":854,"description":855},"swatch","One palette swatch (after the `swatches` prop) — a broadcast resolved per swatch.",[857,859,861,864,866,868,871],{"name":405,"description":858},"Component-wide: the control is `disabled`.",{"name":409,"description":860},"Component-wide: the control is in its error state (`errors` \u002F `has-errors`, or its validation) — the message line and the box turn red.",{"name":862,"description":863},"has-value","Component-wide: the control holds a value, by its own rule (`0` counts on `BbNumberInput`, `''` on `BbColorInput`).",{"name":448,"description":865},"Component-wide: `loading` is on; the box shows its `spinner`.",{"name":704,"description":867},"Component-wide: the control is `readonly` — shown, focusable, not editable.",{"name":869,"description":870},"selected","Per node, on `swatch` only: the swatch that matches the value.",{"name":724,"description":872},"Component-wide: the control is in its warning state (`warnings` \u002F `has-warnings`) and not in an error state — errors win, so the two are never on together.",{"entrypoint":874,"props":875},"bitboss-ui\u002Fvalidated",[876,881,886],{"name":877,"type":878,"required":363,"default":377,"description":879,"note":880,"demo":377},"rules","RuleExpression\u003Cstring | null>","vee-validate rules for this field.","Only on the `bitboss-ui\u002Fvalidated` build, inside a `BbForm`. Spend rules on presence and on business rules: the mask makes a format rule unable to fail.",{"name":882,"type":883,"required":363,"default":884,"description":885,"note":377,"demo":377},"validateOn","ValidateTiming[] | undefined","[\"blur\"]","Which interactions trigger validation (see\n`ValidatedFieldProps.validateOn` for the timing vocabulary).",{"name":887,"type":376,"required":363,"default":377,"description":888,"note":377,"demo":377},"vid","Explicit vee-validate field name. **Usually omit it** — the name is derived\nautomatically from the control's `label`\u002F`legend`. Only set `vid` when that\nderivation wouldn't be unique (e.g. v-for rows, or array `v-model`s that\nshare a label). A control with no `label`\u002F`legend` (like `BbDropzone`) must\nprovide it.",{"removed":890,"renamed":900},[891,897],{"name":892,"replacedBy":421,"since":893,"migration":894,"silent":435,"fix":895},"hasWarning","3.0.0-unreleased","ai\u002Fguides\u002Fmigration\u002Fv2-to-v3.md",{"kind":896},"rename",{"name":373,"replacedBy":414,"since":893,"migration":898,"silent":435,"fix":899},"ai\u002Fguides\u002Fmigration\u002Fcomponents\u002Fbb-color-input.md",{"kind":896},[901,903],{"from":892,"to":421,"since":893,"migration":894,"fix":902},{"kind":896},{"from":373,"to":414,"since":893,"migration":898,"fix":904},{"kind":896},1790062844238]