@pgcorp/ui-kit 0.13.0 → 0.15.0

package/dist/src/components/shared/containers/SDrawer.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,13 @@
-import { useDialogOverlay as e } from "../../../composables/useDialogOverlay.js";
-import { useUiKitLocale as t } from "../../../composables/useUiKitLocale.js";
-import { useOwnedAttrs as n } from "../../../internal/ownedAttrs.js";
-import { validateBoolean as r, validateExactString as i } from "../../../internal/runtimeContract.js";
-import { validateDialogSurfaceHeadingLevel as a } from "../_internal/dialogSurface.js";
-import o from "../_internal/SDialogSurface.vue.js";
-import { Teleport as s, Transition as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createVNode as h, defineComponent as g, mergeProps as _, normalizeStyle as v, openBlock as y, renderSlot as b, unref as x, withCtx as S } from "vue";
+import { assertDialogSurfacePresentation as e, validateDialogSurfaceHeadingLevel as t, validateDrawerExtent as n } from "../_internal/dialogSurface.js";
+import { useOverlayHost as r } from "../../../internal/overlayHost.js";
+import { validateBoolean as i, validateExactString as a } from "../../../internal/runtimeContract.js";
+import { useDialogOverlay as o } from "../../../composables/useDialogOverlay.js";
+import { useUiKitLocale as s } from "../../../composables/useUiKitLocale.js";
+import { useOwnedAttrs as c } from "../../../internal/ownedAttrs.js";
+import l from "../_internal/SDialogSurface.vue.js";
+import { Teleport as u, computed as d, createBlock as f, createCommentVNode as p, createSlots as m, createVNode as h, defineComponent as g, mergeProps as _, onErrorCaptured as v, openBlock as y, renderSlot as b, unref as x, watch as S, withCtx as C } from "vue";
 //#region src/components/shared/containers/SDrawer.vue?vue&type=script&setup=true&lang.ts
