[{"data":1,"prerenderedAt":748},["ShallowReactive",2],{"api-none":3,"docs-nav-en":4,"locale-alternates":247,"page-en-\u002Fcomponents\u002Fbb-avatar":378,"pt-showcase-BbAvatar":681},null,[5,20,32,56,68,112,145,181,202,223,235,241],{"label":6,"entries":7},"Getting started",[8,12,16],{"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,{"title":17,"path":18,"component":-1,"order":19},"Adoption checklist","\u002Fguides\u002Fadoption-checklist",3,{"label":21,"entries":22},"Design system",[23,26,29],{"title":24,"path":25,"component":-1,"order":11},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":27,"path":28,"component":-1,"order":15},"Design language","\u002Fguides\u002Fdesign-language",{"title":30,"path":31,"component":-1,"order":19},"Passthrough","\u002Fguides\u002Fpassthrough",{"label":33,"entries":34},"Playbooks",[35,38,41,44,48,52],{"title":36,"path":37,"component":-1,"order":11},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":39,"path":40,"component":-1,"order":15},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":42,"path":43,"component":-1,"order":19},"Coherence","\u002Fguides\u002Fcoherence",{"title":45,"path":46,"component":-1,"order":47},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":49,"path":50,"component":-1,"order":51},"Icons","\u002Fguides\u002Ficons",5,{"title":53,"path":54,"component":-1,"order":55},"Preset components","\u002Fguides\u002Fpreset-components",6,{"label":57,"entries":58},"Ecosystem",[59,62,65],{"title":60,"path":61,"component":-1,"order":11},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":63,"path":64,"component":-1,"order":15},"Nuxt","\u002Fguides\u002Fnuxt",{"title":66,"path":67,"component":-1,"order":19},"AI agents","\u002Fguides\u002Fai-agents",{"label":69,"entries":70},"Inputs",[71,74,77,80,83,86,89,92,96,100,104,108],{"title":72,"path":73,"component":72,"order":11},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":75,"path":76,"component":75,"order":15},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":78,"path":79,"component":78,"order":19},"BbCalendar","\u002Fcomponents\u002Fbb-calendar",{"title":81,"path":82,"component":81,"order":19},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":84,"path":85,"component":84,"order":47},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":87,"path":88,"component":87,"order":51},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":90,"path":91,"component":90,"order":55},"BbForm","\u002Fcomponents\u002Fbb-form",{"title":93,"path":94,"component":93,"order":95},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":97,"path":98,"component":97,"order":99},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":101,"path":102,"component":101,"order":103},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":105,"path":106,"component":105,"order":107},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":109,"path":110,"component":109,"order":111},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":113,"entries":114},"Selection",[115,118,121,124,127,130,133,136,139,142],{"title":116,"path":117,"component":116,"order":11},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":119,"path":120,"component":119,"order":15},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":122,"path":123,"component":122,"order":19},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":125,"path":126,"component":125,"order":47},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":128,"path":129,"component":128,"order":51},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":131,"path":132,"component":131,"order":55},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":134,"path":135,"component":134,"order":95},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":137,"path":138,"component":137,"order":99},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":140,"path":141,"component":140,"order":103},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":143,"path":144,"component":143,"order":107},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":146,"entries":147},"Overlay",[148,151,154,157,160,163,166,169,172,175,178],{"title":149,"path":150,"component":149,"order":11},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":152,"path":153,"component":152,"order":15},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":155,"path":156,"component":155,"order":19},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":158,"path":159,"component":158,"order":47},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":161,"path":162,"component":161,"order":51},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":164,"path":165,"component":164,"order":55},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":167,"path":168,"component":167,"order":95},"BbHoverCard","\u002Fcomponents\u002Fbb-hover-card",{"title":170,"path":171,"component":170,"order":95},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":173,"path":174,"component":173,"order":99},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":176,"path":177,"component":176,"order":103},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":179,"path":180,"component":179,"order":107},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":182,"entries":183},"Navigation",[184,187,190,193,196,199],{"title":185,"path":186,"component":185,"order":11},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":188,"path":189,"component":188,"order":15},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":191,"path":192,"component":191,"order":19},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":194,"path":195,"component":194,"order":47},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":197,"path":198,"component":197,"order":51},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":200,"path":201,"component":200,"order":55},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":203,"entries":204},"Feedback",[205,208,211,214,217,220],{"title":206,"path":207,"component":206,"order":11},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":209,"path":210,"component":209,"order":15},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":212,"path":213,"component":212,"order":19},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":215,"path":216,"component":215,"order":47},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":218,"path":219,"component":218,"order":51},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":221,"path":222,"component":221,"order":55},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":224,"entries":225},"Data Display",[226,229,232],{"title":227,"path":228,"component":227,"order":11},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":230,"path":231,"component":230,"order":15},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":233,"path":234,"component":233,"order":19},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":236,"entries":237},"Layout & Utility",[238],{"title":239,"path":240,"component":239,"order":11},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":242,"entries":243},"Other",[244],{"title":245,"path":246,"component":245,"order":11},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",{"\u002Fit\u002Fcomponenti\u002Fbb-accordion":248,"\u002Fen\u002Fcomponents\u002Fbb-accordion":249,"\u002Fit\u002Fcomponenti\u002Fbb-alert":250,"\u002Fen\u002Fcomponents\u002Fbb-alert":251,"\u002Fit\u002Fcomponenti\u002Fbb-asterisk":252,"\u002Fen\u002Fcomponents\u002Fbb-asterisk":253,"\u002Fit\u002Fcomponenti\u002Fbb-avatar":254,"\u002Fen\u002Fcomponents\u002Fbb-avatar":255,"\u002Fit\u002Fcomponenti\u002Fbb-badge":256,"\u002Fen\u002Fcomponents\u002Fbb-badge":257,"\u002Fit\u002Fcomponenti\u002Fbb-base-button":258,"\u002Fen\u002Fcomponents\u002Fbb-base-button":259,"\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs":260,"\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs":261,"\u002Fit\u002Fcomponenti\u002Fbb-button":262,"\u002Fen\u002Fcomponents\u002Fbb-button":263,"\u002Fit\u002Fcomponenti\u002Fbb-calendar":264,"\u002Fen\u002Fcomponents\u002Fbb-calendar":265,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":266,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":267,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":268,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":269,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":270,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":271,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":272,"\u002Fen\u002Fcomponents\u002Fbb-color-input":273,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":274,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":275,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":276,"\u002Fen\u002Fcomponents\u002Fbb-confirm":277,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":278,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":279,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":280,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":281,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":282,"\u002Fen\u002Fcomponents\u002Fbb-dialog":283,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":284,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":285,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":286,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":287,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":288,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":289,"\u002Fit\u002Fcomponenti\u002Fbb-form":290,"\u002Fen\u002Fcomponents\u002Fbb-form":291,"\u002Fit\u002Fcomponenti\u002Fbb-hover-card":292,"\u002Fen\u002Fcomponents\u002Fbb-hover-card":293,"\u002Fit\u002Fcomponenti\u002Fbb-icon":294,"\u002Fen\u002Fcomponents\u002Fbb-icon":295,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":296,"\u002Fen\u002Fcomponents\u002Fbb-indicator":297,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":298,"\u002Fen\u002Fcomponents\u002Fbb-number-input":299,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":300,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":301,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":302,"\u002Fen\u002Fcomponents\u002Fbb-pagination":303,"\u002Fit\u002Fcomponenti\u002Fbb-popover":304,"\u002Fen\u002Fcomponents\u002Fbb-popover":305,"\u002Fit\u002Fcomponenti\u002Fbb-progress":306,"\u002Fen\u002Fcomponents\u002Fbb-progress":307,"\u002Fit\u002Fcomponenti\u002Fbb-radio":308,"\u002Fen\u002Fcomponents\u002Fbb-radio":309,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":310,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":311,"\u002Fit\u002Fcomponenti\u002Fbb-rating":312,"\u002Fen\u002Fcomponents\u002Fbb-rating":313,"\u002Fit\u002Fcomponenti\u002Fbb-select":314,"\u002Fen\u002Fcomponents\u002Fbb-select":315,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":316,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":317,"\u002Fit\u002Fcomponenti\u002Fbb-slider":318,"\u002Fen\u002Fcomponents\u002Fbb-slider":319,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":320,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":321,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":322,"\u002Fen\u002Fcomponents\u002Fbb-spinner":323,"\u002Fit\u002Fcomponenti\u002Fbb-switch":324,"\u002Fen\u002Fcomponents\u002Fbb-switch":325,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":326,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":327,"\u002Fit\u002Fcomponenti\u002Fbb-table":328,"\u002Fen\u002Fcomponents\u002Fbb-table":329,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":330,"\u002Fen\u002Fcomponents\u002Fbb-tabs":331,"\u002Fit\u002Fcomponenti\u002Fbb-tag":332,"\u002Fen\u002Fcomponents\u002Fbb-tag":333,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":334,"\u002Fen\u002Fcomponents\u002Fbb-text-input":335,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":336,"\u002Fen\u002Fcomponents\u002Fbb-textarea":337,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":338,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":339,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":340,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":341,"\u002Fit\u002Fcomponenti\u002Fbb-toast":342,"\u002Fen\u002Fcomponents\u002Fbb-toast":343,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":344,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":345,"\u002Fit\u002Fcomponenti\u002Fbb-tree":346,"\u002Fen\u002Fcomponents\u002Fbb-tree":347,"\u002Fit\u002Fguide\u002Fadoption-checklist":348,"\u002Fen\u002Fguides\u002Fadoption-checklist":349,"\u002Fit\u002Fguide\u002Fai-agents":350,"\u002Fen\u002Fguides\u002Fai-agents":351,"\u002Fit\u002Fguide\u002Fcoherence":352,"\u002Fen\u002Fguides\u002Fcoherence":353,"\u002Fit\u002Fguide\u002Fdesign-language":354,"\u002Fen\u002Fguides\u002Fdesign-language":355,"\u002Fit\u002Fguide\u002Fdesign-tokens":356,"\u002Fen\u002Fguides\u002Fdesign-tokens":357,"\u002Fit\u002Fguide\u002Ffetching-data":358,"\u002Fen\u002Fguides\u002Ffetching-data":359,"\u002Fit\u002Fguide\u002Ficons":360,"\u002Fen\u002Fguides\u002Ficons":361,"\u002Fit\u002Fguide\u002Finertia":362,"\u002Fen\u002Fguides\u002Finertia":363,"\u002Fit\u002Fguide\u002Finstallation":364,"\u002Fen\u002Fguides\u002Finstallation":365,"\u002Fit\u002Fguide\u002Fmigration":366,"\u002Fen\u002Fguides\u002Fmigration":367,"\u002Fit\u002Fguide\u002Fnuxt":368,"\u002Fen\u002Fguides\u002Fnuxt":369,"\u002Fit\u002Fguide\u002Foptions-and-items":370,"\u002Fen\u002Fguides\u002Foptions-and-items":371,"\u002Fit\u002Fguide\u002Fpassthrough":372,"\u002Fen\u002Fguides\u002Fpassthrough":373,"\u002Fit\u002Fguide\u002Fpreset-components":374,"\u002Fen\u002Fguides\u002Fpreset-components":375,"\u002Fit\u002Fguide\u002Fvalidated-forms":376,"\u002Fen\u002Fguides\u002Fvalidated-forms":377},"\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",{"id":379,"title":227,"body":380,"component":227,"description":669,"extension":670,"group":224,"meta":671,"navigation":672,"order":11,"path":228,"sections":673,"seo":678,"stem":679,"__hash__":680},"docs_en\u002Fcomponents\u002Fbb-avatar.md",{"type":381,"value":382,"toc":663},"minimark",[383,424,432,447,451,457,460,477,483,486,489,492,498,504,514,593,610,616,640,643,659],[384,385,386,394],"when",{},[387,388,389,390,393],"p",{},"Use ",[391,392,227],"code",{}," for a person's or entity's visual identity in member lists, activity feeds, and assignee cells. It is display-only.",[395,396,398],"template",{"v-slot:else":397},"",[399,400,401,410,417],"ul",{},[402,403,404,409],"li",{},[405,406,407],"a",{"href":296},[391,408,212],{},", when status or a count belongs on the avatar",[402,411,412,416],{},[405,413,414],{"href":284},[391,415,161],{},", when the avatar opens an account menu",[402,418,419,423],{},[405,420,421],{"href":294},[391,422,230],{},", when the mark represents no person or entity",[425,426,428],"h2",{"id":427},"default",[429,430,431],"span",{},"Show a member",[387,433,434,435,441,442,446],{},"Pass the photo and a meaningful ",[405,436,438],{"href":437},"\u002Fen\u002Fcomponents\u002Fbb-avatar\u002Fapi#prop-alt",[391,439,440],{},"alt","; keep initials in the ",[405,443,445],{"href":444},"\u002Fen\u002Fcomponents\u002Fbb-avatar\u002Fapi#slot-default","default slot"," so the same row survives a missing or failed image.",[448,449],"demo",{"name":450},"BbAvatar\u002FBasic",[387,452,453,454,456],{},"The fallback order is image, default slot, then the built-in person icon. On a fallback, ",[391,455,440],{}," becomes the accessible name. Leave it empty only when the avatar is decorative.",[448,458],{"name":459},"BbAvatar\u002FFallback",[387,461,462,468,469,472,473,476],{},[405,463,465],{"href":464},"\u002Fen\u002Fcomponents\u002Fbb-avatar\u002Fapi#prop-size",[391,466,467],{},"size"," accepts the shared ",[391,470,471],{},"xs","–",[391,474,475],{},"2xl"," scale, pixels, or a CSS length. The image is always center-cropped into a circle; there is no square variant.",[425,478,480],{"id":479},"composition",[429,481,482],{},"Presence and groups",[387,484,485],{},"Compose status and overflow around the avatar instead of turning the avatar into an interactive control.",[448,487],{"name":488},"BbAvatar\u002FPresence",[448,490],{"name":491},"BbAvatar\u002FStack",[387,493,494,495,497],{},"A presence dot is silent, so repeat the status in text. Wrap a clickable avatar in a real button, link, or dropdown trigger; ",[391,496,227],{}," emits no events.",[425,499,501],{"id":500},"loading",[429,502,503],{},"Slow images and SSR",[387,505,506,507,513],{},"The component checks the image ",[405,508,510],{"href":509},"\u002Fen\u002Fcomponents\u002Fbb-avatar\u002Fapi#prop-timeout",[391,511,512],{},"timeout"," milliseconds after mount (400 by default) to recover events missed before hydration. A late image can still replace the fallback.",[515,516,520],"pre",{"className":517,"code":518,"language":519,"meta":397,"style":397},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003CBbAvatar :src=\"member.photo\" :alt=\"member.fullName\" :timeout=\"4000\">\n    {{ member.initials }}\n\u003C\u002FBbAvatar>\n","vue",[391,521,522,579,584],{"__ignoreMap":397},[429,523,525,529,532,535,539,542,545,548,550,552,554,556,558,561,563,565,567,569,571,574,576],{"class":524,"line":11},"line",[429,526,528],{"class":527},"suds8","\u003C",[429,530,227],{"class":531},"sne4z",[429,533,534],{"class":527}," :",[429,536,538],{"class":537},"s-5SL","src",[429,540,541],{"class":527},"=",[429,543,544],{"class":527},"\"",[429,546,547],{"class":527},"member.photo",[429,549,544],{"class":527},[429,551,534],{"class":527},[429,553,440],{"class":537},[429,555,541],{"class":527},[429,557,544],{"class":527},[429,559,560],{"class":527},"member.fullName",[429,562,544],{"class":527},[429,564,534],{"class":527},[429,566,512],{"class":537},[429,568,541],{"class":527},[429,570,544],{"class":527},[429,572,573],{"class":537},"4000",[429,575,544],{"class":527},[429,577,578],{"class":527},">\n",[429,580,581],{"class":524,"line":15},[429,582,583],{"class":527},"    {{ member.initials }}\n",[429,585,586,589,591],{"class":524,"line":19},[429,587,588],{"class":527},"\u003C\u002F",[429,590,227],{"class":531},[429,592,578],{"class":527},[387,594,595,596,602,603,609],{},"Raise it for a slow origin, so readers do not see the initials flip to the photo. Use ",[405,597,599],{"href":598},"\u002Fen\u002Fcomponents\u002Fbb-avatar\u002Fapi#prop-srcset",[391,600,601],{},"srcset"," with ",[405,604,606],{"href":605},"\u002Fen\u002Fcomponents\u002Fbb-avatar\u002Fapi#prop-sizes",[391,607,608],{},"sizes"," for responsive sources; both pass through to the underlying image.",[425,611,613],{"id":612},"constraints",[429,614,615],{},"Bots and custom colour",[387,617,618,619,621,622,624,625,628,629,632,633,628,636,639],{},"For a bot or service account, place an unlabeled ",[391,620,230],{}," in the fallback slot and keep the actor's name in ",[391,623,440],{},". The fallback paints with ",[391,626,627],{},"--bb-primary"," and ",[391,630,631],{},"--bb-primary-fg","; for a colour that comes from data, such as a workspace's own, set ",[391,634,635],{},"--bg",[391,637,638],{},"--fg"," on the avatar.",[448,641],{"name":642},"BbAvatar\u002FReleaseFeed",[644,645,647],"migration",{"title":646},"color → tokens",[387,648,649,650,653,654,628,656,658],{},"The ",[391,651,652],{},"color"," prop was removed. Retheme the primary pair for product-wide colour, or use ",[391,655,635],{},[391,657,638],{}," for one instance.",[660,661,662],"style",{},"html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":397,"searchDepth":19,"depth":19,"links":664},[665,666,667,668],{"id":427,"depth":15,"text":431},{"id":479,"depth":15,"text":482},{"id":500,"depth":15,"text":503},{"id":612,"depth":15,"text":615},"Display a person or entity with an image, a named fallback, and predictable loading behaviour.","md",{},true,[674,675,676,677],{"id":427,"title":431},{"id":479,"title":482},{"id":500,"title":503},{"id":612,"title":615},{"title":227,"description":669},"components\u002Fbb-avatar","jxmRSPOp_k48q0ujN2qbZRBoJD8Y-F6Ob3M9YywZoxI",{"name":227,"slug":682,"group":224,"description":683,"entrypoint":684,"docs":685,"props":688,"models":722,"events":723,"slots":724,"exposed":729,"pt":730,"validated":3,"migration":739},"bb-avatar","Displays an avatar and has a fallback content slot.","bitboss-ui",{"contract":686,"source":687},"ai\u002FBbAvatar.md","ai\u002Fsource\u002FBbAvatar.md",[689,695,699,704,709,712,714,717],{"name":440,"type":690,"required":691,"default":692,"description":693,"note":694,"demo":427},"string | undefined",false,"\"\"","Alternative text for the image, used for accessibility.","It does double duty: alternative text on the image, and the accessible name of the fallback, which the component labels with `role=\"img\"`. Leaving it empty makes the fallback nameless — correct only for a decorative avatar.",{"name":696,"type":697,"required":691,"default":3,"description":698,"note":3,"demo":3},"pt","PtMap\u003CBbAvatarPtPart, never> | undefined","Passthrough, object form: the same keys as the `pt:*` attributes without the prefix. See the `pt:\u003Cpart>` row.",{"name":700,"type":701,"required":691,"default":3,"description":702,"note":3,"demo":703},"pt:\u003Cpart>","PtValue | undefined","Passthrough, attribute form: one attribute per part, `pt:\u003Cpart>`. Parts: `icon`, `root`.","passthrough",{"name":467,"type":705,"required":691,"default":706,"description":707,"note":708,"demo":427},"number | CssSize | keyof Sizes | undefined","\"md\"","Defines the component size.\n\nAccepted values:\n- A key from the provided size map (`keyof T`), e.g. `'sm' | 'md' | 'lg'`\n- A custom CSS size string (e.g. `'20px'`, `'1.5rem'`, `'2em'`)\n- A number, typically interpreted as pixels by size parsers","The same scale `BbIcon` reads, so an avatar and an icon line up on the same key. A percentage fills a square parent, which is how an avatar sits in a cell that already has a size.",{"name":608,"type":690,"required":691,"default":3,"description":710,"note":711,"demo":3},"Sizes attribute for the image, used with `srcset`.","Passes straight through to the `\u003Cimg>`, and only means anything alongside `srcset`.",{"name":538,"type":690,"required":691,"default":3,"description":713,"note":3,"demo":427},"Source URL of the avatar image.",{"name":601,"type":690,"required":691,"default":3,"description":715,"note":716,"demo":3},"Responsive image source set.","Passes straight through to the `\u003Cimg>`, so pair it with `sizes` or the browser has no width to pick against. The image is center-cropped, so the sources do not need to be pre-cropped square.",{"name":512,"type":718,"required":691,"default":719,"description":720,"note":721,"demo":500},"number | undefined","400","Milliseconds to wait after mount before checking whether the image loaded correctly (SSR fallback).","The deadline is a safety net for prerendered pages, where the image events can fire before hydration. It is not terminal: the `\u003Cimg>` stays mounted and a late photo replaces the fallback. Raise it for a slow origin rather than accepting the visible flip.",[],[],[725],{"name":427,"type":726,"description":727,"note":728,"demo":612},"Record\u003Cstring, never>","Fallback content shown when no image source is provided or when the image fails to load. Typically used to render initials or a placeholder icon.","The one sanctioned place to hand-place a `BbIcon`, because `BbAvatar` has no `icon` prop — that is how a bot or a service account gets a brand mark instead of initials. Initials scale with the avatar (40% of its size, never under 8px).",[],{"parts":731,"states":738},[732,735],{"name":733,"description":734},"root","The avatar frame, with the image or the fallback inside.",{"name":736,"description":737},"icon","The default user glyph — rendered only while there is no image to show and the default slot is not overridden, so it lands nowhere otherwise.",[],{"removed":740,"renamed":747},[741],{"name":652,"surface":742,"replacedBy":3,"hint":3,"since":743,"migration":744,"silent":672,"fix":745},"prop","3.0.0-alpha.1","ai\u002Fguides\u002Fmigration\u002Fcomponents\u002Fbb-avatar.md",{"kind":746},"manual",[],1793055138210]