[{"data":1,"prerenderedAt":1091},["ShallowReactive",2],{"api-none":3,"docs-nav-en":4,"locale-alternates":232,"page-en-\u002Fcomponents\u002Fbb-alert":353,"pt-showcase-BbAlert":969},null,[5,16,25,46,58,100,133,166,187,208,220,226],{"label":6,"entries":7},"Getting started",[8,12],{"title":9,"path":10,"component":-1,"order":11},"Installation","\u002Fguides\u002Finstallation",1,{"title":13,"path":14,"component":-1,"order":15},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"label":17,"entries":18},"Design system",[19,22],{"title":20,"path":21,"component":-1,"order":11},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":23,"path":24,"component":-1,"order":15},"Design language","\u002Fguides\u002Fdesign-language",{"label":26,"entries":27},"Playbooks",[28,31,34,38,42],{"title":29,"path":30,"component":-1,"order":11},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":32,"path":33,"component":-1,"order":15},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":35,"path":36,"component":-1,"order":37},"Coherence","\u002Fguides\u002Fcoherence",3,{"title":39,"path":40,"component":-1,"order":41},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":43,"path":44,"component":-1,"order":45},"Icons","\u002Fguides\u002Ficons",5,{"label":47,"entries":48},"Ecosystem",[49,52,55],{"title":50,"path":51,"component":-1,"order":11},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":53,"path":54,"component":-1,"order":15},"Nuxt","\u002Fguides\u002Fnuxt",{"title":56,"path":57,"component":-1,"order":37},"AI agents","\u002Fguides\u002Fai-agents",{"label":59,"entries":60},"Inputs",[61,64,67,70,73,76,80,84,88,92,96],{"title":62,"path":63,"component":62,"order":11},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":65,"path":66,"component":65,"order":15},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":68,"path":69,"component":68,"order":37},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":71,"path":72,"component":71,"order":41},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":74,"path":75,"component":74,"order":45},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":77,"path":78,"component":77,"order":79},"BbForm","\u002Fcomponents\u002Fbb-form",6,{"title":81,"path":82,"component":81,"order":83},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":85,"path":86,"component":85,"order":87},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":89,"path":90,"component":89,"order":91},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":93,"path":94,"component":93,"order":95},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":97,"path":98,"component":97,"order":99},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":101,"entries":102},"Selection",[103,106,109,112,115,118,121,124,127,130],{"title":104,"path":105,"component":104,"order":11},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":107,"path":108,"component":107,"order":15},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":110,"path":111,"component":110,"order":37},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":113,"path":114,"component":113,"order":41},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":116,"path":117,"component":116,"order":45},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":119,"path":120,"component":119,"order":79},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":122,"path":123,"component":122,"order":83},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":125,"path":126,"component":125,"order":87},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":128,"path":129,"component":128,"order":91},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":131,"path":132,"component":131,"order":95},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":134,"entries":135},"Overlay",[136,139,142,145,148,151,154,157,160,163],{"title":137,"path":138,"component":137,"order":11},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":140,"path":141,"component":140,"order":15},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":143,"path":144,"component":143,"order":37},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":146,"path":147,"component":146,"order":41},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":149,"path":150,"component":149,"order":45},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":152,"path":153,"component":152,"order":79},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":155,"path":156,"component":155,"order":83},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":158,"path":159,"component":158,"order":87},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":161,"path":162,"component":161,"order":91},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":164,"path":165,"component":164,"order":95},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":167,"entries":168},"Navigation",[169,172,175,178,181,184],{"title":170,"path":171,"component":170,"order":11},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":173,"path":174,"component":173,"order":15},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":176,"path":177,"component":176,"order":37},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":179,"path":180,"component":179,"order":41},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":182,"path":183,"component":182,"order":45},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":185,"path":186,"component":185,"order":79},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":188,"entries":189},"Feedback",[190,193,196,199,202,205],{"title":191,"path":192,"component":191,"order":11},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":194,"path":195,"component":194,"order":15},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":197,"path":198,"component":197,"order":37},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":200,"path":201,"component":200,"order":41},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":203,"path":204,"component":203,"order":45},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":206,"path":207,"component":206,"order":79},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":209,"entries":210},"Data Display",[211,214,217],{"title":212,"path":213,"component":212,"order":11},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":215,"path":216,"component":215,"order":15},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":218,"path":219,"component":218,"order":37},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":221,"entries":222},"Layout & Utility",[223],{"title":224,"path":225,"component":224,"order":11},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":227,"entries":228},"Other",[229],{"title":230,"path":231,"component":230,"order":11},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",{"\u002Fit\u002Fcomponenti\u002Fbb-accordion":233,"\u002Fen\u002Fcomponents\u002Fbb-accordion":234,"\u002Fit\u002Fcomponenti\u002Fbb-alert":235,"\u002Fen\u002Fcomponents\u002Fbb-alert":236,"\u002Fit\u002Fcomponenti\u002Fbb-asterisk":237,"\u002Fen\u002Fcomponents\u002Fbb-asterisk":238,"\u002Fit\u002Fcomponenti\u002Fbb-avatar":239,"\u002Fen\u002Fcomponents\u002Fbb-avatar":240,"\u002Fit\u002Fcomponenti\u002Fbb-badge":241,"\u002Fen\u002Fcomponents\u002Fbb-badge":242,"\u002Fit\u002Fcomponenti\u002Fbb-base-button":243,"\u002Fen\u002Fcomponents\u002Fbb-base-button":244,"\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs":245,"\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs":246,"\u002Fit\u002Fcomponenti\u002Fbb-button":247,"\u002Fen\u002Fcomponents\u002Fbb-button":248,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":249,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":250,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":251,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":252,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":253,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":254,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":255,"\u002Fen\u002Fcomponents\u002Fbb-color-input":256,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":257,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":258,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":259,"\u002Fen\u002Fcomponents\u002Fbb-confirm":260,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":261,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":262,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":263,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":264,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":265,"\u002Fen\u002Fcomponents\u002Fbb-dialog":266,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":267,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":268,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":269,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":270,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":271,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":272,"\u002Fit\u002Fcomponenti\u002Fbb-form":273,"\u002Fen\u002Fcomponents\u002Fbb-form":274,"\u002Fit\u002Fcomponenti\u002Fbb-icon":275,"\u002Fen\u002Fcomponents\u002Fbb-icon":276,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":277,"\u002Fen\u002Fcomponents\u002Fbb-indicator":278,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":279,"\u002Fen\u002Fcomponents\u002Fbb-number-input":280,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":281,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":282,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":283,"\u002Fen\u002Fcomponents\u002Fbb-pagination":284,"\u002Fit\u002Fcomponenti\u002Fbb-popover":285,"\u002Fen\u002Fcomponents\u002Fbb-popover":286,"\u002Fit\u002Fcomponenti\u002Fbb-progress":287,"\u002Fen\u002Fcomponents\u002Fbb-progress":288,"\u002Fit\u002Fcomponenti\u002Fbb-radio":289,"\u002Fen\u002Fcomponents\u002Fbb-radio":290,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":291,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":292,"\u002Fit\u002Fcomponenti\u002Fbb-rating":293,"\u002Fen\u002Fcomponents\u002Fbb-rating":294,"\u002Fit\u002Fcomponenti\u002Fbb-select":295,"\u002Fen\u002Fcomponents\u002Fbb-select":296,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":297,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":298,"\u002Fit\u002Fcomponenti\u002Fbb-slider":299,"\u002Fen\u002Fcomponents\u002Fbb-slider":300,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":301,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":302,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":303,"\u002Fen\u002Fcomponents\u002Fbb-spinner":304,"\u002Fit\u002Fcomponenti\u002Fbb-switch":305,"\u002Fen\u002Fcomponents\u002Fbb-switch":306,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":307,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":308,"\u002Fit\u002Fcomponenti\u002Fbb-table":309,"\u002Fen\u002Fcomponents\u002Fbb-table":310,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":311,"\u002Fen\u002Fcomponents\u002Fbb-tabs":312,"\u002Fit\u002Fcomponenti\u002Fbb-tag":313,"\u002Fen\u002Fcomponents\u002Fbb-tag":314,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":315,"\u002Fen\u002Fcomponents\u002Fbb-text-input":316,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":317,"\u002Fen\u002Fcomponents\u002Fbb-textarea":318,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":319,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":320,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":321,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":322,"\u002Fit\u002Fcomponenti\u002Fbb-toast":323,"\u002Fen\u002Fcomponents\u002Fbb-toast":324,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":325,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":326,"\u002Fit\u002Fcomponenti\u002Fbb-tree":327,"\u002Fen\u002Fcomponents\u002Fbb-tree":328,"\u002Fit\u002Fguide\u002Fai-agents":329,"\u002Fen\u002Fguides\u002Fai-agents":330,"\u002Fit\u002Fguide\u002Fcoherence":331,"\u002Fen\u002Fguides\u002Fcoherence":332,"\u002Fit\u002Fguide\u002Fdesign-language":333,"\u002Fen\u002Fguides\u002Fdesign-language":334,"\u002Fit\u002Fguide\u002Fdesign-tokens":335,"\u002Fen\u002Fguides\u002Fdesign-tokens":336,"\u002Fit\u002Fguide\u002Ffetching-data":337,"\u002Fen\u002Fguides\u002Ffetching-data":338,"\u002Fit\u002Fguide\u002Ficons":339,"\u002Fen\u002Fguides\u002Ficons":340,"\u002Fit\u002Fguide\u002Finertia":341,"\u002Fen\u002Fguides\u002Finertia":342,"\u002Fit\u002Fguide\u002Finstallation":343,"\u002Fen\u002Fguides\u002Finstallation":344,"\u002Fit\u002Fguide\u002Fmigration":345,"\u002Fen\u002Fguides\u002Fmigration":346,"\u002Fit\u002Fguide\u002Fnuxt":347,"\u002Fen\u002Fguides\u002Fnuxt":348,"\u002Fit\u002Fguide\u002Foptions-and-items":349,"\u002Fen\u002Fguides\u002Foptions-and-items":350,"\u002Fit\u002Fguide\u002Fvalidated-forms":351,"\u002Fen\u002Fguides\u002Fvalidated-forms":352},"\u002Fen\u002Fcomponents\u002Fbb-accordion","\u002Fit\u002Fcomponenti\u002Fbb-accordion","\u002Fen\u002Fcomponents\u002Fbb-alert","\u002Fit\u002Fcomponenti\u002Fbb-alert","\u002Fen\u002Fcomponents\u002Fbb-asterisk","\u002Fit\u002Fcomponenti\u002Fbb-asterisk","\u002Fen\u002Fcomponents\u002Fbb-avatar","\u002Fit\u002Fcomponenti\u002Fbb-avatar","\u002Fen\u002Fcomponents\u002Fbb-badge","\u002Fit\u002Fcomponenti\u002Fbb-badge","\u002Fen\u002Fcomponents\u002Fbb-base-button","\u002Fit\u002Fcomponenti\u002Fbb-base-button","\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs","\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs","\u002Fen\u002Fcomponents\u002Fbb-button","\u002Fit\u002Fcomponenti\u002Fbb-button","\u002Fen\u002Fcomponents\u002Fbb-checkbox","\u002Fit\u002Fcomponenti\u002Fbb-checkbox","\u002Fen\u002Fcomponents\u002Fbb-checkbox-group","\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group","\u002Fen\u002Fcomponents\u002Fbb-collapsible","\u002Fit\u002Fcomponenti\u002Fbb-collapsible","\u002Fen\u002Fcomponents\u002Fbb-color-input","\u002Fit\u002Fcomponenti\u002Fbb-color-input","\u002Fen\u002Fcomponents\u002Fbb-color-palette","\u002Fit\u002Fcomponenti\u002Fbb-color-palette","\u002Fen\u002Fcomponents\u002Fbb-confirm","\u002Fit\u002Fcomponenti\u002Fbb-confirm","\u002Fen\u002Fcomponents\u002Fbb-date-picker","\u002Fit\u002Fcomponenti\u002Fbb-date-picker","\u002Fen\u002Fcomponents\u002Fbb-date-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input","\u002Fen\u002Fcomponents\u002Fbb-dialog","\u002Fit\u002Fcomponenti\u002Fbb-dialog","\u002Fen\u002Fcomponents\u002Fbb-dropdown","\u002Fit\u002Fcomponenti\u002Fbb-dropdown","\u002Fen\u002Fcomponents\u002Fbb-dropdown-button","\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button","\u002Fen\u002Fcomponents\u002Fbb-dropzone","\u002Fit\u002Fcomponenti\u002Fbb-dropzone","\u002Fen\u002Fcomponents\u002Fbb-form","\u002Fit\u002Fcomponenti\u002Fbb-form","\u002Fen\u002Fcomponents\u002Fbb-icon","\u002Fit\u002Fcomponenti\u002Fbb-icon","\u002Fen\u002Fcomponents\u002Fbb-indicator","\u002Fit\u002Fcomponenti\u002Fbb-indicator","\u002Fen\u002Fcomponents\u002Fbb-number-input","\u002Fit\u002Fcomponenti\u002Fbb-number-input","\u002Fen\u002Fcomponents\u002Fbb-off-canvas","\u002Fit\u002Fcomponenti\u002Fbb-off-canvas","\u002Fen\u002Fcomponents\u002Fbb-pagination","\u002Fit\u002Fcomponenti\u002Fbb-pagination","\u002Fen\u002Fcomponents\u002Fbb-popover","\u002Fit\u002Fcomponenti\u002Fbb-popover","\u002Fen\u002Fcomponents\u002Fbb-progress","\u002Fit\u002Fcomponenti\u002Fbb-progress","\u002Fen\u002Fcomponents\u002Fbb-radio","\u002Fit\u002Fcomponenti\u002Fbb-radio","\u002Fen\u002Fcomponents\u002Fbb-radio-group","\u002Fit\u002Fcomponenti\u002Fbb-radio-group","\u002Fen\u002Fcomponents\u002Fbb-rating","\u002Fit\u002Fcomponenti\u002Fbb-rating","\u002Fen\u002Fcomponents\u002Fbb-select","\u002Fit\u002Fcomponenti\u002Fbb-select","\u002Fen\u002Fcomponents\u002Fbb-select-popover","\u002Fit\u002Fcomponenti\u002Fbb-select-popover","\u002Fen\u002Fcomponents\u002Fbb-slider","\u002Fit\u002Fcomponenti\u002Fbb-slider","\u002Fen\u002Fcomponents\u002Fbb-smooth-height","\u002Fit\u002Fcomponenti\u002Fbb-smooth-height","\u002Fen\u002Fcomponents\u002Fbb-spinner","\u002Fit\u002Fcomponenti\u002Fbb-spinner","\u002Fen\u002Fcomponents\u002Fbb-switch","\u002Fit\u002Fcomponenti\u002Fbb-switch","\u002Fen\u002Fcomponents\u002Fbb-switch-group","\u002Fit\u002Fcomponenti\u002Fbb-switch-group","\u002Fen\u002Fcomponents\u002Fbb-table","\u002Fit\u002Fcomponenti\u002Fbb-table","\u002Fen\u002Fcomponents\u002Fbb-tabs","\u002Fit\u002Fcomponenti\u002Fbb-tabs","\u002Fen\u002Fcomponents\u002Fbb-tag","\u002Fit\u002Fcomponenti\u002Fbb-tag","\u002Fen\u002Fcomponents\u002Fbb-text-input","\u002Fit\u002Fcomponenti\u002Fbb-text-input","\u002Fen\u002Fcomponents\u002Fbb-textarea","\u002Fit\u002Fcomponenti\u002Fbb-textarea","\u002Fen\u002Fcomponents\u002Fbb-time-picker","\u002Fit\u002Fcomponenti\u002Fbb-time-picker","\u002Fen\u002Fcomponents\u002Fbb-time-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input","\u002Fen\u002Fcomponents\u002Fbb-toast","\u002Fit\u002Fcomponenti\u002Fbb-toast","\u002Fen\u002Fcomponents\u002Fbb-tooltip","\u002Fit\u002Fcomponenti\u002Fbb-tooltip","\u002Fen\u002Fcomponents\u002Fbb-tree","\u002Fit\u002Fcomponenti\u002Fbb-tree","\u002Fen\u002Fguides\u002Fai-agents","\u002Fit\u002Fguide\u002Fai-agents","\u002Fen\u002Fguides\u002Fcoherence","\u002Fit\u002Fguide\u002Fcoherence","\u002Fen\u002Fguides\u002Fdesign-language","\u002Fit\u002Fguide\u002Fdesign-language","\u002Fen\u002Fguides\u002Fdesign-tokens","\u002Fit\u002Fguide\u002Fdesign-tokens","\u002Fen\u002Fguides\u002Ffetching-data","\u002Fit\u002Fguide\u002Ffetching-data","\u002Fen\u002Fguides\u002Ficons","\u002Fit\u002Fguide\u002Ficons","\u002Fen\u002Fguides\u002Finertia","\u002Fit\u002Fguide\u002Finertia","\u002Fen\u002Fguides\u002Finstallation","\u002Fit\u002Fguide\u002Finstallation","\u002Fen\u002Fguides\u002Fmigration","\u002Fit\u002Fguide\u002Fmigration","\u002Fen\u002Fguides\u002Fnuxt","\u002Fit\u002Fguide\u002Fnuxt","\u002Fen\u002Fguides\u002Foptions-and-items","\u002Fit\u002Fguide\u002Foptions-and-items","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",{"id":354,"title":191,"body":355,"component":191,"description":956,"extension":957,"group":188,"meta":958,"navigation":959,"order":11,"path":192,"sections":960,"seo":966,"stem":967,"__hash__":968},"docs_en\u002Fcomponents\u002Fbb-alert.md",{"type":356,"value":357,"toc":945},"minimark",[358,406,414,417,421,432,437,456,459,468,482,505,511,520,523,536,553,559,574,577,590,597,601,610,617,623,644,654,731,734,743,749,759,811,826,932,941],[359,360,361,369],"when",{},[362,363,364,365,368],"p",{},"Reach for ",[366,367,191],"code",{}," when the message stays on the page: errors above a form, a\nquota warning, a \"saved\" confirmation in the panel that produced it.",[370,371,373],"template",{"v-slot:else":372},"",[374,375,376,389,399],"ul",{},[377,378,379,384,385,388],"li",{},[380,381,382],"a",{"href":323},[366,383,206],{}," with ",[366,386,387],{},"useToast",", when the feedback is\nmomentary and follows an action",[377,390,391,384,395,398],{},[380,392,393],{"href":259},[366,394,140],{},[366,396,397],{},"useConfirm",", when you are\nasking the user to decide",[377,400,401,405],{},[380,402,403],{"href":241},[366,404,194],{},", when it is a count or a state attached\nto another element",[407,408,410],"h2",{"id":409},"feedback",[411,412,413],"span",{},"Communicate a page state",[362,415,416],{},"Start with the state the page needs the user to resolve. For a failed submit,\nkeep one summary above the form and leave field-level errors on their controls.",[418,419],"demo",{"name":420},"BbAlert\u002FValidationSummary",[362,422,423,424,427,428,431],{},"Use ",[366,425,426],{},"hide-close"," when the message clears only after the underlying state is\nfixed. When the message is only a string, pass it as ",[366,429,430],{},"text",".",[433,434,436],"h3",{"id":435},"variants","Variants",[362,438,439,440,443,444,447,448,451,452,455],{},"Pick the variant by intent, not decoration: ",[366,441,442],{},"outline"," for neutral information,\n",[366,445,446],{},"primary"," for a product note, ",[366,449,450],{},"warning"," for something the user should attend to,\n",[366,453,454],{},"destructive"," for a failure.",[418,457],{"name":458},"BbAlert\u002FVariants",[362,460,461,463,464,467],{},[366,462,442],{}," is the default. No variant brings an icon of its own, so choose ",[366,465,466],{},"icon","\nalongside the variant.",[362,469,470,471,474,475,477,478,431],{},"There is no ",[366,472,473],{},"success"," variant. Use ",[366,476,446],{}," for a positive confirmation, or\n",[380,479,481],{"href":480},"#styling","register your own",[483,484,486],"migration",{"title":485},"theme → variant",[362,487,488,489,492,493,496,497,500,501,504],{},"In v2 ",[366,490,491],{},"theme"," took any string and painted nothing: v2 shipped no\n",[366,494,495],{},".bb-alert--*"," rules at all. In v3 the string is live, and ",[366,498,499],{},"theme=\"warning\"","\nbecomes an amber alert, quietly. Grep your stylesheets for\n",[366,502,503],{},".bb-alert--\u003Cvalue>",": if nothing styled it, drop the prop.",[407,506,508],{"id":507},"dismissal",[411,509,510],{},"Dismissal and v-model",[362,512,513,514,517,518,431],{},"The close button renders by default and works without a ",[366,515,516],{},"v-model",". For a message\nnobody should be able to close, use ",[366,519,426],{},[418,521],{"name":522},"BbAlert\u002FDismissible",[362,524,525,526,528,529,532,533,431],{},"Bind ",[366,527,516],{}," to observe the state and to put the alert back: setting it to\n",[366,530,531],{},"true"," replays the same transition inward. The alert owns its own visibility, so\nit needs no wrapping ",[366,534,535],{},"v-if",[483,537,539],{"title":538},"show-close → hide-close",[362,540,541,542,545,546,548,549,552],{},"The polarity flipped: ",[366,543,544],{},":show-close=\"false\""," becomes ",[366,547,426],{},", and a\n",[366,550,551],{},"show-close"," left at its default is simply deleted. In development the library\nwarns when it still finds a v2 name on the component.",[407,554,556],{"id":555},"rich-content",[411,557,558],{},"Rich content",[362,560,561,562,565,566,569,570,573],{},"The ",[366,563,564],{},"#title"," and ",[366,567,568],{},"#text"," slots replace the heading and the body. Both receive\n",[366,571,572],{},"{ text }",", so you can decorate the string you were handed instead of restating\nit.",[418,575],{"name":576},"BbAlert\u002FRichContent",[362,578,579,580,582,583,585,586,589],{},"Three sources can supply the body, and the most specific wins: ",[366,581,568],{},", then\nchild content, then the ",[366,584,430],{}," prop. There is no ",[366,587,588],{},"actions"," slot: a real anchor in\nthe text is fine, anything more interactive belongs outside the alert.",[483,591,592],{},[362,593,561,594,596],{},[366,595,568],{}," slot's scope used to hand you the title by mistake. It now carries\nthe text, so any workaround that read the prop from outside the slot can go.",[433,598,600],{"id":599},"validation-summaries","Validation summaries",[362,602,603,604,606,607,609],{},"A ",[366,605,454],{}," alert above the form, appearing on the first failed submit and\nlisting what is missing. Give it ",[366,608,426],{},": the user clears this message by\nfixing the fields.",[362,611,612,613,616],{},"A summary does not replace per-field errors, which stay on the inputs through\n",[366,614,615],{},"errors",". Keep it to one: five alerts appearing together talk over each other.",[407,618,620],{"id":619},"announcements",[411,621,622],{},"How an alert is announced",[362,624,625,565,627,629,630,633,634,637,638,633,641,431],{},[366,626,450],{},[366,628,454],{}," announce as ",[366,631,632],{},"role=\"alert\""," and\n",[366,635,636],{},"aria-live=\"assertive\"",". Every other variant uses ",[366,639,640],{},"role=\"status\"",[366,642,643],{},"aria-live=\"polite\"",[362,645,646,647,565,650,653],{},"Force either one with the ",[366,648,649],{},"role",[366,651,652],{},"aria-live"," props when visual tone and\nurgency come apart.",[655,656,660],"pre",{"className":657,"code":658,"language":659,"meta":372,"style":372},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003CBbAlert\n    aria-live=\"assertive\"\n    role=\"alert\"\n    icon=\"lucide:cloud-off\"\n    title=\"Autosave failed\"\n    text=\"Your last edits exist only on this device.\"\n\u002F>\n","vue",[366,661,662,673,686,696,706,716,726],{"__ignoreMap":372},[411,663,665,669],{"class":664,"line":11},"line",[411,666,668],{"class":667},"suds8","\u003C",[411,670,672],{"class":671},"sne4z","BbAlert\n",[411,674,675,679,682],{"class":664,"line":15},[411,676,678],{"class":677},"s-5SL","    aria-live",[411,680,681],{"class":667},"=",[411,683,685],{"class":684},"sT6z2","\"assertive\"\n",[411,687,688,691,693],{"class":664,"line":37},[411,689,690],{"class":677},"    role",[411,692,681],{"class":667},[411,694,695],{"class":684},"\"alert\"\n",[411,697,698,701,703],{"class":664,"line":41},[411,699,700],{"class":677},"    icon",[411,702,681],{"class":667},[411,704,705],{"class":684},"\"lucide:cloud-off\"\n",[411,707,708,711,713],{"class":664,"line":45},[411,709,710],{"class":677},"    title",[411,712,681],{"class":667},[411,714,715],{"class":684},"\"Autosave failed\"\n",[411,717,718,721,723],{"class":664,"line":79},[411,719,720],{"class":677},"    text",[411,722,681],{"class":667},[411,724,725],{"class":684},"\"Your last edits exist only on this device.\"\n",[411,727,728],{"class":664,"line":83},[411,729,730],{"class":667},"\u002F>\n",[362,732,733],{},"Never let several assertive alerts appear at once: they cut each other off.",[483,735,736],{},[362,737,738,739,742],{},"The alert is always ",[366,740,741],{},"aria-atomic",", so a changed list re-announces whole. The v2\nprop that turned that off is gone.",[407,744,746],{"id":745},"styling",[411,747,748],{},"Custom variants",[362,750,751,752,755,756,431],{},"Register a name in the plugin's ",[366,753,754],{},"alertVariants"," and it becomes a typed value of\n",[366,757,758],{},"variant",[655,760,764],{"className":761,"code":762,"language":763,"meta":372,"style":372},"language-ts shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n    bitboss: { alertVariants: ['success'] },\n});\n","ts",[366,765,766,772,789,803],{"__ignoreMap":372},[411,767,768],{"class":664,"line":11},[411,769,771],{"class":770},"sLBg1","\u002F\u002F nuxt.config.ts\n",[411,773,774,778,781,785],{"class":664,"line":15},[411,775,777],{"class":776},"sHUrx","export",[411,779,780],{"class":776}," default",[411,782,784],{"class":783},"sKwhi"," defineNuxtConfig",[411,786,788],{"class":787},"soyes","({\n",[411,790,791,794,797,800],{"class":664,"line":37},[411,792,793],{"class":667},"    bitboss: { alertVariants: [",[411,795,796],{"class":684},"'success'",[411,798,799],{"class":667},"] }",[411,801,802],{"class":787},",\n",[411,804,805,808],{"class":664,"line":41},[411,806,807],{"class":787},"})",[411,809,810],{"class":667},";\n",[362,812,813,814,817,818,821,822,825],{},"Registered variants ship no CSS. You paint ",[366,815,816],{},".bb-alert--\u003Cname>"," yourself, setting\nthe same two custom properties the built-ins set: ",[366,819,820],{},"--main-color"," for the title\nand the icon, ",[366,823,824],{},"--muted-color"," for the body text and the close button.",[655,827,831],{"className":828,"code":829,"language":830,"meta":372,"style":372},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".bb-alert--success {\n    --main-color: #15803d;\n    --muted-color: color-mix(in oklab, var(--main-color) 75%, transparent);\n    background-color: transparent;\n    border-color: var(--bb-border);\n}\n","css",[366,832,833,841,854,900,911,927],{"__ignoreMap":372},[411,834,835,838],{"class":664,"line":11},[411,836,837],{"class":677},".bb-alert--success",[411,839,840],{"class":667}," {\n",[411,842,843,846,849,852],{"class":664,"line":15},[411,844,845],{"class":787},"    --main-color",[411,847,848],{"class":667},": ",[411,850,851],{"class":677},"#15803d",[411,853,810],{"class":667},[411,855,856,859,861,864,867,870,873,876,879,881,883,886,889,892,894,897],{"class":664,"line":37},[411,857,858],{"class":787},"    --muted-color",[411,860,848],{"class":667},[411,862,863],{"class":677},"color-mix",[411,865,866],{"class":667},"(",[411,868,869],{"class":787},"in",[411,871,872],{"class":787}," oklab",[411,874,875],{"class":667},", ",[411,877,878],{"class":677},"var",[411,880,866],{"class":667},[411,882,820],{"class":787},[411,884,885],{"class":667},") ",[411,887,888],{"class":677},"75",[411,890,891],{"class":776},"%",[411,893,875],{"class":667},[411,895,896],{"class":677},"transparent",[411,898,899],{"class":667},");\n",[411,901,902,905,907,909],{"class":664,"line":41},[411,903,904],{"class":677},"    background-color",[411,906,848],{"class":667},[411,908,896],{"class":677},[411,910,810],{"class":667},[411,912,913,916,918,920,922,925],{"class":664,"line":45},[411,914,915],{"class":677},"    border-color",[411,917,848],{"class":667},[411,919,878],{"class":677},[411,921,866],{"class":667},[411,923,924],{"class":787},"--bb-border",[411,926,899],{"class":667},[411,928,929],{"class":664,"line":79},[411,930,931],{"class":667},"}\n",[362,933,934,935,937,938,940],{},"A registered variant is polite however alarming its name. Pass ",[366,936,632],{},"\nand ",[366,939,636],{}," on the instances that genuinely are urgent.",[942,943,944],"style",{},"html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html 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 .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}",{"title":372,"searchDepth":37,"depth":37,"links":946},[947,950,951,954,955],{"id":409,"depth":15,"text":413,"children":948},[949],{"id":435,"depth":37,"text":436},{"id":507,"depth":15,"text":510},{"id":555,"depth":15,"text":558,"children":952},[953],{"id":599,"depth":37,"text":600},{"id":619,"depth":15,"text":622},{"id":745,"depth":15,"text":748},"The status message that stays on the page until someone reads it or closes it.","md",{},true,[961,962,963,964,965],{"id":409,"title":413},{"id":507,"title":510},{"id":555,"title":558},{"id":619,"title":622},{"id":745,"title":748},{"title":191,"description":956},"components\u002Fbb-alert","eOF8QCGiPmEPRDjCnchiteFqzM1R3nzFjyIP-PoL5g8",{"name":191,"slug":970,"group":188,"description":971,"entrypoint":972,"docs":973,"props":976,"models":1041,"events":1044,"slots":1048,"exposed":1059,"pt":1060,"validated":3,"migration":1075},"bb-alert","Shows contextual status messages.","bitboss-ui",{"contract":974,"source":975},"ai\u002FBbAlert.md","ai\u002Fsource\u002FBbAlert.md",[977,983,988,994,997,1002,1006,1010,1013,1015,1017,1019,1021,1025,1028,1031,1036],{"name":978,"type":979,"required":980,"default":3,"description":981,"note":982,"demo":619},"ariaLive","\"off\" | \"polite\" | \"assertive\" | undefined",false,"ARIA live region politeness.\nDefaults to `'assertive'` for destructive\u002Fwarning variants, otherwise `'polite'`.","Only override it when visual tone and urgency come apart — a quiet `outline` alert that still has to interrupt. A registered custom variant is polite whatever its name, so urgent instances of one need this set by hand.",{"name":984,"type":985,"required":980,"default":3,"description":986,"note":987,"demo":507},"closeLabel","string | undefined","Visually hidden string used to label the close button.","Defaults to a localised \"Close\" from the plugin `locale`. Worth setting as soon as a page carries more than one dismissible alert, so the two buttons do not read the same to a screen reader.",{"name":989,"type":990,"required":980,"default":991,"description":992,"note":993,"demo":507},"hideClose","boolean | undefined","false","Defines whether to hide the close button.","The only way to make an alert permanent: an unbound alert is still dismissible, because the internal model starts at `true`. Replaces v2 `show-close`, with the polarity inverted.",{"name":466,"type":985,"required":980,"default":3,"description":995,"note":996,"demo":409},"Name of a registered icon to use, or a full raw `\u003Csvg>` string\n(e.g. an SVG file imported with `?raw`).","No variant implies an icon — pass one, and pick it together with the variant. It reinforces the message; `title` and `text` still have to carry it alone.",{"name":998,"type":999,"required":980,"default":1000,"description":1001,"note":3,"demo":3},"iconSize","number | ({ size?: any; } & string) | keyof Sizes | undefined","\"16\"","Size of the icon to use.",{"name":1003,"type":1004,"required":980,"default":531,"description":1005,"note":3,"demo":3},"modelValue","any","Used by v-model, set type to any to avoid Vue casting it as false.\nAlerts are visible on mount; the model dismisses them.",{"name":1007,"type":1008,"required":980,"default":3,"description":1009,"note":3,"demo":3},"pt","PtMap\u003CBbAlertPtPart, never> | undefined","Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:\u003Cpart>` row.",{"name":1011,"type":1012,"required":980,"default":3,"description":3,"note":3,"demo":3},"pt:close","PtValue | undefined",{"name":1014,"type":1012,"required":980,"default":3,"description":3,"note":3,"demo":3},"pt:icon",{"name":1016,"type":1012,"required":980,"default":3,"description":3,"note":3,"demo":3},"pt:root",{"name":1018,"type":1012,"required":980,"default":3,"description":3,"note":3,"demo":3},"pt:text",{"name":1020,"type":1012,"required":980,"default":3,"description":3,"note":3,"demo":3},"pt:title",{"name":649,"type":1022,"required":980,"default":3,"description":1023,"note":1024,"demo":619},"\"alert\" | \"status\" | undefined","Accessibility role for the alert container.\nDefaults to `'alert'` for destructive\u002Fwarning variants, otherwise `'status'`.","Derived from the variant, so setting it is a deliberate disagreement with that derivation. Reserve `alert` for genuinely urgent messages: several assertive alerts appearing together talk over each other.",{"name":430,"type":985,"required":980,"default":3,"description":1026,"note":1027,"demo":409},"Text content of the alert body.","For when a string is all you have — a server message, an item in a `v-for`. When the body is written in the template, the default slot reads better and wins over this prop.",{"name":1029,"type":985,"required":980,"default":3,"description":1030,"note":3,"demo":3},"title","Text content of the alert title.",{"name":1032,"type":1033,"required":980,"default":1034,"description":1035,"note":3,"demo":3},"transitionDuration","number | undefined","250","Transition duration in milliseconds for enter\u002Fleave.",{"name":758,"type":1037,"required":980,"default":1038,"description":1039,"note":1040,"demo":409},"keyof AlertVariantRegistry | undefined","\"outline\"","Visual variant of the alert.","An open registry, not a closed enum: `alertVariants` in the plugin config adds typed names, which then ship no CSS of their own. There is no `success` — use `primary`, or register one.",[1042],{"name":1003,"type":1004,"note":1043,"demo":507},"Typed `any` so Vue does not coerce an absent binding to `false`; treat it as a boolean in your own state. Set it back to `true` and the alert re-enters with the same transition.",[1045],{"name":1046,"signature":1047,"description":3,"note":3,"demo":3},"update:modelValue","(event: \"update:modelValue\", value: boolean): void",[1049,1052,1056],{"name":1050,"type":1004,"description":1051,"note":3,"demo":3},"default","The alert body — the shortest form, and the one to reach for:\n`\u003CBbAlert>Something went wrong\u003C\u002FBbAlert>`.\n\nSame idiom as the rest of the `text`-prop family (BbButton, BbBaseButton,\nBbTooltip, BbIndicator). When more than one source is present the most\nspecific wins: `#text` > children > the `text` prop.",{"name":430,"type":1053,"description":1054,"note":1055,"demo":555},"BbAlertTextSlotProps","Replaces the default alert body text. Wins over children and `text`.","Receives `{ text }`, the value of the `text` prop, so it can decorate the string instead of restating it. Precedence for the body, most specific first: `#text`, child content, the `text` prop.",{"name":1029,"type":1057,"description":1058,"note":3,"demo":555},"BbAlertTitleSlotProps","Replaces the default alert title text.",[],{"parts":1061,"states":1074},[1062,1065,1067,1069,1071],{"name":1063,"description":1064},"root","The alert box.",{"name":466,"description":1066},"The leading glyph — rendered only when an `icon` is set.",{"name":1029,"description":1068},"The heading line.",{"name":430,"description":1070},"The body copy.",{"name":1072,"description":1073},"close","The ✕ that dismisses the alert.",[],{"removed":1076,"renamed":1086},[1077,1083],{"name":1078,"replacedBy":989,"since":1079,"migration":1080,"silent":959,"fix":1081},"showClose","3.0.0-unreleased","ai\u002Fguides\u002Fmigration\u002Fcomponents\u002Fbb-alert.md",{"kind":1082},"invert",{"name":491,"replacedBy":758,"since":1079,"migration":1080,"silent":959,"fix":1084},{"kind":1085},"rename",[1087,1089],{"from":1078,"to":989,"since":1079,"migration":1080,"fix":1088},{"kind":1082},{"from":491,"to":758,"since":1079,"migration":1080,"fix":1090},{"kind":1085},1790005160715]