[{"data":1,"prerenderedAt":739},["ShallowReactive",2],{"api-none":3,"docs-nav-en":4,"locale-alternates":232,"page-en-\u002Fcomponents\u002Fbb-color-palette":353,"pt-showcase-BbColorPalette":564},null,[5,16,25,46,58,100,133,166,187,208,220,226],{"label":6,"entries":7},"Getting started",[8,12],{"title":9,"path":10,"component":-1,"order":11},"Installation","\u002Fguides\u002Finstallation",1,{"title":13,"path":14,"component":-1,"order":15},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"label":17,"entries":18},"Design system",[19,22],{"title":20,"path":21,"component":-1,"order":11},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":23,"path":24,"component":-1,"order":15},"Design language","\u002Fguides\u002Fdesign-language",{"label":26,"entries":27},"Playbooks",[28,31,34,38,42],{"title":29,"path":30,"component":-1,"order":11},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":32,"path":33,"component":-1,"order":15},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":35,"path":36,"component":-1,"order":37},"Coherence","\u002Fguides\u002Fcoherence",3,{"title":39,"path":40,"component":-1,"order":41},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":43,"path":44,"component":-1,"order":45},"Icons","\u002Fguides\u002Ficons",5,{"label":47,"entries":48},"Ecosystem",[49,52,55],{"title":50,"path":51,"component":-1,"order":11},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":53,"path":54,"component":-1,"order":15},"Nuxt","\u002Fguides\u002Fnuxt",{"title":56,"path":57,"component":-1,"order":37},"AI agents","\u002Fguides\u002Fai-agents",{"label":59,"entries":60},"Inputs",[61,64,67,70,73,76,80,84,88,92,96],{"title":62,"path":63,"component":62,"order":11},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":65,"path":66,"component":65,"order":15},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":68,"path":69,"component":68,"order":37},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":71,"path":72,"component":71,"order":41},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":74,"path":75,"component":74,"order":45},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":77,"path":78,"component":77,"order":79},"BbForm","\u002Fcomponents\u002Fbb-form",6,{"title":81,"path":82,"component":81,"order":83},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":85,"path":86,"component":85,"order":87},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":89,"path":90,"component":89,"order":91},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":93,"path":94,"component":93,"order":95},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":97,"path":98,"component":97,"order":99},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":101,"entries":102},"Selection",[103,106,109,112,115,118,121,124,127,130],{"title":104,"path":105,"component":104,"order":11},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":107,"path":108,"component":107,"order":15},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":110,"path":111,"component":110,"order":37},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":113,"path":114,"component":113,"order":41},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":116,"path":117,"component":116,"order":45},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":119,"path":120,"component":119,"order":79},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":122,"path":123,"component":122,"order":83},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":125,"path":126,"component":125,"order":87},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":128,"path":129,"component":128,"order":91},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":131,"path":132,"component":131,"order":95},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":134,"entries":135},"Overlay",[136,139,142,145,148,151,154,157,160,163],{"title":137,"path":138,"component":137,"order":11},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":140,"path":141,"component":140,"order":15},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":143,"path":144,"component":143,"order":37},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":146,"path":147,"component":146,"order":41},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":149,"path":150,"component":149,"order":45},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":152,"path":153,"component":152,"order":79},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":155,"path":156,"component":155,"order":83},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":158,"path":159,"component":158,"order":87},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":161,"path":162,"component":161,"order":91},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":164,"path":165,"component":164,"order":95},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":167,"entries":168},"Navigation",[169,172,175,178,181,184],{"title":170,"path":171,"component":170,"order":11},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":173,"path":174,"component":173,"order":15},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":176,"path":177,"component":176,"order":37},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":179,"path":180,"component":179,"order":41},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":182,"path":183,"component":182,"order":45},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":185,"path":186,"component":185,"order":79},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":188,"entries":189},"Feedback",[190,193,196,199,202,205],{"title":191,"path":192,"component":191,"order":11},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":194,"path":195,"component":194,"order":15},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":197,"path":198,"component":197,"order":37},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":200,"path":201,"component":200,"order":41},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":203,"path":204,"component":203,"order":45},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":206,"path":207,"component":206,"order":79},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":209,"entries":210},"Data Display",[211,214,217],{"title":212,"path":213,"component":212,"order":11},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":215,"path":216,"component":215,"order":15},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":218,"path":219,"component":218,"order":37},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":221,"entries":222},"Layout & Utility",[223],{"title":224,"path":225,"component":224,"order":11},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":227,"entries":228},"Other",[229],{"title":230,"path":231,"component":230,"order":11},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",{"\u002Fit\u002Fcomponenti\u002Fbb-accordion":233,"\u002Fen\u002Fcomponents\u002Fbb-accordion":234,"\u002Fit\u002Fcomponenti\u002Fbb-alert":235,"\u002Fen\u002Fcomponents\u002Fbb-alert":236,"\u002Fit\u002Fcomponenti\u002Fbb-asterisk":237,"\u002Fen\u002Fcomponents\u002Fbb-asterisk":238,"\u002Fit\u002Fcomponenti\u002Fbb-avatar":239,"\u002Fen\u002Fcomponents\u002Fbb-avatar":240,"\u002Fit\u002Fcomponenti\u002Fbb-badge":241,"\u002Fen\u002Fcomponents\u002Fbb-badge":242,"\u002Fit\u002Fcomponenti\u002Fbb-base-button":243,"\u002Fen\u002Fcomponents\u002Fbb-base-button":244,"\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs":245,"\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs":246,"\u002Fit\u002Fcomponenti\u002Fbb-button":247,"\u002Fen\u002Fcomponents\u002Fbb-button":248,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":249,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":250,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":251,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":252,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":253,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":254,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":255,"\u002Fen\u002Fcomponents\u002Fbb-color-input":256,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":257,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":258,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":259,"\u002Fen\u002Fcomponents\u002Fbb-confirm":260,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":261,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":262,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":263,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":264,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":265,"\u002Fen\u002Fcomponents\u002Fbb-dialog":266,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":267,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":268,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":269,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":270,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":271,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":272,"\u002Fit\u002Fcomponenti\u002Fbb-form":273,"\u002Fen\u002Fcomponents\u002Fbb-form":274,"\u002Fit\u002Fcomponenti\u002Fbb-icon":275,"\u002Fen\u002Fcomponents\u002Fbb-icon":276,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":277,"\u002Fen\u002Fcomponents\u002Fbb-indicator":278,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":279,"\u002Fen\u002Fcomponents\u002Fbb-number-input":280,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":281,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":282,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":283,"\u002Fen\u002Fcomponents\u002Fbb-pagination":284,"\u002Fit\u002Fcomponenti\u002Fbb-popover":285,"\u002Fen\u002Fcomponents\u002Fbb-popover":286,"\u002Fit\u002Fcomponenti\u002Fbb-progress":287,"\u002Fen\u002Fcomponents\u002Fbb-progress":288,"\u002Fit\u002Fcomponenti\u002Fbb-radio":289,"\u002Fen\u002Fcomponents\u002Fbb-radio":290,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":291,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":292,"\u002Fit\u002Fcomponenti\u002Fbb-rating":293,"\u002Fen\u002Fcomponents\u002Fbb-rating":294,"\u002Fit\u002Fcomponenti\u002Fbb-select":295,"\u002Fen\u002Fcomponents\u002Fbb-select":296,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":297,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":298,"\u002Fit\u002Fcomponenti\u002Fbb-slider":299,"\u002Fen\u002Fcomponents\u002Fbb-slider":300,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":301,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":302,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":303,"\u002Fen\u002Fcomponents\u002Fbb-spinner":304,"\u002Fit\u002Fcomponenti\u002Fbb-switch":305,"\u002Fen\u002Fcomponents\u002Fbb-switch":306,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":307,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":308,"\u002Fit\u002Fcomponenti\u002Fbb-table":309,"\u002Fen\u002Fcomponents\u002Fbb-table":310,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":311,"\u002Fen\u002Fcomponents\u002Fbb-tabs":312,"\u002Fit\u002Fcomponenti\u002Fbb-tag":313,"\u002Fen\u002Fcomponents\u002Fbb-tag":314,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":315,"\u002Fen\u002Fcomponents\u002Fbb-text-input":316,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":317,"\u002Fen\u002Fcomponents\u002Fbb-textarea":318,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":319,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":320,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":321,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":322,"\u002Fit\u002Fcomponenti\u002Fbb-toast":323,"\u002Fen\u002Fcomponents\u002Fbb-toast":324,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":325,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":326,"\u002Fit\u002Fcomponenti\u002Fbb-tree":327,"\u002Fen\u002Fcomponents\u002Fbb-tree":328,"\u002Fit\u002Fguide\u002Fai-agents":329,"\u002Fen\u002Fguides\u002Fai-agents":330,"\u002Fit\u002Fguide\u002Fcoherence":331,"\u002Fen\u002Fguides\u002Fcoherence":332,"\u002Fit\u002Fguide\u002Fdesign-language":333,"\u002Fen\u002Fguides\u002Fdesign-language":334,"\u002Fit\u002Fguide\u002Fdesign-tokens":335,"\u002Fen\u002Fguides\u002Fdesign-tokens":336,"\u002Fit\u002Fguide\u002Ffetching-data":337,"\u002Fen\u002Fguides\u002Ffetching-data":338,"\u002Fit\u002Fguide\u002Ficons":339,"\u002Fen\u002Fguides\u002Ficons":340,"\u002Fit\u002Fguide\u002Finertia":341,"\u002Fen\u002Fguides\u002Finertia":342,"\u002Fit\u002Fguide\u002Finstallation":343,"\u002Fen\u002Fguides\u002Finstallation":344,"\u002Fit\u002Fguide\u002Fmigration":345,"\u002Fen\u002Fguides\u002Fmigration":346,"\u002Fit\u002Fguide\u002Fnuxt":347,"\u002Fen\u002Fguides\u002Fnuxt":348,"\u002Fit\u002Fguide\u002Foptions-and-items":349,"\u002Fen\u002Fguides\u002Foptions-and-items":350,"\u002Fit\u002Fguide\u002Fvalidated-forms":351,"\u002Fen\u002Fguides\u002Fvalidated-forms":352},"\u002Fen\u002Fcomponents\u002Fbb-accordion","\u002Fit\u002Fcomponenti\u002Fbb-accordion","\u002Fen\u002Fcomponents\u002Fbb-alert","\u002Fit\u002Fcomponenti\u002Fbb-alert","\u002Fen\u002Fcomponents\u002Fbb-asterisk","\u002Fit\u002Fcomponenti\u002Fbb-asterisk","\u002Fen\u002Fcomponents\u002Fbb-avatar","\u002Fit\u002Fcomponenti\u002Fbb-avatar","\u002Fen\u002Fcomponents\u002Fbb-badge","\u002Fit\u002Fcomponenti\u002Fbb-badge","\u002Fen\u002Fcomponents\u002Fbb-base-button","\u002Fit\u002Fcomponenti\u002Fbb-base-button","\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs","\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs","\u002Fen\u002Fcomponents\u002Fbb-button","\u002Fit\u002Fcomponenti\u002Fbb-button","\u002Fen\u002Fcomponents\u002Fbb-checkbox","\u002Fit\u002Fcomponenti\u002Fbb-checkbox","\u002Fen\u002Fcomponents\u002Fbb-checkbox-group","\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group","\u002Fen\u002Fcomponents\u002Fbb-collapsible","\u002Fit\u002Fcomponenti\u002Fbb-collapsible","\u002Fen\u002Fcomponents\u002Fbb-color-input","\u002Fit\u002Fcomponenti\u002Fbb-color-input","\u002Fen\u002Fcomponents\u002Fbb-color-palette","\u002Fit\u002Fcomponenti\u002Fbb-color-palette","\u002Fen\u002Fcomponents\u002Fbb-confirm","\u002Fit\u002Fcomponenti\u002Fbb-confirm","\u002Fen\u002Fcomponents\u002Fbb-date-picker","\u002Fit\u002Fcomponenti\u002Fbb-date-picker","\u002Fen\u002Fcomponents\u002Fbb-date-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input","\u002Fen\u002Fcomponents\u002Fbb-dialog","\u002Fit\u002Fcomponenti\u002Fbb-dialog","\u002Fen\u002Fcomponents\u002Fbb-dropdown","\u002Fit\u002Fcomponenti\u002Fbb-dropdown","\u002Fen\u002Fcomponents\u002Fbb-dropdown-button","\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button","\u002Fen\u002Fcomponents\u002Fbb-dropzone","\u002Fit\u002Fcomponenti\u002Fbb-dropzone","\u002Fen\u002Fcomponents\u002Fbb-form","\u002Fit\u002Fcomponenti\u002Fbb-form","\u002Fen\u002Fcomponents\u002Fbb-icon","\u002Fit\u002Fcomponenti\u002Fbb-icon","\u002Fen\u002Fcomponents\u002Fbb-indicator","\u002Fit\u002Fcomponenti\u002Fbb-indicator","\u002Fen\u002Fcomponents\u002Fbb-number-input","\u002Fit\u002Fcomponenti\u002Fbb-number-input","\u002Fen\u002Fcomponents\u002Fbb-off-canvas","\u002Fit\u002Fcomponenti\u002Fbb-off-canvas","\u002Fen\u002Fcomponents\u002Fbb-pagination","\u002Fit\u002Fcomponenti\u002Fbb-pagination","\u002Fen\u002Fcomponents\u002Fbb-popover","\u002Fit\u002Fcomponenti\u002Fbb-popover","\u002Fen\u002Fcomponents\u002Fbb-progress","\u002Fit\u002Fcomponenti\u002Fbb-progress","\u002Fen\u002Fcomponents\u002Fbb-radio","\u002Fit\u002Fcomponenti\u002Fbb-radio","\u002Fen\u002Fcomponents\u002Fbb-radio-group","\u002Fit\u002Fcomponenti\u002Fbb-radio-group","\u002Fen\u002Fcomponents\u002Fbb-rating","\u002Fit\u002Fcomponenti\u002Fbb-rating","\u002Fen\u002Fcomponents\u002Fbb-select","\u002Fit\u002Fcomponenti\u002Fbb-select","\u002Fen\u002Fcomponents\u002Fbb-select-popover","\u002Fit\u002Fcomponenti\u002Fbb-select-popover","\u002Fen\u002Fcomponents\u002Fbb-slider","\u002Fit\u002Fcomponenti\u002Fbb-slider","\u002Fen\u002Fcomponents\u002Fbb-smooth-height","\u002Fit\u002Fcomponenti\u002Fbb-smooth-height","\u002Fen\u002Fcomponents\u002Fbb-spinner","\u002Fit\u002Fcomponenti\u002Fbb-spinner","\u002Fen\u002Fcomponents\u002Fbb-switch","\u002Fit\u002Fcomponenti\u002Fbb-switch","\u002Fen\u002Fcomponents\u002Fbb-switch-group","\u002Fit\u002Fcomponenti\u002Fbb-switch-group","\u002Fen\u002Fcomponents\u002Fbb-table","\u002Fit\u002Fcomponenti\u002Fbb-table","\u002Fen\u002Fcomponents\u002Fbb-tabs","\u002Fit\u002Fcomponenti\u002Fbb-tabs","\u002Fen\u002Fcomponents\u002Fbb-tag","\u002Fit\u002Fcomponenti\u002Fbb-tag","\u002Fen\u002Fcomponents\u002Fbb-text-input","\u002Fit\u002Fcomponenti\u002Fbb-text-input","\u002Fen\u002Fcomponents\u002Fbb-textarea","\u002Fit\u002Fcomponenti\u002Fbb-textarea","\u002Fen\u002Fcomponents\u002Fbb-time-picker","\u002Fit\u002Fcomponenti\u002Fbb-time-picker","\u002Fen\u002Fcomponents\u002Fbb-time-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input","\u002Fen\u002Fcomponents\u002Fbb-toast","\u002Fit\u002Fcomponenti\u002Fbb-toast","\u002Fen\u002Fcomponents\u002Fbb-tooltip","\u002Fit\u002Fcomponenti\u002Fbb-tooltip","\u002Fen\u002Fcomponents\u002Fbb-tree","\u002Fit\u002Fcomponenti\u002Fbb-tree","\u002Fen\u002Fguides\u002Fai-agents","\u002Fit\u002Fguide\u002Fai-agents","\u002Fen\u002Fguides\u002Fcoherence","\u002Fit\u002Fguide\u002Fcoherence","\u002Fen\u002Fguides\u002Fdesign-language","\u002Fit\u002Fguide\u002Fdesign-language","\u002Fen\u002Fguides\u002Fdesign-tokens","\u002Fit\u002Fguide\u002Fdesign-tokens","\u002Fen\u002Fguides\u002Ffetching-data","\u002Fit\u002Fguide\u002Ffetching-data","\u002Fen\u002Fguides\u002Ficons","\u002Fit\u002Fguide\u002Ficons","\u002Fen\u002Fguides\u002Finertia","\u002Fit\u002Fguide\u002Finertia","\u002Fen\u002Fguides\u002Finstallation","\u002Fit\u002Fguide\u002Finstallation","\u002Fen\u002Fguides\u002Fmigration","\u002Fit\u002Fguide\u002Fmigration","\u002Fen\u002Fguides\u002Fnuxt","\u002Fit\u002Fguide\u002Fnuxt","\u002Fen\u002Fguides\u002Foptions-and-items","\u002Fit\u002Fguide\u002Foptions-and-items","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",{"id":354,"title":137,"body":355,"component":137,"description":552,"extension":553,"group":134,"meta":554,"navigation":555,"order":11,"path":138,"sections":556,"seo":561,"stem":562,"__hash__":563},"docs_en\u002Fcomponents\u002Fbb-color-palette.md",{"type":356,"value":357,"toc":546},"minimark",[358,392,400,411,415,425,431,434,437,444,465,471,484,487,501,507,510,513,527],[359,360,361,369],"when",{},[362,363,364,365,368],"p",{},"Use ",[366,367,137],"code",{}," to assign a color from a trigger you own, such as a label dot or calendar category.",[370,371,373],"template",{"v-slot:else":372},"",[374,375,376,385],"ul",{},[377,378,379,384],"li",{},[380,381,382],"a",{"href":255},[366,383,68],{}," — users need a form field and editable hex text",[377,386,387,391],{},[380,388,389],{"href":285},[366,390,158],{}," — the overlay contains arbitrary content",[393,394,396],"h2",{"id":395},"default",[397,398,399],"span",{},"Assign and save label colors",[362,401,402,403,406,407,410],{},"Spread the activator slot's ",[366,404,405],{},"props"," onto the clickable element and give each instance a specific ",[366,408,409],{},"label",".",[412,413],"demo",{"name":414},"BbColorPalette\u002FLabelRows",[362,416,417,418,421,422,410],{},"The model starts as ",[366,419,420],{},"string | null",", but v3 emits only concrete colors. Dragging emits on every frame: repaint locally, debounce persistence, and provide your own action to clear back to ",[366,423,424],{},"null",[393,426,428],{"id":427},"constraints",[397,429,430],{},"Color constraints",[362,432,433],{},"Treat swatches, alpha, and the eyedropper as constraints on one picker, not visual variants.",[412,435],{"name":436},"BbColorPalette\u002FPaletteBody",[362,438,439,440,443],{},"Each custom swatch array is a column. Enable ",[366,441,442],{},"alpha"," wherever eight-digit values can arrive. The eyedropper button exists only where the native API does; keep the gradient or swatches as the universal path.",[445,446,448],"migration",{"title":447},"picker → eye-dropper",[362,449,450,453,454,457,458,461,462,410],{},[366,451,452],{},"picker"," became ",[366,455,456],{},"eye-dropper","; the old attribute silently does nothing. The activator slot value was renamed from ",[366,459,460],{},"color"," to ",[366,463,464],{},"value",[393,466,468],{"id":467},"state",[397,469,470],{},"Trigger and open state",[362,472,473,474,477,478,480,481,410],{},"The palette owns its open state. Observe ",[366,475,476],{},"open"," from the activator slot; there is no ",[366,479,476],{}," prop or ",[366,482,483],{},"v-model:open",[412,485],{"name":486},"BbColorPalette\u002FStates",[362,488,489,492,493,496,497,500],{},[366,490,491],{},"readonly"," keeps the trigger focusable without opening the palette. ",[366,494,495],{},"disabled"," removes interaction. In v3, a leftover ",[366,498,499],{},"@update:open"," listener never fires and does not warn.",[393,502,504],{"id":503},"positioning",[397,505,506],{},"Placement and mobile behavior",[362,508,509],{},"Anchor the popover to a larger row when the click target is only a small color dot.",[412,511],{"name":512},"BbColorPalette\u002FAnchoring",[362,514,515,518,519,522,523,526],{},[366,516,517],{},"placement"," is a preference and flips on overflow unless ",[366,520,521],{},"disable-flip"," is set. On mobile, ",[366,524,525],{},"adaptive"," opens a draggable bottom sheet; picker drag surfaces do not move the sheet. Positioning props are ignored there, and the chosen surface is latched for the open cycle.",[445,528,530],{"title":529},"flip → disable-flip",[362,531,532,453,535,537,538,541,542,545],{},[366,533,534],{},":flip=\"false\"",[366,536,521],{}," with inverted polarity. ",[366,539,540],{},"show-arrow"," and ",[366,543,544],{},"arrow-padding"," were removed.",{"title":372,"searchDepth":37,"depth":37,"links":547},[548,549,550,551],{"id":395,"depth":15,"text":399},{"id":427,"depth":15,"text":430},{"id":467,"depth":15,"text":470},{"id":503,"depth":15,"text":506},"Assign a color from an application-owned trigger and keep persistence in application state.","md",{},true,[557,558,559,560],{"id":395,"title":399},{"id":427,"title":430},{"id":467,"title":470},{"id":503,"title":506},{"title":137,"description":552},"components\u002Fbb-color-palette","egtflIGR4etQ0SxEfTaqJy90RoFSLBYKKeTjr5xBGfw",{"name":137,"slug":565,"group":134,"description":566,"entrypoint":567,"docs":568,"props":571,"models":670,"events":673,"slots":690,"exposed":695,"pt":696,"validated":3,"migration":716},"bb-color-palette","Opens an anchored popover color palette for color picking interactions.","bitboss-ui",{"contract":569,"source":570},"ai\u002FBbColorPalette.md","ai\u002Fsource\u002FBbColorPalette.md",[572,578,583,587,591,596,599,603,607,611,615,618,622,627,631,635,639,642,644,646,648,650,652,654,656,658,661,666],{"name":573,"type":574,"required":575,"default":3,"description":576,"note":577,"demo":467},"activator","ElementOrComponentRef | undefined",false,"External activator element or component ref.\nWhen provided, the `activator` slot is not rendered and click listeners are\nattached programmatically to the referenced element — mirroring the\nBbDropdown 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.",{"name":525,"type":579,"required":575,"default":580,"description":581,"note":582,"demo":503},"boolean | undefined","`config.adaptive` (`true`)","When `true`, the palette opens as a bottom off-canvas sheet on mobile\nviewports instead of a floating popover; on desktop it stays a popover.\nMirrors the adaptive behaviour of `BbPopover`\u002F`BbDropdown`\u002F`BbDatePicker`.\n\nWhen unset, falls back to the global `config.adaptive`.","On a viewport below `config.mobileMaxWidth` the palette is a bottom sheet, which ignores every positioning prop, is draggable outside the picker surfaces; the canvas and sliders are excluded from sheet dragging, and is latched for the open cycle so a resize never swaps the surface mid-pick.",{"name":442,"type":579,"required":575,"default":584,"description":585,"note":586,"demo":427},"false","Enable the alpha channel. The picker shows an opacity slider and emits\n`#RRGGBBAA` hex8 values.","Enable it wherever eight-digit values can occur: an incoming `#RRGGBBAA` cannot round-trip without it, and a sampled eyedropper color always comes back opaque.",{"name":588,"type":574,"required":575,"default":3,"description":589,"note":590,"demo":503},"anchor","Element or component ref the popover positions itself relative to.\nDefaults to the activator element when omitted, allowing the popover to\nbe anchored to a larger container (e.g. the full input row) while a\nsmaller 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":592,"type":593,"required":575,"default":3,"description":594,"note":595,"demo":503},"boundary","ElementOrComponentRefOrSelector | undefined","Constrains the popover within a bounding element.\nAccepts 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":495,"type":579,"required":575,"default":584,"description":597,"note":598,"demo":467},"Disable all interaction (activator and palette).","Blocks the activator entirely. The slot scope mirrors it as `disabled`, so your own markup can grey out in step rather than guessing.",{"name":600,"type":579,"required":575,"default":584,"description":601,"note":602,"demo":503},"disableFlip","Disables the automatic flip to the opposite side when the popover\nwould 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":604,"type":579,"required":575,"default":584,"description":605,"note":606,"demo":3},"eager","Prevents rendering content before it's made visible.","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":608,"type":579,"required":575,"default":584,"description":609,"note":610,"demo":427},"eyeDropper","Show an eyedropper button inside the palette to sample any color on screen.\nUses the native EyeDropper API — hidden automatically on unsupported browsers.","The button renders only where the browser implements the native `EyeDropper` API — Chromium-based browsers, not Firefox or Safari — and is simply absent elsewhere, with nothing in its place 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":409,"type":612,"required":575,"default":3,"description":613,"note":614,"demo":395},"string | undefined","Accessible label applied to the activator element via `aria-label`.\nDefaults to the locale string for \"Open color picker\" when omitted.","On a bare color dot this is the only accessible name there is, and it also names the mobile sheet. Say which color is being changed — \"Color for the bug label\" — rather than accepting the generic fallback.",{"name":616,"type":420,"required":555,"default":3,"description":617,"note":3,"demo":3},"modelValue","v-model: the current color as a `#RRGGBB` hex string (or `#RRGGBBAA` when\n`alpha` is enabled), or `null` when empty.",{"name":619,"type":620,"required":575,"default":3,"description":621,"note":3,"demo":3},"offCanvasProps","Partial\u003CBbOffCanvasProps> | undefined","Props for the phone sheet. A `pt` inside it, object or colon keys, styles\nonly that sheet.\n\nExtra props forwarded to the `BbOffCanvas` sheet when `adaptive` is active on\nmobile (e.g. `title`, `size`, `persistent`). Spread over the defaults: the\nsheet is `draggable` (the colour square and sliders never drag it) and\nhides its ✕ (backdrop, Escape and drag close it); pass `{ hideClose: false }`\nto bring the ✕ back.\n\nA `pt` inside it styles ONLY the sheet, in `BbOffCanvas`'s part words\n(`root`, `header`, `title`, `description`, `content`, `footer`, `close`;\nstate `open`), object (`{ pt: { header: '…' } }`) or colon keys\n(`{ 'pt:header': '…' }`) alike. It merges after what this component\nforwards to its sheet, so it wins a conflict and drops nothing — see the\npassthrough guide § Inside the sheet.\n\nFor this component it is the only way to style the sheet's header,\ntitle and ✕: none of its own parts reach inside the sheet.",{"name":623,"type":624,"required":575,"default":625,"description":626,"note":3,"demo":3},"offset","number | undefined","4","Space the floating container will maintain from the activator.",{"name":628,"type":624,"required":575,"default":629,"description":630,"note":3,"demo":3},"padding","6","Minimum empty space to keep from the edge of the page",{"name":517,"type":632,"required":575,"default":3,"description":633,"note":634,"demo":503},"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":636,"type":637,"required":575,"default":3,"description":638,"note":3,"demo":3},"pt","(PtMap\u003CBbColorPalettePtPart, \"open\"> & { 'swatch:selected'?: PtValue | undefined; }) | undefined","Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:\u003Cpart>` row.",{"name":640,"type":641,"required":575,"default":3,"description":3,"note":3,"demo":3},"pt:panel","PtValue | undefined",{"name":643,"type":641,"required":575,"default":3,"description":3,"note":3,"demo":3},"pt:panel:open",{"name":645,"type":641,"required":575,"default":3,"description":3,"note":3,"demo":3},"pt:root",{"name":647,"type":641,"required":575,"default":3,"description":3,"note":3,"demo":3},"pt:root:open",{"name":649,"type":641,"required":575,"default":3,"description":3,"note":3,"demo":3},"pt:sheet",{"name":651,"type":641,"required":575,"default":3,"description":3,"note":3,"demo":3},"pt:sheet:open",{"name":653,"type":641,"required":575,"default":3,"description":3,"note":3,"demo":3},"pt:swatch",{"name":655,"type":641,"required":575,"default":3,"description":3,"note":3,"demo":3},"pt:swatch:open",{"name":657,"type":641,"required":575,"default":3,"description":3,"note":3,"demo":3},"pt:swatch:selected",{"name":491,"type":579,"required":575,"default":584,"description":659,"note":660,"demo":467},"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 color stays in the reading order.",{"name":662,"type":663,"required":575,"default":3,"description":664,"note":665,"demo":427},"swatches","boolean | string[][] | undefined","Controls swatches display in the picker:\n- `true`       — show the built-in Material-palette swatches\n- `string[][]` — show custom swatches (each inner array = a column of shades)\n- `false` \u002F omitted — no swatches section","Each inner array is a **column** of shades, so ramps are designed vertically. A row-wise `string[][]` type-checks and renders a grid nobody can scan.",{"name":667,"type":624,"required":575,"default":668,"description":669,"note":3,"demo":3},"transitionDuration","250","How long the transition has to last in milliseconds",[671],{"name":616,"type":420,"note":672,"demo":395},"Seed it explicitly — `modelValue` is required, and `null` is the correct \"no color yet\" value. `null` goes in but never comes out: since v3 the palette emits only concrete colors.",[674,677,680,683,686],{"name":675,"signature":676,"description":3,"note":3,"demo":3},"hidden","(event: \"hidden\"): void",{"name":678,"signature":679,"description":3,"note":3,"demo":3},"hide","(event: \"hide\"): void",{"name":681,"signature":682,"description":3,"note":3,"demo":3},"show","(event: \"show\"): void",{"name":684,"signature":685,"description":3,"note":3,"demo":3},"shown","(event: \"shown\"): void",{"name":687,"signature":688,"description":3,"note":689,"demo":395},"update:modelValue","(event: \"update:modelValue\", value: string): void","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.",[691],{"name":573,"type":692,"description":693,"note":694,"demo":467},"BbColorPaletteActivatorSlotProps","Custom activator element.\nApply `v-bind=\"props\"` to the element you want to use as the trigger —\nthis wires up the ref callback that lets BbColorPalette track the element.","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":697,"states":710},[698,701,704,707],{"name":699,"description":700},"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":702,"description":703},"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":705,"description":706},"sheet","The bottom sheet on a phone only (the `BbOffCanvas` root). Applied after `panel`, so it wins a conflict there.",{"name":708,"description":709},"swatch","One swatch (after the `swatches` prop) — a broadcast resolved per swatch.",[711,713],{"name":476,"description":712},"Component-wide: the palette is showing.",{"name":714,"description":715},"selected","Per node, on `swatch`: the swatch that matches the value.",{"removed":717,"renamed":734},[718,724,728,731],{"name":719,"replacedBy":3,"since":720,"migration":721,"silent":555,"fix":722},"arrowPadding","3.0.0-unreleased","ai\u002Fguides\u002Fmigration\u002Fcomponents\u002Fbb-color-palette.md",{"kind":723},"remove",{"name":725,"replacedBy":600,"since":720,"migration":721,"silent":555,"fix":726},"flip",{"kind":727},"invert",{"name":452,"replacedBy":608,"since":720,"migration":721,"silent":555,"fix":729},{"kind":730},"rename",{"name":732,"replacedBy":3,"since":720,"migration":721,"silent":555,"fix":733},"showArrow",{"kind":723},[735,737],{"from":725,"to":600,"since":720,"migration":721,"fix":736},{"kind":727},{"from":452,"to":608,"since":720,"migration":721,"fix":738},{"kind":730},1790005160729]