[{"data":1,"prerenderedAt":876},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":134,"api-none":377,"page-en-\u002Fcomponents\u002Fbb-color-palette":378,"pt-showcase-BbColorPalette":700},{"\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":279,"body":380,"component":279,"description":688,"extension":689,"group":276,"meta":690,"navigation":691,"order":141,"path":280,"sections":692,"seo":697,"stem":698,"__hash__":699},"docs_en\u002Fcomponents\u002Fbb-color-palette.md",{"type":381,"value":382,"toc":682},"minimark",[383,417,425,444,448,469,486,492,510,513,522,546,552,568,571,605,625,631,638,641,664],[384,385,386,394],"when",{},[387,388,389,390,393],"p",{},"Use ",[391,392,279],"code",{}," to assign a colour from a trigger you own, such as a label dot or calendar category.",[395,396,398],"template",{"v-slot:else":397},"",[399,400,401,410],"ul",{},[402,403,404,409],"li",{},[405,406,407],"a",{"href":28},[391,408,211],{}," — the colour is a form field, with hex text people can type",[402,411,412,416],{},[405,413,414],{"href":60},[391,415,303],{}," — the overlay contains arbitrary content",[418,419,421],"h2",{"id":420},"default",[422,423,424],"span",{},"Assign and save label colours",[387,426,427,428,432,433,436,437,443],{},"Spread the ",[405,429,431],{"href":430},"\u002Fen\u002Fcomponents\u002Fbb-color-palette\u002Fapi#slot-activator","activator slot","'s ",[391,434,435],{},"props"," onto the clickable element and give each instance a specific ",[405,438,440],{"href":439},"\u002Fen\u002Fcomponents\u002Fbb-color-palette\u002Fapi#prop-label",[391,441,442],{},"label",".",[445,446],"demo",{"name":447},"BbColorPalette\u002FLabelRows",[387,449,450,451,455,456,459,460,463,464,468],{},"The ",[405,452,454],{"href":453},"\u002Fen\u002Fcomponents\u002Fbb-color-palette\u002Fapi#model-modelValue","model"," starts as ",[391,457,458],{},"string | null",", but the palette emits only concrete colours. Dragging emits on every frame: repaint locally, debounce persistence, and provide your own action to clear back to ",[391,461,462],{},"null",". The palette never joins a ",[405,465,466],{"href":46},[391,467,220],{},", so save the value yourself.",[387,470,471,472,475,476,479,480,443],{},"For a dot in a table cell, ",[391,473,474],{},"v-bb-color=\"{ modelValue, 'onUpdate:modelValue': save, label }\""," wires the same palette with no wrapper component; the plugin registers the directive (see ",[405,477,139],{"href":478},"\u002Fen\u002Fguides\u002Finstallation#runtime","). For an element you already hold a ref to, pass it to ",[405,481,483],{"href":482},"\u002Fen\u002Fcomponents\u002Fbb-color-palette\u002Fapi#prop-activator",[391,484,485],{},"activator",[418,487,489],{"id":488},"constraints",[422,490,491],{},"Presets, transparency and the eyedropper",[387,493,494,495,501,502,505,506,509],{},"Offer your brand colours as ",[405,496,498],{"href":497},"\u002Fen\u002Fcomponents\u002Fbb-color-palette\u002Fapi#prop-swatches",[391,499,500],{},"swatches",", turn on ",[391,503,504],{},"alpha"," when the value can carry opacity, and add ",[391,507,508],{},"eye-dropper"," to sample a colour from the screen.",[445,511],{"name":512},"BbColorPalette\u002FPaletteBody",[387,514,515,516,521],{},"Each custom swatch array is a column. Enable ",[405,517,519],{"href":518},"\u002Fen\u002Fcomponents\u002Fbb-color-palette\u002Fapi#prop-alpha",[391,520,504],{}," wherever eight-digit values can arrive. The eyedropper button exists only where the browser has the native API, and a sampled colour is always opaque; keep the gradient or swatches as the universal path.",[523,524,526],"migration",{"title":525},"picker → eye-dropper",[387,527,528,531,532,534,535,538,539,542,543,443],{},[391,529,530],{},"picker"," became ",[391,533,508],{},"; the old attribute has no effect, a development build warns about the rename, and ",[391,536,537],{},"npx bitboss-ui check --fix"," rewrites it. The activator slot value was renamed from ",[391,540,541],{},"color"," to ",[391,544,545],{},"value",[418,547,549],{"id":548},"state",[422,550,551],{},"Trigger and open state",[387,553,554,555,558,559,561,562,564,565,443],{},"The palette owns its open state. Observe ",[391,556,557],{},"open"," from the ",[405,560,431],{"href":430},"; there is no ",[391,563,557],{}," prop or ",[391,566,567],{},"v-model:open",[445,569],{"name":570},"BbColorPalette\u002FStates",[387,572,573,579,580,586,587,589,590,592,593,596,597,599,600,604],{},[405,574,576],{"href":575},"\u002Fen\u002Fcomponents\u002Fbb-color-palette\u002Fapi#prop-readonly",[391,577,578],{},"readonly"," keeps the trigger focusable without opening the palette. ",[405,581,583],{"href":582},"\u002Fen\u002Fcomponents\u002Fbb-color-palette\u002Fapi#prop-disabled",[391,584,585],{},"disabled"," stops it opening, and the activator ",[391,588,435],{}," carry ",[391,591,585],{}," and ",[391,594,595],{},"aria-disabled"," onto your button, so you only style the inert state, from the slot's ",[391,598,585],{},". Screen readers name the trigger by ",[405,601,602],{"href":439},[391,603,442],{}," followed by the text inside it, so a hex code you show stays in the name. Escape closes the palette before any dialog around it.",[523,606,608],{"title":607},"update:open removed",[387,609,610,611,614,615,592,618,621,622,624],{},"The event is gone, so a leftover ",[391,612,613],{},"@update:open"," listener never fires. Listen to ",[391,616,617],{},"show",[391,619,620],{},"hide",", or read ",[391,623,557],{}," from the activator slot.",[418,626,628],{"id":627},"positioning",[422,629,630],{},"Placement and mobile behaviour",[387,632,633,637],{},[405,634,636],{"href":635},"\u002Fen\u002Fcomponents\u002Fbb-color-palette\u002Fapi#prop-anchor","Anchor"," the popover to a larger row when the click target is only a small colour dot.",[445,639],{"name":640},"BbColorPalette\u002FAnchoring",[387,642,643,649,650,656,657,663],{},[405,644,646],{"href":645},"\u002Fen\u002Fcomponents\u002Fbb-color-palette\u002Fapi#prop-placement",[391,647,648],{},"placement"," is a preference and flips on overflow unless ",[405,651,653],{"href":652},"\u002Fen\u002Fcomponents\u002Fbb-color-palette\u002Fapi#prop-disableFlip",[391,654,655],{},"disable-flip"," is set. On mobile, ",[405,658,660],{"href":659},"\u002Fen\u002Fcomponents\u002Fbb-color-palette\u002Fapi#prop-adaptive",[391,661,662],{},"adaptive"," opens a draggable bottom sheet that ignores the positioning props. Dragging the colour square or a slider never drags the sheet.",[523,665,667],{"title":666},"flip → disable-flip",[387,668,669,531,672,674,675,592,678,681],{},[391,670,671],{},":flip=\"false\"",[391,673,655],{}," with inverted polarity. ",[391,676,677],{},"show-arrow",[391,679,680],{},"arrow-padding"," were removed.",{"title":397,"searchDepth":149,"depth":149,"links":683},[684,685,686,687],{"id":420,"depth":145,"text":424},{"id":488,"depth":145,"text":491},{"id":548,"depth":145,"text":551},{"id":627,"depth":145,"text":630},"Assign a colour from an application-owned trigger and keep persistence in application state.","md",{},true,[693,694,695,696],{"id":420,"title":424},{"id":488,"title":491},{"id":548,"title":551},{"id":627,"title":630},{"title":279,"description":688},"components\u002Fbb-color-palette","HgoiMPsCrEwLHLxoCFkKfwBtE1Z_ETJt455Cv9GaxUc",{"name":279,"slug":701,"group":276,"description":702,"entrypoint":703,"docs":704,"props":707,"models":790,"events":793,"slots":810,"exposed":815,"pt":816,"validated":377,"migration":836},"bb-color-palette","Opens an anchored popover color palette for color picking interactions.","bitboss-ui",{"contract":705,"source":706},"ai\u002FBbColorPalette.md","ai\u002Fsource\u002FBbColorPalette.md",[708,713,718,722,726,731,734,738,742,746,750,753,757,762,766,770,774,779,782,786],{"name":485,"type":709,"required":710,"default":377,"description":711,"note":712,"demo":377},"ElementOrComponentRef | undefined",false,"External activator element or component ref. When provided, the `activator` slot is not rendered and click listeners are attached programmatically to the referenced element — mirroring the BbDropdown activator API.","The escape hatch for a trigger you already hold: a component ref, a control from elsewhere. When set, the `activator` slot is not rendered, so you also give up the scope (`open`, `value`, `disabled`) it would have handed you. For a bare dot in a table cell, the `v-bb-color` directive does the same with no component at all.",{"name":662,"type":714,"required":710,"default":715,"description":716,"note":717,"demo":627},"boolean | undefined","`config.adaptive` (`true`)","When `true`, the 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 `BbPopover`\u002F`BbDropdown`\u002F`BbDatePicker`.\n\nWhen unset, falls back to the global `config.adaptive`.","Below `config.mobileMaxWidth` the palette opens as a bottom sheet. The sheet ignores the positioning props, drags anywhere except the colour square and sliders, and stays a sheet until it closes, even if the window is resized.",{"name":504,"type":714,"required":710,"default":719,"description":720,"note":721,"demo":488},"false","Enable the alpha channel. The picker shows an opacity slider and emits `#RRGGBBAA` hex8 values.","Enable it wherever eight-digit values can occur: an incoming `#RRGGBBAA` cannot round-trip without it, and a sampled eyedropper colour always comes back opaque.",{"name":723,"type":709,"required":710,"default":377,"description":724,"note":725,"demo":627},"anchor","Element or component ref the popover positions itself relative to. Defaults to the activator element when omitted, allowing the popover to be anchored to a larger container (e.g. the full input row) while a smaller element (e.g. a color dot) remains the click target.","The prop form of the slot scope's `anchorProps`, for an element you hold a ref to. Use either to let the popover line up with something larger than the click target: a whole settings row rather than the dot inside it.",{"name":727,"type":728,"required":710,"default":377,"description":729,"note":730,"demo":377},"boundary","ElementOrComponentRefOrSelector | undefined","Constrains the popover within a bounding element: it stays inside it alongside its trigger (sideways for a popover above or below); away from the trigger it may pass the edge, and it flips at the viewport only. Accepts an HTMLElement, a Vue component ref, or a CSS selector string.","Reach for it when the palette lives inside a panel that scrolls, so the popover is kept in the panel rather than in the viewport.",{"name":585,"type":714,"required":710,"default":719,"description":732,"note":733,"demo":548},"Disable all interaction (activator and palette).","Stops the palette opening. The activator `props` carry no `disabled` or `inert`, so bind the slot scope's `disabled` onto your own element to take it out of the tab order and grey it out.",{"name":735,"type":714,"required":710,"default":719,"description":736,"note":737,"demo":627},"disableFlip","Disables the automatic flip to the opposite side when the popover would overflow (flipping is on by default).","v2 spelled this `flip`, on by default. The polarity is inverted, so `:flip=\"false\"` becomes `disable-flip`, the one edit on this component a type-check catches, since `flip` no longer exists.",{"name":739,"type":714,"required":710,"default":719,"description":740,"note":741,"demo":377},"eager","Renders the palette panel at mount instead of on the first open (the phone sheet's too).","Off by default, so the palette body mounts lazily on first open. Turn it on only for measurement or SSR, not to make the popover feel faster.",{"name":743,"type":714,"required":710,"default":719,"description":744,"note":745,"demo":488},"eyeDropper","Show an eyedropper button inside the palette 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 and nothing logged. Keep the gradient and the swatches as the path everyone has. Called `picker` in v2; a leftover `picker` lands in `$attrs` and does nothing.",{"name":442,"type":747,"required":710,"default":377,"description":748,"note":749,"demo":420},"string | undefined","Accessible label. The activator is named by it followed by the activator's own text, through `aria-labelledby`. Defaults to the locale string for \"Open color picker\" when omitted.","The trigger is named by this text followed by whatever the trigger shows (a hex code, say), and the mobile sheet by the same pair. On a bare colour dot it is the whole name, so say which colour is being changed (\"Colour for the bug label\") rather than accepting the generic fallback.",{"name":751,"type":458,"required":691,"default":377,"description":752,"note":377,"demo":377},"modelValue","v-model: the current color as a `#RRGGBB` hex string (or `#RRGGBBAA` when `alpha` is enabled), or `null` when empty.",{"name":754,"type":755,"required":710,"default":377,"description":756,"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":758,"type":759,"required":710,"default":760,"description":761,"note":377,"demo":377},"offset","number | undefined","4","Space the floating container will maintain from the activator.",{"name":763,"type":759,"required":710,"default":764,"description":765,"note":377,"demo":377},"padding","6","Minimum empty space to keep from the edge of the page",{"name":648,"type":767,"required":710,"default":377,"description":768,"note":769,"demo":627},"Placement | undefined","Position of the overlay in respect to the related activator.","A preference, not a guarantee: the popover flips to the opposite side when it would overflow, unless `disable-flip` says otherwise. The mobile sheet ignores it entirely.",{"name":771,"type":772,"required":710,"default":377,"description":773,"note":377,"demo":377},"pt","(PtMap\u003CBbColorPalettePtPart, \"open\"> & { 'swatch:selected'?: PtValue | undefined; }) | undefined","Passthrough, object form: the same keys as the `pt:*` attributes without the prefix. See the `pt:\u003Cpart>` row.",{"name":775,"type":776,"required":710,"default":377,"description":777,"note":377,"demo":778},"pt:\u003Cpart>","PtValue | undefined","Passthrough, attribute form: one attribute per part, `pt:\u003Cpart>`, and per part and state, `pt:\u003Cpart>:\u003Cstate>`. Parts: `panel`, `root`, `sheet`, `swatch`. States: `open`, `selected`.","passthrough",{"name":578,"type":714,"required":710,"default":719,"description":780,"note":781,"demo":548},"Prevent opening the palette while keeping the activator visible.","Keeps the activator visible and focusable and never opens the palette. Prefer it to a disabled-looking custom style for a review state, so the colour stays in the reading order.",{"name":500,"type":783,"required":710,"default":377,"description":784,"note":785,"demo":488},"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.",{"name":787,"type":759,"required":710,"default":788,"description":789,"note":377,"demo":377},"transitionDuration","250","How long the transition has to last in milliseconds",[791],{"name":751,"type":458,"note":792,"demo":420},"Seed it explicitly: `modelValue` is required, and `null` is the correct \"no colour yet\" value. `null` goes in but never comes out: since v3 the palette emits only concrete colours.",[794,798,800,802,805],{"name":795,"signature":796,"description":797,"note":377,"demo":377},"hidden","(): void","Emitted once the palette has finished closing.",{"name":620,"signature":796,"description":799,"note":377,"demo":377},"Emitted as soon as the palette starts to close.",{"name":617,"signature":796,"description":801,"note":377,"demo":377},"Emitted as soon as the palette (the popover, or the sheet on a phone) starts to open.",{"name":803,"signature":796,"description":804,"note":377,"demo":377},"shown","Emitted once the palette is open and its open transition has finished.",{"name":806,"signature":807,"description":808,"note":809,"demo":420},"update:modelValue","(value: string): void","Emitted when a color is picked. Payload is a concrete `#RRGGBB` (or `#RRGGBBAA` when alpha is enabled) — the palette always emits a color, never `null`.","Drag-frequency, not a commit: it fires on every frame while a handle moves. Repaint from it freely, debounce anything that persists. In v3 the payload is always a concrete color, so a handler narrowing on `null` has a dead branch, and clearing a color is now the consumer's job.",[811],{"name":485,"type":812,"description":813,"note":814,"demo":548},"BbColorPaletteActivatorSlotProps","Custom activator element. Apply `v-bind=\"props\"` to the element you want to use as the trigger — this wires up the ref callback that lets BbColorPalette track the element.","Spread `props` on the trigger and the palette sets `aria-haspopup`, `aria-expanded` and `aria-labelledby` on it for you. The scope also carries `value` (paint the trigger), `open` (read-only, for a caret or a ring), `disabled` and `anchorProps`. `value` was called `color` in v2. There is no `open` prop and no `update:open` event to pair with it: observing this flag is the whole open-state API.",[],{"parts":817,"states":830},[818,821,824,827],{"name":819,"description":820},"root","The floating element — an invisible positioning wrapper; a `class` on the component lands here. No node on the phone sheet: style what you see with `panel`.",{"name":822,"description":823},"panel","The picker surface you see — the popover's painted bubble on desktop, the sheet itself on a phone — holding the canvas, the sliders and the swatches. The canvas and the sliders are not parts.",{"name":825,"description":826},"sheet","The bottom sheet on a phone only (the `BbOffCanvas` root). Applied after `panel`, so it wins a conflict there.",{"name":828,"description":829},"swatch","One swatch (after the `swatches` prop) — a broadcast resolved per swatch.",[831,833],{"name":557,"description":832},"Component-wide: the palette is showing.",{"name":834,"description":835},"selected","Per node, on `swatch`: the swatch that matches the value.",{"removed":837,"renamed":871},[838,845,849,852,857,860,863,866],{"name":839,"surface":840,"replacedBy":377,"hint":377,"since":841,"migration":842,"silent":691,"fix":843},"arrowPadding","prop","3.0.0-alpha.1","ai\u002Fguides\u002Fmigration\u002Fcomponents\u002Fbb-color-palette.md",{"kind":844},"remove",{"name":846,"surface":840,"replacedBy":735,"hint":377,"since":841,"migration":842,"silent":691,"fix":847},"flip",{"kind":848},"invert",{"name":530,"surface":840,"replacedBy":743,"hint":377,"since":841,"migration":842,"silent":691,"fix":850},{"kind":851},"rename",{"name":853,"surface":771,"replacedBy":377,"hint":854,"since":855,"migration":842,"silent":691,"fix":856},"pt:panel:selected","it never applied anything: `selected` is a state of `swatch` only (`pt:swatch:selected`)","3.0.0-beta.31",{"kind":844},{"name":858,"surface":771,"replacedBy":377,"hint":854,"since":855,"migration":842,"silent":691,"fix":859},"pt:root:selected",{"kind":844},{"name":861,"surface":771,"replacedBy":377,"hint":854,"since":855,"migration":842,"silent":691,"fix":862},"pt:sheet:selected",{"kind":844},{"name":864,"surface":840,"replacedBy":377,"hint":377,"since":841,"migration":842,"silent":691,"fix":865},"showArrow",{"kind":844},{"name":867,"surface":868,"replacedBy":377,"hint":377,"since":841,"migration":842,"silent":691,"fix":869},"update:open","event",{"kind":870},"manual",[872,874],{"from":846,"to":735,"surface":840,"since":841,"migration":842,"fix":873},{"kind":848},{"from":530,"to":743,"surface":840,"since":841,"migration":842,"fix":875},{"kind":851},1793055139217]