[{"data":1,"prerenderedAt":1509},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":134,"api-none":377,"page-en-\u002Fcomponents\u002Fbb-popover":378,"pt-showcase-BbPopover":1327},{"\u002Fit\u002Fcomponenti\u002Fbb-accordion":4,"\u002Fen\u002Fcomponents\u002Fbb-accordion":5,"\u002Fit\u002Fcomponenti\u002Fbb-alert":6,"\u002Fen\u002Fcomponents\u002Fbb-alert":7,"\u002Fit\u002Fcomponenti\u002Fbb-asterisk":8,"\u002Fen\u002Fcomponents\u002Fbb-asterisk":9,"\u002Fit\u002Fcomponenti\u002Fbb-avatar":10,"\u002Fen\u002Fcomponents\u002Fbb-avatar":11,"\u002Fit\u002Fcomponenti\u002Fbb-badge":12,"\u002Fen\u002Fcomponents\u002Fbb-badge":13,"\u002Fit\u002Fcomponenti\u002Fbb-base-button":14,"\u002Fen\u002Fcomponents\u002Fbb-base-button":15,"\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs":16,"\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs":17,"\u002Fit\u002Fcomponenti\u002Fbb-button":18,"\u002Fen\u002Fcomponents\u002Fbb-button":19,"\u002Fit\u002Fcomponenti\u002Fbb-calendar":20,"\u002Fen\u002Fcomponents\u002Fbb-calendar":21,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":22,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":23,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":24,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":25,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":26,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":27,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":28,"\u002Fen\u002Fcomponents\u002Fbb-color-input":29,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":30,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":31,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":32,"\u002Fen\u002Fcomponents\u002Fbb-confirm":33,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":34,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":35,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":36,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":37,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":38,"\u002Fen\u002Fcomponents\u002Fbb-dialog":39,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":40,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":41,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":42,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":43,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":44,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":45,"\u002Fit\u002Fcomponenti\u002Fbb-form":46,"\u002Fen\u002Fcomponents\u002Fbb-form":47,"\u002Fit\u002Fcomponenti\u002Fbb-hover-card":48,"\u002Fen\u002Fcomponents\u002Fbb-hover-card":49,"\u002Fit\u002Fcomponenti\u002Fbb-icon":50,"\u002Fen\u002Fcomponents\u002Fbb-icon":51,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":52,"\u002Fen\u002Fcomponents\u002Fbb-indicator":53,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":54,"\u002Fen\u002Fcomponents\u002Fbb-number-input":55,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":56,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":57,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":58,"\u002Fen\u002Fcomponents\u002Fbb-pagination":59,"\u002Fit\u002Fcomponenti\u002Fbb-popover":60,"\u002Fen\u002Fcomponents\u002Fbb-popover":61,"\u002Fit\u002Fcomponenti\u002Fbb-progress":62,"\u002Fen\u002Fcomponents\u002Fbb-progress":63,"\u002Fit\u002Fcomponenti\u002Fbb-radio":64,"\u002Fen\u002Fcomponents\u002Fbb-radio":65,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":66,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":67,"\u002Fit\u002Fcomponenti\u002Fbb-rating":68,"\u002Fen\u002Fcomponents\u002Fbb-rating":69,"\u002Fit\u002Fcomponenti\u002Fbb-select":70,"\u002Fen\u002Fcomponents\u002Fbb-select":71,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":72,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":73,"\u002Fit\u002Fcomponenti\u002Fbb-slider":74,"\u002Fen\u002Fcomponents\u002Fbb-slider":75,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":76,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":77,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":78,"\u002Fen\u002Fcomponents\u002Fbb-spinner":79,"\u002Fit\u002Fcomponenti\u002Fbb-switch":80,"\u002Fen\u002Fcomponents\u002Fbb-switch":81,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":82,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":83,"\u002Fit\u002Fcomponenti\u002Fbb-table":84,"\u002Fen\u002Fcomponents\u002Fbb-table":85,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":86,"\u002Fen\u002Fcomponents\u002Fbb-tabs":87,"\u002Fit\u002Fcomponenti\u002Fbb-tag":88,"\u002Fen\u002Fcomponents\u002Fbb-tag":89,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":90,"\u002Fen\u002Fcomponents\u002Fbb-text-input":91,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":92,"\u002Fen\u002Fcomponents\u002Fbb-textarea":93,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":94,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":95,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":96,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":97,"\u002Fit\u002Fcomponenti\u002Fbb-toast":98,"\u002Fen\u002Fcomponents\u002Fbb-toast":99,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":100,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":101,"\u002Fit\u002Fcomponenti\u002Fbb-tree":102,"\u002Fen\u002Fcomponents\u002Fbb-tree":103,"\u002Fit\u002Fguide\u002Fadoption-checklist":104,"\u002Fen\u002Fguides\u002Fadoption-checklist":105,"\u002Fit\u002Fguide\u002Fai-agents":106,"\u002Fen\u002Fguides\u002Fai-agents":107,"\u002Fit\u002Fguide\u002Fcoherence":108,"\u002Fen\u002Fguides\u002Fcoherence":109,"\u002Fit\u002Fguide\u002Fdesign-language":110,"\u002Fen\u002Fguides\u002Fdesign-language":111,"\u002Fit\u002Fguide\u002Fdesign-tokens":112,"\u002Fen\u002Fguides\u002Fdesign-tokens":113,"\u002Fit\u002Fguide\u002Ffetching-data":114,"\u002Fen\u002Fguides\u002Ffetching-data":115,"\u002Fit\u002Fguide\u002Ficons":116,"\u002Fen\u002Fguides\u002Ficons":117,"\u002Fit\u002Fguide\u002Finertia":118,"\u002Fen\u002Fguides\u002Finertia":119,"\u002Fit\u002Fguide\u002Finstallation":120,"\u002Fen\u002Fguides\u002Finstallation":121,"\u002Fit\u002Fguide\u002Fmigration":122,"\u002Fen\u002Fguides\u002Fmigration":123,"\u002Fit\u002Fguide\u002Fnuxt":124,"\u002Fen\u002Fguides\u002Fnuxt":125,"\u002Fit\u002Fguide\u002Foptions-and-items":126,"\u002Fen\u002Fguides\u002Foptions-and-items":127,"\u002Fit\u002Fguide\u002Fpassthrough":128,"\u002Fen\u002Fguides\u002Fpassthrough":129,"\u002Fit\u002Fguide\u002Fpreset-components":130,"\u002Fen\u002Fguides\u002Fpreset-components":131,"\u002Fit\u002Fguide\u002Fvalidated-forms":132,"\u002Fen\u002Fguides\u002Fvalidated-forms":133},"\u002Fen\u002Fcomponents\u002Fbb-accordion","\u002Fit\u002Fcomponenti\u002Fbb-accordion","\u002Fen\u002Fcomponents\u002Fbb-alert","\u002Fit\u002Fcomponenti\u002Fbb-alert","\u002Fen\u002Fcomponents\u002Fbb-asterisk","\u002Fit\u002Fcomponenti\u002Fbb-asterisk","\u002Fen\u002Fcomponents\u002Fbb-avatar","\u002Fit\u002Fcomponenti\u002Fbb-avatar","\u002Fen\u002Fcomponents\u002Fbb-badge","\u002Fit\u002Fcomponenti\u002Fbb-badge","\u002Fen\u002Fcomponents\u002Fbb-base-button","\u002Fit\u002Fcomponenti\u002Fbb-base-button","\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs","\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs","\u002Fen\u002Fcomponents\u002Fbb-button","\u002Fit\u002Fcomponenti\u002Fbb-button","\u002Fen\u002Fcomponents\u002Fbb-calendar","\u002Fit\u002Fcomponenti\u002Fbb-calendar","\u002Fen\u002Fcomponents\u002Fbb-checkbox","\u002Fit\u002Fcomponenti\u002Fbb-checkbox","\u002Fen\u002Fcomponents\u002Fbb-checkbox-group","\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group","\u002Fen\u002Fcomponents\u002Fbb-collapsible","\u002Fit\u002Fcomponenti\u002Fbb-collapsible","\u002Fen\u002Fcomponents\u002Fbb-color-input","\u002Fit\u002Fcomponenti\u002Fbb-color-input","\u002Fen\u002Fcomponents\u002Fbb-color-palette","\u002Fit\u002Fcomponenti\u002Fbb-color-palette","\u002Fen\u002Fcomponents\u002Fbb-confirm","\u002Fit\u002Fcomponenti\u002Fbb-confirm","\u002Fen\u002Fcomponents\u002Fbb-date-picker","\u002Fit\u002Fcomponenti\u002Fbb-date-picker","\u002Fen\u002Fcomponents\u002Fbb-date-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input","\u002Fen\u002Fcomponents\u002Fbb-dialog","\u002Fit\u002Fcomponenti\u002Fbb-dialog","\u002Fen\u002Fcomponents\u002Fbb-dropdown","\u002Fit\u002Fcomponenti\u002Fbb-dropdown","\u002Fen\u002Fcomponents\u002Fbb-dropdown-button","\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button","\u002Fen\u002Fcomponents\u002Fbb-dropzone","\u002Fit\u002Fcomponenti\u002Fbb-dropzone","\u002Fen\u002Fcomponents\u002Fbb-form","\u002Fit\u002Fcomponenti\u002Fbb-form","\u002Fen\u002Fcomponents\u002Fbb-hover-card","\u002Fit\u002Fcomponenti\u002Fbb-hover-card","\u002Fen\u002Fcomponents\u002Fbb-icon","\u002Fit\u002Fcomponenti\u002Fbb-icon","\u002Fen\u002Fcomponents\u002Fbb-indicator","\u002Fit\u002Fcomponenti\u002Fbb-indicator","\u002Fen\u002Fcomponents\u002Fbb-number-input","\u002Fit\u002Fcomponenti\u002Fbb-number-input","\u002Fen\u002Fcomponents\u002Fbb-off-canvas","\u002Fit\u002Fcomponenti\u002Fbb-off-canvas","\u002Fen\u002Fcomponents\u002Fbb-pagination","\u002Fit\u002Fcomponenti\u002Fbb-pagination","\u002Fen\u002Fcomponents\u002Fbb-popover","\u002Fit\u002Fcomponenti\u002Fbb-popover","\u002Fen\u002Fcomponents\u002Fbb-progress","\u002Fit\u002Fcomponenti\u002Fbb-progress","\u002Fen\u002Fcomponents\u002Fbb-radio","\u002Fit\u002Fcomponenti\u002Fbb-radio","\u002Fen\u002Fcomponents\u002Fbb-radio-group","\u002Fit\u002Fcomponenti\u002Fbb-radio-group","\u002Fen\u002Fcomponents\u002Fbb-rating","\u002Fit\u002Fcomponenti\u002Fbb-rating","\u002Fen\u002Fcomponents\u002Fbb-select","\u002Fit\u002Fcomponenti\u002Fbb-select","\u002Fen\u002Fcomponents\u002Fbb-select-popover","\u002Fit\u002Fcomponenti\u002Fbb-select-popover","\u002Fen\u002Fcomponents\u002Fbb-slider","\u002Fit\u002Fcomponenti\u002Fbb-slider","\u002Fen\u002Fcomponents\u002Fbb-smooth-height","\u002Fit\u002Fcomponenti\u002Fbb-smooth-height","\u002Fen\u002Fcomponents\u002Fbb-spinner","\u002Fit\u002Fcomponenti\u002Fbb-spinner","\u002Fen\u002Fcomponents\u002Fbb-switch","\u002Fit\u002Fcomponenti\u002Fbb-switch","\u002Fen\u002Fcomponents\u002Fbb-switch-group","\u002Fit\u002Fcomponenti\u002Fbb-switch-group","\u002Fen\u002Fcomponents\u002Fbb-table","\u002Fit\u002Fcomponenti\u002Fbb-table","\u002Fen\u002Fcomponents\u002Fbb-tabs","\u002Fit\u002Fcomponenti\u002Fbb-tabs","\u002Fen\u002Fcomponents\u002Fbb-tag","\u002Fit\u002Fcomponenti\u002Fbb-tag","\u002Fen\u002Fcomponents\u002Fbb-text-input","\u002Fit\u002Fcomponenti\u002Fbb-text-input","\u002Fen\u002Fcomponents\u002Fbb-textarea","\u002Fit\u002Fcomponenti\u002Fbb-textarea","\u002Fen\u002Fcomponents\u002Fbb-time-picker","\u002Fit\u002Fcomponenti\u002Fbb-time-picker","\u002Fen\u002Fcomponents\u002Fbb-time-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input","\u002Fen\u002Fcomponents\u002Fbb-toast","\u002Fit\u002Fcomponenti\u002Fbb-toast","\u002Fen\u002Fcomponents\u002Fbb-tooltip","\u002Fit\u002Fcomponenti\u002Fbb-tooltip","\u002Fen\u002Fcomponents\u002Fbb-tree","\u002Fit\u002Fcomponenti\u002Fbb-tree","\u002Fen\u002Fguides\u002Fadoption-checklist","\u002Fit\u002Fguide\u002Fadoption-checklist","\u002Fen\u002Fguides\u002Fai-agents","\u002Fit\u002Fguide\u002Fai-agents","\u002Fen\u002Fguides\u002Fcoherence","\u002Fit\u002Fguide\u002Fcoherence","\u002Fen\u002Fguides\u002Fdesign-language","\u002Fit\u002Fguide\u002Fdesign-language","\u002Fen\u002Fguides\u002Fdesign-tokens","\u002Fit\u002Fguide\u002Fdesign-tokens","\u002Fen\u002Fguides\u002Ffetching-data","\u002Fit\u002Fguide\u002Ffetching-data","\u002Fen\u002Fguides\u002Ficons","\u002Fit\u002Fguide\u002Ficons","\u002Fen\u002Fguides\u002Finertia","\u002Fit\u002Fguide\u002Finertia","\u002Fen\u002Fguides\u002Finstallation","\u002Fit\u002Fguide\u002Finstallation","\u002Fen\u002Fguides\u002Fmigration","\u002Fit\u002Fguide\u002Fmigration","\u002Fen\u002Fguides\u002Fnuxt","\u002Fit\u002Fguide\u002Fnuxt","\u002Fen\u002Fguides\u002Foptions-and-items","\u002Fit\u002Fguide\u002Foptions-and-items","\u002Fen\u002Fguides\u002Fpassthrough","\u002Fit\u002Fguide\u002Fpassthrough","\u002Fen\u002Fguides\u002Fpreset-components","\u002Fit\u002Fguide\u002Fpreset-components","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",[135,150,162,186,198,242,275,311,332,353,365,371],{"label":136,"entries":137},"Getting started",[138,142,146],{"title":139,"path":140,"order":141},"Installation","\u002Fguides\u002Finstallation",1,{"title":143,"path":144,"order":145},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"title":147,"path":148,"order":149},"Adoption checklist","\u002Fguides\u002Fadoption-checklist",3,{"label":151,"entries":152},"Design system",[153,156,159],{"title":154,"path":155,"order":141},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":157,"path":158,"order":145},"Design language","\u002Fguides\u002Fdesign-language",{"title":160,"path":161,"order":149},"Passthrough","\u002Fguides\u002Fpassthrough",{"label":163,"entries":164},"Playbooks",[165,168,171,174,178,182],{"title":166,"path":167,"order":141},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":169,"path":170,"order":145},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":172,"path":173,"order":149},"Coherence","\u002Fguides\u002Fcoherence",{"title":175,"path":176,"order":177},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":179,"path":180,"order":181},"Icons","\u002Fguides\u002Ficons",5,{"title":183,"path":184,"order":185},"Preset components","\u002Fguides\u002Fpreset-components",6,{"label":187,"entries":188},"Ecosystem",[189,192,195],{"title":190,"path":191,"order":141},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":193,"path":194,"order":145},"Nuxt","\u002Fguides\u002Fnuxt",{"title":196,"path":197,"order":149},"AI agents","\u002Fguides\u002Fai-agents",{"label":199,"entries":200},"Inputs",[201,204,207,210,213,216,219,222,226,230,234,238],{"title":202,"path":203,"component":202,"order":141},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":205,"path":206,"component":205,"order":145},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":208,"path":209,"component":208,"order":149},"BbCalendar","\u002Fcomponents\u002Fbb-calendar",{"title":211,"path":212,"component":211,"order":149},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":214,"path":215,"component":214,"order":177},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":217,"path":218,"component":217,"order":181},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":220,"path":221,"component":220,"order":185},"BbForm","\u002Fcomponents\u002Fbb-form",{"title":223,"path":224,"component":223,"order":225},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":227,"path":228,"component":227,"order":229},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":231,"path":232,"component":231,"order":233},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":235,"path":236,"component":235,"order":237},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":239,"path":240,"component":239,"order":241},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":243,"entries":244},"Selection",[245,248,251,254,257,260,263,266,269,272],{"title":246,"path":247,"component":246,"order":141},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":249,"path":250,"component":249,"order":145},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":252,"path":253,"component":252,"order":149},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":255,"path":256,"component":255,"order":177},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":258,"path":259,"component":258,"order":181},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":261,"path":262,"component":261,"order":185},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":264,"path":265,"component":264,"order":225},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":267,"path":268,"component":267,"order":229},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":270,"path":271,"component":270,"order":233},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":273,"path":274,"component":273,"order":237},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":276,"entries":277},"Overlay",[278,281,284,287,290,293,296,299,302,305,308],{"title":279,"path":280,"component":279,"order":141},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":282,"path":283,"component":282,"order":145},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":285,"path":286,"component":285,"order":149},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":288,"path":289,"component":288,"order":177},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":291,"path":292,"component":291,"order":181},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":294,"path":295,"component":294,"order":185},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":297,"path":298,"component":297,"order":225},"BbHoverCard","\u002Fcomponents\u002Fbb-hover-card",{"title":300,"path":301,"component":300,"order":225},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":303,"path":304,"component":303,"order":229},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":306,"path":307,"component":306,"order":233},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":309,"path":310,"component":309,"order":237},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":312,"entries":313},"Navigation",[314,317,320,323,326,329],{"title":315,"path":316,"component":315,"order":141},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":318,"path":319,"component":318,"order":145},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":321,"path":322,"component":321,"order":149},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":324,"path":325,"component":324,"order":177},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":327,"path":328,"component":327,"order":181},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":330,"path":331,"component":330,"order":185},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":333,"entries":334},"Feedback",[335,338,341,344,347,350],{"title":336,"path":337,"component":336,"order":141},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":339,"path":340,"component":339,"order":145},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":342,"path":343,"component":342,"order":149},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":345,"path":346,"component":345,"order":177},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":348,"path":349,"component":348,"order":181},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":351,"path":352,"component":351,"order":185},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":354,"entries":355},"Data Display",[356,359,362],{"title":357,"path":358,"component":357,"order":141},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":360,"path":361,"component":360,"order":145},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":363,"path":364,"component":363,"order":149},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":366,"entries":367},"Layout & Utility",[368],{"title":369,"path":370,"component":369,"order":141},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":372,"entries":373},"Other",[374],{"title":375,"path":376,"component":375,"order":141},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",null,{"id":379,"title":303,"body":380,"component":303,"description":1313,"extension":1314,"group":276,"meta":1315,"navigation":1149,"order":229,"path":304,"sections":1316,"seo":1324,"stem":1325,"__hash__":1326},"docs_en\u002Fcomponents\u002Fbb-popover.md",{"type":381,"value":382,"toc":1298},"minimark",[383,438,446,460,467,471,483,488,495,505,525,537,543,546,549,559,566,579,586,596,605,611,641,644,650,653,689,692,713,719,727,730,745,748,752,769,772,782,790,796,813,816,832,842,858,879,885,896,899,937,953,959,965,968,993,1000,1027,1030,1034,1055,1092,1214,1245,1273,1294],[384,385,386,394],"when",{},[387,388,389,390,393],"p",{},"Reach for ",[391,392,303],"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.",[395,396,398],"template",{"v-slot:else":397},"",[399,400,401,410,417,424,431],"ul",{},[402,403,404,409],"li",{},[405,406,407],"a",{"href":100},[391,408,309],{},": the reader only needs a sentence\nabout the control in front of them",[402,411,412,416],{},[405,413,414],{"href":48},[391,415,297],{},": the panel previews what a\nlink points at and should open on hover, not on click",[402,418,419,423],{},[405,420,421],{"href":40},[391,422,291],{},": the panel is only a list of\nactions",[402,425,426,430],{},[405,427,428],{"href":38},[391,429,288],{},": the task owns the page until it is\nresolved",[402,432,433,437],{},[405,434,435],{"href":56},[391,436,300],{},": it is supplementary side\ncontent, docked to an edge rather than to a control",[439,440,442],"h2",{"id":441},"task",[443,444,445],"span",{},"Edit in place",[387,447,448,449,455,456,459],{},"Put your trigger in the ",[405,450,452],{"href":451},"\u002Fen\u002Fcomponents\u002Fbb-popover\u002Fapi#slot-activator",[391,453,454],{},"activator"," slot and spread its ",[391,457,458],{},"props"," onto it.",[387,461,462,463,466],{},"That one spread is the whole contract: it carries the anchor, the element ",[391,464,465],{},"id",",\nthe ARIA attributes and the open handler. Miss it and you get a button that\nlooks right and does nothing.",[468,469],"demo",{"name":470},"BbPopover\u002FRenameForm",[387,472,473,479,480,482],{},[405,474,476],{"href":475},"\u002Fen\u002Fcomponents\u002Fbb-popover\u002Fapi#prop-width",[391,477,478],{},"width"," takes pixels, or a percentage of the trigger's width. Only the\npercentage form re-measures when the trigger resizes; leave ",[391,481,478],{}," off and the\npanel sizes to its content.",[484,485,487],"h3",{"id":486},"closing-the-panel","Closing the panel",[387,489,490,491,494],{},"The floating panel renders no close button of its own. The affordance is\nyours, and the default slot hands you ",[391,492,493],{},"close",".",[387,496,497,498,500,501,504],{},"Call ",[391,499,493],{}," after the write, not before. A handler that dismisses first and\ncommits second is one early ",[391,502,503],{},"return"," away from losing the edit silently.",[387,506,507,508,514,515,521,522,524],{},"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 ",[405,509,511],{"href":510},"\u002Fen\u002Fcomponents\u002Fbb-popover\u002Fapi#slot-header",[391,512,513],{},"header"," and ",[405,516,518],{"href":517},"\u002Fen\u002Fcomponents\u002Fbb-popover\u002Fapi#slot-footer",[391,519,520],{},"footer","\nslots receive ",[391,523,493],{}," on the same scope.",[526,527,528],"migration",{},[387,529,530,514,533,536],{},[391,531,532],{},"show-close",[391,534,535],{},"close-label"," are gone.",[439,538,540],{"id":539},"focus",[443,541,542],{},"Focus and the page behind",[387,544,545],{},"Opening moves focus to the first focusable element in the panel; closing\nreturns it to the trigger.",[468,547],{"name":548},"BbPopover\u002FFocusTarget",[387,550,551,552,558],{},"When that first element is not the one the reader came for, point\n",[405,553,555],{"href":554},"\u002Fen\u002Fcomponents\u002Fbb-popover\u002Fapi#prop-focusTarget",[391,556,557],{},"focus-target"," at the right one with a CSS selector.",[387,560,561,562,565],{},"The page behind stays live. A click outside closes the panel and still reaches\nwhat was clicked (focus stays there), and ",[391,563,564],{},"Tab"," past the last control leaves\nthe panel and closes it.",[387,567,568,569,575,576,578],{},"Set ",[405,570,572],{"href":571},"\u002Fen\u002Fcomponents\u002Fbb-popover\u002Fapi#prop-modal",[391,573,574],{},"modal"," when the reader must\nfinish or dismiss the panel first: the page goes inert, ",[391,577,564],{}," stays inside, and\nan outside click only closes it. The phone sheet is modal either way.",[387,580,581,582,585],{},"Never open the popover from a ",[391,583,584],{},"@focus"," handler on the trigger: closing hands\nfocus back to it, which opens the panel again.",[387,587,588,589,592,593,494],{},"The panel paints in the top layer, so it is never clipped by an\n",[391,590,591],{},"overflow: hidden"," ancestor and never needs a ",[391,594,595],{},"z-index",[526,597,598],{},[387,599,600,601,604],{},"The ",[391,602,603],{},"restore-focus"," prop is gone. Restoring focus is behaviour now, not a knob.",[439,606,608],{"id":607},"placement",[443,609,610],{},"Placement and geometry",[387,612,613,618,619,622,623,626,627,514,630,633,634,514,637,640],{},[405,614,616],{"href":615},"\u002Fen\u002Fcomponents\u002Fbb-popover\u002Fapi#prop-placement",[391,617,607],{}," puts the panel on a side of the trigger: the ",[391,620,621],{},"top",", ",[391,624,625],{},"right",",\n",[391,628,629],{},"bottom",[391,631,632],{},"left"," families, each with ",[391,635,636],{},"-start",[391,638,639],{},"-end"," alignment.",[468,642],{"name":643},"BbPopover\u002FPlacement",[387,645,646,647,649],{},"It defaults to ",[391,648,629],{},", and it flips itself near a viewport edge. Pick what\nreads best in the common case rather than guarding against the exception.",[387,651,652],{},"Three props tune the rest:",[399,654,655,668,680],{},[402,656,657,663,664,667],{},[405,658,660],{"href":659},"\u002Fen\u002Fcomponents\u002Fbb-popover\u002Fapi#prop-offset",[391,661,662],{},"offset",": the gap from the trigger (",[391,665,666],{},"4",")",[402,669,670,676,677,667],{},[405,671,673],{"href":672},"\u002Fen\u002Fcomponents\u002Fbb-popover\u002Fapi#prop-padding",[391,674,675],{},"padding",": the gap the panel keeps from the page edge (",[391,678,679],{},"10",[402,681,682,688],{},[405,683,685],{"href":684},"\u002Fen\u002Fcomponents\u002Fbb-popover\u002Fapi#prop-boundary",[391,686,687],{},"boundary",": an element, ref or selector the panel stays inside alongside\nits trigger, usually a sidebar or a table. Away from the trigger it may pass\nthat edge; only the viewport flips it",[387,690,691],{},"The panel stays tethered to its trigger: scroll the trigger out of view and the\npopover closes.",[526,693,694],{},[387,695,696,697,514,700,703,704,707,708,712],{},"A popover no longer draws an arrow, so ",[391,698,699],{},"hide-arrow",[391,701,702],{},"arrow-padding"," are\ngone. If you passed ",[391,705,706],{},":hide-arrow=\"false\""," in v2 to get a bubble with a point on\nit, that shape is a ",[405,709,710],{"href":100},[391,711,309],{}," now.",[439,714,716],{"id":715},"scrollable",[443,717,718],{},"Header, footer and long content",[387,720,721,726],{},[405,722,724],{"href":723},"\u002Fen\u002Fcomponents\u002Fbb-popover\u002Fapi#prop-scrollable",[391,725,715],{}," caps the panel at the height still available and scrolls the body\ninside it.",[468,728],{"name":729},"BbPopover\u002FNotifications",[387,731,600,732,514,736,740,741,744],{},[405,733,734],{"href":510},[391,735,513],{},[405,737,738],{"href":517},[391,739,520],{}," slots sit outside that scroll region, each with its\nown padding and divider. A title stays put and footer actions stay reachable\nwithout a ",[391,742,743],{},"sticky"," workaround.",[387,746,747],{},"Use it for feeds and long lists. Leave it off for atomic content: a calendar\nthat scrolls internally is a worse calendar.",[484,749,751],{"id":750},"triggers-and-cursor-anchoring","Triggers and cursor anchoring",[387,753,754,760,761,764,765,768],{},[405,755,757],{"href":756},"\u002Fen\u002Fcomponents\u002Fbb-popover\u002Fapi#prop-trigger",[391,758,759],{},"trigger"," chooses the gesture: ",[391,762,763],{},"click"," by default, ",[391,766,767],{},"contextMenu"," for right-click\nand long-press, or an array to accept both.",[468,770],{"name":771},"BbPopover\u002FContextPanel",[387,773,774,775,777,778,781],{},"Pair ",[391,776,767],{}," with ",[391,779,780],{},"placement=\"cursor\""," and the panel anchors where the\npointer was rather than on the element.",[387,783,784,785,789],{},"Keep the distinction: a plain list of actions is\n",[405,786,787],{"href":40},[391,788,291],{},". A context popover earns its place\nwhen the surface holds controls the user operates in place.",[439,791,793],{"id":792},"control",[443,794,795],{},"Driving it from outside",[387,797,798,804,805,808,809,812],{},[405,799,801],{"href":800},"\u002Fen\u002Fcomponents\u002Fbb-popover\u002Fapi#model-modelValue",[391,802,803],{},"v-model"," opens and closes the popover: write ",[391,806,807],{},"true"," to open and ",[391,810,811],{},"false"," to\nclose. Any control can write it, like the Change link below, and the popover\nwrites the model back on every dismiss, so reading it stays accurate.",[468,814],{"name":815},"BbPopover\u002FExternalActivator",[387,817,818,823,824,826,827,831],{},[405,819,821],{"href":820},"\u002Fen\u002Fcomponents\u002Fbb-popover\u002Fapi#prop-activator",[391,822,454],{}," 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 ",[391,825,458],{}," to spread, and\nthe ",[405,828,829],{"href":451},[391,830,454],{}," slot is not rendered.",[387,833,834,835,841],{},"The body is lazy: it renders on the first open. Set\n",[405,836,838],{"href":837},"\u002Fen\u002Fcomponents\u002Fbb-popover\u002Fapi#prop-eager",[391,839,840],{},"eager"," to render it at mount, for a\nchart that must measure itself or a test that queries a closed panel.",[387,843,844,850,851,857],{},[405,845,847],{"href":846},"\u002Fen\u002Fcomponents\u002Fbb-popover\u002Fapi#event-shown",[391,848,849],{},"@shown"," fires once the open transition has run and focus is inside the\npanel, and ",[405,852,854],{"href":853},"\u002Fen\u002Fcomponents\u002Fbb-popover\u002Fapi#event-hidden",[391,855,856],{},"@hidden"," once the panel has closed. Both wait for the transition on the floating panel and on the sheet,\nso they are the safe place to measure or to move focus yourself.",[526,859,860],{},[387,861,862,622,865,514,868,871,872,874,875,878],{},[391,863,864],{},"popoverRef.value.show()",[391,866,867],{},".close()",[391,869,870],{},".isOpen"," are gone, replaced by\n",[391,873,803],{},". In an untyped template the leftover call is ",[391,876,877],{},"undefined"," at runtime\nrather than a compile error, which makes it the quietest break on this\ncomponent.",[439,880,882],{"id":881},"per-row",[443,883,884],{},"One trigger per row",[387,886,887,888,891,892,895],{},"A rename button on every row means two component instances per row before\nanyone opens anything. The ",[391,889,890],{},"v-bb-popover"," directive costs what a plain button\ncosts: the trigger carries ",[391,893,894],{},"aria-haspopup=\"dialog\""," and nothing else until the\nclick that opens it. From then on it is the full popover, focus handling\nincluded.",[468,897],{"name":898},"BbPopover\u002FRowTriggers",[387,900,901,902,905,906,909,910,913,914,917,918,921,922,924,925,928,929,931,932,514,935,494],{},"A directive has no slot, so the body is a portal. Declare a ",[391,903,904],{},"BbPopoverPortal","\nonce and open it by name, with the name in inner quotes\n(",[391,907,908],{},"v-bb-popover=\"'rename-report'\"","); a bare ",[391,911,912],{},"rename-report"," is a subtraction and\nopens nothing. The portal's slot gets ",[391,915,916],{},"{ data, close }",", where ",[391,919,920],{},"data"," is the\nbinding's ",[391,923,920],{},". The argument is the placement (",[391,926,927],{},"v-bb-popover:bottom-end","), and\nthe object form takes any ",[391,930,303],{}," prop beside ",[391,933,934],{},"portal",[391,936,920],{},[387,938,939,940,943,944,946,947,949,950,952],{},"Passing a component instead (",[391,941,942],{},"v-bb-popover=\"RenameForm\"",") renders it with\nthe keys of ",[391,945,920],{}," as its props, but it has no way to close the popover. Content\nthat needs ",[391,948,493],{}," is a named portal or a ",[391,951,303],{}," in the template.",[439,954,956],{"id":955},"adaptive",[443,957,958],{},"The mobile sheet",[387,960,961,962,964],{},"Below 768px a popover opens as a bottom-anchored, draggable ",[391,963,300],{}," sheet\ninstead of a floating panel.",[468,966],{"name":967},"BbPopover\u002FMobileSheet",[387,969,970,971,622,975,514,981,985,986,992],{},"That is the shipped behaviour, and the ",[405,972,973],{"href":510},[391,974,513],{},[405,976,978],{"href":977},"\u002Fen\u002Fcomponents\u002Fbb-popover\u002Fapi#slot-default",[391,979,980],{},"default",[405,982,983],{"href":517},[391,984,520],{}," slots\ncarry over unchanged. Pass ",[405,987,989],{"href":988},"\u002Fen\u002Fcomponents\u002Fbb-popover\u002Fapi#prop-adaptive",[391,990,991],{},":adaptive=\"false\""," to keep the floating panel at\nevery width.",[387,994,995,996,999],{},"The sheet shows a close button × that the floating panel does not have, so a\npopover holding a form always has a way out on a phone. When your own footer\nalready closes it, hide the × with ",[391,997,998],{},":off-canvas-props=\"{ hideClose: true }\"",", as\nthe rename and settings demos above do.",[387,1001,1002,1010,1011,1017,1018,622,1021,622,1024,494],{},[1003,1004,1005,1009],"strong",{},[405,1006,1007],{"href":475},[391,1008,478],{}," is ignored in sheet mode."," A sheet\nsizes itself. Tune it with ",[405,1012,1014],{"href":1013},"\u002Fen\u002Fcomponents\u002Fbb-popover\u002Fapi#prop-offCanvasProps",[391,1015,1016],{},"off-canvas-props",", which merges over the defaults\n",[391,1019,1020],{},"side: 'bottom'",[391,1022,1023],{},"size: 'auto'",[391,1025,1026],{},"draggable: true",[387,1028,1029],{},"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.",[484,1031,1033],{"id":1032},"styling-the-floating-and-sheet-surfaces","Styling the floating and sheet surfaces",[387,1035,1036,1037,1040,1041,622,1044,1047,1048,1051,1052,1054],{},"The panel takes its paint from the theme tokens and gives you four class hooks:\n",[391,1038,1039],{},".bb-popover__panel",", the bordered box, and ",[391,1042,1043],{},"__header",[391,1045,1046],{},"__content"," and\n",[391,1049,1050],{},"__footer"," inside it. Every ",[391,1053,303],{}," in the project carries them, so put your\nown class on the popover and scope the rules to it.",[1056,1057,1061],"pre",{"className":1058,"code":1059,"language":1060,"meta":397,"style":397},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003CBbPopover class=\"team-popover\">…\u003C\u002FBbPopover>\n","vue",[391,1062,1063],{"__ignoreMap":397},[443,1064,1066,1070,1073,1077,1080,1084,1087,1089],{"class":1065,"line":141},"line",[443,1067,1069],{"class":1068},"suds8","\u003C",[443,1071,303],{"class":1072},"sne4z",[443,1074,1076],{"class":1075},"s-5SL"," class",[443,1078,1079],{"class":1068},"=",[443,1081,1083],{"class":1082},"sT6z2","\"team-popover\"",[443,1085,1086],{"class":1068},">…\u003C\u002F",[443,1088,303],{"class":1072},[443,1090,1091],{"class":1068},">\n",[1056,1093,1097],{"className":1094,"code":1095,"language":1096,"meta":397,"style":397},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".team-popover .bb-popover__header {\n    padding: 12px;\n    font-weight: 600;\n}\n\n.team-popover .bb-popover__content {\n    padding: 12px;\n}\n\n.team-popover .bb-popover__footer {\n    background-color: var(--bb-muted);\n}\n","css",[391,1098,1099,1110,1128,1140,1145,1151,1160,1172,1176,1180,1189,1209],{"__ignoreMap":397},[443,1100,1101,1104,1107],{"class":1065,"line":141},[443,1102,1103],{"class":1075},".team-popover",[443,1105,1106],{"class":1075}," .bb-popover__header",[443,1108,1109],{"class":1068}," {\n",[443,1111,1112,1115,1118,1121,1125],{"class":1065,"line":145},[443,1113,1114],{"class":1075},"    padding",[443,1116,1117],{"class":1068},": ",[443,1119,1120],{"class":1075},"12",[443,1122,1124],{"class":1123},"sHUrx","px",[443,1126,1127],{"class":1068},";\n",[443,1129,1130,1133,1135,1138],{"class":1065,"line":149},[443,1131,1132],{"class":1075},"    font-weight",[443,1134,1117],{"class":1068},[443,1136,1137],{"class":1075},"600",[443,1139,1127],{"class":1068},[443,1141,1142],{"class":1065,"line":177},[443,1143,1144],{"class":1068},"}\n",[443,1146,1147],{"class":1065,"line":181},[443,1148,1150],{"emptyLinePlaceholder":1149},true,"\n",[443,1152,1153,1155,1158],{"class":1065,"line":185},[443,1154,1103],{"class":1075},[443,1156,1157],{"class":1075}," .bb-popover__content",[443,1159,1109],{"class":1068},[443,1161,1162,1164,1166,1168,1170],{"class":1065,"line":225},[443,1163,1114],{"class":1075},[443,1165,1117],{"class":1068},[443,1167,1120],{"class":1075},[443,1169,1124],{"class":1123},[443,1171,1127],{"class":1068},[443,1173,1174],{"class":1065,"line":229},[443,1175,1144],{"class":1068},[443,1177,1178],{"class":1065,"line":233},[443,1179,1150],{"emptyLinePlaceholder":1149},[443,1181,1182,1184,1187],{"class":1065,"line":237},[443,1183,1103],{"class":1075},[443,1185,1186],{"class":1075}," .bb-popover__footer",[443,1188,1109],{"class":1068},[443,1190,1191,1194,1196,1199,1202,1206],{"class":1065,"line":241},[443,1192,1193],{"class":1075},"    background-color",[443,1195,1117],{"class":1068},[443,1197,1198],{"class":1075},"var",[443,1200,1201],{"class":1068},"(",[443,1203,1205],{"class":1204},"soyes","--bb-muted",[443,1207,1208],{"class":1068},");\n",[443,1210,1212],{"class":1065,"line":1211},12,[443,1213,1144],{"class":1068},[387,1215,1216,1217,1219,1220,1223,1224,1230,1231,1234,1235,622,1238,514,1241,1244],{},"Those hooks and your class live on the floating panel only. Below 768px the\npopover is a ",[391,1218,300],{}," sheet that neither reaches. A class on the popover\nlands on an invisible positioning wrapper the sheet does not have, though a\n",[391,1221,1222],{},"data-*"," attribute still gets there. When a look has to hold on a phone, set it\nthrough ",[405,1225,1227],{"href":1226},"\u002Fen\u002Fcomponents\u002Fbb-popover\u002Fapi#prop-pt",[391,1228,1229],{},"pt",". ",[391,1232,1233],{},"pt:panel"," is the bordered box on desktop and the sheet itself on\na phone, and ",[391,1236,1237],{},"pt:header",[391,1239,1240],{},"pt:content",[391,1242,1243],{},"pt:footer"," follow the bands into the\nsheet.",[387,1246,1247,1248,1251,1252,1254,1255,626,1258,622,1261,1264,1265,1268,1269,1272],{},"Keep the look off ",[391,1249,1250],{},"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 ",[391,1253,1233],{}," (",[391,1256,1257],{},"rounded-md",[391,1259,1260],{},"w-64",[391,1262,1263],{},"px-1",") reshapes the sheet too: correct it for the phone with\n",[391,1266,1267],{},"pt:sheet",", which wins there. And keep ",[391,1270,1271],{},"overflow-hidden"," off a panel that can\nbecome a sheet, or a gap shows under it while it is dragged.",[526,1274,1275],{},[387,1276,1277,1280,1281,622,1284,622,1287,1290,1291,494],{},[391,1278,1279],{},"theme"," is gone. Colour comes from ",[391,1282,1283],{},"--bb-panel",[391,1285,1286],{},"--bb-border",[391,1288,1289],{},"--bb-radius","\nand ",[391,1292,1293],{},"--bb-shadow",[1295,1296,1297],"style",{},"html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .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}",{"title":397,"searchDepth":149,"depth":149,"links":1299},[1300,1303,1304,1305,1308,1309,1310],{"id":441,"depth":145,"text":445,"children":1301},[1302],{"id":486,"depth":149,"text":487},{"id":539,"depth":145,"text":542},{"id":607,"depth":145,"text":610},{"id":715,"depth":145,"text":718,"children":1306},[1307],{"id":750,"depth":149,"text":751},{"id":792,"depth":145,"text":795},{"id":881,"depth":145,"text":884},{"id":955,"depth":145,"text":958,"children":1311},[1312],{"id":1032,"depth":149,"text":1033},"A floating panel anchored to a trigger, for content the reader moves into and acts on.","md",{},[1317,1318,1319,1320,1321,1322,1323],{"id":441,"title":445},{"id":539,"title":542},{"id":607,"title":610},{"id":715,"title":718},{"id":792,"title":795},{"id":881,"title":884},{"id":955,"title":958},{"title":303,"description":1313},"components\u002Fbb-popover","1n146CDnHX-tNZShSfkJOW9XZAFbQEKXeIpKrWZKwA0",{"name":303,"slug":1328,"group":276,"description":1329,"entrypoint":1330,"docs":1331,"props":1334,"models":1409,"events":1412,"slots":1432,"exposed":1445,"pt":1446,"validated":377,"migration":1468},"bb-popover","Anchors floating content to reference elements; also the v-bb-popover directive (its body is a BbPopoverPortal or a component).","bitboss-ui",{"contract":1332,"source":1333},"ai\u002FBbPopover.md","ai\u002Fsource\u002FBbPopover.md",[1335,1340,1345,1349,1353,1356,1361,1363,1366,1369,1374,1377,1380,1385,1388,1393,1396,1400,1405],{"name":454,"type":1336,"required":1337,"default":377,"description":1338,"note":1339,"demo":792},"ElementOrComponentRef | undefined",false,"External activator element or component ref. When provided, the activator slot is not rendered and click events are 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":955,"type":1341,"required":1337,"default":1342,"description":1343,"note":1344,"demo":955},"boolean | undefined","`config.adaptive` (`true`)","On mobile (below `config.mobileMaxWidth`), renders as a bottom sheet instead of a floating panel, with the same `header`, `default` and `footer` slots. `width` is ignored there: size the sheet with `offCanvasProps`. Unset: 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":687,"type":1346,"required":1337,"default":377,"description":1347,"note":1348,"demo":607},"ElementOrComponentRefOrSelector | undefined","Constrains the popover within a bounding element: it stays inside it alongside its trigger (sideways for a popover above or below); away from the trigger it may pass the edge, and it flips at the viewport only. Accepts 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":1350,"type":1341,"required":1337,"default":811,"description":1351,"note":1352,"demo":377},"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":840,"type":1341,"required":1337,"default":811,"description":1354,"note":1355,"demo":377},"Renders the panel's content at mount instead of on the first open (the phone sheet's too).","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":1357,"type":1358,"required":1337,"default":377,"description":1359,"note":1360,"demo":539},"focusTarget","string | undefined","Selector for the element that receives focus after opening. Defaults 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":465,"type":1358,"required":1337,"default":377,"description":1362,"note":377,"demo":377},"The activator's id (the panel is `bbp_\u003Cid>` and is labelled by it). Generated when omitted.",{"name":574,"type":1341,"required":1337,"default":811,"description":1364,"note":1365,"demo":539},"Makes the floating panel modal: the page behind is inert and does not scroll, and Tab stays inside. Off, it is a non-modal dialog: an outside click closes it and still lands, and tabbing out closes it. The phone sheet is modal either way.","Off by default: the page stays live, an outside click closes the panel and still reaches its target, and Tab past the last control closes it. Turn it on when the reader must finish or dismiss the panel first. The phone sheet is modal either way.",{"name":1367,"type":1341,"required":1337,"default":811,"description":1368,"note":377,"demo":377},"modelValue","Used by v-model to open \u002F close the popover. A popover with no `v-model` starts closed and is driven by its `trigger`.",{"name":1370,"type":1371,"required":1337,"default":377,"description":1372,"note":1373,"demo":955},"offCanvasProps","Partial\u003CBbOffCanvasProps> | undefined","Props for the phone sheet (the `BbOffCanvas` that `adaptive` renders on mobile), spread over its defaults. A `pt` inside it styles only the sheet (passthrough guide § Inside the sheet).","The properties are `BbOffCanvas`'s own — `side`, `size`, `draggable`, `title`, `hideClose` — merged over the adaptive defaults. This is also the only way to size the sheet, since `width` is ignored in that mode, and the way to drop the sheet's × when your footer already closes.",{"name":662,"type":1375,"required":1337,"default":666,"description":1376,"note":377,"demo":607},"number | undefined","Space the floating container will maintain from the activator.",{"name":675,"type":1375,"required":1337,"default":679,"description":1378,"note":1379,"demo":607},"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":607,"type":1381,"required":1337,"default":1382,"description":1383,"note":1384,"demo":607},"Placement | \"cursor\" | undefined","\"bottom\"","Position of the popover relative to the activator. Use `'cursor'` to anchor at the mouse\u002Ftouch coordinates. (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":1229,"type":1386,"required":1337,"default":377,"description":1387,"note":377,"demo":377},"PtMap\u003CBbPopoverPtPart, \"open\"> | undefined","Passthrough, object form: the same keys as the `pt:*` attributes without the prefix. See the `pt:\u003Cpart>` row.",{"name":1389,"type":1390,"required":1337,"default":377,"description":1391,"note":377,"demo":1392},"pt:\u003Cpart>","PtValue | undefined","Passthrough, attribute form: one attribute per part, `pt:\u003Cpart>`, and per part and state, `pt:\u003Cpart>:\u003Cstate>`. Parts: `content`, `footer`, `header`, `panel`, `root`, `sheet`. States: `open`.","passthrough",{"name":715,"type":1341,"required":1337,"default":811,"description":1394,"note":1395,"demo":715},"Caps the popover height to the available viewport space and enables internal scrolling. Useful 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":1397,"type":1375,"required":1337,"default":1398,"description":1399,"note":377,"demo":377},"transitionDuration","250","How long the transition has to last in milliseconds.",{"name":759,"type":1401,"required":1337,"default":1402,"description":1403,"note":1404,"demo":715},"PopoverTrigger | PopoverTrigger[] | undefined","\"click\"","Interaction(s) that open the popover. Accepts 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":478,"type":1406,"required":1337,"default":377,"description":1407,"note":1408,"demo":441},"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.",[1410],{"name":1367,"type":1341,"note":1411,"demo":792},"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.",[1413,1418,1421,1424,1428],{"name":1414,"signature":1415,"description":1416,"note":1417,"demo":792},"hidden","(): void","Emitted after the popover is closed and focus has been restored to the activator.","Fires once the close transition has run and focus is back on the trigger, on both surfaces.",{"name":1419,"signature":1415,"description":1420,"note":377,"demo":377},"hide","Emitted as soon as the popover starts to close (model becomes false).",{"name":1422,"signature":1415,"description":1423,"note":377,"demo":377},"show","Emitted as soon as the popover starts to open (model becomes true).",{"name":1425,"signature":1415,"description":1426,"note":1427,"demo":792},"shown","Emitted after the popover is fully opened and focus has been moved inside.","Fires once the open transition has run and focus has moved inside, on the floating panel and on the phone sheet alike: the safe point for anything that assumes focus has settled.",{"name":1429,"signature":1430,"description":1431,"note":377,"demo":377},"update:modelValue","(value: boolean): void","Emitted with the new value whenever `v-model` changes.",[1433,1437,1441,1443],{"name":454,"type":1434,"description":1435,"note":1436,"demo":441},"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 `open`, `placement` and `disabled` so the trigger can react.",{"name":980,"type":1438,"description":1439,"note":1440,"demo":441},"BbPopoverDefaultSlotProps","The popover body content rendered inside the floating panel.","The scope carries `close`. The floating panel has no close button of its own (the phone sheet shows one), so this is where a Cancel or Done control comes from. Commit first, then call it.",{"name":520,"type":1438,"description":1442,"note":377,"demo":715},"Content pinned to the bottom of the panel, outside the scroll region. Stays visible while the body scrolls (when `scrollable`) and carries its own padding and top divider, so footer actions need no negative-margin or `sticky` workarounds.",{"name":513,"type":1438,"description":1444,"note":377,"demo":715},"Content pinned to the top of the panel, outside the scroll region. Stays visible while the body scrolls (when `scrollable`) and carries its own padding and bottom divider, so a title or search field needs no negative-margin or `sticky` workarounds.",[],{"parts":1447,"states":1464},[1448,1451,1454,1457,1459,1462],{"name":1449,"description":1450},"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":1452,"description":1453},"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":1455,"description":1456},"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":513,"description":1458},"The header band (on a phone, the sheet's).",{"name":1460,"description":1461},"content","The body band (on a phone, the sheet's).",{"name":520,"description":1463},"The footer band (on a phone, the sheet's).",[1465],{"name":1466,"description":1467},"open","Component-wide: the popover is open.",{"removed":1469,"renamed":1508},[1470,1477,1480,1485,1488,1491,1495,1498,1500,1503,1506],{"name":1471,"surface":1472,"replacedBy":377,"hint":377,"since":1473,"migration":1474,"silent":1149,"fix":1475},"arrowPadding","prop","3.0.0-alpha.1","ai\u002Fguides\u002Fmigration\u002Fcomponents\u002Fbb-popover.md",{"kind":1476},"remove",{"name":1478,"surface":1472,"replacedBy":377,"hint":377,"since":1473,"migration":1474,"silent":1149,"fix":1479},"block",{"kind":1476},{"name":493,"surface":1481,"replacedBy":377,"hint":1482,"since":1473,"migration":1474,"silent":1149,"fix":1483},"method","no template-ref API in v3: bind `v-model` and write `true` \u002F `false`; the popover writes `false` back when it is dismissed",{"kind":1484},"manual",{"name":1486,"surface":1472,"replacedBy":377,"hint":377,"since":1473,"migration":1474,"silent":1149,"fix":1487},"closeLabel",{"kind":1484},{"name":1489,"surface":1472,"replacedBy":377,"hint":377,"since":1473,"migration":1474,"silent":1149,"fix":1490},"hideArrow",{"kind":1476},{"name":1492,"surface":1481,"replacedBy":377,"hint":1493,"since":1473,"migration":1474,"silent":1149,"fix":1494},"isOpen","read the `v-model` value instead",{"kind":1484},{"name":1496,"surface":1472,"replacedBy":377,"hint":377,"since":1473,"migration":1474,"silent":1149,"fix":1497},"restoreFocus",{"kind":1484},{"name":1422,"surface":1481,"replacedBy":377,"hint":1482,"since":1473,"migration":1474,"silent":1149,"fix":1499},{"kind":1484},{"name":1501,"surface":1472,"replacedBy":377,"hint":377,"since":1473,"migration":1474,"silent":1149,"fix":1502},"showArrow",{"kind":1476},{"name":1504,"surface":1472,"replacedBy":377,"hint":377,"since":1473,"migration":1474,"silent":1149,"fix":1505},"showClose",{"kind":1484},{"name":1279,"surface":1472,"replacedBy":377,"hint":377,"since":1473,"migration":1474,"silent":1149,"fix":1507},{"kind":1484},[],1793055142604]