[{"data":1,"prerenderedAt":1114},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":134,"api-none":377,"page-en-\u002Fcomponents\u002Fbb-color-input":378,"pt-showcase-BbColorInput":749},{"\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-calendar":20,"\u002Fen\u002Fcomponents\u002Fbb-calendar":21,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":22,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":23,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":24,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":25,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":26,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":27,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":28,"\u002Fen\u002Fcomponents\u002Fbb-color-input":29,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":30,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":31,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":32,"\u002Fen\u002Fcomponents\u002Fbb-confirm":33,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":34,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":35,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":36,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":37,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":38,"\u002Fen\u002Fcomponents\u002Fbb-dialog":39,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":40,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":41,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":42,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":43,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":44,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":45,"\u002Fit\u002Fcomponenti\u002Fbb-form":46,"\u002Fen\u002Fcomponents\u002Fbb-form":47,"\u002Fit\u002Fcomponenti\u002Fbb-hover-card":48,"\u002Fen\u002Fcomponents\u002Fbb-hover-card":49,"\u002Fit\u002Fcomponenti\u002Fbb-icon":50,"\u002Fen\u002Fcomponents\u002Fbb-icon":51,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":52,"\u002Fen\u002Fcomponents\u002Fbb-indicator":53,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":54,"\u002Fen\u002Fcomponents\u002Fbb-number-input":55,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":56,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":57,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":58,"\u002Fen\u002Fcomponents\u002Fbb-pagination":59,"\u002Fit\u002Fcomponenti\u002Fbb-popover":60,"\u002Fen\u002Fcomponents\u002Fbb-popover":61,"\u002Fit\u002Fcomponenti\u002Fbb-progress":62,"\u002Fen\u002Fcomponents\u002Fbb-progress":63,"\u002Fit\u002Fcomponenti\u002Fbb-radio":64,"\u002Fen\u002Fcomponents\u002Fbb-radio":65,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":66,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":67,"\u002Fit\u002Fcomponenti\u002Fbb-rating":68,"\u002Fen\u002Fcomponents\u002Fbb-rating":69,"\u002Fit\u002Fcomponenti\u002Fbb-select":70,"\u002Fen\u002Fcomponents\u002Fbb-select":71,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":72,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":73,"\u002Fit\u002Fcomponenti\u002Fbb-slider":74,"\u002Fen\u002Fcomponents\u002Fbb-slider":75,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":76,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":77,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":78,"\u002Fen\u002Fcomponents\u002Fbb-spinner":79,"\u002Fit\u002Fcomponenti\u002Fbb-switch":80,"\u002Fen\u002Fcomponents\u002Fbb-switch":81,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":82,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":83,"\u002Fit\u002Fcomponenti\u002Fbb-table":84,"\u002Fen\u002Fcomponents\u002Fbb-table":85,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":86,"\u002Fen\u002Fcomponents\u002Fbb-tabs":87,"\u002Fit\u002Fcomponenti\u002Fbb-tag":88,"\u002Fen\u002Fcomponents\u002Fbb-tag":89,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":90,"\u002Fen\u002Fcomponents\u002Fbb-text-input":91,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":92,"\u002Fen\u002Fcomponents\u002Fbb-textarea":93,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":94,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":95,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":96,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":97,"\u002Fit\u002Fcomponenti\u002Fbb-toast":98,"\u002Fen\u002Fcomponents\u002Fbb-toast":99,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":100,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":101,"\u002Fit\u002Fcomponenti\u002Fbb-tree":102,"\u002Fen\u002Fcomponents\u002Fbb-tree":103,"\u002Fit\u002Fguide\u002Fadoption-checklist":104,"\u002Fen\u002Fguides\u002Fadoption-checklist":105,"\u002Fit\u002Fguide\u002Fai-agents":106,"\u002Fen\u002Fguides\u002Fai-agents":107,"\u002Fit\u002Fguide\u002Fcoherence":108,"\u002Fen\u002Fguides\u002Fcoherence":109,"\u002Fit\u002Fguide\u002Fdesign-language":110,"\u002Fen\u002Fguides\u002Fdesign-language":111,"\u002Fit\u002Fguide\u002Fdesign-tokens":112,"\u002Fen\u002Fguides\u002Fdesign-tokens":113,"\u002Fit\u002Fguide\u002Ffetching-data":114,"\u002Fen\u002Fguides\u002Ffetching-data":115,"\u002Fit\u002Fguide\u002Ficons":116,"\u002Fen\u002Fguides\u002Ficons":117,"\u002Fit\u002Fguide\u002Finertia":118,"\u002Fen\u002Fguides\u002Finertia":119,"\u002Fit\u002Fguide\u002Finstallation":120,"\u002Fen\u002Fguides\u002Finstallation":121,"\u002Fit\u002Fguide\u002Fmigration":122,"\u002Fen\u002Fguides\u002Fmigration":123,"\u002Fit\u002Fguide\u002Fnuxt":124,"\u002Fen\u002Fguides\u002Fnuxt":125,"\u002Fit\u002Fguide\u002Foptions-and-items":126,"\u002Fen\u002Fguides\u002Foptions-and-items":127,"\u002Fit\u002Fguide\u002Fpassthrough":128,"\u002Fen\u002Fguides\u002Fpassthrough":129,"\u002Fit\u002Fguide\u002Fpreset-components":130,"\u002Fen\u002Fguides\u002Fpreset-components":131,"\u002Fit\u002Fguide\u002Fvalidated-forms":132,"\u002Fen\u002Fguides\u002Fvalidated-forms":133},"\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-calendar","\u002Fit\u002Fcomponenti\u002Fbb-calendar","\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-hover-card","\u002Fit\u002Fcomponenti\u002Fbb-hover-card","\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\u002Fadoption-checklist","\u002Fit\u002Fguide\u002Fadoption-checklist","\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\u002Fpassthrough","\u002Fit\u002Fguide\u002Fpassthrough","\u002Fen\u002Fguides\u002Fpreset-components","\u002Fit\u002Fguide\u002Fpreset-components","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",[135,150,162,186,198,242,275,311,332,353,365,371],{"label":136,"entries":137},"Getting started",[138,142,146],{"title":139,"path":140,"order":141},"Installation","\u002Fguides\u002Finstallation",1,{"title":143,"path":144,"order":145},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"title":147,"path":148,"order":149},"Adoption checklist","\u002Fguides\u002Fadoption-checklist",3,{"label":151,"entries":152},"Design system",[153,156,159],{"title":154,"path":155,"order":141},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":157,"path":158,"order":145},"Design language","\u002Fguides\u002Fdesign-language",{"title":160,"path":161,"order":149},"Passthrough","\u002Fguides\u002Fpassthrough",{"label":163,"entries":164},"Playbooks",[165,168,171,174,178,182],{"title":166,"path":167,"order":141},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":169,"path":170,"order":145},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":172,"path":173,"order":149},"Coherence","\u002Fguides\u002Fcoherence",{"title":175,"path":176,"order":177},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":179,"path":180,"order":181},"Icons","\u002Fguides\u002Ficons",5,{"title":183,"path":184,"order":185},"Preset components","\u002Fguides\u002Fpreset-components",6,{"label":187,"entries":188},"Ecosystem",[189,192,195],{"title":190,"path":191,"order":141},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":193,"path":194,"order":145},"Nuxt","\u002Fguides\u002Fnuxt",{"title":196,"path":197,"order":149},"AI agents","\u002Fguides\u002Fai-agents",{"label":199,"entries":200},"Inputs",[201,204,207,210,213,216,219,222,226,230,234,238],{"title":202,"path":203,"component":202,"order":141},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":205,"path":206,"component":205,"order":145},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":208,"path":209,"component":208,"order":149},"BbCalendar","\u002Fcomponents\u002Fbb-calendar",{"title":211,"path":212,"component":211,"order":149},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":214,"path":215,"component":214,"order":177},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":217,"path":218,"component":217,"order":181},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":220,"path":221,"component":220,"order":185},"BbForm","\u002Fcomponents\u002Fbb-form",{"title":223,"path":224,"component":223,"order":225},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":227,"path":228,"component":227,"order":229},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":231,"path":232,"component":231,"order":233},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":235,"path":236,"component":235,"order":237},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":239,"path":240,"component":239,"order":241},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":243,"entries":244},"Selection",[245,248,251,254,257,260,263,266,269,272],{"title":246,"path":247,"component":246,"order":141},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":249,"path":250,"component":249,"order":145},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":252,"path":253,"component":252,"order":149},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":255,"path":256,"component":255,"order":177},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":258,"path":259,"component":258,"order":181},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":261,"path":262,"component":261,"order":185},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":264,"path":265,"component":264,"order":225},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":267,"path":268,"component":267,"order":229},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":270,"path":271,"component":270,"order":233},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":273,"path":274,"component":273,"order":237},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":276,"entries":277},"Overlay",[278,281,284,287,290,293,296,299,302,305,308],{"title":279,"path":280,"component":279,"order":141},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":282,"path":283,"component":282,"order":145},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":285,"path":286,"component":285,"order":149},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":288,"path":289,"component":288,"order":177},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":291,"path":292,"component":291,"order":181},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":294,"path":295,"component":294,"order":185},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":297,"path":298,"component":297,"order":225},"BbHoverCard","\u002Fcomponents\u002Fbb-hover-card",{"title":300,"path":301,"component":300,"order":225},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":303,"path":304,"component":303,"order":229},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":306,"path":307,"component":306,"order":233},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":309,"path":310,"component":309,"order":237},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":312,"entries":313},"Navigation",[314,317,320,323,326,329],{"title":315,"path":316,"component":315,"order":141},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":318,"path":319,"component":318,"order":145},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":321,"path":322,"component":321,"order":149},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":324,"path":325,"component":324,"order":177},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":327,"path":328,"component":327,"order":181},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":330,"path":331,"component":330,"order":185},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":333,"entries":334},"Feedback",[335,338,341,344,347,350],{"title":336,"path":337,"component":336,"order":141},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":339,"path":340,"component":339,"order":145},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":342,"path":343,"component":342,"order":149},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":345,"path":346,"component":345,"order":177},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":348,"path":349,"component":348,"order":181},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":351,"path":352,"component":351,"order":185},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":354,"entries":355},"Data Display",[356,359,362],{"title":357,"path":358,"component":357,"order":141},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":360,"path":361,"component":360,"order":145},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":363,"path":364,"component":363,"order":149},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":366,"entries":367},"Layout & Utility",[368],{"title":369,"path":370,"component":369,"order":141},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":372,"entries":373},"Other",[374],{"title":375,"path":376,"component":375,"order":141},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",null,{"id":379,"title":211,"body":380,"component":211,"description":736,"extension":737,"group":199,"meta":738,"navigation":739,"order":149,"path":212,"sections":740,"seo":746,"stem":747,"__hash__":748},"docs_en\u002Fcomponents\u002Fbb-color-input.md",{"type":381,"value":382,"toc":729},"minimark",[383,417,423,431,451,455,458,476,482,485,488,532,552,558,561,564,599,624,640,646,649,652,662,668,700,704],[384,385,386,394],"when",{},[387,388,389,390,393],"p",{},"Use ",[391,392,211],"code",{}," when colour is an editable form value with a label, validation, and a readable hex representation.",[395,396,398],"template",{"v-slot:else":397},"",[399,400,401,410],"ul",{},[402,403,404,409],"li",{},[405,406,407],"a",{"href":30},[391,408,279],{},", when colour is assigned from a trigger you own",[402,411,412,416],{},[405,413,414],{"href":70},[391,415,261],{},", when users must choose from a closed palette",[387,418,419,420,422],{},"Also see: ",[405,421,175],{"href":132},".",[424,425,427],"h2",{"id":426},"default",[428,429,430],"span",{},"Edit a label colour",[387,432,433,434,437,438,442,443,446,447,450],{},"Bind a seeded ",[391,435,436],{},"string | null"," ",[405,439,441],{"href":440},"\u002Fen\u002Fcomponents\u002Fbb-color-input\u002Fapi#model-modelValue","model",". The field emits only a complete lowercase ",[391,444,445],{},"#RRGGBB"," value, or ",[391,448,449],{},"null"," when cleared.",[452,453],"demo",{"name":454},"BbColorInput\u002FLabelEditor",[387,456,457],{},"Partial text never reaches the model, and a partial hex left in the field reverts to the last valid colour on blur, so the field, the model and a native form post always agree. The field keeps the case you type until you leave it, then shows the lowercase value it emitted.",[387,459,460,461,464,465,468,469,475],{},"Convert ",[391,462,463],{},"rgb()"," or ",[391,466,467],{},"hsl()"," at your data boundary, and pass ",[405,470,472],{"href":471},"\u002Fen\u002Fcomponents\u002Fbb-color-input\u002Fapi#prop-name",[391,473,474],{},"name"," when a native form post must include the value.",[424,477,479],{"id":478},"picker",[428,480,481],{},"Picker options and limits",[387,483,484],{},"Add picker features together when the task needs them; they do not define separate field variants.",[452,486],{"name":487},"BbColorInput\u002FSwatches",[399,489,490,506,519],{},[402,491,492,498,499,464,502,505],{},[405,493,495],{"href":494},"\u002Fen\u002Fcomponents\u002Fbb-color-input\u002Fapi#prop-swatches",[391,496,497],{},"swatches"," takes ",[391,500,501],{},"true",[391,503,504],{},"string[][]","; each inner array is a column.",[402,507,508,514,515,518],{},[405,509,511],{"href":510},"\u002Fen\u002Fcomponents\u002Fbb-color-input\u002Fapi#prop-alpha",[391,512,513],{},"alpha"," changes both the picker and model to ",[391,516,517],{},"#RRGGBBAA",". Without it, an eight-digit input cannot round-trip.",[402,520,521,527,528,531],{},[405,522,524],{"href":523},"\u002Fen\u002Fcomponents\u002Fbb-color-input\u002Fapi#prop-eyeDropper",[391,525,526],{},"eye-dropper"," is progressive enhancement. Its button is absent in Safari and Firefox, with nothing logged (test ",[391,529,530],{},"'EyeDropper' in window"," if your UI must say so), and sampled colours are opaque.",[533,534,536],"migration",{"title":535},"picker → eye-dropper",[387,537,538,540,541,543,544,547,548,551],{},[391,539,478],{}," became ",[391,542,526],{},". The old attribute falls through to ",[391,545,546],{},"$attrs"," and has no effect; a development build warns about the rename, and ",[391,549,550],{},"npx bitboss-ui check --fix"," rewrites it.",[424,553,555],{"id":554},"validation",[428,556,557],{},"Validation and locked values",[387,559,560],{},"Validate presence and business rules, not hex syntax: the mask already owns the format. Save the theme with no brand colour to see the rule.",[452,562],{"name":563},"BbColorInput\u002FFieldChrome",[387,565,566,567,571,572,578,579,585,586,592,593,422],{},"Inside a ",[405,568,569],{"href":46},[391,570,220],{},", ",[405,573,575],{"href":574},"\u002Fen\u002Fcomponents\u002Fbb-color-input\u002Fapi#prop-rules",[391,576,577],{},"rules=\"required\""," flags an empty field when you leave it or submit; outside a form, pass ",[405,580,582],{"href":581},"\u002Fen\u002Fcomponents\u002Fbb-color-input\u002Fapi#prop-required",[391,583,584],{},"required"," for the asterisk and ",[405,587,589],{"href":588},"\u002Fen\u002Fcomponents\u002Fbb-color-input\u002Fapi#prop-errors",[391,590,591],{},"errors"," yourself. A colour that only drives a preview, and is not saved with the form, takes ",[405,594,596],{"href":595},"\u002Fen\u002Fcomponents\u002Fbb-color-input\u002Fapi#prop-formless",[391,597,598],{},"formless",[387,600,601,607,608,614,615,621,622,422],{},[405,602,604],{"href":603},"\u002Fen\u002Fcomponents\u002Fbb-color-input\u002Fapi#prop-readonly",[391,605,606],{},"readonly"," keeps an imported colour focusable and copyable; ",[405,609,611],{"href":610},"\u002Fen\u002Fcomponents\u002Fbb-color-input\u002Fapi#prop-disabled",[391,612,613],{},"disabled"," removes it from the tab order. Both block the picker. ",[405,616,618],{"href":617},"\u002Fen\u002Fcomponents\u002Fbb-color-input\u002Fapi#prop-clearable",[391,619,620],{},"clearable"," emits ",[391,623,449],{},[387,625,626,632,633,637,638,422],{},[405,627,629],{"href":628},"\u002Fen\u002Fcomponents\u002Fbb-color-input\u002Fapi#prop-variant",[391,630,631],{},"variant=\"none\""," drops every colour, focus ring included, for a field you style yourself, like ",[405,634,636],{"href":635},"\u002Fen\u002Fcomponents\u002Fbb-text-input#layout","the flat search field"," on ",[391,639,235],{},[424,641,643],{"id":642},"persistence",[428,644,645],{},"Application-owned persistence",[387,647,648],{},"Picker drags emit on every frame. Repaint a preview directly from the model, but debounce remote persistence or save on blur or form submit.",[452,650],{"name":651},"BbColorInput\u002FBasic",[387,653,654,655,661],{},"Do not parse the forwarded ",[405,656,658],{"href":657},"\u002Fen\u002Fcomponents\u002Fbb-color-input\u002Fapi#event-input",[391,659,660],{},"input"," event: it can contain partial text. The model is the validated channel.",[424,663,665],{"id":664},"mobile",[428,666,667],{},"Settings rows and the mobile sheet",[387,669,670,671,677,678,684,685,688,689,695,696,699],{},"In a settings column, ",[405,672,674],{"href":673},"\u002Fen\u002Fcomponents\u002Fbb-color-input\u002Fapi#prop-compact",[391,675,676],{},"compact"," rows with the same ",[405,679,681],{"href":680},"\u002Fen\u002Fcomponents\u002Fbb-color-input\u002Fapi#prop-layout",[391,682,683],{},"layout"," ratio line the swatches up (",[405,686,687],{"href":635},"Variants, density and layout"," explains both). With ",[405,690,692],{"href":691},"\u002Fen\u002Fcomponents\u002Fbb-color-input\u002Fapi#prop-adaptive",[391,693,694],{},"adaptive"," (the default), only the picker becomes a bottom sheet below ",[391,697,698],{},"config.mobileMaxWidth","; the text field does not change.",[452,701],{"name":702,"caption":703},"BbColorInput\u002FLayout","Narrow the window below 768px and open a swatch to get the bottom sheet.",[387,705,706,707,710,711,713,714,717,718,724,725,728],{},"Below the same breakpoint the rows switch to ",[391,708,709],{},"vertical",": ",[391,712,683],{}," takes a per-breakpoint map, ",[391,715,716],{},"{ default: 'vertical', md: 'xx xxxxx' }",", with no screen-size code of yours. The surface is chosen when it opens. Use ",[405,719,721],{"href":720},"\u002Fen\u002Fcomponents\u002Fbb-color-input\u002Fapi#prop-offCanvasProps",[391,722,723],{},"off-canvas-props"," for sheet controls and ",[391,726,727],{},"pt:sheet"," for sheet-only geometry.",{"title":397,"searchDepth":149,"depth":149,"links":730},[731,732,733,734,735],{"id":426,"depth":145,"text":430},{"id":478,"depth":145,"text":481},{"id":554,"depth":145,"text":557},{"id":642,"depth":145,"text":645},{"id":664,"depth":145,"text":667},"Edit a hex colour in a form: a masked field with a built-in picker.","md",{},true,[741,742,743,744,745],{"id":426,"title":430},{"id":478,"title":481},{"id":554,"title":557},{"id":642,"title":645},{"id":664,"title":667},{"title":211,"description":736},"components\u002Fbb-color-input","icrc3RhV7zXT2cYdx1tN0DCOWvxUQyfnLItsOlVxakY",{"name":211,"slug":750,"group":199,"description":751,"entrypoint":752,"docs":753,"props":756,"models":904,"events":907,"slots":968,"exposed":995,"pt":996,"validated":377,"migration":1066},"bb-color-input","Captures color values through input controls.","bitboss-ui",{"contract":754,"source":755},"ai\u002FBbColorInput.md","ai\u002Fsource\u002FBbColorInput.md",[757,763,767,772,776,780,783,785,788,791,795,799,801,804,807,810,813,816,820,825,828,832,836,840,843,847,850,854,857,860,863,867,872,875,877,880,885,889,892,896,901],{"name":694,"type":758,"required":759,"default":760,"description":761,"note":762,"demo":664},"boolean | undefined",false,"`config.adaptive` (`true`)","When `true`, the color palette opens as a bottom off-canvas sheet on mobile viewports instead of a floating popover; on desktop it stays a popover. Mirrors 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.",{"name":513,"type":758,"required":759,"default":764,"description":765,"note":766,"demo":478},"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 colours can occur, and expect every emitted value to carry the two extra digits, `ff` included.",{"name":768,"type":769,"required":759,"default":377,"description":770,"note":771,"demo":554},"append:icon","string | undefined","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`.",{"name":773,"type":769,"required":759,"default":774,"description":775,"note":377,"demo":377},"autocomplete","\"off\"","Guides the browser as to the type of information expected in the field.",{"name":777,"type":778,"required":759,"default":377,"description":779,"note":377,"demo":377},"autofocus","Booleanish | undefined","Focuses the field when it mounts (a dialog already open included), unless the user is typing in another field.",{"name":620,"type":758,"required":759,"default":764,"description":781,"note":782,"demo":554},"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":676,"type":758,"required":759,"default":764,"description":784,"note":377,"demo":664},"Compact density: the field uses the `-compact` twins of `--bb-input-h`, `--bb-input-py` and `--bb-label-spacing-y`, so a `--bb-input-h` set on the component is ignored while it is on. Size a compact field with `--bb-input-h-compact` (and `--bb-input-py-compact`).",{"name":786,"type":769,"required":759,"default":377,"description":787,"note":377,"demo":554},"description","Text between the label and the input. Unlike the hint it is always visible; it joins the input's `aria-describedby` after any `errors` \u002F `warnings`, before the `hint`.",{"name":613,"type":758,"required":759,"default":764,"description":789,"note":790,"demo":554},"Disables the component.","Blocks the picker dot as well as the text. For an imported or derived colour prefer `readonly`, which keeps the value focusable and copyable.",{"name":591,"type":792,"required":759,"default":377,"description":793,"note":794,"demo":554},"string | string[] | undefined","Error messages under the field, a string or array, in an `aria-live=\"polite\"` region and first in the control's `aria-describedby`, so they are re-read when it regains focus.","The mask guarantees the shape, so \"that is not a colour\" is not an error this field can produce. What is left is presence (a `required` rule inside a `BbForm`) and rules that live on your server.",{"name":796,"type":758,"required":759,"default":764,"description":797,"note":798,"demo":478},"eyeDropper","Show an eyedropper button to sample any color on screen. Uses 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 absent elsewhere, with nothing in its place. Never the only path to a colour. Called `picker` in v2; a leftover `picker` falls into `$attrs` and does nothing.",{"name":598,"type":758,"required":759,"default":764,"description":800,"note":377,"demo":377},"Keep this control out of the enclosing `BbForm` entirely: not submitted, not dirty, not reset, not validated. For a control that is not form data (a filter, a \"show advanced\" switch).",{"name":802,"type":758,"required":759,"default":764,"description":803,"note":377,"demo":377},"hasErrors","Define if the component should be in an error state. It usually attaches a CSS class for styling purposes.",{"name":805,"type":758,"required":759,"default":764,"description":806,"note":377,"demo":377},"hasWarnings","Define if the component should be in a warning state. Same chrome as errors with `--bb-warn`; errors take priority.",{"name":808,"type":758,"required":759,"default":764,"description":809,"note":377,"demo":377},"hideLabel","Visually hides the label of the input while maintaining accessibility.",{"name":811,"type":769,"required":759,"default":377,"description":812,"note":377,"demo":554},"hint","Text box to be displayed near the input, usually to indicate instructions.",{"name":814,"type":769,"required":759,"default":377,"description":815,"note":377,"demo":377},"id","The `id` of the native control; the label's `for` and the description and message ids derive from it. Generated when omitted.",{"name":817,"type":818,"required":759,"default":377,"description":819,"note":377,"demo":377},"inputAlign","FieldCrossAlign | undefined","Vertical position of the control in a side-by-side row; not `inputPosition`, the horizontal one. Omitted, the control's first line meets the label's.",{"name":821,"type":822,"required":739,"default":377,"description":823,"note":824,"demo":426},"label","string","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.",{"name":826,"type":818,"required":759,"default":377,"description":827,"note":377,"demo":377},"labelAlign","Vertical position of the label block in a side-by-side row; not `labelPosition`, the horizontal one. Omitted, the label's first line meets the control's.",{"name":829,"type":830,"required":759,"default":377,"description":831,"note":377,"demo":377},"labelMode","\"outside\" | \"floating\" | \"inside\" | undefined","Label rendering mode: `outside` places the label above the input, `floating` overlays it on the field and shrinks it when a value is set, `inside` keeps it inside the field.",{"name":833,"type":834,"required":759,"default":377,"description":835,"note":377,"demo":377},"labelPosition","\"left\" | \"center\" | \"right\" | undefined","Sets the text alignment of the label.",{"name":683,"type":837,"required":759,"default":377,"description":838,"note":839,"demo":664},"Responsive\u003CFieldLayout> | undefined","How label and input sit together: `'vertical'`, `'horizontal'` (50\u002F50), `'auto'`, `'label-fill'`, `'input-fill'`, a ratio like `'xx xxxxx'`, or a per-breakpoint map (`{ default: 'vertical', md: 'xx xxxxx' }`).","Worth reaching for on a settings page, where a column of colours reads better as label-then-swatch rows. As everywhere in the family it applies only while the resolved label mode is `outside`.",{"name":841,"type":758,"required":759,"default":764,"description":842,"note":377,"demo":377},"loading","Sets the component in a loading state, usually triggering some visual styles.",{"name":844,"type":845,"required":759,"default":449,"description":846,"note":377,"demo":377},"modelValue","string | null | undefined","Used by v-model.",{"name":474,"type":769,"required":759,"default":377,"description":848,"note":849,"demo":426},"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 colour silently.",{"name":851,"type":852,"required":759,"default":377,"description":853,"note":377,"demo":377},"offCanvasProps","Partial\u003CBbOffCanvasProps> | undefined","Props for the phone sheet (the `BbOffCanvas` that `adaptive` renders on mobile), spread over its defaults. A `pt` inside it styles only the sheet (passthrough guide § Inside the sheet). The sheet hides its ✕; `{ hideClose: false }` brings it back.",{"name":855,"type":758,"required":759,"default":764,"description":856,"note":377,"demo":377},"persistentHint","Keeps the hint displayed.",{"name":858,"type":769,"required":759,"default":377,"description":859,"note":377,"demo":377},"placeholder","Text shown while the field is empty.",{"name":861,"type":769,"required":759,"default":377,"description":862,"note":377,"demo":377},"prepend:icon","Name of the icon to be added at the start of the input.",{"name":864,"type":865,"required":759,"default":377,"description":866,"note":377,"demo":377},"pt","(PtMap\u003CBbColorInputPtPart, FormControlPtState> & { 'swatch:selected'?: PtValue | undefined; } & { \"root:outline\"?: PtValue | undefined; \"icon:outline\"?: PtValue | undefined; \"root:secondary\"?: PtValue | undefined; \"icon:secondary\"?: PtValue | undefined; \"spinner:outline\"?: PtValue | undefined; \"spinner:secondary\"?: PtValue | undefined; \"clear:outline\"?: PtValue | undefined; \"clear:secondary\"?: PtValue | undefined; \"root:ghost\"?: PtValue | undefined; \"icon:ghost\"?: PtValue | undefined; \"spinner:ghost\"?: PtValue | undefined; \"clear:ghost\"?: PtValue | undefined; \"label:outline\"?: PtValue | undefined; \"label:secondary\"?: PtValue | undefined; \"label:ghost\"?: PtValue | undefined; \"description:outline\"?: PtValue | undefined; \"description:secondary\"?: PtValue | undefined; \"description:ghost\"?: PtValue | undefined; \"message:outline\"?: PtValue | undefined; \"message:secondary\"?: PtValue | undefined; \"message:ghost\"?: PtValue | undefined; \"hint:outline\"?: PtValue | undefined; \"hint:secondary\"?: PtValue | undefined; \"hint:ghost\"?: PtValue | undefined; \"input:outline\"?: PtValue | undefined; \"input:secondary\"?: PtValue | undefined; \"input:ghost\"?: PtValue | undefined; \"box:outline\"?: PtValue | undefined; \"box:secondary\"?: PtValue | undefined; \"box:ghost\"?: PtValue | undefined; \"prefix:outline\"?: PtValue | undefined; \"prefix:secondary\"?: PtValue | undefined; \"prefix:ghost\"?: PtValue | undefined; \"suffix:outline\"?: PtValue | undefined; \"suffix:secondary\"?: PtValue | undefined; \"suffix:ghost\"?: PtValue | undefined; }) | undefined","Passthrough, object form: `{ box: '…', 'box:errors': '…' }` — the same keys as the `pt:*` attributes without the prefix. See the `pt:\u003Cpart>` row.",{"name":868,"type":869,"required":759,"default":377,"description":870,"note":377,"demo":871},"pt:\u003Cpart>","PtValue | undefined","Passthrough, attribute form: one attribute per part, `pt:\u003Cpart>`, and per part and state, `pt:\u003Cpart>:\u003Cstate>`. Parts: `box`, `clear`, `description`, `hint`, `icon`, `indicator`, `input`, `label`, `message`, `panel`, `prefix`, `root`, `sheet`, `spinner`, `suffix`, `swatch`. States: `disabled`, `errors`, `ghost`, `hasValue`, `loading`, `outline`, `readonly`, `secondary`, `selected`, `warnings`.","passthrough",{"name":606,"type":758,"required":759,"default":764,"description":873,"note":874,"demo":554},"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 colour that was imported rather than chosen.",{"name":584,"type":758,"required":759,"default":764,"description":876,"note":377,"demo":377},"Sets the input as required.",{"name":878,"type":758,"required":759,"default":764,"description":879,"note":377,"demo":377},"reverse","Reverses the layout. Applicable in every direction the order of the label and the input is swapped.",{"name":881,"type":882,"required":759,"default":377,"description":883,"note":884,"demo":554},"rules","RuleExpression\u003Cstring | null>","vee-validate rules for this field. Only inside a `BbForm`.","Read only inside a `BbForm`; outside one they do nothing. Spend rules on presence and on business rules: the mask makes a format rule unable to fail.",{"name":497,"type":886,"required":759,"default":377,"description":887,"note":888,"demo":478},"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":890,"type":769,"required":759,"default":377,"description":891,"note":377,"demo":377},"validationLabel","The field's name in validation messages (`{field}`): \"Email is not valid\". Defaults to the `label` (or `legend`), then \"This field\"; never the `name`. Set it when the label is hidden or reads badly in a sentence (icon-only, a question). `BbForm` only.",{"name":893,"type":894,"required":759,"default":377,"description":895,"note":377,"demo":377},"validationMode","ValidationMode | undefined","When the field validates: `aggressive` (each change), `balanced` (on leave, then live while in error), `lazy` (on leave), `submit-only`, `submit-live`. Unset: the `BbForm`'s `validation-mode`, then `formControls.validationMode` (`'balanced'`). `BbForm` only.",{"name":897,"type":898,"required":759,"default":899,"description":900,"note":377,"demo":377},"variant","InputVariantType | undefined","'outline'","The field box's look, with `BbButton`'s names and tokens. Colours only, so a form never reflows; `'ghost'` has no border in any state, `'none'` no look at all (you own hover, focus and the states). Register more with the plugin's `inputVariants`.",{"name":902,"type":792,"required":759,"default":377,"description":903,"note":377,"demo":377},"warnings","Warning messages under the field, a string or array: amber, in their own `aria-live` region and in the control's `aria-describedby` after the errors. Non-empty turns on the warning state; errors win when both are set.",[905],{"name":844,"type":845,"note":906,"demo":426},"Hex only, lowercase on emit, and it moves only when the typed text is a complete colour, or `null` when the field is emptied. Half-typed values never reach it, and on blur the field itself reverts to the last valid colour, so a native form post matches the model.",[908,912,916,920,924,927,930,934,937,940,944,947,950,953,957,960,963],{"name":909,"signature":910,"description":911,"note":377,"demo":377},"blur","(event: FocusEvent): void","Emitted when the native text input loses focus. Forwards the original DOM `FocusEvent`.",{"name":913,"signature":914,"description":915,"note":377,"demo":377},"change","(event: Event): void","Emitted when the native text input fires a change event. Forwards the original DOM `Event`.",{"name":917,"signature":918,"description":919,"note":377,"demo":377},"click","(event: MouseEvent): void","Emitted when the input area receives a click. Forwards the original DOM `MouseEvent`.",{"name":921,"signature":922,"description":923,"note":377,"demo":377},"compositionend","(event: CompositionEvent): void","An IME composition ended. Forwards the original DOM `CompositionEvent`.",{"name":925,"signature":922,"description":926,"note":377,"demo":377},"compositionstart","An IME composition started. Forwards the original DOM `CompositionEvent`.",{"name":928,"signature":910,"description":929,"note":377,"demo":377},"focus","Emitted when the native text input gains focus. Forwards the original DOM `FocusEvent`.",{"name":931,"signature":932,"description":933,"note":377,"demo":377},"hidden","(): void","Emitted once the palette has finished closing.",{"name":935,"signature":932,"description":936,"note":377,"demo":377},"hide","Emitted as soon as the palette starts to close.",{"name":660,"signature":914,"description":938,"note":939,"demo":426},"Emitted on native input events from the text field. Forwards the original DOM `Event`.","The raw DOM event, fired per keystroke on text that may not be a colour yet. Do not parse it: the model is the one that only ever holds a complete hex.",{"name":941,"signature":942,"description":943,"note":377,"demo":377},"keydown","(event: KeyboardEvent): void","Emitted for keyboard interaction on the input. Forwards the original DOM `KeyboardEvent`.",{"name":945,"signature":942,"description":946,"note":377,"demo":377},"keyup","Emitted when a key is released on the input. Forwards the original DOM `KeyboardEvent`.",{"name":948,"signature":918,"description":949,"note":377,"demo":377},"mousedown","Emitted when a pointing device button is pressed over the input. Forwards the original DOM `MouseEvent`.",{"name":951,"signature":918,"description":952,"note":377,"demo":377},"mouseup","Emitted when a pointing device button is released over the input. Forwards the original DOM `MouseEvent`.",{"name":954,"signature":955,"description":956,"note":377,"demo":377},"paste","(event: ClipboardEvent): void","Native clipboard paste. Forwards the original DOM `ClipboardEvent`.",{"name":958,"signature":932,"description":959,"note":377,"demo":377},"show","Emitted as soon as the palette (the popover, or the sheet on a phone) starts to open.",{"name":961,"signature":932,"description":962,"note":377,"demo":377},"shown","Emitted once the palette is open and its open transition has finished.",{"name":964,"signature":965,"description":966,"note":967,"demo":642},"update:modelValue","(value: string | null): void","Emitted when the value becomes a valid hex color via typing\u002Fmasking, when the field is cleared, or when the palette selects a color. Emits:\n- `#RRGGBB` (or `#RRGGBBAA` when `alpha` is enabled) for valid values\n- `null` when cleared","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.",[969,974,977,980,983,986,989,992],{"name":970,"type":971,"description":972,"note":973,"demo":554},"append","Record\u003Cstring, never>","Content after the colour indicator button, at the end of the inner container. It replaces the `suffix` wrapper, so with `append` any `suffix` content is dropped. 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":975,"type":971,"description":976,"note":377,"demo":377},"append:outer","Content rendered after the entire input control, outside the input chrome. This slot receives no scoped props.",{"name":786,"type":978,"description":979,"note":377,"demo":377},"BbColorInputDescriptionSlotProps","Replaces the description text. Provided alone (no `description` prop) it still renders the description region and wires it into `aria-describedby`.",{"name":821,"type":981,"description":982,"note":377,"demo":377},"BbColorInputLabelSlotProps","Replaces the default label text rendered above the color input.",{"name":984,"type":971,"description":985,"note":377,"demo":377},"prefix","Inline content rendered at the start of the input field area, before the typed text. This slot receives no scoped props.",{"name":987,"type":971,"description":988,"note":377,"demo":377},"prepend","Content rendered before the text input, at the start of the inner container. This slot receives no scoped props.",{"name":990,"type":971,"description":991,"note":377,"demo":377},"prepend:outer","Content rendered before the entire input control, outside the input chrome. This slot receives no scoped props.",{"name":993,"type":971,"description":994,"note":377,"demo":377},"suffix","Inline content at the end of the field, after the typed text, inside the default `append` area: an `append` slot replaces it. No scoped props.",[],{"parts":997,"states":1040},[998,1001,1003,1005,1008,1010,1013,1015,1018,1021,1023,1025,1028,1031,1034,1037],{"name":999,"description":1000},"root","The field's outer container: the label, the box and the lines under it.",{"name":821,"description":1002},"The label text above the box (the `label` prop).",{"name":786,"description":1004},"The muted line under the label (the `description` prop).",{"name":1006,"description":1007},"message","The errors \u002F warnings line under the box. A node of its own: it can show at the same time as `hint`.",{"name":811,"description":1009},"The helper line (the `hint` prop), shown on focus, or always with `persistent-hint`.",{"name":1011,"description":1012},"box","The bordered box around the input — border, background and radius; the `variant` paints here.",{"name":660,"description":1014},"The native input element inside the box.",{"name":1016,"description":1017},"icon","The content icons, prepend and append — a broadcast. Chrome (the clear ✕, a chevron, the error \u002F warning glyph) is never in it.",{"name":1019,"description":1020},"spinner","The spinner inside the box while `loading`.",{"name":984,"description":1022},"The `#prefix` slot's wrapper, inside the box before the input.",{"name":993,"description":1024},"The `#suffix` slot's wrapper, inside the box after the input.",{"name":1026,"description":1027},"clear","The ✕ that empties this control (`clearable`) — one node, never a chip's own ✕.",{"name":1029,"description":1030},"indicator","The colour dot in the box that opens the palette.",{"name":1032,"description":1033},"panel","The palette surface — the popover's painted bubble on desktop, the sheet itself on a phone.",{"name":1035,"description":1036},"sheet","The bottom sheet the palette opens in on a phone — no node on desktop.",{"name":1038,"description":1039},"swatch","One palette swatch (after the `swatches` prop) — a broadcast resolved per swatch.",[1041,1043,1045,1048,1051,1053,1056,1058,1061,1064],{"name":613,"description":1042},"Component-wide: the control is `disabled`.",{"name":591,"description":1044},"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":1046,"description":1047},"ghost","On the field's parts: `variant: 'ghost'`. Below the real states, like every variant.",{"name":1049,"description":1050},"hasValue","Component-wide: the control holds a value, by its own rule (`0` counts on `BbNumberInput`, `''` on `BbColorInput`).",{"name":841,"description":1052},"Component-wide: `loading` is on; the box shows its `spinner`.",{"name":1054,"description":1055},"outline","On the field's parts: `variant: 'outline'`. Merged after the part's base entry and before its states, so the real states still win.",{"name":606,"description":1057},"Component-wide: the control is `readonly` — shown, focusable, not editable.",{"name":1059,"description":1060},"secondary","On the field's parts: `variant: 'secondary'`. Below the real states, like every variant.",{"name":1062,"description":1063},"selected","Per node, on `swatch` only: the swatch that matches the value.",{"name":902,"description":1065},"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.",{"removed":1067,"renamed":1101},[1068,1075,1081,1085,1088,1091,1096],{"name":1069,"surface":1070,"replacedBy":975,"hint":377,"since":1071,"migration":1072,"silent":739,"fix":1073},"append-outer","slot","3.0.0-beta.41","ai\u002Fguides\u002Fmigration\u002Fv2-to-v3.md",{"kind":1074},"rename",{"name":1076,"surface":1077,"replacedBy":683,"hint":377,"since":1078,"migration":1079,"silent":739,"fix":1080},"direction","prop","3.0.0-beta.33","ai\u002Fguides\u002Fmigration\u002Fcomponents\u002Fbb-color-input.md",{"kind":1074},{"name":1082,"surface":1077,"replacedBy":805,"hint":377,"since":1083,"migration":1072,"silent":739,"fix":1084},"hasWarning","3.0.0-beta.26",{"kind":1074},{"name":478,"surface":1077,"replacedBy":796,"hint":377,"since":1086,"migration":1079,"silent":739,"fix":1087},"3.0.0-alpha.1",{"kind":1074},{"name":1089,"surface":1070,"replacedBy":990,"hint":377,"since":1071,"migration":1072,"silent":739,"fix":1090},"prepend-outer",{"kind":1074},{"name":1092,"surface":1077,"replacedBy":893,"hint":1093,"since":1071,"migration":1072,"silent":739,"fix":1094},"validateOn","an array of events became one mode (`aggressive` | `balanced` | `lazy` | `submit-only` | `submit-live`). The old defaults (`['blur']`, `['inactive']`, a toggle's `['update:modelValue', 'change', 'blur']`) are `balanced`, the new default: delete the prop. A text field on `['update:modelValue']` is `validation-mode=\"aggressive\"`. Set it once on `\u003CBbForm validation-mode>` instead of per field",{"kind":1095},"manual",{"name":1097,"surface":1077,"replacedBy":377,"hint":1098,"since":1071,"migration":1072,"silent":739,"fix":1099},"vid","a display name (v2: `vid=\"Email address\"`) is now `validation-label`; a field path (3.0 betas: `vid=\"address.city\"`) is now `name` (brackets for a native post: `address[city]`). `check --fix` picks by the value",{"kind":1100,"display":890,"key":474},"byValue",[1102,1104,1106,1108,1110,1112],{"from":1069,"to":975,"surface":1070,"since":1071,"migration":1072,"fix":1103},{"kind":1074},{"from":1076,"to":683,"surface":1077,"since":1078,"migration":1079,"fix":1105},{"kind":1074},{"from":1082,"to":805,"surface":1077,"since":1083,"migration":1072,"fix":1107},{"kind":1074},{"from":478,"to":796,"surface":1077,"since":1086,"migration":1079,"fix":1109},{"kind":1074},{"from":1089,"to":990,"surface":1070,"since":1071,"migration":1072,"fix":1111},{"kind":1074},{"from":1092,"to":893,"surface":1077,"since":1071,"migration":1072,"fix":1113},{"kind":1095},1793055138694]