[{"data":1,"prerenderedAt":957},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":134,"api-none":377,"page-en-\u002Fcomponents\u002Fbb-indicator":378,"pt-showcase-BbIndicator":883},{"\u002Fit\u002Fcomponenti\u002Fbb-accordion":4,"\u002Fen\u002Fcomponents\u002Fbb-accordion":5,"\u002Fit\u002Fcomponenti\u002Fbb-alert":6,"\u002Fen\u002Fcomponents\u002Fbb-alert":7,"\u002Fit\u002Fcomponenti\u002Fbb-asterisk":8,"\u002Fen\u002Fcomponents\u002Fbb-asterisk":9,"\u002Fit\u002Fcomponenti\u002Fbb-avatar":10,"\u002Fen\u002Fcomponents\u002Fbb-avatar":11,"\u002Fit\u002Fcomponenti\u002Fbb-badge":12,"\u002Fen\u002Fcomponents\u002Fbb-badge":13,"\u002Fit\u002Fcomponenti\u002Fbb-base-button":14,"\u002Fen\u002Fcomponents\u002Fbb-base-button":15,"\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs":16,"\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs":17,"\u002Fit\u002Fcomponenti\u002Fbb-button":18,"\u002Fen\u002Fcomponents\u002Fbb-button":19,"\u002Fit\u002Fcomponenti\u002Fbb-calendar":20,"\u002Fen\u002Fcomponents\u002Fbb-calendar":21,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":22,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":23,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":24,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":25,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":26,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":27,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":28,"\u002Fen\u002Fcomponents\u002Fbb-color-input":29,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":30,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":31,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":32,"\u002Fen\u002Fcomponents\u002Fbb-confirm":33,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":34,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":35,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":36,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":37,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":38,"\u002Fen\u002Fcomponents\u002Fbb-dialog":39,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":40,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":41,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":42,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":43,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":44,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":45,"\u002Fit\u002Fcomponenti\u002Fbb-form":46,"\u002Fen\u002Fcomponents\u002Fbb-form":47,"\u002Fit\u002Fcomponenti\u002Fbb-hover-card":48,"\u002Fen\u002Fcomponents\u002Fbb-hover-card":49,"\u002Fit\u002Fcomponenti\u002Fbb-icon":50,"\u002Fen\u002Fcomponents\u002Fbb-icon":51,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":52,"\u002Fen\u002Fcomponents\u002Fbb-indicator":53,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":54,"\u002Fen\u002Fcomponents\u002Fbb-number-input":55,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":56,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":57,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":58,"\u002Fen\u002Fcomponents\u002Fbb-pagination":59,"\u002Fit\u002Fcomponenti\u002Fbb-popover":60,"\u002Fen\u002Fcomponents\u002Fbb-popover":61,"\u002Fit\u002Fcomponenti\u002Fbb-progress":62,"\u002Fen\u002Fcomponents\u002Fbb-progress":63,"\u002Fit\u002Fcomponenti\u002Fbb-radio":64,"\u002Fen\u002Fcomponents\u002Fbb-radio":65,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":66,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":67,"\u002Fit\u002Fcomponenti\u002Fbb-rating":68,"\u002Fen\u002Fcomponents\u002Fbb-rating":69,"\u002Fit\u002Fcomponenti\u002Fbb-select":70,"\u002Fen\u002Fcomponents\u002Fbb-select":71,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":72,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":73,"\u002Fit\u002Fcomponenti\u002Fbb-slider":74,"\u002Fen\u002Fcomponents\u002Fbb-slider":75,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":76,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":77,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":78,"\u002Fen\u002Fcomponents\u002Fbb-spinner":79,"\u002Fit\u002Fcomponenti\u002Fbb-switch":80,"\u002Fen\u002Fcomponents\u002Fbb-switch":81,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":82,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":83,"\u002Fit\u002Fcomponenti\u002Fbb-table":84,"\u002Fen\u002Fcomponents\u002Fbb-table":85,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":86,"\u002Fen\u002Fcomponents\u002Fbb-tabs":87,"\u002Fit\u002Fcomponenti\u002Fbb-tag":88,"\u002Fen\u002Fcomponents\u002Fbb-tag":89,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":90,"\u002Fen\u002Fcomponents\u002Fbb-text-input":91,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":92,"\u002Fen\u002Fcomponents\u002Fbb-textarea":93,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":94,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":95,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":96,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":97,"\u002Fit\u002Fcomponenti\u002Fbb-toast":98,"\u002Fen\u002Fcomponents\u002Fbb-toast":99,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":100,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":101,"\u002Fit\u002Fcomponenti\u002Fbb-tree":102,"\u002Fen\u002Fcomponents\u002Fbb-tree":103,"\u002Fit\u002Fguide\u002Fadoption-checklist":104,"\u002Fen\u002Fguides\u002Fadoption-checklist":105,"\u002Fit\u002Fguide\u002Fai-agents":106,"\u002Fen\u002Fguides\u002Fai-agents":107,"\u002Fit\u002Fguide\u002Fcoherence":108,"\u002Fen\u002Fguides\u002Fcoherence":109,"\u002Fit\u002Fguide\u002Fdesign-language":110,"\u002Fen\u002Fguides\u002Fdesign-language":111,"\u002Fit\u002Fguide\u002Fdesign-tokens":112,"\u002Fen\u002Fguides\u002Fdesign-tokens":113,"\u002Fit\u002Fguide\u002Ffetching-data":114,"\u002Fen\u002Fguides\u002Ffetching-data":115,"\u002Fit\u002Fguide\u002Ficons":116,"\u002Fen\u002Fguides\u002Ficons":117,"\u002Fit\u002Fguide\u002Finertia":118,"\u002Fen\u002Fguides\u002Finertia":119,"\u002Fit\u002Fguide\u002Finstallation":120,"\u002Fen\u002Fguides\u002Finstallation":121,"\u002Fit\u002Fguide\u002Fmigration":122,"\u002Fen\u002Fguides\u002Fmigration":123,"\u002Fit\u002Fguide\u002Fnuxt":124,"\u002Fen\u002Fguides\u002Fnuxt":125,"\u002Fit\u002Fguide\u002Foptions-and-items":126,"\u002Fen\u002Fguides\u002Foptions-and-items":127,"\u002Fit\u002Fguide\u002Fpassthrough":128,"\u002Fen\u002Fguides\u002Fpassthrough":129,"\u002Fit\u002Fguide\u002Fpreset-components":130,"\u002Fen\u002Fguides\u002Fpreset-components":131,"\u002Fit\u002Fguide\u002Fvalidated-forms":132,"\u002Fen\u002Fguides\u002Fvalidated-forms":133},"\u002Fen\u002Fcomponents\u002Fbb-accordion","\u002Fit\u002Fcomponenti\u002Fbb-accordion","\u002Fen\u002Fcomponents\u002Fbb-alert","\u002Fit\u002Fcomponenti\u002Fbb-alert","\u002Fen\u002Fcomponents\u002Fbb-asterisk","\u002Fit\u002Fcomponenti\u002Fbb-asterisk","\u002Fen\u002Fcomponents\u002Fbb-avatar","\u002Fit\u002Fcomponenti\u002Fbb-avatar","\u002Fen\u002Fcomponents\u002Fbb-badge","\u002Fit\u002Fcomponenti\u002Fbb-badge","\u002Fen\u002Fcomponents\u002Fbb-base-button","\u002Fit\u002Fcomponenti\u002Fbb-base-button","\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs","\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs","\u002Fen\u002Fcomponents\u002Fbb-button","\u002Fit\u002Fcomponenti\u002Fbb-button","\u002Fen\u002Fcomponents\u002Fbb-calendar","\u002Fit\u002Fcomponenti\u002Fbb-calendar","\u002Fen\u002Fcomponents\u002Fbb-checkbox","\u002Fit\u002Fcomponenti\u002Fbb-checkbox","\u002Fen\u002Fcomponents\u002Fbb-checkbox-group","\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group","\u002Fen\u002Fcomponents\u002Fbb-collapsible","\u002Fit\u002Fcomponenti\u002Fbb-collapsible","\u002Fen\u002Fcomponents\u002Fbb-color-input","\u002Fit\u002Fcomponenti\u002Fbb-color-input","\u002Fen\u002Fcomponents\u002Fbb-color-palette","\u002Fit\u002Fcomponenti\u002Fbb-color-palette","\u002Fen\u002Fcomponents\u002Fbb-confirm","\u002Fit\u002Fcomponenti\u002Fbb-confirm","\u002Fen\u002Fcomponents\u002Fbb-date-picker","\u002Fit\u002Fcomponenti\u002Fbb-date-picker","\u002Fen\u002Fcomponents\u002Fbb-date-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input","\u002Fen\u002Fcomponents\u002Fbb-dialog","\u002Fit\u002Fcomponenti\u002Fbb-dialog","\u002Fen\u002Fcomponents\u002Fbb-dropdown","\u002Fit\u002Fcomponenti\u002Fbb-dropdown","\u002Fen\u002Fcomponents\u002Fbb-dropdown-button","\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button","\u002Fen\u002Fcomponents\u002Fbb-dropzone","\u002Fit\u002Fcomponenti\u002Fbb-dropzone","\u002Fen\u002Fcomponents\u002Fbb-form","\u002Fit\u002Fcomponenti\u002Fbb-form","\u002Fen\u002Fcomponents\u002Fbb-hover-card","\u002Fit\u002Fcomponenti\u002Fbb-hover-card","\u002Fen\u002Fcomponents\u002Fbb-icon","\u002Fit\u002Fcomponenti\u002Fbb-icon","\u002Fen\u002Fcomponents\u002Fbb-indicator","\u002Fit\u002Fcomponenti\u002Fbb-indicator","\u002Fen\u002Fcomponents\u002Fbb-number-input","\u002Fit\u002Fcomponenti\u002Fbb-number-input","\u002Fen\u002Fcomponents\u002Fbb-off-canvas","\u002Fit\u002Fcomponenti\u002Fbb-off-canvas","\u002Fen\u002Fcomponents\u002Fbb-pagination","\u002Fit\u002Fcomponenti\u002Fbb-pagination","\u002Fen\u002Fcomponents\u002Fbb-popover","\u002Fit\u002Fcomponenti\u002Fbb-popover","\u002Fen\u002Fcomponents\u002Fbb-progress","\u002Fit\u002Fcomponenti\u002Fbb-progress","\u002Fen\u002Fcomponents\u002Fbb-radio","\u002Fit\u002Fcomponenti\u002Fbb-radio","\u002Fen\u002Fcomponents\u002Fbb-radio-group","\u002Fit\u002Fcomponenti\u002Fbb-radio-group","\u002Fen\u002Fcomponents\u002Fbb-rating","\u002Fit\u002Fcomponenti\u002Fbb-rating","\u002Fen\u002Fcomponents\u002Fbb-select","\u002Fit\u002Fcomponenti\u002Fbb-select","\u002Fen\u002Fcomponents\u002Fbb-select-popover","\u002Fit\u002Fcomponenti\u002Fbb-select-popover","\u002Fen\u002Fcomponents\u002Fbb-slider","\u002Fit\u002Fcomponenti\u002Fbb-slider","\u002Fen\u002Fcomponents\u002Fbb-smooth-height","\u002Fit\u002Fcomponenti\u002Fbb-smooth-height","\u002Fen\u002Fcomponents\u002Fbb-spinner","\u002Fit\u002Fcomponenti\u002Fbb-spinner","\u002Fen\u002Fcomponents\u002Fbb-switch","\u002Fit\u002Fcomponenti\u002Fbb-switch","\u002Fen\u002Fcomponents\u002Fbb-switch-group","\u002Fit\u002Fcomponenti\u002Fbb-switch-group","\u002Fen\u002Fcomponents\u002Fbb-table","\u002Fit\u002Fcomponenti\u002Fbb-table","\u002Fen\u002Fcomponents\u002Fbb-tabs","\u002Fit\u002Fcomponenti\u002Fbb-tabs","\u002Fen\u002Fcomponents\u002Fbb-tag","\u002Fit\u002Fcomponenti\u002Fbb-tag","\u002Fen\u002Fcomponents\u002Fbb-text-input","\u002Fit\u002Fcomponenti\u002Fbb-text-input","\u002Fen\u002Fcomponents\u002Fbb-textarea","\u002Fit\u002Fcomponenti\u002Fbb-textarea","\u002Fen\u002Fcomponents\u002Fbb-time-picker","\u002Fit\u002Fcomponenti\u002Fbb-time-picker","\u002Fen\u002Fcomponents\u002Fbb-time-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input","\u002Fen\u002Fcomponents\u002Fbb-toast","\u002Fit\u002Fcomponenti\u002Fbb-toast","\u002Fen\u002Fcomponents\u002Fbb-tooltip","\u002Fit\u002Fcomponenti\u002Fbb-tooltip","\u002Fen\u002Fcomponents\u002Fbb-tree","\u002Fit\u002Fcomponenti\u002Fbb-tree","\u002Fen\u002Fguides\u002Fadoption-checklist","\u002Fit\u002Fguide\u002Fadoption-checklist","\u002Fen\u002Fguides\u002Fai-agents","\u002Fit\u002Fguide\u002Fai-agents","\u002Fen\u002Fguides\u002Fcoherence","\u002Fit\u002Fguide\u002Fcoherence","\u002Fen\u002Fguides\u002Fdesign-language","\u002Fit\u002Fguide\u002Fdesign-language","\u002Fen\u002Fguides\u002Fdesign-tokens","\u002Fit\u002Fguide\u002Fdesign-tokens","\u002Fen\u002Fguides\u002Ffetching-data","\u002Fit\u002Fguide\u002Ffetching-data","\u002Fen\u002Fguides\u002Ficons","\u002Fit\u002Fguide\u002Ficons","\u002Fen\u002Fguides\u002Finertia","\u002Fit\u002Fguide\u002Finertia","\u002Fen\u002Fguides\u002Finstallation","\u002Fit\u002Fguide\u002Finstallation","\u002Fen\u002Fguides\u002Fmigration","\u002Fit\u002Fguide\u002Fmigration","\u002Fen\u002Fguides\u002Fnuxt","\u002Fit\u002Fguide\u002Fnuxt","\u002Fen\u002Fguides\u002Foptions-and-items","\u002Fit\u002Fguide\u002Foptions-and-items","\u002Fen\u002Fguides\u002Fpassthrough","\u002Fit\u002Fguide\u002Fpassthrough","\u002Fen\u002Fguides\u002Fpreset-components","\u002Fit\u002Fguide\u002Fpreset-components","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",[135,150,162,186,198,242,275,311,332,353,365,371],{"label":136,"entries":137},"Getting started",[138,142,146],{"title":139,"path":140,"order":141},"Installation","\u002Fguides\u002Finstallation",1,{"title":143,"path":144,"order":145},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"title":147,"path":148,"order":149},"Adoption checklist","\u002Fguides\u002Fadoption-checklist",3,{"label":151,"entries":152},"Design system",[153,156,159],{"title":154,"path":155,"order":141},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":157,"path":158,"order":145},"Design language","\u002Fguides\u002Fdesign-language",{"title":160,"path":161,"order":149},"Passthrough","\u002Fguides\u002Fpassthrough",{"label":163,"entries":164},"Playbooks",[165,168,171,174,178,182],{"title":166,"path":167,"order":141},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":169,"path":170,"order":145},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":172,"path":173,"order":149},"Coherence","\u002Fguides\u002Fcoherence",{"title":175,"path":176,"order":177},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":179,"path":180,"order":181},"Icons","\u002Fguides\u002Ficons",5,{"title":183,"path":184,"order":185},"Preset components","\u002Fguides\u002Fpreset-components",6,{"label":187,"entries":188},"Ecosystem",[189,192,195],{"title":190,"path":191,"order":141},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":193,"path":194,"order":145},"Nuxt","\u002Fguides\u002Fnuxt",{"title":196,"path":197,"order":149},"AI agents","\u002Fguides\u002Fai-agents",{"label":199,"entries":200},"Inputs",[201,204,207,210,213,216,219,222,226,230,234,238],{"title":202,"path":203,"component":202,"order":141},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":205,"path":206,"component":205,"order":145},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":208,"path":209,"component":208,"order":149},"BbCalendar","\u002Fcomponents\u002Fbb-calendar",{"title":211,"path":212,"component":211,"order":149},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":214,"path":215,"component":214,"order":177},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":217,"path":218,"component":217,"order":181},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":220,"path":221,"component":220,"order":185},"BbForm","\u002Fcomponents\u002Fbb-form",{"title":223,"path":224,"component":223,"order":225},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":227,"path":228,"component":227,"order":229},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":231,"path":232,"component":231,"order":233},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":235,"path":236,"component":235,"order":237},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":239,"path":240,"component":239,"order":241},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":243,"entries":244},"Selection",[245,248,251,254,257,260,263,266,269,272],{"title":246,"path":247,"component":246,"order":141},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":249,"path":250,"component":249,"order":145},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":252,"path":253,"component":252,"order":149},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":255,"path":256,"component":255,"order":177},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":258,"path":259,"component":258,"order":181},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":261,"path":262,"component":261,"order":185},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":264,"path":265,"component":264,"order":225},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":267,"path":268,"component":267,"order":229},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":270,"path":271,"component":270,"order":233},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":273,"path":274,"component":273,"order":237},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":276,"entries":277},"Overlay",[278,281,284,287,290,293,296,299,302,305,308],{"title":279,"path":280,"component":279,"order":141},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":282,"path":283,"component":282,"order":145},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":285,"path":286,"component":285,"order":149},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":288,"path":289,"component":288,"order":177},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":291,"path":292,"component":291,"order":181},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":294,"path":295,"component":294,"order":185},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":297,"path":298,"component":297,"order":225},"BbHoverCard","\u002Fcomponents\u002Fbb-hover-card",{"title":300,"path":301,"component":300,"order":225},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":303,"path":304,"component":303,"order":229},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":306,"path":307,"component":306,"order":233},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":309,"path":310,"component":309,"order":237},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":312,"entries":313},"Navigation",[314,317,320,323,326,329],{"title":315,"path":316,"component":315,"order":141},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":318,"path":319,"component":318,"order":145},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":321,"path":322,"component":321,"order":149},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":324,"path":325,"component":324,"order":177},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":327,"path":328,"component":327,"order":181},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":330,"path":331,"component":330,"order":185},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":333,"entries":334},"Feedback",[335,338,341,344,347,350],{"title":336,"path":337,"component":336,"order":141},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":339,"path":340,"component":339,"order":145},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":342,"path":343,"component":342,"order":149},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":345,"path":346,"component":345,"order":177},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":348,"path":349,"component":348,"order":181},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":351,"path":352,"component":351,"order":185},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":354,"entries":355},"Data Display",[356,359,362],{"title":357,"path":358,"component":357,"order":141},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":360,"path":361,"component":360,"order":145},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":363,"path":364,"component":363,"order":149},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":366,"entries":367},"Layout & Utility",[368],{"title":369,"path":370,"component":369,"order":141},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":372,"entries":373},"Other",[374],{"title":375,"path":376,"component":375,"order":141},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",null,{"id":379,"title":342,"body":380,"component":342,"description":872,"extension":615,"group":333,"meta":873,"navigation":874,"order":149,"path":343,"sections":875,"seo":880,"stem":881,"__hash__":882},"docs_en\u002Fcomponents\u002Fbb-indicator.md",{"type":381,"value":382,"toc":862},"minimark",[383,424,460,468,480,484,502,508,514,523,526,534,540,555,558,561,566,591,600,604,617,620,624,637,653,659,666,721,728,816,851,858],[384,385,386,399],"when",{},[387,388,389,390,393,394,398],"p",{},"Reach for ",[391,392,342],"code",{}," to pin a marker onto another element. An unread count on\na bell, a presence dot on an avatar, a ",[395,396,397],"em",{},"New"," flag on a nav item.",[400,401,403],"template",{"v-slot:else":402},"",[404,405,406],"ul",{},[407,408,409,414,415,419,420,423],"li",{},[410,411,412],"a",{"href":12},[391,413,339],{},", when the marker is an inline label that\nbelongs ",[416,417,418],"strong",{},"in"," the text, with ",[391,421,422],{},"clearable"," when it can be dismissed",[425,426,427],"migration",{},[387,428,429,430,432,433,436,437,440,441,436,444,447,448,451,452,455,456,459],{},"This component is what v2 called ",[391,431,339],{},". The port is mechanical: rename the\ntag, move ",[391,434,435],{},"content"," to ",[391,438,439],{},"text"," and ",[391,442,443],{},"color",[391,445,446],{},"variant",", drop ",[391,449,450],{},"floating",". In CSS,\n",[391,453,454],{},".bb-badge"," becomes ",[391,457,458],{},".bb-indicator",".",[461,462,464],"h2",{"id":463},"counts",[465,466,467],"span",{},"Unread counts",[387,469,470,471,473,474,479],{},"Put the element you are marking in the slot, never the other way round:\n",[391,472,342],{}," wraps it and pins ",[410,475,477],{"href":476},"\u002Fen\u002Fcomponents\u002Fbb-indicator\u002Fapi#prop-text",[391,478,439],{}," to its top-right corner.",[481,482],"demo",{"name":483},"BbIndicator\u002FLiveCount",[387,485,486,490,491,493,494,497,498,501],{},[410,487,488],{"href":476},[391,489,439],{}," also takes a short string such as ",[391,492,397],{},"; keep it to a word or two,\nand use ",[391,495,496],{},"xs"," or ",[391,499,500],{},"sm"," so it fits.",[387,503,504,505,507],{},"The indicator is inert. When the marker has to be clickable, put a ",[391,506,205],{}," in\nthe slot.",[461,509,511],{"id":510},"presence",[465,512,513],{},"Presence dots",[387,515,516,522],{},[410,517,519],{"href":518},"\u002Fen\u002Fcomponents\u002Fbb-indicator\u002Fapi#prop-dot",[391,520,521],{},"dot"," replaces the bubble's content with a plain filled marker, the right shape\nfor the state of a person or a service.",[481,524],{"name":525},"BbIndicator\u002FDot",[387,527,528,529,533],{},"It wins over ",[410,530,531],{"href":476},[391,532,439],{}," rather than combining with it. And a colour on its own is not\na label: write the state beside it, as the example does.",[461,535,537],{"id":536},"appearance",[465,538,539],{},"Placement, colour and size",[387,541,542,440,548,554],{},[410,543,545],{"href":544},"\u002Fen\u002Fcomponents\u002Fbb-indicator\u002Fapi#prop-bottom",[391,546,547],{},"bottom",[410,549,551],{"href":550},"\u002Fen\u002Fcomponents\u002Fbb-indicator\u002Fapi#prop-left",[391,552,553],{},"left"," combine to move the marker to any of the four corners.",[481,556],{"name":557},"BbIndicator\u002FAppearance",[387,559,560],{},"The bottom suits a presence dot, clear of a face or initials; the top suits a\ncount, clear of a button's label.",[562,563,565],"h3",{"id":564},"status-colours","Status colours",[387,567,568,573,574,577,578,577,581,584,585,577,588,459],{},[410,569,571],{"href":570},"\u002Fen\u002Fcomponents\u002Fbb-indicator\u002Fapi#prop-variant",[391,572,446],{}," maps the shared status colors: ",[391,575,576],{},"default",", ",[391,579,580],{},"success",[391,582,583],{},"info",",\n",[391,586,587],{},"warning",[391,589,590],{},"destructive",[387,592,593,594,596,597,599],{},"Red on a count means \"needs attention\". If every marker in the app is\n",[391,595,590],{},", none of them is. ",[391,598,587],{}," suits a dot rather than a count: white\ndigits on amber are too faint to read at bubble size.",[562,601,603],{"id":602},"sizes","Sizes",[387,605,606,607,436,609,612,613,616],{},"Sizes run from ",[391,608,496],{},[391,610,611],{},"2xl","; ",[391,614,615],{},"md"," is the default.",[387,618,619],{},"Pick the size from the element you are decorating, not from the text in the\nbubble. A 56px avatar and a toolbar button do not take the same marker.",[562,621,623],{"id":622},"counts-that-change","Counts that change",[387,625,626,627,633,634,459],{},"Bind the count you already keep and cap it with ",[410,628,630],{"href":629},"\u002Fen\u002Fcomponents\u002Fbb-indicator\u002Fapi#prop-max",[391,631,632],{},"max",": above the threshold the\nbubble renders ",[391,635,636],{},"${max}+",[387,638,639,640,643,644,648,649,652],{},"Zero ",[416,641,642],{},"shows",", so hide the marker by withholding ",[410,645,646],{"href":476},[391,647,439],{}," altogether:\n",[391,650,651],{},":text=\"count || undefined\"",". The bubble is a live region and announces the new\ncount on its own, so wrap a control that already has an accessible name.",[461,654,656],{"id":655},"styling",[465,657,658],{},"Custom colours",[387,660,661,662,459],{},"Register a name in the plugin config for a colour that recurs, and it becomes a\ntyped value of ",[410,663,664],{"href":570},[391,665,446],{},[667,668,672],"pre",{"className":669,"code":670,"language":671,"meta":402,"style":402},"language-ts shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n    bitboss: { indicatorVariants: ['mention'] },\n});\n","ts",[391,673,674,681,698,713],{"__ignoreMap":402},[465,675,677],{"class":676,"line":141},"line",[465,678,680],{"class":679},"sLBg1","\u002F\u002F nuxt.config.ts\n",[465,682,683,687,690,694],{"class":676,"line":145},[465,684,686],{"class":685},"sHUrx","export",[465,688,689],{"class":685}," default",[465,691,693],{"class":692},"sKwhi"," defineNuxtConfig",[465,695,697],{"class":696},"soyes","({\n",[465,699,700,704,708,711],{"class":676,"line":149},[465,701,703],{"class":702},"suds8","    bitboss: { indicatorVariants: [",[465,705,707],{"class":706},"sT6z2","'mention'",[465,709,710],{"class":702},"] }",[465,712,584],{"class":696},[465,714,715,718],{"class":676,"line":177},[465,716,717],{"class":696},"})",[465,719,720],{"class":702},";\n",[387,722,723,724,727],{},"The library ships no CSS for registered variants. You style\n",[391,725,726],{},".bb-indicator--mention"," yourself, setting the two custom properties the built-in\nvariants drive. Mix them from theme tokens, so the bubble follows dark mode.",[667,729,733],{"className":730,"code":731,"language":732,"meta":402,"style":402},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".bb-indicator.bb-indicator--mention {\n    --bg: color-mix(in oklab, var(--bb-info) 80%, var(--bb-primary));\n    --fg: var(--bb-primary-fg);\n}\n","css",[391,734,735,744,794,811],{"__ignoreMap":402},[465,736,737,741],{"class":676,"line":141},[465,738,740],{"class":739},"s-5SL",".bb-indicator.bb-indicator--mention",[465,742,743],{"class":702}," {\n",[465,745,746,749,752,755,758,760,763,765,768,770,773,776,779,782,784,786,788,791],{"class":676,"line":145},[465,747,748],{"class":696},"    --bg",[465,750,751],{"class":702},": ",[465,753,754],{"class":739},"color-mix",[465,756,757],{"class":702},"(",[465,759,418],{"class":696},[465,761,762],{"class":696}," oklab",[465,764,577],{"class":702},[465,766,767],{"class":739},"var",[465,769,757],{"class":702},[465,771,772],{"class":696},"--bb-info",[465,774,775],{"class":702},") ",[465,777,778],{"class":739},"80",[465,780,781],{"class":685},"%",[465,783,577],{"class":702},[465,785,767],{"class":739},[465,787,757],{"class":702},[465,789,790],{"class":696},"--bb-primary",[465,792,793],{"class":702},"));\n",[465,795,796,799,801,803,805,808],{"class":676,"line":149},[465,797,798],{"class":696},"    --fg",[465,800,751],{"class":702},[465,802,767],{"class":739},[465,804,757],{"class":702},[465,806,807],{"class":696},"--bb-primary-fg",[465,809,810],{"class":702},");\n",[465,812,813],{"class":676,"line":177},[465,814,815],{"class":702},"}\n",[387,817,818,819,822,823,826,827,830,831,834,835,838,839,842,843,846,847,850],{},"Past colour, ",[391,820,821],{},"--bw"," with ",[391,824,825],{},"--border-color"," rings the bubble so it separates from\na busy anchor, ",[391,828,829],{},"--fs"," sizes the count, and ",[391,832,833],{},"--px"," widens the pill as the count\ngrows. ",[391,836,837],{},"--offset"," sets how far the bubble overhangs the corner (",[391,840,841],{},"[--offset:0px]","\non ",[391,844,845],{},"class"," tucks it in), and ",[391,848,849],{},"pt:bubble=\"ring-2 ring-(--bb-panel)\""," lifts it off\na busy button.",[387,852,853,854,857],{},"For a one-off, such as a colour that comes from data, override the same\nproperties inline: ",[391,855,856],{},":style=\"{ '--bg': team.color, '--fg': team.textColor }\"",".\nWith a colour of your own, check the contrast yourself.",[859,860,861],"style",{},"html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .sKwhi, html code.shiki .sKwhi{--shiki-default:#622CBC;--shiki-dark:#DBB7FF}html pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}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);}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}",{"title":402,"searchDepth":149,"depth":149,"links":863},[864,865,866,871],{"id":463,"depth":145,"text":467},{"id":510,"depth":145,"text":513},{"id":536,"depth":145,"text":539,"children":867},[868,869,870],{"id":564,"depth":149,"text":565},{"id":602,"depth":149,"text":603},{"id":622,"depth":149,"text":623},{"id":655,"depth":145,"text":658},"The anchored marker: a count or a dot pinned to the corner of another element.",{},true,[876,877,878,879],{"id":463,"title":467},{"id":510,"title":513},{"id":536,"title":539},{"id":655,"title":658},{"title":342,"description":872},"components\u002Fbb-indicator","I6W4aengLvlU7DDavuhna30oTNF9F8tjMtv5VorRovo",{"name":342,"slug":884,"group":333,"description":885,"entrypoint":886,"docs":887,"props":890,"models":927,"events":928,"slots":929,"exposed":934,"pt":935,"validated":377,"migration":954},"bb-indicator","Anchors a notification bubble (count\u002Fshort text) or a dot over a wrapped element.","bitboss-ui",{"contract":888,"source":889},"ai\u002FBbIndicator.md","ai\u002Fsource\u002FBbIndicator.md",[891,896,899,901,904,908,913,919,923],{"name":547,"type":892,"required":893,"default":894,"description":895,"note":377,"demo":536},"boolean | undefined",false,"false","Anchors the indicator to the bottom edge of the wrapped element instead of the top.",{"name":521,"type":892,"required":893,"default":894,"description":897,"note":898,"demo":510},"Renders a small contentless dot instead of a labelled bubble. Takes precedence over `text`.","The precedence is not additive, and it was not in v2 either: a v2 call site that switched the dot on from a count never showed the number. Carry `dot` across unchanged unless you mean to change the design.",{"name":553,"type":892,"required":893,"default":894,"description":900,"note":377,"demo":536},"Anchors the indicator to the left edge of the wrapped element instead of the right.",{"name":632,"type":902,"required":893,"default":377,"description":903,"note":377,"demo":463},"number | undefined","Caps a numeric `text` count: values above `max` render as `${max}+` (e.g. `max: 99` shows `99+`). Ignored for string `text`.",{"name":905,"type":906,"required":893,"default":377,"description":907,"note":377,"demo":377},"pt","PtMap\u003CBbIndicatorPtPart, \"default\" | \"destructive\" | \"warning\" | \"success\" | \"info\"> | undefined","Passthrough, object form: the same keys as the `pt:*` attributes without the prefix. See the `pt:\u003Cpart>` row.",{"name":909,"type":910,"required":893,"default":377,"description":911,"note":377,"demo":912},"pt:\u003Cpart>","PtValue | undefined","Passthrough, attribute form: one attribute per part, `pt:\u003Cpart>`, and per part and state, `pt:\u003Cpart>:\u003Cstate>`. Parts: `bubble`, `root`. States: `default`, `destructive`, `info`, `success`, `warning`.","passthrough",{"name":914,"type":915,"required":893,"default":916,"description":917,"note":918,"demo":536},"size","keyof Sizes | undefined","\"md\"","Preset size of the indicator.","Match the element being decorated rather than the text inside the bubble. An off-scale value warns in development and falls back to `md`.",{"name":439,"type":920,"required":893,"default":377,"description":921,"note":922,"demo":463},"string | number | undefined","Content shown inside the indicator bubble. A `number` is accepted for count ergonomics (e.g. `:text=\"unread\"`). When omitted the indicator renders only if `dot` is set.","A count of `0` renders as \"0\" — it is content like any other value. Bind `count || undefined` to hide the marker when the count empties.",{"name":446,"type":924,"required":893,"default":925,"description":926,"note":377,"demo":536},"keyof IndicatorVariantRegistry | undefined","\"default\"","Visual variant. `default` uses the primary color; `success`, `info`, `warning` and `destructive` map to the shared status colors. Register more via the vite plugin `indicatorVariants` option and style `.bb-indicator--\u003Cvariant>`.",[],[],[930],{"name":576,"type":931,"description":932,"note":933,"demo":463},"object","The element the indicator is anchored to.","The indicator is inert, so anything interactive goes here rather than on the indicator: wrap a `BbButton`, do not attach a handler. The wrapped element keeps its own semantics and accessible name.",[],{"parts":936,"states":943},[937,940],{"name":938,"description":939},"root","The anchor wrapper the bubble is positioned in. Sizing lives here: `size`, `--fs` and `--offset` (the corner overhang) are tokens on `root`.",{"name":941,"description":942},"bubble","The count or dot itself — rendered only while there is a `text` or `dot`. Put the look here, the sizing on `root`.",[944,946,948,950,952],{"name":576,"description":945},"Component-wide: `variant: 'default'`. Merged after the part's base entry and before its states, so the real states still win.",{"name":590,"description":947},"Component-wide: `variant: 'destructive'`. Below the real states, like every variant.",{"name":583,"description":949},"Component-wide: `variant: 'info'`. Below the real states, like every variant.",{"name":580,"description":951},"Component-wide: `variant: 'success'`. Below the real states, like every variant.",{"name":587,"description":953},"Component-wide: `variant: 'warning'`. Below the real states, like every variant.",{"removed":955,"renamed":956},[],[],1793055142334]