bitboss-ui 3.0.0-beta.63 → 3.0.0-beta.64

package/dist/ai/source/BbOffCanvas.md

@@ -28,7 +28,7 @@
 					'bb-offcanvas--swipe-exit': swipeExiting,
 					'bb-offcanvas--instant-stack': instantStack,
 					'bb-offcanvas--covered': isCovered,
-					'bb-offcanvas--stacked': isStackedAbove,
+					'bb-offcanvas--above': isStackedAbove,
 					'bb-offcanvas--has-handle': draggable,
 					'bb-offcanvas--no-header': !renderHeader(),
 					'bb-offcanvas--keyboard': keyboardInset > 0,
@@ -36,7 +36,7 @@
 					'bb-offcanvas--snap-low': isBelowTopStop(),
 					'bb-offcanvas--snap-settling': snapMotion === 'settle',
 					'bb-offcanvas--snap-instant': snapMotion === 'instant',
-					[`bb-offcanvas--${props.side}`]: true,
+					[`bb-offcanvas--${side}`]: true,
 				},
 			].flat()
 		"
@@ -229,12 +229,14 @@ import { useLogger } from '@/composables/useLogger';
 import { useMobile } from '@/composables/useMobile';
 import { viewportWidth, viewportHeight } from '@/composables/useViewportWidth';
 import { useBreakpoint } from '@/composables/useBreakpoint';
+import { hydrationGate } from '@/composables/useHydrated';
 import { useUntil } from '../../composables/useUntil';
 import { removedPropsFor } from '@/deprecation/removedProps';
 import { warnRemovedAttrs } from '@/utilities/functions/warnRemovedAttrs';
 import { wait } from '@/utilities/functions/wait';
 import { animationsSettled } from '@/utilities/functions/animationsSettled';
 import { transitions } from '@/utilities/misc/transitions';
+import { firstFocusableMatch } from '@/utils/focusVisibility';
 import { overlaySurfaceIsolation } from '@/utils/overlaySurfaceIsolation';
 import { useConfig } from '@/composables/useConfig';
 import CloseButton from '../CloseIcon/CloseButton.vue';
@@ -256,6 +258,7 @@ import {
 	type BbOffCanvasProps,
 	type BbOffCanvasEvents,
 	type BbOffCanvasSlots,
+	type OffCanvasSide,
 	type Sizes,
 } from './types';
 import { usePassthrough } from '@/composables/usePassthrough';
