[{"data":1,"prerenderedAt":1059},["ShallowReactive",2],{"api-none":3,"docs-nav-en":4,"locale-alternates":247,"page-en-\u002Fcomponents\u002Fbb-accordion":378,"pt-showcase-BbAccordion":979},null,[5,20,32,56,68,112,145,181,202,223,235,241],{"label":6,"entries":7},"Getting started",[8,12,16],{"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,{"title":17,"path":18,"component":-1,"order":19},"Adoption checklist","\u002Fguides\u002Fadoption-checklist",3,{"label":21,"entries":22},"Design system",[23,26,29],{"title":24,"path":25,"component":-1,"order":11},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":27,"path":28,"component":-1,"order":15},"Design language","\u002Fguides\u002Fdesign-language",{"title":30,"path":31,"component":-1,"order":19},"Passthrough","\u002Fguides\u002Fpassthrough",{"label":33,"entries":34},"Playbooks",[35,38,41,44,48,52],{"title":36,"path":37,"component":-1,"order":11},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":39,"path":40,"component":-1,"order":15},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":42,"path":43,"component":-1,"order":19},"Coherence","\u002Fguides\u002Fcoherence",{"title":45,"path":46,"component":-1,"order":47},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":49,"path":50,"component":-1,"order":51},"Icons","\u002Fguides\u002Ficons",5,{"title":53,"path":54,"component":-1,"order":55},"Preset components","\u002Fguides\u002Fpreset-components",6,{"label":57,"entries":58},"Ecosystem",[59,62,65],{"title":60,"path":61,"component":-1,"order":11},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":63,"path":64,"component":-1,"order":15},"Nuxt","\u002Fguides\u002Fnuxt",{"title":66,"path":67,"component":-1,"order":19},"AI agents","\u002Fguides\u002Fai-agents",{"label":69,"entries":70},"Inputs",[71,74,77,80,83,86,89,92,96,100,104,108],{"title":72,"path":73,"component":72,"order":11},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":75,"path":76,"component":75,"order":15},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":78,"path":79,"component":78,"order":19},"BbCalendar","\u002Fcomponents\u002Fbb-calendar",{"title":81,"path":82,"component":81,"order":19},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":84,"path":85,"component":84,"order":47},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":87,"path":88,"component":87,"order":51},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":90,"path":91,"component":90,"order":55},"BbForm","\u002Fcomponents\u002Fbb-form",{"title":93,"path":94,"component":93,"order":95},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":97,"path":98,"component":97,"order":99},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":101,"path":102,"component":101,"order":103},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":105,"path":106,"component":105,"order":107},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":109,"path":110,"component":109,"order":111},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":113,"entries":114},"Selection",[115,118,121,124,127,130,133,136,139,142],{"title":116,"path":117,"component":116,"order":11},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":119,"path":120,"component":119,"order":15},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":122,"path":123,"component":122,"order":19},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":125,"path":126,"component":125,"order":47},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":128,"path":129,"component":128,"order":51},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":131,"path":132,"component":131,"order":55},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":134,"path":135,"component":134,"order":95},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":137,"path":138,"component":137,"order":99},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":140,"path":141,"component":140,"order":103},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":143,"path":144,"component":143,"order":107},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":146,"entries":147},"Overlay",[148,151,154,157,160,163,166,169,172,175,178],{"title":149,"path":150,"component":149,"order":11},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":152,"path":153,"component":152,"order":15},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":155,"path":156,"component":155,"order":19},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":158,"path":159,"component":158,"order":47},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":161,"path":162,"component":161,"order":51},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":164,"path":165,"component":164,"order":55},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":167,"path":168,"component":167,"order":95},"BbHoverCard","\u002Fcomponents\u002Fbb-hover-card",{"title":170,"path":171,"component":170,"order":95},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":173,"path":174,"component":173,"order":99},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":176,"path":177,"component":176,"order":103},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":179,"path":180,"component":179,"order":107},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":182,"entries":183},"Navigation",[184,187,190,193,196,199],{"title":185,"path":186,"component":185,"order":11},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":188,"path":189,"component":188,"order":15},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":191,"path":192,"component":191,"order":19},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":194,"path":195,"component":194,"order":47},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":197,"path":198,"component":197,"order":51},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":200,"path":201,"component":200,"order":55},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":203,"entries":204},"Feedback",[205,208,211,214,217,220],{"title":206,"path":207,"component":206,"order":11},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":209,"path":210,"component":209,"order":15},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":212,"path":213,"component":212,"order":19},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":215,"path":216,"component":215,"order":47},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":218,"path":219,"component":218,"order":51},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":221,"path":222,"component":221,"order":55},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":224,"entries":225},"Data Display",[226,229,232],{"title":227,"path":228,"component":227,"order":11},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":230,"path":231,"component":230,"order":15},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":233,"path":234,"component":233,"order":19},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":236,"entries":237},"Layout & Utility",[238],{"title":239,"path":240,"component":239,"order":11},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":242,"entries":243},"Other",[244],{"title":245,"path":246,"component":245,"order":11},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",{"\u002Fit\u002Fcomponenti\u002Fbb-accordion":248,"\u002Fen\u002Fcomponents\u002Fbb-accordion":249,"\u002Fit\u002Fcomponenti\u002Fbb-alert":250,"\u002Fen\u002Fcomponents\u002Fbb-alert":251,"\u002Fit\u002Fcomponenti\u002Fbb-asterisk":252,"\u002Fen\u002Fcomponents\u002Fbb-asterisk":253,"\u002Fit\u002Fcomponenti\u002Fbb-avatar":254,"\u002Fen\u002Fcomponents\u002Fbb-avatar":255,"\u002Fit\u002Fcomponenti\u002Fbb-badge":256,"\u002Fen\u002Fcomponents\u002Fbb-badge":257,"\u002Fit\u002Fcomponenti\u002Fbb-base-button":258,"\u002Fen\u002Fcomponents\u002Fbb-base-button":259,"\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs":260,"\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs":261,"\u002Fit\u002Fcomponenti\u002Fbb-button":262,"\u002Fen\u002Fcomponents\u002Fbb-button":263,"\u002Fit\u002Fcomponenti\u002Fbb-calendar":264,"\u002Fen\u002Fcomponents\u002Fbb-calendar":265,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":266,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":267,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":268,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":269,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":270,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":271,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":272,"\u002Fen\u002Fcomponents\u002Fbb-color-input":273,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":274,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":275,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":276,"\u002Fen\u002Fcomponents\u002Fbb-confirm":277,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":278,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":279,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":280,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":281,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":282,"\u002Fen\u002Fcomponents\u002Fbb-dialog":283,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":284,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":285,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":286,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":287,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":288,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":289,"\u002Fit\u002Fcomponenti\u002Fbb-form":290,"\u002Fen\u002Fcomponents\u002Fbb-form":291,"\u002Fit\u002Fcomponenti\u002Fbb-hover-card":292,"\u002Fen\u002Fcomponents\u002Fbb-hover-card":293,"\u002Fit\u002Fcomponenti\u002Fbb-icon":294,"\u002Fen\u002Fcomponents\u002Fbb-icon":295,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":296,"\u002Fen\u002Fcomponents\u002Fbb-indicator":297,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":298,"\u002Fen\u002Fcomponents\u002Fbb-number-input":299,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":300,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":301,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":302,"\u002Fen\u002Fcomponents\u002Fbb-pagination":303,"\u002Fit\u002Fcomponenti\u002Fbb-popover":304,"\u002Fen\u002Fcomponents\u002Fbb-popover":305,"\u002Fit\u002Fcomponenti\u002Fbb-progress":306,"\u002Fen\u002Fcomponents\u002Fbb-progress":307,"\u002Fit\u002Fcomponenti\u002Fbb-radio":308,"\u002Fen\u002Fcomponents\u002Fbb-radio":309,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":310,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":311,"\u002Fit\u002Fcomponenti\u002Fbb-rating":312,"\u002Fen\u002Fcomponents\u002Fbb-rating":313,"\u002Fit\u002Fcomponenti\u002Fbb-select":314,"\u002Fen\u002Fcomponents\u002Fbb-select":315,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":316,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":317,"\u002Fit\u002Fcomponenti\u002Fbb-slider":318,"\u002Fen\u002Fcomponents\u002Fbb-slider":319,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":320,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":321,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":322,"\u002Fen\u002Fcomponents\u002Fbb-spinner":323,"\u002Fit\u002Fcomponenti\u002Fbb-switch":324,"\u002Fen\u002Fcomponents\u002Fbb-switch":325,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":326,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":327,"\u002Fit\u002Fcomponenti\u002Fbb-table":328,"\u002Fen\u002Fcomponents\u002Fbb-table":329,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":330,"\u002Fen\u002Fcomponents\u002Fbb-tabs":331,"\u002Fit\u002Fcomponenti\u002Fbb-tag":332,"\u002Fen\u002Fcomponents\u002Fbb-tag":333,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":334,"\u002Fen\u002Fcomponents\u002Fbb-text-input":335,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":336,"\u002Fen\u002Fcomponents\u002Fbb-textarea":337,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":338,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":339,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":340,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":341,"\u002Fit\u002Fcomponenti\u002Fbb-toast":342,"\u002Fen\u002Fcomponents\u002Fbb-toast":343,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":344,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":345,"\u002Fit\u002Fcomponenti\u002Fbb-tree":346,"\u002Fen\u002Fcomponents\u002Fbb-tree":347,"\u002Fit\u002Fguide\u002Fadoption-checklist":348,"\u002Fen\u002Fguides\u002Fadoption-checklist":349,"\u002Fit\u002Fguide\u002Fai-agents":350,"\u002Fen\u002Fguides\u002Fai-agents":351,"\u002Fit\u002Fguide\u002Fcoherence":352,"\u002Fen\u002Fguides\u002Fcoherence":353,"\u002Fit\u002Fguide\u002Fdesign-language":354,"\u002Fen\u002Fguides\u002Fdesign-language":355,"\u002Fit\u002Fguide\u002Fdesign-tokens":356,"\u002Fen\u002Fguides\u002Fdesign-tokens":357,"\u002Fit\u002Fguide\u002Ffetching-data":358,"\u002Fen\u002Fguides\u002Ffetching-data":359,"\u002Fit\u002Fguide\u002Ficons":360,"\u002Fen\u002Fguides\u002Ficons":361,"\u002Fit\u002Fguide\u002Finertia":362,"\u002Fen\u002Fguides\u002Finertia":363,"\u002Fit\u002Fguide\u002Finstallation":364,"\u002Fen\u002Fguides\u002Finstallation":365,"\u002Fit\u002Fguide\u002Fmigration":366,"\u002Fen\u002Fguides\u002Fmigration":367,"\u002Fit\u002Fguide\u002Fnuxt":368,"\u002Fen\u002Fguides\u002Fnuxt":369,"\u002Fit\u002Fguide\u002Foptions-and-items":370,"\u002Fen\u002Fguides\u002Foptions-and-items":371,"\u002Fit\u002Fguide\u002Fpassthrough":372,"\u002Fen\u002Fguides\u002Fpassthrough":373,"\u002Fit\u002Fguide\u002Fpreset-components":374,"\u002Fen\u002Fguides\u002Fpreset-components":375,"\u002Fit\u002Fguide\u002Fvalidated-forms":376,"\u002Fen\u002Fguides\u002Fvalidated-forms":377},"\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",{"id":379,"title":185,"body":380,"component":185,"description":965,"extension":966,"group":182,"meta":967,"navigation":968,"order":11,"path":186,"sections":969,"seo":976,"stem":977,"__hash__":978},"docs_en\u002Fcomponents\u002Fbb-accordion.md",{"type":381,"value":382,"toc":957},"minimark",[383,424,432,438,442,469,484,494,500,507,510,525,528,553,638,641,646,649,652,663,666,672,690,693,698,704,714,756,762,765,768,784,791,806,820,826,846,859,899,908,953],[384,385,386,394],"when",{},[387,388,389,390,393],"p",{},"Reach for ",[391,392,185],"code",{}," when the trigger is a title sitting over the body: an FAQ\nentry, a settings section, a row in a list. You get the button and the\naccessibility for free.",[395,396,398],"template",{"v-slot:else":397},"",[399,400,401,410,417],"ul",{},[402,403,404,409],"li",{},[405,406,407],"a",{"href":270},[391,408,191],{},", if the trigger cannot be a\nheader: a switch in a settings row, a link inside a paragraph",[402,411,412,416],{},[405,413,414],{"href":320},[391,415,239],{},", if you hide nothing and\nonly want a height change to animate",[402,418,419,423],{},[405,420,421],{"href":330},[391,422,197],{},", if the sections are peer views of one\nsubject and only one stays visible",[425,426,428],"h2",{"id":427},"default",[429,430,431],"span",{},"Default",[387,433,434,435,437],{},"One ",[391,436,185],{}," is one panel, and one panel is one boolean.",[439,440],"demo",{"name":441},"BbAccordion\u002FBasic",[387,443,444,450,451,456,457,461,462,468],{},[405,445,447],{"href":446},"\u002Fen\u002Fcomponents\u002Fbb-accordion\u002Fapi#prop-title",[391,448,449],{},"title"," gives the header its look:\nthe text, a chevron that turns as the panel opens, padding, and a rule under the\npanel. The ",[405,452,454],{"href":453},"\u002Fen\u002Fcomponents\u002Fbb-accordion\u002Fapi#slot-title",[391,455,449],{}," slot replaces only\nthe text and keeps the rest, as ",[405,458,460],{"href":459},"#single-open","One panel at a time"," does with a\nprice beside each name. The ",[405,463,465],{"href":464},"\u002Fen\u002Fcomponents\u002Fbb-accordion\u002Fapi#slot-header",[391,466,467],{},"header","\nslot replaces the whole trigger, chevron included, for a header of your own.",[387,470,471,472,475,476,479,480,483],{},"Each of them lands inside a real ",[391,473,474],{},"\u003Cbutton>",", already carrying ",[391,477,478],{},"aria-expanded","\nand ",[391,481,482],{},"aria-controls",". The body is the region that button labels. You add none of\nit, and the keyboard comes with the button.",[387,485,486,487,489,490,493],{},"Never put a ",[391,488,474],{}," or an ",[391,491,492],{},"\u003Ca>"," inside the header. Actions belong in the body.",[425,495,497],{"id":496},"list",[429,498,499],{},"A list of panels",[387,501,502,503,506],{},"There is no ",[391,504,505],{},"BbAccordionGroup",". Render several panels, one boolean each.",[439,508],{"name":509},"BbAccordion\u002FFaq",[387,511,512,513,516,517,520,521,524],{},"The header spans the panel and is the only click target. Whatever you slot into\nit becomes click-transparent, so a badge, an icon or a ",[391,514,515],{},"\u003Cspan>"," never swallows\nthe toggle. A ",[391,518,519],{},":hover"," on those children never fires, though: hang it on the\nheader, for example ",[391,522,523],{},"pt:header=\"hover:underline\"",".",[387,526,527],{},"Panels nest with no extra wiring. Pad the nested body, or the hierarchy\ndisappears.",[387,529,530,531,537,538,541,542,545,546,549,550,524],{},"When the headers are section titles, such as an FAQ or a settings page, pass\n",[405,532,534],{"href":533},"\u002Fen\u002Fcomponents\u002Fbb-accordion\u002Fapi#prop-headingLevel",[391,535,536],{},"heading-level"," so a screen\nreader user can jump between them. The button then sits inside an ",[391,539,540],{},"\u003Ch1>"," to\n",[391,543,544],{},"\u003Ch6>",". Match the page outline: under an ",[391,547,548],{},"\u003Ch2>",", the panels take ",[391,551,552],{},"3",[554,555,559],"pre",{"className":556,"code":557,"language":558,"meta":397,"style":397},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003Ch2>Billing questions\u003C\u002Fh2>\n\u003CBbAccordion v-model=\"open\" :heading-level=\"3\" title=\"Can I change plans?\">\n    Yes, at any time.\n\u003C\u002FBbAccordion>\n","vue",[391,560,561,579,624,629],{"__ignoreMap":397},[429,562,564,568,571,574,576],{"class":563,"line":11},"line",[429,565,567],{"class":566},"suds8","\u003C",[429,569,425],{"class":570},"sne4z",[429,572,573],{"class":566},">Billing questions\u003C\u002F",[429,575,425],{"class":570},[429,577,578],{"class":566},">\n",[429,580,581,583,585,589,592,595,598,600,603,605,607,609,611,613,616,618,622],{"class":563,"line":15},[429,582,567],{"class":566},[429,584,185],{"class":570},[429,586,588],{"class":587},"s-5SL"," v-model",[429,590,591],{"class":566},"=",[429,593,594],{"class":566},"\"",[429,596,597],{"class":566},"open",[429,599,594],{"class":566},[429,601,602],{"class":566}," :",[429,604,536],{"class":587},[429,606,591],{"class":566},[429,608,594],{"class":566},[429,610,552],{"class":587},[429,612,594],{"class":566},[429,614,615],{"class":587}," title",[429,617,591],{"class":566},[429,619,621],{"class":620},"sT6z2","\"Can I change plans?\"",[429,623,578],{"class":566},[429,625,626],{"class":563,"line":19},[429,627,628],{"class":566},"    Yes, at any time.\n",[429,630,631,634,636],{"class":563,"line":47},[429,632,633],{"class":566},"\u003C\u002F",[429,635,185],{"class":570},[429,637,578],{"class":566},[387,639,640],{},"Leave it out inside a form, a card or a side panel, where the headers are\ncontrols and not titles.",[425,642,644],{"id":643},"single-open",[429,645,460],{},[387,647,648],{},"Track one active key and derive every panel from it.",[439,650],{"name":651},"BbAccordion\u002FSingleOpen",[387,653,654,655,658,659,662],{},"Clicking the open header emits ",[391,656,657],{},"false",". Set the key to ",[391,660,661],{},"null"," in that branch,\nor the open panel refuses to close.",[387,664,665],{},"Use a stable key rather than an index when the list can reorder or filter. And do\nnot write a wrapper that forces siblings closed.",[425,667,669],{"id":668},"slots",[429,670,671],{},"A close action in the body",[387,673,674,678,679,683,684,686,687,524],{},[405,675,676],{"href":464},[391,677,467],{}," and the\n",[405,680,682],{"href":681},"\u002Fen\u002Fcomponents\u002Fbb-accordion\u002Fapi#slot-default","body"," receive the same two things,\n",[391,685,597],{}," and ",[391,688,689],{},"toggle",[439,691],{"name":692},"BbAccordion\u002FBodyAction",[387,694,695,697],{},[391,696,597],{}," says whether the panel is open. Use it to rotate a chevron or swap the\nheader copy. Assigning to it does nothing.",[387,699,700,703],{},[391,701,702],{},"toggle()"," earns its place in the body, as a \"Show less\" at the end of a long\npanel. In the header it is redundant, since the button already toggles.",[387,705,706,707,713],{},"Listen to ",[405,708,710],{"href":709},"\u002Fen\u002Fcomponents\u002Fbb-accordion\u002Fapi#event-update:modelValue",[391,711,712],{},"update:modelValue","\nonly for side effects: analytics, a fetch on first\nopen. The open or close has already happened.",[715,716,718,739],"migration",{"title":717},"The slot scope says open, not value",[387,719,720,721,724,725,727,728,731,732,735,736,524],{},"In v2 both slots received ",[391,722,723],{},"{ value, toggle }",". The flag is now ",[391,726,597],{},", the word\nBbPopover, BbDropdown and the pickers use for the same thing. With ",[391,729,730],{},"vue-tsc","\nchecking templates the old name is a compile error; without it, ",[391,733,734],{},"value"," reads\n",[391,737,738],{},"undefined",[554,740,744],{"className":741,"code":742,"language":743,"meta":397,"style":397},"language-diff shiki shiki-themes github-light-high-contrast github-dark-high-contrast","- \u003Ctemplate #header=\"{ value }\">\n+ \u003Ctemplate #header=\"{ open }\">\n","diff",[391,745,746,751],{"__ignoreMap":397},[429,747,748],{"class":563,"line":11},[429,749,750],{},"- \u003Ctemplate #header=\"{ value }\">\n",[429,752,753],{"class":563,"line":15},[429,754,755],{},"+ \u003Ctemplate #header=\"{ open }\">\n",[425,757,759],{"id":758},"content",[429,760,761],{},"When the body renders",[387,763,764],{},"The body does not exist until the first open, and it stays mounted from then on.",[439,766],{"name":767},"BbAccordion\u002FEagerBody",[387,769,770,771,777,778,780,781,783],{},"Add ",[405,772,774],{"href":773},"\u002Fen\u002Fcomponents\u002Fbb-accordion\u002Fapi#prop-eager",[391,775,776],{},"eager"," when the content has to exist while the panel is shut. A field\njoins its ",[391,779,90],{}," only once it has rendered. Without ",[391,782,776],{}," the form submits\nas though the field were not there, and it starts blocking submission the first\ntime somebody opens the panel. The same goes for text a prerendered page has to\ncarry.",[387,785,786,787,790],{},"If a collapsed panel can hold an invalid field, open it from the form's\n",[391,788,789],{},"invalid"," event, as the demo does.",[387,792,793,794,686,797,800,801,524],{},"Closed content is ",[391,795,796],{},"aria-hidden",[391,798,799],{},"inert",", eager or not: out of the tab order,\nunclickable, invisible to screen readers. The mechanism is documented on\n",[405,802,804],{"href":803},"\u002Fen\u002Fcomponents\u002Fbb-collapsible#content",[391,805,191],{},[387,807,808,809,815,816,819],{},"Pass ",[405,810,812],{"href":811},"\u002Fen\u002Fcomponents\u002Fbb-accordion\u002Fapi#prop-id",[391,813,814],{},"id"," when the markup has to be predictable. The body takes your id and the\nheader takes ",[391,817,818],{},"\u003Cid>_header",", already cross-wired.",[425,821,823],{"id":822},"styling",[429,824,825],{},"Spacing and styling",[387,827,828,829,832,833,836,837,839,840,842,843,845],{},"Pad the body with ",[391,830,831],{},"pt:panel"," (or ",[391,834,835],{},".bb-accordion__panel",") or on what you slot\nin: the panel sits inside the\ncollapsing region, so its padding collapses with it. With ",[391,838,449],{}," the header\nand the body pad themselves; the ",[391,841,467],{}," slot gets a button with no padding of\nits own, so pad the ",[391,844,515],{}," you put in it.",[387,847,848,854,855,858],{},[405,849,851],{"href":850},"\u002Fen\u002Fcomponents\u002Fbb-accordion\u002Fapi#prop-transitionDuration",[391,852,853],{},"transition-duration","\n(milliseconds, 250 by default) drives the height and the\nfade together. Under ",[391,856,857],{},"prefers-reduced-motion: reduce"," both drop to near-instant\non their own.",[387,860,861,862,865,866,869,870,872,873,876,877,880,881,883,884,887,888,890,891,894,895,898],{},"Three classes are yours: ",[391,863,864],{},".bb-accordion"," on the panel, ",[391,867,868],{},".bb-accordion__header"," on\nthe button, ",[391,871,835],{}," on the body, plus ",[391,874,875],{},".bb-accordion__title"," and\n",[391,878,879],{},".bb-accordion__icon"," (the chevron) under ",[391,882,449],{},". The same parts take ",[391,885,886],{},"pt",", with\nan ",[391,889,597],{}," state: ",[391,892,893],{},"pt:header:open=\"font-semibold\"",", ",[391,896,897],{},"pt:icon=\"text-(--bb-primary)\"",". If you repaint the header, keep a\nvisible focus ring: the browser supplies none.",[387,900,901,902,904,905,907],{},"Under ",[391,903,449],{}," every panel draws its own rule underneath, so a list needs no\ndivider. With the ",[391,906,467],{}," slot the borders and dividers belong to the container\nthat renders the panels, which keeps a collapsed panel from leaving a stray line.",[715,909,911,932,947],{"title":910},".bb-accordion__content → .bb-accordion__panel",[387,912,913,914,917,918,921,922,925,926,928,929,931],{},"v2's ",[391,915,916],{},".bb-accordion__content"," sat on the collapsible's root. It now matches\nnothing; ",[391,919,920],{},"npx bitboss-ui check"," reports it in your stylesheets. The body is wrapped in a new ",[391,923,924],{},"div",",\n",[391,927,835],{}," (",[391,930,831],{},"), inside the collapsing region, so padding,\nborders and backgrounds on it collapse with the body instead of holding a closed\npanel open.",[554,933,935],{"className":741,"code":934,"language":743,"meta":397,"style":397},"- .faq .bb-accordion__content { color: var(--bb-text-muted); }\n+ .faq .bb-accordion__panel { color: var(--bb-text-muted); }\n",[391,936,937,942],{"__ignoreMap":397},[429,938,939],{"class":563,"line":11},[429,940,941],{},"- .faq .bb-accordion__content { color: var(--bb-text-muted); }\n",[429,943,944],{"class":563,"line":15},[429,945,946],{},"+ .faq .bb-accordion__panel { color: var(--bb-text-muted); }\n",[387,948,949,950,524],{},"Find every use with ",[391,951,952],{},"rg -n -- 'bb-accordion__content'",[954,955,956],"style",{},"html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":397,"searchDepth":19,"depth":19,"links":958},[959,960,961,962,963,964],{"id":427,"depth":15,"text":431},{"id":496,"depth":15,"text":499},{"id":643,"depth":15,"text":460},{"id":668,"depth":15,"text":671},{"id":758,"depth":15,"text":761},{"id":822,"depth":15,"text":825},"A panel that opens when you click its header, with the accessibility already wired.","md",{},true,[970,971,972,973,974,975],{"id":427,"title":431},{"id":496,"title":499},{"id":643,"title":460},{"id":668,"title":671},{"id":758,"title":761},{"id":822,"title":825},{"title":185,"description":965},"components\u002Fbb-accordion","xaF6eQCXKHy88LhkqNSTY8yyfAqm_4MuUq48LXnteeA",{"name":185,"slug":980,"group":182,"description":981,"entrypoint":982,"docs":983,"props":986,"models":1020,"events":1022,"slots":1027,"exposed":1037,"pt":1038,"validated":3,"migration":1056},"bb-accordion","Expands and collapses a content panel.","bitboss-ui",{"contract":984,"source":985},"ai\u002FBbAccordion.md","ai\u002Fsource\u002FBbAccordion.md",[987,992,996,1000,1004,1007,1012,1014],{"name":776,"type":988,"required":989,"default":657,"description":990,"note":991,"demo":758},"boolean | undefined",false,"Renders the content at mount, while closed, instead of on the first open. Closed content is `inert` and `aria-hidden` either way.","The body is otherwise deferred to the first open. Reach for `eager` when something inside has to exist before then, most often a form field, which does not join its `BbForm` until it is mounted. If a collapsed panel can hold an invalid field, open it from the `invalid` event of `BbForm`.",{"name":993,"type":994,"required":989,"default":3,"description":995,"note":3,"demo":3},"headingLevel","1 | 2 | 3 | 4 | 5 | 6 | undefined","Wraps the header button in a heading of this level (`\u003Ch1>`–`\u003Ch6>`, the APG accordion shape) so it joins the page outline: under an `\u003Ch2>`, pass `3`. Its margins and font are reset. Omitted, no heading.",{"name":814,"type":997,"required":989,"default":3,"description":998,"note":999,"demo":758},"string | undefined","The root's `id`; the header button's id (`\u003Cid>_header`) derives from it. Generated when omitted.","Makes the markup predictable: the body takes your id and the header button takes `\u003Cid>_header`, already cross-wired through `aria-controls` and `aria-labelledby`. Omitted, both are generated.",{"name":1001,"type":988,"required":989,"default":657,"description":1002,"note":1003,"demo":427},"modelValue","Used by v-model to trigger opening \u002F closing the collapsible. An accordion with no `v-model` starts closed.","One panel, one boolean. There is no group component: compose several accordions, and for single-open behaviour derive every panel from one active key rather than watching siblings.",{"name":886,"type":1005,"required":989,"default":3,"description":1006,"note":3,"demo":3},"PtMap\u003CBbAccordionPtPart, \"open\"> | undefined","Passthrough, object form: the same keys as the `pt:*` attributes without the prefix. See the `pt:\u003Cpart>` row.",{"name":1008,"type":1009,"required":989,"default":3,"description":1010,"note":3,"demo":1011},"pt:\u003Cpart>","PtValue | undefined","Passthrough, attribute form: one attribute per part, `pt:\u003Cpart>`, and per part and state, `pt:\u003Cpart>:\u003Cstate>`. Parts: `header`, `icon`, `panel`, `root`, `title`. States: `open`.","passthrough",{"name":449,"type":997,"required":989,"default":3,"description":1013,"note":3,"demo":3},"The trigger's text, with a chevron at its end that turns when open, in the default look (padding, a hairline under the item). `#title` replaces the text only; `#header` replaces the whole trigger (no chevron, no default look).",{"name":1015,"type":1016,"required":989,"default":1017,"description":1018,"note":1019,"demo":822},"transitionDuration","number | undefined","250","How long the transition has to last in milliseconds","Milliseconds; the manifest default resolves to 250. One value drives the height and the fade together, and `prefers-reduced-motion: reduce` collapses both to near-instant on its own.",[1021],{"name":1001,"type":988,"note":3,"demo":427},[1023],{"name":712,"signature":1024,"description":1025,"note":1026,"demo":643},"(value: boolean): void","Emitted with the new value whenever `v-model` changes.","Emitted on every toggle (a header click or a `toggle()` call) with the new open state. Listen to it for side effects such as analytics or a fetch on first open, and for single-open groups, where a `false` payload is what resets the active key.",[1028,1032,1035],{"name":427,"type":1029,"description":1030,"note":1031,"demo":668},"BbAccordionToggleSlotProps","The collapsible body content shown when the accordion is open.","Receives the same `{ open, toggle }` scope as the header. `toggle()` earns its keep here rather than in the header: it is how a long panel offers a Show less control without sending the reader back up to a header they can no longer see.",{"name":467,"type":1029,"description":1033,"note":1034,"demo":427},"Replaces the whole trigger content: the text and the chevron, and the default look with them. The button, its ARIA and its focus ring stay.","Rendered inside the header button, which the component owns. Never put a `\u003Cbutton>` or an `\u003Ca>` in here: nesting interactive elements is invalid and splits the click target. Everything non-interactive is made click-transparent, which is what lets badges and icons ride along, and also why a `:hover` rule on them never fires.",{"name":449,"type":1029,"description":1036,"note":3,"demo":3},"Replaces the trigger's text only (the `title` prop); the chevron and the default look stay.",[],{"parts":1039,"states":1053},[1040,1043,1045,1047,1050],{"name":1041,"description":1042},"root","The accordion's outer element: the header and its panel.",{"name":467,"description":1044},"The trigger button that opens and closes the panel.",{"name":449,"description":1046},"The trigger's text (`title` \u002F `#title`). Absent under a `#header` slot, which replaces the whole trigger content.",{"name":1048,"description":1049},"icon","The chevron at the trigger's end, turned when open. Absent under a `#header` slot.",{"name":1051,"description":1052},"panel","The region the header controls (the ARIA accordion panel).",[1054],{"name":597,"description":1055},"Component-wide: the panel is open (follows `v-model`).",{"removed":1057,"renamed":1058},[],[],1793055138204]