[{"data":1,"prerenderedAt":1113},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":124,"api-none":352,"page-en-\u002Fcomponents\u002Fbb-tree":353,"pt-showcase-BbTree":1031},{"\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-checkbox":20,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":21,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":22,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":23,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":24,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":25,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":26,"\u002Fen\u002Fcomponents\u002Fbb-color-input":27,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":28,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":29,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":30,"\u002Fen\u002Fcomponents\u002Fbb-confirm":31,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":32,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":33,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":34,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":35,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":36,"\u002Fen\u002Fcomponents\u002Fbb-dialog":37,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":38,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":39,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":40,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":41,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":42,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":43,"\u002Fit\u002Fcomponenti\u002Fbb-form":44,"\u002Fen\u002Fcomponents\u002Fbb-form":45,"\u002Fit\u002Fcomponenti\u002Fbb-icon":46,"\u002Fen\u002Fcomponents\u002Fbb-icon":47,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":48,"\u002Fen\u002Fcomponents\u002Fbb-indicator":49,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":50,"\u002Fen\u002Fcomponents\u002Fbb-number-input":51,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":52,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":53,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":54,"\u002Fen\u002Fcomponents\u002Fbb-pagination":55,"\u002Fit\u002Fcomponenti\u002Fbb-popover":56,"\u002Fen\u002Fcomponents\u002Fbb-popover":57,"\u002Fit\u002Fcomponenti\u002Fbb-progress":58,"\u002Fen\u002Fcomponents\u002Fbb-progress":59,"\u002Fit\u002Fcomponenti\u002Fbb-radio":60,"\u002Fen\u002Fcomponents\u002Fbb-radio":61,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":62,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":63,"\u002Fit\u002Fcomponenti\u002Fbb-rating":64,"\u002Fen\u002Fcomponents\u002Fbb-rating":65,"\u002Fit\u002Fcomponenti\u002Fbb-select":66,"\u002Fen\u002Fcomponents\u002Fbb-select":67,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":68,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":69,"\u002Fit\u002Fcomponenti\u002Fbb-slider":70,"\u002Fen\u002Fcomponents\u002Fbb-slider":71,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":72,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":73,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":74,"\u002Fen\u002Fcomponents\u002Fbb-spinner":75,"\u002Fit\u002Fcomponenti\u002Fbb-switch":76,"\u002Fen\u002Fcomponents\u002Fbb-switch":77,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":78,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":79,"\u002Fit\u002Fcomponenti\u002Fbb-table":80,"\u002Fen\u002Fcomponents\u002Fbb-table":81,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":82,"\u002Fen\u002Fcomponents\u002Fbb-tabs":83,"\u002Fit\u002Fcomponenti\u002Fbb-tag":84,"\u002Fen\u002Fcomponents\u002Fbb-tag":85,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":86,"\u002Fen\u002Fcomponents\u002Fbb-text-input":87,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":88,"\u002Fen\u002Fcomponents\u002Fbb-textarea":89,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":90,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":91,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":92,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":93,"\u002Fit\u002Fcomponenti\u002Fbb-toast":94,"\u002Fen\u002Fcomponents\u002Fbb-toast":95,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":96,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":97,"\u002Fit\u002Fcomponenti\u002Fbb-tree":98,"\u002Fen\u002Fcomponents\u002Fbb-tree":99,"\u002Fit\u002Fguide\u002Fai-agents":100,"\u002Fen\u002Fguides\u002Fai-agents":101,"\u002Fit\u002Fguide\u002Fcoherence":102,"\u002Fen\u002Fguides\u002Fcoherence":103,"\u002Fit\u002Fguide\u002Fdesign-language":104,"\u002Fen\u002Fguides\u002Fdesign-language":105,"\u002Fit\u002Fguide\u002Fdesign-tokens":106,"\u002Fen\u002Fguides\u002Fdesign-tokens":107,"\u002Fit\u002Fguide\u002Ffetching-data":108,"\u002Fen\u002Fguides\u002Ffetching-data":109,"\u002Fit\u002Fguide\u002Ficons":110,"\u002Fen\u002Fguides\u002Ficons":111,"\u002Fit\u002Fguide\u002Finertia":112,"\u002Fen\u002Fguides\u002Finertia":113,"\u002Fit\u002Fguide\u002Finstallation":114,"\u002Fen\u002Fguides\u002Finstallation":115,"\u002Fit\u002Fguide\u002Fmigration":116,"\u002Fen\u002Fguides\u002Fmigration":117,"\u002Fit\u002Fguide\u002Fnuxt":118,"\u002Fen\u002Fguides\u002Fnuxt":119,"\u002Fit\u002Fguide\u002Foptions-and-items":120,"\u002Fen\u002Fguides\u002Foptions-and-items":121,"\u002Fit\u002Fguide\u002Fvalidated-forms":122,"\u002Fen\u002Fguides\u002Fvalidated-forms":123},"\u002Fen\u002Fcomponents\u002Fbb-accordion","\u002Fit\u002Fcomponenti\u002Fbb-accordion","\u002Fen\u002Fcomponents\u002Fbb-alert","\u002Fit\u002Fcomponenti\u002Fbb-alert","\u002Fen\u002Fcomponents\u002Fbb-asterisk","\u002Fit\u002Fcomponenti\u002Fbb-asterisk","\u002Fen\u002Fcomponents\u002Fbb-avatar","\u002Fit\u002Fcomponenti\u002Fbb-avatar","\u002Fen\u002Fcomponents\u002Fbb-badge","\u002Fit\u002Fcomponenti\u002Fbb-badge","\u002Fen\u002Fcomponents\u002Fbb-base-button","\u002Fit\u002Fcomponenti\u002Fbb-base-button","\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs","\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs","\u002Fen\u002Fcomponents\u002Fbb-button","\u002Fit\u002Fcomponenti\u002Fbb-button","\u002Fen\u002Fcomponents\u002Fbb-checkbox","\u002Fit\u002Fcomponenti\u002Fbb-checkbox","\u002Fen\u002Fcomponents\u002Fbb-checkbox-group","\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group","\u002Fen\u002Fcomponents\u002Fbb-collapsible","\u002Fit\u002Fcomponenti\u002Fbb-collapsible","\u002Fen\u002Fcomponents\u002Fbb-color-input","\u002Fit\u002Fcomponenti\u002Fbb-color-input","\u002Fen\u002Fcomponents\u002Fbb-color-palette","\u002Fit\u002Fcomponenti\u002Fbb-color-palette","\u002Fen\u002Fcomponents\u002Fbb-confirm","\u002Fit\u002Fcomponenti\u002Fbb-confirm","\u002Fen\u002Fcomponents\u002Fbb-date-picker","\u002Fit\u002Fcomponenti\u002Fbb-date-picker","\u002Fen\u002Fcomponents\u002Fbb-date-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input","\u002Fen\u002Fcomponents\u002Fbb-dialog","\u002Fit\u002Fcomponenti\u002Fbb-dialog","\u002Fen\u002Fcomponents\u002Fbb-dropdown","\u002Fit\u002Fcomponenti\u002Fbb-dropdown","\u002Fen\u002Fcomponents\u002Fbb-dropdown-button","\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button","\u002Fen\u002Fcomponents\u002Fbb-dropzone","\u002Fit\u002Fcomponenti\u002Fbb-dropzone","\u002Fen\u002Fcomponents\u002Fbb-form","\u002Fit\u002Fcomponenti\u002Fbb-form","\u002Fen\u002Fcomponents\u002Fbb-icon","\u002Fit\u002Fcomponenti\u002Fbb-icon","\u002Fen\u002Fcomponents\u002Fbb-indicator","\u002Fit\u002Fcomponenti\u002Fbb-indicator","\u002Fen\u002Fcomponents\u002Fbb-number-input","\u002Fit\u002Fcomponenti\u002Fbb-number-input","\u002Fen\u002Fcomponents\u002Fbb-off-canvas","\u002Fit\u002Fcomponenti\u002Fbb-off-canvas","\u002Fen\u002Fcomponents\u002Fbb-pagination","\u002Fit\u002Fcomponenti\u002Fbb-pagination","\u002Fen\u002Fcomponents\u002Fbb-popover","\u002Fit\u002Fcomponenti\u002Fbb-popover","\u002Fen\u002Fcomponents\u002Fbb-progress","\u002Fit\u002Fcomponenti\u002Fbb-progress","\u002Fen\u002Fcomponents\u002Fbb-radio","\u002Fit\u002Fcomponenti\u002Fbb-radio","\u002Fen\u002Fcomponents\u002Fbb-radio-group","\u002Fit\u002Fcomponenti\u002Fbb-radio-group","\u002Fen\u002Fcomponents\u002Fbb-rating","\u002Fit\u002Fcomponenti\u002Fbb-rating","\u002Fen\u002Fcomponents\u002Fbb-select","\u002Fit\u002Fcomponenti\u002Fbb-select","\u002Fen\u002Fcomponents\u002Fbb-select-popover","\u002Fit\u002Fcomponenti\u002Fbb-select-popover","\u002Fen\u002Fcomponents\u002Fbb-slider","\u002Fit\u002Fcomponenti\u002Fbb-slider","\u002Fen\u002Fcomponents\u002Fbb-smooth-height","\u002Fit\u002Fcomponenti\u002Fbb-smooth-height","\u002Fen\u002Fcomponents\u002Fbb-spinner","\u002Fit\u002Fcomponenti\u002Fbb-spinner","\u002Fen\u002Fcomponents\u002Fbb-switch","\u002Fit\u002Fcomponenti\u002Fbb-switch","\u002Fen\u002Fcomponents\u002Fbb-switch-group","\u002Fit\u002Fcomponenti\u002Fbb-switch-group","\u002Fen\u002Fcomponents\u002Fbb-table","\u002Fit\u002Fcomponenti\u002Fbb-table","\u002Fen\u002Fcomponents\u002Fbb-tabs","\u002Fit\u002Fcomponenti\u002Fbb-tabs","\u002Fen\u002Fcomponents\u002Fbb-tag","\u002Fit\u002Fcomponenti\u002Fbb-tag","\u002Fen\u002Fcomponents\u002Fbb-text-input","\u002Fit\u002Fcomponenti\u002Fbb-text-input","\u002Fen\u002Fcomponents\u002Fbb-textarea","\u002Fit\u002Fcomponenti\u002Fbb-textarea","\u002Fen\u002Fcomponents\u002Fbb-time-picker","\u002Fit\u002Fcomponenti\u002Fbb-time-picker","\u002Fen\u002Fcomponents\u002Fbb-time-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input","\u002Fen\u002Fcomponents\u002Fbb-toast","\u002Fit\u002Fcomponenti\u002Fbb-toast","\u002Fen\u002Fcomponents\u002Fbb-tooltip","\u002Fit\u002Fcomponenti\u002Fbb-tooltip","\u002Fen\u002Fcomponents\u002Fbb-tree","\u002Fit\u002Fcomponenti\u002Fbb-tree","\u002Fen\u002Fguides\u002Fai-agents","\u002Fit\u002Fguide\u002Fai-agents","\u002Fen\u002Fguides\u002Fcoherence","\u002Fit\u002Fguide\u002Fcoherence","\u002Fen\u002Fguides\u002Fdesign-language","\u002Fit\u002Fguide\u002Fdesign-language","\u002Fen\u002Fguides\u002Fdesign-tokens","\u002Fit\u002Fguide\u002Fdesign-tokens","\u002Fen\u002Fguides\u002Ffetching-data","\u002Fit\u002Fguide\u002Ffetching-data","\u002Fen\u002Fguides\u002Ficons","\u002Fit\u002Fguide\u002Ficons","\u002Fen\u002Fguides\u002Finertia","\u002Fit\u002Fguide\u002Finertia","\u002Fen\u002Fguides\u002Finstallation","\u002Fit\u002Fguide\u002Finstallation","\u002Fen\u002Fguides\u002Fmigration","\u002Fit\u002Fguide\u002Fmigration","\u002Fen\u002Fguides\u002Fnuxt","\u002Fit\u002Fguide\u002Fnuxt","\u002Fen\u002Fguides\u002Foptions-and-items","\u002Fit\u002Fguide\u002Foptions-and-items","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",[125,136,145,166,178,220,253,286,307,328,340,346],{"label":126,"entries":127},"Getting started",[128,132],{"title":129,"path":130,"order":131},"Installation","\u002Fguides\u002Finstallation",1,{"title":133,"path":134,"order":135},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"label":137,"entries":138},"Design system",[139,142],{"title":140,"path":141,"order":131},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":143,"path":144,"order":135},"Design language","\u002Fguides\u002Fdesign-language",{"label":146,"entries":147},"Playbooks",[148,151,154,158,162],{"title":149,"path":150,"order":131},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":152,"path":153,"order":135},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":155,"path":156,"order":157},"Coherence","\u002Fguides\u002Fcoherence",3,{"title":159,"path":160,"order":161},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":163,"path":164,"order":165},"Icons","\u002Fguides\u002Ficons",5,{"label":167,"entries":168},"Ecosystem",[169,172,175],{"title":170,"path":171,"order":131},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":173,"path":174,"order":135},"Nuxt","\u002Fguides\u002Fnuxt",{"title":176,"path":177,"order":157},"AI agents","\u002Fguides\u002Fai-agents",{"label":179,"entries":180},"Inputs",[181,184,187,190,193,196,200,204,208,212,216],{"title":182,"path":183,"component":182,"order":131},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":185,"path":186,"component":185,"order":135},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":188,"path":189,"component":188,"order":157},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":191,"path":192,"component":191,"order":161},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":194,"path":195,"component":194,"order":165},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":197,"path":198,"component":197,"order":199},"BbForm","\u002Fcomponents\u002Fbb-form",6,{"title":201,"path":202,"component":201,"order":203},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":205,"path":206,"component":205,"order":207},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":209,"path":210,"component":209,"order":211},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":213,"path":214,"component":213,"order":215},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":217,"path":218,"component":217,"order":219},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":221,"entries":222},"Selection",[223,226,229,232,235,238,241,244,247,250],{"title":224,"path":225,"component":224,"order":131},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":227,"path":228,"component":227,"order":135},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":230,"path":231,"component":230,"order":157},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":233,"path":234,"component":233,"order":161},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":236,"path":237,"component":236,"order":165},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":239,"path":240,"component":239,"order":199},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":242,"path":243,"component":242,"order":203},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":245,"path":246,"component":245,"order":207},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":248,"path":249,"component":248,"order":211},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":251,"path":252,"component":251,"order":215},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":254,"entries":255},"Overlay",[256,259,262,265,268,271,274,277,280,283],{"title":257,"path":258,"component":257,"order":131},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":260,"path":261,"component":260,"order":135},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":263,"path":264,"component":263,"order":157},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":266,"path":267,"component":266,"order":161},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":269,"path":270,"component":269,"order":165},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":272,"path":273,"component":272,"order":199},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":275,"path":276,"component":275,"order":203},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":278,"path":279,"component":278,"order":207},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":281,"path":282,"component":281,"order":211},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":284,"path":285,"component":284,"order":215},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":287,"entries":288},"Navigation",[289,292,295,298,301,304],{"title":290,"path":291,"component":290,"order":131},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":293,"path":294,"component":293,"order":135},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":296,"path":297,"component":296,"order":157},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":299,"path":300,"component":299,"order":161},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":302,"path":303,"component":302,"order":165},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":305,"path":306,"component":305,"order":199},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":308,"entries":309},"Feedback",[310,313,316,319,322,325],{"title":311,"path":312,"component":311,"order":131},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":314,"path":315,"component":314,"order":135},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":317,"path":318,"component":317,"order":157},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":320,"path":321,"component":320,"order":161},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":323,"path":324,"component":323,"order":165},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":326,"path":327,"component":326,"order":199},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":329,"entries":330},"Data Display",[331,334,337],{"title":332,"path":333,"component":332,"order":131},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":335,"path":336,"component":335,"order":135},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":338,"path":339,"component":338,"order":157},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":341,"entries":342},"Layout & Utility",[343],{"title":344,"path":345,"component":344,"order":131},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":347,"entries":348},"Other",[349],{"title":350,"path":351,"component":350,"order":131},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",null,{"id":354,"title":305,"body":355,"component":305,"description":1015,"extension":1016,"group":287,"meta":1017,"navigation":1018,"order":199,"path":306,"sections":1019,"seo":1028,"stem":1029,"__hash__":1030},"docs_en\u002Fcomponents\u002Fbb-tree.md",{"type":356,"value":357,"toc":1005},"minimark",[358,403,409,417,442,446,449,456,459,462,500,505,518,521,535,545,551,557,577,580,593,607,610,616,632,635,664,681,708,714,721,754,768,774,798,801,831,834,856,859,865,868,871,884,890,896,915,918,941,952,1001],[359,360,361,369],"when",{},[362,363,364,365,368],"p",{},"Reach for ",[366,367,305],"code",{}," when the data is genuinely hierarchical and of unbounded\ndepth: a file browser, a docs sidebar, a category picker, an org chart.",[370,371,373],"template",{"v-slot:else":372},"",[374,375,376,389,396],"ul",{},[377,378,379,384,385,388],"li",{},[380,381,382],"a",{"href":80},[366,383,338],{}," with its ",[366,386,387],{},"#expand"," slot — the rows are\nflat with one level of detail, which is not a tree",[377,390,391,395],{},[380,392,393],{"href":24},[366,394,296],{}," — it is one section that\nopens and closes",[377,397,398,402],{},[380,399,400],{"href":38},[366,401,269],{}," — it is a short list of commands",[362,404,405,406,408],{},"You own each node's markup. ",[366,407,305],{}," owns recursion, expansion state and\ndisclosure wiring. This split keeps branch controls and destination links\nsemantically correct.",[410,411,413],"h2",{"id":412},"default",[414,415,416],"span",{},"Navigation nodes",[362,418,419,422,423,426,427,430,431,434,435,437,438,441],{},[366,420,421],{},"items"," takes a nested array of ",[366,424,425],{},"BbTreeItem\u003CMeta>",". The envelope is fixed —\n",[366,428,429],{},"meta",", ",[366,432,433],{},"children",", and two optional flags — so the component can reason about\nthe structure; ",[366,436,429],{}," is your data, and it arrives typed in every slot when you\ndeclare the array as ",[366,439,440],{},"BbTreeItem\u003CYourType>[]",".",[443,444],"demo",{"name":445},"BbTree\u002FNavigation",[362,447,448],{},"A branch is a disclosure button because it reveals content on the current page.\nA leaf that opens a destination is a real link. Do not put both behaviors on a\nrow click.",[362,450,451,452,455],{},"Set ",[366,453,454],{},"item-value"," immediately. It gives every node a stable identity for expansion\nstate and named slots. A refetch can safely replace every object without closing\nthe folders a reader already opened.",[362,457,458],{},"The smaller rendering contract looks like this:",[443,460],{"name":461},"BbTree\u002FBasic",[362,463,464,465,430,467,430,470,430,473,430,476,430,479,482,483,430,486,430,489,492,493,496,497,499],{},"The slot receives ",[366,466,429],{},[366,468,469],{},"item",[366,471,472],{},"parent",[366,474,475],{},"index",[366,477,478],{},"depth",[366,480,481],{},"value",",\n",[366,484,485],{},"expanded",[366,487,488],{},"expandable",[366,490,491],{},"toggleExpanded()"," and ",[366,494,495],{},"expandProps",". Bind\n",[366,498,495],{}," to a real button. Treat the payload as read-only and change\nexpansion through the callback or model.",[410,501,502],{"id":488},[414,503,504],{},"Which nodes toggle",[362,506,507,508,510,511,514,515,441],{},"Nothing is expandable by default. ",[366,509,488],{}," is what decides which nodes get a\nlive toggle and an ",[366,512,513],{},"aria-expanded",", as a boolean for the whole tree or as a\nfunction of ",[366,516,517],{},"(item, depth, parent)",[443,519],{"name":520},"BbTree\u002FExpandable",[362,522,523,524,527,528,531,532,441],{},"The everyday form is ",[366,525,526],{},":expandable=\"(node) => !!node.children?.length\"",". The\nfunction form earns its keep when the rule is not just \"has children\": lock a\nlevel with ",[366,529,530],{},"depth > 2",", or gate on something in ",[366,533,534],{},"item.meta",[362,536,537,538,540,541,544],{},"A node's own ",[366,539,488],{}," field overrides the tree-level prop for that node\nalone. Setting it to ",[366,542,543],{},"false"," on a branch does not hide its children — they render\nexpanded and frozen, with no chevron, which is how you pin a section open.",[362,546,547,548,550],{},"If your chevrons do nothing, this prop is missing. A tree without ",[366,549,488],{},"\nrenders fully expanded and completely static.",[410,552,554],{"id":553},"expansion",[414,555,556],{},"Identity and expansion state",[362,558,559,561,562,564,565,568,569,572,573,576],{},[366,560,454],{}," gives each node a stable identity — a key of ",[366,563,429],{},"\n(",[366,566,567],{},"item-value=\"path\"",") or a function ",[366,570,571],{},"(meta) => value",". Live expansion is then a\n",[366,574,575],{},"v-model:expandedItems"," holding those identities.",[443,578],{"name":579},"BbTree\u002FExpandCollapse",[362,581,451,582,584,585,592],{},[366,583,454],{}," whenever the items come from a server. Without it the identity\nis a hash of the ",[586,587,588,589,591],"strong",{},"whole ",[366,590,429],{}," object",", so a refetch that rebuilds the objects\nwith an extra field or a different property order silently resets the expansion.\nIt is also what makes the model readable, and what names the per-node slots in\nthe next section.",[362,594,595,596,599,600,603,604,606],{},"The seeding rule is worth reading twice: the first time a branch is seen — at\nfirst render, or when it is appended later — it joins the model automatically\n",[586,597,598],{},"unless"," it carries ",[366,601,602],{},"expanded: false"," or is already tracked. After that first\nsighting the model is the only source of truth, and later flips of the ",[366,605,485],{},"\nflag are ignored. To open a node from code, push its value into the model; do not\nmutate the flag.",[362,608,609],{},"Leaves never appear in the model, so expand-all is exactly \"the identity of every\nbranch\", as the demo computes. Write the model to persist open folders between\nvisits or restore them on reload.",[410,611,613],{"id":612},"slots",[414,614,615],{},"One node, one slot",[362,617,618,619,621,622,625,626,629,630,441],{},"Beyond ",[366,620,412],{},", the component resolves a slot per node in a fixed priority\norder: ",[366,623,624],{},"#\u003Cvalue>"," for the node whose identity matches, then ",[366,627,628],{},"#\u003Cdepth>"," for every\nnode at that level, then ",[366,631,412],{},[443,633],{"name":634},"BbTree\u002FNodeSlots",[362,636,637,638,641,642,645,646,649,650,653,654,649,657,660,661,663],{},"Value slots only exist when the identity resolves to a string or a number, and\n",[586,639,640],{},"the name is normalised",": runs of non-word characters collapse to ",[366,643,644],{},"_"," and the\nresult is lowercased, so ",[366,647,648],{},"src\u002Fcomposables"," resolves ",[366,651,652],{},"#src_composables"," and\n",[366,655,656],{},"Order History",[366,658,659],{},"#order_history",". In v2 the slot took the raw value.\nNothing warns about a stale name — the node quietly falls back to ",[366,662,412],{}," — so\nthis is the first thing to check when a per-node slot stops rendering after an\nupgrade.",[362,665,666,667,669,670,492,673,676,677,680],{},"Each slot receives the same payload as ",[366,668,412],{},". There are also\n",[366,671,672],{},"#\u003Cvalue>-children",[366,674,675],{},"#\u003Cdepth>-children"," slots, which replace the children\n",[586,678,679],{},"container"," of the matching node: the recursion stops there and your markup\nrenders instead. That is the way to put a custom layout, or an inline empty\nstate, under one branch without touching the rest of the tree.",[362,682,683,684,687,688,691,692,695,696,699,700,703,704,707],{},"Two catches. A ",[366,685,686],{},"-children"," slot also renders for leaves, which have no children\nof their own, so a ",[366,689,690],{},"#1-children"," that should only follow branches needs a\n",[366,693,694],{},"v-if=\"item.children?.length\""," inside it. And numeric identities share names\nwith depth slots: a node whose value is ",[366,697,698],{},"1"," and every node at depth 1 both\nanswer to ",[366,701,702],{},"#1",". The node still wins for itself, but the markup no longer says\nwhich one you meant, so give nodes string identities (",[366,705,706],{},"'folder-1'",") when you\nuse per-node slots.",[410,709,711],{"id":710},"navigation",[414,712,713],{},"Leaves that navigate",[362,715,716,717,720],{},"A leaf that opens something is a link, and the navigation belongs to the leaf's\nown markup — never to an ",[366,718,719],{},"@click"," that calls the router. The first demo on this\npage shows the complete branch-button and leaf-link split.",[362,722,723,724,727,728,731,732,736,737,741,742,745,746,749,750,753],{},"Give the leaf ",[366,725,726],{},"href"," or ",[366,729,730],{},"to"," through\n",[380,733,734],{"href":14},[366,735,182],{}," when the look is yours, or\n",[380,738,739],{"href":18},[366,740,185],{}," with ",[366,743,744],{},"variant=\"ghost\""," when you want the\nlibrary's. Both carry ",[366,747,748],{},"active-class"," \u002F ",[366,751,752],{},"exact-active-class",", so the current page\nhighlights itself instead of being tracked in a second piece of state.",[362,755,756,757,760,761,763,764,767],{},"In a Nuxt or Vue Router application the leaf takes ",[366,758,759],{},":to","; under Inertia an\n",[366,762,726],{}," is the visit. The branch stays a ",[366,765,766],{},"\u003Cbutton>"," either way: it opens a region\non this page, which is not navigation.",[410,769,771],{"id":770},"keyboard",[414,772,773],{},"A disclosure list, not a tree",[362,775,776,778,779,782,783,786,787,790,791,790,794,797],{},[366,777,305],{}," renders no ",[366,780,781],{},"role=\"tree\"",", no ",[366,784,785],{},"role=\"treeitem\""," and no\n",[366,788,789],{},"aria-level","\u002F",[366,792,793],{},"aria-posinset",[366,795,796],{},"aria-setsize"," — deliberately, and this changed in\nv3. An APG tree makes the tree item itself the single focusable unit under a\nroving tabindex, which cannot coexist with slot-driven nodes that hold your links\nand your buttons. Announcing a keyboard contract the component cannot honour is\nworse than not claiming the role, so the claim is gone. Each branch is an\nordinary disclosure: a button that shows and hides a region.",[362,799,800],{},"What you get automatically:",[374,802,803,817],{},[377,804,805,806,809,810,812,813,816],{},"The children container carries the ",[366,807,808],{},"id"," that ",[366,811,495],{},"' ",[366,814,815],{},"aria-controls","\npoints at. That pairing is the whole disclosure wiring.",[377,818,819,820,823,824,826,827,830],{},"A collapsed container is ",[366,821,822],{},"inert",", so its links and buttons leave the tab order\nand the accessibility tree. Collapsing is CSS-only, which hides pixels but not\nfocusability — without ",[366,825,822],{}," a collapsed branch would stay Tab-reachable\nwhile invisible. If you are migrating, delete any\n",[366,828,829],{},":tabindex=\"open ? undefined : -1\""," you wrote for v2: it now fights the\ncomponent.",[362,832,833],{},"What you still owe:",[374,835,836,845],{},[377,837,838,839,841,842,844],{},"One real focusable control per row, and ",[366,840,495],{}," on a ",[366,843,766],{}," for every\nbranch.",[377,846,847,848,851,852,855],{},"An accessible name on an icon-only toggle — ",[366,849,850],{},"Collapse src",", not a bare\nchevron. When the toggle contains the node's label, as in the demos above, that\ntext is already the name and a redundant ",[366,853,854],{},"aria-label"," only overrides it.",[362,857,858],{},"Keyboard users Tab through whatever your slots render and toggle with Enter or\nSpace. There is nothing tree-specific to learn, which is the point — but it does\nmean your node markup decides how good the keyboard experience is.",[410,860,862],{"id":861},"lazy",[414,863,864],{},"Branches that load on first open",[362,866,867],{},"The whole tree stays mounted: collapsed branches are hidden with CSS, not\nremoved, and there is no virtualization. For hundreds of nodes that is fine. For\nfolders of unknown size, load the children when the branch first opens.",[443,869],{"name":870},"BbTree\u002FLazyFolders",[362,872,873,874,877,878,880,881,883],{},"Two details make the pattern work. Give each unloaded folder a single\n",[586,875,876],{},"placeholder child",", so it is a real branch — a childless node is a leaf, and a\nleaf reports itself expanded, so a chevron driven by ",[366,879,485],{}," would render open\nbefore anything was fetched. And mark those folders ",[366,882,602],{},", or the\nseeding rule opens them at first sight and every request fires at mount.",[362,885,886,887,889],{},"Then watch the model: when an unloaded folder's identity appears in it, fetch and\nswap its children. ",[366,888,421],{}," is watched deeply, so appending children updates the\ntree in place, and the new branches follow the same seeding rules.",[410,891,893],{"id":892},"styling",[414,894,895],{},"Indentation, rhythm and connector lines",[362,897,898,899,902,903,906,907,910,911,914],{},"Two CSS custom properties on ",[366,900,901],{},".bb-tree"," shape the layout: ",[366,904,905],{},"--indent"," shifts each\nchild level and ",[366,908,909],{},"--gap"," adds vertical space between siblings. Both default to\n",[366,912,913],{},"0",", so nothing indents until you set them — inline, in a class, or per instance.\nExpansion animates on its own, as a grid-rows transition rather than a remount.",[443,916],{"name":917},"BbTree\u002FConnectors",[362,919,920,921,430,924,482,927,930,931,430,934,492,937,940],{},"Connector lines are deliberately not shipped: they are a look, not a behaviour,\nand every product wants them slightly different. This is the one sanctioned case\nfor styling the component's internals — ",[366,922,923],{},".bb-tree__node",[366,925,926],{},".bb-tree__row",[366,928,929],{},".bb-tree__children",", plus the ",[366,932,933],{},"--depth-\u003Cn>",[366,935,936],{},"--expanded",[366,938,939],{},"--leaf"," modifier\nclasses — and the rules stay under a wrapper class so they never leak to another\ntree.",[362,942,943,944,947,948,951],{},"The same exception covers one other case. In a narrow pane long labels overflow\ninstead of truncating, because ",[366,945,946],{},".bb-tree__content"," is a flex child at its default\n",[366,949,950],{},"min-width: auto",". Force it to zero under your own wrapper class, then truncate\nin your node markup:",[953,954,958],"pre",{"className":955,"code":956,"language":957,"meta":372,"style":372},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".my-tree .bb-tree__row,\n.my-tree .bb-tree__content {\n    min-width: 0;\n}\n","css",[366,959,960,973,983,996],{"__ignoreMap":372},[414,961,963,967,970],{"class":962,"line":131},"line",[414,964,966],{"class":965},"s-5SL",".my-tree",[414,968,969],{"class":965}," .bb-tree__row",[414,971,482],{"class":972},"suds8",[414,974,975,977,980],{"class":962,"line":135},[414,976,966],{"class":965},[414,978,979],{"class":965}," .bb-tree__content",[414,981,982],{"class":972}," {\n",[414,984,985,988,991,993],{"class":962,"line":157},[414,986,987],{"class":965},"    min-width",[414,989,990],{"class":972},": ",[414,992,913],{"class":965},[414,994,995],{"class":972},";\n",[414,997,998],{"class":962,"line":161},[414,999,1000],{"class":972},"}\n",[1002,1003,1004],"style",{},"html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":372,"searchDepth":157,"depth":157,"links":1006},[1007,1008,1009,1010,1011,1012,1013,1014],{"id":412,"depth":135,"text":416},{"id":488,"depth":135,"text":504},{"id":553,"depth":135,"text":556},{"id":612,"depth":135,"text":615},{"id":710,"depth":135,"text":713},{"id":770,"depth":135,"text":773},{"id":861,"depth":135,"text":864},{"id":892,"depth":135,"text":895},"Nested, expandable data of any depth — you own every node's markup, the component owns the structure and the expansion state.","md",{},true,[1020,1021,1022,1023,1024,1025,1026,1027],{"id":412,"title":416},{"id":488,"title":504},{"id":553,"title":556},{"id":612,"title":615},{"id":710,"title":713},{"id":770,"title":773},{"id":861,"title":864},{"id":892,"title":895},{"title":305,"description":1015},"components\u002Fbb-tree","jh6jc9qfH18XlWpGamjMgThrCaquApK8vWk188-T38A",{"name":305,"slug":1032,"group":287,"description":1033,"entrypoint":1034,"docs":1035,"props":1038,"models":1072,"events":1075,"slots":1080,"exposed":1098,"pt":1099,"validated":352,"migration":1110},"bb-tree","Renders hierarchical expandable tree structures.","bitboss-ui",{"contract":1036,"source":1037},"ai\u002FBbTree.md","ai\u002Fsource\u002FBbTree.md",[1039,1044,1049,1053,1059,1063,1066,1068,1070],{"name":488,"type":1040,"required":1041,"default":352,"description":1042,"note":1043,"demo":488},"BbTreeExpandable\u003CMeta> | undefined",false,"Defines nodes as expandable. It can be a global boolean, or a function\nthat receives the node, its depth, and its parent and returns a boolean.","Without it nothing is expandable: the tree renders fully expanded and static, which is the answer to \"my chevrons do nothing\". The everyday form is `(node) => !!node.children?.length`; a per-node `expandable` field overrides it for that node, and `false` on a branch renders its children frozen open rather than hiding them.",{"name":1045,"type":1046,"required":1041,"default":1047,"description":1048,"note":352,"demo":352},"expandedItems","any[] | undefined","[]","Live expansion state: the list of expanded node values (see `itemValue`).\nBranch nodes not explicitly collapsed via `expanded: false` seed the list\nwhen they first appear in `items`; from then on this model is the single\nsource of truth.",{"name":421,"type":1050,"required":1018,"default":1047,"description":1051,"note":1052,"demo":412},"BbTreeItem\u003CMeta>[]","Tree-like structure of nodes to render.","Use the fixed `{ meta, children }` envelope. Branches disclose children; leaves render navigation or content from your slot.",{"name":1054,"type":1055,"required":1041,"default":1056,"description":1057,"note":1058,"demo":412},"itemValue","ItemAccessor\u003CMeta> | undefined","the whole `meta` object","Identity of a node, used to hash entries of `expandedItems` and to\nname per-node slots. A string reads that key from `meta`; a function\nreceives `meta` and returns the value.","Set stable identity before loading remote nodes. Otherwise a refetch can reset expansion and change per-node slot names.",{"name":1060,"type":1061,"required":1041,"default":352,"description":1062,"note":352,"demo":352},"pt","PtMap\u003CBbTreePtPart, \"open\"> | undefined","Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:\u003Cpart>` row.",{"name":1064,"type":1065,"required":1041,"default":352,"description":352,"note":352,"demo":352},"pt:item","PtValue | undefined",{"name":1067,"type":1065,"required":1041,"default":352,"description":352,"note":352,"demo":352},"pt:item:open",{"name":1069,"type":1065,"required":1041,"default":352,"description":352,"note":352,"demo":352},"pt:root",{"name":1071,"type":1065,"required":1041,"default":352,"description":352,"note":352,"demo":352},"pt:root:open",[1073],{"name":1045,"type":1046,"note":1074,"demo":553},"The live state, and the only way to change expansion from code — pushing a value opens that node, and the `expanded` flag on an item is ignored after the first sighting. Leaves never appear here, so expand-all is exactly the set of branch identities.",[1076],{"name":1077,"signature":1078,"description":352,"note":1079,"demo":553},"update:expandedItems","(event: \"update:expandedItems\", value: any[]): void","Fires with the whole new list on every toggle. Bind the model and treat it as state rather than listening to this directly.",[1081,1085,1089,1093,1096],{"name":1082,"type":1083,"description":1084,"note":352,"demo":612},"\u003Cdepth>","BbTreeNodeSlotProps\u003CMeta>","Every node at one depth (`0` = root); a numeric value can share this name.",{"name":1086,"type":1083,"description":1087,"note":1088,"demo":612},"\u003Cdepth>-children","The children container of every node at one depth.","Renders under leaves too, so guard branch-only markup with `v-if=\"item.children?.length\"`.",{"name":1090,"type":1083,"description":1091,"note":1092,"demo":612},"\u003Cvalue>","One node, by its resolved `item-value` (string or number) through `slotKey`; beats `\u003Cdepth>`, which beats `default`.","The name is the identity normalized: `src\u002Fcomposables` is `#src_composables`, `Order History` is `#order_history`. A stale name raises no warning — the node falls back to `\u003Cdepth>` or `default`.",{"name":1094,"type":1083,"description":1095,"note":352,"demo":612},"\u003Cvalue>-children","One node's children container, stopping the recursion there; beats `\u003Cdepth>-children`. Renders for leaves too.",{"name":412,"type":1083,"description":352,"note":1097,"demo":412},"Renders every node that no `#\u003Cvalue>` or `#\u003Cdepth>` slot claims. Bind `expandProps` to a real `\u003Cbutton>` for branches: it carries `aria-expanded` and the `aria-controls` that pairs with the children container, and a button gets focus and Enter\u002FSpace for free.",[],{"parts":1100,"states":1106},[1101,1104],{"name":1102,"description":1103},"root","The tree.",{"name":469,"description":1105},"One node — a broadcast resolved per node at every depth. Its content is your slot markup, so there is no `icon`.",[1107],{"name":1108,"description":1109},"open","Per node, on `item`: an expanded branch. Leaves count as open.",{"removed":1111,"renamed":1112},[],[],1790005167706]