[{"data":1,"prerenderedAt":1924},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":134,"api-none":377,"page-en-\u002Fcomponents\u002Fbb-off-canvas":378,"pt-showcase-BbOffCanvas":1726},{"\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-calendar":20,"\u002Fen\u002Fcomponents\u002Fbb-calendar":21,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":22,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":23,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":24,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":25,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":26,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":27,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":28,"\u002Fen\u002Fcomponents\u002Fbb-color-input":29,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":30,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":31,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":32,"\u002Fen\u002Fcomponents\u002Fbb-confirm":33,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":34,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":35,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":36,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":37,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":38,"\u002Fen\u002Fcomponents\u002Fbb-dialog":39,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":40,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":41,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":42,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":43,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":44,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":45,"\u002Fit\u002Fcomponenti\u002Fbb-form":46,"\u002Fen\u002Fcomponents\u002Fbb-form":47,"\u002Fit\u002Fcomponenti\u002Fbb-hover-card":48,"\u002Fen\u002Fcomponents\u002Fbb-hover-card":49,"\u002Fit\u002Fcomponenti\u002Fbb-icon":50,"\u002Fen\u002Fcomponents\u002Fbb-icon":51,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":52,"\u002Fen\u002Fcomponents\u002Fbb-indicator":53,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":54,"\u002Fen\u002Fcomponents\u002Fbb-number-input":55,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":56,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":57,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":58,"\u002Fen\u002Fcomponents\u002Fbb-pagination":59,"\u002Fit\u002Fcomponenti\u002Fbb-popover":60,"\u002Fen\u002Fcomponents\u002Fbb-popover":61,"\u002Fit\u002Fcomponenti\u002Fbb-progress":62,"\u002Fen\u002Fcomponents\u002Fbb-progress":63,"\u002Fit\u002Fcomponenti\u002Fbb-radio":64,"\u002Fen\u002Fcomponents\u002Fbb-radio":65,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":66,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":67,"\u002Fit\u002Fcomponenti\u002Fbb-rating":68,"\u002Fen\u002Fcomponents\u002Fbb-rating":69,"\u002Fit\u002Fcomponenti\u002Fbb-select":70,"\u002Fen\u002Fcomponents\u002Fbb-select":71,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":72,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":73,"\u002Fit\u002Fcomponenti\u002Fbb-slider":74,"\u002Fen\u002Fcomponents\u002Fbb-slider":75,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":76,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":77,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":78,"\u002Fen\u002Fcomponents\u002Fbb-spinner":79,"\u002Fit\u002Fcomponenti\u002Fbb-switch":80,"\u002Fen\u002Fcomponents\u002Fbb-switch":81,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":82,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":83,"\u002Fit\u002Fcomponenti\u002Fbb-table":84,"\u002Fen\u002Fcomponents\u002Fbb-table":85,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":86,"\u002Fen\u002Fcomponents\u002Fbb-tabs":87,"\u002Fit\u002Fcomponenti\u002Fbb-tag":88,"\u002Fen\u002Fcomponents\u002Fbb-tag":89,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":90,"\u002Fen\u002Fcomponents\u002Fbb-text-input":91,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":92,"\u002Fen\u002Fcomponents\u002Fbb-textarea":93,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":94,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":95,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":96,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":97,"\u002Fit\u002Fcomponenti\u002Fbb-toast":98,"\u002Fen\u002Fcomponents\u002Fbb-toast":99,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":100,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":101,"\u002Fit\u002Fcomponenti\u002Fbb-tree":102,"\u002Fen\u002Fcomponents\u002Fbb-tree":103,"\u002Fit\u002Fguide\u002Fadoption-checklist":104,"\u002Fen\u002Fguides\u002Fadoption-checklist":105,"\u002Fit\u002Fguide\u002Fai-agents":106,"\u002Fen\u002Fguides\u002Fai-agents":107,"\u002Fit\u002Fguide\u002Fcoherence":108,"\u002Fen\u002Fguides\u002Fcoherence":109,"\u002Fit\u002Fguide\u002Fdesign-language":110,"\u002Fen\u002Fguides\u002Fdesign-language":111,"\u002Fit\u002Fguide\u002Fdesign-tokens":112,"\u002Fen\u002Fguides\u002Fdesign-tokens":113,"\u002Fit\u002Fguide\u002Ffetching-data":114,"\u002Fen\u002Fguides\u002Ffetching-data":115,"\u002Fit\u002Fguide\u002Ficons":116,"\u002Fen\u002Fguides\u002Ficons":117,"\u002Fit\u002Fguide\u002Finertia":118,"\u002Fen\u002Fguides\u002Finertia":119,"\u002Fit\u002Fguide\u002Finstallation":120,"\u002Fen\u002Fguides\u002Finstallation":121,"\u002Fit\u002Fguide\u002Fmigration":122,"\u002Fen\u002Fguides\u002Fmigration":123,"\u002Fit\u002Fguide\u002Fnuxt":124,"\u002Fen\u002Fguides\u002Fnuxt":125,"\u002Fit\u002Fguide\u002Foptions-and-items":126,"\u002Fen\u002Fguides\u002Foptions-and-items":127,"\u002Fit\u002Fguide\u002Fpassthrough":128,"\u002Fen\u002Fguides\u002Fpassthrough":129,"\u002Fit\u002Fguide\u002Fpreset-components":130,"\u002Fen\u002Fguides\u002Fpreset-components":131,"\u002Fit\u002Fguide\u002Fvalidated-forms":132,"\u002Fen\u002Fguides\u002Fvalidated-forms":133},"\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-calendar","\u002Fit\u002Fcomponenti\u002Fbb-calendar","\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-hover-card","\u002Fit\u002Fcomponenti\u002Fbb-hover-card","\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\u002Fadoption-checklist","\u002Fit\u002Fguide\u002Fadoption-checklist","\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\u002Fpassthrough","\u002Fit\u002Fguide\u002Fpassthrough","\u002Fen\u002Fguides\u002Fpreset-components","\u002Fit\u002Fguide\u002Fpreset-components","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",[135,150,162,186,198,242,275,311,332,353,365,371],{"label":136,"entries":137},"Getting started",[138,142,146],{"title":139,"path":140,"order":141},"Installation","\u002Fguides\u002Finstallation",1,{"title":143,"path":144,"order":145},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"title":147,"path":148,"order":149},"Adoption checklist","\u002Fguides\u002Fadoption-checklist",3,{"label":151,"entries":152},"Design system",[153,156,159],{"title":154,"path":155,"order":141},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":157,"path":158,"order":145},"Design language","\u002Fguides\u002Fdesign-language",{"title":160,"path":161,"order":149},"Passthrough","\u002Fguides\u002Fpassthrough",{"label":163,"entries":164},"Playbooks",[165,168,171,174,178,182],{"title":166,"path":167,"order":141},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":169,"path":170,"order":145},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":172,"path":173,"order":149},"Coherence","\u002Fguides\u002Fcoherence",{"title":175,"path":176,"order":177},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":179,"path":180,"order":181},"Icons","\u002Fguides\u002Ficons",5,{"title":183,"path":184,"order":185},"Preset components","\u002Fguides\u002Fpreset-components",6,{"label":187,"entries":188},"Ecosystem",[189,192,195],{"title":190,"path":191,"order":141},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":193,"path":194,"order":145},"Nuxt","\u002Fguides\u002Fnuxt",{"title":196,"path":197,"order":149},"AI agents","\u002Fguides\u002Fai-agents",{"label":199,"entries":200},"Inputs",[201,204,207,210,213,216,219,222,226,230,234,238],{"title":202,"path":203,"component":202,"order":141},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":205,"path":206,"component":205,"order":145},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":208,"path":209,"component":208,"order":149},"BbCalendar","\u002Fcomponents\u002Fbb-calendar",{"title":211,"path":212,"component":211,"order":149},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":214,"path":215,"component":214,"order":177},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":217,"path":218,"component":217,"order":181},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":220,"path":221,"component":220,"order":185},"BbForm","\u002Fcomponents\u002Fbb-form",{"title":223,"path":224,"component":223,"order":225},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":227,"path":228,"component":227,"order":229},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":231,"path":232,"component":231,"order":233},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":235,"path":236,"component":235,"order":237},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":239,"path":240,"component":239,"order":241},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":243,"entries":244},"Selection",[245,248,251,254,257,260,263,266,269,272],{"title":246,"path":247,"component":246,"order":141},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":249,"path":250,"component":249,"order":145},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":252,"path":253,"component":252,"order":149},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":255,"path":256,"component":255,"order":177},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":258,"path":259,"component":258,"order":181},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":261,"path":262,"component":261,"order":185},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":264,"path":265,"component":264,"order":225},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":267,"path":268,"component":267,"order":229},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":270,"path":271,"component":270,"order":233},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":273,"path":274,"component":273,"order":237},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":276,"entries":277},"Overlay",[278,281,284,287,290,293,296,299,302,305,308],{"title":279,"path":280,"component":279,"order":141},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":282,"path":283,"component":282,"order":145},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":285,"path":286,"component":285,"order":149},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":288,"path":289,"component":288,"order":177},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":291,"path":292,"component":291,"order":181},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":294,"path":295,"component":294,"order":185},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":297,"path":298,"component":297,"order":225},"BbHoverCard","\u002Fcomponents\u002Fbb-hover-card",{"title":300,"path":301,"component":300,"order":225},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":303,"path":304,"component":303,"order":229},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":306,"path":307,"component":306,"order":233},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":309,"path":310,"component":309,"order":237},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":312,"entries":313},"Navigation",[314,317,320,323,326,329],{"title":315,"path":316,"component":315,"order":141},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":318,"path":319,"component":318,"order":145},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":321,"path":322,"component":321,"order":149},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":324,"path":325,"component":324,"order":177},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":327,"path":328,"component":327,"order":181},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":330,"path":331,"component":330,"order":185},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":333,"entries":334},"Feedback",[335,338,341,344,347,350],{"title":336,"path":337,"component":336,"order":141},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":339,"path":340,"component":339,"order":145},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":342,"path":343,"component":342,"order":149},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":345,"path":346,"component":345,"order":177},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":348,"path":349,"component":348,"order":181},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":351,"path":352,"component":351,"order":185},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":354,"entries":355},"Data Display",[356,359,362],{"title":357,"path":358,"component":357,"order":141},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":360,"path":361,"component":360,"order":145},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":363,"path":364,"component":363,"order":149},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":366,"entries":367},"Layout & Utility",[368],{"title":369,"path":370,"component":369,"order":141},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":372,"entries":373},"Other",[374],{"title":375,"path":376,"component":375,"order":141},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",null,{"id":379,"title":300,"body":380,"component":300,"description":1712,"extension":1713,"group":276,"meta":1714,"navigation":530,"order":225,"path":301,"sections":1715,"seo":1723,"stem":1724,"__hash__":1725},"docs_en\u002Fcomponents\u002Fbb-off-canvas.md",{"type":381,"value":382,"toc":1698},"minimark",[383,434,445,453,476,593,602,731,737,757,761,771,785,791,804,807,810,828,846,899,904,907,929,963,966,990,1001,1005,1012,1015,1033,1052,1123,1136,1142,1150,1153,1168,1184,1191,1197,1203,1222,1225,1262,1267,1278,1281,1295,1302,1311,1317,1330,1333,1346,1393,1402,1451,1457,1478,1562,1612,1637,1651,1666,1694],[384,385,386,394],"when",{},[387,388,389,390,393],"p",{},"Reach for ",[391,392,300],"code",{}," for content that lives beside the main task rather than\nreplacing it: a filter panel, a record's detail view, a settings drawer. The\nuser is topping up context, not switching to a different job.",[395,396,398],"template",{"v-slot:else":397},"",[399,400,401,410,417,424,431],"ul",{},[402,403,404,409],"li",{},[405,406,407],"a",{"href":38},[391,408,288],{},": it is one task the user must finish\nbefore anything else",[402,411,412,416],{},[405,413,414],{"href":60},[391,415,303],{},": the panel is anchored to the control\nthat opened it",[402,418,419,423],{},[405,420,421],{"href":40},[391,422,291],{},": the anchored content is a menu of\nactions",[402,425,426,430],{},[405,427,428],{"href":32},[391,429,282],{},": it is a yes\u002Fno",[402,432,433],{},"A page: the drawer has grown tabs, a list and sub-navigation",[387,435,436,437,439,440,444],{},"Underneath, ",[391,438,300],{}," and ",[405,441,442],{"href":38},[391,443,288],{}," are the\nsame machine: the same opening by id, the same slots, the same events, the\nsame dismissal props. Moving a surface between them is mostly a tag swap. This page\ncovers what genuinely differs: the edge, the extent, the drag, and a stack that\nbehaves the other way round.",[446,447,449],"h2",{"id":448},"open",[450,451,452],"span",{},"Open by id",[387,454,455,456,459,460,463,464,467,468,471,472,475],{},"Give the panel an ",[391,457,458],{},"id"," and put ",[391,461,462],{},"v-bb-off-canvas"," on the button that opens it,\nwith the id in inner quotes. You need no ",[391,465,466],{},"ref(false)",", no ",[391,469,470],{},"@click"," and no\n",[391,473,474],{},"v-model",":",[477,478,482],"pre",{"className":479,"code":480,"language":481,"meta":397,"style":397},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003CBbButton v-bb-off-canvas=\"'filters'\" variant=\"outline\">Filters\u003C\u002FBbButton>\n\n\u003CBbOffCanvas id=\"filters\" side=\"right\" title=\"Filters\">\n    …\n    \u003Ctemplate #footer=\"{ close }\">\n        \u003CBbButton variant=\"primary\" @click=\"close\">Apply\u003C\u002FBbButton>\n    \u003C\u002Ftemplate>\n\u003C\u002FBbOffCanvas>\n","vue",[391,483,484,526,532,564,569,574,579,584],{"__ignoreMap":397},[450,485,487,491,494,498,501,504,508,510,513,515,518,521,523],{"class":486,"line":141},"line",[450,488,490],{"class":489},"suds8","\u003C",[450,492,205],{"class":493},"sne4z",[450,495,497],{"class":496},"s-5SL"," v-bb-off-canvas",[450,499,500],{"class":489},"=",[450,502,503],{"class":489},"\"",[450,505,507],{"class":506},"sT6z2","'filters'",[450,509,503],{"class":489},[450,511,512],{"class":496}," variant",[450,514,500],{"class":489},[450,516,517],{"class":506},"\"outline\"",[450,519,520],{"class":489},">Filters\u003C\u002F",[450,522,205],{"class":493},[450,524,525],{"class":489},">\n",[450,527,528],{"class":486,"line":145},[450,529,531],{"emptyLinePlaceholder":530},true,"\n",[450,533,534,536,538,541,543,546,549,551,554,557,559,562],{"class":486,"line":149},[450,535,490],{"class":489},[450,537,300],{"class":493},[450,539,540],{"class":496}," id",[450,542,500],{"class":489},[450,544,545],{"class":506},"\"filters\"",[450,547,548],{"class":496}," side",[450,550,500],{"class":489},[450,552,553],{"class":506},"\"right\"",[450,555,556],{"class":496}," title",[450,558,500],{"class":489},[450,560,561],{"class":506},"\"Filters\"",[450,563,525],{"class":489},[450,565,566],{"class":486,"line":177},[450,567,568],{"class":489},"    …\n",[450,570,571],{"class":486,"line":181},[450,572,573],{"class":489},"    \u003Ctemplate #footer=\"{ close }\">\n",[450,575,576],{"class":486,"line":185},[450,577,578],{"class":489},"        \u003CBbButton variant=\"primary\" @click=\"close\">Apply\u003C\u002FBbButton>\n",[450,580,581],{"class":486,"line":225},[450,582,583],{"class":489},"    \u003C\u002Ftemplate>\n",[450,585,586,589,591],{"class":486,"line":229},[450,587,588],{"class":489},"\u003C\u002F",[450,590,300],{"class":493},[450,592,525],{"class":489},[387,594,595,596,475],{},"It works exactly like ",[405,597,599],{"href":598},"\u002Fen\u002Fcomponents\u002Fbb-dialog#open",[391,600,601],{},"v-bb-dialog",[399,603,604,642,661,693,706,725],{},[402,605,606,609,610,613,614,617,618,620,621,624,625,620,628,620,631,439,634,637,638,641],{},[391,607,608],{},"v-bb-off-canvas=\"{ id: 'member', data: member }\""," hands the panel what it\nwas opened for, as a fresh copy per opening. The slots receive it as ",[391,611,612],{},"data",",\nand ",[391,615,616],{},"useBbOffCanvasContext\u003CT>(id)"," returns it typed, with ",[391,619,448],{},", ",[391,622,623],{},"isReady",",\n",[391,626,627],{},"show(data?)",[391,629,630],{},"hide()",[391,632,633],{},"complete(value)",[391,635,636],{},"reset()",". A ",[391,639,640],{},"show()"," on the\nopen panel joins it and changes nothing.",[402,643,644,645,649,650,652,653,657,658,660],{},"Many rows open ",[646,647,648],"strong",{},"one"," panel, each with its own ",[391,651,612],{},", as the\n",[405,654,656],{"href":655},"#stack","stack"," below does. Never render one panel per row: the ",[391,659,458],{}," is also\nthe DOM id.",[402,662,663,665,666,669,670,673,674,678,679,681,682,688,689,692],{},[391,664,633],{}," closes with a result for the trigger's ",[391,667,668],{},"onComplete"," (or\n",[391,671,672],{},"await show()",", as on the ",[405,675,677],{"href":676},"\u002Fen\u002Fcomponents\u002Fbb-dialog#results","dialog","), and\n",[391,680,630],{}," closes with none; both work even under\n",[405,683,685],{"href":684},"#dismissal",[391,686,687],{},"prevent-close",". The slots' ",[391,690,691],{},"close()"," is the user's close.",[402,694,695,698,699,701,702,705],{},[646,696,697],{},"The page can own the save."," An ",[391,700,668],{}," that returns the request's\npromise keeps the panel open and locked until it settles, and a rejection\nkeeps the user's edit, as on the\n",[405,703,677],{"href":704},"\u002Fen\u002Fcomponents\u002Fbb-dialog#page-saves",".",[402,707,708,714,715,718,719,721,722,705],{},[405,709,711],{"href":710},"\u002Fen\u002Fcomponents\u002Fbb-off-canvas\u002Fapi#event-hide",[391,712,713],{},"@hide"," carries the opening's\nresult, a swipe included. To tell a save from a cancel, close a save with\n",[391,716,717],{},"complete()",", not by writing the model: on a ",[391,720,474],{}," panel too it reports\n",[391,723,724],{},"{ completed: true }",[402,726,727,728,730],{},"A ",[391,729,474],{}," on the panel still wins. Keep it for a panel your state opens.",[446,732,734],{"id":733},"task",[450,735,736],{},"Filters beside the page",[387,738,739,740,742,743,746,747,753,754,756],{},"Hand the panel the applied filters as ",[391,741,612],{},": it edits its own copy, so\nclosing it any other way discards the change, and the footer's Show hands the\ncopy back with ",[391,744,745],{},"complete(data)",". Its\n",[405,748,750],{"href":749},"\u002Fen\u002Fcomponents\u002Fbb-off-canvas\u002Fapi#prop-defaultData",[391,751,752],{},"default-data"," is \"no\nfilters\", and the footer's Reset is the slot's ",[391,755,636],{},": it restores every key\nthat default declares, from a fresh copy.",[758,759],"demo",{"name":760},"BbOffCanvas\u002FFilters",[387,762,763,764,770],{},"Pass ",[405,765,767],{"href":766},"\u002Fen\u002Fcomponents\u002Fbb-off-canvas\u002Fapi#prop-title",[391,768,769],{},"title",". It draws the header and gives the panel its accessible name, and a\ndrawer that announces only \"dialog\" tells nobody what just appeared beside their\ntable.",[387,772,773,774,777,778,780,781,705],{},"The panel dismisses itself on the ×, on ",[391,775,776],{},"Escape"," and on a backdrop click. Focus,\n",[391,779,776],{}," and layering behave exactly as they do on the dialog, and they are\ndescribed once on\n",[405,782,784],{"href":783},"\u002Fen\u002Fcomponents\u002Fbb-dialog#focus","BbDialog → Focus and the top layer",[446,786,788],{"id":787},"geometry",[450,789,790],{},"Edge, structure and extent",[387,792,793,799,800,803],{},[405,794,796],{"href":795},"\u002Fen\u002Fcomponents\u002Fbb-off-canvas\u002Fapi#prop-side",[391,797,798],{},"side"," picks the edge the panel docks to. ",[391,801,802],{},"left"," is the default.",[758,805],{"name":806},"BbOffCanvas\u002FSides",[387,808,809],{},"The choice is not only cosmetic. The side also decides:",[399,811,812,822,825],{},[402,813,814,815,821],{},"which dimension ",[405,816,818],{"href":817},"\u002Fen\u002Fcomponents\u002Fbb-off-canvas\u002Fapi#prop-size",[391,819,820],{},"size"," controls",[402,823,824],{},"which axis the drag runs along",[402,826,827],{},"which edge a stacked parent peeks past",[387,829,830,831,834,835,838,839,842,843,705],{},"Use ",[391,832,833],{},"right"," for detail and filter panels, ",[391,836,837],{},"bottom"," for phone-style sheets, ",[391,840,841],{},"top","\nfor banners and command surfaces. Every panel keeps its bands clear of the notch\nand the home indicator on the edges it touches, as long as the page's viewport\nmeta has ",[391,844,845],{},"viewport-fit=cover",[847,848,850,871,888],"migration",{"title":849},"direction → side",[387,851,852,853,856,857,859,860,863,864,866,867,870],{},"This prop was called ",[391,854,855],{},"direction"," in v2, and the compiler cannot see the rename.\nA leftover ",[391,858,855],{}," falls into ",[391,861,862],{},"$attrs"," and the panel docks to ",[391,865,802],{},"; a\ndevelopment build warns, and ",[391,868,869],{},"npx bitboss-ui check --fix"," renames it:",[477,872,876],{"className":873,"code":874,"language":875,"meta":397,"style":397},"language-diff shiki shiki-themes github-light-high-contrast github-dark-high-contrast","- \u003CBbOffCanvas v-model=\"open\" direction=\"right\" \u002F>\n+ \u003CBbOffCanvas v-model=\"open\" side=\"right\" \u002F>\n","diff",[391,877,878,883],{"__ignoreMap":397},[450,879,880],{"class":486,"line":141},[450,881,882],{},"- \u003CBbOffCanvas v-model=\"open\" direction=\"right\" \u002F>\n",[450,884,885],{"class":486,"line":145},[450,886,887],{},"+ \u003CBbOffCanvas v-model=\"open\" side=\"right\" \u002F>\n",[387,889,890,891,894,895,898],{},"The same rename applies inside ",[391,892,893],{},"off-canvas-props"," on every component that opens\na drawer on mobile. ",[391,896,897],{},"eslint --fix"," rewrites all of them.",[900,901,903],"h3",{"id":902},"header-body-and-footer","Header, body and footer",[387,905,906],{},"The body is the only one of the three regions that scrolls: header and footer\nstay pinned.",[387,908,909,910,916,917,921,922,924,925,705],{},"Actions belong in ",[405,911,913],{"href":912},"\u002Fen\u002Fcomponents\u002Fbb-off-canvas\u002Fapi#slot-footer",[391,914,915],{},"footer",", one primary (Apply, Save, Assign) with its\ncounterweight beside it. The ",[405,918,920],{"href":919},"#task","filters demo"," also shows the pattern the\ndrawer inherits from the dialog: the panel edits its own copy of ",[391,923,612],{},", fresh on\nevery opening. The reasoning is on\n",[405,926,928],{"href":927},"\u002Fen\u002Fcomponents\u002Fbb-dialog#forms","BbDialog → Editing a record",[387,930,931,932,937,938,944,945,949,950,956,957,962],{},"Use the ",[405,933,935],{"href":934},"\u002Fen\u002Fcomponents\u002Fbb-off-canvas\u002Fapi#slot-title",[391,936,769],{}," slot when only the title text needs restyling. The ",[405,939,941],{"href":940},"\u002Fen\u002Fcomponents\u002Fbb-off-canvas\u002Fapi#slot-header",[391,942,943],{},"header"," slot\nreplaces the whole header instead, and providing it renders a header even with\nno ",[405,946,947],{"href":766},[391,948,769],{},".\n",[405,951,953],{"href":952},"\u002Fen\u002Fcomponents\u002Fbb-off-canvas\u002Fapi#prop-description",[391,954,955],{},"description"," adds one\nmuted line under the title, read as the panel's description; the\n",[405,958,960],{"href":959},"\u002Fen\u002Fcomponents\u002Fbb-off-canvas\u002Fapi#slot-description",[391,961,955],{}," slot does the\nsame when the line needs markup.",[758,964],{"name":965},"BbOffCanvas\u002FCustomHeader",[387,967,968,969,620,972,439,974,977,978,980,981,983,984,986,987,989],{},"It receives ",[391,970,971],{},"titleId",[391,973,769],{},[391,975,976],{},"close",". Put ",[391,979,971],{}," on your heading, or the\npanel has no accessible name. Render something wired to ",[391,982,976],{},", because the\nslot replaces the default ×. With no ",[391,985,769],{}," and no ",[391,988,943],{}," slot there is no\nheader at all, and the × floats over the top corner of the body, as on the\ndialog.",[847,991,992],{},[387,993,994,997,998,705],{},[391,995,996],{},"#close"," is gone; a custom close control lives inside ",[391,999,1000],{},"#header",[900,1002,1004],{"id":1003},"extent-auto-and-fullscreen","Extent, auto and fullscreen",[387,1006,1007,1011],{},[405,1008,1009],{"href":817},[391,1010,820],{}," is the panel's extent along its own axis, not a width.",[758,1013],{"name":1014},"BbOffCanvas\u002FSizes",[387,1016,1017,1018,1020,1021,1023,1024,1020,1026,1028,1029,1032],{},"On a ",[391,1019,802],{}," or ",[391,1022,833],{}," panel that is the width; on ",[391,1025,841],{},[391,1027,837],{}," it is the\nheight. The same ",[391,1030,1031],{},"size=\"lg\""," is 512px across on one and 512px tall on the other,\nwhich is the most common misreading of this prop.",[387,1034,1035,1036,1039,1040,1043,1044,1047,1048,1051],{},"The presets run from ",[391,1037,1038],{},"xs"," (320px) to ",[391,1041,1042],{},"2xl"," (672px), and ",[391,1045,1046],{},"sm"," (384px) is the\ndefault. ",[391,1049,1050],{},"auto"," sizes the panel to its content, which is what makes a\ncontent-sized sheet possible. A per-breakpoint map is the only form that reacts\nto a live resize.",[847,1053,1055,1066],{"title":1054},"preset widths",[387,1056,1057,1058,1061,1062,1065],{},"The preset values changed between v2 and v3 here too, as silently. v2\nshipped ",[391,1059,1060],{},"{ sm: 384, md: 652, lg: 896 }",", so a ",[391,1063,1064],{},"size=\"md\""," panel is now roughly\n200px narrower. Pin the old values if a layout depended on them:",[477,1067,1071],{"className":1068,"code":1069,"language":1070,"meta":397,"style":397},"language-ts shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n    bitboss: { offCanvasDefaultSizes: { md: 652, lg: 896 } },\n});\n","ts",[391,1072,1073,1079,1096,1115],{"__ignoreMap":397},[450,1074,1075],{"class":486,"line":141},[450,1076,1078],{"class":1077},"sLBg1","\u002F\u002F nuxt.config.ts\n",[450,1080,1081,1085,1088,1092],{"class":486,"line":145},[450,1082,1084],{"class":1083},"sHUrx","export",[450,1086,1087],{"class":1083}," default",[450,1089,1091],{"class":1090},"sKwhi"," defineNuxtConfig",[450,1093,1095],{"class":1094},"soyes","({\n",[450,1097,1098,1101,1104,1107,1110,1113],{"class":486,"line":149},[450,1099,1100],{"class":489},"    bitboss: { offCanvasDefaultSizes: { md: ",[450,1102,1103],{"class":496},"652",[450,1105,1106],{"class":489},", lg: ",[450,1108,1109],{"class":496},"896",[450,1111,1112],{"class":489}," } }",[450,1114,624],{"class":1094},[450,1116,1117,1120],{"class":486,"line":177},[450,1118,1119],{"class":1094},"})",[450,1121,1122],{"class":489},";\n",[387,1124,1125,1131,1132,1135],{},[405,1126,1128],{"href":1127},"\u002Fen\u002Fcomponents\u002Fbb-off-canvas\u002Fapi#prop-fullscreen",[391,1129,1130],{},"fullscreen"," covers the whole viewport, edge to edge, unlike the dialog's\nmargin; ",[391,1133,1134],{},"fullscreen=\"mobile\""," does that only below the mobile breakpoint. That\nis the usual answer for a detail panel that should take the whole screen on a\nphone.",[446,1137,1139],{"id":1138},"draggable",[450,1140,1141],{},"Draggable sheets",[387,1143,1144,1149],{},[405,1145,1147],{"href":1146},"\u002Fen\u002Fcomponents\u002Fbb-off-canvas\u002Fapi#prop-draggable",[391,1148,1138],{}," lets someone drag the panel toward its edge to dismiss it, and puts\na grab handle on the inner edge.",[758,1151],{"name":1152},"BbOffCanvas\u002FBottomSheet",[387,1154,1155,1156,1158,1159,1161,1162,1167],{},"A draggable, ",[391,1157,1050],{},"-sized ",[391,1160,837],{}," panel is the canonical mobile sheet, and it\nis exactly what an adaptive\n",[405,1163,1165],{"href":1164},"\u002Fen\u002Fcomponents\u002Fbb-dialog#mobile-sheet",[391,1166,288],{}," becomes on a phone.",[387,1169,1170,1171,1177,1178,1183],{},"Three rules govern the gesture. Dragging about 50px toward the edge dismisses\nit; a shorter drag springs back. On\na sheet with a scrollable body the drag hands off to native scrolling first, so\nscrolling a long list never closes it by accident. And ",[405,1172,1174],{"href":1173},"\u002Fen\u002Fcomponents\u002Fbb-off-canvas\u002Fapi#prop-persistent",[391,1175,1176],{},"persistent"," or\n",[405,1179,1181],{"href":1180},"\u002Fen\u002Fcomponents\u002Fbb-off-canvas\u002Fapi#prop-preventClose",[391,1182,687],{}," win: the drag plays the deny nudge and springs back.",[387,1185,1186,1187,1190],{},"Content with its own drag, such as a slider, opts out with a ",[391,1188,1189],{},"data-bb-no-drag","\nattribute. A gesture that starts inside it never moves the panel.",[387,1192,1193,1194,1196],{},"Dragging is a convenience, never the only way out. The close button, the\nbackdrop and ",[391,1195,776],{}," all remain.",[900,1198,1200],{"id":1199},"snap-points",[450,1201,1202],{"id":1199},"Snap points",[387,1204,1205,1206,1208,1209,1214,1215,1218,1219,705],{},"A draggable ",[391,1207,837],{}," sheet can rest at more than one height. List the stops in\n",[405,1210,1212],{"href":1211},"\u002Fen\u002Fcomponents\u002Fbb-off-canvas\u002Fapi#prop-snapPoints",[391,1213,1199],{},", as fractions\nof the screen or ",[391,1216,1217],{},"'Npx'",", and bind the current one with ",[391,1220,1221],{},"v-model:snap",[758,1223],{"name":1224},"BbOffCanvas\u002FSnapPoints",[399,1226,1227,1233,1239,1249],{},[402,1228,1229,1232],{},[646,1230,1231],{},"It opens at the first stop",", and a release moves at most one stop, the way\nthe flick went. Only a drag below the first stop closes it.",[402,1234,1235,1238],{},[646,1236,1237],{},"The body scrolls only at the top stop","; lower down, a drag moves the sheet.\nThe footer stays on screen at every stop.",[402,1240,1241,1244,1245,1248],{},[646,1242,1243],{},"The grabber is a slider",": arrow keys, Home and End move between stops, and\na tap moves to the next one. Setting the model (",[391,1246,1247],{},"snap = 1"," above) moves it too.",[402,1250,1251,1252,1256,1257,439,1259,1261],{},"An adaptive ",[405,1253,1254],{"href":1164},[391,1255,288],{}," passes\n",[391,1258,1199],{},[391,1260,1221],{}," to its phone sheet.",[446,1263,1264],{"id":656},[450,1265,1266],{},"Stacks",[387,1268,1269,1270,1275,1276,705],{},"Panels sharing a ",[405,1271,1273],{"href":1272},"\u002Fen\u002Fcomponents\u002Fbb-off-canvas\u002Fapi#prop-stack",[391,1274,656],{}," name step back behind one another as you drill in.\nHere each member row opens the one detail panel with its person as ",[391,1277,612],{},[758,1279],{"name":1280},"BbOffCanvas\u002FMasterDetail",[387,1282,1283,1284,1290,1291,1294],{},"Opening a child shifts its parent inward by ",[405,1285,1287],{"href":1286},"\u002Fen\u002Fcomponents\u002Fbb-off-canvas\u002Fapi#prop-stackGap",[391,1288,1289],{},"stack-gap"," (60px by default),\nleaving a band of it visible. Closing the child brings it forward again. That\nband only appears for panels sharing a name ",[646,1292,1293],{},"and"," a side, so a drawer that\ndoes not peek usually differs in one of the two.",[387,1296,1297,1298,1301],{},"Every open panel dims the one beneath it; only the bottom one blurs. Set\n",[391,1299,1300],{},"--bb-overlay-above: transparent"," to keep a single dim.",[387,1303,1304,1305,1310],{},"This is the opposite of the dialog's stack, which replaces. Pick the drawer's\nbehaviour when the trail should stay visible, and\n",[405,1306,1308],{"href":1307},"\u002Fen\u002Fcomponents\u002Fbb-dialog#flow",[391,1309,288],{},"'s when the flow should read as one\nsurface whose content swaps.",[446,1312,1314],{"id":1313},"dismissal",[450,1315,1316],{},"Controlling dismissal",[387,1318,1319,1323,1324,1326,1327,1329],{},[405,1320,1321],{"href":1173},[391,1322,1176],{}," stops the backdrop, ",[391,1325,776],{}," ",[646,1328,1293],{}," a drag from closing the panel.\nThe × still closes it.",[758,1331],{"name":1332},"BbOffCanvas\u002FPersistent",[387,1334,1335,1336,1342,1343,1345],{},"Pair it with ",[405,1337,1339],{"href":1338},"\u002Fen\u002Fcomponents\u002Fbb-off-canvas\u002Fapi#prop-hideClose",[391,1340,1341],{},"hide-close"," when the choice really has to be made from the footer,\nand keep a visible Cancel there, wired to the footer scope's ",[391,1344,976],{},", which still\nworks while the panel is persistent.",[387,1347,727,1348,1350,1351,1354,1355,1357,1358,652,1360,1363,1364,1177,1367,1369,1370,1374,1375,1378,1379,1382,1383,1385,1386,1389,1390,1392],{},[391,1349,220],{}," inside the panel guards a save by itself: while its ",[391,1352,1353],{},"@submit","\npromise runs, the fields are read-only and the panel refuses the ×, ",[391,1356,776],{},",\nthe backdrop, a drag and the footer scope's ",[391,1359,976],{},[405,1361,677],{"href":1362},"\u002Fen\u002Fcomponents\u002Fbb-dialog#dismissal"," does. Close with ",[391,1365,1366],{},"complete",[391,1368,630],{}," once the save resolves.\n",[405,1371,1372],{"href":1180},[391,1373,687],{}," is for\nthe rest: ",[391,1376,1377],{},"true"," refuses every user close for work that is not a form submit,\n",[391,1380,1381],{},"false"," keeps the panel closable even mid-save. Beside a ",[391,1384,220],{},", bind another\naction's flag as ",[391,1387,1388],{},":prevent-close=\"deleting || undefined\"",": a plain ",[391,1391,1381],{},"\nwhile idle would switch the form's lock off.",[387,1394,1395,1401],{},[405,1396,1398],{"href":1397},"\u002Fen\u002Fcomponents\u002Fbb-off-canvas\u002Fapi#prop-focusTarget",[391,1399,1400],{},"focus-target"," is a CSS selector and chooses only where focus starts; without it\nthe first tabbable element receives it.",[847,1403,1405,1421,1436],{"title":1404},"show-close → hide-close",[387,1406,1407,1408,1411,1412,1414,1415,1417,1418,1420],{},"The close-button prop inverted in v3 here as well. v2's ",[391,1409,1410],{},"show-close"," (default\n",[391,1413,1377],{},") is v3's ",[391,1416,1341],{}," (default ",[391,1419,1381],{},"):",[477,1422,1424],{"className":873,"code":1423,"language":875,"meta":397,"style":397},"- \u003CBbOffCanvas v-model=\"open\" direction=\"right\" :show-close=\"false\" \u002F>\n+ \u003CBbOffCanvas v-model=\"open\" side=\"right\" hide-close \u002F>\n",[391,1425,1426,1431],{"__ignoreMap":397},[450,1427,1428],{"class":486,"line":141},[450,1429,1430],{},"- \u003CBbOffCanvas v-model=\"open\" direction=\"right\" :show-close=\"false\" \u002F>\n",[450,1432,1433],{"class":486,"line":145},[450,1434,1435],{},"+ \u003CBbOffCanvas v-model=\"open\" side=\"right\" hide-close \u002F>\n",[387,1437,1438,1439,859,1442,1444,1445,1447,1448,1450],{},"A leftover ",[391,1440,1441],{},":show-close=\"false\"",[391,1443,862],{}," and the × comes back on the\npanel built without one. ",[391,1446,897],{}," rewrites it, along with the ",[391,1449,855],{},"\non the same line.",[446,1452,1454],{"id":1453},"styling",[450,1455,1456],{},"Padding and parts",[387,1458,1459,1460,1463,1464,439,1467,1470,1471,1474,1475,705],{},"Spacing reaches the panel through ",[391,1461,1462],{},"--bb-panel-p"," (16px), split into the local\npair ",[391,1465,1466],{},"--px",[391,1468,1469],{},"--py"," on ",[391,1472,1473],{},".bb-offcanvas",". Set them on the component's class,\nnever on ",[391,1476,1477],{},":root",[477,1479,1483],{"className":1480,"code":1481,"language":1482,"meta":397,"style":397},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".my-drawer {\n    --px: 24px;\n    --py: 10px;\n}\n\n\u002F* Per-part: scope --py to the part, and the derived spacings follow. *\u002F\n.my-drawer .bb-offcanvas__header {\n    --py: 10px;\n}\n","css",[391,1484,1485,1493,1509,1523,1528,1532,1537,1546,1558],{"__ignoreMap":397},[450,1486,1487,1490],{"class":486,"line":141},[450,1488,1489],{"class":496},".my-drawer",[450,1491,1492],{"class":489}," {\n",[450,1494,1495,1498,1501,1504,1507],{"class":486,"line":145},[450,1496,1497],{"class":1094},"    --px",[450,1499,1500],{"class":489},": ",[450,1502,1503],{"class":496},"24",[450,1505,1506],{"class":1083},"px",[450,1508,1122],{"class":489},[450,1510,1511,1514,1516,1519,1521],{"class":486,"line":149},[450,1512,1513],{"class":1094},"    --py",[450,1515,1500],{"class":489},[450,1517,1518],{"class":496},"10",[450,1520,1506],{"class":1083},[450,1522,1122],{"class":489},[450,1524,1525],{"class":486,"line":177},[450,1526,1527],{"class":489},"}\n",[450,1529,1530],{"class":486,"line":181},[450,1531,531],{"emptyLinePlaceholder":530},[450,1533,1534],{"class":486,"line":185},[450,1535,1536],{"class":1077},"\u002F* Per-part: scope --py to the part, and the derived spacings follow. *\u002F\n",[450,1538,1539,1541,1544],{"class":486,"line":225},[450,1540,1489],{"class":496},[450,1542,1543],{"class":496}," .bb-offcanvas__header",[450,1545,1492],{"class":489},[450,1547,1548,1550,1552,1554,1556],{"class":486,"line":229},[450,1549,1513],{"class":1094},[450,1551,1500],{"class":489},[450,1553,1518],{"class":496},[450,1555,1506],{"class":1083},[450,1557,1122],{"class":489},[450,1559,1560],{"class":486,"line":233},[450,1561,1527],{"class":489},[387,1563,1564,1565,620,1568,620,1571,620,1574,624,1577,620,1580,620,1583,439,1586,1589,1590,620,1593,620,1596,620,1599,624,1602,620,1605,620,1608,1611],{},"The parts are ",[391,1566,1567],{},".bb-offcanvas__header",[391,1569,1570],{},"__title",[391,1572,1573],{},"__description",[391,1575,1576],{},"__close",[391,1578,1579],{},"__content",[391,1581,1582],{},"__body-content",[391,1584,1585],{},"__footer",[391,1587,1588],{},"__handle",". The root carries its\nstate as modifier classes: ",[391,1591,1592],{},"--open",[391,1594,1595],{},"--visible",[391,1597,1598],{},"--fullscreen",[391,1600,1601],{},"--dragging",[391,1603,1604],{},"--covered",[391,1606,1607],{},"--has-handle",[391,1609,1610],{},"--no-header",", and one per side. Those are the\nhooks to target, and ordinary CSS reaches them because the panel is a real\nelement in your DOM.",[387,1613,1614,1615,1620,1621,620,1624,620,1626,624,1628,620,1630,620,1632,439,1635,705],{},"Each part is also a ",[405,1616,1617],{"href":128},[391,1618,1619],{},"pt"," key: ",[391,1622,1623],{},"root",[391,1625,943],{},[391,1627,769],{},[391,1629,955],{},[391,1631,976],{},[391,1633,1634],{},"content",[391,1636,915],{},[387,1638,1639,1640,1643,1644,1650],{},"A closed panel is ",[391,1641,1642],{},"display: none"," once its close transition ends, so a closed\ndrawer measures zero and adds nothing to the page width. Measure the panel in\n",[405,1645,1647],{"href":1646},"\u002Fen\u002Fcomponents\u002Fbb-off-canvas\u002Fapi#event-shown",[391,1648,1649],{},"@shown",", not before it opens.",[387,1652,1653,1654,1657,1658,1661,1662,1665],{},"Three knobs still carry the dialog's name, and they are not typos:\n",[391,1655,1656],{},"--dialog-gap"," is the body-to-footer rhythm, ",[391,1659,1660],{},"--dialog-title-fs"," the title's\nsize and ",[391,1663,1664],{},"--dialog-title-fw"," its weight.",[847,1667,1669],{"title":1668},"compact and close token",[387,1670,1671,1674,1675,1678,1679,1681,1682,1684,1685,1688,1689,1693],{},[391,1672,1673],{},".bb-offcanvas--compact"," went with the ",[391,1676,1677],{},"compact"," prop. A leftover ",[391,1680,1677],{},"\nlands in ",[391,1683,862],{}," and changes nothing; a development build warns that it was\nremoved. Delete\n",[391,1686,1687],{},"--bb-dialog-close"," rather than porting it. The full mapping is on\n",[405,1690,1692],{"href":1691},"\u002Fen\u002Fcomponents\u002Fbb-dialog#styling","BbDialog → Padding and the title"," and applies\nhere unchanged.",[1695,1696,1697],"style",{},"html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .sKwhi, html code.shiki .sKwhi{--shiki-default:#622CBC;--shiki-dark:#DBB7FF}html pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}",{"title":397,"searchDepth":149,"depth":149,"links":1699},[1700,1701,1702,1706,1709,1710,1711],{"id":448,"depth":145,"text":452},{"id":733,"depth":145,"text":736},{"id":787,"depth":145,"text":790,"children":1703},[1704,1705],{"id":902,"depth":149,"text":903},{"id":1003,"depth":149,"text":1004},{"id":1138,"depth":145,"text":1141,"children":1707},[1708],{"id":1199,"depth":149,"text":1202},{"id":656,"depth":145,"text":1266},{"id":1313,"depth":145,"text":1316},{"id":1453,"depth":145,"text":1456},"The panel that slides in from an edge, sized by extent rather than width.","md",{},[1716,1717,1718,1719,1720,1721,1722],{"id":448,"title":452},{"id":733,"title":736},{"id":787,"title":790},{"id":1138,"title":1141},{"id":656,"title":1266},{"id":1313,"title":1316},{"id":1453,"title":1456},{"title":300,"description":1712},"components\u002Fbb-off-canvas","HelKigOcEW9MQPK4O6jVTy8hTZhfXYqvB_j83xpyMyc",{"name":300,"slug":1727,"group":276,"description":1728,"entrypoint":1729,"docs":1730,"props":1733,"models":1832,"events":1836,"slots":1861,"exposed":1881,"pt":1882,"validated":377,"migration":1903},"bb-off-canvas","Shows a side panel; also the v-bb-off-canvas directive.","bitboss-ui",{"contract":1731,"source":1732},"ai\u002FBbOffCanvas.md","ai\u002Fsource\u002FBbOffCanvas.md",[1734,1740,1743,1747,1751,1755,1759,1763,1766,1769,1773,1776,1781,1784,1789,1793,1796,1801,1806,1810,1815,1818,1824,1827],{"name":1735,"type":1736,"required":1737,"default":377,"description":1738,"note":1739,"demo":733},"defaultData","Record\u003Cstring, any> | undefined",false,"What `data` is when an opening passes none (a create): an object, copied at once, so inputs bind `data.x` with no guard. An opening's data lays over it (`{ ...defaultData, ...row }`, one level). `reset()` restores its keys but keeps an edit's `id`; a close restores it.","The fresh copy a create gets as `data`, the base an opening's row is laid over, and what every close restores. `reset()` (a filters Reset) restores the keys it declares and keeps the rest.",{"name":955,"type":1741,"required":1737,"default":377,"description":1742,"note":377,"demo":377},"string | undefined","One short line under the title, muted (the shadcn `DialogDescription` shape), and the only element `aria-describedby` points at. Keep it to a sentence; anything longer belongs in the body.",{"name":1138,"type":1744,"required":1737,"default":1381,"description":1745,"note":1746,"demo":1138},"boolean | undefined","Drag-to-dismiss: a ~50px swipe toward the exit edge (also from the body once it is scrolled to its edge), with a grab handle as the cue. A gesture that starts inside `data-bb-no-drag` never drags the panel.","Dragging about 50px toward the edge dismisses; a shorter drag springs back. On a top or bottom sheet the gesture hands off to native scrolling first, so scrolling a long body never closes it.",{"name":1748,"type":1744,"required":1737,"default":1381,"description":1749,"note":1750,"demo":787},"eager","Keep the body mounted while closed, from before the first opening. Without it the body mounts per opening and unmounts after `@hidden`. `data` still clears while closed, so an eager body guards its reads.","The body renders lazily otherwise — nothing inside exists until the first open, which is what a test or a measurement runs into.",{"name":1752,"type":1741,"required":1737,"default":377,"description":1753,"note":1754,"demo":1313},"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.",{"name":1130,"type":1756,"required":1737,"default":377,"description":1757,"note":1758,"demo":787},"boolean | \"mobile\" | undefined","Display the offcanvas fullscreen. Use `'mobile'` to restrict fullscreen to small devices.","Covers the whole viewport, edge to edge, unlike the dialog. `fullscreen=\"mobile\"` is the usual pairing for a right-hand detail panel: sized on desktop, whole screen below the mobile breakpoint.",{"name":1760,"type":1744,"required":1737,"default":1381,"description":1761,"note":1762,"demo":1313},"hideClose","Hides the default close (×) button in the header (e.g. for a `persistent` drawer you don't want dismissible — the × otherwise still closes a persistent drawer).","Inverted from v2's `show-close`, which defaulted to `true`; a leftover `:show-close=\"false\"` falls through to `$attrs` and the × comes back. A headerless panel floats its × over the body corner, as the dialog does, and `hide-close` removes that one too.",{"name":458,"type":1741,"required":1737,"default":377,"description":1764,"note":1765,"demo":448},"Names the panel for `v-bb-off-canvas=\"'filters'\"` and `useBbOffCanvasContext`, found nearest to the trigger, so two pages may reuse an id. Also the DOM `id`: one panel per id.","One panel per id: it is also the DOM id. Many rows open the same panel with their own `data` rather than rendering one each.",{"name":1767,"type":1744,"required":1737,"default":1381,"description":1768,"note":377,"demo":377},"modelValue","Used by v-model to open \u002F close the panel. A panel with no `v-model` starts closed.",{"name":1770,"type":1744,"required":1737,"default":1381,"description":1771,"note":1772,"demo":448},"navigation","Syncs the open state with the URL: opening writes `?\u003CqueryKey>=true`, closing removes it, a URL with the key opens the panel on load, and Back closes it (refused whenever Escape is). Template panels only; keep a record id in your own query.","Writes `?offcanvas=true` by default, so it never collides with a dialog's `?dialog=true`. Back closes the panel like `Escape`.",{"name":1176,"type":1744,"required":1737,"default":1381,"description":1774,"note":1775,"demo":1313},"Blocks closing by an outside click, Escape or drag-to-dismiss. The header close (×) STILL closes a persistent drawer, the documented escape hatch: add `hideClose` to remove it, or use `preventClose` to block every dismissal. Programmatic close still works.","Blocks the backdrop, Escape and the drag. The × still closes — that is the escape hatch — so pair it with `hideClose` when the choice must be made from the footer, and keep a visible Cancel there.",{"name":1777,"type":1744,"required":1737,"default":1778,"description":1779,"note":1780,"demo":1313},"preventClose","`undefined` (follows a saving form inside)","Refuses every user close (backdrop, Escape, drag, the ✕, the slots' `close`) with the deny nudge; `v-model` still closes. Unset: locked while a `BbForm` inside saves (an async `@submit`). `true`: always; `false`: never, not even mid-save. Beside a form: `busy || undefined`.","Refuses every user close, the drag and the slots' `close` included. Rarely written: unset, the panel already locks itself while a `BbForm` inside it saves; `false` keeps it closable even mid-save. Close with `complete(value)` or `hide()` (or `v-model`) when the work is done.",{"name":1619,"type":1782,"required":1737,"default":377,"description":1783,"note":377,"demo":377},"PtMap\u003CBbOffCanvasPtPart, BbOffCanvasPtState> | undefined","Passthrough, object form: the same keys as the `pt:*` attributes without the prefix. See the `pt:\u003Cpart>` row.",{"name":1785,"type":1786,"required":1737,"default":377,"description":1787,"note":377,"demo":1788},"pt:\u003Cpart>","PtValue | undefined","Passthrough, attribute form: one attribute per part, `pt:\u003Cpart>`, and per part and state, `pt:\u003Cpart>:\u003Cstate>`. Parts: `close`, `content`, `description`, `footer`, `header`, `root`, `title`. States: `fullscreen`, `open`.","passthrough",{"name":1790,"type":1741,"required":1737,"default":1791,"description":1792,"note":377,"demo":377},"queryKey","\"offcanvas\"","The query key `navigation` writes.",{"name":1794,"type":1744,"required":1737,"default":1381,"description":1795,"note":377,"demo":377},"replace","With `navigation`, replaces the history entry instead of pushing one, so Back leaves the page instead of closing the panel.",{"name":798,"type":1797,"required":1737,"default":1798,"description":1799,"note":1800,"demo":787},"Responsive\u003C\"left\" | \"top\" | \"bottom\" | \"right\"> | undefined","\"left\"","Which viewport edge the offcanvas docks to (and slides in from). Also a per-breakpoint map (e.g. `{ default: 'bottom', md: 'right' }`), resolved when the panel opens: an open panel keeps its side through a resize.","Called `direction` in v2, and the rename is silent: a leftover `direction` falls into `$attrs` and the panel docks left. It also decides the drag axis, which dimension `size` means, and which edge a stacked parent peeks past.",{"name":820,"type":1802,"required":1737,"default":1803,"description":1804,"note":1805,"demo":787},"Responsive\u003COffCanvasSize> | undefined","\"sm\"","The panel's extent along its axis: a left\u002Fright panel's width (shrinks with a narrower viewport) or a top\u002Fbottom one's height (capped at the viewport). A preset `'xs'`–`'2xl'`, `'auto'`, a CSS size, a pixel number, or a per-breakpoint map (e.g. `{ default: 'sm', lg: 'lg' }`).","The extent along the panel's own axis, not a width: the same `lg` is 512px across on a right panel and 512px tall on a bottom one. `auto` is `fit-content`. The v3 presets are narrower than v2's `{ sm: 384, md: 652, lg: 896 }` and nothing warns — pin them with `offCanvasDefaultSizes` if a layout assumed them.",{"name":1807,"type":1808,"required":1737,"default":377,"description":1809,"note":377,"demo":377},"snap","BbSnapPoint | undefined","The snap stop the sheet rests at, written as one of the `snapPoints` entries (Q71.8). Updated once the sheet settles on another stop; setting it moves the sheet there. Unbound, every opening starts at the first stop.",{"name":1811,"type":1812,"required":1737,"default":377,"description":1813,"note":1814,"demo":1138},"snapPoints","BbSnapPoint[] | undefined","Heights a draggable bottom sheet rests at, smallest first: a fraction of the screen (`0.5`, `1` = full) or `'240px'`. The first is the opening height; `v-model:snap` holds the stop. Ignored on other sides and `fullscreen` (guide § Snap points).","A draggable `bottom` sheet only. It opens at the first stop, a release moves one stop at most, and only a drag below the first stop closes.",{"name":656,"type":1741,"required":1737,"default":377,"description":1816,"note":1817,"demo":656},"Name of the stack this drawer belongs to. Drawers sharing the same `stack` value step back behind one another as later ones open; drawers in different stacks never affect each other. When omitted, the drawer stacks with nothing.","Panels sharing a name step back and leave a peeking band — the opposite of `BbDialog`'s stack, which hides the member underneath. The band only appears when the panels also share a `side`.",{"name":1819,"type":1820,"required":1737,"default":1821,"description":1822,"note":1823,"demo":656},"stackGap","number | undefined","60","Pixels each stacked parent drawer shifts inward when a child opens on top, leaving a peeking band of the parent visible.","How much of the parent stays visible behind a child. Every open panel dims the one beneath it and only the bottom one blurs; set `--bb-overlay-above: transparent` to keep a single dim.",{"name":769,"type":1741,"required":1737,"default":377,"description":1825,"note":1826,"demo":787},"Title text announced to assistive technologies. If omitted, no header is rendered and accessibility must be handled manually.","The accessible name, not just a heading: it wires `aria-labelledby`. Without it and without a `header` slot there is no header at all, and the × floats over the body corner, as on `BbDialog`.",{"name":1828,"type":1820,"required":1737,"default":1829,"description":1830,"note":1831,"demo":787},"transitionDuration","250","Controls the duration of the open and close animations.","Times both the slide and when `hidden` fires. Reopening inside that window keeps the panel open rather than snapping it shut.",[1833,1835],{"name":1767,"type":1744,"note":1834,"demo":448},"For a panel your state opens; a button opens one by `id` with `v-bb-off-canvas`. Bound, it wins over the directive and `show()`. Vetoing a close from `@hide` is not the way to keep it open — that is `persistent`.",{"name":1807,"type":1808,"note":377,"demo":377},[1837,1841,1846,1850,1853,1857],{"name":1838,"signature":1839,"description":1840,"note":377,"demo":377},"hidden","(): void","Emitted after the close transition completes and the offcanvas is fully dismissed.",{"name":1842,"signature":1843,"description":1844,"note":1845,"demo":448},"hide","(result: BbDialogResult): void","Emitted as soon as the panel starts to close (model becomes false), with the opening's result: the same object its promise settles with, `{ completed: true, value }` or `{ completed: false, reason }` (Q73.6).","Fires as the close starts, with the opening's result, a swipe included: `{ completed: true, value }` or `{ completed: false, reason }`. To tell a save from a cancel, close a save with `complete()`, not by writing the model: on a `v-model` panel too it reports `{ completed: true }`.",{"name":1847,"signature":1839,"description":1848,"note":1849,"demo":733},"show","Emitted as soon as the user triggers the open action (model becomes true).","Fires as the panel starts to open, before the slide, with the opening's `data` already set. Bind the fields to `data` instead of seeding a draft here: it is a fresh copy every opening, so closing without `complete` already discards.",{"name":1851,"signature":1839,"description":1852,"note":377,"demo":377},"shown","Emitted once the open transition has run (symmetric with `hidden`): the panel is settled, so code that measures or anchors to its content sees the final layout. Not emitted for a panel closed before it finished opening.",{"name":1854,"signature":1855,"description":1856,"note":377,"demo":377},"update:modelValue","(value: boolean): void","Emitted with the new value whenever `v-model` changes.",{"name":1858,"signature":1859,"description":1860,"note":377,"demo":377},"update:snap","(value: BbSnapPoint | undefined): void","Emitted with the new value whenever `v-model:snap` changes.",[1862,1867,1870,1874,1878],{"name":1863,"type":1864,"description":1865,"note":1866,"demo":787},"default","BbOffCanvasDefaultSlotProps","Primary body content of the off-canvas panel, rendered in the scrollable body area.","The only region that scrolls, and on a draggable top or bottom panel it is also what absorbs a drag until it reaches its own edge.",{"name":955,"type":1868,"description":1869,"note":377,"demo":377},"BbOffCanvasDescriptionSlotProps","Replaces the description text under the title. Renders the header even when `title` and `description` are unset — a slotted description is a description, the same rule `#title` follows.",{"name":915,"type":1871,"description":1872,"note":1873,"demo":787},"BbOffCanvasFooterSlotProps","Content rendered in the panel footer, below the body area. Typically used for action buttons.","Stays pinned while the body scrolls, and lays its actions out in a row at the end (wrapping on a narrow sheet); `me-auto` pushes one to the start. One primary action — Apply, Save, Assign — with its counterweight beside it. The scope (`BbOffCanvasFooterSlotProps`) carries `data`, `complete(value)` (closes with a result), `reset()` (back to `defaultData`) and `close`, which closes like the ×: it still works while `persistent` blocks the backdrop and Escape, and is refused under `preventClose`.",{"name":943,"type":1875,"description":1876,"note":1877,"demo":787},"BbOffCanvasHeaderSlotProps","Replaces the entire off-canvas header section (title + close button). Maintains accessibility wiring via the provided props.","Providing it renders a header even with no `title`. It replaces the ×, so render your own control wired to `close`, and put `titleId` on your heading or `aria-labelledby` points at nothing. This is where a v2 `#close` goes; a v2 description is the `description` prop or `#description` slot.",{"name":769,"type":1879,"description":1880,"note":377,"demo":377},"BbOffCanvasTitleSlotProps","Replaces the default title text inside the header. Remains linked to the panel through `aria-labelledby`. Providing this slot renders the header even when `title` is unset — a slotted title is a title.",[],{"parts":1883,"states":1898},[1884,1886,1888,1890,1892,1894,1896],{"name":1623,"description":1885},"The `\u003Cdialog>` — the sheet itself (no separate `panel`). The backdrop is `::backdrop`: CSS, not `pt`.",{"name":943,"description":1887},"The header band.",{"name":769,"description":1889},"The title line inside the header. Not rendered when a `#header` slot replaces the header.",{"name":955,"description":1891},"The description line inside the header. Not rendered when a `#header` slot replaces the header.",{"name":1634,"description":1893},"The scrolling body. It carries the body's padding (`--px`, `--py`, `--dialog-gap`), so `pt:content=\"px-8\"` or `[--py:20px]` sets it.",{"name":915,"description":1895},"The footer band.",{"name":976,"description":1897},"The ✕.",[1899,1901],{"name":1130,"description":1900},"Component-wide: the panel fills the viewport (square, edge to edge) — 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`. Reachable from any adaptive component through `offCanvasProps: { fullscreen: true, 'pt:root:fullscreen': '…' }`.",{"name":448,"description":1902},"Component-wide: the sheet is open (follows `v-model`).",{"removed":1904,"renamed":1919},[1905,1911,1915],{"name":1677,"surface":1906,"replacedBy":377,"hint":377,"since":1907,"migration":1908,"silent":530,"fix":1909},"prop","3.0.0-beta.15","ai\u002Fguides\u002Fmigration\u002Fcomponents\u002Fbb-offcanvas.md",{"kind":1910},"manual",{"name":855,"surface":1906,"replacedBy":798,"hint":377,"since":1912,"migration":1908,"silent":530,"fix":1913},"3.0.0-alpha.1",{"kind":1914},"rename",{"name":1916,"surface":1906,"replacedBy":1760,"hint":377,"since":1912,"migration":1908,"silent":530,"fix":1917},"showClose",{"kind":1918},"invert",[1920,1922],{"from":855,"to":798,"surface":1906,"since":1912,"migration":1908,"fix":1921},{"kind":1914},{"from":1916,"to":1760,"surface":1906,"since":1912,"migration":1908,"fix":1923},{"kind":1918},1793055142461]