[{"data":1,"prerenderedAt":739},["ShallowReactive",2],{"api-none":3,"docs-nav-en":4,"locale-alternates":232,"page-en-\u002Fcomponents\u002Fbb-accordion":353,"pt-showcase-BbAccordion":663},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":170,"body":355,"component":170,"description":649,"extension":650,"group":167,"meta":651,"navigation":652,"order":11,"path":171,"sections":653,"seo":660,"stem":661,"__hash__":662},"docs_en\u002Fcomponents\u002Fbb-accordion.md",{"type":356,"value":357,"toc":641},"minimark",[358,399,402,410,416,420,439,452,458,465,468,479,482,488,491,494,505,508,514,526,529,534,540,547,553,556,559,569,572,587,598,604,607,613,623,638],[359,360,361,369],"when",{},[362,363,364,365,368],"p",{},"Reach for ",[366,367,170],"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.",[370,371,373],"template",{"v-slot:else":372},"",[374,375,376,385,392],"ul",{},[377,378,379,384],"li",{},[380,381,382],"a",{"href":253},[366,383,176],{},", if the trigger cannot be a\nheader: a switch in a settings row, a link inside a paragraph",[377,386,387,391],{},[380,388,389],{"href":301},[366,390,224],{},", if you hide nothing and\nonly want a height change to animate",[377,393,394,398],{},[380,395,396],{"href":311},[366,397,182],{},", if the sections are peer views of one\nsubject and only one stays visible",[362,400,401],{},"The API is the same as v2. Nothing here needs migrating.",[403,404,406],"h2",{"id":405},"default",[407,408,409],"span",{},"Default",[362,411,412,413,415],{},"One ",[366,414,170],{}," is one panel, and one panel is one boolean.",[417,418],"demo",{"name":419},"BbAccordion\u002FBasic",[362,421,422,423,426,427,430,431,434,435,438],{},"The ",[366,424,425],{},"header"," slot lands inside a real ",[366,428,429],{},"\u003Cbutton>",", already carrying\n",[366,432,433],{},"aria-expanded"," and ",[366,436,437],{},"aria-controls",". The body is the region that button labels.\nYou add none of it, and the keyboard comes with the button.",[362,440,441,442,444,445,448,449,451],{},"Never put a ",[366,443,429],{}," or an ",[366,446,447],{},"\u003Ca>"," inside ",[366,450,425],{},". Actions belong in the body.",[403,453,455],{"id":454},"list",[407,456,457],{},"A list of panels",[362,459,460,461,464],{},"There is no ",[366,462,463],{},"BbAccordionGroup",". Render several panels, one boolean each.",[417,466],{"name":467},"BbAccordion\u002FFaq",[362,469,470,471,474,475,478],{},"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 ",[366,472,473],{},"\u003Cspan>"," never swallows\nthe toggle. A ",[366,476,477],{},":hover"," on those children never fires, though: hang it on the\nheader.",[362,480,481],{},"Panels nest with no extra wiring. Pad the nested body, or the hierarchy\ndisappears.",[403,483,485],{"id":484},"single-open",[407,486,487],{},"One panel at a time",[362,489,490],{},"Track one active key and derive every panel from it.",[417,492],{"name":493},"BbAccordion\u002FSingleOpen",[362,495,496,497,500,501,504],{},"Clicking the open header emits ",[366,498,499],{},"false",". Reset the key to ",[366,502,503],{},"null"," in that branch,\nor the panel shuts visually while the key still claims it is open.",[362,506,507],{},"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.",[403,509,511],{"id":510},"slots",[407,512,513],{},"The slots",[362,515,516,518,519,434,522,525],{},[366,517,425],{}," and the body receive the same two things, ",[366,520,521],{},"value",[366,523,524],{},"toggle",".",[417,527],{"name":528},"BbAccordion\u002FBodyAction",[362,530,531,533],{},[366,532,521],{}," says whether the panel is open. Use it to rotate a chevron or swap the\nheader copy. Assigning to it does nothing.",[362,535,536,539],{},[366,537,538],{},"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.",[362,541,542,543,546],{},"Listen to ",[366,544,545],{},"update:modelValue"," only for side effects: analytics, a fetch on first\nopen. The open or close has already happened.",[403,548,550],{"id":549},"content",[407,551,552],{},"When the body renders",[362,554,555],{},"The body does not exist until the first open, and it stays mounted from then on.",[417,557],{"name":558},"BbAccordion\u002FEagerBody",[362,560,561,562,565,566,568],{},"Add ",[366,563,564],{},"eager"," when the content has to exist while the panel is shut. A validated\nfield takes part in the form only once it has rendered. Without ",[366,567,564],{}," the form\nsubmits as though the field were not there, and it starts blocking submission the\nfirst time somebody opens the panel. The same goes for text a prerendered page\nhas to carry.",[362,570,571],{},"If a collapsed panel can hold an invalid field, open it when validation fails.",[362,573,574,575,434,578,581,582,525],{},"Closed content is ",[366,576,577],{},"aria-hidden",[366,579,580],{},"inert",", eager or not: out of the tab order,\nunclickable, invisible to screen readers. The mechanism is documented on\n",[380,583,585],{"href":584},"\u002Fen\u002Fcomponents\u002Fbb-collapsible#content",[366,586,176],{},[362,588,589,590,593,594,597],{},"Pass ",[366,591,592],{},"id"," when the markup has to be predictable. The body takes your id and the\nheader takes ",[366,595,596],{},"\u003Cid>_header",", already cross-wired.",[403,599,601],{"id":600},"styling",[407,602,603],{},"Spacing and styling",[362,605,606],{},"Put padding and borders on the content you slot in, never on the body.",[362,608,609,610,612],{},"The body zeroes padding, borders and gaps in both states, and the header button\ncarries none of its own. That is why every demo above pads the ",[366,611,473],{}," inside\nthe header and the element inside the body.",[362,614,615,618,619,622],{},[366,616,617],{},"transition-duration"," (milliseconds, 250 by default) drives the height and the\nfade together. Under ",[366,620,621],{},"prefers-reduced-motion: reduce"," both drop to near-instant\non their own.",[362,624,625,626,629,630,633,634,637],{},"Three classes are yours: ",[366,627,628],{},".bb-accordion"," on the panel, ",[366,631,632],{},".bb-accordion__header"," on\nthe button, ",[366,635,636],{},".bb-accordion__content"," on the body. If you repaint the header, keep\na visible focus ring: the browser supplies none.",[362,639,640],{},"In a list, the borders and dividers belong to the container that renders the\npanels. That is what keeps a collapsed panel from leaving a stray line.",{"title":372,"searchDepth":37,"depth":37,"links":642},[643,644,645,646,647,648],{"id":405,"depth":15,"text":409},{"id":454,"depth":15,"text":457},{"id":484,"depth":15,"text":487},{"id":510,"depth":15,"text":513},{"id":549,"depth":15,"text":552},{"id":600,"depth":15,"text":603},"A panel that opens when you click its header, with the accessibility already wired.","md",{},true,[654,655,656,657,658,659],{"id":405,"title":409},{"id":454,"title":457},{"id":484,"title":487},{"id":510,"title":513},{"id":549,"title":552},{"id":600,"title":603},{"title":170,"description":649},"components\u002Fbb-accordion","EXRS3Gsw-_NJFtJEvFCMiQZUyUn7Q8aOjm5U8qiKFbQ",{"name":170,"slug":664,"group":167,"description":665,"entrypoint":666,"docs":667,"props":670,"models":707,"events":709,"slots":713,"exposed":721,"pt":722,"validated":3,"migration":736},"bb-accordion","Expands and collapses a content panel.","bitboss-ui",{"contract":668,"source":669},"ai\u002FBbAccordion.md","ai\u002Fsource\u002FBbAccordion.md",[671,676,680,684,688,691,693,695,697,699,701],{"name":564,"type":672,"required":673,"default":499,"description":674,"note":675,"demo":549},"boolean | undefined",false,"Prevents rendering content before it's made visible.","The body is otherwise deferred to the first open. Reach for `eager` when something inside has to exist before then — most often a validated field, which does not take part in its form until it is mounted. If a collapsed panel can hold an invalid field, open it when validation fails.",{"name":592,"type":677,"required":673,"default":3,"description":678,"note":679,"demo":549},"string | undefined","The identifier of the component.","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":681,"type":672,"required":673,"default":499,"description":682,"note":683,"demo":405},"modelValue","Used by v-model to trigger opening \u002F closing the collapsible.\nAn 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":685,"type":686,"required":673,"default":3,"description":687,"note":3,"demo":3},"pt","PtMap\u003CBbAccordionPtPart, \"open\"> | undefined","Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:\u003Cpart>` row.",{"name":689,"type":690,"required":673,"default":3,"description":3,"note":3,"demo":3},"pt:header","PtValue | undefined",{"name":692,"type":690,"required":673,"default":3,"description":3,"note":3,"demo":3},"pt:header:open",{"name":694,"type":690,"required":673,"default":3,"description":3,"note":3,"demo":3},"pt:panel",{"name":696,"type":690,"required":673,"default":3,"description":3,"note":3,"demo":3},"pt:panel:open",{"name":698,"type":690,"required":673,"default":3,"description":3,"note":3,"demo":3},"pt:root",{"name":700,"type":690,"required":673,"default":3,"description":3,"note":3,"demo":3},"pt:root:open",{"name":702,"type":703,"required":673,"default":704,"description":705,"note":706,"demo":600},"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.",[708],{"name":681,"type":672,"note":3,"demo":405},[710],{"name":545,"signature":711,"description":3,"note":712,"demo":484},"(event: \"update:modelValue\", value: boolean): void","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.",[714,718],{"name":405,"type":715,"description":716,"note":717,"demo":510},"BbAccordionToggleSlotProps","The collapsible body content shown when the accordion is open.","Receives the same `{ value, 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":425,"type":715,"description":719,"note":720,"demo":405},"Content rendered inside the accordion header button.","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.",[],{"parts":723,"states":732},[724,727,729],{"name":725,"description":726},"root","The accordion's outer element: the header and its panel.",{"name":425,"description":728},"The trigger button that opens and closes the panel. Its content is your slot markup — there is no chevron of ours, so no `icon` part.",{"name":730,"description":731},"panel","The region the header controls (the ARIA accordion panel).",[733],{"name":734,"description":735},"open","Component-wide: the panel is open (follows `v-model`).",{"removed":737,"renamed":738},[],[],1790005160714]