@@ -545,9 +548,7 @@ const removeEscapeListener = () => {
 
 const focusDialogTarget = () => {
 	if (!props.focusTarget) return;
-	const element = dialog.value?.querySelector(props.focusTarget);
-	if (!(element instanceof HTMLElement)) return;
-	element.focus();
+	firstFocusableMatch(dialog.value, props.focusTarget)?.focus();
 };
 
 const handleKeyDown = (e: KeyboardEvent) => {
@@ -572,6 +573,7 @@ const handleKeyDown = (e: KeyboardEvent) => {
 let releaseTopLayer: (() => void) | null = null;
 const toggleDialog = async (value: boolean) => {
 	if (value) {
+		side.value = resolveResponsive(props.side);
 		emit('show');
 		openedTimes.value++;
 		addEscapeListener();
@@ -752,6 +754,25 @@ const denyClose = ref(false);
 
 const { isMobile } = useMobile();
 const { resolve: resolveResponsive } = useBreakpoint();
+
+/**
+ * The side of the current opening (Q76.12 a). A per-breakpoint `side` is
+ * resolved when the panel opens and then FROZEN: an open panel never swings
+ * on a resize; the next opening resolves it again. Everything that reads the
+ * side (the side class the CSS keys off: the slide, insets, rounding; the
+ * drag axis; the stack; the snap) reads this. A new `side` value from the
+ * author still applies at once.
+ */
+const side = ref<OffCanvasSide>(resolveResponsive(props.side));
+watch(
+	() => JSON.stringify(props.side),
+	() => (side.value = resolveResponsive(props.side))
+);
+// Before hydration the width is the server's answer (`ssrViewportWidth`),
+// not a measurement: a panel opened then (open on load) takes the real one
+// as the gate opens, before its first paint.
+watch(hydrationGate, () => (side.value = resolveResponsive(props.side)));
+
 const isFullscreen = computed(
 	() =>
 		props.fullscreen === true ||
@@ -775,11 +796,11 @@ const {
 
 /** Axis the panel travels along: horizontal for left/right, vertical otherwise. */
 const dragAxis = computed<'x' | 'y'>(() =>
-	props.side === 'left' || props.side === 'right' ? 'x' : 'y'
+	side.value === 'left' || side.value === 'right' ? 'x' : 'y'
 );
 /** +1 when the panel exits toward the positive axis end (right / bottom). */
 const closeSign = computed(() =>
-	props.side === 'right' || props.side === 'bottom' ? 1 : -1
+	side.value === 'right' || side.value === 'bottom' ? 1 : -1
 );
 
 /**
@@ -819,7 +840,7 @@ const enterStack = () => {
 	pushStack(
 		registeredStack,
 		stackId,
-		props.side,
+		side.value,
 		measureSize(),
 		props.stackGap
 	);
@@ -847,17 +868,17 @@ const isCovered = computed(() => {
 /**
  * Dim per panel, blur on the bottom-most. Every open offcanvas paints its own
  * dim backdrop, so a child darkens the panels beneath it and that dim fades in
- * and out with the child alone. Panels above the bottom-most are `--stacked`:
- * its own dim (`--bb-overlay-stacked`) and no `backdrop-filter`. The bottom
+ * and out with the child alone. Panels above the bottom-most are `--above`:
+ * its own dim (`--bb-overlay-above`) and no `backdrop-filter`. The bottom
  * panel keeps its blur and full dim untouched while panels open and close
  * above it — no handoff, so nothing beneath brightens or re-blurs as the pile
  * shrinks, and the pile costs one blur pass however deep it goes. Keyed off
- * the global open order, not the `stack` name. Mirrors `bb-dialog--stacked`.
+ * the global open order, not the `stack` name. Mirrors `bb-dialog--above`.
  *
  * Latched through the close: a closing panel leaves `openOrder` at
  * close-START (so the parent un-covers and un-pushes at once, see
  * `toggleDialog`) but keeps painting its backdrop for the whole fade, so it
- * must keep its `--stacked` dress until it is gone — otherwise the blur and
+ * must keep its `--above` dress until it is gone — otherwise the blur and
  * the full dim would snap onto it, over the parent, for the length of the
  * fade. The live order rules while registered; the last registered answer
  * rules while still visible after leaving.
@@ -878,11 +899,11 @@ const isStackedAbove = computed(() => {
 
 // Re-register if the `stack` name, `direction` or `stackGap` changes while open,
 // so the registry's bookkeeping (order, direction, size, gap) stays in sync.
-watch([stackName, () => props.side, () => props.stackGap], ([name]) => {
+watch([stackName, () => side.value, () => props.stackGap], ([name]) => {
 	if (registeredStack === null) return;
 	removeStack(registeredStack, stackId);
 	registeredStack = name;
-	pushStack(name, stackId, props.side, measureSize(), props.stackGap);
+	pushStack(name, stackId, side.value, measureSize(), props.stackGap);
 });
 
 /** Page margin a dialog keeps from the viewport edge (mirrors `--page-padding`). */
@@ -922,7 +943,7 @@ let prevPeerCount = 0;
 const isBehindSameDirectionPeer = () => {
 	const list = stacks.value[stackName.value];
 	if (!list) return false;
-	const chain = list.filter((entry) => entry.direction === props.side);
+	const chain = list.filter((entry) => entry.direction === side.value);
 	const selfIndex = chain.findIndex((entry) => entry.id === stackId);
 	return selfIndex !== -1 && selfIndex !== chain.length - 1;
 };
@@ -1020,7 +1041,7 @@ watch(
 	{ flush: 'post' }
 );
 
-watch([() => props.draggable, () => props.side, isVisible] as const, () =>
+watch([() => props.draggable, () => side.value, isVisible] as const, () =>
 	syncBodyDismissTouchAction()
 );
 
@@ -1057,11 +1078,11 @@ const applyDismissTransform = () => {
 	const el = dialog.value;
 	if (!el) return;
 	el.style.transform =
-		props.side === 'bottom'
+		side.value === 'bottom'
 			? 'translate3d(0, 100%, 0)'
-			: props.side === 'top'
+			: side.value === 'top'
 				? 'translate3d(0, -100%, 0)'
-				: props.side === 'left'
+				: side.value === 'left'
 					? 'translate3d(-100%, 0, 0)'
 					: 'translate3d(100%, 0, 0)';
 };
@@ -1261,7 +1282,7 @@ const { lengthX, lengthY } = useSwipe(dialog, {
 
 const snapActive = computed(
 	() =>
-		props.side === 'bottom' &&
+		side.value === 'bottom' &&
 		props.draggable &&
 		!isFullscreen.value &&
 		!!props.snapPoints?.length
@@ -1708,6 +1729,9 @@ import type { BbSnapPoint } from './sheetSnap';
 export type { Sizes, BbSnapPoint };
 type OffCanvasSize = NonNullable<Size<Sizes>['size']> | 'auto';
 
+/** The viewport edge a `BbOffCanvas` docks to. */
+export type OffCanvasSide = 'left' | 'top' | 'right' | 'bottom';
+
 /**
  * Passthrough parts of `BbOffCanvas` (plans/passthrough/BbOffCanvas.md).
  *
@@ -1894,11 +1918,13 @@ export type BbOffCanvasProps = {
 	 */
 	transitionDuration?: number;
 	/**
-	 * Which viewport edge the offcanvas docks to (and slides in from).
+	 * Which viewport edge the offcanvas docks to (and slides in from). Also a
+	 * per-breakpoint map (e.g. `{ default: 'bottom', md: 'right' }`), resolved
+	 * when the panel opens: an open panel keeps its side through a resize.
 	 *
 	 * @defaultValue `'left'`
 	 */
-	side?: 'left' | 'top' | 'right' | 'bottom';
+	side?: Responsive<'left' | 'top' | 'right' | 'bottom'>;
 };
 
 export type BbOffCanvasEvents = {
@@ -2170,7 +2196,7 @@ export type BbOffCanvasSlots = {
 	/* A `covered` panel (another open panel sits on top) drops its `will-change`
 	   layer, since it can't be dragged. Must follow `--visible` to win the
 	   equal-specificity `will-change`. Its backdrop is untouched: which panel
-	   paints the backdrop is decided by `--stacked` below. */
+	   paints the backdrop is decided by `--above` below. */
 	&.bb-offcanvas--covered {
 		will-change: auto;
 	}
@@ -2553,17 +2579,17 @@ export type BbOffCanvasSlots = {
 	   dim, so a child darkens the parent beneath it, and that dim fades in and
 	   out with the child alone: the bottom panel's backdrop is never handed
 	   off while panels come and go above it, so nothing beneath brightens or
-	   re-blurs mid-close. Panels above the first are `--stacked`: their own dim
-	   (`--bb-overlay-stacked`, the same as `--bb-overlay` by default; `transparent`
+	   re-blurs mid-close. Panels above the first are `--above`: their own dim
+	   (`--bb-overlay-above`, the same as `--bb-overlay` by default; `transparent`
 	   collapses the pile to a single dim) and NO filter, because stacked
 	   `backdrop-filter`s each reblur the whole scene and choke the GPU past a
 	   handful, and a blur that moved between layers would snap. Opacity is
 	   left to `--open` / `--swipe-exit`, which is what lets the stacked dim
-	   fade. Mirrors `bb-dialog--stacked`. */
-	&.bb-offcanvas--stacked::backdrop {
+	   fade. Mirrors `bb-dialog--above`. */
+	&.bb-offcanvas--above::backdrop {
 		-webkit-backdrop-filter: none;
 		backdrop-filter: none;
-		background-color: var(--bb-overlay-stacked);
+		background-color: var(--bb-overlay-above);
 	}
 
 	&.bb-offcanvas--deny-close {
@@ -2588,7 +2614,7 @@ export type BbOffCanvasSlots = {
 	&::backdrop {
 		/* Keep blur subtle to reduce GPU cost while softening page content. The
 		   blur and the full dim belong to the bottom-most open panel only — see
-		   `--stacked` above. */
+		   the `--above` rule above. */
 		-webkit-backdrop-filter: blur(var(--bb-overlay-blur, 2px));
 		backdrop-filter: blur(var(--bb-overlay-blur, 2px));
 		background-color: var(--bb-overlay);

package/dist/ai/source/BbPopover.md

@@ -179,7 +179,12 @@ import { useConfig } from '@/composables/useConfig';
 import CommonPopover from '../CommonPopover/CommonPopover.vue';
 import type { CommonPopoverAvailableSpace } from '../CommonPopover/types';
 import BbOffCanvas from '../BbOffCanvas/BbOffCanvas.vue';
-import { extractDomContainer } from '@/utilities/functions/extractDomContainer';
+import {
+	domElement,
+	extractDomContainer,
+	extractHtmlContainer,
+	type DomHost,
+} from '@/utilities/functions/extractDomContainer';
 import { parseWidthString } from '@/utilities/functions/parseWidthString';
 import { removedPropsFor } from '@/deprecation/removedProps';
 import { warnRemovedAttrs } from '@/utilities/functions/warnRemovedAttrs';
@@ -191,6 +196,7 @@ import {
 	type PopoverTrigger,
 } from './types';
 import { usePassthrough } from '@/composables/usePassthrough';
+import { firstFocusableMatch } from '@/utils/focusVisibility';
 import { withoutClass, withoutPt } from '@/utils/passthrough';
 import { BB_OFF_CANVAS_PT } from '../BbOffCanvas/types';
 import { transitions } from '@/utilities/misc/transitions';
@@ -232,7 +238,7 @@ const { id } = useId();
 const activatorId = props.id ?? id.value;
 const popoverId = `bbp_${activatorId}`;
 
-const activatorEl = ref<HTMLElement>();
+const activatorEl = ref<DomHost>();
 /**
  * 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
@@ -243,7 +249,7 @@ const labelledById = computed(
 	() => (hasExternalActivator.value && activatorEl.value?.id) || activatorId
 );
 const popoverRef = useTemplateRef('popover-ref');
-const popoverEl = computed(() => extractDomContainer(popoverRef.value));
+const popoverEl = computed(() => extractHtmlContainer(popoverRef.value));
 
 const hasOpenedOnce = useUntil(isOpen);
 const hasExternalActivator = computed(() => props.activator != null);
@@ -444,7 +450,7 @@ watch(
 
 // Close when activator scrolls out of view
 useIntersectionObserver(
-	activatorEl,
+	() => domElement(activatorEl.value),
 	([{ intersectionRatio }]) => {
 		// A modal sheet is detached from the activator's position, so it must not
 		// close just because the activator scrolls out of view.
@@ -678,11 +684,7 @@ const runOpenEffects = async () => {
 	const focusSelector =
 		props.focusTarget ??
 		'[tabindex]:not([tabindex="-1"]), button, a, input, select, textarea';
-	const focusTarget = popoverEl.value?.querySelector(focusSelector);
-
-	if (focusTarget instanceof HTMLElement) {
-		focusTarget.focus();
-	}
+	firstFocusableMatch(popoverEl.value, focusSelector)?.focus();
 };
 
 const runCloseEffects = () => {
@@ -874,7 +876,9 @@ const needsReactiveWidth = computed(() => {
 });
 
 const { width: activatorWidth } = useElementSize(
-	computed(() => (needsReactiveWidth.value ? activatorEl.value : undefined)),
+	computed(() =>
+		domElement(needsReactiveWidth.value ? activatorEl.value : undefined)
+	),
 	{ width: 0, height: 0 },
 	{ box: 'border-box' }
 );