[{"data":1,"prerenderedAt":1263},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":124,"api-none":352,"page-en-\u002Fcomponents\u002Fbb-popover":353,"pt-showcase-BbPopover":1076},{"\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":278,"body":355,"component":278,"description":1063,"extension":1064,"group":254,"meta":1065,"navigation":894,"order":207,"path":279,"sections":1066,"seo":1073,"stem":1074,"__hash__":1075},"docs_en\u002Fcomponents\u002Fbb-popover.md",{"type":356,"value":357,"toc":1049},"minimark",[358,406,409,417,428,435,439,448,453,460,470,484,496,502,517,520,527,534,544,553,559,586,589,595,598,625,628,649,655,660,663,674,677,681,695,698,708,716,722,736,739,750,771,777,783,786,801,823,826,830,833,959,968,996,1024,1045],[359,360,361,369],"when",{},[362,363,364,365,368],"p",{},"Reach for ",[366,367,278],"code",{}," when a trigger should open a small panel the user then\nworks in: quick settings, a filter, a notifications list, an inline detail card.\nFields, switches, links and buttons all belong inside it.",[370,371,373],"template",{"v-slot:else":372},"",[374,375,376,385,392,399],"ul",{},[377,378,379,384],"li",{},[380,381,382],"a",{"href":96},[366,383,284],{},": the reader only needs a sentence\nabout the control in front of them",[377,386,387,391],{},[380,388,389],{"href":38},[366,390,269],{},": the panel is only a list of\nactions",[377,393,394,398],{},[380,395,396],{"href":36},[366,397,266],{},": the task owns the page until it is\nresolved",[377,400,401,405],{},[380,402,403],{"href":52},[366,404,275],{},": it is supplementary side\ncontent, docked to an edge rather than to a control",[362,407,408],{},"A tooltip describes, a popover contains. If the reader has to move into the\ncontent and do something there, stay here.",[410,411,413],"h2",{"id":412},"task",[414,415,416],"span",{},"Edit in place",[362,418,419,420,423,424,427],{},"Put your trigger in the ",[366,421,422],{},"activator"," slot and spread its ",[366,425,426],{},"props"," onto it.",[362,429,430,431,434],{},"That one spread is the whole contract: it carries the anchor, the element ",[366,432,433],{},"id",",\nthe ARIA attributes and the open handler. Miss it and you get a button that\nlooks right and does nothing.",[436,437],"demo",{"name":438},"BbPopover\u002FRenameForm",[362,440,441,444,445,447],{},[366,442,443],{},"width"," takes pixels, or a percentage of the trigger's width. Only the\npercentage form re-measures when the trigger resizes; leave ",[366,446,443],{}," off and the\npanel sizes to its content.",[449,450,452],"h3",{"id":451},"closing-the-panel","Closing the panel",[362,454,455,456,459],{},"The panel renders no close button of its own. The affordance is yours, and the\ndefault slot hands you ",[366,457,458],{},"close",".",[362,461,462,463,465,466,469],{},"Call ",[366,464,458],{}," after the write, not before. A handler that dismisses first and\ncommits second is one early ",[366,467,468],{},"return"," away from losing the edit silently.",[362,471,472,473,476,477,480,481,483],{},"Escape and a click outside dismiss the panel too, and for a read-only panel that\nis enough. A panel holding a form needs a visible way out as well, Cancel beside\nSave, because nothing on screen says Escape is safe. The ",[366,474,475],{},"header"," and ",[366,478,479],{},"footer","\nslots receive ",[366,482,458],{}," on the same scope.",[485,486,487],"migration",{},[362,488,489,476,492,495],{},[366,490,491],{},"show-close",[366,493,494],{},"close-label"," are gone.",[410,497,499],{"id":498},"focus",[414,500,501],{},"Focus",[362,503,504,508,509,512,513,516],{},[505,506,507],"strong",{},"A popover is modal."," It opens as a native ",[366,510,511],{},"\u003Cdialog>",", so ",[366,514,515],{},"Tab"," stays inside\nthe panel and the page behind it cannot be used while it is open.",[436,518],{"name":519},"BbPopover\u002FFocusTarget",[362,521,522,523,526],{},"Design around that: a click outside lands on the panel's own transparent\nbackdrop, dismisses the popover, and does ",[505,524,525],{},"not"," reach the control underneath.\nAnyone wanting to press something behind the panel presses it twice.",[362,528,529,530,533],{},"Opening moves focus to the first focusable element; closing returns it to the\ntrigger. When that first element is not the one the reader came for, point\n",[366,531,532],{},"focus-target"," at the right one with a CSS selector.",[362,535,536,537,540,541,459],{},"The panel paints in the top layer, so it is never clipped by an\n",[366,538,539],{},"overflow: hidden"," ancestor and never needs a ",[366,542,543],{},"z-index",[485,545,546],{},[362,547,548,549,552],{},"The ",[366,550,551],{},"restore-focus"," prop is gone. Restoring focus is behaviour now, not a knob.",[410,554,556],{"id":555},"placement",[414,557,558],{},"Placement and geometry",[362,560,561,563,564,567,568,571,572,476,575,578,579,476,582,585],{},[366,562,555],{}," puts the panel on a side of the trigger: the ",[366,565,566],{},"top",", ",[366,569,570],{},"right",",\n",[366,573,574],{},"bottom",[366,576,577],{},"left"," families, each with ",[366,580,581],{},"-start",[366,583,584],{},"-end"," alignment.",[436,587],{"name":588},"BbPopover\u002FPlacement",[362,590,591,592,594],{},"It defaults to ",[366,593,574],{},", and it flips itself near a viewport edge. Pick what\nreads best in the common case rather than guarding against the exception.",[362,596,597],{},"Three props tune the rest:",[374,599,600,610,619],{},[377,601,602,605,606,609],{},[366,603,604],{},"offset",": the gap from the trigger (",[366,607,608],{},"3",")",[377,611,612,615,616,609],{},[366,613,614],{},"padding",": the gap the panel keeps from the page edge (",[366,617,618],{},"10",[377,620,621,624],{},[366,622,623],{},"boundary",": the region the panel must not escape, usually a sidebar or a\nscrolling container",[362,626,627],{},"The panel stays tethered to its trigger: scroll the trigger out of view and the\npopover closes.",[485,629,630],{},[362,631,632,633,476,636,639,640,643,644,648],{},"A popover no longer draws an arrow, so ",[366,634,635],{},"hide-arrow",[366,637,638],{},"arrow-padding"," are\ngone. If you passed ",[366,641,642],{},":hide-arrow=\"false\""," in v2 to get a bubble with a point on\nit, that shape is a ",[380,645,646],{"href":96},[366,647,284],{}," now.",[410,650,652],{"id":651},"scrollable",[414,653,654],{},"Header, footer and long content",[362,656,657,659],{},[366,658,651],{}," caps the panel at the height still available and scrolls the body\ninside it.",[436,661],{"name":662},"BbPopover\u002FNotifications",[362,664,548,665,476,667,669,670,673],{},[366,666,475],{},[366,668,479],{}," slots sit outside that scroll region, each with its\nown padding and divider. A title stays put and footer actions stay reachable\nwithout a ",[366,671,672],{},"sticky"," workaround.",[362,675,676],{},"Use it for feeds and long lists. Leave it off for atomic content: a calendar\nthat scrolls internally is a worse calendar.",[449,678,680],{"id":679},"triggers-and-cursor-anchoring","Triggers and cursor anchoring",[362,682,683,686,687,690,691,694],{},[366,684,685],{},"trigger"," chooses the gesture: ",[366,688,689],{},"click"," by default, ",[366,692,693],{},"contextMenu"," for right-click\nand long-press, or an array to accept both.",[436,696],{"name":697},"BbPopover\u002FContextPanel",[362,699,700,701,703,704,707],{},"Pair ",[366,702,693],{}," with ",[366,705,706],{},"placement=\"cursor\""," and the panel anchors where the\npointer was rather than on the element.",[362,709,710,711,715],{},"Keep the distinction: a plain list of actions is\n",[380,712,713],{"href":38},[366,714,269],{},". A context popover earns its place\nwhen the surface holds controls the user operates in place.",[410,717,719],{"id":718},"control",[414,720,721],{},"Driving it from outside",[362,723,724,727,728,731,732,735],{},[366,725,726],{},"v-model"," opens and closes the popover: write ",[366,729,730],{},"true"," to open and ",[366,733,734],{},"false"," to\nclose. It writes the model back on every dismiss, so reading it stays accurate.",[436,737],{"name":738},"BbPopover\u002FExternalActivator",[362,740,741,743,744,746,747,749],{},[366,742,422],{}," is for a trigger that already exists somewhere else, like a toolbar\nbutton or a table cell. Pass the element or the component ref and the popover\nattaches the listeners and the ARIA itself. There is no ",[366,745,426],{}," to spread, and\nthe ",[366,748,422],{}," slot is not rendered.",[485,751,752],{},[362,753,754,567,757,476,760,763,764,766,767,770],{},[366,755,756],{},"popoverRef.value.show()",[366,758,759],{},".close()",[366,761,762],{},".isOpen"," are gone, replaced by\n",[366,765,726],{},". In an untyped template the leftover call is ",[366,768,769],{},"undefined"," at runtime\nrather than a compile error, which makes it the quietest break on this\ncomponent.",[410,772,774],{"id":773},"adaptive",[414,775,776],{},"The mobile sheet",[362,778,779,780,782],{},"Below 768px a popover opens as a bottom-anchored, draggable ",[366,781,275],{}," sheet\ninstead of a floating panel.",[436,784],{"name":785},"BbPopover\u002FMobileSheet",[362,787,788,789,567,791,476,794,796,797,800],{},"That is the shipped behaviour, and the ",[366,790,475],{},[366,792,793],{},"default",[366,795,479],{}," slots\ncarry over unchanged. Pass ",[366,798,799],{},":adaptive=\"false\""," to keep the floating panel at\nevery width.",[362,802,803,804,809,810,813,814,567,817,567,820,459],{},"The part that catches people: ",[505,805,806,808],{},[366,807,443],{}," is ignored in sheet mode."," A sheet\nsizes itself. Tune it with ",[366,811,812],{},"off-canvas-props",", which merges over the defaults\n",[366,815,816],{},"side: 'bottom'",[366,818,819],{},"size: 'auto'",[366,821,822],{},"draggable: true",[362,824,825],{},"The surface is decided when the panel opens and frozen until it closes, so\nresizing the window never swaps a live panel into a sheet.",[449,827,829],{"id":828},"styling-the-floating-and-sheet-surfaces","Styling the floating and sheet surfaces",[362,831,832],{},"The panel takes its paint from the theme tokens and gives you three class hooks.",[834,835,839],"pre",{"className":836,"code":837,"language":838,"meta":372,"style":372},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".bb-popover .bb-popover__header {\n    padding: 12px;\n    font-weight: 600;\n}\n\n.bb-popover .bb-popover__content {\n    padding: 12px;\n}\n\n.bb-popover .bb-popover__footer {\n    background-color: var(--bb-muted);\n}\n","css",[366,840,841,855,873,885,890,896,905,917,921,925,934,954],{"__ignoreMap":372},[414,842,844,848,851],{"class":843,"line":131},"line",[414,845,847],{"class":846},"s-5SL",".bb-popover",[414,849,850],{"class":846}," .bb-popover__header",[414,852,854],{"class":853},"suds8"," {\n",[414,856,857,860,863,866,870],{"class":843,"line":135},[414,858,859],{"class":846},"    padding",[414,861,862],{"class":853},": ",[414,864,865],{"class":846},"12",[414,867,869],{"class":868},"sHUrx","px",[414,871,872],{"class":853},";\n",[414,874,875,878,880,883],{"class":843,"line":157},[414,876,877],{"class":846},"    font-weight",[414,879,862],{"class":853},[414,881,882],{"class":846},"600",[414,884,872],{"class":853},[414,886,887],{"class":843,"line":161},[414,888,889],{"class":853},"}\n",[414,891,892],{"class":843,"line":165},[414,893,895],{"emptyLinePlaceholder":894},true,"\n",[414,897,898,900,903],{"class":843,"line":199},[414,899,847],{"class":846},[414,901,902],{"class":846}," .bb-popover__content",[414,904,854],{"class":853},[414,906,907,909,911,913,915],{"class":843,"line":203},[414,908,859],{"class":846},[414,910,862],{"class":853},[414,912,865],{"class":846},[414,914,869],{"class":868},[414,916,872],{"class":853},[414,918,919],{"class":843,"line":207},[414,920,889],{"class":853},[414,922,923],{"class":843,"line":211},[414,924,895],{"emptyLinePlaceholder":894},[414,926,927,929,932],{"class":843,"line":215},[414,928,847],{"class":846},[414,930,931],{"class":846}," .bb-popover__footer",[414,933,854],{"class":853},[414,935,936,939,941,944,947,951],{"class":843,"line":219},[414,937,938],{"class":846},"    background-color",[414,940,862],{"class":853},[414,942,943],{"class":846},"var",[414,945,946],{"class":853},"(",[414,948,950],{"class":949},"soyes","--bb-muted",[414,952,953],{"class":853},");\n",[414,955,957],{"class":843,"line":956},12,[414,958,889],{"class":853},[362,960,961,962,964,965,967],{},"Every ",[366,963,278],{}," in the project carries those hooks, so put your own class on\nthe popover and scope the rules to it rather than restyling ",[366,966,847],{},"\nglobally.",[362,969,970,971,973,974,977,978,981,982,985,986,567,989,476,992,995],{},"Those hooks and your class live on the floating panel only. Below 768px the\npopover is a ",[366,972,275],{}," sheet that neither reaches: a class on the popover\nlands on an invisible positioning wrapper the sheet does not have, though a\n",[366,975,976],{},"data-*"," attribute still gets there. When a look has to hold on a phone, set it\nthrough ",[366,979,980],{},"pt",". ",[366,983,984],{},"pt:panel"," is the bordered box on desktop and the sheet itself on\na phone, and ",[366,987,988],{},"pt:header",[366,990,991],{},"pt:content",[366,993,994],{},"pt:footer"," follow the bands into the\nsheet.",[362,997,998,999,1002,1003,1005,1006,571,1009,567,1012,1015,1016,1019,1020,1023],{},"Keep the look off ",[366,1000,1001],{},"pt:root",". Padding, a border or a background there does not\nstyle the box, it draws a frame around it, and a click on that frame counts as\noutside and closes the popover. Desktop geometry on ",[366,1004,984],{}," — ",[366,1007,1008],{},"rounded-md",[366,1010,1011],{},"w-64",[366,1013,1014],{},"px-1"," — reshapes the sheet too: correct it for the phone with\n",[366,1017,1018],{},"pt:sheet",", which wins there. And keep ",[366,1021,1022],{},"overflow-hidden"," off a panel that can\nbecome a sheet, or a gap shows under it while it is dragged.",[485,1025,1026],{},[362,1027,1028,1031,1032,567,1035,567,1038,1041,1042,459],{},[366,1029,1030],{},"theme"," is gone. Colour comes from ",[366,1033,1034],{},"--bb-panel",[366,1036,1037],{},"--bb-border",[366,1039,1040],{},"--bb-radius","\nand ",[366,1043,1044],{},"--bb-shadow",[1046,1047,1048],"style",{},"html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}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);}",{"title":372,"searchDepth":157,"depth":157,"links":1050},[1051,1054,1055,1056,1059,1060],{"id":412,"depth":135,"text":416,"children":1052},[1053],{"id":451,"depth":157,"text":452},{"id":498,"depth":135,"text":501},{"id":555,"depth":135,"text":558},{"id":651,"depth":135,"text":654,"children":1057},[1058],{"id":679,"depth":157,"text":680},{"id":718,"depth":135,"text":721},{"id":773,"depth":135,"text":776,"children":1061},[1062],{"id":828,"depth":157,"text":829},"A floating panel anchored to a trigger, for content the reader moves into and acts on.","md",{},[1067,1068,1069,1070,1071,1072],{"id":412,"title":416},{"id":498,"title":501},{"id":555,"title":558},{"id":651,"title":654},{"id":718,"title":721},{"id":773,"title":776},{"title":278,"description":1063},"components\u002Fbb-popover","FaGlKmN4LfghPf_Ucydr4ECpUpjgQYO6Vj2Nyc0f3QM",{"name":278,"slug":1077,"group":254,"description":1078,"entrypoint":1079,"docs":1080,"props":1083,"models":1170,"events":1173,"slots":1191,"exposed":1204,"pt":1205,"validated":352,"migration":1227},"bb-popover","Anchors floating content to reference elements.","bitboss-ui",{"contract":1081,"source":1082},"ai\u002FBbPopover.md","ai\u002Fsource\u002FBbPopover.md",[1084,1089,1094,1098,1102,1106,1111,1113,1116,1121,1124,1127,1132,1135,1137,1139,1140,1142,1143,1145,1146,1148,1149,1151,1152,1154,1157,1161,1166],{"name":422,"type":1085,"required":1086,"default":352,"description":1087,"note":1088,"demo":718},"ElementOrComponentRef | undefined",false,"External activator element or component ref.\nWhen provided, the activator slot is not rendered and click events\nare attached programmatically to the referenced element.","For a trigger that already exists elsewhere — a toolbar button, a table cell. The listeners and the ARIA are attached to that element directly, so there is nothing to spread and the `activator` slot is not rendered. Loosely typed in v2, `ElementOrComponentRef` in v3.",{"name":773,"type":1090,"required":1086,"default":1091,"description":1092,"note":1093,"demo":773},"boolean | undefined","`config.adaptive` (`true`)","On mobile viewports (below `config.mobileMaxWidth`), render the popover as a\nbottom-anchored, auto-sized off-canvas sheet instead of a floating panel.\nThe `header`, `default` and `footer` slots are forwarded to the sheet.\n\nThe `width` prop is intentionally ignored in this mode (it means a different\nthing for a sheet); pass `offCanvasProps` to size or otherwise customise the\nsheet.\n\nWhen unset, falls back to the global `config.adaptive`.","Three-state on purpose: unset falls back to the plugin config (`true` out of the box), so most projects never pass it. The surface is decided when the panel opens and frozen until it closes.",{"name":623,"type":1095,"required":1086,"default":352,"description":1096,"note":1097,"demo":555},"ElementOrComponentRefOrSelector | undefined","Constrains the popover within a bounding element.\nWhen provided, the popover will not overflow this container's bounds (e.g. a sidebar).\nAccepts an HTMLElement, a Vue component ref, or a CSS selector string.","Keeps the flip and shift maths inside a container instead of the viewport — a sidebar, a scrolling card. Reach for it when the panel escapes a region it should stay inside, not as a default.",{"name":1099,"type":1090,"required":1086,"default":734,"description":1100,"note":1101,"demo":352},"disabled","Disables the component.","Suppresses opening and marks the slot activator disabled. It does not close a panel that is already open — write `false` to the model for that.",{"name":1103,"type":1090,"required":1086,"default":734,"description":1104,"note":1105,"demo":352},"eager","Prevents rendering content before it's made visible.","The body is lazy: it renders on first open, so a query against the panel before then finds nothing. Turn this on to pre-measure a chart or to let a test read the panel while it is closed.",{"name":1107,"type":1108,"required":1086,"default":352,"description":1109,"note":1110,"demo":498},"focusTarget","string | undefined","Selector for the element that receives focus after opening.\nDefaults to the first focusable element inside the popover.","A CSS selector resolved inside the panel. Worth setting when the first focusable element is not the one the reader came for — a header Reset button ahead of the body search field.",{"name":433,"type":1108,"required":1086,"default":352,"description":1112,"note":352,"demo":352},"The identifier of the component.",{"name":1114,"type":1090,"required":1086,"default":734,"description":1115,"note":352,"demo":352},"modelValue","Used by v-model to open \u002F close the popover. A popover with no `v-model`\nstarts closed and is driven by its `trigger`.",{"name":1117,"type":1118,"required":1086,"default":352,"description":1119,"note":1120,"demo":773},"offCanvasProps","Partial\u003CBbOffCanvasProps> | undefined","Props for the phone sheet. A `pt` inside it, object or colon keys, styles\nonly that sheet.\n\nOverrides forwarded to the underlying `BbOffCanvas` when `adaptive` renders\nthe sheet on mobile. Merged over the adaptive defaults\n(`side: 'bottom'`, `size: 'auto'`, `draggable: true`). Ignored when\n`adaptive` is `false`.\n\nA `pt` inside it styles ONLY the sheet, in `BbOffCanvas`'s part words\n(`root`, `header`, `title`, `description`, `content`, `footer`, `close`;\nstate `open`), object (`{ pt: { header: '…' } }`) or colon keys\n(`{ 'pt:header': '…' }`) alike. It merges after what this component\nforwards to its sheet, so it wins a conflict and drops nothing — see the\npassthrough guide § Inside the sheet.","The properties are `BbOffCanvas`'s own — `side`, `size`, `draggable`, `title` — merged over the adaptive defaults. This is also the only way to size the sheet, since `width` is ignored in that mode.",{"name":604,"type":1122,"required":1086,"default":608,"description":1123,"note":352,"demo":555},"number | undefined","Space the floating container will maintain from the activator.",{"name":614,"type":1122,"required":1086,"default":618,"description":1125,"note":1126,"demo":555},"Minimum empty space to keep from the edge of the page.","The gap from the edge of the page, not the panel's inner padding. That one is CSS on `.bb-popover__content`.",{"name":555,"type":1128,"required":1086,"default":1129,"description":1130,"note":1131,"demo":555},"Placement | \"cursor\" | undefined","\"bottom\"","Position of the popover relative to the activator.\nUse `'cursor'` to anchor at the mouse\u002Ftouch coordinates.\n(BbPopover never draws an arrow — arrows are tooltip-only in v3.)","A v3 popover never draws an arrow, so the only thing `'cursor'` changes is the anchor: the panel opens at the pointer instead of on the element. Pair it with `trigger=\"contextMenu\"`.",{"name":980,"type":1133,"required":1086,"default":352,"description":1134,"note":352,"demo":352},"PtMap\u003CBbPopoverPtPart, \"open\"> | undefined","Passthrough, object form: the same keys as the `pt:*` attributes\nwithout the prefix. See the `pt:\u003Cpart>` row.",{"name":991,"type":1136,"required":1086,"default":352,"description":352,"note":352,"demo":352},"PtValue | undefined",{"name":1138,"type":1136,"required":1086,"default":352,"description":352,"note":352,"demo":352},"pt:content:open",{"name":994,"type":1136,"required":1086,"default":352,"description":352,"note":352,"demo":352},{"name":1141,"type":1136,"required":1086,"default":352,"description":352,"note":352,"demo":352},"pt:footer:open",{"name":988,"type":1136,"required":1086,"default":352,"description":352,"note":352,"demo":352},{"name":1144,"type":1136,"required":1086,"default":352,"description":352,"note":352,"demo":352},"pt:header:open",{"name":984,"type":1136,"required":1086,"default":352,"description":352,"note":352,"demo":352},{"name":1147,"type":1136,"required":1086,"default":352,"description":352,"note":352,"demo":352},"pt:panel:open",{"name":1001,"type":1136,"required":1086,"default":352,"description":352,"note":352,"demo":352},{"name":1150,"type":1136,"required":1086,"default":352,"description":352,"note":352,"demo":352},"pt:root:open",{"name":1018,"type":1136,"required":1086,"default":352,"description":352,"note":352,"demo":352},{"name":1153,"type":1136,"required":1086,"default":352,"description":352,"note":352,"demo":352},"pt:sheet:open",{"name":651,"type":1090,"required":1086,"default":734,"description":1155,"note":1156,"demo":651},"Caps the popover height to the available viewport space and enables internal scrolling.\nUseful for tall content like filter panels. Not recommended for atomic popovers (calendars, color pickers).","Caps the panel at the space left for the resolved placement, after any flip. Right for a feed or a filter list; wrong for atomic content such as a calendar or a colour picker.",{"name":1158,"type":1122,"required":1086,"default":1159,"description":1160,"note":352,"demo":352},"transitionDuration","250","How long the transition has to last in milliseconds.",{"name":685,"type":1162,"required":1086,"default":1163,"description":1164,"note":1165,"demo":651},"PopoverTrigger | PopoverTrigger[] | undefined","\"click\"","Interaction(s) that open the popover.\nAccepts a single trigger or an array to combine them.\n- `'click'` — left-click \u002F tap (default)\n- `'contextMenu'` — right-click on desktop, long-press on mobile","`contextMenu` is right-click on a pointer and a 500ms long-press on touch. Pass an array to accept both gestures on the same trigger.",{"name":443,"type":1167,"required":1086,"default":352,"description":1168,"note":1169,"demo":412},"string | number | undefined","Width of the popover. Accepts pixels or percentage (relative to activator width).","Pixels, or a percentage of the trigger's width — only the percentage form re-measures when the trigger resizes. Ignored entirely by the adaptive mobile sheet.",[1171],{"name":1114,"type":1090,"note":1172,"demo":718},"The replacement for the template-ref `show()` \u002F `close()` \u002F `isOpen` v3 removed: write `true` or `false`, and the popover writes the model back on every dismiss. A leftover `popoverRef.value.show()` is `undefined` at runtime, not a compile error.",[1174,1178,1181,1184,1188],{"name":1175,"signature":1176,"description":352,"note":1177,"demo":498},"hidden","(event: \"hidden\"): void","Fires after the panel has closed and focus is back on the trigger.",{"name":1179,"signature":1180,"description":352,"note":352,"demo":352},"hide","(event: \"hide\"): void",{"name":1182,"signature":1183,"description":352,"note":352,"demo":352},"show","(event: \"show\"): void",{"name":1185,"signature":1186,"description":352,"note":1187,"demo":498},"shown","(event: \"shown\"): void","Fires after the panel is open and focus has moved inside — the safe point for anything that assumes focus has settled.",{"name":1189,"signature":1190,"description":352,"note":352,"demo":352},"update:modelValue","(event: \"update:modelValue\", value: boolean): void",[1192,1196,1200,1202],{"name":422,"type":1193,"description":1194,"note":1195,"demo":412},"BbPopoverActivatorSlotProps","The element that triggers the popover to open. Spread `props` onto your trigger element.","Spread `props` onto your trigger or the popover has no anchor, no ARIA and no way to open. The scope also carries `isOpen`, `placement` and `disabled` so the trigger can react.",{"name":793,"type":1197,"description":1198,"note":1199,"demo":412},"BbPopoverDefaultSlotProps","The popover body content rendered inside the floating panel.","The scope carries `close`, and v3 removed the built-in close button — so this is where a Cancel or Done control comes from. Commit first, then call it.",{"name":479,"type":1197,"description":1201,"note":352,"demo":651},"Content pinned to the bottom of the panel, outside the scroll region.\nStays visible while the body scrolls (when `scrollable`) and carries its\nown padding and top divider, so footer actions need no negative-margin or\n`sticky` workarounds.",{"name":475,"type":1197,"description":1203,"note":352,"demo":651},"Content pinned to the top of the panel, outside the scroll region.\nStays visible while the body scrolls (when `scrollable`) and carries its\nown padding and bottom divider, so a title or search field needs no\nnegative-margin or `sticky` workarounds.",[],{"parts":1206,"states":1223},[1207,1210,1213,1216,1218,1221],{"name":1208,"description":1209},"root","The floating element — an invisible positioning wrapper; a `class` on the component lands here. No node on the phone sheet: style what you see with `panel`.",{"name":1211,"description":1212},"panel","The surface you see — the bordered box that paints the popover and lays out its bands on desktop, the sheet itself on a phone.",{"name":1214,"description":1215},"sheet","The bottom sheet the popover becomes on a phone (the `BbOffCanvas` root) — never the desktop surface. Applied after `panel`, so it wins a conflict there.",{"name":475,"description":1217},"The header band (on a phone, the sheet's).",{"name":1219,"description":1220},"content","The body band (on a phone, the sheet's).",{"name":479,"description":1222},"The footer band (on a phone, the sheet's).",[1224],{"name":1225,"description":1226},"open","Component-wide: the popover is open.",{"removed":1228,"renamed":1260},[1229,1235,1238,1242,1245,1249,1252,1255,1258],{"name":1230,"replacedBy":352,"since":1231,"migration":1232,"silent":894,"fix":1233},"arrowPadding","3.0.0-unreleased","ai\u002Fguides\u002Fmigration\u002Fcomponents\u002Fbb-popover.md",{"kind":1234},"remove",{"name":1236,"replacedBy":352,"since":1231,"migration":1232,"silent":894,"fix":1237},"block",{"kind":1234},{"name":1239,"replacedBy":352,"since":1231,"migration":1232,"silent":894,"fix":1240},"closeLabel",{"kind":1241},"manual",{"name":1243,"replacedBy":352,"since":1231,"migration":1232,"silent":894,"fix":1244},"hideArrow",{"kind":1234},{"name":1246,"replacedBy":1117,"since":1231,"migration":1232,"silent":894,"fix":1247},"offcanvasProps",{"kind":1248},"rename",{"name":1250,"replacedBy":352,"since":1231,"migration":1232,"silent":894,"fix":1251},"restoreFocus",{"kind":1241},{"name":1253,"replacedBy":352,"since":1231,"migration":1232,"silent":894,"fix":1254},"showArrow",{"kind":1234},{"name":1256,"replacedBy":352,"since":1231,"migration":1232,"silent":894,"fix":1257},"showClose",{"kind":1241},{"name":1030,"replacedBy":352,"since":1231,"migration":1232,"silent":894,"fix":1259},{"kind":1241},[1261],{"from":1246,"to":1117,"since":1231,"migration":1232,"fix":1262},{"kind":1248},1790005163870]