[{"data":1,"prerenderedAt":1474},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":124,"api-none":352,"page-en-\u002Fcomponents\u002Fbb-dialog":353,"pt-showcase-BbDialog":1264},{"\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":266,"body":355,"component":266,"description":1250,"extension":1251,"group":254,"meta":1252,"navigation":1253,"order":161,"path":267,"sections":1254,"seo":1261,"stem":1262,"__hash__":1263},"docs_en\u002Fcomponents\u002Fbb-dialog.md",{"type":356,"value":357,"toc":1238},"minimark",[358,406,409,417,436,440,447,454,463,469,472,475,488,495,498,513,569,589,595,602,605,611,618,633,639,648,651,666,672,675,681,698,717,732,737,743,746,765,780,840,850,856,863,866,869,889,896,904,907,917,920,929,1011,1024,1046,1061,1067,1073,1093,1148,1172,1205,1234],[359,360,361,369],"when",{},[362,363,364,365,368],"p",{},"Reach for ",[366,367,266],"code",{}," when someone has to finish one focused task without losing\nthe page behind it. An edit form, a create step, a decision that has to be made\nnow. Nothing else on the page is reachable while it is open.",[370,371,373],"template",{"v-slot:else":372},"",[374,375,376,385,392,399],"ul",{},[377,378,379,384],"li",{},[380,381,382],"a",{"href":52},[366,383,275],{},": the panel sits beside the task\ninstead of replacing it",[377,386,387,391],{},[380,388,389],{"href":56},[366,390,278],{},": the panel is anchored to the control\nthat opened it",[377,393,394,398],{},[380,395,396],{"href":38},[366,397,269],{},": the anchored content is a menu of\nactions",[377,400,401,405],{},[380,402,403],{"href":30},[366,404,260],{},": it is a plain yes\u002Fno, above all a\ndestructive one",[362,407,408],{},"A dialog with two buttons in the footer is not a question. That is a hand-built\nconfirm you now have to keep accessible yourself.",[410,411,413],"h2",{"id":412},"forms",[414,415,416],"span",{},"Forms and drafts",[362,418,419,420,423,424,427,428,431,432,435],{},"Bind a boolean to ",[366,421,422],{},"v-model",", reseed the draft on ",[366,425,426],{},"@show",", and clear it on\n",[366,429,430],{},"@hidden",". There is no ",[366,433,434],{},"open()"," to call.",[437,438],"demo",{"name":439},"BbDialog\u002FFormDraft",[362,441,442,443,446],{},"Always pass ",[366,444,445],{},"title",". It draws the header and gives the dialog its accessible\nname; without one a screen reader announces \"dialog\" and nothing else.",[362,448,449,450,453],{},"Replace the draft object instead of merging into it. ",[366,451,452],{},"Object.assign"," leaves old\noptional fields behind when the next record omits them. Build from a blank\nfactory on every open so Cancel is a real discard and records never share state.",[362,455,456,458,459,462],{},[366,457,430],{}," fires after the close transition. Clear the draft there and tear down\nexpensive content. The body is lazy; use ",[366,460,461],{},"eager"," only when a test or measurement\nmust read it before the first open.",[410,464,466],{"id":465},"layout",[414,467,468],{},"Structure and size",[362,470,471],{},"The body is the only one of the three regions that scrolls: header and footer\nstay pinned.",[437,473],{"name":474},"BbDialog\u002FHeaderFooter",[362,476,477,478,481,482,484,485,487],{},"Put actions in the ",[366,479,480],{},"footer"," slot, one primary with its counterweight beside it.\nA footer with two primaries is a decision you have not made yet. Use the ",[366,483,445],{},"\nslot when only the title text needs restyling. Omit ",[366,486,445],{}," and the whole header\ngoes with it, leaving the × floating over the top corner of the body.",[362,489,490,491,494],{},"The ",[366,492,493],{},"header"," slot replaces the whole header, on the dialog and on the mobile\nsheet alike.",[437,496],{"name":497},"BbDialog\u002FCustomHeader",[362,499,500,501,504,505,508,509,512],{},"Two things this slot makes yours. Render a control wired to the slot's ",[366,502,503],{},"close",",\nbecause the default × is gone. And put ",[366,506,507],{},"titleId"," on your heading, or the dialog\nhas no accessible name while the markup still looks correct. Give your slot root\n",[366,510,511],{},"flex-1",": the header is a flex row, so a single child otherwise hugs the left\nedge.",[514,515,516],"migration",{},[362,517,518,521,522,525,526,529,530,533,534,537,538,541,542,545,546,541,548,551,552,555,556,559,560,564,565,568],{},[366,519,520],{},"description"," and its ",[366,523,524],{},"#description"," slot are gone, and so is the\n",[366,527,528],{},"aria-describedby"," they wired. Put the copy in the body and set the attribute\nyourself if you need it (attributes fall through to the ",[366,531,532],{},"\u003Cdialog>"," element).\n",[366,535,536],{},"#close"," is gone, a custom close control lives inside ",[366,539,540],{},"#header",". ",[366,543,544],{},"hideHeader"," is\ngone: omit ",[366,547,445],{},[366,549,550],{},"compact",", ",[366,553,554],{},"overlayClasses"," and ",[366,557,558],{},"panelClasses"," are gone too,\nsince spacing is ",[380,561,563],{"href":562},"#styling","token-driven"," and the panel takes a normal ",[366,566,567],{},"class",".",[362,570,571,572,575,576,579,580,583,584,588],{},"Never gate Cancel on validity: an unfinished form is exactly when someone wants\nout. A submit button in the footer sits outside the ",[366,573,574],{},"\u003Cform>"," element: give the\nform an ",[366,577,578],{},"id"," and drive it with ",[366,581,582],{},"useBbFormContext",", the way\n",[380,585,587],{"href":586},"\u002Fen\u002Fcomponents\u002Fbb-form#outside","Driving the form from outside"," shows.",[410,590,592],{"id":591},"focus",[414,593,594],{},"Focus and the top layer",[362,596,597,598,601],{},"Focus, ",[366,599,600],{},"Escape"," and layering are the browser's job. There is nothing to wire,\nnot even for a popover or a select opened from in here.",[437,603],{"name":604},"BbDialog\u002FFocusTarget",[362,606,607,610],{},[366,608,609],{},"focus-target"," is a CSS selector and decides only where focus starts. Without\nit the first tabbable element gets it, which is right for a form and wrong for a\ndecision. In a dialog whose real content is its footer, point it at the primary\naction.",[362,612,613,614,617],{},"Focus returns to the trigger on close, as long as that trigger still exists.\nWhen the dialog's action destroys the row that opened it, focus drops to\n",[366,615,616],{},"\u003Cbody>",", so move it somewhere sensible yourself.",[362,619,620,621,624,625,628,629,632],{},"The dialog paints above every ",[366,622,623],{},"z-index",", and it stays where you declared it in\nthe DOM. Scoped styles, ",[366,626,627],{},"provide","\u002F",[366,630,631],{},"inject"," and your component tree all behave\nnormally.",[410,634,636],{"id":635},"dismissal",[414,637,638],{},"Controlling dismissal",[362,640,641,644,645,647],{},[366,642,643],{},"persistent"," stops the backdrop and ",[366,646,600],{}," from closing. The × still closes\nit: that is the deliberate escape hatch.",[437,649],{"name":650},"BbDialog\u002FPersistent",[362,652,653,654,657,658,551,660,662,663,665],{},"Pair it with ",[366,655,656],{},"hide-close"," when the choice really has to be made, and then the\nfooter owes the user a visible way out. ",[366,659,643],{},[366,661,656],{}," and no Cancel\nis a trap in three directions: no ",[366,664,600],{}," for the keyboard, no backdrop for the\npointer, nothing for a screen reader to find.",[362,667,668,671],{},[366,669,670],{},"disabled"," is the same guard while the surface is busy, and it blocks the × as\nwell.",[437,673],{"name":674},"BbDialog\u002FBusySave",[362,676,677,678,680],{},"It guards dismissal only. The inputs and buttons inside stay live, so disable\nthem yourself while the work is in flight. Closing through ",[366,679,422],{}," keeps\nworking under both props, which is how the demo above closes itself.",[362,682,683,684,687,688,691,692,687,694,697],{},"v2's ",[366,685,686],{},"show-close"," (default ",[366,689,690],{},"true",") is v3's ",[366,693,656],{},[366,695,696],{},"false","), and\nthe compiler cannot see it:",[699,700,704],"pre",{"className":701,"code":702,"language":703,"meta":372,"style":372},"language-diff shiki shiki-themes github-light-high-contrast github-dark-high-contrast","- \u003CBbDialog v-model=\"open\" :show-close=\"false\" persistent \u002F>\n+ \u003CBbDialog v-model=\"open\" hide-close persistent \u002F>\n","diff",[366,705,706,712],{"__ignoreMap":372},[414,707,709],{"class":708,"line":131},"line",[414,710,711],{},"- \u003CBbDialog v-model=\"open\" :show-close=\"false\" persistent \u002F>\n",[414,713,714],{"class":708,"line":135},[414,715,716],{},"+ \u003CBbDialog v-model=\"open\" hide-close persistent \u002F>\n",[362,718,719,720,723,724,727,728,731],{},"A leftover ",[366,721,722],{},":show-close=\"false\""," falls through to ",[366,725,726],{},"$attrs",", and the close button\ncomes back on the dialog that was deliberately built without one. ",[366,729,730],{},"eslint --fix","\nrewrites it.",[733,734,736],"h3",{"id":735},"width-and-fullscreen","Width and fullscreen",[362,738,739,742],{},[366,740,741],{},"size"," is a maximum width: the height always hugs the content.",[437,744],{"name":745},"BbDialog\u002FSizes",[362,747,748,749,752,753,756,757,760,761,764],{},"The presets run from ",[366,750,751],{},"xs"," (320px) to ",[366,754,755],{},"2xl"," (672px), and ",[366,758,759],{},"sm"," (384px) is the\ndefault. A per-breakpoint map, ",[366,762,763],{},":size=\"{ default: 'xs', lg: 'xl' }\"",", is the\nonly form that reacts to a live resize.",[362,766,767,771,772,775,776,779],{},[768,769,770],"strong",{},"The preset values changed between v2 and v3 and nothing warns you."," v2\nshipped ",[366,773,774],{},"{ sm: 384, md: 652, lg: 896 }",", so a ",[366,777,778],{},"size=\"md\""," dialog now loses about\n200px. Pin the old numbers if your layouts assumed them:",[699,781,785],{"className":782,"code":783,"language":784,"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: { dialogDefaultSizes: { md: 652, lg: 896 } },\n});\n","ts",[366,786,787,793,810,832],{"__ignoreMap":372},[414,788,789],{"class":708,"line":131},[414,790,792],{"class":791},"sLBg1","\u002F\u002F nuxt.config.ts\n",[414,794,795,799,802,806],{"class":708,"line":135},[414,796,798],{"class":797},"sHUrx","export",[414,800,801],{"class":797}," default",[414,803,805],{"class":804},"sKwhi"," defineNuxtConfig",[414,807,809],{"class":808},"soyes","({\n",[414,811,812,816,820,823,826,829],{"class":708,"line":157},[414,813,815],{"class":814},"suds8","    bitboss: { dialogDefaultSizes: { md: ",[414,817,819],{"class":818},"s-5SL","652",[414,821,822],{"class":814},", lg: ",[414,824,825],{"class":818},"896",[414,827,828],{"class":814}," } }",[414,830,831],{"class":808},",\n",[414,833,834,837],{"class":708,"line":161},[414,835,836],{"class":808},"})",[414,838,839],{"class":814},";\n",[362,841,842,845,846,849],{},[366,843,844],{},"fullscreen"," fills the viewport minus the standard page margin, intentionally\nnot edge to edge. ",[366,847,848],{},"fullscreen=\"mobile\""," applies that only on small viewports.",[410,851,853],{"id":852},"flow",[414,854,855],{},"Stacks and mobile sheets",[362,857,858,859,862],{},"Dialogs that share a ",[366,860,861],{},"stack"," name replace one another instead of piling up.",[437,864],{"name":865},"BbDialog\u002FStacked",[362,867,868],{},"Only the most recently opened member is visible, and closing it brings the\nprevious one back. A two-step flow then reads as one surface whose content\nswaps. Dialogs with different names simply layer by open order.",[362,870,871,872,877,878,882,883,885,886,568],{},"Before you reuse the name on a phone:\n",[380,873,875],{"href":874},"\u002Fen\u002Fcomponents\u002Fbb-off-canvas#stack",[366,876,275],{},"'s stack does the opposite,\nwith parents stepping back and leaving a band visible. An\n",[380,879,881],{"href":880},"#mobile-sheet","adaptive"," dialog forwards ",[366,884,861],{}," to its mobile sheet, so the same\nname gives you replacement on desktop and peeking on mobile. Override it through\n",[366,887,888],{},"off-canvas-props",[733,890,892],{"id":891},"the-mobile-bottom-sheet",[414,893,895],{"id":894},"mobile-sheet","The mobile bottom sheet",[362,897,898,899,903],{},"Below 768px this is not a centered modal: it renders as a\n",[380,900,901],{"href":52},[366,902,275],{}," bottom sheet. That is the shipped\nbehaviour.",[437,905],{"name":906,":frame":690},"BbDialog\u002FAdaptive",[362,908,909,912,913,916],{},[366,910,911],{},":adaptive=\"false\""," keeps the centered modal everywhere, and ",[366,914,915],{},"adaptive: false","\nin the plugin options does it project-wide.",[362,918,919],{},"The surface is latched when the dialog opens, so rotating a phone never swaps a\nmodal for a sheet under someone's finger.",[362,921,922,923,925,926,928],{},"The sheet starts bottom-anchored, draggable and content-sized. The dialog's own\n",[366,924,741],{}," is deliberately not forwarded: a max width and a drawer's extent are\ndifferent measurements. Tune the sheet with ",[366,927,888],{},", which merges\nlast:",[699,930,934],{"className":931,"code":932,"language":933,"meta":372,"style":372},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003CBbDialog\n    v-model=\"open\"\n    :off-canvas-props=\"{ side: 'right', draggable: false, size: 'lg' }\"\n    title=\"Order detail\"\n\u002F>\n","vue",[366,935,936,945,962,996,1006],{"__ignoreMap":372},[414,937,938,941],{"class":708,"line":131},[414,939,940],{"class":814},"\u003C",[414,942,944],{"class":943},"sne4z","BbDialog\n",[414,946,947,950,953,956,959],{"class":708,"line":135},[414,948,949],{"class":818},"    v-model",[414,951,952],{"class":814},"=",[414,954,955],{"class":814},"\"",[414,957,958],{"class":814},"open",[414,960,961],{"class":814},"\"\n",[414,963,964,967,969,971,973,976,980,983,985,988,991,994],{"class":708,"line":157},[414,965,966],{"class":814},"    :",[414,968,888],{"class":818},[414,970,952],{"class":814},[414,972,955],{"class":814},[414,974,975],{"class":814},"{ side: ",[414,977,979],{"class":978},"sT6z2","'right'",[414,981,982],{"class":814},", draggable: ",[414,984,696],{"class":818},[414,986,987],{"class":814},", size: ",[414,989,990],{"class":978},"'lg'",[414,992,993],{"class":814}," }",[414,995,961],{"class":814},[414,997,998,1001,1003],{"class":708,"line":161},[414,999,1000],{"class":818},"    title",[414,1002,952],{"class":814},[414,1004,1005],{"class":978},"\"Order detail\"\n",[414,1007,1008],{"class":708,"line":165},[414,1009,1010],{"class":814},"\u002F>\n",[362,1012,1013,1014,1016,1017,1019,1020,1023],{},"What you get on a phone is a real ",[366,1015,275],{},", so its rules apply there: the\ndrag gesture, the peeking stack, and ",[366,1018,741],{}," meaning extent rather than width.\nThe ",[380,1021,1022],{"href":52},"drawer page"," is where those live.",[362,1025,1026,1027,1030,1031,1033,1034,1037,1038,1041,1042,1045],{},"Two silent renames land here. v2 spelled this prop ",[366,1028,1029],{},"canvas-props"," on ",[366,1032,266],{},"\nand ",[366,1035,1036],{},"offcanvas-props"," on every other adaptive component. Inside the object,\n",[366,1039,1040],{},"direction"," became ",[366,1043,1044],{},"side",":",[699,1047,1049],{"className":701,"code":1048,"language":703,"meta":372,"style":372},"- \u003CBbDialog :canvas-props=\"{ direction: 'right' }\" \u002F>\n+ \u003CBbDialog :off-canvas-props=\"{ side: 'right' }\" \u002F>\n",[366,1050,1051,1056],{"__ignoreMap":372},[414,1052,1053],{"class":708,"line":131},[414,1054,1055],{},"- \u003CBbDialog :canvas-props=\"{ direction: 'right' }\" \u002F>\n",[414,1057,1058],{"class":708,"line":135},[414,1059,1060],{},"+ \u003CBbDialog :off-canvas-props=\"{ side: 'right' }\" \u002F>\n",[362,1062,1063,1064,1066],{},"Neither warns, so the failure looks like \"the sheet ignores my config\" rather\nthan like an error. ",[366,1065,730],{}," rewrites both.",[410,1068,1070],{"id":1069},"styling",[414,1071,1072],{},"Padding and the title",[362,1074,1075,1076,1079,1080,555,1083,1030,1086,1089,1090,568],{},"Spacing reaches the dialog through ",[366,1077,1078],{},"--bb-panel-p"," (16px), split into the local\npair ",[366,1081,1082],{},"--px",[366,1084,1085],{},"--py",[366,1087,1088],{},".bb-dialog",". Set them on the component's class, never\non ",[366,1091,1092],{},":root",[699,1094,1098],{"className":1095,"code":1096,"language":1097,"meta":372,"style":372},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u002F* v2: --bb-dialog-px: 24px; --bb-dialog-py: 10px *\u002F\n.my-dialog {\n    --px: 24px;\n    --py: 10px;\n}\n","css",[366,1099,1100,1105,1113,1129,1143],{"__ignoreMap":372},[414,1101,1102],{"class":708,"line":131},[414,1103,1104],{"class":791},"\u002F* v2: --bb-dialog-px: 24px; --bb-dialog-py: 10px *\u002F\n",[414,1106,1107,1110],{"class":708,"line":135},[414,1108,1109],{"class":818},".my-dialog",[414,1111,1112],{"class":814}," {\n",[414,1114,1115,1118,1121,1124,1127],{"class":708,"line":157},[414,1116,1117],{"class":808},"    --px",[414,1119,1120],{"class":814},": ",[414,1122,1123],{"class":818},"24",[414,1125,1126],{"class":797},"px",[414,1128,839],{"class":814},[414,1130,1131,1134,1136,1139,1141],{"class":708,"line":161},[414,1132,1133],{"class":808},"    --py",[414,1135,1120],{"class":814},[414,1137,1138],{"class":818},"10",[414,1140,1126],{"class":797},[414,1142,839],{"class":814},[414,1144,1145],{"class":708,"line":165},[414,1146,1147],{"class":814},"}\n",[362,1149,1150,1151,1153,1154,831,1157,551,1160,1163,1164,1167,1168,1171],{},"For per-part differences, scope ",[366,1152,1085],{}," to the part: ",[366,1155,1156],{},".bb-dialog__header",[366,1158,1159],{},".bb-dialog__body-content",[366,1161,1162],{},".bb-dialog__footer",". Two more locals stay:\n",[366,1165,1166],{},"--dialog-gap"," is the body-to-footer rhythm and ",[366,1169,1170],{},"--dialog-title-fs"," the title's\nsize. The title's weight is hard-coded three classes deep, so changing it takes\nthree classes:",[699,1173,1175],{"className":1095,"code":1174,"language":1097,"meta":372,"style":372},".my-dialog .bb-dialog__header .bb-dialog__title {\n    font-weight: 600;\n}\n",[366,1176,1177,1189,1201],{"__ignoreMap":372},[414,1178,1179,1181,1184,1187],{"class":708,"line":131},[414,1180,1109],{"class":818},[414,1182,1183],{"class":818}," .bb-dialog__header",[414,1185,1186],{"class":818}," .bb-dialog__title",[414,1188,1112],{"class":814},[414,1190,1191,1194,1196,1199],{"class":708,"line":135},[414,1192,1193],{"class":818},"    font-weight",[414,1195,1120],{"class":814},[414,1197,1198],{"class":818},"600",[414,1200,839],{"class":814},[414,1202,1203],{"class":708,"line":157},[414,1204,1147],{"class":814},[362,1206,1207,1208,1211,1212,1215,1216,1219,1220,1223,1224,1227,1228,1233],{},"Delete ",[366,1209,1210],{},"--bb-dialog-close"," rather than porting it. In v2 it was the close icon's\nwidth; in v3 ",[366,1213,1214],{},"--size"," is the whole control box. A copied ",[366,1217,1218],{},"12px"," then gives you a\n12×12px target, under the 24px minimum in WCAG 2.5.8. The correct edit is\nusually none: v3 already ships the same 28px control v2 produced. The rest of\nthe ",[366,1221,1222],{},"--bb-dialog-*"," family went with it, replaced by plain CSS on the\n",[366,1225,1226],{},".bb-dialog__*"," parts.\n",[380,1229,1231],{"href":1230},"\u002Fen\u002Fcomponents\u002Fbb-off-canvas#styling",[366,1232,275],{}," uses the same names on its\nown parts.",[1235,1236,1237],"style",{},"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}html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}",{"title":372,"searchDepth":157,"depth":157,"links":1239},[1240,1241,1242,1243,1246,1249],{"id":412,"depth":135,"text":416},{"id":465,"depth":135,"text":468},{"id":591,"depth":135,"text":594},{"id":635,"depth":135,"text":638,"children":1244},[1245],{"id":735,"depth":157,"text":736},{"id":852,"depth":135,"text":855,"children":1247},[1248],{"id":891,"depth":157,"text":895},{"id":1069,"depth":135,"text":1072},"The centered modal: a native dialog over the page, a bottom sheet on phones.","md",{},true,[1255,1256,1257,1258,1259,1260],{"id":412,"title":416},{"id":465,"title":468},{"id":591,"title":594},{"id":635,"title":638},{"id":852,"title":855},{"id":1069,"title":1072},{"title":266,"description":1250},"components\u002Fbb-dialog","CR0BskCfsPQ1R4R14wfOr6Sm3dHhLXDBQR8o6gBZu9c",{"name":266,"slug":1265,"group":254,"description":1266,"entrypoint":1267,"docs":1268,"props":1271,"models":1380,"events":1383,"slots":1401,"exposed":1421,"pt":1422,"validated":352,"migration":1448},"bb-dialog","Presents modal dialogs for focused user interactions.","bitboss-ui",{"contract":1269,"source":1270},"ai\u002FBbDialog.md","ai\u002Fsource\u002FBbDialog.md",[1272,1278,1281,1284,1287,1291,1295,1299,1302,1307,1310,1314,1317,1319,1321,1323,1325,1327,1329,1331,1333,1335,1337,1339,1341,1343,1345,1347,1349,1351,1353,1355,1357,1359,1361,1363,1368,1371,1374],{"name":881,"type":1273,"required":1274,"default":1275,"description":1276,"note":1277,"demo":852},"boolean | undefined",false,"`config.adaptive` (`true`)","Adapt the surface to the viewport: render as a `BbOffCanvas` drawer on\nmobile instead of a centered dialog. The surface is resolved when the\ndialog opens and stays fixed for that session: resizing across the mobile\nbreakpoint while open never swaps it.\n\nWhen unset, falls back to the global `config.adaptive`.","Three-state on purpose: unset falls back to `config.adaptive`, which ships on, so most projects never write it. The surface is latched when the dialog opens, so a resize mid-session never swaps a modal for a sheet.",{"name":520,"type":1279,"required":1274,"default":352,"description":1280,"note":352,"demo":352},"string | undefined","One short line under the title, in the header — the shadcn\n`DialogDescription` shape: same block as the title, lower hierarchy,\nmuted.\n\nIt is also what `aria-describedby` points at. That wiring was dropped in\nv3 along with the old `description` prop, on the reasoning that pointing\nit at arbitrary body content would read whole forms aloud — true, and the\nreason it aims at THIS element only. Keep it to a sentence; anything\nlonger belongs in the body.",{"name":670,"type":1273,"required":1274,"default":696,"description":1282,"note":1283,"demo":635},"Disable EVERY user-initiated dismissal: backdrop click, Escape AND the\nheader close (×) button (denied attempts play the deny nudge). Use it\nwhile an operation is in flight (e.g. a save) so the dialog cannot be\ndismissed mid-work. Compare `persistent`, which blocks backdrop\u002FEscape\nbut leaves the × working. Programmatic close (v-model) is still allowed.","It guards dismissal and nothing else — the fields and buttons inside stay live, so disable them yourself while the work is in flight.",{"name":461,"type":1273,"required":1274,"default":696,"description":1285,"note":1286,"demo":412},"Render dialog content immediately instead of waiting for the first open.","Reach for it only when something has to read or measure the body before it has ever been open — a chart, a test, an SSR snapshot. Leaving it off is what keeps a page with many dialogs cheap.",{"name":1288,"type":1279,"required":1274,"default":352,"description":1289,"note":1290,"demo":591},"focusTarget","CSS selector of the element to focus after opening. Defaults to the first tabbable element.","Chooses where focus starts, never whether it is contained: `showModal()` traps focus and returns it to the trigger either way. Point it at the primary action in a dialog whose real content is its footer.",{"name":844,"type":1292,"required":1274,"default":352,"description":1293,"note":1294,"demo":465},"boolean | \"mobile\" | undefined","Display the dialog fullscreen. Use `'mobile'` to restrict fullscreen to small devices.","Fills the viewport minus the page margin (20px, 14px on mobile) — deliberately not edge to edge. It overrides `size` rather than combining with it.",{"name":1296,"type":1273,"required":1274,"default":696,"description":1297,"note":1298,"demo":635},"hideClose","Hide the default close (×) button. The button is shown by default; set this\nto remove it (e.g. for a `persistent` dialog you don't want dismissible —\nthe × otherwise still closes a persistent dialog).","Inverted from v2's `show-close`, which defaulted to `true`. A leftover `:show-close=\"false\"` type-checks, falls through to `$attrs`, and the × comes back. Removing it also removes the last one-click way out, so the footer then owes the user a visible Cancel.",{"name":1300,"type":1273,"required":1274,"default":696,"description":1301,"note":352,"demo":352},"modelValue","Used by v-model to open \u002F close the dialog. A dialog with no `v-model`\nstarts closed.",{"name":1303,"type":1304,"required":1274,"default":352,"description":1305,"note":1306,"demo":852},"offCanvasProps","Partial\u003CBbOffCanvasProps> | undefined","Props for the phone sheet. A `pt` inside it, object or colon keys, styles\nonly that sheet.\n\nOverrides merged over the offcanvas (mobile) surface's props. The drawer\ndefaults to a bottom, draggable, content-sized sheet\n(`side: 'bottom'`, `draggable: true`, `size: 'auto'`); use this to\noverride those, set other drawer-only options (`stackGap`), or override\nshared props whose meaning differs on the drawer (`stack`). Ignored on the\ndesktop dialog surface.\n\nA `pt` inside it styles ONLY the sheet, in `BbOffCanvas`'s part words\n(`root`, `header`, `title`, `description`, `content`, `footer`, `close`;\nstate `open`), object (`{ pt: { header: '…' } }`) or colon keys\n(`{ 'pt:header': '…' }`) alike. It merges after what this component\nforwards to its sheet, so it wins a conflict and drops nothing — see the\npassthrough guide § Inside the sheet.","Merged last, so it wins over both the forwarded dialog props and the sheet's own defaults. The drawer's edge prop is `side` — `direction` was its v2 name. Spelled `canvas-props` in v2.",{"name":643,"type":1273,"required":1274,"default":696,"description":1308,"note":1309,"demo":635},"Prevent closing via outside clicks or Escape key. The header close (×)\nbutton STILL closes a persistent dialog — that is the documented escape\nhatch; combine with `hideClose` to remove it, or use `disabled` to block\nevery dismissal. Programmatic close is still allowed.","Blocks the backdrop and Escape only. The × still closes, by design, so `persistent` alone never makes a dialog unresolvable — pair it with `hideClose` when the choice must be made explicitly.",{"name":1311,"type":1312,"required":1274,"default":352,"description":1313,"note":352,"demo":352},"pt","PtMap\u003CBbDialogPtPart, BbDialogPtState> | undefined","Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:\u003Cpart>` row.",{"name":1315,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:close","PtValue | undefined",{"name":1318,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:close:fullscreen",{"name":1320,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:close:open",{"name":1322,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:content",{"name":1324,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:content:fullscreen",{"name":1326,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:content:open",{"name":1328,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:description",{"name":1330,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:description:fullscreen",{"name":1332,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:description:open",{"name":1334,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:footer",{"name":1336,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:footer:fullscreen",{"name":1338,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:footer:open",{"name":1340,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:header",{"name":1342,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:header:fullscreen",{"name":1344,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:header:open",{"name":1346,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:root",{"name":1348,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:root:fullscreen",{"name":1350,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:root:open",{"name":1352,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:sheet",{"name":1354,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:sheet:fullscreen",{"name":1356,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:sheet:open",{"name":1358,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:title",{"name":1360,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:title:fullscreen",{"name":1362,"type":1316,"required":1274,"default":352,"description":352,"note":352,"demo":352},"pt:title:open",{"name":741,"type":1364,"required":1274,"default":1365,"description":1366,"note":1367,"demo":465},"Responsive\u003CNonNullable\u003Cnumber | ({ size?: any; } & string) | keyof BbDialogSizes | undefined>> | undefined","\"sm\"","Controls the maximum width of the dialog. Accepts named presets from `'xs'` to `'2xl'`,\na custom CSS width string, or a numeric pixel value — or a per-breakpoint\nmap (e.g. `{ default: 'sm', lg: 'lg' }`) to switch width responsively.","A maximum width; the height always hugs the content. The v3 presets are narrower than v2's `{ sm: 384, md: 652, lg: 896 }` and nothing warns — pin the old numbers with `dialogDefaultSizes` if a layout assumed them. Only the per-breakpoint map form re-resolves on a resize.",{"name":861,"type":1279,"required":1274,"default":352,"description":1369,"note":1370,"demo":852},"Name of the stack this dialog belongs to. Dialogs sharing the same `stack`\nvalue replace one another: only the most recently opened stays visible while\nthe others in the stack are hidden beneath it. Dialogs in different stacks —\nor with no `stack` — never affect each other and remain fully visible.","Members of a dialog stack replace one another. The identically named prop on `BbOffCanvas` does the opposite — parents step back and peek — which matters because an adaptive dialog forwards this value to its mobile sheet.",{"name":445,"type":1279,"required":1274,"default":352,"description":1372,"note":1373,"demo":465},"Title text announced to assistive technologies. If omitted, no header is\nrendered (unless a `header` slot is supplied) and accessibility must be\nhandled manually.","The accessible name, not just a heading: it wires `aria-labelledby`. Drop it and the header goes too, and naming the dialog becomes your job.",{"name":1375,"type":1376,"required":1274,"default":1377,"description":1378,"note":1379,"demo":412},"transitionDuration","number | undefined","250","Controls the duration of the open and close animations.","Times both the animation and when `hidden` fires. Reopening inside that window keeps the dialog open rather than snapping it shut. Default is 250ms; v2 used 300.",[1381],{"name":1300,"type":1273,"note":1382,"demo":412},"The only way to open a dialog. There is no exposed `open()`, and toggling the model back from `@hide` to veto a close is not the way to keep it open — that is what `persistent` is for.",[1384,1388,1391,1395,1398],{"name":1385,"signature":1386,"description":352,"note":1387,"demo":412},"hidden","(event: \"hidden\"): void","Fires after the close transition, `transitionDuration` later than `hide`. The place to tear down expensive content, not to cancel a close.",{"name":1389,"signature":1390,"description":352,"note":352,"demo":352},"hide","(event: \"hide\"): void",{"name":1392,"signature":1393,"description":352,"note":1394,"demo":412},"show","(event: \"show\"): void","The hook for seeding a draft: it fires as the model turns true, before the open transition, so the fields render already populated.",{"name":1396,"signature":1397,"description":352,"note":352,"demo":352},"shown","(event: \"shown\"): void",{"name":1399,"signature":1400,"description":352,"note":352,"demo":352},"update:modelValue","(event: \"update:modelValue\", value: boolean): void",[1402,1407,1410,1414,1418],{"name":1403,"type":1404,"description":1405,"note":1406,"demo":465},"default","BbDialogDefaultSlotProps","Primary body content of the dialog, rendered in the scrollable body area.","The only region that scrolls, and it renders lazily — nothing inside exists until the first open unless you set `eager`.",{"name":520,"type":1408,"description":1409,"note":352,"demo":352},"BbDialogDescriptionSlotProps","Replaces the description text under the title. Renders the header even\nwhen `title` and `description` are unset — a slotted description is a\ndescription, the same rule `#title` follows.",{"name":480,"type":1411,"description":1412,"note":1413,"demo":465},"object","Content rendered in the dialog footer, below the body area. Typically used for action buttons.","Stays pinned while the body scrolls. One primary action, aligned to the end, and a Cancel that is never gated on validity.",{"name":493,"type":1415,"description":1416,"note":1417,"demo":465},"BbDialogHeaderSlotProps","Replaces the entire dialog header section (title + close button) on both\nsurfaces — the desktop `\u003Cdialog>` and the mobile off-canvas. Because it\nreplaces the default close (✕), the slot owns closing: render your own\ncontrol wired to the `close` prop, and wire `titleId` onto your title\nelement to keep `aria-labelledby` intact.\n\nProviding this slot renders a header even when `title` is unset.\n\nLayout: the header container is a flex row (`justify-content:\nspace-between`), so your root element is a flex item and shrinks to its\ncontent by default — give it `flex: auto` (Tailwind `flex-1`) to fill the\nwidth, or it renders squeezed against the left edge.","Replaces the header on both surfaces, so it also replaces the ×: render your own control wired to `close`, and put `titleId` on your heading or `aria-labelledby` points at nothing. The header is a flex row, so give your root `flex-1` or it hugs the left edge. This is where a v2 `#close` or `#description` goes.",{"name":445,"type":1419,"description":1420,"note":352,"demo":352},"BbDialogTitleSlotProps","Replaces the default title text inside the header. Remains linked to the\ndialog through `aria-labelledby`. Providing this slot renders the header\neven when `title` is unset — a slotted title is a title.",[],{"parts":1423,"states":1443},[1424,1427,1430,1432,1434,1436,1439,1441],{"name":1425,"description":1426},"root","The `\u003Cdialog>` — the surface itself, so there is no separate `panel`. The backdrop is `::backdrop`: style it in CSS (`.bb-dialog::backdrop`), it has no node for `pt`.",{"name":1428,"description":1429},"sheet","The bottom sheet on the adaptive `surface=\"canvas\"` (the `BbOffCanvas` root) — never the desktop `\u003Cdialog>`. Applied after `root`, so it wins a conflict there.",{"name":493,"description":1431},"The header band.",{"name":445,"description":1433},"The title line inside the header. Not rendered when a `#header` slot replaces the header.",{"name":520,"description":1435},"The description line inside the header. Not rendered when a `#header` slot replaces the header.",{"name":1437,"description":1438},"content","The scrolling body. It carries the body's padding (`--px`, `--py`, `--dialog-gap`), so `pt:content=\"px-8\"` or `[--py:20px]` sets it.",{"name":480,"description":1440},"The footer band.",{"name":503,"description":1442},"The ✕ — in the header, or floating when there is none.",[1444,1446],{"name":844,"description":1445},"Component-wide: the dialog fills the viewport — always with `fullscreen`, and with `fullscreen=\"mobile\"` only while the viewport is a phone, so it can flip at runtime. Listed after `open`, so a `pt:root:fullscreen` entry wins a conflict with `pt:root:open` (drop an open-state ring or radius that a full-viewport surface cannot show). Forwarded to the sheet on the adaptive `surface=\"canvas\"`.",{"name":958,"description":1447},"Component-wide: the dialog is open (follows `v-model`).",{"removed":1449,"renamed":1469},[1450,1456,1459,1461,1463,1465],{"name":1451,"replacedBy":1303,"since":1452,"migration":1453,"silent":1253,"fix":1454},"canvasProps","3.0.0-unreleased","ai\u002Fguides\u002Fmigration\u002Fcomponents\u002Fbb-dialog.md",{"kind":1455},"rename",{"name":550,"replacedBy":352,"since":1452,"migration":1453,"silent":1253,"fix":1457},{"kind":1458},"manual",{"name":544,"replacedBy":352,"since":1452,"migration":1453,"silent":1253,"fix":1460},{"kind":1458},{"name":554,"replacedBy":352,"since":1452,"migration":1453,"silent":1253,"fix":1462},{"kind":1458},{"name":558,"replacedBy":352,"since":1452,"migration":1453,"silent":1253,"fix":1464},{"kind":1458},{"name":1466,"replacedBy":1296,"since":1452,"migration":1453,"silent":1253,"fix":1467},"showClose",{"kind":1468},"invert",[1470,1472],{"from":1451,"to":1303,"since":1452,"migration":1453,"fix":1471},{"kind":1455},{"from":1466,"to":1296,"since":1452,"migration":1453,"fix":1473},{"kind":1468},1790005163268]