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

package/dist/ai/source/BbDialog.md

@@ -84,7 +84,8 @@
 			'bb-dialog--mobile': isMobile,
 			'bb-dialog--deny-close': denyClose,
 			'bb-dialog--covered': isCovered,
-			'bb-dialog--stacked': isStackedAbove,
+			'bb-dialog--above': isStackedAbove,
+			'bb-dialog--covering': isCovering,
 		}"
 		:inert="(!model && !isVisible) || isCovered"
 		:style="{
@@ -228,6 +229,7 @@ import {
 	type BbDialogSlots,
 } from './types';
 import { usePassthrough } from '@/composables/usePassthrough';
+import { firstFocusableMatch } from '@/utils/focusVisibility';
 import { withoutPt } from '@/utils/passthrough';
 import { BB_OFF_CANVAS_PT } from '../BbOffCanvas/types';
 import type { BbOffCanvasProps, BbSnapPoint } from '../BbOffCanvas/types';
@@ -643,9 +645,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) => {
@@ -716,16 +716,17 @@ const isCovered = computed(() => {
  * True when this dialog sits ABOVE another open dialog — any `stack` name or
  * none: the global open order decides, exactly as for off-canvases. Dim per
  * dialog, blur on the bottom-most: every open dialog paints its own dim, and
- * one above the bottom is `--stacked` — its own dim (`--bb-overlay-stacked`)
+ * one above the bottom is `--above` — its own dim (`--bb-overlay-above`)
  * that fades with it, and no `backdrop-filter` (see index.css). The bottom
  * dialog's blurred, fully dimmed backdrop is never handed off while dialogs
  * swap above it, so the page behind never re-blurs mid-crossfade, and N piled
- * dialogs cost one blur pass instead of N. The `stack` name controls only
- * cover / replace (`isCovered`), never the backdrop.
+ * dialogs cost one blur pass instead of N. The `stack` name controls
+ * cover / replace (`isCovered`), and a member that replaces one of its own
+ * stack paints no dim (`isCovering`).
  *
  * Latched through the close: a closing dialog leaves the order at close-START
  * (so a covered member beneath uncovers at once, see `toggleDialog`) but keeps
- * painting its backdrop for the whole fade, so it must keep its `--stacked`
+ * painting its backdrop for the whole fade, so it must keep its `--above`
  * dress until it is gone — otherwise the blur and the full dim would snap
  * onto it, over the page, for the length of the fade. The live order rules
  * while registered; the last registered answer rules while still visible
@@ -745,6 +746,31 @@ const isStackedAbove = computed(() => {
 	return isVisible.value && wasStackedAbove.value;
 });
 
+/**
+ * True when this dialog covers an earlier member of its own `stack`: it
+ * REPLACES that one, whose box is hidden, so a stacked dim would only darken
+ * the page a second time (a confirm in its dialog's stack read twice as dark,
+ * owner 2026-10-23). `--covering` (the pair of `--covered`) paints no dim,
+ * so the overlay on screen stays the covered member's, with no handoff.
+ * Latched through the close like `isStackedAbove`, or the dim would flash
+ * on for the fade.
+ */
+const namedStackPosition = computed(() =>
+	props.stack ? (stacks.value[props.stack]?.indexOf(stackId) ?? -1) : -1
+);
+const wasCovering = ref(false);
+watch(
+	namedStackPosition,
+	(index) => {
+		if (index !== -1) wasCovering.value = index > 0;
+	},
+	{ immediate: true }
+);
+const isCovering = computed(() => {
+	if (namedStackPosition.value !== -1) return namedStackPosition.value > 0;
+	return isVisible.value && wasCovering.value;
+});
+
 let releaseTopLayer: (() => void) | null = null;
 const toggleDialog = async (value: boolean) => {
 	if (value) {
@@ -1417,24 +1443,33 @@ export type { BbDialogSlots as BaseDialogSlots };
 
 	/* Dim per dialog, blur on the bottom-most. Any dialog open above another —
 	   same `stack` name, another name, or none: the global open order decides,
-	   as for off-canvases — is `--stacked`: it paints its own dim
-	   (`--bb-overlay-stacked`, the same as `--bb-overlay` by default; `transparent`
+	   as for off-canvases — is `--above`: it paints its own dim (none when it
+	   is `--covering`, below)
+	   (`--bb-overlay-above`, the same as `--bb-overlay` by default; `transparent`
 	   collapses the pile to a single dim) that fades with it, and NO filter.
 	   The bottom dialog's backdrop is never handed off while dialogs swap above
 	   it, so nothing beneath re-blurs mid-crossfade, and the pile costs one
 	   blur pass however deep it goes (stacked `backdrop-filter`s each reblur
 	   the whole scene). Opacity is left to `--open`, which is what lets the
-	   stacked dim fade. Mirrors `bb-offcanvas--stacked`. */
-	&.bb-dialog--stacked::backdrop {
+	   stacked dim fade. Mirrors `bb-offcanvas--above`. */
+	&.bb-dialog--above::backdrop {
 		-webkit-backdrop-filter: none;
 		backdrop-filter: none;
-		background-color: var(--bb-overlay-stacked);
+		background-color: var(--bb-overlay-above);
+	}
+
+	/* The pair of `--covered`: a member over an earlier member of its own
+	   `stack` replaces it, and the box beneath is hidden, so a dim of its own
+	   would only darken the page twice. The covered member's backdrop stays
+	   the one on screen: no handoff. */
+	&.bb-dialog--covering::backdrop {
+		background-color: transparent;
 	}
 
 	&::backdrop {
 		/* Keep blur subtle to reduce GPU cost while softening page content. The
 		   blur and the full dim belong to the bottom member 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);