bitboss-ui 3.0.0-beta.47 → 3.0.0-beta.49

package/dist/ai/source/BbOffCanvas.md

@@ -1428,12 +1428,14 @@ export type BbOffCanvasSlots = {
 	}
 	&.bb-offcanvas--right::after {
 		bottom: 0;
+		/* stylelint-disable-next-line property-disallowed-list -- geometry: the `side` prop names a physical edge */
 		left: 100%;
 		top: 0;
 		width: var(--stack-fill);
 	}
 	&.bb-offcanvas--left::after {
 		bottom: 0;
+		/* stylelint-disable-next-line property-disallowed-list -- geometry: the `side` prop names a physical edge */
 		right: 100%;
 		top: 0;
 		width: var(--stack-fill);
@@ -1441,13 +1443,13 @@ export type BbOffCanvasSlots = {
 	&.bb-offcanvas--top::after {
 		bottom: 100%;
 		height: var(--stack-fill);
-		left: 0;
-		right: 0;
+		inset-inline-end: 0;
+		inset-inline-start: 0;
 	}
 	&.bb-offcanvas--bottom::after {
 		height: var(--stack-fill);
-		left: 0;
-		right: 0;
+		inset-inline-end: 0;
+		inset-inline-start: 0;
 		top: 100%;
 	}
 
@@ -1474,6 +1476,7 @@ export type BbOffCanvasSlots = {
 		--inset-left: var(--safe-left);
 		--translate-x: -100%;
 		border-radius: 0 var(--bb-radius-surface) var(--bb-radius-surface) 0;
+		/* stylelint-disable-next-line property-disallowed-list -- geometry: the `side` prop names a physical edge */
 		left: 0px;
 		transform-origin: left center;
 	}
@@ -1483,14 +1486,17 @@ export type BbOffCanvasSlots = {
 		--inset-bottom: var(--safe-bottom);
 		--translate-x: 100%;
 		border-radius: var(--bb-radius-surface) 0 0 var(--bb-radius-surface);
+		/* stylelint-disable-next-line property-disallowed-list -- geometry: the `side` prop names a physical edge */
 		left: auto;
+		/* stylelint-disable-next-line property-disallowed-list -- geometry: the `side` prop names a physical edge */
 		right: 0px;
 		transform-origin: right center;
 	}
 	&.bb-offcanvas--top,
 	&.bb-offcanvas--bottom {
 		height: var(--max-size);
-		left: 0;
+		inset-inline-end: 0;
+		inset-inline-start: 0;
 		/* `height` already applies `--max-size` (a length or the `fit-content`
 		   keyword for `size="auto"`); this only caps the panel to the viewport so a
 		   tall/auto sheet scrolls internally instead of overflowing off-screen. Must
@@ -1498,7 +1504,6 @@ export type BbOffCanvasSlots = {
 		   drop the cap entirely, letting a bottom sheet run past the top edge. */
 		max-height: 100%;
 		max-width: 100%;
-		right: 0;
 		width: 100%;
 	}
 	&.bb-offcanvas--top {
@@ -1630,10 +1635,12 @@ export type BbOffCanvasSlots = {
 		   top-right), a right drawer (its top-left). */
 		&.bb-offcanvas--bottom > .bb-offcanvas__header,
 		&.bb-offcanvas--bottom.bb-offcanvas--no-header > .bb-offcanvas__content {
+			/* stylelint-disable-next-line property-disallowed-list -- geometry: the `side` prop names a physical edge */
 			border-top-left-radius: max(
 				0px,
 				calc(var(--bb-radius-surface) - var(--bb-border-w))
 			);
+			/* stylelint-disable-next-line property-disallowed-list -- geometry: the `side` prop names a physical edge */
 			border-top-right-radius: max(
 				0px,
 				calc(var(--bb-radius-surface) - var(--bb-border-w))
@@ -1641,6 +1648,7 @@ export type BbOffCanvasSlots = {
 		}
 		&.bb-offcanvas--left > .bb-offcanvas__header,
 		&.bb-offcanvas--left.bb-offcanvas--no-header > .bb-offcanvas__content {
+			/* stylelint-disable-next-line property-disallowed-list -- geometry: the `side` prop names a physical edge */
 			border-top-right-radius: max(
 				0px,
 				calc(var(--bb-radius-surface) - var(--bb-border-w))
@@ -1648,6 +1656,7 @@ export type BbOffCanvasSlots = {
 		}
 		&.bb-offcanvas--right > .bb-offcanvas__header,
 		&.bb-offcanvas--right.bb-offcanvas--no-header > .bb-offcanvas__content {
+			/* stylelint-disable-next-line property-disallowed-list -- geometry: the `side` prop names a physical edge */
 			border-top-left-radius: max(
 				0px,
 				calc(var(--bb-radius-surface) - var(--bb-border-w))
@@ -1660,10 +1669,12 @@ export type BbOffCanvasSlots = {
 		&.bb-offcanvas--top > .bb-offcanvas__footer,
 		&.bb-offcanvas--top:not(:has(> .bb-offcanvas__footer:not(:empty)))
 			> .bb-offcanvas__content {
+			/* stylelint-disable-next-line property-disallowed-list -- geometry: the `side` prop names a physical edge */
 			border-bottom-left-radius: max(
 				0px,
 				calc(var(--bb-radius-surface) - var(--bb-border-w))
 			);
+			/* stylelint-disable-next-line property-disallowed-list -- geometry: the `side` prop names a physical edge */
 			border-bottom-right-radius: max(
 				0px,
 				calc(var(--bb-radius-surface) - var(--bb-border-w))
@@ -1672,6 +1683,7 @@ export type BbOffCanvasSlots = {
 		&.bb-offcanvas--left > .bb-offcanvas__footer,
 		&.bb-offcanvas--left:not(:has(> .bb-offcanvas__footer:not(:empty)))
 			> .bb-offcanvas__content {
+			/* stylelint-disable-next-line property-disallowed-list -- geometry: the `side` prop names a physical edge */
 			border-bottom-right-radius: max(
 				0px,
 				calc(var(--bb-radius-surface) - var(--bb-border-w))
@@ -1680,6 +1692,7 @@ export type BbOffCanvasSlots = {
 		&.bb-offcanvas--right > .bb-offcanvas__footer,
 		&.bb-offcanvas--right:not(:has(> .bb-offcanvas__footer:not(:empty)))
 			> .bb-offcanvas__content {
+			/* stylelint-disable-next-line property-disallowed-list -- geometry: the `side` prop names a physical edge */
 			border-bottom-left-radius: max(
 				0px,
 				calc(var(--bb-radius-surface) - var(--bb-border-w))
@@ -1789,6 +1802,7 @@ export type BbOffCanvasSlots = {
 	&.bb-offcanvas--bottom .bb-offcanvas__handle,
 	&.bb-offcanvas--top .bb-offcanvas__handle {
 		height: var(--handle-h);
+		/* stylelint-disable-next-line property-disallowed-list -- geometry: centred with a physical translate */
 		left: 50%;
 		translate: -50% 0;
 		width: var(--handle-w);
@@ -1808,9 +1822,11 @@ export type BbOffCanvasSlots = {
 		width: var(--handle-h);
 	}
 	&.bb-offcanvas--left .bb-offcanvas__handle {
+		/* stylelint-disable-next-line property-disallowed-list -- geometry: the `side` prop names a physical edge */
 		right: 8px;
 	}
 	&.bb-offcanvas--right .bb-offcanvas__handle {
+		/* stylelint-disable-next-line property-disallowed-list -- geometry: the `side` prop names a physical edge */
 		left: 8px;
 	}
 
@@ -1866,7 +1882,7 @@ export type BbOffCanvasSlots = {
 			 * the space here instead — only when there is actually a control to
 			 * clear, so `hideClose` keeps the full width. */
 			&:has(~ .bb-close-button) {
-				padding-right: calc(var(--close-size) + 4px);
+				padding-inline-end: calc(var(--close-size) + 4px);
 			}
 		}
 		/* Only when a description is present. A header without one keeps its
@@ -1888,7 +1904,7 @@ export type BbOffCanvasSlots = {
 			   does. The × sits at the top-right, and a one-line title is short
 			   enough that the description's first line can still run under it. */
 			&:has(~ .bb-close-button) {
-				padding-right: calc(var(--close-size) + 4px);
+				padding-inline-end: calc(var(--close-size) + 4px);
 			}
 		}
 
@@ -1900,8 +1916,8 @@ export type BbOffCanvasSlots = {
 		> .bb-close-button {
 			--size: var(--close-size);
 			--p: 7px;
+			inset-inline-end: calc(var(--px) - var(--p));
 			position: absolute;
-			right: calc(var(--px) - var(--p));
 			top: calc(var(--py) - var(--p));
 		}
 	}
@@ -1956,8 +1972,8 @@ export type BbOffCanvasSlots = {
 			> .bb-close-button {
 				--size: 28px;
 				--p: 7px;
+				inset-inline-end: calc(var(--px) - var(--p));
 				position: absolute;
-				right: calc(var(--px) - var(--p));
 				top: calc(var(--py) - var(--p));
 			}
 		}
@@ -2042,7 +2058,7 @@ export type BbOffCanvasSlots = {
 
 body:has(.bb-offcanvas--visible) {
 	overflow: hidden;
-	padding-right: var(--scrollbar-width);
+	padding-inline-end: var(--scrollbar-width);
 }
 
 @keyframes bb-offcanvas-deny-bounce-x {

package/dist/ai/source/BbPagination.md

@@ -864,13 +864,13 @@ export type BbPaginationSlots = {
 
 	&--right {
 		.bb-pagination__pages {
-			margin-left: auto;
+			margin-inline-start: auto;
 		}
 	}
 	&--center {
 		.bb-pagination__pages {
-			margin-left: auto;
-			margin-right: auto;
+			margin-inline-end: auto;
+			margin-inline-start: auto;
 		}
 	}
 

package/dist/ai/source/BbPopover.md

@@ -88,11 +88,11 @@
 		ref="popover-ref"
 		v-model="isOpen"
 		:anchor="effectiveAnchor"
-		:aria-labelledby="hasOpenedOnce ? activatorId : undefined"
+		:aria-labelledby="hasOpenedOnce ? labelledById : undefined"
 		:boundary="boundary"
 		:bubble-attrs="panelAttrs"
 		class="bb-popover"
-		dialog
+		:dialog="modal"
 		:eager="eager"
 		hide-arrow
 		:offset="offset"
@@ -100,7 +100,7 @@
 		:placement="placement === 'cursor' ? 'bottom-start' : placement"
 		:style="{ width: parsedWidth }"
 		:transition-duration="transitionDuration"
-		v-bind="mergeProps($attrs, passthrough.root)"
+		v-bind="mergeProps(nonModalAttrs, $attrs, passthrough.root)"
 		@hidden="onPanelHidden"
 		@shown="emit('shown')"
 	>
@@ -150,7 +150,7 @@
 </template>
 
 <script setup lang="ts">
-// Attributes land on the floating panel's `<dialog>` on desktop, the sheet's `<dialog>` on a phone (without `class` there).
+// Attributes land on the floating panel on desktop (a `<dialog>` when `modal`, else a `<div role="dialog">`), the sheet's `<dialog>` on a phone (without `class` there).
 // Measured 2026-09-23 (Q49.23); read by components.json.
 // @attrTargets dialog
 import {
@@ -168,6 +168,7 @@ import {
 	pushEscapeEntry,
 	removeEscapeEntry,
 	isTopEscapeEntry,
+	topDeliberateSurface,
 } from '@/utils/overlayEscapeStack';
 import { useId } from '@/composables/useId';
 import { useElementSize, useIntersectionObserver } from '@vueuse/core';
@@ -209,6 +210,7 @@ const props = withDefaults(defineProps<BbPopoverProps>(), {
 	// A declared default disables that absent→false cast while still keeping the
 	// Boolean type — so the `<Popover adaptive>` shorthand (valueless→`true`) works.
 	adaptive: undefined,
+	modal: false,
 	offset: 4,
 	padding: 10,
 	placement: 'bottom',
@@ -231,6 +233,15 @@ const activatorId = props.id ?? id.value;
 const popoverId = `bbp_${activatorId}`;
 
 const activatorEl = ref<HTMLElement>();
+/**
+ * The id the panel is labelled by. An external activator that already has an
+ * id keeps it (like BbDropdown and BbSelectPopover): overwriting it broke the
+ * consumer's own `id` (an anchor target, a `<label for>`, a test hook). Only an
+ * element with no id gets `activatorId`.
+ */
+const labelledById = computed(
+	() => (hasExternalActivator.value && activatorEl.value?.id) || activatorId
+);
 const popoverRef = useTemplateRef('popover-ref');
 const popoverEl = computed(() => extractDomContainer(popoverRef.value));
 
@@ -286,7 +297,7 @@ const offcanvasBindings = computed(() => ({
 	// BbOffCanvas already points `aria-labelledby` at that heading, and this
 	// fallthrough attribute would win over it.
 	...(hasOpenedOnce.value && !props.offCanvasProps?.title
-		? { 'aria-labelledby': activatorId }
+		? { 'aria-labelledby': labelledById.value }
 		: {}),
 }));
 
@@ -405,12 +416,17 @@ watch(
 		}
 
 		el.setAttribute('aria-haspopup', 'dialog');
+		// Adopt an existing id; assign one only when absent, and take back only
+		// what was assigned.
+		const assignedId = !el.id;
+		if (assignedId) el.setAttribute('id', activatorId);
 
 		onCleanup(() => {
 			removers.forEach((fn) => fn());
 			el.removeAttribute('aria-expanded');
 			el.removeAttribute('aria-controls');
 			el.removeAttribute('aria-haspopup');
+			if (assignedId && el.id === activatorId) el.removeAttribute('id');
 		});
 	},
 	{ immediate: true }
@@ -421,7 +437,6 @@ watch(
 	[activatorEl, isOpen, hasOpenedOnce] as const,
 	([el, open, opened]) => {
 		if (!el || !hasExternalActivator.value || !opened) return;
-		el.setAttribute('id', activatorId);
 		el.setAttribute('aria-expanded', String(open));
 		el.setAttribute('aria-controls', popoverId);
 	},
@@ -472,6 +487,113 @@ const onDocumentClick = (event: MouseEvent) => {
 	}
 };
 
+// --- Non-modal dismissal (Q60.10) ---
+//
+// Without `modal` the panel is a plain top-layer popover: the page stays live,
+// so leaving the panel is how it closes. A press outside (the press itself
+// still lands on what it hit: nothing here prevents it), or focus moving out
+// (Tab past the last control, Shift+Tab before the first, a click that focuses
+// something else), closes it. Neither returns focus to the activator, which
+// would steal it from where the user just went.
+
+/** The `role` a non-modal panel needs: a `<div>` is no dialog on its own. */
+const nonModalAttrs = computed(() =>
+	props.modal ? {} : { role: 'dialog' as const }
+);
+
+/** Set by an outside dismissal, so the close leaves focus where it went. */
+let dismissedOutside = false;
+
+/**
+ * True from a press on the activator until the task that delivers it ends.
+ * The press focuses the activator before its click toggles the panel; that
+ * `focusin` is not the user leaving (the click owns the toggle). A keyboard
+ * move onto the activator (Shift+Tab out of the panel) is not a press, and
+ * still closes. Same guard as BbDropdown.
+ */
+let activatorPress = false;
+
+/**
+ * Whether `target` belongs to an overlay opened on top of this panel (a menu or
+ * a dialog launched from inside it): that overlay owns the interaction, as it
+ * owns Escape. A press outside everything still closes both.
+ */
+const ownedByOverlayOnTop = (target: Node) => {
+	if (isTopEscapeEntry(escapeKey)) return false;
+	const top = topDeliberateSurface();
+	if (!top) return false;
+	return !top.element || top.element.contains(target);
+};
+
+/**
+ * The `<dialog>`s around the activator that were already open when the panel
+ * opened. One that opens later (a dialog mounted open with this popover open
+ * inside it) moves focus to its own first control: that is the dialog's
+ * initial focus, not the user leaving, so its first `focusin` is let through.
+ */
+let hostDialogs = new Set<HTMLDialogElement>();
+const collectHostDialogs = () => {
+	hostDialogs = new Set();
+	let dialog = activatorEl.value?.closest('dialog');
+	while (dialog) {
+		if (dialog.open) hostDialogs.add(dialog);
+		dialog = dialog.parentElement?.closest('dialog');
+	}
+};
+
+const dismissOutside = () => {
+	dismissedOutside = true;
+	close();
+};
+
+const onDocumentPointerDown = (event: PointerEvent) => {
+	if (event.timeStamp <= listenersAddedAt) return;
+	const target = event.target;
+	if (!(target instanceof Node)) return;
+	if (activatorEl.value?.contains(target)) {
+		activatorPress = true;
+		setTimeout(() => (activatorPress = false), 0);
+		return;
+	}
+	if (popoverEl.value?.contains(target)) return;
+	if (ownedByOverlayOnTop(target)) return;
+	dismissOutside();
+};
+
+/**
+ * A click outside with no press before it (a scripted `.click()`, a keyboard
+ * activation of an outside control) closes too. After a real press the panel
+ * is already closed and this does nothing.
+ */
+const onDocumentOutsideClick = (event: MouseEvent) => {
+	if (!isOpen.value || event.timeStamp <= listenersAddedAt) return;
+	const target = event.target;
+	if (!(target instanceof Node)) return;
+	if (activatorEl.value?.contains(target)) return;
+	if (popoverEl.value?.contains(target)) return;
+	if (ownedByOverlayOnTop(target)) return;
+	dismissOutside();
+};
+
+const onDocumentFocusIn = (event: FocusEvent) => {
+	const target = event.target;
+	if (!(target instanceof Node)) return;
+	const panel = popoverEl.value;
+	if (panel?.contains(target)) return;
+	if (activatorPress && activatorEl.value?.contains(target)) return;
+	// Focus landing on an ANCESTOR of the panel is the browser's fallback for a
+	// press on non-focusable panel content (the panel renders in place), not
+	// the user going elsewhere.
+	if (target instanceof Element && panel && target.contains(panel)) return;
+	const host = target instanceof Element ? target.closest('dialog') : null;
+	if (host && panel && host.contains(panel) && !hostDialogs.has(host)) {
+		hostDialogs.add(host);
+		return;
+	}
+	if (ownedByOverlayOnTop(target)) return;
+	dismissOutside();
+};
+
 // Identifies this popover instance in the module-level Escape stack.
 const escapeKey = Symbol('bb-popover');
 
@@ -490,8 +612,26 @@ const addGlobalListeners = () => {
 	// inside it (Q63.7).
 	pushEscapeEntry(escapeKey, { element: () => popoverEl.value });
 	listenersAddedAt = performance.now();
-	document.addEventListener('click', onDocumentClick, { passive: true });
-	document.addEventListener('contextmenu', onDocumentClick, { passive: true });
+	if (props.modal) {
+		document.addEventListener('click', onDocumentClick, { passive: true });
+		document.addEventListener('contextmenu', onDocumentClick, {
+			passive: true,
+		});
+	} else {
+		dismissedOutside = false;
+		collectHostDialogs();
+		document.addEventListener('pointerdown', onDocumentPointerDown, {
+			passive: true,
+			capture: true,
+		});
+		document.addEventListener('focusin', onDocumentFocusIn, { passive: true });
+		document.addEventListener('click', onDocumentOutsideClick, {
+			passive: true,
+		});
+		document.addEventListener('contextmenu', onDocumentOutsideClick, {
+			passive: true,
+		});
+	}
 	document.addEventListener('keydown', onKeydown, { capture: true });
 };
 
@@ -499,6 +639,12 @@ const removeGlobalListeners = () => {
 	removeEscapeEntry(escapeKey);
 	document.removeEventListener('click', onDocumentClick);
 	document.removeEventListener('contextmenu', onDocumentClick);
+	document.removeEventListener('pointerdown', onDocumentPointerDown, {
+		capture: true,
+	});
+	document.removeEventListener('focusin', onDocumentFocusIn);
+	document.removeEventListener('click', onDocumentOutsideClick);
+	document.removeEventListener('contextmenu', onDocumentOutsideClick);
 	document.removeEventListener('keydown', onKeydown, { capture: true });
 };
 
@@ -554,9 +700,9 @@ const runCloseEffects = () => {
 
 	removeGlobalListeners();
 
-	if (activatorEl.value) {
-		activatorEl.value.focus();
-	}
+	// An outside dismissal leaves focus where the user took it (Q60.10).
+	if (dismissedOutside) dismissedOutside = false;
+	else if (activatorEl.value) activatorEl.value.focus();
 };
 
 // Set by a floating close until CommonPopover reports `hidden`. A close that
@@ -842,7 +988,8 @@ export type BbPopoverProps = {
 	 */
 	disabled?: boolean;
 	/**
-	 * Prevents rendering content before it's made visible.
+	 * Renders the panel's content at mount instead of on the first open
+	 * (the phone sheet's too).
 	 */
 	eager?: boolean;
 	/**
@@ -855,6 +1002,17 @@ export type BbPopoverProps = {
 	 * Generated when omitted.
 	 */
 	id?: HTMLAttributes['id'];
+	/**
+	 * Makes the floating panel modal: the page behind it goes inert and
+	 * cannot scroll, and Tab stays inside the panel until it closes. Off by
+	 * default, the panel is a non-modal dialog: the page stays usable, a
+	 * click outside closes it and still reaches what was clicked, and Tab
+	 * past its last control (or Shift+Tab before its first) leaves it and
+	 * closes it. The phone sheet is modal either way.
+	 *
+	 * @defaultValue `false`
+	 */
+	modal?: boolean;
 	/**
 	 * Space the floating container will maintain from the activator.
 	 *
@@ -986,6 +1144,21 @@ export type BbPopoverSlots = {
 	 */
 	footer?: (props: BbPopoverDefaultSlotProps) => any;
 };
+
+/**
+ * The default slot scope of `<BbPopoverPortal>`: the ONE place this family's
+ * portal slot is typed (Q63.8), so tooling that infers `props` from the call
+ * sites hooks a single type: `P`, the type of `props`, is the seam it will
+ * feed (through a type-only prop on the portal component). Until then `P` is
+ * `any`, so `props.person.name` type-checks with no cast.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- the default is the point (Q63.8)
+export type BbPopoverPortalSlotProps<P = any> = {
+	/** The `portalProps` the `v-bb-popover` passed. */
+	props: P;
+	/** Closes the popover. */
+	close: () => void;
+};
 ```
 
 ## Styles

package/dist/ai/source/BbPopoverPortal.md

@@ -8,8 +8,8 @@
 <template><!-- registers content; renders nothing of its own --></template>
 <script setup lang="ts">
 import { watchEffect } from 'vue';
+import type { BbPopoverPortalSlotProps } from './types';
 import {
-	type DirectivePortalSlotProps,
 	popoverPortals,
 	useDirectivePortal,
 } from '@/directives/directivePortal';
@@ -25,7 +25,7 @@ const props = defineProps<{
 }>();
 const slots = defineSlots<{
 	/** The popover body. `props` is the directive's `portalProps`; `close` closes the popover. */
-	default?: (props: DirectivePortalSlotProps) => any;
+	default?: (props: BbPopoverPortalSlotProps) => any;
 }>();
 
 watchEffect(
@@ -131,7 +131,8 @@ export type BbPopoverProps = {
 	 */
 	disabled?: boolean;
 	/**
-	 * Prevents rendering content before it's made visible.
+	 * Renders the panel's content at mount instead of on the first open
+	 * (the phone sheet's too).
 	 */
 	eager?: boolean;
 	/**
@@ -144,6 +145,17 @@ export type BbPopoverProps = {
 	 * Generated when omitted.
 	 */
 	id?: HTMLAttributes['id'];
+	/**
+	 * Makes the floating panel modal: the page behind it goes inert and
+	 * cannot scroll, and Tab stays inside the panel until it closes. Off by
+	 * default, the panel is a non-modal dialog: the page stays usable, a
+	 * click outside closes it and still reaches what was clicked, and Tab
+	 * past its last control (or Shift+Tab before its first) leaves it and
+	 * closes it. The phone sheet is modal either way.
+	 *
+	 * @defaultValue `false`
+	 */
+	modal?: boolean;
 	/**
 	 * Space the floating container will maintain from the activator.
 	 *
@@ -275,6 +287,21 @@ export type BbPopoverSlots = {
 	 */
 	footer?: (props: BbPopoverDefaultSlotProps) => any;
 };
+
+/**
+ * The default slot scope of `<BbPopoverPortal>`: the ONE place this family's
+ * portal slot is typed (Q63.8), so tooling that infers `props` from the call
+ * sites hooks a single type: `P`, the type of `props`, is the seam it will
+ * feed (through a type-only prop on the portal component). Until then `P` is
+ * `any`, so `props.person.name` type-checks with no cast.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- the default is the point (Q63.8)
+export type BbPopoverPortalSlotProps<P = any> = {
+	/** The `portalProps` the `v-bb-popover` passed. */
+	props: P;
+	/** Closes the popover. */
+	close: () => void;
+};
 ```
 
 ## Styles