[{"data":1,"prerenderedAt":1167},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":124,"api-none":352,"page-en-\u002Fcomponents\u002Fbb-toast":353,"pt-showcase-BbToast":1103},{"\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":326,"body":355,"component":326,"description":1090,"extension":1091,"group":308,"meta":1092,"navigation":502,"order":199,"path":327,"sections":1093,"seo":1100,"stem":1101,"__hash__":1102},"docs_en\u002Fcomponents\u002Fbb-toast.md",{"type":356,"value":357,"toc":1080},"minimark",[358,398,401,415,423,430,553,578,584,590,596,602,606,627,644,678,683,686,689,710,715,728,734,743,746,749,762,768,774,777,786,800,803,810,813,828,834,856,859,875,882,889,933,939,942,991,1031,1061,1076],[359,360,361,370],"when",{},[362,363,364,365,369],"p",{},"A toast is feedback about ",[366,367,368],"strong",{},"what just happened",": \"Changes saved\", \"Upload\ncomplete\", \"Copied to clipboard\". It appears in a corner of the screen, stacks\nwith its siblings, and disappears on its own after four seconds.",[371,372,374],"template",{"v-slot:else":373},"",[375,376,377,391],"ul",{},[378,379,380,386,387,390],"li",{},[381,382,383],"a",{"href":6},[384,385,311],"code",{}," — the message describes the ",[366,388,389],{},"current\nstate of the page"," and has to stay until someone deals with it",[378,392,393,397],{},[381,394,395],{"href":30},[384,396,260],{}," — the user has to decide rather than\nbe told",[362,399,400],{},"Never put information a user must act on only in a toast — it is gone before they\nlook up.",[362,402,403,404,406,407,410,411,414],{},"Like ",[384,405,260],{},", this is a host rather than a control. ",[384,408,409],{},"\u003CBbToast \u002F>"," carries one\nprop, renders nothing where you put it, and everything you write goes through\n",[384,412,413],{},"useToast()",".",[416,417,419],"h2",{"id":418},"setup",[420,421,422],"span",{},"One host, then a function",[362,424,425,426,429],{},"Mount the host once, above the router, and ",[384,427,428],{},"toast()"," works from anywhere after\nthat.",[431,432,436],"pre",{"className":433,"code":434,"language":435,"meta":373,"style":373},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003Ctemplate>\n    \u003CNuxtLayout>\n        \u003CNuxtPage \u002F>\n    \u003C\u002FNuxtLayout>\n    \u003CBbToast \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { BbToast } from 'bitboss-ui';\n\u003C\u002Fscript>\n","vue",[384,437,438,451,461,472,481,489,498,504,527,545],{"__ignoreMap":373},[420,439,441,445,448],{"class":440,"line":131},"line",[420,442,444],{"class":443},"suds8","\u003C",[420,446,371],{"class":447},"sne4z",[420,449,450],{"class":443},">\n",[420,452,453,456,459],{"class":440,"line":135},[420,454,455],{"class":443},"    \u003C",[420,457,458],{"class":447},"NuxtLayout",[420,460,450],{"class":443},[420,462,463,466,469],{"class":440,"line":157},[420,464,465],{"class":443},"        \u003C",[420,467,468],{"class":447},"NuxtPage",[420,470,471],{"class":443}," \u002F>\n",[420,473,474,477,479],{"class":440,"line":161},[420,475,476],{"class":443},"    \u003C\u002F",[420,478,458],{"class":447},[420,480,450],{"class":443},[420,482,483,485,487],{"class":440,"line":165},[420,484,455],{"class":443},[420,486,326],{"class":447},[420,488,471],{"class":443},[420,490,491,494,496],{"class":440,"line":199},[420,492,493],{"class":443},"\u003C\u002F",[420,495,371],{"class":447},[420,497,450],{"class":443},[420,499,500],{"class":440,"line":203},[420,501,503],{"emptyLinePlaceholder":502},true,"\n",[420,505,506,508,511,515,518,521,525],{"class":440,"line":207},[420,507,444],{"class":443},[420,509,510],{"class":447},"script",[420,512,514],{"class":513},"s-5SL"," setup",[420,516,517],{"class":513}," lang",[420,519,520],{"class":443},"=",[420,522,524],{"class":523},"sT6z2","\"ts\"",[420,526,450],{"class":443},[420,528,529,533,536,539,542],{"class":440,"line":211},[420,530,532],{"class":531},"sHUrx","import",[420,534,535],{"class":443}," { BbToast } ",[420,537,538],{"class":531},"from",[420,540,541],{"class":523}," 'bitboss-ui'",[420,543,544],{"class":443},";\n",[420,546,547,549,551],{"class":440,"line":215},[420,548,493],{"class":443},[420,550,510],{"class":447},[420,552,450],{"class":443},[362,554,555,558,559,562,563,566,567,569,570,573,574,577],{},[384,556,557],{},"toast",", ",[384,560,561],{},"update"," and ",[384,564,565],{},"dismiss"," all operate on one shared module-level stack, so\nevery ",[384,568,413],{}," call in the app talks to the same host. With ",[366,571,572],{},"no host",",\nmessages are enqueued, never rendered, and never expire — the dismiss timer lives\ninside the host. With ",[366,575,576],{},"two hosts",", every message renders once per host, and a\ndev build says so.",[362,579,580,581,583],{},"Fire toasts from event handlers and settled requests, never from ",[384,582,418],{}," during\nserver rendering: on the server there is nothing to render them into.",[362,585,586,587,589],{},"This documentation site has no host of its own, so the first demo below mounts a\n",[384,588,409],{}," and every later demo on the page borrows it. Your application is the\nother way round: one host at the root, and no page mounts anything.",[416,591,593],{"id":592},"outcome",[420,594,595],{},"Communicate an outcome",[362,597,598,601],{},[384,599,600],{},"toast('Changes saved.')"," is the whole shorthand. The object form adds a body, a\ntone and an icon.",[603,604],"demo",{"name":605},"BbToast\u002FBasic",[362,607,608,611,612,615,616,562,619,622,623,626],{},[366,609,610],{},"A variant tints the icon and sets the announcement priority — nothing else."," A\n",[384,613,614],{},"success"," toast with no icon looks exactly like a default one, so pass an icon\nwhenever the tone matters; dev builds warn when a built-in variant arrives\nwithout one, because otherwise the tone is dropped with no trace.\n",[384,617,618],{},"warning",[384,620,621],{},"destructive"," announce assertively (",[384,624,625],{},"role=\"alert\"","); every other\nvariant is polite. Use the loud two sparingly, or they stop meaning anything.",[362,628,629,632,633,635,636,639,640,643],{},[384,630,631],{},"duration"," defaults to 4000ms and must be greater than zero — ",[384,634,428],{}," throws\notherwise. \"Never dismiss\" is ",[384,637,638],{},"persistent: true",", not ",[384,641,642],{},"duration: 0",". The call\nreturns the message id, which the next two sections are about.",[645,646,647],"migration",{},[362,648,649,650,653,654,558,657,653,660,662,663,666,667,670,671,673,674,677],{},"The options object was rewritten: ",[384,651,652],{},"theme"," is ",[384,655,656],{},"variant",[384,658,659],{},"timeout",[384,661,631],{},",\nand ",[384,664,665],{},"showClose"," inverted into ",[384,668,669],{},"hideClose",". Grep for ",[384,672,659],{},". It is an options\nkey rather than a template attribute, so neither the CLI checker nor the eslint\nplugin sees it; TypeScript catches a literal ",[384,675,676],{},"toast({ timeout: 8000 })"," on\nexcess-property grounds, but options assembled in a variable, or any JavaScript\ncall site, simply drop the key and take the default — which also shortened, from\n6000ms to 4000ms.",[679,680,682],"h3",{"id":681},"loading-then-the-result","Loading, then the result",[362,684,685],{},"Work that takes a moment gets one message, not two.",[603,687],{"name":688},"BbToast\u002FLoadingToResult",[362,690,691,694,695,701,702,705,706,709],{},[384,692,693],{},"loading: true"," shows a spinner and pins the toast open — it ",[366,696,697,698],{},"implies\n",[384,699,700],{},"persistent",", so the countdown never starts and a swipe cannot lose it. Keep the\nid, and when the work settles ",[384,703,704],{},"update(id, …)"," morphs the same card in place and\nrestarts the countdown. Pass ",[384,707,708],{},"loading: false"," in that update, or the spinner and\nthe pinning stay.",[362,711,712,714],{},[384,713,561],{}," on an id that has already left the stack is a safe no-op, so a slow\nrequest resolving after the user cleared the corner is not a crash.",[362,716,717,718,720,721,723,724,727],{},"For a message that must never auto-dismiss on its own, ",[384,719,638],{}," is the\noption. Add ",[384,722,669],{}," only when your own code will call ",[384,725,726],{},"dismiss(id)"," — the two\ntogether, with nothing to dismiss the toast, trap it on screen forever.",[416,729,731],{"id":730},"upsert",[420,732,733],{},"One toast per concern",[362,735,736,737,562,740,742],{},"Pass your own ",[384,738,739],{},"id",[384,741,428],{}," becomes an upsert.",[603,744],{"name":745},"BbToast\u002FUpsertById",[362,747,748],{},"If a toast with that id is still live, it is patched in place and its countdown\nrestarts instead of a duplicate stacking behind it. Use a stable id for anything\nrepeatable — autosave ticks, connection status, \"copied to clipboard\" — so\nhammering the action never floods the corner.",[362,750,751,752,755,756,758,759,761],{},"Fields you omit keep their previous value; fields you pass overwrite, including\nthe ones you can set back to ",[384,753,754],{},"undefined",". It is the same mechanism ",[384,757,561],{}," uses;\nthe difference is that ",[384,760,561],{}," never creates.",[416,763,765],{"id":764},"actions",[420,766,767],{},"Buttons on a toast",[362,769,770,771,773],{},"An ",[384,772,764],{}," array renders buttons in a row under the text, and carries the undo\npattern.",[603,775],{"name":776},"BbToast\u002FUndoDelete",[362,778,779,780,785],{},"Commit the delete immediately, with no confirm dialog, and let the toast hold the\nescape hatch — the action's closure keeps the removed record, and if the toast\nexpires the delete simply stands. This is the right trade when undoing is cheap\nand complete. When it is not, you want\n",[381,781,783],{"href":782},"\u002Fen\u002Fcomponents\u002Fbb-confirm#gate",[384,784,260],{}," before the fact instead.",[362,787,788,789,792,793,796,797,799],{},"While a button's ",[384,790,791],{},"onClick"," runs it shows a spinner, its siblings are disabled and\nthe countdown is held; the toast dismisses itself when the callback resolves. Two\nbehaviours compose out of that: a ",[366,794,795],{},"rejected"," handler keeps the toast open and\nresumes the countdown, which is a retry, and a handler that calls ",[384,798,704],{},"\ntakes ownership — the toast morphs in place with a fresh countdown rather than\ndismissing.",[362,801,802],{},"One or two actions is the limit. A message that needs more, or that must not be\nmissed, is a dialog.",[362,804,805,806,809],{},"When the body needs more than an icon, a title, text and buttons, register your\nown with ",[384,807,808],{},"\u003CBbToastPortal>"," and fire a toast that names it.",[603,811],{"name":812},"BbToast\u002FPortalBody",[362,814,815,816,558,819,558,822,562,825,827],{},"The portal replaces the whole body, so ",[384,817,818],{},"icon",[384,820,821],{},"title",[384,823,824],{},"text",[384,826,764],{}," stop\nrendering and the portal owns its own buttons. Reach for it rarely.",[416,829,831],{"id":830},"position",[420,832,833],{},"Where toasts appear",[362,835,836,837,558,840,558,843,558,846,849,850,558,853,414],{},"Six corners: ",[384,838,839],{},"top-left",[384,841,842],{},"top-center",[384,844,845],{},"top-right",[384,847,848],{},"bottom-left",",\n",[384,851,852],{},"bottom-center",[384,854,855],{},"bottom-right",[603,857],{"name":858},"BbToast\u002FCorners",[362,860,861,862,864,865,867,868,871,872,874],{},"Each message resolves its corner in three steps: its own ",[384,863,830],{},", then the\nhost's ",[384,866,830],{}," prop, then the plugin's ",[384,869,870],{},"toastPosition"," (",[384,873,855],{}," out of\nthe box). Messages in different corners form independent stacks. Pick one corner\nper product and stay there; a per-message position is for the rare control that\nlives somewhere else on the screen, like a copy button pinned to the top.",[362,876,877,878,881],{},"Everything else about the stack is automatic and worth not rebuilding: toasts\npile up newest in front with only the front three visible, hovering or focusing\nthe pile fans it out and ",[366,879,880],{},"pauses every timer",", timers also pause while the\nbrowser tab is hidden and resume with the time remaining, and a toast can be\nswiped towards its nearest screen edge. Under 600px the stack goes full width.",[362,883,884,885,888],{},"The stacks are teleported into the browser's top layer, so they paint above\ndialogs, off-canvas panels and menus. When a modal opens, the region moves inside\nit — a modal makes everything outside itself inert, and a toast nobody can click\nis worse than no toast. When a non-modal panel claims a screen edge, the stack\nyields: a bottom sheet pushes bottom stacks up, a right panel pushes right stacks\nleft, in step with the slide. Your own docked panels are ordinary page markup that\nthe stack cannot see, so a details sidebar needs one call —\n",[384,886,887],{},"useSafeArea({ side: 'right', size: 352 })"," — to claim its edge the same way.",[645,890,891],{},[362,892,893,896,897,899,900,653,903,558,905,653,908,558,910,913,914,916,917,920,921,924,925,928,929,932],{},[384,894,895],{},"placement"," became ",[384,898,830],{},", and the value vocabulary changed with it.\n",[384,901,902],{},"bottom",[384,904,852],{},[384,906,907],{},"bottom-start",[384,909,848],{},[384,911,912],{},"bottom-end"," is\n",[384,915,855],{},", and the same for ",[384,918,919],{},"top",". The composable's return changed too — it\nis ",[384,922,923],{},"{ toast, dismiss, update }"," now. ",[384,926,927],{},"dismissAll()"," is gone; ",[384,930,931],{},"dismiss()"," with no\nargument clears the stack, and nothing catches the old name for you, because it\nis not a template attribute either.",[416,934,936],{"id":935},"styling",[420,937,938],{},"Variants and CSS hooks",[362,940,941],{},"Register the names your product needs and they join the typed union; any plain\nstring is still accepted at the call site for a one-off.",[431,943,947],{"className":944,"code":945,"language":946,"meta":373,"style":373},"language-ts shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n    bitboss: { toastVariants: ['upgrade'] },\n});\n","ts",[384,948,949,955,971,984],{"__ignoreMap":373},[420,950,951],{"class":440,"line":131},[420,952,954],{"class":953},"sLBg1","\u002F\u002F nuxt.config.ts\n",[420,956,957,960,963,967],{"class":440,"line":135},[420,958,959],{"class":531},"export",[420,961,962],{"class":531}," default",[420,964,966],{"class":965},"sKwhi"," defineNuxtConfig",[420,968,970],{"class":969},"soyes","({\n",[420,972,973,976,979,982],{"class":440,"line":157},[420,974,975],{"class":443},"    bitboss: { toastVariants: [",[420,977,978],{"class":523},"'upgrade'",[420,980,981],{"class":443},"] }",[420,983,849],{"class":969},[420,985,986,989],{"class":440,"line":161},[420,987,988],{"class":969},"})",[420,990,544],{"class":443},[431,992,996],{"className":993,"code":994,"language":995,"meta":373,"style":373},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".bb-toast-message.bb-toast-message--upgrade {\n    --icon-color: var(--bb-primary);\n}\n","css",[384,997,998,1006,1026],{"__ignoreMap":373},[420,999,1000,1003],{"class":440,"line":131},[420,1001,1002],{"class":513},".bb-toast-message.bb-toast-message--upgrade",[420,1004,1005],{"class":443}," {\n",[420,1007,1008,1011,1014,1017,1020,1023],{"class":440,"line":135},[420,1009,1010],{"class":969},"    --icon-color",[420,1012,1013],{"class":443},": ",[420,1015,1016],{"class":513},"var",[420,1018,1019],{"class":443},"(",[420,1021,1022],{"class":969},"--bb-primary",[420,1024,1025],{"class":443},");\n",[420,1027,1028],{"class":440,"line":157},[420,1029,1030],{"class":443},"}\n",[362,1032,1033,1034,1037,1038,1041,1042,1044,1045,1047,1048,562,1051,1054,1055,562,1057,1060],{},"A registered variant buys you the ",[384,1035,1036],{},".bb-toast-message--\u003Cvariant>"," class hook and\nnothing else — the built-ins themselves only set ",[384,1039,1040],{},"--icon-color",", so that property\nis where a tone lives. Worth knowing before you theme: ",[384,1043,618],{}," and\n",[384,1046,621],{}," read ",[384,1049,1050],{},"--bb-warn",[384,1052,1053],{},"--bb-danger",", while ",[384,1056,614],{},[384,1058,1059],{},"info"," are\nfixed colours, so retuning your palette leaves those two where they were unless\nyou override them here. Custom variants always announce politely, whatever they\nare called.",[362,1062,1063,1064,1067,1068,1071,1072,1075],{},"The message is ",[384,1065,1066],{},".bb-toast-message"," and the region around a stack is ",[384,1069,1070],{},".bb-toast",".\nDo not fight the stack with your own ",[384,1073,1074],{},"z-index",", and do not mount extra hosts\ninside an overlay to get above it: the top layer already handles that.",[1077,1078,1079],"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 pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}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 .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":373,"searchDepth":157,"depth":157,"links":1081},[1082,1083,1086,1087,1088,1089],{"id":418,"depth":135,"text":422},{"id":592,"depth":135,"text":595,"children":1084},[1085],{"id":681,"depth":157,"text":682},{"id":730,"depth":135,"text":733},{"id":764,"depth":135,"text":767},{"id":830,"depth":135,"text":833},{"id":935,"depth":135,"text":938},"Transient feedback fired from anywhere — one host at the app root, and a toast() that stacks, pauses on hover and dismisses itself.","md",{},[1094,1095,1096,1097,1098,1099],{"id":418,"title":422},{"id":592,"title":595},{"id":730,"title":733},{"id":764,"title":767},{"id":830,"title":833},{"id":935,"title":938},{"title":326,"description":1090},"components\u002Fbb-toast","VGAZOd4xq3kvoNcj9enPwWNryE5Cxj7h7USq276Y7LE",{"name":326,"slug":1104,"group":308,"description":1105,"entrypoint":1106,"docs":1107,"props":1110,"models":1130,"events":1131,"slots":1132,"exposed":1133,"pt":1134,"validated":352,"migration":1150},"bb-toast","Shows transient notification messages (includes the co-located BbToastPortal export).","bitboss-ui",{"contract":1108,"source":1109},"ai\u002FBbToast.md","ai\u002Fsource\u002FBbToast.md",[1111,1115,1119,1122,1124,1126,1128],{"name":830,"type":1112,"required":1113,"default":352,"description":352,"note":1114,"demo":830},"BbToastPosition | undefined",false,"The default corner for messages that do not name one. Resolution runs per message first (`toast({ position })`), then this prop, then the plugin’s `toastPosition` — which is `bottom-right`. Replaces v2 `placement`, whose values do not carry over: `bottom` is now `bottom-center`, `bottom-start` is `bottom-left`, `bottom-end` is `bottom-right`.",{"name":1116,"type":1117,"required":1113,"default":352,"description":1118,"note":352,"demo":352},"pt","PtMap\u003CBbToastPtPart, never> | undefined","Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:\u003Cpart>` row.",{"name":1120,"type":1121,"required":1113,"default":352,"description":352,"note":352,"demo":352},"pt:close","PtValue | undefined",{"name":1123,"type":1121,"required":1113,"default":352,"description":352,"note":352,"demo":352},"pt:panel",{"name":1125,"type":1121,"required":1113,"default":352,"description":352,"note":352,"demo":352},"pt:root",{"name":1127,"type":1121,"required":1113,"default":352,"description":352,"note":352,"demo":352},"pt:text",{"name":1129,"type":1121,"required":1113,"default":352,"description":352,"note":352,"demo":352},"pt:title",[],[],[],[],{"parts":1135,"states":1149},[1136,1139,1142,1144,1146],{"name":1137,"description":1138},"root","One region per corner in use — a broadcast over the corners.",{"name":1140,"description":1141},"panel","One toast card — a broadcast.",{"name":821,"description":1143},"A toast's heading. A portal toast renders its own body and has neither `title` nor `text`.",{"name":824,"description":1145},"A toast's body copy.",{"name":1147,"description":1148},"close","A toast's ✕.",[],{"removed":1151,"renamed":1161},[1152,1158],{"name":895,"replacedBy":830,"since":1153,"migration":1154,"silent":502,"fix":1155},"3.0.0-unreleased","ai\u002Fguides\u002Fmigration\u002Fcomponents\u002Fbb-toast.md",{"kind":1156,"valueMap":1157},"valueMap",{"bottom":852,"bottom-start":848,"bottom-end":855,"top":842,"top-start":839,"top-end":845},{"name":652,"replacedBy":656,"since":1153,"migration":1154,"silent":502,"fix":1159},{"kind":1160},"rename",[1162,1165],{"from":895,"to":830,"since":1153,"migration":1154,"fix":1163},{"kind":1156,"valueMap":1164},{"bottom":852,"bottom-start":848,"bottom-end":855,"top":842,"top-start":839,"top-end":845},{"from":652,"to":656,"since":1153,"migration":1154,"fix":1166},{"kind":1160},1790005167231]