[{"data":1,"prerenderedAt":829},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":134,"api-none":377,"page-en-\u002Fcomponents\u002Fbb-collapsible":378,"pt-showcase-BbCollapsible":772},{"\u002Fit\u002Fcomponenti\u002Fbb-accordion":4,"\u002Fen\u002Fcomponents\u002Fbb-accordion":5,"\u002Fit\u002Fcomponenti\u002Fbb-alert":6,"\u002Fen\u002Fcomponents\u002Fbb-alert":7,"\u002Fit\u002Fcomponenti\u002Fbb-asterisk":8,"\u002Fen\u002Fcomponents\u002Fbb-asterisk":9,"\u002Fit\u002Fcomponenti\u002Fbb-avatar":10,"\u002Fen\u002Fcomponents\u002Fbb-avatar":11,"\u002Fit\u002Fcomponenti\u002Fbb-badge":12,"\u002Fen\u002Fcomponents\u002Fbb-badge":13,"\u002Fit\u002Fcomponenti\u002Fbb-base-button":14,"\u002Fen\u002Fcomponents\u002Fbb-base-button":15,"\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs":16,"\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs":17,"\u002Fit\u002Fcomponenti\u002Fbb-button":18,"\u002Fen\u002Fcomponents\u002Fbb-button":19,"\u002Fit\u002Fcomponenti\u002Fbb-calendar":20,"\u002Fen\u002Fcomponents\u002Fbb-calendar":21,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":22,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":23,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":24,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":25,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":26,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":27,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":28,"\u002Fen\u002Fcomponents\u002Fbb-color-input":29,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":30,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":31,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":32,"\u002Fen\u002Fcomponents\u002Fbb-confirm":33,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":34,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":35,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":36,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":37,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":38,"\u002Fen\u002Fcomponents\u002Fbb-dialog":39,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":40,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":41,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":42,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":43,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":44,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":45,"\u002Fit\u002Fcomponenti\u002Fbb-form":46,"\u002Fen\u002Fcomponents\u002Fbb-form":47,"\u002Fit\u002Fcomponenti\u002Fbb-hover-card":48,"\u002Fen\u002Fcomponents\u002Fbb-hover-card":49,"\u002Fit\u002Fcomponenti\u002Fbb-icon":50,"\u002Fen\u002Fcomponents\u002Fbb-icon":51,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":52,"\u002Fen\u002Fcomponents\u002Fbb-indicator":53,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":54,"\u002Fen\u002Fcomponents\u002Fbb-number-input":55,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":56,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":57,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":58,"\u002Fen\u002Fcomponents\u002Fbb-pagination":59,"\u002Fit\u002Fcomponenti\u002Fbb-popover":60,"\u002Fen\u002Fcomponents\u002Fbb-popover":61,"\u002Fit\u002Fcomponenti\u002Fbb-progress":62,"\u002Fen\u002Fcomponents\u002Fbb-progress":63,"\u002Fit\u002Fcomponenti\u002Fbb-radio":64,"\u002Fen\u002Fcomponents\u002Fbb-radio":65,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":66,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":67,"\u002Fit\u002Fcomponenti\u002Fbb-rating":68,"\u002Fen\u002Fcomponents\u002Fbb-rating":69,"\u002Fit\u002Fcomponenti\u002Fbb-select":70,"\u002Fen\u002Fcomponents\u002Fbb-select":71,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":72,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":73,"\u002Fit\u002Fcomponenti\u002Fbb-slider":74,"\u002Fen\u002Fcomponents\u002Fbb-slider":75,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":76,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":77,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":78,"\u002Fen\u002Fcomponents\u002Fbb-spinner":79,"\u002Fit\u002Fcomponenti\u002Fbb-switch":80,"\u002Fen\u002Fcomponents\u002Fbb-switch":81,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":82,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":83,"\u002Fit\u002Fcomponenti\u002Fbb-table":84,"\u002Fen\u002Fcomponents\u002Fbb-table":85,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":86,"\u002Fen\u002Fcomponents\u002Fbb-tabs":87,"\u002Fit\u002Fcomponenti\u002Fbb-tag":88,"\u002Fen\u002Fcomponents\u002Fbb-tag":89,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":90,"\u002Fen\u002Fcomponents\u002Fbb-text-input":91,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":92,"\u002Fen\u002Fcomponents\u002Fbb-textarea":93,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":94,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":95,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":96,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":97,"\u002Fit\u002Fcomponenti\u002Fbb-toast":98,"\u002Fen\u002Fcomponents\u002Fbb-toast":99,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":100,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":101,"\u002Fit\u002Fcomponenti\u002Fbb-tree":102,"\u002Fen\u002Fcomponents\u002Fbb-tree":103,"\u002Fit\u002Fguide\u002Fadoption-checklist":104,"\u002Fen\u002Fguides\u002Fadoption-checklist":105,"\u002Fit\u002Fguide\u002Fai-agents":106,"\u002Fen\u002Fguides\u002Fai-agents":107,"\u002Fit\u002Fguide\u002Fcoherence":108,"\u002Fen\u002Fguides\u002Fcoherence":109,"\u002Fit\u002Fguide\u002Fdesign-language":110,"\u002Fen\u002Fguides\u002Fdesign-language":111,"\u002Fit\u002Fguide\u002Fdesign-tokens":112,"\u002Fen\u002Fguides\u002Fdesign-tokens":113,"\u002Fit\u002Fguide\u002Ffetching-data":114,"\u002Fen\u002Fguides\u002Ffetching-data":115,"\u002Fit\u002Fguide\u002Ficons":116,"\u002Fen\u002Fguides\u002Ficons":117,"\u002Fit\u002Fguide\u002Finertia":118,"\u002Fen\u002Fguides\u002Finertia":119,"\u002Fit\u002Fguide\u002Finstallation":120,"\u002Fen\u002Fguides\u002Finstallation":121,"\u002Fit\u002Fguide\u002Fmigration":122,"\u002Fen\u002Fguides\u002Fmigration":123,"\u002Fit\u002Fguide\u002Fnuxt":124,"\u002Fen\u002Fguides\u002Fnuxt":125,"\u002Fit\u002Fguide\u002Foptions-and-items":126,"\u002Fen\u002Fguides\u002Foptions-and-items":127,"\u002Fit\u002Fguide\u002Fpassthrough":128,"\u002Fen\u002Fguides\u002Fpassthrough":129,"\u002Fit\u002Fguide\u002Fpreset-components":130,"\u002Fen\u002Fguides\u002Fpreset-components":131,"\u002Fit\u002Fguide\u002Fvalidated-forms":132,"\u002Fen\u002Fguides\u002Fvalidated-forms":133},"\u002Fen\u002Fcomponents\u002Fbb-accordion","\u002Fit\u002Fcomponenti\u002Fbb-accordion","\u002Fen\u002Fcomponents\u002Fbb-alert","\u002Fit\u002Fcomponenti\u002Fbb-alert","\u002Fen\u002Fcomponents\u002Fbb-asterisk","\u002Fit\u002Fcomponenti\u002Fbb-asterisk","\u002Fen\u002Fcomponents\u002Fbb-avatar","\u002Fit\u002Fcomponenti\u002Fbb-avatar","\u002Fen\u002Fcomponents\u002Fbb-badge","\u002Fit\u002Fcomponenti\u002Fbb-badge","\u002Fen\u002Fcomponents\u002Fbb-base-button","\u002Fit\u002Fcomponenti\u002Fbb-base-button","\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs","\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs","\u002Fen\u002Fcomponents\u002Fbb-button","\u002Fit\u002Fcomponenti\u002Fbb-button","\u002Fen\u002Fcomponents\u002Fbb-calendar","\u002Fit\u002Fcomponenti\u002Fbb-calendar","\u002Fen\u002Fcomponents\u002Fbb-checkbox","\u002Fit\u002Fcomponenti\u002Fbb-checkbox","\u002Fen\u002Fcomponents\u002Fbb-checkbox-group","\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group","\u002Fen\u002Fcomponents\u002Fbb-collapsible","\u002Fit\u002Fcomponenti\u002Fbb-collapsible","\u002Fen\u002Fcomponents\u002Fbb-color-input","\u002Fit\u002Fcomponenti\u002Fbb-color-input","\u002Fen\u002Fcomponents\u002Fbb-color-palette","\u002Fit\u002Fcomponenti\u002Fbb-color-palette","\u002Fen\u002Fcomponents\u002Fbb-confirm","\u002Fit\u002Fcomponenti\u002Fbb-confirm","\u002Fen\u002Fcomponents\u002Fbb-date-picker","\u002Fit\u002Fcomponenti\u002Fbb-date-picker","\u002Fen\u002Fcomponents\u002Fbb-date-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input","\u002Fen\u002Fcomponents\u002Fbb-dialog","\u002Fit\u002Fcomponenti\u002Fbb-dialog","\u002Fen\u002Fcomponents\u002Fbb-dropdown","\u002Fit\u002Fcomponenti\u002Fbb-dropdown","\u002Fen\u002Fcomponents\u002Fbb-dropdown-button","\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button","\u002Fen\u002Fcomponents\u002Fbb-dropzone","\u002Fit\u002Fcomponenti\u002Fbb-dropzone","\u002Fen\u002Fcomponents\u002Fbb-form","\u002Fit\u002Fcomponenti\u002Fbb-form","\u002Fen\u002Fcomponents\u002Fbb-hover-card","\u002Fit\u002Fcomponenti\u002Fbb-hover-card","\u002Fen\u002Fcomponents\u002Fbb-icon","\u002Fit\u002Fcomponenti\u002Fbb-icon","\u002Fen\u002Fcomponents\u002Fbb-indicator","\u002Fit\u002Fcomponenti\u002Fbb-indicator","\u002Fen\u002Fcomponents\u002Fbb-number-input","\u002Fit\u002Fcomponenti\u002Fbb-number-input","\u002Fen\u002Fcomponents\u002Fbb-off-canvas","\u002Fit\u002Fcomponenti\u002Fbb-off-canvas","\u002Fen\u002Fcomponents\u002Fbb-pagination","\u002Fit\u002Fcomponenti\u002Fbb-pagination","\u002Fen\u002Fcomponents\u002Fbb-popover","\u002Fit\u002Fcomponenti\u002Fbb-popover","\u002Fen\u002Fcomponents\u002Fbb-progress","\u002Fit\u002Fcomponenti\u002Fbb-progress","\u002Fen\u002Fcomponents\u002Fbb-radio","\u002Fit\u002Fcomponenti\u002Fbb-radio","\u002Fen\u002Fcomponents\u002Fbb-radio-group","\u002Fit\u002Fcomponenti\u002Fbb-radio-group","\u002Fen\u002Fcomponents\u002Fbb-rating","\u002Fit\u002Fcomponenti\u002Fbb-rating","\u002Fen\u002Fcomponents\u002Fbb-select","\u002Fit\u002Fcomponenti\u002Fbb-select","\u002Fen\u002Fcomponents\u002Fbb-select-popover","\u002Fit\u002Fcomponenti\u002Fbb-select-popover","\u002Fen\u002Fcomponents\u002Fbb-slider","\u002Fit\u002Fcomponenti\u002Fbb-slider","\u002Fen\u002Fcomponents\u002Fbb-smooth-height","\u002Fit\u002Fcomponenti\u002Fbb-smooth-height","\u002Fen\u002Fcomponents\u002Fbb-spinner","\u002Fit\u002Fcomponenti\u002Fbb-spinner","\u002Fen\u002Fcomponents\u002Fbb-switch","\u002Fit\u002Fcomponenti\u002Fbb-switch","\u002Fen\u002Fcomponents\u002Fbb-switch-group","\u002Fit\u002Fcomponenti\u002Fbb-switch-group","\u002Fen\u002Fcomponents\u002Fbb-table","\u002Fit\u002Fcomponenti\u002Fbb-table","\u002Fen\u002Fcomponents\u002Fbb-tabs","\u002Fit\u002Fcomponenti\u002Fbb-tabs","\u002Fen\u002Fcomponents\u002Fbb-tag","\u002Fit\u002Fcomponenti\u002Fbb-tag","\u002Fen\u002Fcomponents\u002Fbb-text-input","\u002Fit\u002Fcomponenti\u002Fbb-text-input","\u002Fen\u002Fcomponents\u002Fbb-textarea","\u002Fit\u002Fcomponenti\u002Fbb-textarea","\u002Fen\u002Fcomponents\u002Fbb-time-picker","\u002Fit\u002Fcomponenti\u002Fbb-time-picker","\u002Fen\u002Fcomponents\u002Fbb-time-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input","\u002Fen\u002Fcomponents\u002Fbb-toast","\u002Fit\u002Fcomponenti\u002Fbb-toast","\u002Fen\u002Fcomponents\u002Fbb-tooltip","\u002Fit\u002Fcomponenti\u002Fbb-tooltip","\u002Fen\u002Fcomponents\u002Fbb-tree","\u002Fit\u002Fcomponenti\u002Fbb-tree","\u002Fen\u002Fguides\u002Fadoption-checklist","\u002Fit\u002Fguide\u002Fadoption-checklist","\u002Fen\u002Fguides\u002Fai-agents","\u002Fit\u002Fguide\u002Fai-agents","\u002Fen\u002Fguides\u002Fcoherence","\u002Fit\u002Fguide\u002Fcoherence","\u002Fen\u002Fguides\u002Fdesign-language","\u002Fit\u002Fguide\u002Fdesign-language","\u002Fen\u002Fguides\u002Fdesign-tokens","\u002Fit\u002Fguide\u002Fdesign-tokens","\u002Fen\u002Fguides\u002Ffetching-data","\u002Fit\u002Fguide\u002Ffetching-data","\u002Fen\u002Fguides\u002Ficons","\u002Fit\u002Fguide\u002Ficons","\u002Fen\u002Fguides\u002Finertia","\u002Fit\u002Fguide\u002Finertia","\u002Fen\u002Fguides\u002Finstallation","\u002Fit\u002Fguide\u002Finstallation","\u002Fen\u002Fguides\u002Fmigration","\u002Fit\u002Fguide\u002Fmigration","\u002Fen\u002Fguides\u002Fnuxt","\u002Fit\u002Fguide\u002Fnuxt","\u002Fen\u002Fguides\u002Foptions-and-items","\u002Fit\u002Fguide\u002Foptions-and-items","\u002Fen\u002Fguides\u002Fpassthrough","\u002Fit\u002Fguide\u002Fpassthrough","\u002Fen\u002Fguides\u002Fpreset-components","\u002Fit\u002Fguide\u002Fpreset-components","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",[135,150,162,186,198,242,275,311,332,353,365,371],{"label":136,"entries":137},"Getting started",[138,142,146],{"title":139,"path":140,"order":141},"Installation","\u002Fguides\u002Finstallation",1,{"title":143,"path":144,"order":145},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"title":147,"path":148,"order":149},"Adoption checklist","\u002Fguides\u002Fadoption-checklist",3,{"label":151,"entries":152},"Design system",[153,156,159],{"title":154,"path":155,"order":141},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":157,"path":158,"order":145},"Design language","\u002Fguides\u002Fdesign-language",{"title":160,"path":161,"order":149},"Passthrough","\u002Fguides\u002Fpassthrough",{"label":163,"entries":164},"Playbooks",[165,168,171,174,178,182],{"title":166,"path":167,"order":141},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":169,"path":170,"order":145},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":172,"path":173,"order":149},"Coherence","\u002Fguides\u002Fcoherence",{"title":175,"path":176,"order":177},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":179,"path":180,"order":181},"Icons","\u002Fguides\u002Ficons",5,{"title":183,"path":184,"order":185},"Preset components","\u002Fguides\u002Fpreset-components",6,{"label":187,"entries":188},"Ecosystem",[189,192,195],{"title":190,"path":191,"order":141},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":193,"path":194,"order":145},"Nuxt","\u002Fguides\u002Fnuxt",{"title":196,"path":197,"order":149},"AI agents","\u002Fguides\u002Fai-agents",{"label":199,"entries":200},"Inputs",[201,204,207,210,213,216,219,222,226,230,234,238],{"title":202,"path":203,"component":202,"order":141},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":205,"path":206,"component":205,"order":145},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":208,"path":209,"component":208,"order":149},"BbCalendar","\u002Fcomponents\u002Fbb-calendar",{"title":211,"path":212,"component":211,"order":149},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":214,"path":215,"component":214,"order":177},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":217,"path":218,"component":217,"order":181},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":220,"path":221,"component":220,"order":185},"BbForm","\u002Fcomponents\u002Fbb-form",{"title":223,"path":224,"component":223,"order":225},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":227,"path":228,"component":227,"order":229},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":231,"path":232,"component":231,"order":233},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":235,"path":236,"component":235,"order":237},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":239,"path":240,"component":239,"order":241},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":243,"entries":244},"Selection",[245,248,251,254,257,260,263,266,269,272],{"title":246,"path":247,"component":246,"order":141},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":249,"path":250,"component":249,"order":145},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":252,"path":253,"component":252,"order":149},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":255,"path":256,"component":255,"order":177},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":258,"path":259,"component":258,"order":181},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":261,"path":262,"component":261,"order":185},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":264,"path":265,"component":264,"order":225},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":267,"path":268,"component":267,"order":229},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":270,"path":271,"component":270,"order":233},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":273,"path":274,"component":273,"order":237},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":276,"entries":277},"Overlay",[278,281,284,287,290,293,296,299,302,305,308],{"title":279,"path":280,"component":279,"order":141},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":282,"path":283,"component":282,"order":145},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":285,"path":286,"component":285,"order":149},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":288,"path":289,"component":288,"order":177},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":291,"path":292,"component":291,"order":181},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":294,"path":295,"component":294,"order":185},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":297,"path":298,"component":297,"order":225},"BbHoverCard","\u002Fcomponents\u002Fbb-hover-card",{"title":300,"path":301,"component":300,"order":225},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":303,"path":304,"component":303,"order":229},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":306,"path":307,"component":306,"order":233},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":309,"path":310,"component":309,"order":237},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":312,"entries":313},"Navigation",[314,317,320,323,326,329],{"title":315,"path":316,"component":315,"order":141},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":318,"path":319,"component":318,"order":145},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":321,"path":322,"component":321,"order":149},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":324,"path":325,"component":324,"order":177},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":327,"path":328,"component":327,"order":181},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":330,"path":331,"component":330,"order":185},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":333,"entries":334},"Feedback",[335,338,341,344,347,350],{"title":336,"path":337,"component":336,"order":141},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":339,"path":340,"component":339,"order":145},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":342,"path":343,"component":342,"order":149},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":345,"path":346,"component":345,"order":177},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":348,"path":349,"component":348,"order":181},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":351,"path":352,"component":351,"order":185},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":354,"entries":355},"Data Display",[356,359,362],{"title":357,"path":358,"component":357,"order":141},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":360,"path":361,"component":360,"order":145},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":363,"path":364,"component":363,"order":149},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":366,"entries":367},"Layout & Utility",[368],{"title":369,"path":370,"component":369,"order":141},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":372,"entries":373},"Other",[374],{"title":375,"path":376,"component":375,"order":141},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",null,{"id":379,"title":321,"body":380,"component":321,"description":759,"extension":760,"group":312,"meta":761,"navigation":762,"order":149,"path":322,"sections":763,"seo":769,"stem":770,"__hash__":771},"docs_en\u002Fcomponents\u002Fbb-collapsible.md",{"type":381,"value":382,"toc":752},"minimark",[383,424,429,437,440,444,459,479,493,499,502,528,531,534,540,548,554,557,560,574,589,595,598,601,608,620,626,629,652,665,719,748],[384,385,386,394],"when",{},[387,388,389,390,393],"p",{},"Reach for ",[391,392,321],"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.",[395,396,398],"template",{"v-slot:else":397},"",[399,400,401,410,417],"ul",{},[402,403,404,409],"li",{},[405,406,407],"a",{"href":4},[391,408,315],{},", if the trigger is a title over\nthe body: it writes the button and the ARIA for you",[402,411,412,416],{},[405,413,414],{"href":76},[391,415,369],{},", if you hide nothing and\nonly want a height change to animate",[402,418,419,423],{},[405,420,421],{"href":86},[391,422,327],{},", if they are peer views of one subject and\nonly one stays visible",[387,425,426,428],{},[391,427,315],{}," is this component plus a wired header button. Everything on this\npage is true there too.",[430,431,433],"h2",{"id":432},"default",[434,435,436],"span",{},"Default",[387,438,439],{},"Bind a boolean and supply the control that flips it.",[441,442],"demo",{"name":443},"BbCollapsible\u002FBasic",[387,445,446,447,450,451,454,455,458],{},"The component cannot open or close itself. It renders ",[391,448,449],{},"model-value"," and never\nwrites it back, and it emits nothing. ",[391,452,453],{},"v-model"," compiles and works, but only as a\nprop binding, so do not wait for an ",[391,456,457],{},"update:modelValue",". Put side effects on the\ntrigger.",[387,460,461,466,467,470,471,474,475,478],{},[405,462,464],{"href":463},"\u002Fen\u002Fcomponents\u002Fbb-collapsible\u002Fapi#prop-modelValue",[391,465,449],{}," is optional\nand defaults to ",[391,468,469],{},"false",": a missing or ",[391,472,473],{},"undefined"," binding renders closed.\nInitialise the ref with ",[391,476,477],{},"ref(false)",".",[387,480,481,482,485,486,492],{},"The root is a ",[391,483,484],{},"div",", for block content (fields, paragraphs, lists), as every\ndemo on this page holds. Pass ",[405,487,489],{"href":488},"\u002Fen\u002Fcomponents\u002Fbb-collapsible\u002Fapi#prop-tag",[391,490,491],{},"tag=\"span\"","\nfor a collapsible that sits inside a paragraph.",[430,494,496],{"id":495},"trigger",[434,497,498],{},"You own the trigger",[387,500,501],{},"The component manages the region. The semantics of the control that opens it are\nyours.",[387,503,504,505,508,509,512,513,516,517,520,521,524,525,527],{},"If the trigger is a button, give it ",[391,506,507],{},"aria-expanded"," and ",[391,510,511],{},"aria-controls"," pointing\nat the collapsible's ",[391,514,515],{},"id",". Without them a screen-reader user gets a button whose\neffect is announced nowhere. That is what the ",[405,518,436],{"href":519},"#default"," demo above\nwires. ",[391,522,523],{},"bitboss-ui check"," reports a click handler that flips the ref with no\n",[391,526,507],{}," on the trigger.",[387,529,530],{},"When the trigger is already a control with a state, do not add a second one:",[441,532],{"name":533},"BbCollapsible\u002FSwitchTrigger",[387,535,536,537,539],{},"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 ",[391,538,507],{},"\nthere announces the same fact twice.",[387,541,542,543,547],{},"If you would rather not wire this, step up to\n",[405,544,545],{"href":4},[391,546,315],{},": it writes the header button for\nyou.",[430,549,551],{"id":550},"content",[434,552,553],{},"Closed content is out of reach",[387,555,556],{},"Hiding something visually is not hiding it. Here the component does that work.",[441,558],{"name":559},"BbCollapsible\u002FHiddenWhenClosed",[387,561,562,563,508,566,569,570,573],{},"Closed content is ",[391,564,565],{},"aria-hidden",[391,567,568],{},"inert",": unfocusable, unclickable, out of the\ntab order and out of the accessibility tree. Do not wrap it in a ",[391,571,572],{},"v-if",": that\nwould take the animation and the mounted state with it.",[387,575,576,577,581,582,588],{},"Nothing inside the ",[405,578,580],{"href":579},"\u002Fen\u002Fcomponents\u002Fbb-collapsible\u002Fapi#slot-default","slot"," renders until the first open, and it stays mounted from\nthen on. ",[405,583,585],{"href":584},"\u002Fen\u002Fcomponents\u002Fbb-collapsible\u002Fapi#prop-eager",[391,586,587],{},"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.",[430,590,592],{"id":591},"group",[434,593,594],{},"One region at a time",[387,596,597],{},"Several collapsibles become an exclusive group when you derive each state from\none key.",[441,599],{"name":600},"BbCollapsible\u002FExclusivePanels",[387,602,603,604,607],{},"One ",[391,605,606],{},"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.",[387,609,610,611,615,616,478],{},"When the triggers are stacked headers, you are describing an accordion: see\n",[405,612,614],{"href":613},"\u002Fen\u002Fcomponents\u002Fbb-accordion#single-open","One panel at a time",". When one region\nmust always show, the buttons are a tab strip: use\n",[405,617,618],{"href":86},[391,619,327],{},[430,621,623],{"id":622},"styling",[434,624,625],{},"Spacing and timing",[387,627,628],{},"Do not pad the collapsible itself: padding on its root stays when it closes, so\na closed region keeps that height.",[387,630,631,632,635,636,639,640,643,644,647,648,651],{},"Its inner ",[391,633,634],{},".bb-collapsible__content"," (",[391,637,638],{},"pt:content",") loses its vertical padding,\nborder and gap only while closed. Space the element you slot in, as every demo\nhere does. Both parts take an ",[391,641,642],{},"open"," state, ",[391,645,646],{},"pt:root:open"," and\n",[391,649,650],{},"pt:content:open",", for styling that should apply only while the region shows.",[387,653,654,660,661,664],{},[405,655,657],{"href":656},"\u002Fen\u002Fcomponents\u002Fbb-collapsible\u002Fapi#prop-transitionDuration",[391,658,659],{},"transition-duration"," (milliseconds, 250 by default) drives the height animation\nand the opacity fade together. Under ",[391,662,663],{},"prefers-reduced-motion: reduce"," both drop\nto near-instant.",[666,667,669,690],"migration",{"title":668},"tag narrowed",[387,670,671,674,675,678,679,682,683,685,686,689],{},[391,672,673],{},"tag"," takes only ",[391,676,677],{},"'div'"," (the default) or ",[391,680,681],{},"'span'",". A ",[391,684,434],{}," root keeps an\ninline \"Show more\" valid inside a paragraph. If you passed ",[391,687,688],{},"tag=\"section\"",", wrap\nthe component instead.",[691,692,696],"pre",{"className":693,"code":694,"language":695,"meta":397,"style":397},"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",[391,697,698,704,709,714],{"__ignoreMap":397},[434,699,701],{"class":700,"line":141},"line",[434,702,703],{},"- \u003CBbCollapsible v-model=\"open\" tag=\"section\">…\u003C\u002FBbCollapsible>\n",[434,705,706],{"class":700,"line":145},[434,707,708],{},"+ \u003Csection>\n",[434,710,711],{"class":700,"line":149},[434,712,713],{},"+   \u003CBbCollapsible v-model=\"open\">…\u003C\u002FBbCollapsible>\n",[434,715,716],{"class":700,"line":177},[434,717,718],{},"+ \u003C\u002Fsection>\n",[387,720,721,722,725,726,729,730,733,734,736,737,740,741,508,744,747],{},"Three classes are yours: ",[391,723,724],{},".bb-collapsible"," on the root, with\n",[391,727,728],{},".bb-collapsible--open"," \u002F ",[391,731,732],{},".bb-collapsible--closed"," tracking the state, and\n",[391,735,634],{}," on the wrapper around your slot. Style the state\nmodifiers, not the animation: the height is a ",[391,738,739],{},"grid-template-rows"," transition\nbetween ",[391,742,743],{},"0fr",[391,745,746],{},"1fr",", and overriding it is how you lose the collapse.",[749,750,751],"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":397,"searchDepth":149,"depth":149,"links":753},[754,755,756,757,758],{"id":432,"depth":145,"text":436},{"id":495,"depth":145,"text":498},{"id":550,"depth":145,"text":553},{"id":591,"depth":145,"text":594},{"id":622,"depth":145,"text":625},"A region that animates open and closed from a boolean you own, with your own trigger.","md",{},true,[764,765,766,767,768],{"id":432,"title":436},{"id":495,"title":498},{"id":550,"title":553},{"id":591,"title":594},{"id":622,"title":625},{"title":321,"description":759},"components\u002Fbb-collapsible","IIF2n88r7yE6uMPvsx4Z53lytNzSQHpbxoscn4RBkJY",{"name":321,"slug":773,"group":312,"description":774,"entrypoint":775,"docs":776,"props":779,"models":808,"events":809,"slots":810,"exposed":815,"pt":816,"validated":377,"migration":826},"bb-collapsible","Toggles visibility of collapsible content blocks.","bitboss-ui",{"contract":777,"source":778},"ai\u002FBbCollapsible.md","ai\u002Fsource\u002FBbCollapsible.md",[780,785,789,793,798,802],{"name":587,"type":781,"required":782,"default":469,"description":783,"note":784,"demo":550},"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.","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":786,"type":781,"required":782,"default":469,"description":787,"note":788,"demo":432},"modelValue","Used by v-model to open or close the collapsible. Optional: omitted, it renders closed.","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. Optional and `false` by default, so an omitted binding renders closed without a warning.",{"name":790,"type":791,"required":782,"default":377,"description":792,"note":377,"demo":377},"pt","PtMap\u003CBbCollapsiblePtPart, \"open\"> | undefined","Passthrough, object form: the same keys as the `pt:*` attributes without the prefix. See the `pt:\u003Cpart>` row.",{"name":794,"type":795,"required":782,"default":377,"description":796,"note":377,"demo":797},"pt:\u003Cpart>","PtValue | undefined","Passthrough, attribute form: one attribute per part, `pt:\u003Cpart>`, and per part and state, `pt:\u003Cpart>:\u003Cstate>`. Parts: `content`, `root`. States: `open`.","passthrough",{"name":673,"type":799,"required":782,"default":800,"description":801,"note":377,"demo":432},"LayoutTag | undefined","\"div\"","Element rendered as the root, and mirrored by the inner animating element — so the pair is div-in-div or span-in-span, both valid. The default `'div'` holds block content (paragraphs, lists, forms); use `'span'` inside phrasing content (a `\u003Cp>`), with inline content only.",{"name":803,"type":804,"required":782,"default":805,"description":806,"note":807,"demo":622},"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.",[],[],[811],{"name":432,"type":812,"description":813,"note":814,"demo":550},"any","The collapsible body content that is shown or hidden based on `modelValue`. When `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: padding on the root stays when it closes, and the inner `.bb-collapsible__content` (`pt:content`) loses its vertical padding, border and gap only while closed.",[],{"parts":817,"states":823},[818,821],{"name":819,"description":820},"root","The outer element.",{"name":550,"description":822},"The region that animates open and closed — `inert` while closed.",[824],{"name":642,"description":825},"Component-wide: the content is open (follows `v-model`).",{"removed":827,"renamed":828},[],[],1793055138689]