@pgcorp/ui-kit 0.13.0 → 0.14.0

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

@@ -1,7 +1,9 @@
-import { DialogSurfaceDrawerPlacement, DialogSurfaceDrawerSize, DialogSurfaceHeadingLevel } from '../_internal/dialogSurface';
+import { DialogSurfaceDrawerPlacement, DialogSurfaceDrawerSize, DialogSurfaceHeadingLevel, DialogSurfaceDrawerScope, DialogSurfaceDrawerScrollBehavior } from '../_internal/dialogSurface';
 export type DrawerSize = DialogSurfaceDrawerSize;
 export type DrawerPlacement = DialogSurfaceDrawerPlacement;
 export type DrawerHeadingLevel = DialogSurfaceHeadingLevel;
+export type DrawerScope = DialogSurfaceDrawerScope;
+export type DrawerScrollBehavior = DialogSurfaceDrawerScrollBehavior;
 export interface Props {
     open: boolean;
     title?: string;
@@ -12,6 +14,12 @@ export interface Props {
     ariaLabel?: string;
     /** Уровень видимого заголовка в document outline. / Visible title level in the document outline. */
     headingLevel?: DrawerHeadingLevel;
+    /** viewport is globally modal; contained uses the nearest SOverlayHost and keeps external controls available. */
+    scope?: DrawerScope;
+    /** Percentage of the contained host along the placement axis, finite and in (0,100]. Forbidden for viewport. */
+    extent?: number;
+    /** body owns padded native scrolling; content delegates unpadded fill layout to a child viewport. */
+    scrollBehavior?: DrawerScrollBehavior;
 }
 declare var __VLS_28: {}, __VLS_30: {}, __VLS_33: {
     close: () => void;
@@ -34,8 +42,11 @@ declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, i
     size: DrawerSize;
     closable: boolean;
     ariaLabel: string;
+    scope: DrawerScope;
+    scrollBehavior: DrawerScrollBehavior;
     placement: DrawerPlacement;
     mobileFullScreen: boolean;
+    extent: number;
     headingLevel: DrawerHeadingLevel;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

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

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 { useOverlayAdmission as e, useOverlayHost as t } from "../../../internal/overlayHost.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 { assertDialogSurfacePresentation as s, validateDialogSurfaceHeadingLevel as c, validateDrawerExtent as l } from "../_internal/dialogSurface.js";
+import ee from "../_internal/SDialogSurface.vue.js";
+import { Teleport as u, Transition as d, computed as f, createBlock as te, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createSlots as g, createVNode as _, defineComponent as v, mergeProps as ne, normalizeStyle as y, onErrorCaptured as b, openBlock as x, renderSlot as S, shallowRef as C, unref as w, watch as T, withCtx as E } 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 re = ["data-scope"], ie = ["data-scope", "data-placement"], D = ["data-placement"], O = /*@__PURE__*/ v({
 	inheritAttrs: !1,
 	__name: "SDrawer",
 	props: {
@@ -23,71 +24,168 @@ 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(v, { emit: O }) {
+		let k = v, { t: A } = a(), j = e(), M = O, ae = o({
 			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, [
+		}), N = t("SDrawer", !1), P = {
+			sm: 50,
+			md: 70,
+			lg: 90
+		}, F = r("SDrawer", "scope", k.scope, ["viewport", "contained"]), I = f(() => {
+			let e = r("SDrawer", "scope", k.scope, ["viewport", "contained"]);
+			if (k.open && e !== F) throw TypeError("SDrawer: scope may change only while open=false");
+			return e;
+		}), L = f(() => r("SDrawer", "scrollBehavior", k.scrollBehavior, ["body", "content"])), R = f(() => k.ariaLabel ?? A("dialog.drawer")), z = f(() => c("SDrawer", k.headingLevel)), B = f(() => r("SDrawer", "placement", k.placement, [
+			"left",
+			"right",
+			"bottom"
+		])), V = f(() => r("SDrawer", "size", k.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;
+		])), H = f(() => n("SDrawer", "open", k.open)), U = f(() => n("SDrawer", "closable", k.closable)), W = f(() => n("SDrawer", "mobileFullScreen", k.mobileFullScreen)), G = f(() => {
+			if (I.value === "viewport") {
+				if (k.extent !== void 0) throw TypeError("SDrawer: extent requires scope=\"contained\"");
+				return;
+			}
+			return l("SDrawer", k.extent === void 0 ? P[V.value] : k.extent);
+		}), K = f(() => {
+			let e = {
+				kind: "drawer",
+				size: V.value,
+				placement: B.value,
+				mobileFullScreen: W.value,
+				scrollBehavior: L.value
+			};
+			if (I.value === "contained") {
+				if (!N) throw TypeError("SDrawer: scope=\"contained\" requires a parent SOverlayHost");
+				return {
+					...e,
+					scope: "contained",
+					extent: l("SDrawer", G.value)
+				};
+			}
+			return G.value, {
+				...e,
+				scope: "viewport"
+			};
+		}), q = f(() => I.value === "contained" ? N?.portal.value : "body");
+		function J() {
+			let e = n("SDrawer", "open", k.open);
+			n("SDrawer", "closable", k.closable), c("SDrawer", k.headingLevel);
+			let t = r("SDrawer", "scope", k.scope, ["viewport", "contained"]);
+			if (e && t !== F) throw TypeError("SDrawer: scope may change only while open=false");
+			let i = r("SDrawer", "size", k.size, [
+				"sm",
+				"md",
+				"lg"
+			]), a = {
+				kind: "drawer",
+				size: i,
+				placement: r("SDrawer", "placement", k.placement, [
+					"left",
+					"right",
+					"bottom"
+				]),
+				mobileFullScreen: n("SDrawer", "mobileFullScreen", k.mobileFullScreen),
+				scrollBehavior: r("SDrawer", "scrollBehavior", k.scrollBehavior, ["body", "content"])
+			};
+			if (t === "contained") {
+				if (!N) throw TypeError("SDrawer: scope=\"contained\" requires a parent SOverlayHost");
+				s({
+					...a,
+					scope: t,
+					extent: l("SDrawer", k.extent === void 0 ? P[i] : k.extent)
+				});
+			} else {
+				if (k.extent !== void 0) throw TypeError("SDrawer: extent requires scope=\"contained\"");
+				s({
+					...a,
+					scope: t
+				});
+			}
 		}
-		R();
-		function z() {
-			O("update:open", !1);
+		J(), T([I, H], ([e, t]) => {
+			t || (F = e);
+		}, { flush: "sync" });
+		function Y() {
+			M("update:open", !1);
 		}
-		let { setPanelElement: B, backdropStyle: V, surfaceStyle: H } = e({
-			open: P,
-			closable: F,
-			requestClose: z,
-			opened: () => O("opened")
+		let X = C(null), Z = C(null), { setPanelElement: oe, backdropStyle: se, surfaceStyle: ce, renderOpen: Q, dispose: le } = i({
+			open: H,
+			closable: U,
+			requestClose: Y,
+			opened: () => M("opened"),
+			scope: I,
+			host: N,
+			validate: J
 		});
-		return (e, t) => (y(), u(s, { to: "body" }, [h(c, { name: "s-drawer-backdrop" }, {
-			default: S(() => [g.open ? (y(), f("div", {
+		function $() {
+			X.value?.remove(), Z.value?.remove();
+		}
+		return b(() => {
+			try {
+				le();
+			} finally {
+				$(), queueMicrotask($);
+			}
+		}), (e, t) => q.value ? (x(), te(u, {
+			key: 0,
+			to: q.value
+		}, [_(d, {
+			name: "s-drawer-backdrop",
+			css: w(j)
+		}, {
+			default: E(() => [w(Q) ? (x(), m("div", {
 				key: 0,
+				ref_key: "backdropElement",
+				ref: X,
 				class: "s-drawer-backdrop",
-				style: v(x(V)),
+				"data-scope": I.value,
+				style: y(w(se)),
 				"aria-hidden": "true"
-			}, null, 4)) : d("", !0)]),
+			}, null, 12, re)) : p("", !0)]),
 			_: 1
-		}), h(c, { name: "s-drawer-panel" }, {
-			default: S(() => [g.open ? (y(), f("div", {
+		}, 8, ["css"]), _(d, {
+			name: "s-drawer-panel",
+			css: w(j)
+		}, {
+			default: E(() => [w(Q) ? (x(), m("div", {
 				key: 0,
+				ref_key: "shellElement",
+				ref: Z,
 				class: "s-drawer-shell",
-				"data-placement": M.value,
-				style: v(x(H))
-			}, [p("div", {
+				"data-scope": I.value,
+				"data-placement": B.value,
+				style: y(w(ce))
+			}, [h("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)]),
+				"data-placement": B.value
+			}, [_(ee, ne(w(ae).bindings(), {
+				presentation: K.value,
+				title: v.title,
+				"accessible-name": R.value,
+				"heading-level": z.value,
+				closable: U.value,
+				"set-surface-element": w(oe),
+				onRequestClose: Y
+			}), g({
+				default: E(() => [S(e.$slots, "default", {}, void 0, !0)]),
 				_: 2
 			}, [e.$slots.header ? {
 				name: "header",
-				fn: S(() => [b(e.$slots, "header", {}, void 0, !0)]),
+				fn: E(() => [S(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)]),
+				fn: E(({ close: t }) => [S(e.$slots, "footer", { close: t }, void 0, !0)]),
 				key: "1"
 			} : void 0]), 1040, [
 				"presentation",
@@ -96,10 +194,10 @@ var C = ["data-placement"], w = ["data-placement"], T = /*@__PURE__*/ g({
 				"heading-level",
 				"closable",
 				"set-surface-element"
-			])], 8, w)], 12, C)) : d("", !0)]),
+			])], 8, D)], 12, ie)) : p("", !0)]),
 			_: 3
-		})]));
+		}, 8, ["css"])], 8, ["to"])) : p("", !0);
 	}
 });
 //#endregion
-export { T as default };
+export { O as default };

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

@@ -1,8 +1,8 @@
-import "../../../../assets/src/components/shared/containers/SModal.css_vue_type_style_index_0_src_0dc51b74_scoped_0dc51b74_lang.css";
+import "../../../../assets/src/components/shared/containers/SModal.css_vue_type_style_index_0_src_42e1bd5f_scoped_42e1bd5f_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                                                                    */
 //#region src/components/shared/containers/SModal.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-0dc51b74"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-42e1bd5f"]]);
 //#endregion
 export { n as default };

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

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

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

@@ -0,0 +1,65 @@
+import { createAggregateError as e } from "../../../internal/es2020.js";
+import { overlayHostKey as t } from "../../../internal/overlayHost.js";
+import { useOwnedAttrs as n } from "../../../internal/ownedAttrs.js";
+import { createElementBlock as r, createElementVNode as i, defineComponent as a, mergeProps as o, onBeforeUnmount as s, onErrorCaptured as c, openBlock as l, provide as u, renderSlot as d, shallowReadonly as f, shallowRef as p, unref as m, watch as h } from "vue";
+//#region src/components/shared/containers/SOverlayHost.vue?vue&type=script&setup=true&lang.ts
+var g = /*@__PURE__*/ a({
+	inheritAttrs: !1,
+	__name: "SOverlayHost",
+	setup(a) {
+		let g = p(null), _ = p(null), v = p(null), y = n({
+			component: "SOverlayHost",
+			owner: "contained overlay host root"
+		}), b = /* @__PURE__ */ new Set(), x = null, S = null;
+		function C() {
+			x && (S === null ? x.removeAttribute("inert") : x.setAttribute("inert", S)), x = null, S = null;
+		}
+		function w() {
+			let t = [...b];
+			b.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 t = g.value, n = _.value, r = v.value;
+			if (!t?.isConnected || !n?.isConnected || !r?.isConnected || n.parentElement !== t || r.parentElement !== t || n.ownerDocument !== t.ownerDocument || r.ownerDocument !== t.ownerDocument) throw TypeError("SOverlayHost: acquisition requires connected root/content/portal siblings");
+			if (typeof e != "function") throw TypeError("SOverlayHost: onRetire must be a function");
+			b.size === 0 && (x = n, S = n.getAttribute("inert"), n.setAttribute("inert", ""));
+			let i = { onRetire: e };
+			return b.add(i), () => {
+				b.delete(i) && b.size === 0 && C();
+			};
+		}
+		let E = Object.freeze({
+			root: f(g),
+			content: f(_),
+			portal: f(v),
+			acquire: T
+		});
+		return u(t, E), h([
+			g,
+			_,
+			v
+		], w, { flush: "sync" }), s(w), c(() => {
+			w();
+		}), (e, t) => (l(), r("div", o({
+			ref_key: "rootRef",
+			ref: g
+		}, m(y).bindings(), { class: "s-overlay-host" }), [i("div", {
+			ref_key: "contentRef",
+			ref: _,
+			class: "s-overlay-host__content"
+		}, [d(e.$slots, "default", {}, void 0, !0)], 512), i("div", {
+			ref_key: "portalRef",
+			ref: v,
+			class: "s-overlay-host__portal"
+		}, [d(e.$slots, "overlay", {}, void 0, !0)], 512)], 16));
+	}
+});
+//#endregion
+export { g 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,8 +49,8 @@ declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, i
     layout: "desktop" | "mobile";
     title: string;
     icon: FunctionalComponent<HTMLAttributes & VNodeProps>;
-    state: SAsyncStateContract;
     description: string;
+    state: SAsyncStateContract;
     surfaceRadius: "default" | "md" | "none";
     scrollBehavior: "auto" | "body" | "self" | "child";
     titleId: string;

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

@@ -1,6 +1,6 @@
-import { useUiKitLocale as e } from "../../../composables/useUiKitLocale.js";
-import { useOwnedAttrs as t } from "../../../internal/ownedAttrs.js";
-import { validateDomId as n } from "../../../internal/runtimeContract.js";
+import { validateDomId as e } from "../../../internal/runtimeContract.js";
+import { useUiKitLocale as t } from "../../../composables/useUiKitLocale.js";
+import { useOwnedAttrs as n } from "../../../internal/ownedAttrs.js";
 import r from "../data-display/SMessage.vue.js";
 import i from "../feedback/SAsyncState.vue.js";
 import a from "../data-display/SProgressBar.vue.js";
@@ -60,18 +60,18 @@ var T = [
 		headerLayout: { default: "auto" }
 	},
 	setup(m) {
-		let L = m, R = S(), { t: z } = e(), B = t({
+		let L = m, R = S(), { t: z } = t(), B = n({
 			component: "SPanel",
 			owner: "panel surface root"
 		}), V = o(() => {
 			if (L.titleId !== void 0) {
 				if (!L.title) throw TypeError("SPanel: titleId требует title. / SPanel: titleId requires title.");
-				return n("SPanel", "titleId", L.titleId);
+				return e("SPanel", "titleId", L.titleId);
 			}
-		}), H = o(() => L.contentId === void 0 ? void 0 : n("SPanel", "contentId", L.contentId)), U = o(() => {
+		}), H = o(() => L.contentId === void 0 ? void 0 : e("SPanel", "contentId", L.contentId)), U = o(() => {
 			if (L.footerId !== void 0) {
 				if (!R.footer) throw TypeError("SPanel: footerId требует footer slot. / SPanel: footerId requires the footer slot.");
-				return n("SPanel", "footerId", L.footerId);
+				return e("SPanel", "footerId", L.footerId);
 			}
 		});
 		return C(() => {