-var C = ["data-placement"], w = ["data-placement"], T = /*@__PURE__*/ g({
+var w = /*@__PURE__*/ g({
 	inheritAttrs: !1,
 	__name: "SDrawer",
 	props: {
@@ -23,83 +24,156 @@ var C = ["data-placement"], w = ["data-placement"], T = /*@__PURE__*/ g({
 			default: !0
 		},
 		ariaLabel: { default: void 0 },
-		headingLevel: { default: 2 }
+		headingLevel: { default: 2 },
+		scope: { default: "viewport" },
+		extent: { default: void 0 },
+		scrollBehavior: { default: "body" }
 	},
 	emits: ["update:open", "opened"],
-	setup(g, { emit: T }) {
-		let E = g, { t: D } = t(), O = T, k = n({
+	setup(g, { emit: w }) {
+		let T = g, { t: E } = s(), D = w, O = c({
 			component: "SDrawer",
 			owner: "drawer dialog surface"
-		}), A = l(() => E.ariaLabel ?? D("dialog.drawer")), j = l(() => a("SDrawer", E.headingLevel)), M = l(() => i("SDrawer", "placement", E.placement, ["right", "bottom"])), N = l(() => i("SDrawer", "size", E.size, [
+		}), k = r("SDrawer", !1), A = {
+			sm: 50,
+			md: 70,
+			lg: 90
+		}, j = a("SDrawer", "scope", T.scope, ["viewport", "contained"]), M = d(() => {
+			let e = a("SDrawer", "scope", T.scope, ["viewport", "contained"]);
+			if (T.open && e !== j) throw TypeError("SDrawer: scope may change only while open=false");
+			return e;
+		}), N = d(() => a("SDrawer", "scrollBehavior", T.scrollBehavior, ["body", "content"])), P = d(() => T.ariaLabel ?? E("dialog.drawer")), F = d(() => t("SDrawer", T.headingLevel)), I = d(() => a("SDrawer", "placement", T.placement, [
+			"left",
+			"right",
+			"bottom"
+		])), L = d(() => a("SDrawer", "size", T.size, [
 			"sm",
 			"md",
 			"lg"
-		])), P = l(() => r("SDrawer", "open", E.open)), F = l(() => r("SDrawer", "closable", E.closable)), I = l(() => r("SDrawer", "mobileFullScreen", E.mobileFullScreen)), L = l(() => ({
-			kind: "drawer",
-			size: N.value,
-			placement: M.value,
-			mobileFullScreen: I.value
-		}));
-		function R() {
-			M.value, N.value, P.value, F.value, I.value, j.value;
+		])), R = d(() => i("SDrawer", "open", T.open)), z = d(() => i("SDrawer", "closable", T.closable)), B = d(() => i("SDrawer", "mobileFullScreen", T.mobileFullScreen)), V = d(() => {
+			if (M.value === "viewport") {
+				if (T.extent !== void 0) throw TypeError("SDrawer: extent requires scope=\"contained\"");
+				return;
+			}
+			return n("SDrawer", T.extent === void 0 ? A[L.value] : T.extent);
+		}), H = d(() => {
+			let e = {
+				kind: "drawer",
+				size: L.value,
+				placement: I.value,
+				mobileFullScreen: B.value,
+				scrollBehavior: N.value
+			};
+			if (M.value === "contained") {
+				if (!k) throw TypeError("SDrawer: scope=\"contained\" requires a parent SOverlayHost");
+				return {
+					...e,
+					scope: "contained",
+					extent: n("SDrawer", V.value)
+				};
+			}
+			return V.value, {
+				...e,
+				scope: "viewport"
+			};
+		}), U = d(() => M.value === "contained" ? k?.portal.value : "body");
+		function W() {
+			let r = i("SDrawer", "open", T.open);
+			i("SDrawer", "closable", T.closable), t("SDrawer", T.headingLevel);
+			let o = a("SDrawer", "scope", T.scope, ["viewport", "contained"]);
+			if (r && o !== j) throw TypeError("SDrawer: scope may change only while open=false");
+			let s = a("SDrawer", "size", T.size, [
+				"sm",
+				"md",
+				"lg"
+			]), c = {
+				kind: "drawer",
+				size: s,
+				placement: a("SDrawer", "placement", T.placement, [
+					"left",
+					"right",
+					"bottom"
+				]),
+				mobileFullScreen: i("SDrawer", "mobileFullScreen", T.mobileFullScreen),
+				scrollBehavior: a("SDrawer", "scrollBehavior", T.scrollBehavior, ["body", "content"])
+			};
+			if (o === "contained") {
+				if (!k) throw TypeError("SDrawer: scope=\"contained\" requires a parent SOverlayHost");
+				e({
+					...c,
+					scope: o,
+					extent: n("SDrawer", T.extent === void 0 ? A[s] : T.extent)
+				});
+			} else {
+				if (T.extent !== void 0) throw TypeError("SDrawer: extent requires scope=\"contained\"");
+				e({
+					...c,
+					scope: o
+				});
+			}
 		}
-		R();
-		function z() {
-			O("update:open", !1);
+		W(), S([M, R], ([e, t]) => {
+			t || (j = e);
+		}, { flush: "sync" });
+		function G() {
+			D("update:open", !1);
 		}
-		let { setPanelElement: B, backdropStyle: V, surfaceStyle: H } = e({
-			open: P,
-			closable: F,
-			requestClose: z,
-			opened: () => O("opened")
+		let { setPanelElement: K, setPortalElement: q, setDismissalElement: J, panelRef: Y, layerIndex: X, renderOpen: Z, dispose: Q } = o({
+			open: R,
+			closable: z,
+			requestClose: G,
+			opened: () => D("opened"),
+			scope: M,
+			host: k,
+			validate: W
 		});
-		return (e, t) => (y(), u(s, { to: "body" }, [h(c, { name: "s-drawer-backdrop" }, {
-			default: S(() => [g.open ? (y(), f("div", {
-				key: 0,
-				class: "s-drawer-backdrop",
-				style: v(x(V)),
-				"aria-hidden": "true"
-			}, null, 4)) : d("", !0)]),
-			_: 1
-		}), h(c, { name: "s-drawer-panel" }, {
-			default: S(() => [g.open ? (y(), f("div", {
-				key: 0,
-				class: "s-drawer-shell",
-				"data-placement": M.value,
-				style: v(x(H))
-			}, [p("div", {
-				class: "s-drawer-positioner",
-				"data-placement": M.value
-			}, [h(o, _(x(k).bindings(), {
-				presentation: L.value,
-				title: g.title,
-				"accessible-name": A.value,
-				"heading-level": j.value,
-				closable: g.closable,
-				"set-surface-element": x(B),
-				onRequestClose: z
-			}), m({
-				default: S(() => [b(e.$slots, "default", {}, void 0, !0)]),
-				_: 2
-			}, [e.$slots.header ? {
-				name: "header",
-				fn: S(() => [b(e.$slots, "header", {}, void 0, !0)]),
-				key: "0"
-			} : void 0, e.$slots.footer ? {
-				name: "footer",
-				fn: S(({ close: t }) => [b(e.$slots, "footer", { close: t }, void 0, !0)]),
-				key: "1"
-			} : void 0]), 1040, [
-				"presentation",
-				"title",
-				"accessible-name",
-				"heading-level",
-				"closable",
-				"set-surface-element"
-			])], 8, w)], 12, C)) : d("", !0)]),
-			_: 3
-		})]));
+		function $() {
+			Y.value?.remove();
+		}
+		return v(() => {
+			try {
+				Q();
+			} finally {
+				$(), queueMicrotask($);
+			}
+		}), (e, t) => U.value ? (y(), f(u, {
+			key: 0,
+			to: U.value
+		}, [h(l, _({ open: x(Z) }, x(O).bindings(), {
+			presentation: H.value,
+			title: g.title,
+			"accessible-name": P.value,
+			"heading-level": F.value,
+			closable: z.value,
+			"set-surface-element": x(K),
+			"set-portal-element": x(q),
+			"set-dismissal-element": x(J),
+			"layer-index": x(X),
+			onRequestClose: G
+		}), m({
+			default: C(() => [b(e.$slots, "default")]),
+			_: 2
+		}, [e.$slots.header ? {
+			name: "header",
+			fn: C(() => [b(e.$slots, "header")]),
+			key: "0"
+		} : void 0, e.$slots.footer ? {
+			name: "footer",
+			fn: C(({ close: t }) => [b(e.$slots, "footer", { close: t })]),
+			key: "1"
+		} : void 0]), 1040, [
+			"open",
+			"presentation",
+			"title",
+			"accessible-name",
+			"heading-level",
+			"closable",
+			"set-surface-element",
+			"set-portal-element",
+			"set-dismissal-element",
+			"layer-index"
+		])], 8, ["to"])) : p("", !0);
 	}
 });
 //#endregion
-export { T as default };
+export { w as default };

package/dist/src/components/shared/containers/SModal.vue.d.ts

@@ -16,23 +16,23 @@ export interface Props {
     /** Уровень видимого заголовка в document outline. / Visible title level in the document outline. */
     headingLevel?: ModalHeadingLevel;
 }
-declare var __VLS_28: {}, __VLS_30: {}, __VLS_33: {
+declare var __VLS_17: {}, __VLS_19: {}, __VLS_22: {
     close: () => void;
-}, __VLS_36: {
+}, __VLS_25: {
     close: () => void;
-}, __VLS_39: {
+}, __VLS_28: {
     close: () => void;
 };
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_28) => any;
+    header?: (props: typeof __VLS_17) => any;
 } & {
-    default?: (props: typeof __VLS_30) => any;
+    default?: (props: typeof __VLS_19) => any;
 } & {
-    footer?: (props: typeof __VLS_33) => any;
+    footer?: (props: typeof __VLS_22) => any;
 } & {
-    'footer-start'?: (props: typeof __VLS_36) => any;
+    'footer-start'?: (props: typeof __VLS_25) => any;
 } & {
-    'footer-end'?: (props: typeof __VLS_39) => any;
+    'footer-end'?: (props: typeof __VLS_28) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;

package/dist/src/components/shared/containers/SModal.vue.js

@@ -1,8 +1,5 @@
-import "../../../../assets/src/components/shared/containers/SModal.css_vue_type_style_index_0_src_0dc51b74_scoped_0dc51b74_lang.css";
-import e from "../../../../_virtual/_plugin-vue_export-helper.js";
-import t from "./SModal.vue_vue_type_script_setup_true_lang.js";
-/* empty css                                                                    */
+import e from "./SModal.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/shared/containers/SModal.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-0dc51b74"]]);
+var t = e;
 //#endregion
-export { n as default };
+export { t as default };

package/dist/src/components/shared/containers/SModal.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,12 @@
-import { useDialogOverlay as e } from "../../../composables/useDialogOverlay.js";
-import { useUiKitLocale as t } from "../../../composables/useUiKitLocale.js";
-import { useOwnedAttrs as n } from "../../../internal/ownedAttrs.js";
-import { validateDialogSurfaceHeadingLevel as r } from "../_internal/dialogSurface.js";
-import i from "../_internal/SDialogSurface.vue.js";
-import { Teleport as a, Transition as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, createVNode as p, defineComponent as m, mergeProps as h, normalizeClass as g, normalizeStyle as _, onErrorCaptured as v, openBlock as y, renderSlot as b, toRef as x, unref as S, useId as C, withCtx as w } from "vue";
+import { assertDialogSurfacePresentation as e, validateDialogSurfaceHeadingLevel as t } from "../_internal/dialogSurface.js";
+import { validateBoolean as n, validateExactString as r } from "../../../internal/runtimeContract.js";
+import { useDialogOverlay as i } from "../../../composables/useDialogOverlay.js";
+import { useUiKitLocale as a } from "../../../composables/useUiKitLocale.js";
+import { useOwnedAttrs as o } from "../../../internal/ownedAttrs.js";
+import s from "../_internal/SDialogSurface.vue.js";
+import { Teleport as c, computed as l, createBlock as u, createSlots as d, createVNode as f, defineComponent as p, mergeProps as m, onErrorCaptured as h, openBlock as g, renderSlot as _, unref as v, useId as y, withCtx as b } from "vue";
 //#region src/components/shared/containers/SModal.vue?vue&type=script&setup=true&lang.ts
-var T = /*@__PURE__*/ m({
+var x = /*@__PURE__*/ p({
 	inheritAttrs: !1,
 	__name: "SModal",
 	props: {
@@ -27,90 +28,97 @@ var T = /*@__PURE__*/ m({
 		headingLevel: { default: 2 }
 	},
 	emits: ["update:open", "opened"],
-	setup(m, { emit: T }) {
-		let E = m, { t: D } = t(), O = `s-modal-${C()}`, k = T;
-		function A() {
-			k("update:open", !1);
+	setup(p, { emit: x }) {
+		let S = p, { t: C } = a(), w = `s-modal-${y()}`, T = x;
+		function E() {
+			T("update:open", !1);
 		}
-		let j = s(() => E.fullScreen || E.layout === "mobile-fullscreen"), M = n({
+		let D = l(() => n("SModal", "open", S.open)), O = l(() => n("SModal", "closable", S.closable)), k = l(() => n("SModal", "fullScreen", S.fullScreen)), A = l(() => r("SModal", "layout", S.layout, ["desktop", "mobile-fullscreen"])), j = l(() => k.value || A.value === "mobile-fullscreen"), M = o({
 			component: "SModal",
 			owner: "modal dialog surface"
-		}), N = s(() => E.ariaLabel ?? D("dialog.modal")), P = s(() => r("SModal", E.headingLevel));
-		P.value;
-		let F = s(() => ({
+		}), N = l(() => S.ariaLabel ?? C("dialog.modal")), P = l(() => t("SModal", S.headingLevel)), F = l(() => ({
 			kind: "modal",
-			size: E.size,
+			size: S.size,
 			fullscreen: j.value,
-			surface: E.surface,
-			scrollBehavior: E.scrollBehavior
-		})), { setPanelElement: I, backdropStyle: L, surfaceStyle: R, dispose: z } = e({
-			open: x(E, "open"),
-			closable: x(E, "closable"),
-			requestClose: A,
-			opened: () => k("opened")
-		}), B = () => {
-			if (typeof document < "u") for (let e of document.querySelectorAll("[data-s-modal-owner]")) e.dataset.sModalOwner === O && e.remove();
+			surface: S.surface,
+			scrollBehavior: S.scrollBehavior
+		}));
+		function I() {
+			n("SModal", "open", S.open), n("SModal", "closable", S.closable);
+			let i = n("SModal", "fullScreen", S.fullScreen), a = r("SModal", "layout", S.layout, ["desktop", "mobile-fullscreen"]);
+			t("SModal", S.headingLevel), e({
+				kind: "modal",
+				size: S.size,
+				fullscreen: i || a === "mobile-fullscreen",
+				surface: S.surface,
+				scrollBehavior: S.scrollBehavior
+			});
+		}
+		I();
+		let { setPanelElement: L, setPortalElement: R, setDismissalElement: z, layerIndex: B, renderOpen: V, dispose: H } = i({
+			open: D,
+			closable: O,
+			requestClose: E,
+			opened: () => T("opened"),
+			validate: I
+		}), U = () => {
+			if (typeof document < "u") for (let e of document.querySelectorAll("[data-s-modal-owner]")) e.dataset.sModalOwner === w && e.remove();
 		};
-		return v(() => {
-			z(), B(), queueMicrotask(B);
-		}), (e, t) => (y(), c(a, { to: "body" }, [p(o, { name: "s-modal-backdrop" }, {
-			default: w(() => [m.open ? (y(), u("div", {
-				key: 0,
-				class: "s-modal-backdrop",
-				"data-s-modal-owner": O,
-				style: _(S(L)),
-				"aria-hidden": "true"
-			}, null, 4)) : l("", !0)]),
-			_: 1
-		}), p(o, { name: "s-modal-panel" }, {
-			default: w(() => [m.open ? (y(), u("div", {
-				key: 0,
-				class: "s-modal-container",
-				"data-s-modal-owner": O,
-				style: _(S(R))
-			}, [d("div", { class: g(["s-modal-panel-container", { "s-modal-panel-container--fullscreen": j.value }]) }, [p(i, h(S(M).bindings(), {
-				presentation: F.value,
-				title: m.title,
-				"accessible-name": N.value,
-				"heading-level": P.value,
-				closable: m.closable,
-				"set-surface-element": S(I),
-				onRequestClose: A
-			}), f({
-				default: w(() => [b(e.$slots, "default", {}, void 0, !0)]),
-				_: 2
-			}, [
-				e.$slots.header ? {
-					name: "header",
-					fn: w(() => [b(e.$slots, "header", {}, void 0, !0)]),
-					key: "0"
-				} : void 0,
-				e.$slots.footer ? {
-					name: "footer",
-					fn: w(({ close: t }) => [b(e.$slots, "footer", { close: t }, void 0, !0)]),
-					key: "1"
-				} : void 0,
-				e.$slots["footer-start"] ? {
-					name: "footer-start",
-					fn: w(({ close: t }) => [b(e.$slots, "footer-start", { close: t }, void 0, !0)]),
-					key: "2"
-				} : void 0,
-				e.$slots["footer-end"] ? {
-					name: "footer-end",
-					fn: w(({ close: t }) => [b(e.$slots, "footer-end", { close: t }, void 0, !0)]),
-					key: "3"
-				} : void 0
-			]), 1040, [
-				"presentation",
-				"title",
-				"accessible-name",
-				"heading-level",
-				"closable",
-				"set-surface-element"
-			])], 2)], 4)) : l("", !0)]),
-			_: 3
-		})]));
+		return h(() => {
+			try {
+				H();
+			} finally {
+				U(), queueMicrotask(U);
+			}
+		}), (e, t) => (g(), u(c, { to: "body" }, [f(s, m({ open: v(V) }, v(M).bindings(), {
+			"owner-id": w,
+			presentation: F.value,
+			title: p.title,
+			"accessible-name": N.value,
+			"heading-level": P.value,
+			closable: O.value,
+			"set-surface-element": v(L),
+			"set-portal-element": v(R),
+			"set-dismissal-element": v(z),
+			"layer-index": v(B),
+			onRequestClose: E
+		}), d({
+			default: b(() => [_(e.$slots, "default")]),
+			_: 2
+		}, [
+			e.$slots.header ? {
+				name: "header",
+				fn: b(() => [_(e.$slots, "header")]),
+				key: "0"
+			} : void 0,
+			e.$slots.footer ? {
+				name: "footer",
+				fn: b(({ close: t }) => [_(e.$slots, "footer", { close: t })]),
+				key: "1"
+			} : void 0,
+			e.$slots["footer-start"] ? {
+				name: "footer-start",
+				fn: b(({ close: t }) => [_(e.$slots, "footer-start", { close: t })]),
+				key: "2"
+			} : void 0,
+			e.$slots["footer-end"] ? {
+				name: "footer-end",
+				fn: b(({ close: t }) => [_(e.$slots, "footer-end", { close: t })]),
+				key: "3"
+			} : void 0
+		]), 1040, [
+			"open",
+			"presentation",
+			"title",
+			"accessible-name",
+			"heading-level",
+			"closable",
+			"set-surface-element",
+			"set-portal-element",
+			"set-dismissal-element",
+			"layer-index"
+		])]));
 	}
 });
 //#endregion
-export { T as default };
+export { x as default };

package/dist/src/components/shared/containers/SOverlayHost.vue.d.ts

@@ -0,0 +1,16 @@
+import { VNodeChild } from 'vue';
+type __VLS_Slots = {
+    /** Main content retains its DOM and scroll; active contained overlays make only this region inert. */
+    default?: () => VNodeChild;
+    /** Contained overlay owners share the same host geometry and lifetime. */
+    overlay?: () => VNodeChild;
+};
+declare const __VLS_base: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/components/shared/containers/SOverlayHost.vue.js

@@ -0,0 +1,8 @@
+import "../../../../assets/src/components/shared/containers/SOverlayHost.css_vue_type_style_index_0_src_09215628_scoped_09215628_lang.css";
+import e from "../../../../_virtual/_plugin-vue_export-helper.js";
+import t from "./SOverlayHost.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                          */
+//#region src/components/shared/containers/SOverlayHost.vue
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-09215628"]]);
+//#endregion
+export { n as default };

package/dist/src/components/shared/containers/SOverlayHost.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,66 @@
+import { createAggregateError as e } from "../../../internal/es2020.js";
+import { acquireInertLease as t } from "../../../internal/inertLease.js";
+import { overlayHostKey as n } from "../../../internal/overlayHost.js";
+import { useOwnedAttrs as r } from "../../../internal/ownedAttrs.js";
+import { createElementBlock as i, createElementVNode as a, defineComponent as o, mergeProps as s, onBeforeUnmount as c, onErrorCaptured as l, openBlock as u, provide as d, renderSlot as f, shallowReadonly as p, shallowRef as m, unref as h, watch as g } from "vue";
+//#region src/components/shared/containers/SOverlayHost.vue?vue&type=script&setup=true&lang.ts
+var _ = /*@__PURE__*/ o({
+	inheritAttrs: !1,
+	__name: "SOverlayHost",
+	setup(o) {
+		let _ = m(null), v = m(null), y = m(null), b = r({
+			component: "SOverlayHost",
+			owner: "contained overlay host root"
+		}), x = /* @__PURE__ */ new Set(), S = null;
+		function C() {
+			S?.release(), S = null;
+		}
+		function w() {
+			let t = [...x];
+			x.clear(), C();
+			let n = [];
+			for (let e of t) try {
+				e.onRetire();
+			} catch (e) {
+				n.push(e);
+			}
+			if (n.length > 0) throw e(n, "SOverlayHost: overlay retirement failed");
+		}
+		function T(e) {
+			let n = _.value, r = v.value, i = y.value;
+			if (!n?.isConnected || !r?.isConnected || !i?.isConnected || r.parentElement !== n || i.parentElement !== n || r.ownerDocument !== n.ownerDocument || i.ownerDocument !== n.ownerDocument) throw TypeError("SOverlayHost: acquisition requires connected root/content/portal siblings");
+			if (typeof e != "function") throw TypeError("SOverlayHost: onRetire must be a function");
+			x.size === 0 && (S = t(r));
+			let a = { onRetire: e };
+			return x.add(a), () => {
+				x.delete(a) && x.size === 0 && C();
+			};
+		}
+		let E = Object.freeze({
+			root: p(_),
+			content: p(v),
+			portal: p(y),
+			acquire: T
+		});
+		return d(n, E), g([
+			_,
+			v,
+			y
+		], w, { flush: "sync" }), c(w), l(() => {
+			w();
+		}), (e, t) => (u(), i("div", s({
+			ref_key: "rootRef",
+			ref: _
+		}, h(b).bindings(), { class: "s-overlay-host" }), [a("div", {
+			ref_key: "contentRef",
+			ref: v,
+			class: "s-overlay-host__content"
+		}, [f(e.$slots, "default", {}, void 0, !0)], 512), a("div", {
+			ref_key: "portalRef",
+			ref: y,
+			class: "s-overlay-host__portal"
+		}, [f(e.$slots, "overlay", {}, void 0, !0)], 512)], 16));
+	}
+});
+//#endregion
+export { _ as default };

package/dist/src/components/shared/containers/SPageHeader.vue.d.ts

@@ -14,9 +14,9 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     size: "compact" | "default";
+    description: string;
     appearance: "bare" | "plain" | "panel";
     actionsLayout: "responsive" | "inline" | "stacked";
-    description: string;
     titlePresentation: "visible" | "assistive";
     headingLevel: 1 | 2 | 3;
     eyebrow: string;

package/dist/src/components/shared/containers/SPanel.vue.d.ts

@@ -49,10 +49,10 @@ declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, i
     layout: "desktop" | "mobile";
     title: string;
     icon: FunctionalComponent<HTMLAttributes & VNodeProps>;
-    state: SAsyncStateContract;
     description: string;
-    surfaceRadius: "default" | "md" | "none";
+    state: SAsyncStateContract;
     scrollBehavior: "auto" | "body" | "self" | "child";
+    surfaceRadius: "default" | "md" | "none";
     titleId: string;
     contentId: string;
     headingLevel: 1 | 2 | 3 | 4 | 5 | 6;