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