@pgcorp/ui-kit 0.13.0 → 0.14.0

package/dist/src/components/layout/SWorkbenchPanelShell.vue.d.ts

@@ -19,7 +19,7 @@ declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __V
     state: Extract<import('../shared/feedback/SAsyncState.vue').SAsyncStateContract, {
         status: "error";
     }>;
-}, __VLS_25: {}, __VLS_36: {}, __VLS_38: {}, __VLS_40: {};
+}, __VLS_25: {}, __VLS_37: {}, __VLS_39: {}, __VLS_41: {};
 type __VLS_Slots = {} & {
     dialogs?: (props: typeof __VLS_1) => any;
 } & {
@@ -39,11 +39,11 @@ type __VLS_Slots = {} & {
 } & {
     main?: (props: typeof __VLS_25) => any;
 } & {
-    'secondary-header'?: (props: typeof __VLS_36) => any;
+    'secondary-header'?: (props: typeof __VLS_37) => any;
 } & {
-    'secondary-actions'?: (props: typeof __VLS_38) => any;
+    'secondary-actions'?: (props: typeof __VLS_39) => any;
 } & {
-    secondary?: (props: typeof __VLS_40) => any;
+    secondary?: (props: typeof __VLS_41) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     secondaryPlacement: SecondaryPlacement;

package/dist/src/components/layout/SWorkbenchPanelShell.vue.js

@@ -1,8 +1,8 @@
-import "../../../assets/src/components/layout/SWorkbenchPanelShell.css_vue_type_style_index_0_src_1030a231_scoped_1030a231_lang.css";
+import "../../../assets/src/components/layout/SWorkbenchPanelShell.css_vue_type_style_index_0_src_f9faa52a_scoped_f9faa52a_lang.css";
 import e from "../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./SWorkbenchPanelShell.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                                  */
 //#region src/components/layout/SWorkbenchPanelShell.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-1030a231"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-f9faa52a"]]);
 //#endregion
 export { n as default };

package/dist/src/components/layout/SWorkbenchPanelShell.vue_vue_type_script_setup_true_lang.js

@@ -1,14 +1,14 @@
-import { useUiKitLocale as e } from "../../composables/useUiKitLocale.js";
-import { useOwnedAttrs as t } from "../../internal/ownedAttrs.js";
-import { validateBoolean as n, validateExactString as r } from "../../internal/runtimeContract.js";
+import { validateBoolean as e, validateExactString as t } from "../../internal/runtimeContract.js";
+import { useUiKitLocale as n } from "../../composables/useUiKitLocale.js";
+import { useOwnedAttrs as r } from "../../internal/ownedAttrs.js";
 import i from "../shared/feedback/SAsyncState.vue.js";
 import a from "./SDockRegion.vue.js";
 import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createSlots as d, createVNode as f, defineComponent as p, guardReactiveProps as m, mergeProps as h, normalizeClass as g, normalizeProps as _, normalizeStyle as v, onBeforeUnmount as y, onMounted as b, openBlock as x, ref as S, renderSlot as C, unref as w, useSlots as T, watch as E, withCtx as D } from "vue";
 //#region src/components/layout/SWorkbenchPanelShell.vue?vue&type=script&setup=true&lang.ts
-var O = { class: "workbench-header" }, ee = { class: "title-container" }, te = {
+var ee = { class: "workbench-header" }, te = { class: "title-container" }, ne = {
 	class: "workbench-shell-main",
 	"data-testid": "workbench-shell-main"
-}, k = { class: "workbench-shell-main-content" }, A = { class: "workbench-shell-secondary-header-main" }, j = { class: "workbench-shell-secondary-header-actions" }, M = /*@__PURE__*/ p({
+}, O = { class: "workbench-shell-main-content" }, k = { class: "workbench-shell-secondary-header-main" }, A = { class: "workbench-shell-secondary-header-actions" }, j = /*@__PURE__*/ p({
 	inheritAttrs: !1,
 	__name: "SWorkbenchPanelShell",
 	props: {
@@ -29,50 +29,50 @@ var O = { class: "workbench-header" }, ee = { class: "title-container" }, te = {
 		}
 	},
 	setup(p) {
-		let M = {
+		let j = {
 			sm: 320,
 			md: 384,
 			lg: 480
-		}, N = {
+		}, M = {
 			sm: 240,
 			md: 304,
 			lg: 384
-		}, P = p, { t: F } = e(), I = T(), L = t({
+		}, N = p, { t: P } = n(), F = T(), I = r({
 			component: "SWorkbenchPanelShell",
 			owner: "workbench panel root"
-		}), R = S(null), z = S(Z(P.secondaryPlacement, P.secondarySize)), B = S(Q()), V = null, H = o(() => {
-			re();
-			let e = P.state;
+		}), L = S(null), R = S(X(N.secondaryPlacement, N.secondarySize)), z = S(Z()), B = null, V = o(() => {
+			ie();
+			let e = N.state;
 			if (typeof e != "object" || !e || Array.isArray(e) || Reflect.get(e, "status") !== "creating") return {
 				mode: "async",
 				state: e
 			};
 			if (Object.keys(e).length !== 1) throw TypeError("SWorkbenchPanelShell: state со status=creating должен содержать только поле status");
 			return { mode: "creating" };
-		}), U = o(() => !!(I.secondary || I["secondary-header"] || I["secondary-actions"])), W = o(() => P.secondaryPlacement !== "none" && P.secondaryOpen && U.value), G = o(() => P.secondaryPlacement === "bottom-dock"), K = o(() => G.value ? "bottom" : "right"), q = o(() => G.value ? F("layout.resizeBottomPanel") : F("layout.resizeSidePanel")), J = o(() => G.value ? "workbench-shell-resize-handle-bottom" : "workbench-shell-resize-handle-right"), Y = o(() => [
-			`workbench-shell--${P.secondaryPlacement}`,
-			`workbench-shell--secondary-${P.secondarySize}`,
+		}), H = o(() => !!(F.secondary || F["secondary-header"] || F["secondary-actions"])), U = o(() => N.secondaryPlacement !== "none" && N.secondaryOpen && H.value), W = o(() => N.secondaryPlacement === "bottom-dock"), G = o(() => W.value ? "bottom" : "right"), K = o(() => W.value ? P("layout.resizeBottomPanel") : P("layout.resizeSidePanel")), q = o(() => W.value ? "workbench-shell-resize-handle-bottom" : "workbench-shell-resize-handle-right"), J = o(() => [
+			`workbench-shell--${N.secondaryPlacement}`,
+			`workbench-shell--secondary-${N.secondarySize}`,
 			{
-				"workbench-shell--secondary-open": W.value,
-				"workbench-shell--secondary-responsive-stack": P.secondaryResponsiveStack
+				"workbench-shell--secondary-open": U.value,
+				"workbench-shell--secondary-responsive-stack": N.secondaryResponsiveStack
 			}
-		]), X = o(() => ({ "--workbench-secondary-size": `${z.value}px` }));
-		E(() => [P.secondaryPlacement, P.secondarySize], ([e, t]) => {
-			z.value = Z(e, t), B.value = Q();
+		]), Y = o(() => ({ "--workbench-secondary-size": `${R.value}px` }));
+		E(() => [N.secondaryPlacement, N.secondarySize], ([e, t]) => {
+			R.value = X(e, t), z.value = Z();
 		}, { immediate: !0 });
-		function Z(e, t) {
-			return e === "bottom-dock" ? N[t] : M[t];
+		function X(e, t) {
+			return e === "bottom-dock" ? M[t] : j[t];
 		}
-		function Q() {
-			let e = R.value;
-			if (!e) return P.secondaryPlacement === "bottom-dock" ? {
+		function Z() {
+			let e = L.value;
+			if (!e) return N.secondaryPlacement === "bottom-dock" ? {
 				min: 192,
 				max: 640
 			} : {
 				min: 248,
 				max: 768
 			};
-			if (P.secondaryPlacement === "right-drawer") {
+			if (N.secondaryPlacement === "right-drawer") {
 				if (e.clientWidth <= 0) return {
 					min: 248,
 					max: 768
@@ -83,7 +83,7 @@ var O = { class: "workbench-header" }, ee = { class: "title-container" }, te = {
 					max: Math.max(n, Math.floor(t * .62))
 				};
 			}
-			if (P.secondaryPlacement === "bottom-dock") {
+			if (N.secondaryPlacement === "bottom-dock") {
 				if (e.clientHeight <= 0) return {
 					min: 192,
 					max: 640
@@ -99,66 +99,70 @@ var O = { class: "workbench-header" }, ee = { class: "title-container" }, te = {
 				max: 0
 			};
 		}
-		function $() {
-			let e = Q();
-			B.value = e, z.value = Math.min(e.max, Math.max(e.min, z.value));
+		function Q() {
+			let e = Z();
+			z.value = e, R.value = Math.min(e.max, Math.max(e.min, R.value));
+		}
+		function $(e) {
+			Q(), R.value = Math.min(z.value.max, Math.max(z.value.min, e));
 		}
-		function ne(e) {
-			$(), z.value = Math.min(B.value.max, Math.max(B.value.min, e));
+		function re(e) {
+			$(e.initialValue);
 		}
-		function re() {
-			r("SWorkbenchPanelShell", "secondaryPlacement", P.secondaryPlacement, [
+		function ie() {
+			t("SWorkbenchPanelShell", "secondaryPlacement", N.secondaryPlacement, [
 				"none",
 				"right-drawer",
 				"bottom-dock"
-			]), r("SWorkbenchPanelShell", "secondarySize", P.secondarySize, [
+			]), t("SWorkbenchPanelShell", "secondarySize", N.secondarySize, [
 				"sm",
 				"md",
 				"lg"
-			]), n("SWorkbenchPanelShell", "secondaryOpen", P.secondaryOpen), n("SWorkbenchPanelShell", "secondaryStickyHeader", P.secondaryStickyHeader), n("SWorkbenchPanelShell", "secondaryResponsiveStack", P.secondaryResponsiveStack);
+			]), e("SWorkbenchPanelShell", "secondaryOpen", N.secondaryOpen), e("SWorkbenchPanelShell", "secondaryStickyHeader", N.secondaryStickyHeader), e("SWorkbenchPanelShell", "secondaryResponsiveStack", N.secondaryResponsiveStack);
 		}
 		return b(() => {
-			$(), typeof ResizeObserver < "u" && R.value && (V = new ResizeObserver($), V.observe(R.value));
+			Q(), typeof ResizeObserver < "u" && L.value && (B = new ResizeObserver(Q), B.observe(L.value));
 		}), y(() => {
-			V?.disconnect(), V = null;
-		}), (e, t) => (x(), l("div", h(w(L).bindings(), {
+			B?.disconnect(), B = null;
+		}), (e, t) => (x(), l("div", h(w(I).bindings(), {
 			class: "workbench-panel",
 			"data-testid": "workbench-panel-shell"
 		}), [
 			C(e.$slots, "dialogs", {}, void 0, !0),
-			u("div", O, [
+			u("div", ee, [
 				C(e.$slots, "header-navigation", {}, void 0, !0),
-				u("div", ee, [C(e.$slots, "title", {}, void 0, !0)]),
+				u("div", te, [C(e.$slots, "title", {}, void 0, !0)]),
 				C(e.$slots, "header-actions", {}, void 0, !0)
 			]),
 			C(e.$slots, "status", {}, void 0, !0),
-			H.value.mode === "creating" ? C(e.$slots, "creating", {}, void 0, !0, 0) : (x(), s(i, {
+			V.value.mode === "creating" ? C(e.$slots, "creating", {}, void 0, !0, 0) : (x(), s(i, {
 				key: 1,
-				state: H.value.state
+				state: V.value.state
 			}, d({
 				default: D(() => [u("div", {
 					ref_key: "shellRef",
-					ref: R,
-					class: g(["workbench-shell", Y.value]),
-					style: v(X.value)
-				}, [u("div", te, [u("div", k, [C(e.$slots, "main", {}, void 0, !0)])]), W.value ? (x(), l("div", {
+					ref: L,
+					class: g(["workbench-shell", J.value]),
+					style: v(Y.value)
+				}, [u("div", ne, [u("div", O, [C(e.$slots, "main", {}, void 0, !0)])]), U.value ? (x(), l("div", {
 					key: 0,
 					class: g(["workbench-shell-secondary-wrap", `workbench-shell-secondary-wrap--${p.secondaryPlacement}`])
 				}, [f(a, {
-					placement: K.value,
-					visible: W.value,
-					size: z.value,
-					"min-size": B.value.min,
-					"max-size": B.value.max,
+					placement: G.value,
+					visible: U.value,
+					size: R.value,
+					"min-size": z.value.min,
+					"max-size": z.value.max,
 					"resize-step": 16,
-					"resize-label": q.value,
-					"resize-test-id": J.value,
+					"resize-label": K.value,
+					"resize-test-id": q.value,
 					"hide-resize-handle-on-narrow": p.secondaryResponsiveStack,
 					"responsive-size": p.secondaryResponsiveStack ? "fill-on-narrow" : "fixed",
 					"handle-variant": "overlay",
 					surface: "transparent",
-					onResizeStart: $,
-					onResize: ne
+					onResizeStart: Q,
+					onResize: $,
+					onResizeCancel: re
 				}, {
 					default: D(() => [u("div", {
 						class: g(["workbench-shell-secondary flex flex-col", `workbench-shell-secondary--${p.secondaryPlacement}`]),
@@ -167,8 +171,8 @@ var O = { class: "workbench-header" }, ee = { class: "title-container" }, te = {
 						key: 0,
 						class: g(["workbench-shell-secondary-header", { "workbench-shell-secondary-header--sticky": p.secondaryStickyHeader }]),
 						"data-testid": "workbench-shell-secondary-header"
-					}, [u("div", A, [C(e.$slots, "secondary-header", {}, void 0, !0)]), u("div", j, [C(e.$slots, "secondary-actions", {}, void 0, !0)])], 2)) : c("", !0), u("div", {
-						class: g(["workbench-shell-secondary-content", { "flex min-h-0 flex-col": G.value }]),
+					}, [u("div", k, [C(e.$slots, "secondary-header", {}, void 0, !0)]), u("div", A, [C(e.$slots, "secondary-actions", {}, void 0, !0)])], 2)) : c("", !0), u("div", {
+						class: g(["workbench-shell-secondary-content", { "flex min-h-0 flex-col": W.value }]),
 						"data-testid": "workbench-shell-secondary-content"
 					}, [C(e.$slots, "secondary", {}, void 0, !0)], 2)], 2)]),
 					_: 3
@@ -197,4 +201,4 @@ var O = { class: "workbench-header" }, ee = { class: "title-container" }, te = {
 	}
 });
 //#endregion
-export { M as default };
+export { j as default };

package/dist/src/components/layout/types.d.ts

@@ -3,6 +3,26 @@ import { BadgeSeverity } from '../shared/data-display/SBadge.vue';
 import { SAsyncStateContract } from '../shared/feedback/SAsyncState.vue';
 import { LinkRouterTarget } from '../shared/controls/SLink';
 export type ShellBadgeSeverity = BadgeSeverity;
+/** Семантическая толщина pointer/focus hitbox; visual divider не меняет толщину. */
+export type SResizeHandleHitbox = 'compact' | 'standard' | 'spacious';
+/** Причина отмены pointer resize без принятия preview как итогового размера. */
+export type SResizeHandleCancelReason = 'pointercancel' | 'lostpointercapture' | 'window-blur' | 'disabled' | 'superseded' | 'unmount';
+/** Snapshot pointer gesture для восстановления размера владельцем композиции. */
+export interface SResizeHandleCancel {
+    readonly initialValue: number;
+    readonly latestValue: number;
+    readonly reason: SResizeHandleCancelReason;
+}
+/** Pointer completion с логическим intent до ограничения текущим min/max. */
+export interface SResizeHandleCompletion {
+    readonly source: 'pointer';
+    readonly startValue: number;
+    readonly unclampedValue: number;
+}
+/** Терминальный intent сворачивания dock с preferred size до начала gesture. */
+export interface SDockRegionCollapse {
+    readonly preferredSize: number;
+}
 /**
  * Точное взаимоисключающее состояние рабочей панели.
  * Exact mutually exclusive workbench panel state.

package/dist/src/components/shared/_internal/SDialogSurface.vue.js

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

package/dist/src/components/shared/_internal/SDialogSurface.vue_vue_type_script_setup_true_lang.js

@@ -1,17 +1,18 @@
 import { X as e } from "../../icons/_internal/generatedSputnigUiIconComponents.js";
-import { useUiKitLocale as t } from "../../../composables/useUiKitLocale.js";
-import { useInteractiveLeafRegistration as n } from "../../../internal/passiveContentContract.js";
-import r from "../controls/SButton.vue.js";
-import { assertDialogSurfacePresentation as i, validateDialogSurfaceHeadingLevel as a } from "./dialogSurface.js";
-import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, defineComponent as p, mergeProps as m, openBlock as h, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, unref as y, useId as b, useSlots as x, withCtx as S } from "vue";
+import { useOverlayAdmission as t } from "../../../internal/overlayHost.js";
+import { useUiKitLocale as n } from "../../../composables/useUiKitLocale.js";
+import { useInteractiveLeafRegistration as r } from "../../../internal/passiveContentContract.js";
+import i from "../controls/SButton.vue.js";
+import { assertDialogSurfacePresentation as a, validateDialogSurfaceHeadingLevel as o } from "./dialogSurface.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, defineComponent as m, mergeProps as h, openBlock as g, ref as _, renderSlot as v, resolveDynamicComponent as y, shallowRef as b, toDisplayString as ee, unref as x, useId as S, useSlots as C, watch as w, watchEffect as T, withCtx as E } from "vue";
 //#region src/components/shared/_internal/SDialogSurface.vue?vue&type=script&setup=true&lang.ts
-var C = { class: "s-dialog-surface__body" }, w = ["data-layout"], T = {
+var D = { class: "s-dialog-surface__body" }, O = ["data-layout"], k = {
 	key: 0,
 	class: "s-dialog-surface__footer-start"
-}, E = {
+}, A = {
 	key: 1,
 	class: "s-dialog-surface__footer-end"
-}, D = "div", O = /*@__PURE__*/ p({
+}, j = "div", M = /*@__PURE__*/ m({
 	inheritAttrs: !1,
 	__name: "SDialogSurface",
 	props: {
@@ -23,68 +24,90 @@ var C = { class: "s-dialog-surface__body" }, w = ["data-layout"], T = {
 		setSurfaceElement: { type: Function }
 	},
 	emits: ["request-close"],
-	setup(p, { emit: O }) {
-		let k = p, A = O, { t: j } = t();
-		i(k.presentation), n({ owner: "SDialogSurface" });
-		let M = x(), N = `s-dialog-title-${b()}`, P = s(() => k.presentation.kind === "modal"), F = s(() => k.presentation.kind === "modal" ? k.presentation : null), I = s(() => k.presentation.kind === "drawer" ? k.presentation : null), L = s(() => !!(k.title || M.header)), R = s(() => P.value && !!(M["footer-start"] || M["footer-end"])), z = s(() => R.value || !!M.footer), B = s(() => P.value ? "div" : "header"), V = s(() => a("SDialogSurface", k.headingLevel)), H = s(() => `h${V.value}`), U = s(() => {
-			let e = k.presentation;
-			return e.kind === "drawer" ? e.placement === "bottom" ? "bottom-sheet" : e.mobileFullScreen ? "mobile-fullscreen" : "side-panel" : e.fullscreen || e.size === "full" ? "fullscreen" : "contained";
-		}), W = () => A("request-close");
-		return (t, n) => (h(), c(_(D), m({ ref: p.setSurfaceElement }, t.$attrs, {
+	setup(m, { emit: M }) {
+		let N = m, P = M, { t: F } = n(), I = b(null), L = t(), R = _(!L.value), z = (e) => {
+			if (e !== null && !(e instanceof HTMLElement)) throw TypeError("SDialogSurface: surface ref must resolve to its native HTMLElement");
+			I.value = e, N.setSurfaceElement(e);
+		};
+		w(L, (e) => {
+			if (e) return;
+			R.value = !0;
+			let t = I.value;
+			if (!t) return;
+			t.hidden = !0, t.setAttribute("inert", "");
+			let n = t.ownerDocument.activeElement;
+			n instanceof HTMLElement && t.contains(n) && n.blur();
+		}, { flush: "sync" }), T(() => {
+			a(N.presentation);
+		}), r({ owner: "SDialogSurface" });
+		let B = C(), V = `s-dialog-title-${S()}`, H = c(() => N.presentation.kind === "modal"), U = c(() => N.presentation.kind === "modal" ? N.presentation : null), W = c(() => N.presentation.kind === "drawer" ? N.presentation : null), G = c(() => W.value?.scope === "contained" ? { "--s-drawer-extent": `${W.value.extent}%` } : void 0), K = c(() => !!(N.title || B.header)), q = c(() => H.value && !!(B["footer-start"] || B["footer-end"])), J = c(() => q.value || !!B.footer), Y = c(() => H.value ? "div" : "header"), X = c(() => o("SDialogSurface", N.headingLevel)), Z = c(() => `h${X.value}`), Q = c(() => {
+			let e = N.presentation;
+			return e.kind === "drawer" ? e.placement === "bottom" ? "bottom-sheet" : e.scope === "contained" ? "side-panel" : e.mobileFullScreen ? "mobile-fullscreen" : "side-panel" : e.fullscreen || e.size === "full" ? "fullscreen" : "contained";
+		}), $ = () => P("request-close");
+		return (t, n) => (g(), l(y(j), h({ ref: z }, t.$attrs, {
 			class: "s-dialog-surface",
-			"data-presentation": p.presentation.kind,
-			"data-layout": U.value,
-			"data-size": p.presentation.size,
-			"data-placement": I.value?.placement,
-			"data-surface": F.value?.surface,
-			"data-scroll": F.value?.scrollBehavior,
+			hidden: R.value || !x(L),
+			"^inert": R.value || !x(L) ? !0 : void 0,
+			"data-presentation": m.presentation.kind,
+			"data-layout": Q.value,
+			"data-size": m.presentation.size,
+			"data-placement": W.value?.placement,
+			"data-scope": W.value?.scope,
+			"data-surface": U.value?.surface,
+			"data-scroll": U.value?.scrollBehavior ?? W.value?.scrollBehavior,
+			style: G.value,
 			tabindex: "-1",
 			role: "dialog",
-			"aria-modal": "true",
-			"aria-labelledby": L.value ? N : void 0,
-			"aria-label": L.value ? void 0 : p.accessibleName
+			"aria-modal": W.value?.scope === "contained" ? "false" : "true",
+			"aria-labelledby": K.value ? V : void 0,
+			"aria-label": K.value ? void 0 : m.accessibleName
 		}), {
-			default: S(() => [
-				L.value ? (h(), c(_(B.value), {
+			default: E(() => [
+				K.value ? (g(), l(y(Y.value), {
 					key: 0,
 					class: "s-dialog-surface__header"
 				}, {
-					default: S(() => [(h(), c(_(H.value), {
-						id: N,
+					default: E(() => [(g(), l(y(Z.value), {
+						id: V,
 						class: "s-dialog-surface__title"
 					}, {
-						default: S(() => [g(t.$slots, "header", {}, () => [f(v(p.title), 1)], !0)]),
+						default: E(() => [v(t.$slots, "header", {}, () => [p(ee(m.title), 1)], !0)]),
 						_: 3
-					})), p.closable ? (h(), c(r, {
+					})), m.closable ? (g(), l(i, {
 						key: 0,
-						"leading-icon": y(e),
+						"leading-icon": x(e),
 						"icon-only": "",
 						appearance: "text",
 						size: "sm",
-						"aria-label": y(j)("dialog.close"),
-						onClick: W
-					}, null, 8, ["leading-icon", "aria-label"])) : l("", !0)]),
+						"aria-label": x(F)("dialog.close"),
+						onClick: $
+					}, null, 8, ["leading-icon", "aria-label"])) : u("", !0)]),
 					_: 3
-				})) : l("", !0),
-				d("div", C, [g(t.$slots, "default", {}, void 0, !0)]),
-				z.value ? (h(), u("div", {
+				})) : u("", !0),
+				f("div", D, [v(t.$slots, "default", {}, void 0, !0)]),
+				J.value ? (g(), d("div", {
 					key: 1,
 					class: "s-dialog-surface__footer",
-					"data-layout": R.value ? "split" : "end"
-				}, [R.value ? (h(), u(o, { key: 0 }, [t.$slots["footer-start"] ? (h(), u("div", T, [g(t.$slots, "footer-start", { close: W }, void 0, !0)])) : l("", !0), t.$slots["footer-end"] ? (h(), u("div", E, [g(t.$slots, "footer-end", { close: W }, void 0, !0)])) : l("", !0)], 64)) : g(t.$slots, "footer", { close: W }, void 0, !0, 1)], 8, w)) : l("", !0)
+					"data-layout": q.value ? "split" : "end"
+				}, [q.value ? (g(), d(s, { key: 0 }, [t.$slots["footer-start"] ? (g(), d("div", k, [v(t.$slots, "footer-start", { close: $ }, void 0, !0)])) : u("", !0), t.$slots["footer-end"] ? (g(), d("div", A, [v(t.$slots, "footer-end", { close: $ }, void 0, !0)])) : u("", !0)], 64)) : v(t.$slots, "footer", { close: $ }, void 0, !0, 1)], 8, O)) : u("", !0)
 			]),
 			_: 3
 		}, 16, [
+			"hidden",
+			"^inert",
 			"data-presentation",
 			"data-layout",
 			"data-size",
 			"data-placement",
+			"data-scope",
 			"data-surface",
 			"data-scroll",
+			"style",
+			"aria-modal",
 			"aria-labelledby",
 			"aria-label"
 		]));
 	}
 });
 //#endregion
-export { O as default };
+export { M as default };

package/dist/src/components/shared/_internal/SHeaderSurface.vue.d.ts

@@ -24,9 +24,9 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
     meta: string | null;
+    description: string | null;
     variant: "default" | "display";
     appearance: "bare" | "plain" | "panel";
-    description: string | null;
     padding: "none" | "sm" | "md";
     titlePresentation: "visible" | "assistive";
     divider: boolean;

package/dist/src/components/shared/_internal/SListboxGroup.vue.d.ts

@@ -2,6 +2,9 @@ export interface Props {
     label: string;
     labelId: string;
     variant?: 'select' | 'color';
+    registrationToken: string;
+    virtualOffset?: number;
+    virtualHeight?: number;
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -9,6 +12,8 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
     variant: "select" | "color";
+    virtualOffset: number;
+    virtualHeight: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/src/components/shared/_internal/SListboxGroup.vue.js

@@ -1,8 +1,8 @@
-import "../../../../assets/src/components/shared/_internal/SListboxGroup.css_vue_type_style_index_0_src_518787d3_scoped_518787d3_lang.css";
+import "../../../../assets/src/components/shared/_internal/SListboxGroup.css_vue_type_style_index_0_src_00060944_scoped_00060944_lang.css";
 import e from "../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./SListboxGroup.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                           */
 //#region src/components/shared/_internal/SListboxGroup.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-518787d3"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-00060944"]]);
 //#endregion
 export { n as default };

package/dist/src/components/shared/_internal/SListboxGroup.vue_vue_type_script_setup_true_lang.js

@@ -1,26 +1,44 @@
-import { createElementBlock as e, createElementVNode as t, defineComponent as n, openBlock as r, renderSlot as i, toDisplayString as a } from "vue";
+import { listboxContextKey as e } from "./listboxContext.js";
+import { createElementBlock as t, createElementVNode as n, defineComponent as r, inject as i, normalizeStyle as a, onBeforeUnmount as o, onMounted as s, openBlock as c, ref as l, renderSlot as u, toDisplayString as d } from "vue";
 //#region src/components/shared/_internal/SListboxGroup.vue?vue&type=script&setup=true&lang.ts
-var o = ["data-variant", "aria-labelledby"], s = ["id"], c = {
-	class: "s-listbox-group__options",
-	role: "presentation"
-}, l = /*@__PURE__*/ n({
+var f = ["data-variant"], p = ["id"], m = ["aria-labelledby"], h = /*@__PURE__*/ r({
 	__name: "SListboxGroup",
 	props: {
 		label: {},
 		labelId: {},
-		variant: { default: "select" }
+		variant: { default: "select" },
+		registrationToken: {},
+		virtualOffset: { default: void 0 },
+		virtualHeight: { default: void 0 }
 	},
-	setup(n) {
-		return (l, u) => (r(), e("li", {
+	setup(r) {
+		let h = r, g = i(e), _ = l(null), v;
+		return s(() => {
+			let e = _.value;
+			if (!(e instanceof HTMLElement)) throw Error("SListboxGroup: label element is unavailable");
+			v = g?.registerGeometry?.(`header:${h.registrationToken}`, e);
+		}), o(() => v?.()), (e, i) => (c(), t("li", {
 			class: "s-listbox-group",
-			"data-variant": n.variant,
-			role: "group",
-			"aria-labelledby": n.labelId
-		}, [t("span", {
-			id: n.labelId,
+			"data-variant": r.variant,
+			role: "presentation",
+			style: a(r.virtualOffset === void 0 ? void 0 : {
+				position: "absolute",
+				top: `${r.virtualOffset}px`,
+				height: `${r.virtualHeight}px`,
+				left: "0",
+				right: "0"
+			})
+		}, [n("span", {
+			ref_key: "labelElement",
+			ref: _,
+			id: r.labelId,
 			class: "s-listbox-group__label"
-		}, a(n.label), 9, s), t("ul", c, [i(l.$slots, "default", {}, void 0, !0)])], 8, o));
+		}, d(r.label), 9, p), n("ul", {
+			class: "s-listbox-group__options",
+			role: "group",
+			"aria-labelledby": r.labelId
+		}, [u(e.$slots, "default", {}, void 0, !0)], 8, m)], 12, f));
 	}
 });
 //#endregion
-export { l as default };
+export { h as default };

package/dist/src/components/shared/_internal/SMenuLayer.vue.d.ts

@@ -1,5 +1,8 @@
 import { ElementApi } from '../../../internal/interactiveElement';
-export type SMenuLayerApi = ElementApi<HTMLDivElement>;
+import { FloatingAvailableSize, FloatingSizingElements } from '../../../composables/useFloatingPosition';
+export interface SMenuLayerApi extends ElementApi<HTMLDivElement> {
+    getSizingElements: () => FloatingSizingElements | null;
+}
 interface Props {
     kind: 'dropdown' | 'context' | 'submenu';
     landmarkLabel: string;
@@ -8,6 +11,7 @@ interface Props {
         top: number;
     };
     zIndex: string;
+    availableSize: FloatingAvailableSize | null;
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/src/components/shared/_internal/SMenuLayer.vue.js

@@ -1,8 +1,8 @@
-import "../../../../assets/src/components/shared/_internal/SMenuLayer.css_vue_type_style_index_0_src_4913bbe1_scoped_4913bbe1_lang.css";
+import "../../../../assets/src/components/shared/_internal/SMenuLayer.css_vue_type_style_index_0_src_e478164c_scoped_e478164c_lang.css";
 import e from "../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./SMenuLayer.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                        */
 //#region src/components/shared/_internal/SMenuLayer.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-4913bbe1"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-e478164c"]]);
 //#endregion
 export { n as default };