@pgcorp/ui-kit 0.14.0 → 0.15.0

package/dist/src/internal/useMenuLayer.js

@@ -1,10 +1,11 @@
 import { findFocusableOwner as e, findRelativeTabTarget as t } from "./focusNavigation.js";
 import { registerLayer as n } from "./layerStack.js";
 import { useOverlayAdmission as r } from "./overlayHost.js";
-import { useFloatingPosition as i } from "../composables/useFloatingPosition.js";
-import { computed as a, nextTick as o, onBeforeUnmount as s, ref as c, watch as l } from "vue";
+import { useOverlayPortalTarget as i } from "./overlayPortal.js";
+import { useFloatingPosition as a } from "../composables/useFloatingPosition.js";
+import { computed as o, nextTick as s, onBeforeUnmount as c, ref as l, watch as u } from "vue";
 //#region src/internal/useMenuLayer.ts
-var u = 5, d = (e, t) => ({
+var d = 5, f = (e, t) => ({
 	x: e,
 	y: t,
 	left: e,
@@ -18,93 +19,98 @@ var u = 5, d = (e, t) => ({
 		y: t
 	})
 });
-function f(f, p = {}) {
-	let m = a(() => f.value?.getElement() ?? null), h = r(), g = c(!1), _ = c("var(--s-layer-root-floating)"), v = null, y = null, b = null, x = null, S = !1, C = 0;
-	function w(e = "programmatic") {
-		C += 1;
-		let t = S && (e === "tab" || e === "programmatic");
-		t || (x?.(), x = null), S = !1, (g.value || b) && (g.value = !1, b?.unregister({
+function p(p, m = {}) {
+	let h = o(() => p.value?.getElement() ?? null), g = r(), _ = i(), v = l(!1), y = l("var(--s-layer-root-floating)"), b = null, x = null, S = null, C = null, w = !1, T = 0;
+	u(h, () => S?.refreshModality(), { flush: "sync" });
+	function E(e = "programmatic") {
+		T += 1;
+		let t = w && (e === "tab" || e === "programmatic");
+		t || (C?.(), C = null), w = !1, (v.value || S) && (v.value = !1, S?.unregister({
 			restoreFocus: !t && e !== "outside",
 			commitFocusHandoff: t
-		}), b = null, v = null, y = null, _.value = "var(--s-layer-root-floating)");
+		}), S = null, b = null, x = null, y.value = "var(--s-layer-root-floating)");
 	}
-	function T(e) {
-		if (p.onRequestDismiss) {
-			p.onRequestDismiss(e);
+	function D(e) {
+		if (m.onRequestDismiss) {
+			m.onRequestDismiss(e);
 			return;
 		}
-		w(e), p.onDismiss?.(e);
+		E(e), m.onDismiss?.(e);
 	}
-	function E(e) {
-		let n = y;
+	function O(e) {
+		let n = x;
 		if (!n) {
-			w("outside");
+			E("outside");
 			return;
 		}
-		let r = b?.focusScope() ?? document, i = t(n, r, m.value, e.shiftKey);
-		e.preventDefault(), x?.(), x = i && b ? b.handoffFocus(i) : null, S = !0, T("tab");
+		let r = S?.focusScope() ?? document, i = t(n, r, h.value, e.shiftKey);
+		e.preventDefault(), C?.(), C = i && S ? S.handoffFocus(i) : null, w = !0, D("tab");
 	}
-	let { coordinates: D, availableSize: O, updatePosition: k } = i({
-		active: g,
-		placement: () => v?.type === "element" && v.placement === "inline" ? v.align === "right" ? "left-start" : "right-start" : v?.type === "element" && v.placement === "top" ? v.align === "right" ? "top-end" : "top-start" : v?.type === "element" && v.align === "right" ? "bottom-end" : "bottom-start",
-		anchorElement: () => v?.type === "element" ? v.element : null,
-		anchorRect: () => v ? v.type === "point" ? d(v.x, v.y) : v.element.isConnected ? v.element.getBoundingClientRect() : (w("outside"), null) : null,
-		panelRef: m,
+	let { coordinates: k, availableSize: A, updatePosition: j } = a({
+		active: v,
+		placement: () => b?.type === "element" && b.placement === "inline" ? b.align === "right" ? "left-start" : "right-start" : b?.type === "element" && b.placement === "top" ? b.align === "right" ? "top-end" : "top-start" : b?.type === "element" && b.align === "right" ? "bottom-end" : "bottom-start",
+		anchorElement: () => b?.type === "element" ? b.element : null,
+		anchorRect: () => b ? b.type === "point" ? f(b.x, b.y) : b.element.isConnected ? b.element.getBoundingClientRect() : (E("outside"), null) : null,
+		panelRef: h,
 		offset: () => 0,
-		boundaryPadding: () => u,
+		boundaryPadding: () => d,
 		flip: () => !0,
 		shift: () => !0,
 		widthMatch: () => "none",
 		viewportSizing: () => !0,
-		sizingElements: () => f.value?.getSizingElements() ?? null,
-		zIndex: () => _.value,
+		sizingElements: () => p.value?.getSizingElements() ?? null,
+		zIndex: () => y.value,
 		scrollStrategy: "reposition"
 	});
-	async function A(t, r) {
-		if (!h.value) {
-			w("outside"), p.onRetire?.();
+	async function M(t, r) {
+		if (!g.value) {
+			E("outside"), m.onRetire?.();
 			return;
 		}
-		x?.(), x = null, S = !1, g.value && w("outside");
-		let i = ++C;
+		if (_.value === null) return;
+		C?.(), C = null, w = !1, v.value && E("outside");
+		let i = ++T;
 		if (t.type === "element" && e(t.element) !== t.element) throw Error("useMenuLayer: element anchor must be the canonical focusable owner");
-		v = t;
+		b = t;
 		let a = e(r ?? null) ?? e(document.activeElement);
-		if (y = t.type === "element" ? t.element : a, g.value = !0, await o(), C === i && g.value && h.value) {
-			if (!m.value?.isConnected) throw w("outside"), Error("useMenuLayer: connected layer element is unavailable after opening");
-			if (b = n({
+		if (x = t.type === "element" ? t.element : a, v.value = !0, await s(), T === i && v.value && g.value) {
+			if (!h.value?.isConnected) throw E("outside"), Error("useMenuLayer: connected layer element is unavailable after opening");
+			if (S = n({
 				kind: "menu",
-				root: () => m.value,
+				root: () => h.value,
 				anchor: () => t.type === "element" ? t.element : a,
 				restoreTarget: a,
 				requestDismiss: (e) => {
-					T(e === "escape" ? "escape" : "outside");
+					D(e === "escape" ? "escape" : "outside");
 				},
 				onRetire: () => {
-					w("outside"), p.onRetire?.();
+					E("outside"), m.onRetire?.();
 				}
-			}), _.value = b.zIndex, await o(), C === i && g.value && h.value) {
-				if (!m.value) throw w("outside"), Error("useMenuLayer: layer element is unavailable after opening");
-				k();
+			}), y.value = S.zIndex, await s(), T === i && v.value && g.value) {
+				if (!h.value) throw E("outside"), Error("useMenuLayer: layer element is unavailable after opening");
+				j();
 			}
 		}
 	}
-	function j(e, t) {
-		g.value ? w("trigger") : A(e, t);
+	function N(e, t) {
+		v.value ? E("trigger") : M(e, t);
 	}
-	return s(() => w("outside")), l(h, (e) => {
-		e || !g.value && !b || (w("outside"), p.onRetire?.());
+	return c(() => E("outside")), u(g, (e) => {
+		e || !v.value && !S || (E("outside"), m.onRetire?.());
+	}, { flush: "sync" }), u(_, (e) => {
+		e === null && (v.value || S) && (E("outside"), m.onRetire?.());
 	}, { flush: "sync" }), {
-		isOpen: g,
-		position: D,
-		availableSize: O,
-		zIndex: _,
-		open: A,
-		close: w,
-		closeForTab: E,
-		toggle: j,
-		positionLayer: k
+		isOpen: v,
+		portalTarget: _,
+		position: k,
+		availableSize: A,
+		zIndex: y,
+		open: M,
+		close: E,
+		closeForTab: O,
+		toggle: N,
+		positionLayer: j
 	};
 }
 //#endregion
-export { f as useMenuLayer };
+export { p as useMenuLayer };

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

@@ -0,0 +1,27 @@
+/** Exact loss evidence from the native owner, never from an arbitrary historical BODY state. */
+export interface ModalityMutation {
+    readonly boundary: Element;
+    readonly isCurrent: () => boolean;
+}
+export interface NativeDialogCycle {
+    readonly subject: HTMLDialogElement;
+    readonly refresh: () => void;
+    readonly close: (beforeRetire?: (mutation: ModalityMutation) => void) => void;
+}
+/** Admits only the actual live native modal owned by this shared lifecycle. */
+export declare function isOwnedNativeModal(element: Element): boolean;
+/** Native modal focus semantics apply to an exposed host subject as well as a kit owner. */
+export declare function isActualNativeModal(element: Element): boolean;
+/** Native Document blocking is independent of visible inert attributes on background elements. */
+export declare function isNativeModalBackground(element: Element): boolean;
+/** Releases the exact inactive shell lease after removal, or before the same subject acquires a new cycle. */
+export declare function releaseRetiredNativeSubject(subject: HTMLDialogElement): void;
+/**
+ * Acquires one actual connected native dialog. Self inert suppresses UA autofocus;
+ * the authenticated shared admission performs the sole initial focus claim.
+ * Exact previous native subjects remain inert for the acquired cycle's lifetime,
+ * including their direct portals; leases release before authorized source return.
+ * Native close extends its Document blocking synchronously until all UA return steps
+ * finish, preserving arbitrary source styles and attributes.
+ */
+export declare function acquireNativeDialog(subject: HTMLDialogElement, beforeAcquire?: (mutation: ModalityMutation) => void, onUnownedSourceLoss?: () => void): NativeDialogCycle;

package/dist/src/internal/viewportModality.js

@@ -0,0 +1,132 @@
+import { createAggregateError as e } from "./es2020.js";
+import { flatTreeContains as t, flatTreeParent as n } from "./flatTree.js";
+import { acquireInertLease as r } from "./inertLease.js";
+import { nativeFocusChain as i } from "./nativeFocus.js";
+//#region src/internal/viewportModality.ts
+var a = [], o = /* @__PURE__ */ new WeakMap();
+function s(e) {
+	return e instanceof HTMLDialogElement && e.open && e.matches(":modal");
+}
+function c(e) {
+	let n = a[a.length - 1]?.subject;
+	return !!(n?.open && n.isConnected && e.isConnected && !t(n, e));
+}
+function l(e) {
+	let t = o.get(e);
+	t && (o.delete(e), t.observer.disconnect(), t.lease.release());
+}
+var u = (e, t) => {
+	let r = () => {
+		i.disconnect();
+		for (let t = n(e); t; t = n(t)) i.observe(t, { childList: !0 });
+	}, i = new MutationObserver(() => {
+		e.isConnected ? r() : l(e);
+	});
+	o.set(e, {
+		lease: t,
+		observer: i
+	}), e.isConnected ? r() : l(e);
+}, d = (e) => {
+	let t = [];
+	for (let r = e; r; r = n(r)) r instanceof HTMLDialogElement && s(r) && t.push(r);
+	return t;
+};
+function f(n, o, s) {
+	if (!(n instanceof HTMLDialogElement) || !n.isConnected || n.ownerDocument !== document) throw TypeError("ui-kit native dialog: subject must be a connected same-document HTMLDialogElement");
+	if (n.open || a.some((e) => e.subject === n)) throw TypeError("ui-kit native dialog: subject lifecycle is already open");
+	l(n);
+	let f = !0, p = !0, m = !0, h = i(), g = [], _ = h[h.length - 1], v = _ && _ !== document.body && _ !== document.documentElement ? {
+		boundary: _,
+		isCurrent: () => m && f && n.open && n.isConnected && (p || a[a.length - 1] === C) && c(_)
+	} : null, y = () => {
+		let e = i(), r = e[e.length - 1];
+		r && r !== document.body && r !== document.documentElement && !t(n, r) && (h = e);
+	}, b = (e) => {
+		!n.open && _ && e.composedPath().includes(_) && (m = !1, s?.());
+	}, x = () => {
+		if (f && (!n.open || !n.isConnected || !n.matches(":modal"))) throw TypeError("ui-kit native dialog: external close(), showModal(), open mutation or subject removal violates the owned lifecycle");
+	}, S = new MutationObserver((e) => {
+		if (f && e.some((e) => e.type === "attributes" && e.attributeName === "open")) throw TypeError("ui-kit native dialog: external open attribute mutation violates the owned lifecycle");
+		x();
+	}), C = {
+		subject: n,
+		refresh: x,
+		close: (t) => {
+			if (!f) return;
+			S.disconnect();
+			let i = [], o = [];
+			try {
+				let e = /* @__PURE__ */ new Set();
+				for (let t of h) for (let r of d(t)) r !== n && e.add(r);
+				for (let t of a) t !== C && t.subject.open && t.subject.isConnected && e.add(t.subject);
+				i.push(r(n.ownerDocument.documentElement));
+				for (let t of e) i.push(r(t));
+				let s = null, c = {
+					boundary: n,
+					isCurrent: () => s?.isCurrent() === !0 && n.isConnected && !n.open
+				};
+				try {
+					t?.(c);
+				} catch (e) {
+					o.push(e);
+				}
+				if (s = r(n), u(n, s), f = !1, n.open) try {
+					n.close();
+				} catch (e) {
+					o.push(e);
+				}
+			} finally {
+				f = !1;
+				let e = a.indexOf(C);
+				e >= 0 && a.splice(e, 1);
+				for (let e of g.splice(0).reverse()) try {
+					e.release();
+				} catch (e) {
+					o.push(e);
+				}
+				for (let e of i.reverse()) try {
+					e.release();
+				} catch (e) {
+					o.push(e);
+				}
+			}
+			if (o.length === 1) throw o[0];
+			if (o.length > 1) throw e(o, "ui-kit native dialog: close transaction cleanup failed");
+		}
+	}, w = r(n);
+	a.push(C), document.addEventListener("focusin", y, !0), document.addEventListener("focusout", b, !0);
+	try {
+		if (v && o?.(v), n.showModal(), !n.open || !n.isConnected) throw TypeError("ui-kit native dialog: showModal() must establish the connected native cycle");
+		let e = /* @__PURE__ */ new Set();
+		for (let t of a) t !== C && t.subject.open && t.subject.isConnected && e.add(t.subject);
+		for (let t of h) for (let r of d(t)) r !== n && e.add(r);
+		for (let t of e) g.push(r(t));
+		S.observe(n, {
+			attributes: !0,
+			attributeFilter: ["open"]
+		});
+	} catch (t) {
+		let r = [t];
+		if (n.open) try {
+			C.close();
+		} catch (e) {
+			r.push(e);
+		}
+		else {
+			f = !1;
+			let e = a.indexOf(C);
+			e >= 0 && a.splice(e, 1);
+			for (let e of g.splice(0).reverse()) try {
+				e.release();
+			} catch (e) {
+				r.push(e);
+			}
+		}
+		throw r.length > 1 ? e(r, "ui-kit native dialog: acquisition cleanup failed") : t;
+	} finally {
+		p = !1, document.removeEventListener("focusin", y, !0), document.removeEventListener("focusout", b, !0), w.release();
+	}
+	return C;
+}
+//#endregion
+export { f as acquireNativeDialog, s as isActualNativeModal, c as isNativeModalBackground, l as releaseRetiredNativeSubject };

package/dist/typography.js

@@ -1,7 +1,9 @@
 /*! Bundled @tailwindcss/typography@0.5.20; postcss-selector-parser@7.1.6. MIT notices: typography.LICENSE.txt */
+import { createRequire } from "node:module";
 import plugin from "tailwindcss/plugin";
 //#region \0rolldown/runtime.js
 var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
+var __require = /* #__PURE__ */ (() => createRequire(import.meta.url))();
 //#endregion
 //#region \0ui-kit:typography-tailwind-plugin-external
 var require__ui_kit_typography_tailwind_plugin_external = /* @__PURE__ */ __commonJSMin(((exports, module) => {
@@ -1795,7 +1797,7 @@ var require_util = /* @__PURE__ */ __commonJSMin(((exports) => {
 }));
 //#endregion
 //#region ../../node_modules/postcss-selector-parser/dist/selectors/node.js
-var require_node = /* @__PURE__ */ __commonJSMin(((exports) => {
+var require_node$1 = /* @__PURE__ */ __commonJSMin(((exports) => {
 	Object.defineProperty(exports, "__esModule", { value: true });
 	var util_1 = require_util();
 	var cloneNode = function(obj, parent, depth) {
@@ -2070,7 +2072,7 @@ var require_container = /* @__PURE__ */ __commonJSMin(((exports) => {
 	};
 	Object.defineProperty(exports, "__esModule", { value: true });
 	var util_1 = require_util();
-	var node_1 = __importDefault(require_node());
+	var node_1 = __importDefault(require_node$1());
 	var types = __importStar(require_types());
 	exports.default = function(_super) {
 		__extends(Container, _super);
@@ -2538,7 +2540,7 @@ var require_className = /* @__PURE__ */ __commonJSMin(((exports) => {
 	Object.defineProperty(exports, "__esModule", { value: true });
 	var cssesc_1 = __importDefault(require_cssesc());
 	var util_1 = require_util();
-	var node_1 = __importDefault(require_node());
+	var node_1 = __importDefault(require_node$1());
 	var types_1 = require_types();
 	exports.default = function(_super) {
 		__extends(ClassName, _super);
@@ -2596,7 +2598,7 @@ var require_comment = /* @__PURE__ */ __commonJSMin(((exports) => {
 		return mod && mod.__esModule ? mod : { "default": mod };
 	};
 	Object.defineProperty(exports, "__esModule", { value: true });
-	var node_1 = __importDefault(require_node());
+	var node_1 = __importDefault(require_node$1());
 	var types_1 = require_types();
 	exports.default = function(_super) {
 		__extends(Comment, _super);
@@ -2633,7 +2635,7 @@ var require_id = /* @__PURE__ */ __commonJSMin(((exports) => {
 		return mod && mod.__esModule ? mod : { "default": mod };
 	};
 	Object.defineProperty(exports, "__esModule", { value: true });
-	var node_1 = __importDefault(require_node());
+	var node_1 = __importDefault(require_node$1());
 	var types_1 = require_types();
 	exports.default = function(_super) {
 		__extends(ID, _super);
@@ -2729,7 +2731,7 @@ var require_namespace = /* @__PURE__ */ __commonJSMin(((exports) => {
 			return this.qualifiedName(_super.prototype.valueToString.call(this));
 		};
 		return Namespace;
-	}(__importDefault(require_node()).default);
+	}(__importDefault(require_node$1()).default);
 }));
 //#endregion
 //#region ../../node_modules/postcss-selector-parser/dist/selectors/tag.js
@@ -2793,7 +2795,7 @@ var require_string = /* @__PURE__ */ __commonJSMin(((exports) => {
 		return mod && mod.__esModule ? mod : { "default": mod };
 	};
 	Object.defineProperty(exports, "__esModule", { value: true });
-	var node_1 = __importDefault(require_node());
+	var node_1 = __importDefault(require_node$1());
 	var types_1 = require_types();
 	var String = function(_super) {
 		__extends(String, _super);
@@ -2857,60 +2859,12 @@ var require_pseudo = /* @__PURE__ */ __commonJSMin(((exports) => {
 	}(container_1.default);
 }));
 //#endregion
-//#region ../../node_modules/util-deprecate/browser.js
-var require_browser = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+//#region ../../node_modules/util-deprecate/node.js
+var require_node = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	/**
-	* Module exports.
+	* For Node.js, simply re-export the core `util.deprecate` function.
 	*/
-	module.exports = deprecate;
-	/**
-	* Mark that a method should not be used.
-	* Returns a modified function which warns once by default.
-	*
-	* If `localStorage.noDeprecation = true` is set, then it is a no-op.
-	*
-	* If `localStorage.throwDeprecation = true` is set, then deprecated functions
-	* will throw an Error when invoked.
-	*
-	* If `localStorage.traceDeprecation = true` is set, then deprecated functions
-	* will invoke `console.trace()` instead of `console.error()`.
-	*
-	* @param {Function} fn - the function to deprecate
-	* @param {String} msg - the string to print to the console when `fn` is invoked
-	* @returns {Function} a new "deprecated" version of `fn`
-	* @api public
-	*/
-	function deprecate(fn, msg) {
-		if (config("noDeprecation")) return fn;
-		var warned = false;
-		function deprecated() {
-			if (!warned) {
-				if (config("throwDeprecation")) throw new Error(msg);
-				else if (config("traceDeprecation")) console.trace(msg);
-				else console.warn(msg);
-				warned = true;
-			}
-			return fn.apply(this, arguments);
-		}
-		return deprecated;
-	}
-	/**
-	* Checks `localStorage` for boolean values for the given `name`.
-	*
-	* @param {String} name
-	* @returns {Boolean}
-	* @api private
-	*/
-	function config(name) {
-		try {
-			if (!global.localStorage) return false;
-		} catch (_) {
-			return false;
-		}
-		var val = global.localStorage[name];
-		if (null == val) return false;
-		return String(val).toLowerCase() === "true";
-	}
+	module.exports = __require("node:util").deprecate;
 }));
 //#endregion
 //#region ../../node_modules/postcss-selector-parser/dist/selectors/attribute.js
@@ -2943,7 +2897,7 @@ var require_attribute = /* @__PURE__ */ __commonJSMin(((exports) => {
 	var unesc_1 = __importDefault(require_unesc());
 	var namespace_1 = __importDefault(require_namespace());
 	var types_1 = require_types();
-	var deprecate = require_browser();
+	var deprecate = require_node();
 	var WRAPPED_IN_QUOTES = /^('|")([^]*)\1$/;
 	var warnOfDeprecatedValueAssignment = deprecate(function() {}, "Assigning an attribute a value containing characters that might need to be escaped is deprecated. Call attribute.setValue() instead.");
 	var warnOfDeprecatedQuotedAssignment = deprecate(function() {}, "Assigning attr.quoted is deprecated and has no effect. Assign to attr.quoteMark instead.");
@@ -3361,7 +3315,7 @@ var require_combinator = /* @__PURE__ */ __commonJSMin(((exports) => {
 		return mod && mod.__esModule ? mod : { "default": mod };
 	};
 	Object.defineProperty(exports, "__esModule", { value: true });
-	var node_1 = __importDefault(require_node());
+	var node_1 = __importDefault(require_node$1());
 	var types_1 = require_types();
 	exports.default = function(_super) {
 		__extends(Combinator, _super);
@@ -3398,7 +3352,7 @@ var require_nesting = /* @__PURE__ */ __commonJSMin(((exports) => {
 		return mod && mod.__esModule ? mod : { "default": mod };
 	};
 	Object.defineProperty(exports, "__esModule", { value: true });
-	var node_1 = __importDefault(require_node());
+	var node_1 = __importDefault(require_node$1());
 	var types_1 = require_types();
 	exports.default = function(_super) {
 		__extends(Nesting, _super);
@@ -5148,3 +5102,4 @@ var require_src = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 }));
 //#endregion
 export default require_src();
+export {};