[{"data":1,"prerenderedAt":854},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":124,"api-none":352,"page-en-\u002Fcomponents\u002Fbb-icon":353,"pt-showcase-BbIcon":801},{"\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":335,"body":355,"component":335,"description":789,"extension":660,"group":329,"meta":790,"navigation":591,"order":135,"path":336,"sections":791,"seo":798,"stem":799,"__hash__":800},"docs_en\u002Fcomponents\u002Fbb-icon.md",{"type":356,"value":357,"toc":781},"minimark",[358,424,432,438,442,456,462,483,486,512,515,522,528,642,648,662,665,674,680,683,686,703,709,720,723,732,738,744,747,764,774,777],[359,360,361,369],"when",{},[362,363,364,365,368],"p",{},"Reach for ",[366,367,335],"code",{}," when the icon is part of the design: a status in a table\ncell, empty-state art, a list marker.",[370,371,373],"template",{"v-slot:else":372},"",[374,375,376,395,417],"ul",{},[377,378,379,384,385,388,389,391,392],"li",{},[380,381,382],"a",{"href":18},[366,383,185],{}," with ",[366,386,387],{},"icon",", if you were about to wrap\na ",[366,390,335],{}," in a ",[366,393,394],{},"\u003Cbutton>",[377,396,397,401,402,406,407,411,412,416],{},[380,398,399],{"href":12},[366,400,314],{},", ",[380,403,404],{"href":6},[366,405,311],{},",\n",[380,408,409],{"href":94},[366,410,326],{}," and the inputs: they take the icon\n",[413,414,415],"strong",{},"name"," on a prop",[377,418,419,423],{},[380,420,421],{"href":10},[366,422,332],{},", if it is a person's picture",[425,426,428],"h2",{"id":427},"default",[429,430,431],"span",{},"Default",[362,433,434,435,437],{},"Pass the icon name to ",[366,436,387],{},". It is the only required prop.",[439,440],"demo",{"name":441},"BbIcon\u002FBasic",[443,444,446],"migration",{"title":445},"type → icon",[362,447,448,449,452,453,455],{},"The prop was called ",[366,450,451],{},"type"," in v2. A template still passing ",[366,454,451],{}," fails at\nmount.",[425,457,459],{"id":458},"names",[429,460,461],{},"Names",[362,463,464,466,467,470,471,474,475,478,479,482],{},[366,465,387],{}," takes ",[366,468,469],{},"provider:icon",", for example ",[366,472,473],{},"lucide:check",". For your own SVGs use\n",[366,476,477],{},"local:my-icon"," (the ",[366,480,481],{},"local:"," prefix is optional but recommended).",[362,484,485],{},"Install the collections you want and the plugin finds them:",[487,488,492],"pre",{"className":489,"code":490,"language":491,"meta":372,"style":372},"language-bash shiki shiki-themes github-light-high-contrast github-dark-high-contrast","npm install -D @iconify-json\u002Flucide\n","bash",[366,493,494],{"__ignoreMap":372},[429,495,497,501,505,509],{"class":496,"line":131},"line",[429,498,500],{"class":499},"soyes","npm",[429,502,504],{"class":503},"sT6z2"," install",[429,506,508],{"class":507},"s-5SL"," -D",[429,510,511],{"class":503}," @iconify-json\u002Flucide\n",[439,513],{"name":514},"BbIcon\u002FNames",[362,516,517,518,521],{},"If you write a name that does not exist the app stops at mount, and in\ndevelopment the overlay tells you which ",[366,519,520],{},"npm install"," you are missing. The\nIconify extension for VS Code previews icons as you type.",[362,523,524,525,527],{},"You can also import your own SVGs as strings and pass them straight to ",[366,526,387],{},"\n(only markup you control: the library does not sanitize it).",[487,529,533],{"className":530,"code":531,"language":532,"meta":372,"style":372},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003Cscript setup lang=\"ts\">\nimport mark from '~\u002Fassets\u002Fmarks\u002Fpartner.svg?raw';\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003CBbIcon :icon=\"mark\" size=\"2xl\" \u002F>\n\u003C\u002Ftemplate>\n","vue",[366,534,535,560,578,587,593,601,634],{"__ignoreMap":372},[429,536,537,541,545,548,551,554,557],{"class":496,"line":131},[429,538,540],{"class":539},"suds8","\u003C",[429,542,544],{"class":543},"sne4z","script",[429,546,547],{"class":507}," setup",[429,549,550],{"class":507}," lang",[429,552,553],{"class":539},"=",[429,555,556],{"class":503},"\"ts\"",[429,558,559],{"class":539},">\n",[429,561,562,566,569,572,575],{"class":496,"line":135},[429,563,565],{"class":564},"sHUrx","import",[429,567,568],{"class":539}," mark ",[429,570,571],{"class":564},"from",[429,573,574],{"class":503}," '~\u002Fassets\u002Fmarks\u002Fpartner.svg?raw'",[429,576,577],{"class":539},";\n",[429,579,580,583,585],{"class":496,"line":157},[429,581,582],{"class":539},"\u003C\u002F",[429,584,544],{"class":543},[429,586,559],{"class":539},[429,588,589],{"class":496,"line":161},[429,590,592],{"emptyLinePlaceholder":591},true,"\n",[429,594,595,597,599],{"class":496,"line":165},[429,596,540],{"class":539},[429,598,370],{"class":543},[429,600,559],{"class":539},[429,602,603,606,608,611,613,615,618,621,623,626,628,631],{"class":496,"line":199},[429,604,605],{"class":539},"    \u003C",[429,607,335],{"class":543},[429,609,610],{"class":539}," :",[429,612,387],{"class":507},[429,614,553],{"class":539},[429,616,617],{"class":539},"\"",[429,619,620],{"class":539},"mark",[429,622,617],{"class":539},[429,624,625],{"class":507}," size",[429,627,553],{"class":539},[429,629,630],{"class":503},"\"2xl\"",[429,632,633],{"class":539}," \u002F>\n",[429,635,636,638,640],{"class":496,"line":203},[429,637,582],{"class":539},[429,639,370],{"class":543},[429,641,559],{"class":539},[425,643,645],{"id":644},"sizes",[429,646,647],{},"Sizes",[362,649,650,651,654,655,401,658,661],{},"Sizes run from ",[366,652,653],{},"xs"," to ",[366,656,657],{},"2xl",[366,659,660],{},"md"," (24px) is the default.",[439,663],{"name":664},"BbIcon\u002FSizes",[443,666,668],{"title":667},"xxl → 2xl",[362,669,670,671,673],{},"The largest key is now ",[366,672,657],{},".",[425,675,677],{"id":676},"color",[429,678,679],{},"Color",[362,681,682],{},"Icons inherit the text color wherever they sit.",[439,684],{"name":685},"BbIcon\u002FColor",[443,687,689],{"title":688},"color removed",[362,690,691,694,695,406,697,699,700,702],{},[366,692,693],{},"color=\"#6b7280\""," becomes a class or a token on the parent. Inside ",[366,696,185],{},[366,698,314],{}," or ",[366,701,311],{}," you need do nothing: the icon already takes the right\ncolor.",[425,704,706],{"id":705},"accessibility",[429,707,708],{},"Accessible name",[362,710,711,712,715,716,719],{},"Add ",[366,713,714],{},"label"," when the icon is the only thing saying something: it gets\n",[366,717,718],{},"role=\"img\""," and that text as its name. Leave it off when the text is already\nbeside it, or screen readers read it twice.",[439,721],{"name":722},"BbIcon\u002FAccessibility",[362,724,725,727,728,731],{},[366,726,714],{}," does not produce a tooltip. Add ",[366,729,730],{},"v-bb-tooltip"," if you want a visible\none.",[425,733,735],{"id":734},"placement",[429,736,737],{},"When you do not need it",[362,739,740,741,743],{},"Most components take the icon name on a prop and place it themselves.\nHand-placing a ",[366,742,335],{}," inside them is the most common mistake with this\ncomponent.",[439,745],{"name":746},"BbIcon\u002FHostProps",[362,748,749,750,752,753,401,755,401,757,401,759,761,762,673],{},"The exceptions are components with no icon field, where you pass a ",[366,751,335],{}," in a\nslot: ",[366,754,302],{},[366,756,293],{},[366,758,236],{},[366,760,248],{}," and ",[366,763,332],{},[765,766,767],"note",{},[362,768,769,770,773],{},"The build only bundles names written out in full in your source. A name built at\nruntime like ",[366,771,772],{},"lucide:${status}"," works in development and fails in production.\nMap state onto complete names.",[439,775],{"name":776},"BbIcon\u002FStatusMap",[778,779,780],"style",{},"html pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}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);}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 .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}",{"title":372,"searchDepth":157,"depth":157,"links":782},[783,784,785,786,787,788],{"id":427,"depth":135,"text":431},{"id":458,"depth":135,"text":461},{"id":644,"depth":135,"text":647},{"id":676,"depth":135,"text":679},{"id":705,"depth":135,"text":708},{"id":734,"depth":135,"text":737},"Draws an icon from an Iconify collection or from one of your own SVG files. For previews and autocomplete with `BbIcon`, use the [Iconify](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=antfu.iconify) extension.",{},[792,793,794,795,796,797],{"id":427,"title":431},{"id":458,"title":461},{"id":644,"title":647},{"id":676,"title":679},{"id":705,"title":708},{"id":734,"title":737},{"title":335,"description":789},"components\u002Fbb-icon","WOSmwB9DASiSRqYlMajexDaV0iEG8T4-5CkuZntC_dM",{"name":335,"slug":802,"group":329,"description":803,"entrypoint":804,"docs":805,"props":808,"models":831,"events":832,"slots":833,"exposed":834,"pt":835,"validated":352,"migration":841},"bb-icon","Renders an icon either from the local icon folder or from a provider.","bitboss-ui",{"contract":806,"source":807},"ai\u002FBbIcon.md","ai\u002Fsource\u002FBbIcon.md",[809,813,818,822,825],{"name":387,"type":810,"required":591,"default":352,"description":811,"note":812,"demo":458},"string","Name of a registered icon to use, or a full raw `\u003Csvg>` string\n(e.g. an SVG file imported with `?raw`).","Three forms: `provider:name` from an installed Iconify collection, `local:name` from the plugin's `iconDir`, and a bare name that normalises to `local:` — never to a provider set. It must be a static literal: the build scans source for whole names, so `lucide:${status}` resolves in dev and is missing in production.",{"name":714,"type":814,"required":815,"default":352,"description":816,"note":817,"demo":705},"string | undefined",false,"Label of the icon for accessibility.","Set it only when the icon is the only thing carrying the information. Beside its own text an icon should stay unlabelled, so assistive tech does not announce the same fact twice. It produces no `title`, so it never shows a tooltip — use `v-bb-tooltip` for that.",{"name":819,"type":820,"required":815,"default":352,"description":821,"note":352,"demo":352},"pt","PtMap\u003C\"root\", never> | undefined","Passthrough, object form: `{ root: '…' }`. See the `pt:\u003Cpart>` row.",{"name":823,"type":824,"required":815,"default":352,"description":352,"note":352,"demo":352},"pt:root","PtValue | undefined",{"name":826,"type":827,"required":815,"default":828,"description":829,"note":830,"demo":644},"size","number | ({ size?: any; } & string) | 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 named keys come from the scale `BbAvatar` and every icon-bearing component share, so they can be retuned library-wide through the plugin's `iconDefaultSizes`. A hard pixel number opts out of that. An unparseable value warns and falls back to `md`.",[],[],[],[],{"parts":836,"states":840},[837],{"name":838,"description":839},"root","The `\u003Csvg>` itself; a `class` on the component lands here too. It is `pointer-events: none`, so a pointer listener here never fires.",[],{"removed":842,"renamed":851},[843,848],{"name":676,"replacedBy":352,"since":844,"migration":845,"silent":591,"fix":846},"3.0.0-unreleased","ai\u002Fguides\u002Fmigration\u002Fcomponents\u002Fbb-icon.md",{"kind":847},"manual",{"name":451,"replacedBy":387,"since":844,"migration":845,"silent":591,"fix":849},{"kind":850},"rename",[852],{"from":451,"to":387,"since":844,"migration":845,"fix":853},{"kind":850},1790005163625]