[{"data":1,"prerenderedAt":1594},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":134,"api-none":377,"page-en-\u002Fcomponents\u002Fbb-tabs":378,"pt-showcase-BbTabs":1366},{"\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":327,"body":380,"component":327,"description":1350,"extension":1351,"group":312,"meta":1352,"navigation":1353,"order":181,"path":328,"sections":1354,"seo":1363,"stem":1364,"__hash__":1365},"docs_en\u002Fcomponents\u002Fbb-tabs.md",{"type":381,"value":382,"toc":1340},"minimark",[383,455,458,466,480,484,494,501,507,510,513,516,519,533,539,542,545,561,604,623,677,683,686,689,703,710,713,729,765,771,779,782,804,822,869,897,903,913,916,931,941,944,952,955,992,998,1018,1021,1081,1102,1105,1108,1125,1131,1152,1155,1178,1336],[384,385,386,399],"when",{},[387,388,389,390,393,394,398],"p",{},"Use ",[391,392,327],"code",{}," to divide ",[395,396,397],"strong",{},"one"," screen into peer sections a reader flips between\nwithout leaving the page: a project's Overview, Activity, Members. Exactly one is\nvisible at a time.",[400,401,403],"template",{"v-slot:else":402},"",[404,405,406,415,422,429,436,449,452],"ul",{},[407,408,409,414],"li",{},[410,411,412],"a",{"href":4},[391,413,315],{},", if the reader may want two\nsections open at once",[407,416,417,421],{},[410,418,419],{"href":26},[391,420,321],{},", if there is one region and\nthe trigger belongs somewhere else",[407,423,424,428],{},[410,425,426],{"href":16},[391,427,318],{},", if it is hierarchy",[407,430,431,435],{},[410,432,433],{"href":58},[391,434,324],{},", if you are paging a result set",[407,437,438,439,444,445,448],{},"A ",[410,440,442],{"href":441},"\u002Fen\u002Fcomponents\u002Fbb-radio-group#tabs-look",[391,443,255],{}," with\n",[391,446,447],{},"variant=\"pill\"",", if the strip picks a value a form or a filter submits\nrather than switching what the page shows",[407,450,451],{},"A wizard, if they are steps in a flow",[407,453,454],{},"A page of their own, if the sections are genuinely separate destinations",[387,456,457],{},"Keep labels short. If the strip regularly overflows, split the page instead.",[459,460,462],"h2",{"id":461},"default",[463,464,465],"span",{},"Default",[387,467,468,469,475,476,479],{},"Pass ",[410,470,472],{"href":471},"\u002Fen\u002Fcomponents\u002Fbb-tabs\u002Fapi#prop-items",[391,473,474],{},"items",", bind the active ",[391,477,478],{},"value",", and give every value a slot. That\nslot is the panel.",[481,482],"demo",{"name":483},"BbTabs\u002FBasic",[387,485,486,487,493],{},"Without ",[410,488,490],{"href":489},"\u002Fen\u002Fcomponents\u002Fbb-tabs\u002Fapi#model-modelValue",[391,491,492],{},"v-model",", the first enabled tab is selected. If every tab is disabled,\nthe strip stays inert.",[495,496,498],"migration",{"title":497},"BbTab → BbTabs",[387,499,500],{},"The tag changed, so the compiler tells you here. The old type names survive as\ndeprecated re-exports. Everything else that changed is a rename the compiler\ncannot see, flagged in the section where you meet it.",[459,502,504],{"id":503},"keyboard",[463,505,506],{},"Keyboard and roles",[387,508,509],{},"A tab strip is one widget with one tab stop, not three buttons in a row.",[481,511],{"name":512},"BbTabs\u002FKeyboard",[387,514,515],{},"The component wires the tab roles and relationships. Tab enters the strip once;\narrow keys move and select, Home and End jump to the edges, and Tab continues\nto the active panel. Disabled items remain visible and are skipped.",[387,517,518],{},"Tab lands on the panel itself. Because arrowing selects, do not fetch on every\nactivation without caching.",[387,520,521,522,525,526,528,529,532],{},"With more than one strip on a page, name each with an ",[391,523,524],{},"aria-label"," on ",[391,527,327],{},"\n(",[391,530,531],{},"aria-label=\"Invoice sections\"","): it lands on the tablist, which is what a\nscreen reader announces.",[459,534,536],{"id":535},"labels",[463,537,538],{},"Rich labels",[387,540,541],{},"A label can carry more than text: a count or an icon.",[481,543],{"name":544},"BbTabs\u002FLabels",[387,546,389,547,553,554,560],{},[410,548,550],{"href":549},"\u002Fen\u002Fcomponents\u002Fbb-tabs\u002Fapi#slot-%3Cvalue%3E:label",[391,551,552],{},"\u003Cvalue>:label"," for one tab and ",[410,555,557],{"href":556},"\u002Fen\u002Fcomponents\u002Fbb-tabs\u002Fapi#slot-label",[391,558,559],{},"label"," for every tab. Keep these slots\npresentational: a nested button or link creates an invalid interactive control.",[387,562,563,564,566,567,570,571,574,575,578,579,582,583,586,587,590,591,593,594,598,599,603],{},"Slot names are the item's ",[391,565,478],{}," in ",[395,568,569],{},"kebab-case",": ",[391,572,573],{},"inReview",", ",[391,576,577],{},"In Review"," and\n",[391,580,581],{},"in_review"," all become ",[391,584,585],{},"in-review",", so the label slot is ",[391,588,589],{},"#in-review:label",".\nThe ",[391,592,478],{}," itself, and so the ",[410,595,596],{"href":489},[391,597,492],{},", stays raw; only slots, DOM ids and\n",[410,600,602],{"href":601},"#navigation","the URL"," use the slug.",[387,605,606,607,610,611,614,615,618,619,622],{},"For generated items, import ",[391,608,609],{},"slotKey"," from ",[391,612,613],{},"bitboss-ui"," and write\n",[391,616,617],{},"#[slotKey(item.value)]",". A bare ",[391,620,621],{},"#[item.value]"," over a camelCase value names a\nslot that never matches, and the panel stays empty.",[495,624,626,658],{"title":625},"key → value, and the label slot names changed",[387,627,628,629,632,633,635,636,638,639,642,643,646,647,649,650,653,654,657],{},"In v2 each item had a ",[391,630,631],{},"key","; it is now ",[391,634,478],{},", and the ",[391,637,492],{}," carries it.\nThe per-tab label slot was ",[391,640,641],{},"#label-\u003Ckey>"," and the panel slot was the raw key.\nBoth now come from the value in kebab-case, the label slot as ",[391,644,645],{},"#\u003Cvalue>:label",",\nand its scope says ",[391,648,559],{}," (it said ",[391,651,652],{},"text","). A slot whose name no longer matches\nrenders nothing; ",[391,655,656],{},"npx bitboss-ui check --fix"," renames the item fields and the\nslots when the items are in the same file.",[659,660,664],"pre",{"className":661,"code":662,"language":663,"meta":402,"style":402},"language-diff shiki shiki-themes github-light-high-contrast github-dark-high-contrast","- \u003Ctemplate #label-in-review=\"{ item }\">…\u003C\u002Ftemplate>\n+ \u003Ctemplate #in-review:label=\"{ label }\">…\u003C\u002Ftemplate>\n","diff",[391,665,666,672],{"__ignoreMap":402},[463,667,669],{"class":668,"line":141},"line",[463,670,671],{},"- \u003Ctemplate #label-in-review=\"{ item }\">…\u003C\u002Ftemplate>\n",[463,673,674],{"class":668,"line":145},[463,675,676],{},"+ \u003Ctemplate #in-review:label=\"{ label }\">…\u003C\u002Ftemplate>\n",[459,678,680],{"id":679},"panes",[463,681,682],{},"What happens on a switch",[387,684,685],{},"Only the active panel is mounted. Switching away unmounts it, and switching back\nmounts it fresh.",[481,687],{"name":688},"BbTabs\u002FEagerPanel",[387,690,691,692,698,699,702],{},"Type in both drafts, open Description, then come back: only the eager review\nkept its text. Local form, scroll and chart state goes the same way, so keep it\nin the parent or set ",[410,693,695],{"href":694},"\u002Fen\u002Fcomponents\u002Fbb-tabs\u002Fapi#prop-eager",[391,696,697],{},"eager"," on the affected item. An eager panel also\nappears in server-rendered HTML, but still uses ",[391,700,701],{},"display: none"," while inactive.",[387,704,705,706,709],{},"The switch itself animates on two axes: the panels slide sideways and the\ncontainer glides between panel heights, as in the ",[410,707,465],{"href":708},"#default"," demo. A mode\ntoggle reads better without either.",[481,711],{"name":712},"BbTabs\u002FNoAnimation",[387,714,715,721,722,728],{},[410,716,718],{"href":717},"\u002Fen\u002Fcomponents\u002Fbb-tabs\u002Fapi#prop-disableAnimateX",[391,719,720],{},"disable-animate-x"," removes the slide. ",[410,723,725],{"href":724},"\u002Fen\u002Fcomponents\u002Fbb-tabs\u002Fapi#prop-disableAnimateY",[391,726,727],{},"disable-animate-y"," removes height\nanimation, which helps when panels run their own transitions or virtualization.\nReduced-motion preferences are respected automatically.",[495,730,732,750],{"title":731},"animateX \u002F animateY inverted",[387,733,734,735,738,739,742,743,745,746,749],{},"The compiler cannot see this one. A bare ",[391,736,737],{},"animate-x"," was already the default:\ndelete it. An ",[391,740,741],{},":animate-y=\"false\""," becomes ",[391,744,727],{},". Left as they\nare, both fall into ",[391,747,748],{},"$attrs"," and land on the root element as plain attributes, so\nthe animation you switched off comes back. A development build warns by name; a\nproduction build does not.",[659,751,753],{"className":661,"code":752,"language":663,"meta":402,"style":402},"- \u003CBbTab :items=\"items\" animate-x :animate-y=\"false\" \u002F>\n+ \u003CBbTabs :items=\"items\" disable-animate-y \u002F>\n",[391,754,755,760],{"__ignoreMap":402},[463,756,757],{"class":668,"line":141},[463,758,759],{},"- \u003CBbTab :items=\"items\" animate-x :animate-y=\"false\" \u002F>\n",[463,761,762],{"class":668,"line":145},[463,763,764],{},"+ \u003CBbTabs :items=\"items\" disable-animate-y \u002F>\n",[459,766,768],{"id":767},"navigation",[463,769,770],{},"The active tab in the URL",[387,772,773,778],{},[410,774,776],{"href":775},"\u002Fen\u002Fcomponents\u002Fbb-tabs\u002Fapi#prop-navigation",[391,777,767],{}," keeps the active tab in the URL query, which makes it deep-linkable\nand lets it survive a reload.",[481,780],{"name":781},"BbTabs\u002FUrlSync",[387,783,784,790,791,794,795,444,797,803],{},[410,785,787],{"href":786},"\u002Fen\u002Fcomponents\u002Fbb-tabs\u002Fapi#prop-queryKey",[391,788,789],{},"query-key"," names the parameter and defaults to ",[391,792,793],{},"tab",". Pair ",[391,796,767],{},[410,798,800],{"href":799},"\u002Fen\u002Fcomponents\u002Fbb-tabs\u002Fapi#prop-replace",[391,801,802],{},"replace",", or every tab change adds a browser-history entry.",[387,805,806,807,809,810,813,814,817,818,821],{},"The URL carries the same kebab-case slug as the slot names, never the raw\nvalue: ",[391,808,573],{}," is written as ",[391,811,812],{},"?tab=in-review",". The component writes and reads\nthe slug itself. When ",[395,815,816],{},"other"," code reads the parameter, such as a server\nroute, compare it with ",[391,819,820],{},"slotKey(value)",", not with the raw value. Values that\nare already lowercase and hyphenated read the same either way.",[387,823,824,825,829,830,833,834,840,841,844,845,847,848,851,852,854,855,857,858,864,865,868],{},"Prerendered HTML holds the fallback tab, because no query exists at build time.\nChoose a useful fallback, and mark deep-linked content ",[410,826,827],{"href":694},[391,828,697],{}," when it must\nappear in that HTML. Back and Forward re-select the tab. For Inertia navigation, add ",[391,831,832],{},"href"," to items and\n",[410,835,837],{"href":836},"\u002Fen\u002Fcomponents\u002Fbb-tabs\u002Fapi#prop-server",[391,838,839],{},"server"," for ",[391,842,843],{},"router.visit",", and point ",[391,846,789],{}," at the parameter your\nlinks already use: the component writes ",[391,849,850],{},"?\u003Cquery-key>=\u003Cslug>"," onto the ",[391,853,832],{},". A ",[391,856,839],{}," strip activates manually: arrow keys move focus\nand Enter or Space opens the tab, so arrowing past a tab never starts a visit\n(",[410,859,861],{"href":860},"\u002Fen\u002Fcomponents\u002Fbb-tabs\u002Fapi#prop-manualActivation",[391,862,863],{},"manual-activation"," set to ",[391,866,867],{},"false"," restores selection on arrow).",[495,870,872,882],{"title":871},"querykey → queryKey",[387,873,874,875,877,878,881],{},"The all-lowercase spelling type-checks, falls through to ",[391,876,748],{},", and the URL\nsync quietly moves to the default ",[391,879,880],{},"?tab=",". A development build warns; a\nproduction build does not. v2 deep links carrying a raw value also fall back to\nthe default tab. Add a redirect if those links matter.",[659,883,885],{"className":661,"code":884,"language":663,"meta":402,"style":402},"- \u003CBbTab :items=\"items\" navigation querykey=\"section\" \u002F>\n+ \u003CBbTabs :items=\"items\" navigation query-key=\"section\" replace \u002F>\n",[391,886,887,892],{"__ignoreMap":402},[463,888,889],{"class":668,"line":141},[463,890,891],{},"- \u003CBbTab :items=\"items\" navigation querykey=\"section\" \u002F>\n",[463,893,894],{"class":668,"line":145},[463,895,896],{},"+ \u003CBbTabs :items=\"items\" navigation query-key=\"section\" replace \u002F>\n",[459,898,900],{"id":899},"layout",[463,901,902],{},"Width, direction and overflow",[387,904,905,908,909,912],{},[391,906,907],{},"block"," makes the strip full width, ",[391,910,911],{},"direction=\"vertical\""," stacks it, and it\nscrolls when the triggers don't fit.",[481,914],{"name":915},"BbTabs\u002FBlockStrip",[387,917,918,923,924,930],{},[410,919,921],{"href":920},"\u002Fen\u002Fcomponents\u002Fbb-tabs\u002Fapi#prop-block",[391,922,907],{}," makes horizontal triggers equal width. ",[410,925,927],{"href":926},"\u002Fen\u002Fcomponents\u002Fbb-tabs\u002Fapi#prop-compact",[391,928,929],{},"compact"," aligns the strip with\ncompact fields.",[495,932,934],{"title":933},"block replaces your full-width class",[387,935,936,937,940],{},"Delete the class your v2 project used for full width. A leftover rule can\noverride ",[391,938,939],{},"--block"," without warning.",[481,942],{"name":943},"BbTabs\u002FVertical",[387,945,946,948,949,951],{},[391,947,911],{}," stacks triggers beside the panels, and ",[391,950,907],{}," stretches\nthem to the width of the column. Horizontal strips scroll when needed and keep\nthe active trigger in view, including one opened from a deep link.",[481,953],{"name":954},"BbTabs\u002FScrollArrows",[387,956,957,963,964,970,971,574,974,574,977,980,981,984,985,988,989,991],{},[410,958,960],{"href":959},"\u002Fen\u002Fcomponents\u002Fbb-tabs\u002Fapi#slot-wrapper:prepend",[391,961,962],{},"wrapper:prepend"," and ",[410,965,967],{"href":966},"\u002Fen\u002Fcomponents\u002Fbb-tabs\u002Fapi#slot-wrapper:append",[391,968,969],{},"wrapper:append"," render before and after the scrollable list,\noutside it. Each receives ",[391,972,973],{},"canScrollLeft",[391,975,976],{},"canScrollRight",[391,978,979],{},"isScrolling"," and a\n",[391,982,983],{},"scroll('left' | 'right')"," callback that pages the strip by about 80% of its\nwidth. Bind each arrow's ",[391,986,987],{},"disabled"," to the matching flag. These buttons are your\nmarkup, so an icon-only arrow needs an ",[391,990,524],{}," you write yourself.",[459,993,995],{"id":994},"composition",[463,996,997],{},"Splitting the strip from the panels",[387,999,1000,1001,1005,1006,840,1008,574,1011,963,1014,1017],{},"When the layout needs markup ",[1002,1003,1004],"em",{},"between"," the triggers and the panels, swap\n",[391,1007,327],{},[391,1009,1010],{},"BbTabsRoot",[391,1012,1013],{},"BbTabsList",[391,1015,1016],{},"BbTabsPanels",".",[481,1019],{"name":1020},"BbTabs\u002FSplitLayout",[387,1022,1023,1025,1026,1028,1029,1032,1033,1035,1036,1039,1040,574,1043,574,1046,574,1049,525,1052,1054,1055,1058,1059,1061,1062,1065,1066,574,1068,1071,1072,1074,1075,1078,1079,1017],{},[391,1024,1010],{}," takes the props of ",[391,1027,327],{}," and renders no element, so the list\nand the panels can sit anywhere below it. Its ",[391,1030,1031],{},"variant"," is only the default: a\n",[391,1034,1013],{}," can take its own. It takes no ",[391,1037,1038],{},"pt"," either: style the pieces with\ntheir own (",[391,1041,1042],{},"pt:root",[391,1044,1045],{},"pt:list",[391,1047,1048],{},"pt:item",[391,1050,1051],{},"pt:indicator",[391,1053,1013],{},", where\n",[391,1056,1057],{},"root"," is what ",[391,1060,327],{}," calls ",[391,1063,1064],{},"wrapper","; ",[391,1067,1042],{},[391,1069,1070],{},"pt:panel"," on\n",[391,1073,1016],{},"). The demo runs the card's own rule under the strip and turns the\nstrip's baseline off with ",[391,1076,1077],{},"--list-border: transparent"," on the list's ",[391,1080,1057],{},[387,1082,1083,1085,1086,574,1089,574,1092,963,1095,1098,1099,1101],{},[391,1084,1010],{},"'s default slot hands you ",[391,1087,1088],{},"current",[391,1090,1091],{},"goTo",[391,1093,1094],{},"isFirst",[391,1096,1097],{},"isLast",",\nenough for a section title or Previous and Next buttons without a ref. Use plain\n",[391,1100,327],{}," when the strip sits directly over its panels.",[387,1103,1104],{},"To steer a group from outside its tree, there is a composable instead:",[481,1106],{"name":1107},"BbTabs\u002FRemoteControl",[387,1109,468,1110,1113,1114,1120,1121,1124],{},[391,1111,1112],{},"useBbTabsContext(id)"," the same explicit ",[410,1115,1117],{"href":1116},"\u002Fen\u002Fcomponents\u002Fbb-tabs\u002Fapi#prop-id",[391,1118,1119],{},"id"," as the tabs; generated ids\nare not addressable. The registry is client-only, so wait for ",[391,1122,1123],{},"isReady"," before\ncalling the handle.",[459,1126,1128],{"id":1127},"styling",[463,1129,1130],{},"Variants and strip styling",[387,1132,1133,1138,1139,1142,1143,1145,1146,1149,1150,1017],{},[410,1134,1136],{"href":1135},"\u002Fen\u002Fcomponents\u002Fbb-tabs\u002Fapi#prop-variant",[391,1137,1031],{}," picks the strip's look and nothing else: ",[391,1140,1141],{},"pill"," (the default) for\nviews of one list, ",[391,1144,668],{}," for the sections of a record, ",[391,1147,1148],{},"none"," for a look you\nbuild yourself through ",[391,1151,1038],{},[481,1153],{"name":1154},"BbTabs\u002FVariants",[387,1156,1157,1158,1160,1161,1164,1165,574,1168,1171,1172,1175,1176,1017],{},"A look of your own starts from ",[391,1159,1148],{}," and the strip's tokens (",[391,1162,1163],{},"--trigger-px",",\n",[391,1166,1167],{},"--indicator-bg",[391,1169,1170],{},"--active-fg","…). Pass them in ",[391,1173,1174],{},"pt.wrapper.style",": they land\ninline on the strip and win with no stylesheet. Set on an ancestor, they lose to\nthe component defaults. The sliding marker is an element of its own, reached with\n",[391,1177,1051],{},[495,1179,1181,1208,1320,1326],{"title":1180},"every class was renamed",[387,1182,1183,1184,1187,1188,1191,1192,1195,1196,1199,1200,1203,1204,1207],{},"Your old rules stop matching and the shipped styling shows through;\n",[391,1185,1186],{},"npx bitboss-ui check"," reports each leftover ",[391,1189,1190],{},".bb-*"," class in your stylesheets. The single block ",[391,1193,1194],{},".bb-tab"," became three: ",[391,1197,1198],{},".bb-tabs"," on the root,\n",[391,1201,1202],{},".bb-tabs-list"," on the strip, ",[391,1205,1206],{},".bb-tabs-panels"," around the panels.",[1209,1210,1211,1224],"table",{},[1212,1213,1214],"thead",{},[1215,1216,1217,1221],"tr",{},[1218,1219,1220],"th",{},"v2",[1218,1222,1223],{},"v3",[1225,1226,1227,1238,1249,1261,1273,1285,1297,1308],"tbody",{},[1215,1228,1229,1234],{},[1230,1231,1232],"td",{},[391,1233,1194],{},[1230,1235,1236],{},[391,1237,1198],{},[1215,1239,1240,1245],{},[1230,1241,1242],{},[391,1243,1244],{},".bb-tab__label-boundary",[1230,1246,1247],{},[391,1248,1202],{},[1215,1250,1251,1256],{},[1230,1252,1253],{},[391,1254,1255],{},".bb-tab__label-container",[1230,1257,1258],{},[391,1259,1260],{},".bb-tabs-list__list",[1215,1262,1263,1268],{},[1230,1264,1265],{},[391,1266,1267],{},".bb-tab__btn",[1230,1269,1270],{},[391,1271,1272],{},".bb-tabs-list__item",[1215,1274,1275,1280],{},[1230,1276,1277],{},[391,1278,1279],{},".bb-tab__btn--active",[1230,1281,1282],{},[391,1283,1284],{},".bb-tabs-list__item--active",[1215,1286,1287,1292],{},[1230,1288,1289],{},[391,1290,1291],{},".bb-tab__label",[1230,1293,1294],{},[391,1295,1296],{},".bb-tabs__trigger-label",[1215,1298,1299,1304],{},[1230,1300,1301],{},[391,1302,1303],{},".bb-tab__panes-container",[1230,1305,1306],{},[391,1307,1206],{},[1215,1309,1310,1315],{},[1230,1311,1312],{},[391,1313,1314],{},".bb-tab__pane",[1230,1316,1317],{},[391,1318,1319],{},".bb-tabs__panel",[387,1321,1322,1325],{},[391,1323,1324],{},"rg -n 'bb-tab(__|--)|\\.bb-tab\\b'"," finds every v2 name and no v3 one.",[387,1327,1328,1329,963,1331,1333,1334,1017],{},"The strip also holds the ",[391,1330,962],{},[391,1332,969],{}," slots, so\nreplace broad child selectors with ",[391,1335,1260],{},[1337,1338,1339],"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":402,"searchDepth":149,"depth":149,"links":1341},[1342,1343,1344,1345,1346,1347,1348,1349],{"id":461,"depth":145,"text":465},{"id":503,"depth":145,"text":506},{"id":535,"depth":145,"text":538},{"id":679,"depth":145,"text":682},{"id":767,"depth":145,"text":770},{"id":899,"depth":145,"text":902},{"id":994,"depth":145,"text":997},{"id":1127,"depth":145,"text":1130},"Peer views of one subject behind a strip of triggers, with the active tab in the URL.","md",{},true,[1355,1356,1357,1358,1359,1360,1361,1362],{"id":461,"title":465},{"id":503,"title":506},{"id":535,"title":538},{"id":679,"title":682},{"id":767,"title":770},{"id":899,"title":902},{"id":994,"title":997},{"id":1127,"title":1130},{"title":327,"description":1350},"components\u002Fbb-tabs","MFKQCdjpXY8XO3q-u_cGqQIBy4nxFK8v0Jx8gjZ57Dw",{"name":327,"slug":1367,"group":312,"description":1368,"entrypoint":613,"docs":1369,"props":1372,"models":1485,"events":1487,"slots":1493,"exposed":1512,"pt":1513,"validated":377,"migration":1546},"bb-tabs","Switches between views of one page from a row of tabs. For the tabs and their panels in different places of the layout, use BbTabsRoot with BbTabsList and BbTabsPanels.",{"contract":1370,"source":1371},"ai\u002FBbTabs.md","ai\u002Fsource\u002FBbTabs.md",[1373,1378,1381,1387,1391,1395,1398,1401,1405,1409,1413,1417,1422,1425,1429,1433,1437,1440,1444,1448,1451,1454,1458,1462,1465,1470,1475,1478,1480],{"name":907,"type":1374,"required":1375,"default":867,"description":1376,"note":1377,"demo":899},"boolean | undefined",false,"Displays the component as full width.","Full width with equal-width triggers, measured from the widest so they stay even once the strip overflows. On a vertical strip it stretches every trigger to the column width instead. It replaces the full-width class most v2 projects wrote for themselves: delete yours, or the two fight over the same declarations with nothing to say which won.",{"name":929,"type":1374,"required":1375,"default":867,"description":1379,"note":1380,"demo":899},"Adds a CSS class that applies a compact style to the component.","Drops the whole scale one notch (a 28px strip with smaller text and padding) so it lines up with compact fields.",{"name":1382,"type":1383,"required":1375,"default":1384,"description":1385,"note":1386,"demo":899},"direction","\"horizontal\" | \"vertical\" | undefined","\"horizontal\"","Direction of the tabs component.","A vertical strip becomes a column beside the panels and answers Up\u002FDown as well as Left\u002FRight. Add `block` to stretch every trigger to the column width. It also reads a `--max-w` custom property to cap its width, which is the only knob that works from an ancestor.",{"name":1388,"type":1374,"required":1375,"default":867,"description":1389,"note":1390,"demo":679},"disableAnimateX","Disables the horizontal slide transition between tab panels (enabled by default).","Inverted from v2's `animateX`, which defaulted to `true`. A leftover `:animate-x=\"false\"` type-checks, falls into `$attrs` and lands on the root as a plain attribute, so the slide comes back; dev warns by name, production does not.",{"name":1392,"type":1374,"required":1375,"default":867,"description":1393,"note":1394,"demo":679},"disableAnimateY","Disables the smooth height animation when switching between tab panels (enabled by default).","Inverted from v2's `animateY`, the same way as `disableAnimateX`. Reach for it when a panel hosts its own transitions or virtualized content that fights the height measurement.",{"name":987,"type":1374,"required":1375,"default":867,"description":1396,"note":1397,"demo":503},"Disables the component","Disables the whole group: every trigger goes disabled and keyboard navigation is inert. For a single unreachable tab, set `disabled` on its `items` entry instead: it stays visible, is skipped by the arrows, and can never be the default selection.",{"name":697,"type":1374,"required":1375,"default":867,"description":1399,"note":1400,"demo":679},"Renders every tab's panel at mount and keeps it mounted, hidden while inactive, instead of only the active one. One tab alone: its item's `eager`.","Mounts every panel from the first render and keeps it mounted, hidden while inactive; a lazy panel unmounts on every switch away and loses its state. Prefer the per-item form (`{ value, label, eager: true }`) when only one panel needs it: an eager panel costs its render on every page load. It never leaks to assistive technology: an inactive panel is `display: none` either way.",{"name":1402,"type":1403,"required":1375,"default":377,"description":1404,"note":377,"demo":377},"headers","Record\u003Cstring, string> | undefined","Additional HTTP headers forwarded to Inertia when navigation is triggered. Only meaningful in an Inertia context.",{"name":1119,"type":1406,"required":1375,"default":377,"description":1407,"note":1408,"demo":994},"string | undefined","The root's `id`, and the key `useBbTabsContext(id)` pairs by. Generated when omitted.","Also the address for `useBbTabsContext(id)`, which is how a banner or a page header outside the tabs steers them. Generated ids are not addressable, so pass one when anything outside the tree needs to reach the group.",{"name":474,"type":1410,"required":1353,"default":377,"description":1411,"note":1412,"demo":461},"BbTabsItem\u003CK>[]","Array of items that define the tabs in the component.","Each entry carries its own `disabled`, `eager`, `href`, `server` and Inertia options, and item values always win over the component-level ones. The `value` stays raw everywhere you write it (`v-model`, the item itself), but slot names, DOM ids and the URL all use `slotKey(value)`, the kebab-case slug: `inReview` and `In Review` are both `in-review`.",{"name":1414,"type":1374,"required":1375,"default":1415,"description":1416,"note":377,"demo":377},"manualActivation","`undefined` (on when `server` is set on the strip or an item)","Arrow keys (and Home \u002F End) only move focus; Enter or Space opens the tab (APG manual activation, Radix `activationMode=\"manual\"`). Unset: on when the strip or an item has `server` (else every arrow press is a visit), off elsewhere; `href` alone does not turn it on.",{"name":1418,"type":1419,"required":1375,"default":377,"description":1420,"note":1421,"demo":461},"modelValue","K | null | undefined","The active tab's `value`. Used by v-model.","The raw item `value`, never the slug. Leave it unbound (or `null`) and the first enabled tab is selected for you; if every tab is disabled the strip renders with no selection rather than throwing.",{"name":767,"type":1374,"required":1375,"default":867,"description":1423,"note":1424,"demo":767},"Synchronizes the current tab with the URL query parameter.\n\nPair it with `replace` unless a tab is genuinely a separate destination — see the `replace` prop.","Makes the strip a writer of the URL query. Pair it with `replace` unless a tab is a destination of its own, and remember that a prerendered page is built with no query at all: the static HTML always carries the fallback tab, and the URL only takes over once the page is in the browser.",{"name":1426,"type":1427,"required":1375,"default":377,"description":1428,"note":377,"demo":377},"onBefore","(() => boolean | void) | undefined","Inertia lifecycle hook — fired just before the request is sent. Return `false` to cancel the visit.",{"name":1430,"type":1431,"required":1375,"default":377,"description":1432,"note":377,"demo":377},"onCancel","(() => void) | undefined","Inertia lifecycle hook — fired when the request is cancelled.",{"name":1434,"type":1435,"required":1375,"default":377,"description":1436,"note":377,"demo":377},"onError","((errors: Record\u003Cstring, string>) => void) | undefined","Inertia lifecycle hook — fired when the server returns validation errors.",{"name":1438,"type":1431,"required":1375,"default":377,"description":1439,"note":377,"demo":377},"onFinish","Inertia lifecycle hook — fired after the visit finishes (success or error).",{"name":1441,"type":1442,"required":1375,"default":377,"description":1443,"note":377,"demo":377},"only","string[] | undefined","Limits which server-side props are refreshed during a partial Inertia reload. Only meaningful in an Inertia context.",{"name":1445,"type":1446,"required":1375,"default":377,"description":1447,"note":377,"demo":377},"onProgress","((progress: { percentage: number | undefined; }) => void) | undefined","Inertia lifecycle hook — fired when upload\u002Fdownload progress is available.",{"name":1449,"type":1431,"required":1375,"default":377,"description":1450,"note":377,"demo":377},"onStart","Inertia lifecycle hook — fired when the request starts.",{"name":1452,"type":1431,"required":1375,"default":377,"description":1453,"note":377,"demo":377},"onSuccess","Inertia lifecycle hook — fired when the visit completes successfully.",{"name":1455,"type":1456,"required":1375,"default":377,"description":1457,"note":377,"demo":377},"preserveScroll","boolean | ((props: Record\u003Cstring, unknown>) => boolean) | undefined","Controls whether Inertia preserves the scroll position after navigation. Only meaningful in an Inertia context.",{"name":1459,"type":1460,"required":1375,"default":377,"description":1461,"note":377,"demo":377},"preserveState","boolean | ((props: Record\u003Cstring, unknown>) => boolean) | null | undefined","Controls whether Inertia preserves the current component state after navigation. Only meaningful in an Inertia context.",{"name":1038,"type":1463,"required":1375,"default":377,"description":1464,"note":377,"demo":377},"({ root?: PtValue | undefined; panel?: PtValue | undefined; \"root:disabled\"?: PtValue | undefined; \"root:active\"?: PtValue | undefined; \"item:disabled\"?: PtValue | undefined; \"item:active\"?: PtValue | undefined; list?: PtValue | undefined; indicator?: PtValue | undefined; \"list:disabled\"?: PtValue | undefined; \"indicator:disabled\"?: PtValue | undefined; \"item:pill\"?: PtValue | undefined; \"item:line\"?: PtValue | undefined; \"panel:disabled\"?: PtValue | undefined; \"panel:active\"?: PtValue | undefined; wrapper?: PtValue | undefined; panels?: PtValue | undefined; \"list:active\"?: PtValue | undefined; \"indicator:active\"?: PtValue | undefined; \"wrapper:disabled\"?: PtValue | undefined; \"wrapper:active\"?: PtValue | undefined; \"panels:disabled\"?: PtValue | undefined; \"panels:active\"?: PtValue | undefined; \"item:none\"?: PtValue | undefined; } & { item?: PtValue | PtItemFn\u003CBbTabsItem\u003CK>, BbTabsPtState, \"none\" | \"pill\" | \"line\", { readonly item: BbTabsItem\u003CK>; }> | undefined; } & { \"indicator:pill\"?: PtValue | undefined; \"indicator:line\"?: PtValue | undefined; \"item:pill\"?: PtValue | undefined; \"item:line\"?: PtValue | undefined; \"list:pill\"?: PtValue | undefined; \"list:line\"?: PtValue | undefined; \"item:none\"?: PtValue | undefined; \"list:none\"?: PtValue | undefined; \"indicator:none\"?: PtValue | undefined; \"wrapper:none\"?: PtValue | undefined; \"wrapper:pill\"?: PtValue | undefined; \"wrapper:line\"?: PtValue | undefined; }) | undefined","Passthrough, object form: the same keys as the `pt:*` attributes without the prefix. See the `pt:\u003Cpart>` row.",{"name":1466,"type":1467,"required":1375,"default":377,"description":1468,"note":377,"demo":1469},"pt:\u003Cpart>","PtValue | ((ctx: PtItemCtx\u003CBbTabsItem\u003CK>, BbTabsPtState, \"none\" | \"pill\" | \"line\">) => PtItemResult) | undefined","Passthrough, attribute form: one attribute per part, `pt:\u003Cpart>`, and per part and state, `pt:\u003Cpart>:\u003Cstate>`. Parts: `indicator`, `item`, `list`, `panel`, `panels`, `root`, `wrapper`. States: `active`, `disabled`, `line`, `none`, `pill`.","passthrough",{"name":1471,"type":1406,"required":1375,"default":1472,"description":1473,"note":1474,"demo":767},"queryKey","\"tab\"","Defines the query key used for URL-based navigation.","Spelled `querykey` in v2. The all-lowercase form type-checks, falls through to `$attrs` and the sync silently moves to the default `?tab=`. The value written is the kebab-case slug (`?tab=in-review` for `inReview`), not the raw value, so anything else reading the parameter (a server, an analytics filter) must compare against `slotKey(value)`.",{"name":802,"type":1374,"required":1375,"default":867,"description":1476,"note":1477,"demo":767},"Replaces the history entry instead of pushing one when the tab changes. Recommended with `navigation`: the query keeps the tab while Back leaves the page. Leave it off when a tab is a destination of its own (a `server` visit).","Effectively required alongside `navigation`: without it every tab click is a history entry, so Back walks the reader through their clicks instead of leaving the page.",{"name":839,"type":1374,"required":1375,"default":867,"description":1479,"note":377,"demo":377},"When true and in an Inertia context, triggers a real server-side Inertia visit instead of a client-only `history.pushState`.",{"name":1031,"type":1481,"required":1375,"default":1482,"description":1483,"note":1484,"demo":1127},"keyof TabsVariantRegistry | undefined","\"pill\"","Look of the tab strip: `pill` (segmented, a sliding raised pill), `line` (a baseline with a sliding underline) or `none` (no chrome). Each is a preset of the strip's tokens; register more with the vite plugin's `tabsVariants` and style `.bb-tabs-list--\u003Cvariant>`.","`none` keeps the behaviour and the structure with no paint. Build a look of your own on it by passing the strip's tokens in `pt.wrapper.style`, which land inline and need no stylesheet.",[1486],{"name":1418,"type":1419,"note":377,"demo":461},[1488],{"name":1489,"signature":1490,"description":1491,"note":1492,"demo":461},"update:modelValue","(value: K): void","Emitted when the selected tab changes. Used by `v-model`.","The whole event surface. It also fires once on mount when the component resolves a value the parent never set (from the URL query or the first-enabled fallback), so a binding starts aligned.",[1494,1499,1502,1505,1509],{"name":1495,"type":1496,"description":1497,"note":1498,"demo":679},"\u003Cvalue>","BbTabsSlotProps\u003CK>","One tab's content panel, by the tab's `value` through `slotKey`; no fallback (an empty panel).","The panel. Its name is the value in kebab-case (`billingInfo` and `billing_info` are `#billing-info`); with `items` generated, write `#[slotKey(item.value)]` rather than restating the rule. Only the active panel is mounted unless it is `eager`.",{"name":552,"type":1496,"description":1500,"note":1501,"demo":535},"One tab trigger's label, by the tab's `value` through `slotKey`; beats `label`, which beats the item's `label` text.","The value in kebab-case: `inReview` and `In Review` are both `#in-review:label`. Presentation only, like `label`.",{"name":559,"type":1496,"description":1503,"note":1504,"demo":535},"Fallback slot used for all tab labels when no per-tab `\u003Cvalue>:label` slot is provided.","The fallback for every trigger; a `\u003Cvalue>:label` slot beats it for that one tab. Keep it presentational: the trigger is already the control, so a nested button or link is invalid and steals the click.",{"name":969,"type":1506,"description":1507,"note":1508,"demo":899},"BbTabsScrollSlotProps","Content rendered after the scrollable tab label list (e.g. a right scroll arrow).","The trailing counterpart of `wrapper:prepend`. Bind each arrow to `canScrollLeft` \u002F `canScrollRight` so it dims at the ends of the strip.",{"name":962,"type":1506,"description":1510,"note":1511,"demo":899},"Content rendered before the scrollable tab label list (e.g. a left scroll arrow).","Rendered outside the scrollable list, so it stays put while the strip moves. The buttons are your markup, which means an icon-only arrow needs an `aria-label` you write.",[],{"parts":1514,"states":1534},[1515,1517,1519,1522,1525,1528,1531],{"name":1057,"description":1516},"The tabs' outer element, around the strip and the panels.",{"name":1064,"description":1518},"The strip's outer element: the `wrapper:prepend` slot, the triggers, the `wrapper:append` slot. `BbTabsList`'s root in a split layout.",{"name":1520,"description":1521},"list","The `role=\"tablist\"` row the triggers sit in — it scrolls when they overflow, and the indicator slides inside it.",{"name":1523,"description":1524},"item","One tab trigger — a broadcast resolved per tab with its own `active` \u002F `disabled`. Also takes a per-item function, called with the tab's descriptor.",{"name":1526,"description":1527},"indicator","The marker sliding under the active trigger: the pill, or the bar of the `line` variant. Its position and size are measured.",{"name":1529,"description":1530},"panels","The element around the panels. `BbTabsPanels`'s root in a split layout.",{"name":1532,"description":1533},"panel","One tab panel — a broadcast; `panel:active` is the panel on show. Takes no function.",[1535,1538,1540,1542,1544],{"name":1536,"description":1537},"active","Per node, on `item` and `panel`: the selected tab's trigger and its shown panel.",{"name":987,"description":1539},"On every part while the whole tabs is `disabled`; per node on `item`: a tab that is disabled.",{"name":668,"description":1541},"On the strip's parts: `variant: 'line'`. Below the real states, like every variant.",{"name":1148,"description":1543},"On the strip's parts: `variant: 'none'`. Below the real states, like every variant.",{"name":1141,"description":1545},"On the strip's parts: `variant: 'pill'`. Merged after the part's base entry and before its states, so the real states still win.",{"removed":1547,"renamed":1581},[1548,1555,1558,1565,1568,1574,1578],{"name":1549,"surface":1550,"replacedBy":1388,"hint":377,"since":1551,"migration":1552,"silent":1353,"fix":1553},"animateX","prop","3.0.0-alpha.1","ai\u002Fguides\u002Fmigration\u002Fcomponents\u002Fbb-tabs.md",{"kind":1554},"invert",{"name":1556,"surface":1550,"replacedBy":1392,"hint":377,"since":1551,"migration":1552,"silent":1353,"fix":1557},"animateY",{"kind":1554},{"name":1559,"surface":1560,"replacedBy":969,"hint":377,"since":1561,"migration":1562,"silent":1353,"fix":1563},"header:append","slot","3.0.0-beta.36","ai\u002Fguides\u002Fmigration\u002Fv3-beta-css-classes.md",{"kind":1564},"rename",{"name":1566,"surface":1560,"replacedBy":962,"hint":377,"since":1561,"migration":1562,"silent":1353,"fix":1567},"header:prepend",{"kind":1564},{"name":1569,"surface":1523,"replacedBy":1570,"hint":1571,"since":1572,"migration":1552,"silent":1353,"fix":1573},"items[].key","items[].value","a tab's identity: what `v-model` holds and its `#\u003Cvalue>` \u002F `#\u003Cvalue>:label` slots; `check --fix` renames it","3.0.0-beta.49",{"kind":1564},{"name":1575,"surface":1560,"replacedBy":1576,"hint":377,"since":377,"migration":1552,"silent":1353,"fix":1577},"label:\u003Cx>","\u003Cx>:label",{"kind":1564},{"name":1579,"surface":1550,"replacedBy":1471,"hint":377,"since":1551,"migration":1552,"silent":1353,"fix":1580},"querykey",{"kind":1564},[1582,1584,1586,1588,1590,1592],{"from":1549,"to":1388,"surface":1550,"since":1551,"migration":1552,"fix":1583},{"kind":1554},{"from":1556,"to":1392,"surface":1550,"since":1551,"migration":1552,"fix":1585},{"kind":1554},{"from":1559,"to":969,"surface":1560,"since":1561,"migration":1562,"fix":1587},{"kind":1564},{"from":1566,"to":962,"surface":1560,"since":1561,"migration":1562,"fix":1589},{"kind":1564},{"from":1575,"to":1576,"surface":1560,"since":377,"migration":1552,"fix":1591},{"kind":1564},{"from":1579,"to":1471,"surface":1550,"since":1551,"migration":1552,"fix":1593},{"kind":1564},1793055145578]