@pgcorp/ui-kit 0.13.0 → 0.15.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.d.ts

@@ -1,12 +1,18 @@
 import { ComponentPublicInstance } from 'vue';
 import { DialogSurfaceHeadingLevel, DialogSurfacePresentation } from './dialogSurface';
 type __VLS_Props = {
+    open?: boolean;
     presentation: DialogSurfacePresentation;
     title?: string;
     accessibleName: string;
     headingLevel: DialogSurfaceHeadingLevel;
     closable: boolean;
     setSurfaceElement: (element: Element | ComponentPublicInstance | null) => void;
+    setPortalElement?: (element: Element | ComponentPublicInstance | null) => void;
+    setDismissalElement?: (element: Element | ComponentPublicInstance | null) => void;
+    /** Exact canonical registration paint base; descendant visual tiers remain leaf-owned. */
+    layerIndex?: string | null;
+    ownerId?: string;
 };
 type __VLS_Slots = {
     header?: () => unknown;
@@ -25,7 +31,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     "request-close": () => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onRequest-close"?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {
+    open: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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_a108e8f1_scoped_a108e8f1_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-a108e8f1"]]);
 //#endregion
 export { n as default };

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

@@ -1,90 +1,205 @@
 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 { assertDialogSurfacePresentation as t, resolveDialogSurfaceLayerIndex as n, validateDialogSurfaceHeadingLevel as r } from "./dialogSurface.js";
+import { useOverlayAdmission as ee } from "../../../internal/overlayHost.js";
+import { useUiKitLocale as i } from "../../../composables/useUiKitLocale.js";
+import { useInteractiveLeafRegistration as a } from "../../../internal/passiveContentContract.js";
+import o from "../controls/SButton.vue.js";
+import { useDialogSurfaceMotion as s } from "./dialogSurfaceMotion.js";
+import { Fragment as te, Transition as ne, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as re, defineComponent as p, mergeProps as ie, normalizeClass as m, normalizeStyle as h, onErrorCaptured as g, openBlock as _, ref as v, renderSlot as y, resolveDynamicComponent as b, shallowRef as x, toDisplayString as S, unref as C, useId as ae, useSlots as oe, 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 se = ["data-scope"], ce = ["data-scope", "data-placement"], le = ["data-placement"], ue = [
+	"data-presentation",
+	"data-layout",
+	"data-size",
+	"data-placement",
+	"data-scope",
+	"data-surface",
+	"data-scroll"
+], de = {
+	key: 0,
+	class: "s-dialog-surface__header"
+}, fe = { class: "s-dialog-surface__body" }, D = ["data-layout"], O = {
 	key: 0,
 	class: "s-dialog-surface__footer-start"
-}, E = {
+}, k = {
 	key: 1,
 	class: "s-dialog-surface__footer-end"
-}, D = "div", O = /*@__PURE__*/ p({
+}, A = /*@__PURE__*/ p({
 	inheritAttrs: !1,
 	__name: "SDialogSurface",
 	props: {
+		open: {
+			type: Boolean,
+			default: !0
+		},
 		presentation: {},
 		title: {},
 		accessibleName: {},
 		headingLevel: {},
 		closable: { type: Boolean },
-		setSurfaceElement: { type: Function }
+		setSurfaceElement: {},
+		setPortalElement: {},
+		setDismissalElement: {},
+		layerIndex: {},
+		ownerId: {}
 	},
 	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, {
-			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,
-			tabindex: "-1",
-			role: "dialog",
-			"aria-modal": "true",
-			"aria-labelledby": L.value ? N : void 0,
-			"aria-label": L.value ? void 0 : p.accessibleName
-		}), {
-			default: S(() => [
-				L.value ? (h(), c(_(B.value), {
-					key: 0,
-					class: "s-dialog-surface__header"
-				}, {
-					default: S(() => [(h(), c(_(H.value), {
-						id: N,
-						class: "s-dialog-surface__title"
-					}, {
-						default: S(() => [g(t.$slots, "header", {}, () => [f(v(p.title), 1)], !0)]),
-						_: 3
-					})), p.closable ? (h(), c(r, {
+	setup(p, { emit: A }) {
+		let j = p, M = A, { t: N } = i(), P = x(null), F = x(null), I = x(null), L = ee(), R = s(() => L.value);
+		g(() => {
+			R.dispose();
+		});
+		let z = c(() => j.layerIndex ? { zIndex: n(j.layerIndex, "backdrop") } : {}), B = c(() => j.layerIndex ? { zIndex: n(j.layerIndex, "surface") } : {}), V = c(() => j.layerIndex ? { "--s-layer-root-toast": n(j.layerIndex, "toast") } : {}), H = v(!L.value), pe = (e) => {
+			if (e !== null && !(e instanceof HTMLElement)) throw TypeError("SDialogSurface: surface ref must resolve to its native HTMLElement");
+			P.value = e, j.setSurfaceElement(e);
+		}, me = (e) => j.setPortalElement?.(e), he = (e) => {
+			if (e !== null && !(e instanceof HTMLElement)) throw TypeError("SDialogSurface: frame ref must resolve to its native HTMLElement");
+			F.value = e, j.setDismissalElement?.(e);
+		}, ge = (e) => {
+			if (e !== null && !(e instanceof HTMLElement)) throw TypeError("SDialogSurface: backdrop ref must resolve to its native HTMLElement");
+			I.value = e;
+		};
+		T((e) => {
+			let t = P.value, n = F.value, r = I.value;
+			t && n && r && e(R.register({
+				subject: t,
+				frame: n,
+				backdrop: r
+			}));
+		}, { flush: "sync" }), w(L, (e) => {
+			if (e) return;
+			H.value = !0;
+			let t = P.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" }), w(() => j.open, (e, t) => {
+			e && t === !1 && L.value && (H.value = !1);
+		}, { flush: "sync" }), T(() => {
+			t(j.presentation);
+		}), a({ owner: "SDialogSurface" });
+		let U = oe(), W = `s-dialog-title-${ae()}`, G = c(() => j.presentation.kind === "modal"), K = c(() => j.presentation.kind === "modal" ? j.presentation : null), q = c(() => j.presentation.kind === "drawer" ? j.presentation : null), J = c(() => q.value?.scope === "contained" ? { "--s-drawer-extent": `${q.value.extent}%` } : void 0), Y = c(() => !!(j.title || U.header)), X = c(() => G.value && !!(U["footer-start"] || U["footer-end"])), _e = c(() => X.value || !!U.footer), Z = c(() => j.presentation.kind === "modal" || j.presentation.scope === "viewport"), ve = c(() => Z.value ? "dialog" : "div"), ye = c(() => r("SDialogSurface", j.headingLevel)), be = c(() => `h${ye.value}`), Q = c(() => {
+			let e = j.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";
+		}), $ = () => M("request-close");
+		return (t, n) => (_(), l(ne, {
+			name: "s-dialog-surface-motion",
+			css: C(L),
+			onEnter: C(R).enter,
+			onLeave: C(R).leave,
+			onEnterCancelled: C(R).cancel,
+			onLeaveCancelled: C(R).cancel
+		}, {
+			default: E(() => [p.open ? (_(), l(b(ve.value), ie({
+				key: 0,
+				ref: pe
+			}, t.$attrs, {
+				class: "s-dialog-surface",
+				hidden: H.value || !C(L),
+				"^inert": H.value || !C(L) ? !0 : void 0,
+				"data-presentation": p.presentation.kind,
+				"data-layout": Q.value,
+				"data-size": p.presentation.size,
+				"data-placement": q.value?.placement,
+				"data-scope": q.value?.scope,
+				"data-surface": K.value?.surface,
+				"data-scroll": K.value?.scrollBehavior ?? q.value?.scrollBehavior,
+				"data-native": Z.value,
+				"data-s-modal-owner": p.ownerId,
+				style: J.value,
+				tabindex: Z.value ? void 0 : -1,
+				role: "dialog",
+				"aria-modal": q.value?.scope === "contained" ? "false" : "true",
+				"aria-labelledby": Y.value ? W : void 0,
+				"aria-label": Y.value ? void 0 : p.accessibleName
+			}), {
+				default: E(() => [
+					f("div", {
+						ref: ge,
+						class: m(G.value ? "s-modal-backdrop" : "s-drawer-backdrop"),
+						"data-scope": q.value?.scope,
+						style: h(z.value),
+						"aria-hidden": "true"
+					}, null, 14, se),
+					f("div", {
+						class: m(G.value ? "s-modal-container" : "s-drawer-shell"),
+						"data-scope": q.value?.scope,
+						"data-placement": q.value?.placement,
+						style: h(B.value)
+					}, [f("div", {
+						class: m(G.value ? ["s-modal-panel-container", { "s-modal-panel-container--fullscreen": Q.value === "fullscreen" }] : "s-drawer-positioner"),
+						"data-placement": q.value?.placement
+					}, [f("div", {
+						ref: he,
+						class: "s-dialog-surface__frame",
+						"data-presentation": p.presentation.kind,
+						"data-layout": Q.value,
+						"data-size": p.presentation.size,
+						"data-placement": q.value?.placement,
+						"data-scope": q.value?.scope,
+						"data-surface": K.value?.surface,
+						"data-scroll": K.value?.scrollBehavior ?? q.value?.scrollBehavior,
+						style: h(J.value)
+					}, [
+						Y.value ? (_(), d("div", de, [(_(), l(b(be.value), {
+							id: W,
+							class: "s-dialog-surface__title"
+						}, {
+							default: E(() => [y(t.$slots, "header", {}, () => [re(S(p.title), 1)], !0)]),
+							_: 3
+						})), p.closable ? (_(), l(o, {
+							key: 0,
+							"leading-icon": C(e),
+							"icon-only": "",
+							appearance: "text",
+							size: "sm",
+							"aria-label": C(N)("dialog.close"),
+							onClick: $
+						}, null, 8, ["leading-icon", "aria-label"])) : u("", !0)])) : u("", !0),
+						f("div", fe, [y(t.$slots, "default", {}, void 0, !0)]),
+						_e.value ? (_(), d("div", {
+							key: 1,
+							class: "s-dialog-surface__footer",
+							"data-layout": X.value ? "split" : "end"
+						}, [X.value ? (_(), d(te, { key: 0 }, [t.$slots["footer-start"] ? (_(), d("div", O, [y(t.$slots, "footer-start", { close: $ }, void 0, !0)])) : u("", !0), t.$slots["footer-end"] ? (_(), d("div", k, [y(t.$slots, "footer-end", { close: $ }, void 0, !0)])) : u("", !0)], 64)) : y(t.$slots, "footer", { close: $ }, void 0, !0, 1)], 8, D)) : u("", !0)
+					], 12, ue)], 10, le)], 14, ce),
+					Z.value ? (_(), d("div", {
 						key: 0,
-						"leading-icon": y(e),
-						"icon-only": "",
-						appearance: "text",
-						size: "sm",
-						"aria-label": y(j)("dialog.close"),
-						onClick: W
-					}, null, 8, ["leading-icon", "aria-label"])) : l("", !0)]),
-					_: 3
-				})) : l("", !0),
-				d("div", C, [g(t.$slots, "default", {}, void 0, !0)]),
-				z.value ? (h(), u("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)
-			]),
+						ref: me,
+						"data-s-dialog-portal": "",
+						class: "s-dialog-surface__portal",
+						style: h(V.value)
+					}, null, 4)) : u("", !0)
+				]),
+				_: 3
+			}, 16, [
+				"hidden",
+				"^inert",
+				"data-presentation",
+				"data-layout",
+				"data-size",
+				"data-placement",
+				"data-scope",
+				"data-surface",
+				"data-scroll",
+				"data-native",
+				"data-s-modal-owner",
+				"style",
+				"tabindex",
+				"aria-modal",
+				"aria-labelledby",
+				"aria-label"
+			])) : u("", !0)]),
 			_: 3
-		}, 16, [
-			"data-presentation",
-			"data-layout",
-			"data-size",
-			"data-placement",
-			"data-surface",
-			"data-scroll",
-			"aria-labelledby",
-			"aria-label"
+		}, 8, [
+			"css",
+			"onEnter",
+			"onLeave",
+			"onEnterCancelled",
+			"onLeaveCancelled"
 		]));
 	}
 });
 //#endregion
-export { O as default };
+export { A 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;