[{"data":1,"prerenderedAt":737},["ShallowReactive",2],{"api-none":3,"docs-nav-en":4,"locale-alternates":232,"page-en-\u002Fcomponents\u002Fbb-collapsible":353,"pt-showcase-BbCollapsible":673},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":176,"body":355,"component":176,"description":660,"extension":661,"group":167,"meta":662,"navigation":663,"order":37,"path":177,"sections":664,"seo":670,"stem":671,"__hash__":672},"docs_en\u002Fcomponents\u002Fbb-collapsible.md",{"type":356,"value":357,"toc":653},"minimark",[358,399,404,412,415,419,434,443,449,452,471,474,477,483,491,497,500,503,517,524,530,533,536,543,551,557,560,567,577,591,620,649],[359,360,361,369],"when",{},[362,363,364,365,368],"p",{},"Reach for ",[366,367,176],"code",{}," when the trigger cannot be a header sitting over the\nbody. A switch in a settings row, a \"Show more\" at the end of a paragraph, a\nbutton in a toolbar.",[370,371,373],"template",{"v-slot:else":372},"",[374,375,376,385,392],"ul",{},[377,378,379,384],"li",{},[380,381,382],"a",{"href":233},[366,383,170],{},", if the trigger is a title over\nthe body: it writes the button and the ARIA for you",[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 they are peer views of one subject and\nonly one stays visible",[362,400,401,403],{},[366,402,170],{}," is this component plus a wired header button. Everything on this\npage is true there too.",[405,406,408],"h2",{"id":407},"default",[409,410,411],"span",{},"Default",[362,413,414],{},"Bind a boolean and supply the control that flips it.",[416,417],"demo",{"name":418},"BbCollapsible\u002FBasic",[362,420,421,422,425,426,429,430,433],{},"The component cannot open or close itself. It renders ",[366,423,424],{},"model-value"," and never\nwrites it back, and it emits nothing. ",[366,427,428],{},"v-model"," compiles and works, but only as a\nprop binding, so do not wait for an ",[366,431,432],{},"update:modelValue",". Put side effects on the\ntrigger.",[362,435,436,438,439,442],{},[366,437,424],{}," is required. Initialize it with ",[366,440,441],{},"ref(false)",": an undefined binding\nrenders as closed, which looks like the component ignoring you.",[405,444,446],{"id":445},"trigger",[409,447,448],{},"You own the trigger",[362,450,451],{},"The component manages the region. The semantics of the control that opens it are\nyours.",[362,453,454,455,458,459,462,463,466,467,470],{},"If the trigger is a button, give it ",[366,456,457],{},"aria-expanded"," and ",[366,460,461],{},"aria-controls"," pointing\nat the collapsible's ",[366,464,465],{},"id",". Without them a screen-reader user gets a button whose\neffect is announced nowhere. That is what the ",[380,468,411],{"href":469},"#default"," demo above\nwires.",[362,472,473],{},"When the trigger is already a control with a state, do not add a second one:",[416,475],{"name":476},"BbCollapsible\u002FSwitchTrigger",[362,478,479,480,482],{},"A switch or a checkbox bound to the same ref already says \"on \u002F off\", and the\nfields that appear are the consequence of the setting. Adding ",[366,481,457],{},"\nthere announces the same fact twice.",[362,484,485,486,490],{},"If wiring this is not work you want, step up to\n",[380,487,488],{"href":233},[366,489,170],{},": it writes the header button for\nyou.",[405,492,494],{"id":493},"content",[409,495,496],{},"Closed content is out of reach",[362,498,499],{},"Hiding something visually is not hiding it. Here the component does that work.",[416,501],{"name":502},"BbCollapsible\u002FHiddenWhenClosed",[362,504,505,506,458,509,512,513,516],{},"Closed content is ",[366,507,508],{},"aria-hidden",[366,510,511],{},"inert",": unfocusable, unclickable, out of the\ntab order and out of the accessibility tree. Do not wrap it in a ",[366,514,515],{},"v-if",": that\nwould take the animation and the mounted state with it.",[362,518,519,520,523],{},"Nothing inside the slot renders until the first open, and it stays mounted from\nthen on. ",[366,521,522],{},"eager"," renders it immediately. Reach for it when the content has to\nexist before anyone opens the region. A form field that must register and\nvalidate, text a prerendered page has to carry, anything measured on mount. The\ndemo above is eager, which is why its text sits in this page's static HTML.",[405,525,527],{"id":526},"group",[409,528,529],{},"One region at a time",[362,531,532],{},"Several collapsibles become an exclusive group when you derive each state from\none key.",[416,534],{"name":535},"BbCollapsible\u002FExclusivePanels",[362,537,538,539,542],{},"One ",[366,540,541],{},"ref"," holds the open key, each region compares against it, and each trigger\nassigns it. No group wrapper, and no watcher forcing siblings shut. Make the key\nnullable if clicking the open trigger should close everything.",[362,544,545,546,550],{},"When the triggers are stacked headers, you are describing an accordion: see\n",[380,547,549],{"href":548},"\u002Fen\u002Fcomponents\u002Fbb-accordion#single-open","One panel at a time",".",[405,552,554],{"id":553},"styling",[409,555,556],{},"Spacing and timing",[362,558,559],{},"Do not put padding, borders or gaps on the collapsible itself.",[362,561,562,563,566],{},"While closed they are forced to zero, so they show up only when it is open and\nthe collapse leaks the difference. The inner wrapper,\n",[366,564,565],{},".bb-collapsible__content",", is zeroed in both states. Space the element you slot\nin, as every demo on this page does.",[362,568,569,572,573,576],{},[366,570,571],{},"transition-duration"," (milliseconds, 250 by default) drives the height animation\nand the opacity fade together. Under ",[366,574,575],{},"prefers-reduced-motion: reduce"," both drop\nto near-instant.",[578,579,581],"migration",{"title":580},"tag removed",[362,582,583,584,586,587,590],{},"The root is always a ",[366,585,409],{}," laid out as a grid now. That is phrasing content,\nwhich is what keeps an inline \"Show more\" valid inside a paragraph. If you passed\n",[366,588,589],{},"tag=\"section\"",", wrap the component instead.",[592,593,597],"pre",{"className":594,"code":595,"language":596,"meta":372,"style":372},"language-diff shiki shiki-themes github-light-high-contrast github-dark-high-contrast","- \u003CBbCollapsible v-model=\"open\" tag=\"section\">…\u003C\u002FBbCollapsible>\n+ \u003Csection>\n+   \u003CBbCollapsible v-model=\"open\">…\u003C\u002FBbCollapsible>\n+ \u003C\u002Fsection>\n","diff",[366,598,599,605,610,615],{"__ignoreMap":372},[409,600,602],{"class":601,"line":11},"line",[409,603,604],{},"- \u003CBbCollapsible v-model=\"open\" tag=\"section\">…\u003C\u002FBbCollapsible>\n",[409,606,607],{"class":601,"line":15},[409,608,609],{},"+ \u003Csection>\n",[409,611,612],{"class":601,"line":37},[409,613,614],{},"+   \u003CBbCollapsible v-model=\"open\">…\u003C\u002FBbCollapsible>\n",[409,616,617],{"class":601,"line":41},[409,618,619],{},"+ \u003C\u002Fsection>\n",[362,621,622,623,626,627,630,631,634,635,637,638,641,642,458,645,648],{},"Three classes are yours: ",[366,624,625],{},".bb-collapsible"," on the root, with\n",[366,628,629],{},".bb-collapsible--open"," \u002F ",[366,632,633],{},".bb-collapsible--closed"," tracking the state, and\n",[366,636,565],{}," on the wrapper around your slot. Style the state\nmodifiers, not the animation: the height is a ",[366,639,640],{},"grid-template-rows"," transition\nbetween ",[366,643,644],{},"0fr",[366,646,647],{},"1fr",", and overriding it is how you lose the collapse.",[650,651,652],"style",{},"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":372,"searchDepth":37,"depth":37,"links":654},[655,656,657,658,659],{"id":407,"depth":15,"text":411},{"id":445,"depth":15,"text":448},{"id":493,"depth":15,"text":496},{"id":526,"depth":15,"text":529},{"id":553,"depth":15,"text":556},"A region that animates open and closed from a boolean you own, with your own trigger.","md",{},true,[665,666,667,668,669],{"id":407,"title":411},{"id":445,"title":448},{"id":493,"title":496},{"id":526,"title":529},{"id":553,"title":556},{"title":176,"description":660},"components\u002Fbb-collapsible","z5CXsBs9i1GZ-FFOCbenSrOt6SRi10QpYqE7Vn2CwJE",{"name":176,"slug":674,"group":167,"description":675,"entrypoint":676,"docs":677,"props":680,"models":715,"events":716,"slots":717,"exposed":722,"pt":723,"validated":3,"migration":734},"bb-collapsible","Toggles visibility of collapsible content blocks.","bitboss-ui",{"contract":678,"source":679},"ai\u002FBbCollapsible.md","ai\u002Fsource\u002FBbCollapsible.md",[681,687,691,695,698,700,702,704,709],{"name":522,"type":682,"required":683,"default":684,"description":685,"note":686,"demo":493},"boolean | undefined",false,"false","Prevents rendering content before it's made visible.","Renders the slot before the first open. Needed when the content must exist up front — a form field that registers and validates, text a prerendered page has to carry, anything measured on mount. It does not weaken the hidden state: closed content stays `aria-hidden` and `inert` either way.",{"name":688,"type":682,"required":683,"default":684,"description":689,"note":690,"demo":407},"modelValue","Used by v-model to trigger opening \u002F closing the collapsible.\n\nOptional, matching the runtime: `withDefaults` supplies `false`, so an\nomitted binding renders closed and Vue never warns. It was typed required\nwhile carrying that default, which made the manifest publish a row that\nwas `required: true` AND `default: false` — a contradiction that read as\na generator bug.","One-way. The component renders this value and never writes it back — there is no event and no model row on this page, because it cannot open or close itself. `v-model` compiles but acts purely as a prop binding, so put side effects on your trigger. Initialize it explicitly: an undefined binding renders as closed rather than warning.",{"name":692,"type":693,"required":683,"default":3,"description":694,"note":3,"demo":3},"pt","PtMap\u003CBbCollapsiblePtPart, \"open\"> | undefined","Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:\u003Cpart>` row.",{"name":696,"type":697,"required":683,"default":3,"description":3,"note":3,"demo":3},"pt:content","PtValue | undefined",{"name":699,"type":697,"required":683,"default":3,"description":3,"note":3,"demo":3},"pt:content:open",{"name":701,"type":697,"required":683,"default":3,"description":3,"note":3,"demo":3},"pt:root",{"name":703,"type":697,"required":683,"default":3,"description":3,"note":3,"demo":3},"pt:root:open",{"name":705,"type":706,"required":683,"default":707,"description":708,"note":3,"demo":3},"tag","LayoutTag | undefined","\"span\"","Element rendered as the root, and mirrored by the inner animating\nelement — so the pair is span-in-span or div-in-div, both valid. Keep the\ndefault inside phrasing content (a `\u003Cp>`); use `'div'` when the body is\nblock content (paragraphs, lists, forms), which a `span` may not contain.",{"name":710,"type":711,"required":683,"default":712,"description":713,"note":714,"demo":553},"transitionDuration","number | undefined","250","How long the transition has to last in milliseconds","Milliseconds; the manifest default resolves to 250. One value drives both the height animation and the opacity fade. Under `prefers-reduced-motion: reduce` both drop to near-instant regardless of what you pass.",[],[],[718],{"name":407,"type":719,"description":720,"note":721,"demo":493},"any","The collapsible body content that is shown or hidden based on `modelValue`.\nWhen `eager` is false, the content is not rendered until the first open.","Deferred until the first open, then mounted for good, so state inside survives close and reopen. Put padding and borders on what you slot in here, not on the collapsible: its own spacing is forced to zero to guarantee a true zero-height collapse.",[],{"parts":724,"states":730},[725,728],{"name":726,"description":727},"root","The outer element.",{"name":493,"description":729},"The region that animates open and closed — `inert` while closed.",[731],{"name":732,"description":733},"open","Component-wide: the content is open (follows `v-model`).",{"removed":735,"renamed":736},[],[],1790005160726]