[{"data":1,"prerenderedAt":1396},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":124,"api-none":352,"page-en-\u002Fcomponents\u002Fbb-off-canvas":353,"pt-showcase-BbOffCanvas":1197},{"\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":275,"body":355,"component":275,"description":1184,"extension":1185,"group":254,"meta":1186,"navigation":1063,"order":203,"path":276,"sections":1187,"seo":1194,"stem":1195,"__hash__":1196},"docs_en\u002Fcomponents\u002Fbb-off-canvas.md",{"type":356,"value":357,"toc":1173},"minimark",[358,409,424,432,442,446,453,468,474,484,487,490,505,508,526,547,566,577,582,585,600,612,615,634,653,677,681,686,689,707,726,740,800,810,816,821,824,839,849,855,861,867,870,881,884,893,899,910,913,920,925,931,952,967,982,988,1009,1095,1139,1150,1169],[359,360,361,369],"when",{},[362,363,364,365,368],"p",{},"Reach for ",[366,367,275],"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.",[370,371,373],"template",{"v-slot:else":372},"",[374,375,376,385,392,399,406],"ul",{},[377,378,379,384],"li",{},[380,381,382],"a",{"href":36},[366,383,266],{},": it is one task the user must finish\nbefore anything else",[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 yes\u002Fno",[377,407,408],{},"A page: the drawer has grown tabs, a list and sub-navigation",[362,410,411,412,414,415,419,420,423],{},"Underneath, ",[366,413,275],{}," and ",[380,416,417],{"href":36},[366,418,266],{}," are the\nsame machine: the same ",[366,421,422],{},"v-model",", the same slots, the same events, the same\ndismissal 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.",[425,426,428],"h2",{"id":427},"task",[429,430,431],"span",{},"Filters beside the page",[362,433,434,435,437,438,441],{},"Keep filter state in a draft, then apply it from the footer. Bind the panel to\n",[366,436,422],{},"; there is no ",[366,439,440],{},"open()"," to call.",[443,444],"demo",{"name":445},"BbOffCanvas\u002FFilters",[362,447,448,449,452],{},"Pass ",[366,450,451],{},"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.",[362,454,455,456,459,460,462,463,467],{},"The panel dismisses itself on the ×, on ",[366,457,458],{},"Escape"," and on a backdrop click. Focus,\n",[366,461,458],{}," and layering behave exactly as they do on the dialog, and they are\ndescribed once on\n",[380,464,466],{"href":465},"\u002Fen\u002Fcomponents\u002Fbb-dialog#focus","BbDialog → Focus and the top layer",".",[425,469,471],{"id":470},"geometry",[429,472,473],{},"Edge, structure and extent",[362,475,476,479,480,483],{},[366,477,478],{},"side"," picks the edge the panel docks to. ",[366,481,482],{},"left"," is the default.",[443,485],{"name":486},"BbOffCanvas\u002FSides",[362,488,489],{},"The choice is not only cosmetic. The side also decides:",[374,491,492,499,502],{},[377,493,494,495,498],{},"which dimension ",[366,496,497],{},"size"," controls",[377,500,501],{},"which axis the drag runs along",[377,503,504],{},"which edge a stacked parent peeks past",[362,506,507],{},"Every later section on this page refers back to it.",[362,509,510,511,514,515,518,519,522,523,525],{},"Use ",[366,512,513],{},"right"," for detail and filter panels, ",[366,516,517],{},"bottom"," for phone-style sheets, ",[366,520,521],{},"top","\nfor banners and command surfaces. A ",[366,524,517],{}," panel handles the phone's home\nindicator itself, so its last row never lands under it.",[362,527,528,536,537,539,540,543,544,546],{},[529,530,531,532,535],"strong",{},"This prop was called ",[366,533,534],{},"direction"," in v2, and the rename is silent."," A leftover\n",[366,538,534],{}," falls into ",[366,541,542],{},"$attrs"," and the panel docks to ",[366,545,482],{},":",[548,549,553],"pre",{"className":550,"code":551,"language":552,"meta":372,"style":372},"language-diff shiki shiki-themes github-light-high-contrast github-dark-high-contrast","- \u003CBbOffCanvas v-model=\"open\" direction=\"right\" title=\"Filters\" \u002F>\n+ \u003CBbOffCanvas v-model=\"open\" side=\"right\" title=\"Filters\" \u002F>\n","diff",[366,554,555,561],{"__ignoreMap":372},[429,556,558],{"class":557,"line":131},"line",[429,559,560],{},"- \u003CBbOffCanvas v-model=\"open\" direction=\"right\" title=\"Filters\" \u002F>\n",[429,562,563],{"class":557,"line":135},[429,564,565],{},"+ \u003CBbOffCanvas v-model=\"open\" side=\"right\" title=\"Filters\" \u002F>\n",[362,567,568,569,572,573,576],{},"The same rename applies inside ",[366,570,571],{},"off-canvas-props"," on every component that opens\na drawer on mobile. ",[366,574,575],{},"eslint --fix"," rewrites all of them.",[578,579,581],"h3",{"id":580},"header-body-and-footer","Header, body and footer",[362,583,584],{},"The body is the only one of the three regions that scrolls: header and footer\nstay pinned.",[362,586,587,588,591,592,595,596,467],{},"Actions belong in ",[366,589,590],{},"footer",", one primary (Apply, Save, Assign) with its\ncounterweight beside it. That demo also shows the pattern the drawer inherits\nfrom the dialog: the panel edits a draft, which ",[366,593,594],{},"@show"," reseeds on every open.\nThe reasoning is on\n",[380,597,599],{"href":598},"\u002Fen\u002Fcomponents\u002Fbb-dialog#forms","BbDialog → Forms and drafts",[362,601,602,603,605,606,609,610,467],{},"Use the ",[366,604,451],{}," slot when only the title text needs restyling. The ",[366,607,608],{},"header"," slot\nreplaces the whole header instead, and providing it renders a header even with\nno ",[366,611,451],{},[443,613],{"name":614},"BbOffCanvas\u002FCustomHeader",[362,616,617,618,621,622,414,624,627,628,630,631,633],{},"It receives ",[366,619,620],{},"titleId",", ",[366,623,451],{},[366,625,626],{},"close",". Put ",[366,629,620],{}," on your heading, or the\npanel has no accessible name. Render something wired to ",[366,632,626],{},", because the\nslot replaces the default ×.",[362,635,636,645,646,648,649,652],{},[529,637,638,639,641,642,644],{},"With no ",[366,640,451],{}," and no ",[366,643,608],{}," slot, an off-canvas has no close button\nanywhere."," That is the difference from the dialog people walk into. The panel\nis left with ",[366,647,458],{},", the backdrop and whatever you put in the body. That is\nfine for a drawer whose body ends in a Close button. Combined with ",[366,650,651],{},"persistent",",\nit is a trap.",[654,655,656],"migration",{},[362,657,658,661,662,665,666,669,670,673,674,467],{},[366,659,660],{},"description"," and its ",[366,663,664],{},"#description"," slot are gone, and so is the\n",[366,667,668],{},"aria-describedby"," they wired. Put the copy in the body and set the attribute\nyourself if a screen reader needs it. ",[366,671,672],{},"#close"," is gone; a custom close control\nlives inside ",[366,675,676],{},"#header",[578,678,680],{"id":679},"extent-auto-and-fullscreen","Extent, auto and fullscreen",[362,682,683,685],{},[366,684,497],{}," is the panel's extent along its own axis, not a width.",[443,687],{"name":688},"BbOffCanvas\u002FSizes",[362,690,691,692,694,695,697,698,694,700,702,703,706],{},"On a ",[366,693,482],{}," or ",[366,696,513],{}," panel that is the width; on ",[366,699,521],{},[366,701,517],{}," it is the\nheight. The same ",[366,704,705],{},"size=\"lg\""," is 512px across on one and 512px tall on the other,\nwhich is the most common misreading of this prop.",[362,708,709,710,713,714,717,718,721,722,725],{},"The presets run from ",[366,711,712],{},"xs"," (320px) to ",[366,715,716],{},"2xl"," (672px), and ",[366,719,720],{},"sm"," (384px) is the\ndefault. ",[366,723,724],{},"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.",[362,727,728,731,732,735,736,739],{},[529,729,730],{},"The preset values changed between v2 and v3 here too, just as silently."," v2\nshipped ",[366,733,734],{},"{ sm: 384, md: 652, lg: 896 }",", so a ",[366,737,738],{},"size=\"md\""," panel is now roughly\n200px narrower. Pin the old values if a layout depended on them:",[548,741,745],{"className":742,"code":743,"language":744,"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: { offCanvasDefaultSizes: { md: 652, lg: 896 } },\n});\n","ts",[366,746,747,753,770,792],{"__ignoreMap":372},[429,748,749],{"class":557,"line":131},[429,750,752],{"class":751},"sLBg1","\u002F\u002F nuxt.config.ts\n",[429,754,755,759,762,766],{"class":557,"line":135},[429,756,758],{"class":757},"sHUrx","export",[429,760,761],{"class":757}," default",[429,763,765],{"class":764},"sKwhi"," defineNuxtConfig",[429,767,769],{"class":768},"soyes","({\n",[429,771,772,776,780,783,786,789],{"class":557,"line":157},[429,773,775],{"class":774},"suds8","    bitboss: { offCanvasDefaultSizes: { md: ",[429,777,779],{"class":778},"s-5SL","652",[429,781,782],{"class":774},", lg: ",[429,784,785],{"class":778},"896",[429,787,788],{"class":774}," } }",[429,790,791],{"class":768},",\n",[429,793,794,797],{"class":557,"line":161},[429,795,796],{"class":768},"})",[429,798,799],{"class":774},";\n",[362,801,802,805,806,809],{},[366,803,804],{},"fullscreen"," fills the viewport minus the standard page margin, and\n",[366,807,808],{},"fullscreen=\"mobile\""," does that only on small viewports. That is the usual\nanswer for a detail panel that should take the whole screen on a phone.",[425,811,813],{"id":812},"draggable",[429,814,815],{},"Draggable sheets",[362,817,818,820],{},[366,819,812],{}," lets someone flick the panel toward its edge to dismiss it, and puts\na grab handle on the inner edge.",[443,822],{"name":823},"BbOffCanvas\u002FBottomSheet",[362,825,826,827,829,830,832,833,838],{},"A draggable, ",[366,828,724],{},"-sized ",[366,831,517],{}," panel is the canonical mobile sheet, and it\nis exactly what an adaptive\n",[380,834,836],{"href":835},"\u002Fen\u002Fcomponents\u002Fbb-dialog#adaptive",[366,837,266],{}," becomes on a phone.",[362,840,841,842,844,845,848],{},"Three rules govern the gesture. Dragging past a quarter of the panel's extent,\nor releasing with a fast flick, dismisses it; anything shorter 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 ",[366,843,651],{}," or\n",[366,846,847],{},"disabled"," win: the drag plays the deny nudge and springs back.",[362,850,851,852,854],{},"Dragging is a convenience, never the only way out. The close button, the\nbackdrop and ",[366,853,458],{}," all remain.",[425,856,858],{"id":857},"stack",[429,859,860],{},"Stacks",[362,862,863,864,866],{},"Panels sharing a ",[366,865,857],{}," name step back behind one another as you drill in.",[443,868],{"name":869},"BbOffCanvas\u002FMasterDetail",[362,871,872,873,876,877,880],{},"Opening a child shifts its parent inward by ",[366,874,875],{},"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 ",[529,878,879],{},"and"," a side, so a drawer that\ndoes not peek usually differs in one of the two.",[362,882,883],{},"Only the top two open panels keep their dimmed backdrop, which is why a\nthree-deep stack does not read as three layers of dimming.",[362,885,886,887,892],{},"This is the opposite of the dialog's stack, which replaces. Pick the drawer's\nbehaviour when the trail should stay visible, and\n",[380,888,890],{"href":889},"\u002Fen\u002Fcomponents\u002Fbb-dialog#stack",[366,891,266],{},"'s when the flow should read as one\nsurface whose content swaps.",[425,894,896],{"id":895},"dismissal",[429,897,898],{},"Controlling dismissal",[362,900,901,903,904,906,907,909],{},[366,902,651],{}," stops the backdrop, ",[366,905,458],{}," ",[529,908,879],{}," a drag from closing the panel.\nThe × still closes it.",[443,911],{"name":912},"BbOffCanvas\u002FPersistent",[362,914,915,916,919],{},"Pair it with ",[366,917,918],{},"hide-close"," when the choice really has to be made from the footer,\nand keep a visible Cancel there. That pairing matters more here than on the\ndialog, because a headerless panel already has no × of its own.",[362,921,922,924],{},[366,923,847],{}," is the same guard for a busy surface, and it blocks the × as well. It\nguards dismissal only: the fields and buttons inside stay live, so disable them\nyourself while a save is in flight.",[362,926,927,930],{},[366,928,929],{},"focus-target"," is a CSS selector and chooses only where focus starts; without it\nthe first tabbable element receives it.",[362,932,933,936,937,940,941,944,945,947,948,951],{},[529,934,935],{},"The close-button prop inverted in v3 here as well."," v2's ",[366,938,939],{},"show-close","\n(default ",[366,942,943],{},"true",") is v3's ",[366,946,918],{}," (default ",[366,949,950],{},"false","):",[548,953,955],{"className":550,"code":954,"language":552,"meta":372,"style":372},"- \u003CBbOffCanvas v-model=\"open\" direction=\"right\" :show-close=\"false\" title=\"Filters\" \u002F>\n+ \u003CBbOffCanvas v-model=\"open\" side=\"right\" hide-close title=\"Filters\" \u002F>\n",[366,956,957,962],{"__ignoreMap":372},[429,958,959],{"class":557,"line":131},[429,960,961],{},"- \u003CBbOffCanvas v-model=\"open\" direction=\"right\" :show-close=\"false\" title=\"Filters\" \u002F>\n",[429,963,964],{"class":557,"line":135},[429,965,966],{},"+ \u003CBbOffCanvas v-model=\"open\" side=\"right\" hide-close title=\"Filters\" \u002F>\n",[362,968,969,970,539,973,975,976,978,979,981],{},"A leftover ",[366,971,972],{},":show-close=\"false\"",[366,974,542],{}," and the × comes back on the\npanel built without one. ",[366,977,575],{}," rewrites it, along with the ",[366,980,534],{},"\non the same line.",[425,983,985],{"id":984},"styling",[429,986,987],{},"Padding and parts",[362,989,990,991,994,995,414,998,1001,1002,1005,1006,467],{},"Spacing reaches the panel through ",[366,992,993],{},"--bb-panel-p"," (16px), split into the local\npair ",[366,996,997],{},"--px",[366,999,1000],{},"--py"," on ",[366,1003,1004],{},".bb-offcanvas",". Set them on the component's class,\nnever on ",[366,1007,1008],{},":root",[548,1010,1014],{"className":1011,"code":1012,"language":1013,"meta":372,"style":372},"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",[366,1015,1016,1024,1040,1054,1059,1065,1070,1079,1091],{"__ignoreMap":372},[429,1017,1018,1021],{"class":557,"line":131},[429,1019,1020],{"class":778},".my-drawer",[429,1022,1023],{"class":774}," {\n",[429,1025,1026,1029,1032,1035,1038],{"class":557,"line":135},[429,1027,1028],{"class":768},"    --px",[429,1030,1031],{"class":774},": ",[429,1033,1034],{"class":778},"24",[429,1036,1037],{"class":757},"px",[429,1039,799],{"class":774},[429,1041,1042,1045,1047,1050,1052],{"class":557,"line":157},[429,1043,1044],{"class":768},"    --py",[429,1046,1031],{"class":774},[429,1048,1049],{"class":778},"10",[429,1051,1037],{"class":757},[429,1053,799],{"class":774},[429,1055,1056],{"class":557,"line":161},[429,1057,1058],{"class":774},"}\n",[429,1060,1061],{"class":557,"line":165},[429,1062,1064],{"emptyLinePlaceholder":1063},true,"\n",[429,1066,1067],{"class":557,"line":199},[429,1068,1069],{"class":751},"\u002F* Per-part: scope --py to the part, and the derived spacings follow. *\u002F\n",[429,1071,1072,1074,1077],{"class":557,"line":203},[429,1073,1020],{"class":778},[429,1075,1076],{"class":778}," .bb-offcanvas__header",[429,1078,1023],{"class":774},[429,1080,1081,1083,1085,1087,1089],{"class":557,"line":207},[429,1082,1044],{"class":768},[429,1084,1031],{"class":774},[429,1086,1049],{"class":778},[429,1088,1037],{"class":757},[429,1090,799],{"class":774},[429,1092,1093],{"class":557,"line":211},[429,1094,1058],{"class":774},[362,1096,1097,1098,621,1101,621,1104,621,1107,791,1110,414,1113,1116,1117,621,1120,621,1123,621,1126,621,1129,791,1132,621,1135,1138],{},"The parts are ",[366,1099,1100],{},".bb-offcanvas__header",[366,1102,1103],{},"__title",[366,1105,1106],{},"__body",[366,1108,1109],{},"__body-content",[366,1111,1112],{},"__footer",[366,1114,1115],{},"__handle",". The root carries its state as modifier classes:\n",[366,1118,1119],{},"--open",[366,1121,1122],{},"--visible",[366,1124,1125],{},"--fullscreen",[366,1127,1128],{},"--dragging",[366,1130,1131],{},"--covered",[366,1133,1134],{},"--has-handle",[366,1136,1137],{},"--no-header",", and one per side. Those are the hooks to target,\nand ordinary CSS reaches them because the panel is a real element in your DOM.",[362,1140,1141,1142,1145,1146,1149],{},"Two knobs still carry the dialog's name, and they are not typos: ",[366,1143,1144],{},"--dialog-gap","\nis the body-to-footer rhythm and ",[366,1147,1148],{},"--dialog-title-fs"," the title's size.",[362,1151,1152,1153,1156,1157,1160,1161,1163,1164,1168],{},"Two v2 hooks have no counterpart. ",[366,1154,1155],{},".bb-offcanvas--compact"," went with the\n",[366,1158,1159],{},"compact"," prop, silently: it is not a prop any more, so it lands in ",[366,1162,542],{}," and\nchanges nothing. And the old close-button token should not be ported at all. The\nfull mapping is on\n",[380,1165,1167],{"href":1166},"\u002Fen\u002Fcomponents\u002Fbb-dialog#styling","BbDialog → Padding and the title"," and applies\nhere unchanged.",[1170,1171,1172],"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}",{"title":372,"searchDepth":157,"depth":157,"links":1174},[1175,1176,1180,1181,1182,1183],{"id":427,"depth":135,"text":431},{"id":470,"depth":135,"text":473,"children":1177},[1178,1179],{"id":580,"depth":157,"text":581},{"id":679,"depth":157,"text":680},{"id":812,"depth":135,"text":815},{"id":857,"depth":135,"text":860},{"id":895,"depth":135,"text":898},{"id":984,"depth":135,"text":987},"The panel that slides in from an edge, sized by extent rather than width.","md",{},[1188,1189,1190,1191,1192,1193],{"id":427,"title":431},{"id":470,"title":473},{"id":812,"title":815},{"id":857,"title":860},{"id":895,"title":898},{"id":984,"title":987},{"title":275,"description":1184},"components\u002Fbb-off-canvas","sDK4qvwmhV9dj-OnR_X1SfFylQxHjsBaNA6-fLZn0yo",{"name":275,"slug":1198,"group":254,"description":1199,"entrypoint":1200,"docs":1201,"props":1204,"models":1312,"events":1315,"slots":1332,"exposed":1352,"pt":1353,"validated":352,"migration":1377},"bb-off-canvas","Shows side-panel overlay content outside normal layout flow.","bitboss-ui",{"contract":1202,"source":1203},"ai\u002FBbOffCanvas.md","ai\u002Fsource\u002FBbOffCanvas.md",[1205,1209,1213,1216,1220,1224,1228,1232,1235,1238,1242,1245,1247,1249,1251,1253,1255,1257,1259,1261,1263,1265,1267,1269,1271,1273,1275,1277,1279,1281,1283,1285,1290,1295,1298,1304,1307],{"name":660,"type":1206,"required":1207,"default":352,"description":1208,"note":352,"demo":352},"string | undefined",false,"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":847,"type":1210,"required":1207,"default":950,"description":1211,"note":1212,"demo":895},"boolean | undefined","Disable EVERY user-initiated dismissal: backdrop click, Escape,\ndrag-to-dismiss AND the header close (×) button (denied attempts play the\ndeny nudge). Use it while an operation is in flight (e.g. a save) so the\ndrawer cannot be dismissed mid-work. Compare `persistent`, which blocks\nbackdrop\u002FEscape but leaves the × working. Programmatic close (v-model) is\nstill allowed.","Guards dismissal only — the drag included. The fields and buttons inside stay live, so disable them yourself while a save is in flight.",{"name":812,"type":1210,"required":1207,"default":950,"description":1214,"note":1215,"demo":812},"Enable drag-to-dismiss via VueUse `useSwipe` (fixed ~50px threshold toward\nthe exit edge, including from the scrollable body once it is at its scroll\nedge). A grab handle on the inner edge is the visual cue. When `false`, the\npanel is static (dismiss via the close button, backdrop, or Escape only).\nA gesture that starts inside an element marked `data-bb-no-drag` never\ndrags the panel — for content with drag interactions of its own.","A quarter of the extent, or a fast flick toward the edge, dismisses; anything shorter 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":1217,"type":1210,"required":1207,"default":950,"description":1218,"note":1219,"demo":470},"eager","Render offcanvas content immediately instead of waiting for the first open.","The body renders lazily otherwise — nothing inside exists until the first open, which is what a test or a measurement runs into.",{"name":1221,"type":1206,"required":1207,"default":352,"description":1222,"note":1223,"demo":895},"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":804,"type":1225,"required":1207,"default":352,"description":1226,"note":1227,"demo":470},"boolean | \"mobile\" | undefined","Display the offcanvas fullscreen. Use `'mobile'` to restrict fullscreen to small devices.","`fullscreen=\"mobile\"` is the usual pairing for a right-hand detail panel: sized on desktop, whole screen below the mobile breakpoint.",{"name":1229,"type":1210,"required":1207,"default":950,"description":1230,"note":1231,"demo":895},"hideClose","Hides the default close (×) button in the header (e.g. for a `persistent`\ndrawer you don't want dismissible — the × otherwise still closes a\npersistent drawer).","Inverted from v2's `show-close`, which defaulted to `true`; a leftover `:show-close=\"false\"` falls through to `$attrs` and the × comes back. Note that a panel with no `title` and no `header` slot has no close button to hide in the first place.",{"name":1233,"type":1210,"required":1207,"default":950,"description":1234,"note":352,"demo":352},"modelValue","Used by v-model to open \u002F close the panel. A panel with no `v-model`\nstarts closed.",{"name":651,"type":1210,"required":1207,"default":950,"description":1236,"note":1237,"demo":895},"Prevent closing via outside clicks, Escape key or drag-to-dismiss. The\nheader close (×) button STILL closes a persistent drawer — that is the\ndocumented escape hatch; combine with `hideClose` to remove it, or use\n`disabled` to block every dismissal. Programmatic close is still allowed.","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":1239,"type":1240,"required":1207,"default":352,"description":1241,"note":352,"demo":352},"pt","PtMap\u003CBbOffCanvasPtPart, BbOffCanvasPtState> | undefined","Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:\u003Cpart>` row.",{"name":1243,"type":1244,"required":1207,"default":352,"description":352,"note":352,"demo":352},"pt:close","PtValue | undefined",{"name":1246,"type":1244,"required":1207,"default":352,"description":352,"note":352,"demo":352},"pt:close:fullscreen",{"name":1248,"type":1244,"required":1207,"default":352,"description":352,"note":352,"demo":352},"pt:close:open",{"name":1250,"type":1244,"required":1207,"default":352,"description":352,"note":352,"demo":352},"pt:content",{"name":1252,"type":1244,"required":1207,"default":352,"description":352,"note":352,"demo":352},"pt:content:fullscreen",{"name":1254,"type":1244,"required":1207,"default":352,"description":352,"note":352,"demo":352},"pt:content:open",{"name":1256,"type":1244,"required":1207,"default":352,"description":352,"note":352,"demo":352},"pt:description",{"name":1258,"type":1244,"required":1207,"default":352,"description":352,"note":352,"demo":352},"pt:description:fullscreen",{"name":1260,"type":1244,"required":1207,"default":352,"description":352,"note":352,"demo":352},"pt:description:open",{"name":1262,"type":1244,"required":1207,"default":352,"description":352,"note":352,"demo":352},"pt:footer",{"name":1264,"type":1244,"required":1207,"default":352,"description":352,"note":352,"demo":352},"pt:footer:fullscreen",{"name":1266,"type":1244,"required":1207,"default":352,"description":352,"note":352,"demo":352},"pt:footer:open",{"name":1268,"type":1244,"required":1207,"default":352,"description":352,"note":352,"demo":352},"pt:header",{"name":1270,"type":1244,"required":1207,"default":352,"description":352,"note":352,"demo":352},"pt:header:fullscreen",{"name":1272,"type":1244,"required":1207,"default":352,"description":352,"note":352,"demo":352},"pt:header:open",{"name":1274,"type":1244,"required":1207,"default":352,"description":352,"note":352,"demo":352},"pt:root",{"name":1276,"type":1244,"required":1207,"default":352,"description":352,"note":352,"demo":352},"pt:root:fullscreen",{"name":1278,"type":1244,"required":1207,"default":352,"description":352,"note":352,"demo":352},"pt:root:open",{"name":1280,"type":1244,"required":1207,"default":352,"description":352,"note":352,"demo":352},"pt:title",{"name":1282,"type":1244,"required":1207,"default":352,"description":352,"note":352,"demo":352},"pt:title:fullscreen",{"name":1284,"type":1244,"required":1207,"default":352,"description":352,"note":352,"demo":352},"pt:title:open",{"name":478,"type":1286,"required":1207,"default":1287,"description":1288,"note":1289,"demo":470},"\"left\" | \"right\" | \"top\" | \"bottom\" | undefined","\"left\"","Which viewport edge the offcanvas docks to (and slides in from).","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":497,"type":1291,"required":1207,"default":1292,"description":1293,"note":1294,"demo":470},"Responsive\u003COffCanvasSize> | undefined","\"sm\"","Controls the maximum size of the offcanvas panel. Accepts named presets from `'xs'` to `'2xl'`,\n`'auto'`, a custom CSS size string, or a numeric pixel value — or a\nper-breakpoint map (e.g. `{ default: 'sm', lg: 'lg' }`) to switch responsively.","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":857,"type":1206,"required":1207,"default":352,"description":1296,"note":1297,"demo":857},"Name of the stack this drawer belongs to. Drawers sharing the same `stack`\nvalue step back behind one another as later ones open; drawers in different\nstacks 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":1299,"type":1300,"required":1207,"default":1301,"description":1302,"note":1303,"demo":857},"stackGap","number | undefined","60","Pixels each stacked parent drawer shifts inward when a child opens on top,\nleaving a peeking band of the parent visible.","How much of the parent stays visible behind a child. Only the top two open panels keep a dimmed and blurred backdrop; deeper ones go transparent, so a deep stack does not read as layers of dimming.",{"name":451,"type":1206,"required":1207,"default":352,"description":1305,"note":1306,"demo":470},"Title text announced to assistive technologies. If omitted, no header is rendered and\naccessibility 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, unlike `BbDialog`, no floating close button either.",{"name":1308,"type":1300,"required":1207,"default":1309,"description":1310,"note":1311,"demo":470},"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.",[1313],{"name":1233,"type":1210,"note":1314,"demo":427},"The only way to open a panel. There is no exposed `open()`, and vetoing a close from `@hide` is not the way to keep it open — that is `persistent`.",[1316,1319,1322,1326,1329],{"name":1317,"signature":1318,"description":352,"note":352,"demo":352},"hidden","(event: \"hidden\"): void",{"name":1320,"signature":1321,"description":352,"note":352,"demo":352},"hide","(event: \"hide\"): void",{"name":1323,"signature":1324,"description":352,"note":1325,"demo":427},"show","(event: \"show\"): void","Fires as the model turns true, before the slide. The hook for reseeding a draft so Cancel is a real discard.",{"name":1327,"signature":1328,"description":352,"note":352,"demo":352},"shown","(event: \"shown\"): void",{"name":1330,"signature":1331,"description":352,"note":352,"demo":352},"update:modelValue","(event: \"update:modelValue\", value: boolean): void",[1333,1338,1341,1345,1349],{"name":1334,"type":1335,"description":1336,"note":1337,"demo":470},"default","{ close: () => void; }","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":660,"type":1339,"description":1340,"note":352,"demo":352},"BbOffCanvasDescriptionSlotProps","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":590,"type":1342,"description":1343,"note":1344,"demo":470},"object","Content rendered in the panel footer, below the body area. Typically used for action buttons.","Stays pinned while the body scrolls. One primary action — Apply, Save, Assign — with its counterweight beside it.",{"name":608,"type":1346,"description":1347,"note":1348,"demo":470},"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` or `#description` goes.",{"name":451,"type":1350,"description":1351,"note":352,"demo":352},"BbOffCanvasTitleSlotProps","Replaces the default title text inside the header. Remains linked to the\npanel through `aria-labelledby`. Providing this slot renders the header even\nwhen `title` is unset — a slotted title is a title.",[],{"parts":1354,"states":1371},[1355,1358,1360,1362,1364,1367,1369],{"name":1356,"description":1357},"root","The `\u003Cdialog>` — the sheet itself (no separate `panel`). The backdrop is `::backdrop`: CSS, not `pt`.",{"name":608,"description":1359},"The header band.",{"name":451,"description":1361},"The title line inside the header. Not rendered when a `#header` slot replaces the header.",{"name":660,"description":1363},"The description line inside the header. Not rendered when a `#header` slot replaces the header.",{"name":1365,"description":1366},"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":590,"description":1368},"The footer band.",{"name":626,"description":1370},"The ✕.",[1372,1374],{"name":804,"description":1373},"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":1375,"description":1376},"open","Component-wide: the sheet is open (follows `v-model`).",{"removed":1378,"renamed":1391},[1379,1384,1387],{"name":1159,"replacedBy":352,"since":1380,"migration":1381,"silent":1063,"fix":1382},"3.0.0-unreleased","ai\u002Fguides\u002Fmigration\u002Fcomponents\u002Fbb-offcanvas.md",{"kind":1383},"manual",{"name":534,"replacedBy":478,"since":1380,"migration":1381,"silent":1063,"fix":1385},{"kind":1386},"rename",{"name":1388,"replacedBy":1229,"since":1380,"migration":1381,"silent":1063,"fix":1389},"showClose",{"kind":1390},"invert",[1392,1394],{"from":534,"to":478,"since":1380,"migration":1381,"fix":1393},{"kind":1386},{"from":1388,"to":1229,"since":1380,"migration":1381,"fix":1395},{"kind":1390},1790005163775]