[{"data":1,"prerenderedAt":867},["ShallowReactive",2],{"api-none":3,"docs-nav-en":4,"locale-alternates":232,"page-en-\u002Fcomponents\u002Fbb-breadcrumbs":353,"pt-showcase-BbBreadcrumbs":738},null,[5,16,25,46,58,100,133,166,187,208,220,226],{"label":6,"entries":7},"Getting started",[8,12],{"title":9,"path":10,"component":-1,"order":11},"Installation","\u002Fguides\u002Finstallation",1,{"title":13,"path":14,"component":-1,"order":15},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"label":17,"entries":18},"Design system",[19,22],{"title":20,"path":21,"component":-1,"order":11},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":23,"path":24,"component":-1,"order":15},"Design language","\u002Fguides\u002Fdesign-language",{"label":26,"entries":27},"Playbooks",[28,31,34,38,42],{"title":29,"path":30,"component":-1,"order":11},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":32,"path":33,"component":-1,"order":15},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":35,"path":36,"component":-1,"order":37},"Coherence","\u002Fguides\u002Fcoherence",3,{"title":39,"path":40,"component":-1,"order":41},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":43,"path":44,"component":-1,"order":45},"Icons","\u002Fguides\u002Ficons",5,{"label":47,"entries":48},"Ecosystem",[49,52,55],{"title":50,"path":51,"component":-1,"order":11},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":53,"path":54,"component":-1,"order":15},"Nuxt","\u002Fguides\u002Fnuxt",{"title":56,"path":57,"component":-1,"order":37},"AI agents","\u002Fguides\u002Fai-agents",{"label":59,"entries":60},"Inputs",[61,64,67,70,73,76,80,84,88,92,96],{"title":62,"path":63,"component":62,"order":11},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":65,"path":66,"component":65,"order":15},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":68,"path":69,"component":68,"order":37},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":71,"path":72,"component":71,"order":41},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":74,"path":75,"component":74,"order":45},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":77,"path":78,"component":77,"order":79},"BbForm","\u002Fcomponents\u002Fbb-form",6,{"title":81,"path":82,"component":81,"order":83},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":85,"path":86,"component":85,"order":87},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":89,"path":90,"component":89,"order":91},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":93,"path":94,"component":93,"order":95},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":97,"path":98,"component":97,"order":99},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":101,"entries":102},"Selection",[103,106,109,112,115,118,121,124,127,130],{"title":104,"path":105,"component":104,"order":11},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":107,"path":108,"component":107,"order":15},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":110,"path":111,"component":110,"order":37},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":113,"path":114,"component":113,"order":41},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":116,"path":117,"component":116,"order":45},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":119,"path":120,"component":119,"order":79},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":122,"path":123,"component":122,"order":83},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":125,"path":126,"component":125,"order":87},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":128,"path":129,"component":128,"order":91},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":131,"path":132,"component":131,"order":95},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":134,"entries":135},"Overlay",[136,139,142,145,148,151,154,157,160,163],{"title":137,"path":138,"component":137,"order":11},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":140,"path":141,"component":140,"order":15},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":143,"path":144,"component":143,"order":37},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":146,"path":147,"component":146,"order":41},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":149,"path":150,"component":149,"order":45},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":152,"path":153,"component":152,"order":79},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":155,"path":156,"component":155,"order":83},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":158,"path":159,"component":158,"order":87},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":161,"path":162,"component":161,"order":91},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":164,"path":165,"component":164,"order":95},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":167,"entries":168},"Navigation",[169,172,175,178,181,184],{"title":170,"path":171,"component":170,"order":11},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":173,"path":174,"component":173,"order":15},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":176,"path":177,"component":176,"order":37},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":179,"path":180,"component":179,"order":41},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":182,"path":183,"component":182,"order":45},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":185,"path":186,"component":185,"order":79},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":188,"entries":189},"Feedback",[190,193,196,199,202,205],{"title":191,"path":192,"component":191,"order":11},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":194,"path":195,"component":194,"order":15},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":197,"path":198,"component":197,"order":37},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":200,"path":201,"component":200,"order":41},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":203,"path":204,"component":203,"order":45},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":206,"path":207,"component":206,"order":79},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":209,"entries":210},"Data Display",[211,214,217],{"title":212,"path":213,"component":212,"order":11},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":215,"path":216,"component":215,"order":15},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":218,"path":219,"component":218,"order":37},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":221,"entries":222},"Layout & Utility",[223],{"title":224,"path":225,"component":224,"order":11},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":227,"entries":228},"Other",[229],{"title":230,"path":231,"component":230,"order":11},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",{"\u002Fit\u002Fcomponenti\u002Fbb-accordion":233,"\u002Fen\u002Fcomponents\u002Fbb-accordion":234,"\u002Fit\u002Fcomponenti\u002Fbb-alert":235,"\u002Fen\u002Fcomponents\u002Fbb-alert":236,"\u002Fit\u002Fcomponenti\u002Fbb-asterisk":237,"\u002Fen\u002Fcomponents\u002Fbb-asterisk":238,"\u002Fit\u002Fcomponenti\u002Fbb-avatar":239,"\u002Fen\u002Fcomponents\u002Fbb-avatar":240,"\u002Fit\u002Fcomponenti\u002Fbb-badge":241,"\u002Fen\u002Fcomponents\u002Fbb-badge":242,"\u002Fit\u002Fcomponenti\u002Fbb-base-button":243,"\u002Fen\u002Fcomponents\u002Fbb-base-button":244,"\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs":245,"\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs":246,"\u002Fit\u002Fcomponenti\u002Fbb-button":247,"\u002Fen\u002Fcomponents\u002Fbb-button":248,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":249,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":250,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":251,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":252,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":253,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":254,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":255,"\u002Fen\u002Fcomponents\u002Fbb-color-input":256,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":257,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":258,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":259,"\u002Fen\u002Fcomponents\u002Fbb-confirm":260,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":261,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":262,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":263,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":264,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":265,"\u002Fen\u002Fcomponents\u002Fbb-dialog":266,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":267,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":268,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":269,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":270,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":271,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":272,"\u002Fit\u002Fcomponenti\u002Fbb-form":273,"\u002Fen\u002Fcomponents\u002Fbb-form":274,"\u002Fit\u002Fcomponenti\u002Fbb-icon":275,"\u002Fen\u002Fcomponents\u002Fbb-icon":276,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":277,"\u002Fen\u002Fcomponents\u002Fbb-indicator":278,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":279,"\u002Fen\u002Fcomponents\u002Fbb-number-input":280,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":281,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":282,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":283,"\u002Fen\u002Fcomponents\u002Fbb-pagination":284,"\u002Fit\u002Fcomponenti\u002Fbb-popover":285,"\u002Fen\u002Fcomponents\u002Fbb-popover":286,"\u002Fit\u002Fcomponenti\u002Fbb-progress":287,"\u002Fen\u002Fcomponents\u002Fbb-progress":288,"\u002Fit\u002Fcomponenti\u002Fbb-radio":289,"\u002Fen\u002Fcomponents\u002Fbb-radio":290,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":291,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":292,"\u002Fit\u002Fcomponenti\u002Fbb-rating":293,"\u002Fen\u002Fcomponents\u002Fbb-rating":294,"\u002Fit\u002Fcomponenti\u002Fbb-select":295,"\u002Fen\u002Fcomponents\u002Fbb-select":296,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":297,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":298,"\u002Fit\u002Fcomponenti\u002Fbb-slider":299,"\u002Fen\u002Fcomponents\u002Fbb-slider":300,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":301,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":302,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":303,"\u002Fen\u002Fcomponents\u002Fbb-spinner":304,"\u002Fit\u002Fcomponenti\u002Fbb-switch":305,"\u002Fen\u002Fcomponents\u002Fbb-switch":306,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":307,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":308,"\u002Fit\u002Fcomponenti\u002Fbb-table":309,"\u002Fen\u002Fcomponents\u002Fbb-table":310,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":311,"\u002Fen\u002Fcomponents\u002Fbb-tabs":312,"\u002Fit\u002Fcomponenti\u002Fbb-tag":313,"\u002Fen\u002Fcomponents\u002Fbb-tag":314,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":315,"\u002Fen\u002Fcomponents\u002Fbb-text-input":316,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":317,"\u002Fen\u002Fcomponents\u002Fbb-textarea":318,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":319,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":320,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":321,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":322,"\u002Fit\u002Fcomponenti\u002Fbb-toast":323,"\u002Fen\u002Fcomponents\u002Fbb-toast":324,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":325,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":326,"\u002Fit\u002Fcomponenti\u002Fbb-tree":327,"\u002Fen\u002Fcomponents\u002Fbb-tree":328,"\u002Fit\u002Fguide\u002Fai-agents":329,"\u002Fen\u002Fguides\u002Fai-agents":330,"\u002Fit\u002Fguide\u002Fcoherence":331,"\u002Fen\u002Fguides\u002Fcoherence":332,"\u002Fit\u002Fguide\u002Fdesign-language":333,"\u002Fen\u002Fguides\u002Fdesign-language":334,"\u002Fit\u002Fguide\u002Fdesign-tokens":335,"\u002Fen\u002Fguides\u002Fdesign-tokens":336,"\u002Fit\u002Fguide\u002Ffetching-data":337,"\u002Fen\u002Fguides\u002Ffetching-data":338,"\u002Fit\u002Fguide\u002Ficons":339,"\u002Fen\u002Fguides\u002Ficons":340,"\u002Fit\u002Fguide\u002Finertia":341,"\u002Fen\u002Fguides\u002Finertia":342,"\u002Fit\u002Fguide\u002Finstallation":343,"\u002Fen\u002Fguides\u002Finstallation":344,"\u002Fit\u002Fguide\u002Fmigration":345,"\u002Fen\u002Fguides\u002Fmigration":346,"\u002Fit\u002Fguide\u002Fnuxt":347,"\u002Fen\u002Fguides\u002Fnuxt":348,"\u002Fit\u002Fguide\u002Foptions-and-items":349,"\u002Fen\u002Fguides\u002Foptions-and-items":350,"\u002Fit\u002Fguide\u002Fvalidated-forms":351,"\u002Fen\u002Fguides\u002Fvalidated-forms":352},"\u002Fen\u002Fcomponents\u002Fbb-accordion","\u002Fit\u002Fcomponenti\u002Fbb-accordion","\u002Fen\u002Fcomponents\u002Fbb-alert","\u002Fit\u002Fcomponenti\u002Fbb-alert","\u002Fen\u002Fcomponents\u002Fbb-asterisk","\u002Fit\u002Fcomponenti\u002Fbb-asterisk","\u002Fen\u002Fcomponents\u002Fbb-avatar","\u002Fit\u002Fcomponenti\u002Fbb-avatar","\u002Fen\u002Fcomponents\u002Fbb-badge","\u002Fit\u002Fcomponenti\u002Fbb-badge","\u002Fen\u002Fcomponents\u002Fbb-base-button","\u002Fit\u002Fcomponenti\u002Fbb-base-button","\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs","\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs","\u002Fen\u002Fcomponents\u002Fbb-button","\u002Fit\u002Fcomponenti\u002Fbb-button","\u002Fen\u002Fcomponents\u002Fbb-checkbox","\u002Fit\u002Fcomponenti\u002Fbb-checkbox","\u002Fen\u002Fcomponents\u002Fbb-checkbox-group","\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group","\u002Fen\u002Fcomponents\u002Fbb-collapsible","\u002Fit\u002Fcomponenti\u002Fbb-collapsible","\u002Fen\u002Fcomponents\u002Fbb-color-input","\u002Fit\u002Fcomponenti\u002Fbb-color-input","\u002Fen\u002Fcomponents\u002Fbb-color-palette","\u002Fit\u002Fcomponenti\u002Fbb-color-palette","\u002Fen\u002Fcomponents\u002Fbb-confirm","\u002Fit\u002Fcomponenti\u002Fbb-confirm","\u002Fen\u002Fcomponents\u002Fbb-date-picker","\u002Fit\u002Fcomponenti\u002Fbb-date-picker","\u002Fen\u002Fcomponents\u002Fbb-date-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input","\u002Fen\u002Fcomponents\u002Fbb-dialog","\u002Fit\u002Fcomponenti\u002Fbb-dialog","\u002Fen\u002Fcomponents\u002Fbb-dropdown","\u002Fit\u002Fcomponenti\u002Fbb-dropdown","\u002Fen\u002Fcomponents\u002Fbb-dropdown-button","\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button","\u002Fen\u002Fcomponents\u002Fbb-dropzone","\u002Fit\u002Fcomponenti\u002Fbb-dropzone","\u002Fen\u002Fcomponents\u002Fbb-form","\u002Fit\u002Fcomponenti\u002Fbb-form","\u002Fen\u002Fcomponents\u002Fbb-icon","\u002Fit\u002Fcomponenti\u002Fbb-icon","\u002Fen\u002Fcomponents\u002Fbb-indicator","\u002Fit\u002Fcomponenti\u002Fbb-indicator","\u002Fen\u002Fcomponents\u002Fbb-number-input","\u002Fit\u002Fcomponenti\u002Fbb-number-input","\u002Fen\u002Fcomponents\u002Fbb-off-canvas","\u002Fit\u002Fcomponenti\u002Fbb-off-canvas","\u002Fen\u002Fcomponents\u002Fbb-pagination","\u002Fit\u002Fcomponenti\u002Fbb-pagination","\u002Fen\u002Fcomponents\u002Fbb-popover","\u002Fit\u002Fcomponenti\u002Fbb-popover","\u002Fen\u002Fcomponents\u002Fbb-progress","\u002Fit\u002Fcomponenti\u002Fbb-progress","\u002Fen\u002Fcomponents\u002Fbb-radio","\u002Fit\u002Fcomponenti\u002Fbb-radio","\u002Fen\u002Fcomponents\u002Fbb-radio-group","\u002Fit\u002Fcomponenti\u002Fbb-radio-group","\u002Fen\u002Fcomponents\u002Fbb-rating","\u002Fit\u002Fcomponenti\u002Fbb-rating","\u002Fen\u002Fcomponents\u002Fbb-select","\u002Fit\u002Fcomponenti\u002Fbb-select","\u002Fen\u002Fcomponents\u002Fbb-select-popover","\u002Fit\u002Fcomponenti\u002Fbb-select-popover","\u002Fen\u002Fcomponents\u002Fbb-slider","\u002Fit\u002Fcomponenti\u002Fbb-slider","\u002Fen\u002Fcomponents\u002Fbb-smooth-height","\u002Fit\u002Fcomponenti\u002Fbb-smooth-height","\u002Fen\u002Fcomponents\u002Fbb-spinner","\u002Fit\u002Fcomponenti\u002Fbb-spinner","\u002Fen\u002Fcomponents\u002Fbb-switch","\u002Fit\u002Fcomponenti\u002Fbb-switch","\u002Fen\u002Fcomponents\u002Fbb-switch-group","\u002Fit\u002Fcomponenti\u002Fbb-switch-group","\u002Fen\u002Fcomponents\u002Fbb-table","\u002Fit\u002Fcomponenti\u002Fbb-table","\u002Fen\u002Fcomponents\u002Fbb-tabs","\u002Fit\u002Fcomponenti\u002Fbb-tabs","\u002Fen\u002Fcomponents\u002Fbb-tag","\u002Fit\u002Fcomponenti\u002Fbb-tag","\u002Fen\u002Fcomponents\u002Fbb-text-input","\u002Fit\u002Fcomponenti\u002Fbb-text-input","\u002Fen\u002Fcomponents\u002Fbb-textarea","\u002Fit\u002Fcomponenti\u002Fbb-textarea","\u002Fen\u002Fcomponents\u002Fbb-time-picker","\u002Fit\u002Fcomponenti\u002Fbb-time-picker","\u002Fen\u002Fcomponents\u002Fbb-time-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input","\u002Fen\u002Fcomponents\u002Fbb-toast","\u002Fit\u002Fcomponenti\u002Fbb-toast","\u002Fen\u002Fcomponents\u002Fbb-tooltip","\u002Fit\u002Fcomponenti\u002Fbb-tooltip","\u002Fen\u002Fcomponents\u002Fbb-tree","\u002Fit\u002Fcomponenti\u002Fbb-tree","\u002Fen\u002Fguides\u002Fai-agents","\u002Fit\u002Fguide\u002Fai-agents","\u002Fen\u002Fguides\u002Fcoherence","\u002Fit\u002Fguide\u002Fcoherence","\u002Fen\u002Fguides\u002Fdesign-language","\u002Fit\u002Fguide\u002Fdesign-language","\u002Fen\u002Fguides\u002Fdesign-tokens","\u002Fit\u002Fguide\u002Fdesign-tokens","\u002Fen\u002Fguides\u002Ffetching-data","\u002Fit\u002Fguide\u002Ffetching-data","\u002Fen\u002Fguides\u002Ficons","\u002Fit\u002Fguide\u002Ficons","\u002Fen\u002Fguides\u002Finertia","\u002Fit\u002Fguide\u002Finertia","\u002Fen\u002Fguides\u002Finstallation","\u002Fit\u002Fguide\u002Finstallation","\u002Fen\u002Fguides\u002Fmigration","\u002Fit\u002Fguide\u002Fmigration","\u002Fen\u002Fguides\u002Fnuxt","\u002Fit\u002Fguide\u002Fnuxt","\u002Fen\u002Fguides\u002Foptions-and-items","\u002Fit\u002Fguide\u002Foptions-and-items","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",{"id":354,"title":173,"body":355,"component":173,"description":724,"extension":725,"group":167,"meta":726,"navigation":727,"order":15,"path":174,"sections":728,"seo":735,"stem":736,"__hash__":737},"docs_en\u002Fcomponents\u002Fbb-breadcrumbs.md",{"type":356,"value":357,"toc":716},"minimark",[358,392,395,403,414,418,434,445,451,465,468,474,487,493,496,499,502,509,531,542,548,558,561,574,580,598,601,608,631,637,659,665,668,671,680,692],[359,360,361,369],"when",{},[362,363,364,365,368],"p",{},"Put ",[366,367,173],"code",{}," at the top of a detail view, above the title. It answers two\nquestions at once: where am I, and how do I get back up.",[370,371,373],"template",{"v-slot:else":372},"",[374,375,376,385],"ul",{},[377,378,379,384],"li",{},[380,381,382],"a",{"href":311},[366,383,182],{},", if they are peer views of the same record:\nOverview, Activity, Settings",[377,386,387,391],{},[380,388,389],{"href":283},[366,390,179],{},", if the reader is stepping\nthrough a paged result set",[362,393,394],{},"Show one breadcrumb landmark per view.",[396,397,399],"h2",{"id":398},"default",[400,401,402],"span",{},"The trail",[362,404,405,406,409,410,413],{},"Each item is ",[366,407,408],{},"{ key, text }"," plus a navigation target. ",[366,411,412],{},"key"," must be unique: it\nis also the name of that crumb's own slot.",[415,416],"demo",{"name":417},"BbBreadcrumbs\u002FBasic",[362,419,420,421,425,426,429,430,433],{},"Leave the ",[422,423,424],"strong",{},"last"," item without a target. That is what makes it the current page:\nit gets ",[366,427,428],{},"aria-current=\"page\""," and the theme renders it non-interactive. An ",[366,431,432],{},"href","\nthere gives you a link nobody can click.",[435,436,438],"migration",{"title":437},"key must be a string",[362,439,440,441,444],{},"A numeric key that ran in v2 now fails type checking. The fix is ",[366,442,443],{},"String(id)",".\nThe runtime already stringified it, so nothing else changes.",[396,446,448],{"id":447},"navigation",[400,449,450],{},"Every crumb is a link",[362,452,453,454,456,457,460,461,464],{},"Give every crumb its own target: ",[366,455,432],{},", ",[366,458,459],{},"to",", or an ",[366,462,463],{},"onClick",".",[415,466],{"name":467},"BbBreadcrumbs\u002FFolderTrail",[362,469,470,471,473],{},"When the hierarchy lives in client state rather than in routes, give the\nancestors an ",[366,472,463],{},". The crumbs are still real buttons, and crumbs folded into\nthe overflow menu keep their handler. Never wrap the trail in your own\nclick-to-route handler.",[362,475,476,479,480,482,483,486],{},[366,477,478],{},"disabled"," works at two levels. On one item, that crumb loses its ",[366,481,432],{}," and\ngains ",[366,484,485],{},"aria-disabled",". On the component, every crumb and the overflow button\nfreeze together. Use it for a level the reader can no longer open, rather than\nshipping a dead link.",[396,488,490],{"id":489},"overflow",[400,491,492],{},"Long trails fold themselves",[362,494,495],{},"You do not manage overflow.",[415,497],{"name":498},"BbBreadcrumbs\u002FOverflow",[362,500,501],{},"When the trail outgrows its container the earliest crumbs fold into an ellipsis\nmenu, root first. The current page and its nearest ancestors stay visible, and\nthe hidden crumbs keep their targets.",[362,503,504,505,508],{},"Pass the full ",[366,506,507],{},"items"," array. Pre-slicing removes the keyboard-ready overflow\nmenu.",[362,510,511,512,515,516,456,519,522,523,526,527,530],{},"The fold point is estimated from label text. Start with ",[366,513,514],{},"offset-width"," for\nicons, slots, and edge regions. Use ",[366,517,518],{},"estimation-bias",[366,520,521],{},"divider-width",",\n",[366,524,525],{},"gap-width",", or ",[366,528,529],{},"ellipsis-width"," only when their matching visual changes.",[362,532,533,534,537,538,541],{},"In a flex row, use ",[366,535,536],{},"class=\"min-w-0 flex-auto\""," and keep siblings ",[366,539,540],{},"shrink-0",".\nThe full trail renders on the server, then folds after hydration.",[396,543,545],{"id":544},"edges",[400,546,547],{},"Icons and edge regions",[362,549,550,551,554,555,464],{},"A fixed icon per crumb is an item field, not a slot: ",[366,552,553],{},"prepend:icon"," and\n",[366,556,557],{},"append:icon",[415,559],{"name":560},"BbBreadcrumbs\u002FEdgeRegions",[362,562,563,564,567,568,571,572,464],{},"For varying content, use ",[366,565,566],{},"item:prepend"," or ",[366,569,570],{},"item:append",". These slots are inside\nthe crumb link, so do not add interactive descendants. Account for custom\ncontent with ",[366,573,514],{},[396,575,577],{"id":576},"crumb-slot",[400,578,579],{},"One crumb, its own slot",[362,581,582,583,585,586,589,590,593,594,597],{},"Every item also gets slots named after its ",[366,584,412],{},": ",[366,587,588],{},"#\u003Ckey>"," replaces that\ncrumb's text, ",[366,591,592],{},"#\u003Ckey>:prepend"," and ",[366,595,596],{},"#\u003Ckey>:append"," what sits before and after\nit.",[415,599],{"name":600},"BbBreadcrumbs\u002FCrumbSlot",[362,602,603,604,464],{},"Use these slots when one level needs richer content. A crumb in the overflow\nmenu follows ",[380,605,607],{"href":606},"\u002Fen\u002Fcomponents\u002Fbb-dropdown#row-slots","the dropdown's rules",[362,609,610,611,614,615,618,619,622,623,626,627,630],{},"The name is ",[422,612,613],{},"normalized",": every run of spaces, hyphens and punctuation becomes\n",[366,616,617],{},"_",", and the result is lowercased. An item keyed ",[366,620,621],{},"Order History"," is served by\n",[366,624,625],{},"#order_history",", and one keyed ",[366,628,629],{},"order-history"," by the same slot.",[435,632,634],{"title":633},"slot names are normalized",[362,635,636],{},"A raw v2-era name matches nothing and silently renders the default label. That is\nthe failure mode to look for after an upgrade.",[362,638,639,640,456,643,456,646,456,649,522,652,655,656,464],{},"Avoid slot-reserved keys such as ",[366,641,642],{},"prepend",[366,644,645],{},"append",[366,647,648],{},"divider",[366,650,651],{},"ellipsis",[366,653,654],{},"activator",", and ",[366,657,658],{},"item",[396,660,662],{"id":661},"styling",[400,663,664],{},"Divider and overflow button",[362,666,667],{},"The separator between crumbs is a slot, and only a slot.",[415,669],{"name":670},"BbBreadcrumbs\u002FDividerAndEllipsis",[362,672,673,674,677,678,464],{},"Dividers are decorative and stay ",[366,675,676],{},"aria-hidden",", so never encode meaning in one.\nIf yours is visually wider than the default, declare it with ",[366,679,521],{},[362,681,682,683,685,686,689,690,464],{},"The ",[366,684,651],{}," slot receives ",[366,687,688],{},"overflowCount"," and keeps the accessible button and\nmenu behavior. Pair a wider replacement with ",[366,691,529],{},[435,693,695],{"title":694},"divider removed",[362,696,697,698,700,701,704,705,707,708,711,712,715],{},"There is no ",[366,699,648],{}," prop in v3, and passing it now just leaks an attribute onto\nthe markup. The default separator is a small chevron, not a ",[366,702,703],{},"\u002F",". The default of\n",[366,706,521],{}," moved from ",[366,709,710],{},"5"," to ",[366,713,714],{},"16",", which matters only if you had tuned the\nold value.",{"title":372,"searchDepth":37,"depth":37,"links":717},[718,719,720,721,722,723],{"id":398,"depth":15,"text":402},{"id":447,"depth":15,"text":450},{"id":489,"depth":15,"text":492},{"id":544,"depth":15,"text":547},{"id":576,"depth":15,"text":579},{"id":661,"depth":15,"text":664},"The trail that says where the reader is and how to get back up.","md",{},true,[729,730,731,732,733,734],{"id":398,"title":402},{"id":447,"title":450},{"id":489,"title":492},{"id":544,"title":547},{"id":576,"title":579},{"id":661,"title":664},{"title":173,"description":724},"components\u002Fbb-breadcrumbs","N7pcq9Ct38uJMNjuYvxQj10n47yEhauBljQrZW0B5AU",{"name":173,"slug":739,"group":167,"description":740,"entrypoint":741,"docs":742,"props":745,"models":809,"events":810,"slots":811,"exposed":844,"pt":845,"validated":3,"migration":864},"bb-breadcrumbs","Renders hierarchical navigation paths.","bitboss-ui",{"contract":743,"source":744},"ai\u002FBbBreadcrumbs.md","ai\u002Fsource\u002FBbBreadcrumbs.md",[746,752,757,761,766,771,775,780,784,787,789,791,793,795,797,799,801,803,805,807],{"name":478,"type":747,"required":748,"default":749,"description":750,"note":751,"demo":447},"boolean | undefined",false,"false","Disables the component","On the component it freezes every crumb and the overflow button; per item it drops that crumb's `href` for `aria-disabled`. Use it for a level the reader can no longer open — a dead link is worse.",{"name":753,"type":754,"required":748,"default":714,"description":755,"note":756,"demo":661},"dividerWidth","number | undefined","Width of the divider in pixels.","Estimation only — it does not resize anything. The default moved from `5` in v2 to `16`, which matters only if you had tuned the old number.",{"name":758,"type":754,"required":748,"default":3,"description":759,"note":760,"demo":661},"ellipsisWidth","Explicit width used by the estimator for the ellipsis activator.","The width reserved for the overflow trigger. Set it whenever the `ellipsis` slot renders something wider than the default `…`.",{"name":762,"type":754,"required":748,"default":763,"description":764,"note":765,"demo":489},"estimationBias","1.12","Multiplier applied to each estimated item width.\nA higher value will result in more over-estimation.","A multiplier on every estimated item width. Raise it when crumbs clip before folding — a wider custom font is the usual cause — and lower it when the trail folds too eagerly.",{"name":767,"type":754,"required":748,"default":768,"description":769,"note":770,"demo":489},"gapWidth","4","Horizontal gap between breadcrumb elements in pixels.","Drives the rendered gap and the estimate at once, so changing it here is the supported way to retune the spacing.",{"name":507,"type":772,"required":727,"default":3,"description":773,"note":774,"demo":398},"BbBreadcrumbsItem[]","Array of items that describe how the breadcrumbs should behave.\nCompatible with navigating through `a` or `router-link`.","Each item is `{ key, text }` plus a target from the `BbBaseButton` navigation surface (minus `block`, `tag` and `type`), or an `onClick` when the hierarchy lives in client state. Leave the last item without a target: that is what makes it the current page. Keys are strings in v3 — a numeric key now fails type checking.",{"name":776,"type":754,"required":748,"default":777,"description":778,"note":779,"demo":544},"offsetWidth","0","Extra one-off width in pixels added to the total estimate\n(e.g. prepend\u002Fappend\u002Fitem slot content).","The knob you actually reach for. Slot and icon content is invisible to the estimator, so declare its total here rather than shrinking the trail with CSS.",{"name":781,"type":782,"required":748,"default":3,"description":783,"note":3,"demo":3},"pt","PtMap\u003CBbBreadcrumbsPtPart, BbBreadcrumbsPtState> | undefined","Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:\u003Cpart>` row.",{"name":785,"type":786,"required":748,"default":3,"description":3,"note":3,"demo":3},"pt:icon","PtValue | undefined",{"name":788,"type":786,"required":748,"default":3,"description":3,"note":3,"demo":3},"pt:icon:active",{"name":790,"type":786,"required":748,"default":3,"description":3,"note":3,"demo":3},"pt:icon:disabled",{"name":792,"type":786,"required":748,"default":3,"description":3,"note":3,"demo":3},"pt:item",{"name":794,"type":786,"required":748,"default":3,"description":3,"note":3,"demo":3},"pt:item:active",{"name":796,"type":786,"required":748,"default":3,"description":3,"note":3,"demo":3},"pt:item:disabled",{"name":798,"type":786,"required":748,"default":3,"description":3,"note":3,"demo":3},"pt:root",{"name":800,"type":786,"required":748,"default":3,"description":3,"note":3,"demo":3},"pt:root:active",{"name":802,"type":786,"required":748,"default":3,"description":3,"note":3,"demo":3},"pt:root:disabled",{"name":804,"type":786,"required":748,"default":3,"description":3,"note":3,"demo":3},"pt:text",{"name":806,"type":786,"required":748,"default":3,"description":3,"note":3,"demo":3},"pt:text:active",{"name":808,"type":786,"required":748,"default":3,"description":3,"note":3,"demo":3},"pt:text:disabled",[],[],[812,816,819,823,827,831,835,838,841],{"name":813,"type":814,"description":815,"note":3,"demo":576},"\u003Ckey>","BbBreadcrumbsItemSlotProps","One crumb's label, by its `key` through `slotKey`; falls back to `item.text`. A crumb folded into the overflow menu follows BbDropdown's slot rules instead.",{"name":817,"type":814,"description":818,"note":3,"demo":576},"\u003Ckey>:append","The glyph after one crumb's label; beats `item:append`, which beats its `append:icon`.",{"name":820,"type":814,"description":821,"note":822,"demo":576},"\u003Ckey>:prepend","The glyph before one crumb's label; beats `item:prepend`, which beats its `prepend:icon`.","Content inside the link, so keep it non-interactive and mark a decorative mark `aria-hidden`. Invisible to the width estimator: declare it with `offset-width`.",{"name":645,"type":824,"description":825,"note":826,"demo":544},"BbBreadcrumbsEdgeSlotProps","Content rendered after the breadcrumb list, in a dedicated append region.","The natural home for compact page actions on a detail header. Keep them `size=\"xs\"` and declare their width with `offset-width`.",{"name":648,"type":828,"description":829,"note":830,"demo":661},"Record\u003Cstring, never>","Replaces the default separator rendered between breadcrumb items.","The only way to change the separator: the v2 `divider` prop no longer exists, and passing it leaks a stray attribute. Dividers stay `aria-hidden`, so never put meaning in one.",{"name":651,"type":832,"description":833,"note":834,"demo":661},"BbBreadcrumbsEllipsisSlotProps","Replaces the default `…` overflow button shown when items overflow.","Repaints the overflow trigger, which stays a real button with a localized, count-aware label and a keyboard-complete menu. The scope carries `overflowCount`, so the trigger can say how much is folded.",{"name":570,"type":814,"description":836,"note":837,"demo":544},"Content rendered after **every** breadcrumb item's link\u002Fbutton. Generic\nfallback below a per-item `\u003Ckey>:append` slot and above the item's\n`append:icon`.","Same precedence as `item:prepend`: a per-key slot beats it, and the item's `append:icon` is the fallback below it.",{"name":566,"type":814,"description":839,"note":840,"demo":544},"Content rendered before **every** breadcrumb item's link\u002Fbutton, in the\nleading edge region. Generic fallback: a per-item `\u003Ckey>:prepend` slot\ntakes precedence, and the item's `prepend:icon` is used when neither slot\nis present.","The generic fallback for every crumb. A per-key `\u003Ckey>:prepend` slot wins over it, and the item's own `prepend:icon` is used when neither slot is present — prefer that field for a static glyph.",{"name":642,"type":824,"description":842,"note":843,"demo":544},"Content rendered before the breadcrumb list, in a dedicated prepend region.","A fixed region before the whole trail, not before each crumb — a hint, a workspace mark. Account for its width with `offset-width`.",[],{"parts":846,"states":858},[847,850,852,855],{"name":848,"description":849},"root","The `\u003Cnav>`.",{"name":658,"description":851},"One crumb — a broadcast resolved per crumb; the overflow ellipsis crumb counts. The dividers are chrome, not a part.",{"name":853,"description":854},"icon","A crumb's `prepend:icon` \u002F `append:icon` glyphs — a broadcast.",{"name":856,"description":857},"text","A crumb's label inside its link, without the glyphs beside it — a broadcast resolved per crumb, like `item`.",[859,862],{"name":860,"description":861},"active","Per node, on each crumb's `item` \u002F `text`: the current page — the last crumb.",{"name":478,"description":863},"Per node: a crumb that is disabled on its own; component-wide while the whole component is `disabled`.",{"removed":865,"renamed":866},[],[],1790005160721]