@pgcorp/ui-kit 0.13.0 → 0.14.0

package/dist/src/composables/useDialogOverlay.js

@@ -1,52 +1,210 @@
-import { trapFocusInsidePanel as e } from "../components/shared/_internal/focusTrap.js";
-import { registerLayer as t } from "../internal/layerStack.js";
-import { nextTick as n, onBeforeUnmount as r, ref as i, watch as a } from "vue";
+import { createAggregateError as e } from "../internal/es2020.js";
+import { trapFocusInsidePanel as t } from "../components/shared/_internal/focusTrap.js";
+import { registerLayer as n } from "../internal/layerStack.js";
+import { useOverlayAdmission as r } from "../internal/overlayHost.js";
+import { validateBoolean as i, validateExactString as a } from "../internal/runtimeContract.js";
+import { inject as o, nextTick as s, onBeforeUnmount as c, onMounted as l, provide as u, readonly as d, ref as f, shallowRef as p, watch as m } from "vue";
 //#region src/composables/useDialogOverlay.ts
-function o(o) {
-	let s = i(null), c = i({}), l = i({}), u = null, d = 0, f = (e) => {
-		if (e === null || e instanceof HTMLElement) {
-			s.value = e;
-			return;
+var h = Symbol("ui-kit-dialog-parent-lease");
+function g(g) {
+	let _ = () => a("useDialogOverlay", "scope", g.scope?.value ?? "viewport", ["viewport", "contained"]), v = () => i("useDialogOverlay", "open", g.open.value), y = () => i("useDialogOverlay", "closable", g.closable.value), b = () => {
+		if (!g.host) throw TypeError("useDialogOverlay: scope=\"contained\" requires a parent SOverlayHost");
+		return g.host;
+	}, x = _(), S = v();
+	y(), x === "contained" && b(), g.validate?.();
+	let C = r(), w = f(null), T = o(h, null), E = p(null);
+	u(h, {
+		registration: E,
+		panel: w
+	});
+	let D = f(C.value && x === "viewport" && S), O = f(!1), k = f({}), A = f({}), j = null, M = !1, N = !1, P = !1, F = x, I = () => {
+		let e = b(), t = [
+			e.root.value,
+			e.content.value,
+			e.portal.value
+		];
+		for (let e of t) if (e !== null && !(e instanceof HTMLElement)) throw TypeError("useDialogOverlay: SOverlayHost refs must resolve to native HTMLElement or null");
+		let n = e.root.value, r = e.content.value, i = e.portal.value;
+		if (!n || !r || !i || !n.isConnected || !r.isConnected || !i.isConnected) return null;
+		if (n.ownerDocument !== document || r.ownerDocument !== document || i.ownerDocument !== document || r.parentElement !== n || i.parentElement !== n || r === i) throw TypeError("useDialogOverlay: SOverlayHost requires connected same-document sibling content/portal owners");
+		return e;
+	}, L = () => {
+		!P && v() && (P = !0, g.requestClose());
+	}, R = (t) => {
+		let n = j;
+		j = null, D.value = !1, k.value = {}, A.value = {};
+		let r = [];
+		try {
+			n?.registration?.unregister({
+				restoreFocus: t,
+				retireDescendants: !0
+			});
+		} catch (e) {
+			r.push(e);
+		}
+		E.value = null;
+		try {
+			n?.releaseHost?.();
+		} catch (e) {
+			r.push(e);
+		}
+		if (r.length === 1) throw r[0];
+		if (r.length > 1) throw e(r, "useDialogOverlay: layer and host retirement failed");
+	}, z = (t, n) => {
+		let r = [];
+		try {
+			R(t);
+		} catch (e) {
+			r.push(e);
+		}
+		if (n) try {
+			L();
+		} catch (e) {
+			r.push(e);
 		}
-		throw TypeError("Dialog overlay panel ref обязан указывать на HTMLElement");
-	}, p = () => {
-		if (u) return;
-		let n = typeof document < "u" && document.activeElement instanceof HTMLElement ? document.activeElement : null;
-		u = t({
+		if (r.length === 1) throw r[0];
+		if (r.length > 1) throw e(r, "useDialogOverlay: retirement and close intent failed");
+	}, B = (e = !0) => {
+		M = !0, z(e, !0);
+	}, V = (e) => j === e && O.value && !N && !M && C.value && v() && D.value, H = () => {
+		try {
+			let e = _(), t = v();
+			if (y(), e !== F && t) throw TypeError("useDialogOverlay: scope can change only while open=false");
+			e === "contained" && b(), g.validate?.();
+		} catch (t) {
+			M = !0;
+			try {
+				R(!1);
+			} catch (n) {
+				throw e([t, n], "useDialogOverlay: validation and resource retirement failed");
+			}
+			throw t;
+		}
+	}, U = async () => {
+		let e = j, r = w.value;
+		if (!e || !V(e) || !r?.isConnected || e.focusing) return;
+		let i = T?.registration.value ?? null;
+		if (T && (!i || !T.panel.value?.isConnected)) return;
+		if (e.scope === "contained" && e.portal?.contains(r) !== !0) throw TypeError("useDialogOverlay: contained dialog surface must mount inside its SOverlayHost portal");
+		H(), e.focusing = !0;
+		let a = e.scope === "contained";
+		if (a) {
+			let t = I();
+			if (!t || t.root.value !== e.root || t.content.value !== e.content || t.portal.value !== e.portal) {
+				B();
+				return;
+			}
+			if (e.releaseHost = t.acquire(B), !V(e)) {
+				e.releaseHost();
+				return;
+			}
+		}
+		let o = T?.panel.value ?? null, c = o && !o.contains(e.restoreTarget) ? o : e.restoreTarget;
+		if (e.registration = n({
 			kind: "dialog",
-			root: () => s.value,
-			modal: !0,
-			restoreTarget: n,
-			dismissOnEscape: () => o.closable.value,
-			dismissOnOutsidePointer: () => o.closable.value,
-			trapFocus: (t) => e(t, s, !0),
-			requestDismiss: () => o.requestClose()
-		}), c.value = { zIndex: u.zIndex }, l.value = { zIndex: `calc(${u.zIndex} + var(--s-layer-overlay-surface-offset))` };
-	}, m = (e = !0) => {
-		u?.unregister({ restoreFocus: e }), u = null, c.value = {}, l.value = {};
-	}, h = () => {
-		d += 1, m(!1);
-	};
-	return a(o.open, async (e, t) => {
-		d += 1;
-		let r = d;
-		if (e) {
-			if (p(), await n(), r !== d || !o.open.value || u === null) return;
-			let e = s.value;
-			if (!e) return;
-			e.focus(), r === d && o.open.value && u !== null && o.opened?.();
+			root: () => w.value,
+			modal: !a,
+			parent: i,
+			eventBoundary: a ? () => e.root : void 0,
+			restoreTarget: c,
+			dismissOnEscape: y,
+			dismissOnOutsidePointer: y,
+			blocksParentFocusTrap: !a,
+			...a ? {} : { trapFocus: (e) => t(e, w, !0) },
+			requestDismiss: () => g.requestClose(),
+			onRetire: B
+		}), E.value = e.registration, k.value = { zIndex: e.registration.zIndex }, A.value = { zIndex: `calc(${e.registration.zIndex} + var(--s-layer-overlay-surface-offset))` }, await s(), !V(e) || w.value !== r || !r.isConnected || !e.registration.isTopmost()) return;
+		let l = document.activeElement, u = l === document.body && e.restoreTarget !== null && e.content?.contains(e.restoreTarget) && e.content.hasAttribute("inert");
+		(l === e.restoreTarget || u) && (r.focus({ preventScroll: a }), V(e) && document.activeElement === r && g.opened?.());
+	}, W = () => {
+		let e;
+		try {
+			let t = _(), n = v();
+			if (y(), t !== F && n) throw TypeError("useDialogOverlay: scope can change only while open=false");
+			t === "contained" && b(), g.validate?.(), e = {
+				valid: !0,
+				open: n,
+				scope: t,
+				host: O.value && t === "contained" ? I() : null,
+				parent: T?.registration.value ?? null,
+				admitted: C.value
+			};
+		} catch (t) {
+			e = {
+				valid: !1,
+				error: t
+			};
+		}
+		return e;
+	}, G = (t) => {
+		if (!t.valid) {
+			M = !0;
+			try {
+				R(!1);
+			} catch (n) {
+				throw e([t.error, n], "useDialogOverlay: validation and resource retirement failed");
+			}
+			throw t.error;
+		}
+		let { open: n, scope: r, host: i, admitted: a } = t;
+		if (r !== F) {
+			if (n) throw TypeError("useDialogOverlay: scope can change only while open=false");
+			F = r, r === "contained" && b();
+		}
+		if (!n) {
+			M = !1, P = !1, R(a);
+			return;
+		}
+		if (!a) {
+			B(!1);
 			return;
 		}
-		m(!!t);
-	}, { immediate: !0 }), r(() => {
-		h();
-	}), {
-		panelRef: s,
-		setPanelElement: f,
-		backdropStyle: c,
-		surfaceStyle: l,
-		dispose: h
+		if (!O.value || N || M) return;
+		if (j) {
+			(r === "contained" && (i === null || j.root !== i.root.value || j.content !== i.content.value || j.portal !== i.portal.value) || j.registration && T && !t.parent) && B();
+			return;
+		}
+		if (r === "contained" && !i) return;
+		let o = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		j = {
+			scope: r,
+			root: i?.root.value ?? null,
+			content: i?.content.value ?? null,
+			portal: i?.portal.value ?? null,
+			restoreTarget: o,
+			releaseHost: null,
+			registration: null,
+			focusing: !1
+		}, D.value = !0;
+	}, K = (e) => {
+		if (e !== null && !(e instanceof HTMLElement)) throw TypeError("Dialog overlay panel ref обязан указывать на HTMLElement");
+		w.value = e;
+	};
+	m(W, G, {
+		flush: "sync",
+		immediate: !0
+	}), m([
+		O,
+		w,
+		D,
+		() => T?.registration.value
+	], U, { flush: "post" }), l(() => {
+		O.value = !0;
+	});
+	let q = () => {
+		if (N) return;
+		N = !0;
+		let e = F === "contained" && v();
+		z(!1, e);
+	};
+	return c(q), {
+		panelRef: w,
+		renderOpen: d(D),
+		setPanelElement: K,
+		backdropStyle: k,
+		surfaceStyle: A,
+		dispose: q
 	};
 }
 //#endregion
-export { o as useDialogOverlay };
+export { g as useDialogOverlay };

package/dist/src/composables/useFloatingPosition.d.ts

@@ -3,6 +3,16 @@ export type FloatingSide = 'top' | 'bottom' | 'left' | 'right';
 export type FloatingAlignment = 'start' | 'center' | 'end';
 export type FloatingPlacement = `${FloatingSide}-${FloatingAlignment}`;
 export type FloatingWidthMatch = 'none' | 'min' | 'exact';
+/** Доступные размеры border-box floating viewport. / Available floating viewport border-box dimensions. */
+export interface FloatingAvailableSize {
+    width: number;
+    height: number;
+}
+/** Native scroll/chrome owner и его естественный, не прокручиваемый контент. / Native scroll/chrome owner and its natural non-scrolling content. */
+export interface FloatingSizingElements {
+    surface: HTMLElement;
+    content: HTMLElement;
+}
 export interface FloatingPositionOptions {
     active: Readonly<Ref<boolean>>;
     placement: () => FloatingPlacement;
@@ -14,6 +24,10 @@ export interface FloatingPositionOptions {
     flip?: () => boolean;
     shift?: () => boolean;
     constrainMainAxis?: () => boolean;
+    /** Ограничивает viewport по natural content без clipped measurements. / Bounds the viewport using natural content, not clipped measurements. */
+    viewportSizing?: () => boolean;
+    /** Явные native владельцы размера; обязательны для viewportSizing. / Explicit native size owners, required for viewportSizing. */
+    sizingElements?: () => FloatingSizingElements | null;
     widthMatch?: () => FloatingWidthMatch;
     zIndex?: () => string;
     scrollStrategy?: 'reposition' | 'close';
@@ -26,6 +40,7 @@ export interface FloatingPositionController {
     arrowStyle: Ref<Record<string, string>>;
     resolvedPlacement: Ref<FloatingPlacement>;
     coordinates: Ref<FloatingCoordinates>;
+    availableSize: Ref<FloatingAvailableSize | null>;
     updatePosition: () => void;
 }
 /** Координаты floating-поверхности во viewport. / Floating-surface viewport coordinates. */
@@ -36,5 +51,10 @@ export interface FloatingCoordinates {
 /**
  * Единый владелец geometry/collision/observer-контракта floating surfaces.
  * Canonical owner of floating-surface geometry, collision and observers.
+ * Panel dimensions use the untransformed used CSS border box, preserving
+ * fractional pixels and content-box padding/borders. Non-resolved CSS sizes
+ * use native unscaled offset dimensions; visual anchor rectangles retain transforms.
+ * CSSOM: https://www.w3.org/TR/cssom-1/#resolved-values
+ * CSSOM View: https://www.w3.org/TR/cssom-view-1/#dom-htmlelement-offsetwidth
  */
 export declare function useFloatingPosition(options: FloatingPositionOptions): FloatingPositionController;

package/dist/src/composables/useFloatingPosition.js

@@ -28,97 +28,174 @@ function u(e, t) {
 	let n = Math.min(10, t / 2);
 	return Math.max(n, Math.min(e, t - n));
 }
-function d(s) {
-	let d = r(null), f = s.panelRef ?? r(null), p = r({}), m = r({}), h = r(s.placement()), g = r({
+function d(e) {
+	if (!/^(?:\d+|\d*\.\d+)px$/u.test(e)) return null;
+	let t = Number(e.slice(0, -2));
+	return Number.isFinite(t) ? t : null;
+}
+function f(e, t, n) {
+	let r = d(e);
+	if (r === null) return null;
+	if (t === "border-box") return r;
+	let i = r;
+	for (let e of n) {
+		let t = d(e);
+		if (t === null) return null;
+		i += t;
+	}
+	return i;
+}
+function p(e) {
+	let t = window.getComputedStyle(e);
+	return {
+		width: f(t.width, t.boxSizing, [
+			t.paddingLeft,
+			t.paddingRight,
+			t.borderLeftWidth,
+			t.borderRightWidth
+		]) ?? e.offsetWidth,
+		height: f(t.height, t.boxSizing, [
+			t.paddingTop,
+			t.paddingBottom,
+			t.borderTopWidth,
+			t.borderBottomWidth
+		]) ?? e.offsetHeight
+	};
+}
+function m(e) {
+	let { surface: t, content: n } = e;
+	if (!t.contains(n)) throw Error("useFloatingPosition: natural content must belong to its native sizing surface");
+	let r = p(t), i = p(n);
+	if (r.width === 0 && r.height === 0 && i.width === 0 && i.height === 0) return r;
+	let a = window.getComputedStyle(t), o = i.height;
+	for (let e of [
+		a.paddingTop,
+		a.paddingBottom,
+		a.borderTopWidth,
+		a.borderBottomWidth
+	]) {
+		let t = d(e);
+		if (t === null) throw Error("useFloatingPosition: sizing surface block edges must resolve to pixel lengths");
+		o += t;
+	}
+	return {
+		width: r.width,
+		height: o
+	};
+}
+function h(s) {
+	let d = r(null), f = s.panelRef ?? r(null), h = r({}), g = r({}), _ = r(s.placement()), v = r({
 		left: -1e4,
 		top: -1e4
-	}), _ = null, v = !1, y = () => {
-		if (!s.active.value || typeof window > "u") return;
+	}), y = r(null), b = null, x = !1, S = !1, C = !1, w = 0, T = () => {
+		if (C || !s.active.value || typeof window > "u") return;
 		let e = s.anchorElement?.() ?? d.value, t = f.value, n = s.anchorRect?.() ?? e?.getBoundingClientRect() ?? null;
 		if (!n || !t) return;
-		let r = t.getBoundingClientRect(), i = r.width || t.offsetWidth, _ = r.height || t.offsetHeight, v = s.offset?.() ?? 6, y = s.boundaryPadding?.() ?? 8, b = window.innerWidth, x = window.innerHeight, [S, C] = o(s.placement()), w = S, T = c(w, C, n, i, _, v);
+		let r = s.viewportSizing?.() ?? !1, i = r ? s.sizingElements?.() : null;
+		if (r && !i) return;
+		let { width: b, height: x } = i ? m(i) : p(t), S = s.offset?.() ?? 6, w = s.boundaryPadding?.() ?? 8, T = window.innerWidth, E = window.innerHeight, [D, O] = o(s.placement()), k = D, A = c(k, O, n, b, x, S);
 		if (s.flip?.() ?? !0) {
-			let e = a[w], t = c(e, C, n, i, _, v), r = l(w, T, i, _, b, x, y);
-			l(e, t, i, _, b, x, y) < r && (w = e, T = t);
+			let e = a[k], t = c(e, O, n, b, x, S), i = l(k, A, b, x, T, E, w), o = l(e, t, b, x, T, E, w);
+			if (o < i && (k = e, A = t), r && (D === "left" || D === "right") && i > 0 && o > 0) {
+				let e = c("bottom", O, n, b, x, S), t = c("top", O, n, b, x, S), r = l("bottom", e, b, x, T, E, w);
+				k = l("top", t, b, x, T, E, w) < r ? "top" : "bottom", A = k === "top" ? t : e;
+			}
 		}
-		let E = i, D = _, O = {};
-		if (s.constrainMainAxis?.() ?? !1) {
-			if (w === "top" || w === "bottom") {
-				let e = w === "top" ? n.top - v - y : x - y - n.bottom - v;
-				D = Math.min(_, Math.max(0, Math.floor(e))), O.maxHeight = `${D}px`, O.overflowY = "auto";
+		let j = b, M = x, N = {};
+		if (r) {
+			let e = Math.max(0, T - 2 * w), t = Math.max(0, Math.min(E - 2 * w, k === "top" ? n.top - S - w : k === "bottom" ? E - w - n.bottom - S : E - 2 * w)), r = y.value;
+			(!r || r.width !== e || r.height !== t) && (y.value = {
+				width: e,
+				height: t
+			}), j = Math.min(b, e), M = Math.min(x, t), A = c(k, O, n, j, M, S);
+		} else if (s.constrainMainAxis?.() ?? !1) {
+			if (k === "top" || k === "bottom") {
+				let e = k === "top" ? n.top - S - w : E - w - n.bottom - S;
+				M = Math.min(x, Math.max(0, Math.floor(e))), N.maxHeight = `${M}px`, N.overflowY = "auto";
 			} else {
-				let e = w === "left" ? n.left - v - y : b - y - n.right - v;
-				E = Math.min(i, Math.max(0, Math.floor(e))), O.maxWidth = `${E}px`, O.overflowX = "auto";
+				let e = k === "left" ? n.left - S - w : T - w - n.right - S;
+				j = Math.min(b, Math.max(0, Math.floor(e))), N.maxWidth = `${j}px`, N.overflowX = "auto";
 			}
-			T = c(w, C, n, E, D, v);
+			A = c(k, O, n, j, M, S);
 		}
-		(s.shift?.() ?? !0) && (T.left = Math.max(y, Math.min(T.left, b - E - y)), T.top = Math.max(y, Math.min(T.top, x - D - y)));
-		let k = `${w}-${C}`;
-		h.value = k, g.value = {
-			left: Math.round(T.left),
-			top: Math.round(T.top)
+		(s.shift?.() ?? !0) && (A.left = Math.max(w, Math.min(A.left, T - j - w)), A.top = Math.max(w, Math.min(A.top, E - M - w)));
+		let P = `${k}-${O}`;
+		_.value = P;
+		let F = Math.round(A.left), I = Math.round(A.top);
+		v.value = r && (s.shift?.() ?? !0) ? {
+			left: Math.max(w, Math.min(F, T - j - w)),
+			top: Math.max(w, Math.min(I, E - M - w))
+		} : {
+			left: F,
+			top: I
 		};
-		let A = s.widthMatch?.() ?? "none";
-		if (p.value = {
+		let L = s.widthMatch?.() ?? "none";
+		if (h.value = {
 			position: "fixed",
-			left: `${g.value.left}px`,
-			top: `${g.value.top}px`,
+			left: `${v.value.left}px`,
+			top: `${v.value.top}px`,
 			zIndex: s.zIndex?.() ?? "var(--s-layer-root-floating)",
-			...O,
-			...A === "min" ? { minWidth: `${Math.round(n.width)}px` } : {},
-			...A === "exact" ? { width: `${Math.round(n.width)}px` } : {}
-		}, w === "top" || w === "bottom") {
-			let e = n.left + n.width / 2 - T.left;
-			m.value = { left: `${Math.round(u(e, i))}px` };
+			...N,
+			...L === "min" ? { minWidth: `${Math.round(n.width)}px` } : {},
+			...L === "exact" ? { width: `${Math.round(n.width)}px` } : {}
+		}, k === "top" || k === "bottom") {
+			let e = n.left + n.width / 2 - A.left;
+			g.value = { left: `${Math.round(u(e, b))}px` };
 		} else {
-			let e = n.top + n.height / 2 - T.top;
-			m.value = { top: `${Math.round(u(e, _))}px` };
+			let e = n.top + n.height / 2 - A.top;
+			g.value = { top: `${Math.round(u(e, x))}px` };
 		}
-	}, b = () => {
+	}, E = () => {
 		if (s.active.value) {
 			if (s.scrollStrategy === "close") {
 				s.requestClose?.();
 				return;
 			}
-			y();
+			T();
 		}
-	}, x = () => {
-		if (!(v || typeof window > "u") && (v = !0, window.addEventListener("resize", y, { passive: !0 }), window.addEventListener("scroll", b, {
+	}, D = () => {
+		if (S && !C && s.active.value && !x && typeof window < "u" && (x = !0, window.addEventListener("resize", T, { passive: !0 }), window.addEventListener("scroll", E, {
 			passive: !0,
 			capture: !0
 		}), typeof ResizeObserver < "u")) {
-			_ = new ResizeObserver(y);
+			b = new ResizeObserver(T);
 			let e = s.anchorElement?.() ?? d.value;
-			e && _.observe(e), f.value && _.observe(f.value);
+			e && b.observe(e), f.value && b.observe(f.value);
+			let t = s.viewportSizing?.() ? s.sizingElements?.() : null;
+			t && (t.surface !== f.value && b.observe(t.surface), b.observe(t.content));
 		}
-	}, S = () => {
-		v && typeof window < "u" && (v = !1, window.removeEventListener("resize", y), window.removeEventListener("scroll", b, !0), _?.disconnect(), _ = null);
+	}, O = () => {
+		x && typeof window < "u" && (x = !1, window.removeEventListener("resize", T), window.removeEventListener("scroll", E, !0), b?.disconnect(), b = null);
 	};
 	return i(s.active, async (t) => {
+		let n = ++w;
 		if (!t) {
-			S(), p.value = {}, m.value = {}, g.value = {
+			O(), h.value = {}, g.value = {}, v.value = {
 				left: -1e4,
 				top: -1e4
-			};
+			}, y.value = null;
 			return;
 		}
-		p.value = {
+		h.value = {
 			position: "fixed",
 			left: "-10000px",
 			top: "-10000px",
 			zIndex: s.zIndex?.() ?? "var(--s-layer-root-floating)"
-		}, await e(), x(), y();
+		}, await e(), S && !C && s.active.value && n === w && (D(), T());
 	}, { immediate: !0 }), n(() => {
-		s.active.value && (x(), y());
-	}), t(S), {
+		S = !0, s.active.value && (D(), T());
+	}), t(() => {
+		C = !0, S = !1, w += 1, O();
+	}), {
 		anchorRef: d,
 		panelRef: f,
-		floatingStyle: p,
-		arrowStyle: m,
-		resolvedPlacement: h,
-		coordinates: g,
-		updatePosition: y
+		floatingStyle: h,
+		arrowStyle: g,
+		resolvedPlacement: _,
+		coordinates: v,
+		availableSize: y,
+		updatePosition: T
 	};
 }
 //#endregion
-export { d as useFloatingPosition };
+export { h as useFloatingPosition };

package/dist/src/internal/fieldSurface.d.ts

@@ -10,6 +10,8 @@ export interface FieldSurfaceContract {
     invalid: boolean;
     disabled: boolean;
     readonly: boolean;
+    /** A field surface enclosing its native editor and in-flow supporting content. */
+    composite?: boolean;
 }
 export interface FieldSurfaceBindings {
     'data-s-field-surface': FieldSurfaceKind;
@@ -17,6 +19,7 @@ export interface FieldSurfaceBindings {
     'data-s-field-invalid'?: 'true';
     'data-s-field-disabled'?: 'true';
     'data-s-field-readonly'?: 'true';
+    'data-s-field-composite'?: 'true';
 }
 /**
  * Создаёт exact DOM bindings единого field-surface foundation без truthy coercion.

package/dist/src/internal/fieldSurface.js

@@ -12,13 +12,14 @@ var r = [
 ];
 function a(a, o) {
 	n("fieldSurface", "owner", a);
-	let s = t(a, "field surface kind", o.kind, r), c = t(a, "field surface appearance", o.appearance, i), l = e(a, "field surface invalid", o.invalid), u = e(a, "field surface disabled", o.disabled), d = e(a, "field surface readonly", o.readonly);
+	let s = t(a, "field surface kind", o.kind, r), c = t(a, "field surface appearance", o.appearance, i), l = e(a, "field surface invalid", o.invalid), u = e(a, "field surface disabled", o.disabled), d = e(a, "field surface readonly", o.readonly), f = o.composite !== void 0 && e(a, "field surface composite", o.composite);
 	return {
 		"data-s-field-surface": s,
 		"data-s-field-appearance": c,
 		...l ? { "data-s-field-invalid": "true" } : {},
 		...u ? { "data-s-field-disabled": "true" } : {},
-		...d ? { "data-s-field-readonly": "true" } : {}
+		...d ? { "data-s-field-readonly": "true" } : {},
+		...f ? { "data-s-field-composite": "true" } : {}
 	};
 }
 //#endregion

package/dist/src/internal/focusNavigation.d.ts

@@ -1,3 +1,5 @@
+/** Проверяет native focus capability независимо от временной видимости ancestor scope. */
+export declare const hasFocusableSemantics: (element: HTMLElement) => boolean;
 /** Проверяет programmatic/browser focus owner без layout-эвристик. / Checks a programmatic/browser focus owner without layout heuristics. */
 export declare const isFocusableElement: (element: HTMLElement) => boolean;
 /**

package/dist/src/internal/focusNavigation.js

@@ -11,16 +11,16 @@ var e = [
 	if (e.hidden || e.closest("[inert]") || e.closest("[aria-hidden=\"true\"]")) return !1;
 	let t = window.getComputedStyle(e);
 	return t.display !== "none" && t.visibility !== "hidden";
-}, n = (n) => n.matches(e) && t(n), r = (t, r) => {
+}, n = (t) => t.matches(e), r = (e) => n(e) && t(e), i = (t, n) => {
 	let i = (t instanceof Element ? t : t instanceof Node ? t.parentElement : null)?.closest(e) ?? null;
-	return !i || !n(i) || r instanceof Node && !r.contains(i) ? null : i;
-}, i = (t, r = {}) => [...t.querySelectorAll(e)].filter((e) => n(e) ? !r.requireLayout || e.offsetParent !== null || e.getClientRects().length > 0 : !1), a = (e, t, n, r) => {
-	let a = i(t).filter((e) => !n?.contains(e));
-	if (a.length === 0) return null;
-	let o = a.indexOf(e);
-	if (o >= 0) return a[(o + (r ? -1 : 1) + a.length) % a.length] ?? null;
-	let s = r ? [...a].reverse() : a, c = r ? Node.DOCUMENT_POSITION_PRECEDING : Node.DOCUMENT_POSITION_FOLLOWING;
+	return !i || !r(i) || n instanceof Node && !n.contains(i) ? null : i;
+}, a = (t, n = {}) => [...t.querySelectorAll(e)].filter((e) => r(e) ? !n.requireLayout || e.offsetParent !== null || e.getClientRects().length > 0 : !1), o = (e, t, n, r) => {
+	let i = a(t).filter((e) => !n?.contains(e));
+	if (i.length === 0) return null;
+	let o = i.indexOf(e);
+	if (o >= 0) return i[(o + (r ? -1 : 1) + i.length) % i.length] ?? null;
+	let s = r ? [...i].reverse() : i, c = r ? Node.DOCUMENT_POSITION_PRECEDING : Node.DOCUMENT_POSITION_FOLLOWING;
 	return s.find((t) => !!(e.compareDocumentPosition(t) & c)) ?? s[0] ?? null;
 };
 //#endregion
-export { r as findFocusableOwner, a as findRelativeTabTarget, i as getFocusableElements, n as isFocusableElement };
+export { i as findFocusableOwner, o as findRelativeTabTarget, a as getFocusableElements, n as hasFocusableSemantics, r as isFocusableElement };

package/dist/src/internal/layerStack.d.ts

@@ -5,20 +5,32 @@ export interface LayerRegistrationOptions {
     root: () => HTMLElement | null;
     anchor?: () => HTMLElement | null;
     branches?: () => readonly HTMLElement[];
+    /** Explicit composition owner; null keeps independent root dialogs outside focus-derived ancestry. */
+    parent?: LayerRegistration | null;
     modal?: boolean;
+    /** Native event scope for a contained layer; global modal children do not inherit it. */
+    eventBoundary?: () => HTMLElement | null;
     restoreTarget?: HTMLElement | null;
     dismissOnEscape?: () => boolean;
     dismissOnOutsidePointer?: () => boolean;
     blocksParentFocusTrap?: boolean;
     trapFocus?: (event: KeyboardEvent) => void;
     requestDismiss: (reason: LayerDismissReason, event: Event) => void;
+    /** Releases owner UI/subscriptions when its ancestor retires, without a synthetic dismiss event. */
+    onRetire?: () => void;
 }
 export interface LayerRegistration {
     readonly id: symbol;
     readonly zIndex: string;
     readonly focusScope: () => ParentNode;
+    /** Whether this registration still owns the global topmost focus request. */
+    readonly isTopmost: () => boolean;
+    /** Requests one Tab target, committed by this registration's normal close only. */
+    readonly handoffFocus: (target: HTMLElement) => () => void;
     unregister: (options?: {
         restoreFocus?: boolean;
+        retireDescendants?: boolean;
+        commitFocusHandoff?: boolean;
     }) => void;
 }
 /**