@pgcorp/ui-kit 0.13.0 → 0.14.0

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

@@ -1,7 +1,10 @@
+import { SDockRegionCollapse, SResizeHandleCancel, SResizeHandleCompletion, SResizeHandleHitbox } from './types';
 type DockPlacement = 'left' | 'right' | 'bottom';
 type __VLS_Props = {
     placement: DockPlacement;
     visible: boolean;
+    /** Сохраняет slot owner при скрытии; hidden/inert содержимое исключено из layout и взаимодействия. */
+    keepMounted?: boolean;
     size: number;
     minSize?: number;
     maxSize?: number;
@@ -14,23 +17,32 @@ type __VLS_Props = {
     handleVariant?: 'inline' | 'overlay';
     hideResizeHandleOnNarrow?: boolean;
     responsiveSize?: 'fixed' | 'fill-on-narrow';
+    hitbox?: SResizeHandleHitbox;
+    /** Только committed pointer intent ниже порога сворачивает панель. */
+    collapseThreshold?: number;
 };
-declare var __VLS_10: {};
+declare var __VLS_11: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_10) => any;
+    default?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    collapse: (intent: SDockRegionCollapse) => any;
     resize: (size: number) => any;
     "resize-start": (pointerEvent: PointerEvent) => any;
-    "resize-end": (size: number) => any;
+    "resize-end": (size: number, completion?: SResizeHandleCompletion | undefined) => any;
+    "resize-cancel": (cancellation: SResizeHandleCancel) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCollapse?: ((intent: SDockRegionCollapse) => any) | undefined;
     onResize?: ((size: number) => any) | undefined;
     "onResize-start"?: ((pointerEvent: PointerEvent) => any) | undefined;
-    "onResize-end"?: ((size: number) => any) | undefined;
+    "onResize-end"?: ((size: number, completion?: SResizeHandleCompletion | undefined) => any) | undefined;
+    "onResize-cancel"?: ((cancellation: SResizeHandleCancel) => any) | undefined;
 }>, {
-    minSize: number;
     surface: "base" | "subtle" | "transparent";
+    minSize: number;
     resizing: boolean;
+    hitbox: SResizeHandleHitbox;
+    keepMounted: boolean;
     maxSize: number;
     resizeStep: number;
     elevated: boolean;
@@ -39,6 +51,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     handleVariant: "inline" | "overlay";
     hideResizeHandleOnNarrow: boolean;
     responsiveSize: "fixed" | "fill-on-narrow";
+    collapseThreshold: 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/layout/SDockRegion.vue.js

@@ -1,8 +1,8 @@
-import "../../../assets/src/components/layout/SDockRegion.vue_vue_type_style_index_0_scoped_2932631d_lang.css";
+import "../../../assets/src/components/layout/SDockRegion.vue_vue_type_style_index_0_scoped_a1f403e2_lang.css";
 import e from "../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./SDockRegion.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                            */
 //#region src/components/layout/SDockRegion.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-2932631d"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-a1f403e2"]]);
 //#endregion
 export { n as default };

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

@@ -1,15 +1,25 @@
-import { useUiKitLocale as e } from "../../composables/useUiKitLocale.js";
-import { useOwnedAttrs as t } from "../../internal/ownedAttrs.js";
-import { validateBoolean as n, validateExactString as r, validateNonEmptyString as i } from "../../internal/runtimeContract.js";
-import a from "./SResizeHandle.vue.js";
-import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, defineComponent as d, mergeProps as f, normalizeClass as p, normalizeStyle as m, openBlock as h, ref as g, renderList as _, renderSlot as v, unref as y } from "vue";
+import { provideOverlayAdmission as e } from "../../internal/overlayHost.js";
+import { validateBoolean as t, validateExactString as n, validateNonEmptyString as r } from "../../internal/runtimeContract.js";
+import { useUiKitLocale as i } from "../../composables/useUiKitLocale.js";
+import { useOwnedAttrs as a } from "../../internal/ownedAttrs.js";
+import o from "./SResizeHandle.vue.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, defineComponent as f, mergeProps as p, normalizeClass as m, normalizeStyle as h, openBlock as g, ref as _, renderList as v, renderSlot as y, unref as b, watch as x } from "vue";
 //#region src/components/layout/SDockRegion.vue?vue&type=script&setup=true&lang.ts
-var b = ["data-dock-placement", "data-responsive-size"], x = ["data-testid"], S = /*@__PURE__*/ d({
+var S = [
+	"hidden",
+	"^inert",
+	"data-dock-placement",
+	"data-responsive-size"
+], C = ["data-testid"], w = /*@__PURE__*/ f({
 	inheritAttrs: !1,
 	__name: "SDockRegion",
 	props: {
 		placement: {},
 		visible: { type: Boolean },
+		keepMounted: {
+			type: Boolean,
+			default: !1
+		},
 		size: {},
 		minSize: { default: 0 },
 		maxSize: { default: 4096 },
@@ -30,86 +40,124 @@ var b = ["data-dock-placement", "data-responsive-size"], x = ["data-testid"], S
 			type: Boolean,
 			default: !1
 		},
-		responsiveSize: { default: "fixed" }
+		responsiveSize: { default: "fixed" },
+		hitbox: { default: void 0 },
+		collapseThreshold: { default: void 0 }
 	},
 	emits: [
 		"resize-start",
 		"resize",
-		"resize-end"
+		"resize-end",
+		"resize-cancel",
+		"collapse"
 	],
-	setup(d, { emit: S }) {
-		let C = d, { t: w } = e(), T = S, E = g(!1), D = t({
+	setup(f, { emit: w }) {
+		let T = f, { t: E } = i(), D = w, O = _(!1), k = _(null), A = a({
 			component: "SDockRegion",
 			owner: "dock region root"
-		}), O = s(() => ({
-			placement: r("SDockRegion", "placement", C.placement, [
+		}), j = c(() => ({
+			placement: n("SDockRegion", "placement", T.placement, [
 				"left",
 				"right",
 				"bottom"
 			]),
-			visible: n("SDockRegion", "visible", C.visible),
-			surface: r("SDockRegion", "surface", C.surface, [
+			visible: t("SDockRegion", "visible", T.visible),
+			keepMounted: t("SDockRegion", "keepMounted", T.keepMounted),
+			surface: n("SDockRegion", "surface", T.surface, [
 				"base",
 				"subtle",
 				"transparent"
 			]),
-			elevated: n("SDockRegion", "elevated", C.elevated),
-			handleVariant: r("SDockRegion", "handleVariant", C.handleVariant, ["inline", "overlay"]),
-			hideResizeHandleOnNarrow: n("SDockRegion", "hideResizeHandleOnNarrow", C.hideResizeHandleOnNarrow),
-			responsiveSize: r("SDockRegion", "responsiveSize", C.responsiveSize, ["fixed", "fill-on-narrow"]),
-			resizeTestId: C.resizeTestId === void 0 ? void 0 : i("SDockRegion", "resizeTestId", C.resizeTestId)
-		})), k = s(() => C.resizing || E.value), A = s(() => O.value.placement === "bottom" ? "horizontal" : "vertical"), j = s(() => O.value.placement === "left" ? "forward" : "reverse"), M = s(() => O.value.placement === "left" ? ["panel", "handle"] : ["handle", "panel"]), N = s(() => C.resizeLabel === void 0 ? O.value.placement === "bottom" ? w("layout.resizeBottomPanel") : O.value.placement === "left" ? w("layout.resizeLeftPanel") : w("layout.resizeRightPanel") : i("SDockRegion", "resizeLabel", C.resizeLabel));
-		function P(e) {
-			E.value = !0, T("resize-start", e);
+			elevated: t("SDockRegion", "elevated", T.elevated),
+			handleVariant: n("SDockRegion", "handleVariant", T.handleVariant, ["inline", "overlay"]),
+			hideResizeHandleOnNarrow: t("SDockRegion", "hideResizeHandleOnNarrow", T.hideResizeHandleOnNarrow),
+			responsiveSize: n("SDockRegion", "responsiveSize", T.responsiveSize, ["fixed", "fill-on-narrow"]),
+			resizeTestId: T.resizeTestId === void 0 ? void 0 : r("SDockRegion", "resizeTestId", T.resizeTestId),
+			hitbox: T.hitbox === void 0 ? void 0 : n("SDockRegion", "hitbox", T.hitbox, [
+				"compact",
+				"standard",
+				"spacious"
+			]),
+			collapseThreshold: R()
+		})), M = c(() => T.resizing || O.value);
+		e(c(() => j.value.visible)), x(() => T.visible, (e) => {
+			if (e !== !1 || T.keepMounted !== !0) return;
+			let t = k.value, n = t?.ownerDocument.activeElement;
+			t && n instanceof HTMLElement && t.contains(n) && n.blur();
+		}, { flush: "sync" });
+		let N = c(() => j.value.placement === "bottom" ? "horizontal" : "vertical"), P = c(() => j.value.placement === "left" ? "forward" : "reverse"), F = c(() => j.value.placement === "left" ? ["panel", "handle"] : ["handle", "panel"]), I = c(() => T.resizeLabel === void 0 ? j.value.placement === "bottom" ? E("layout.resizeBottomPanel") : j.value.placement === "left" ? E("layout.resizeLeftPanel") : E("layout.resizeRightPanel") : r("SDockRegion", "resizeLabel", T.resizeLabel));
+		function L(e) {
+			O.value = !0, D("resize-start", e);
 		}
-		function F(e) {
-			E.value = !1, T("resize-end", e);
+		function R() {
+			let e = T.collapseThreshold;
+			if (e !== void 0) {
+				if (!Number.isFinite(e) || e < 0 || e >= T.minSize) throw RangeError(`SDockRegion: collapseThreshold должен быть конечным числом в диапазоне 0 <= threshold < minSize ${T.minSize}`);
+				return e;
+			}
+		}
+		function z(e, t) {
+			O.value = !1;
+			let n = j.value.collapseThreshold;
+			t !== void 0 && n !== void 0 && t.unclampedValue < n ? D("collapse", { preferredSize: t.startValue }) : t === void 0 ? D("resize-end", e) : D("resize-end", e, t);
 		}
-		let I = s(() => O.value.placement === "bottom" ? "contents" : ["flex min-h-0 flex-shrink-0", { relative: O.value.handleVariant === "overlay" }]), L = s(() => [
+		function B(e) {
+			O.value = !1, D("resize-cancel", e);
+		}
+		let V = c(() => j.value.placement === "bottom" ? "contents" : ["flex min-h-0 flex-shrink-0", { relative: j.value.handleVariant === "overlay" }]), H = c(() => [
 			"s-dock-region__panel relative flex-shrink-0",
-			O.value.placement === "bottom" ? "flex min-h-0 flex-col" : "h-full min-h-0",
-			O.value.surface === "base" ? "bg-surface-0 dark:bg-surface-900" : O.value.surface === "subtle" ? "bg-surface-50 dark:bg-surface-850" : "bg-transparent",
+			j.value.placement === "bottom" ? "flex min-h-0 flex-col" : "h-full min-h-0",
+			j.value.surface === "base" ? "bg-surface-0 dark:bg-surface-900" : j.value.surface === "subtle" ? "bg-surface-50 dark:bg-surface-850" : "bg-transparent",
 			{
-				"transition-none": k.value,
-				"z-[var(--s-layer-navigation)] overflow-visible": O.value.elevated,
-				"z-[var(--s-layer-affordance)] overflow-hidden": O.value.placement === "bottom" && !O.value.elevated
+				"transition-none": M.value,
+				"z-[var(--s-layer-navigation)] overflow-visible": j.value.elevated,
+				"z-[var(--s-layer-affordance)] overflow-hidden": j.value.placement === "bottom" && !j.value.elevated
 			}
-		]), R = s(() => {
+		]), U = c(() => {
 			if (![
-				C.size,
-				C.minSize,
-				C.maxSize,
-				C.resizeStep
+				T.size,
+				T.minSize,
+				T.maxSize,
+				T.resizeStep
 			].every(Number.isFinite)) throw RangeError("SDockRegion: size, minSize, maxSize и resizeStep должны быть конечными числами");
-			if (C.minSize > C.maxSize) throw RangeError(`SDockRegion: minSize ${C.minSize} не может превышать maxSize ${C.maxSize}`);
-			if (C.size < C.minSize || C.size > C.maxSize) throw RangeError(`SDockRegion: size ${C.size} должен находиться в диапазоне ${C.minSize}..${C.maxSize}`);
-			if (C.resizeStep <= 0) throw RangeError("SDockRegion: resizeStep должен быть больше нуля");
-			return { "--s-dock-region-size": `${C.size}px` };
+			if (T.minSize > T.maxSize) throw RangeError(`SDockRegion: minSize ${T.minSize} не может превышать maxSize ${T.maxSize}`);
+			if (T.size < T.minSize || T.size > T.maxSize) throw RangeError(`SDockRegion: size ${T.size} должен находиться в диапазоне ${T.minSize}..${T.maxSize}`);
+			if (T.resizeStep <= 0) throw RangeError("SDockRegion: resizeStep должен быть больше нуля");
+			return { "--s-dock-region-size": `${T.size}px` };
 		});
-		return (e, t) => O.value.visible ? (h(), u("div", f({ key: 0 }, y(D).bindings(), {
-			class: I.value,
-			"data-dock-placement": O.value.placement,
-			"data-responsive-size": O.value.responsiveSize
-		}), [(h(!0), u(o, null, _(M.value, (n) => (h(), u(o, { key: n }, [n === "handle" ? (h(), c(a, {
+		return (e, t) => j.value.visible || j.value.keepMounted ? (g(), d("div", p({
+			key: 0,
+			ref_key: "rootRef",
+			ref: k
+		}, b(A).bindings(), {
+			hidden: !j.value.visible,
+			"^inert": !j.value.visible || void 0,
+			class: V.value,
+			"data-dock-placement": j.value.placement,
+			"data-responsive-size": j.value.responsiveSize
+		}), [(g(!0), d(s, null, v(F.value, (n) => (g(), d(s, { key: n }, [n === "handle" && j.value.visible ? (g(), l(o, {
 			key: 0,
-			orientation: A.value,
-			"value-direction": j.value,
-			variant: O.value.handleVariant,
-			label: N.value,
-			"data-test-id": O.value.resizeTestId ?? `${O.value.placement}-dock-resizer`,
-			"hidden-on-narrow": O.value.hideResizeHandleOnNarrow,
-			resizing: k.value,
-			value: d.size,
-			min: d.minSize,
-			max: d.maxSize,
-			step: d.resizeStep,
-			onResizeStart: P,
-			onResize: t[0] ||= (e) => T("resize", e),
-			onResizeEnd: F
+			orientation: N.value,
+			"value-direction": P.value,
+			variant: j.value.handleVariant,
+			hitbox: j.value.hitbox,
+			label: I.value,
+			"data-test-id": j.value.resizeTestId ?? `${j.value.placement}-dock-resizer`,
+			"hidden-on-narrow": j.value.hideResizeHandleOnNarrow,
+			resizing: M.value,
+			value: f.size,
+			min: f.minSize,
+			max: f.maxSize,
+			step: f.resizeStep,
+			onResizeStart: L,
+			onResize: t[0] ||= (e) => D("resize", e),
+			onResizeEnd: z,
+			onResizeCancel: B
 		}, null, 8, [
 			"orientation",
 			"value-direction",
 			"variant",
+			"hitbox",
 			"label",
 			"data-test-id",
 			"hidden-on-narrow",
@@ -118,13 +166,13 @@ var b = ["data-dock-placement", "data-responsive-size"], x = ["data-testid"], S
 			"min",
 			"max",
 			"step"
-		])) : (h(), u("div", {
+		])) : n === "panel" ? (g(), d("div", {
 			key: 1,
-			"data-testid": `${d.placement}-dock-panel`,
-			class: p(L.value),
-			style: m(R.value)
-		}, [v(e.$slots, "default", {}, void 0, !0)], 14, x))], 64))), 128))], 16, b)) : l("", !0);
+			"data-testid": `${f.placement}-dock-panel`,
+			class: m(H.value),
+			style: h(U.value)
+		}, [y(e.$slots, "default", {}, void 0, !0)], 14, C)) : u("", !0)], 64))), 128))], 16, S)) : u("", !0);
 	}
 });
 //#endregion
-export { S as default };
+export { w as default };

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

@@ -1,4 +1,5 @@
-export type SResizeHandleHitbox = 'compact' | 'standard' | 'spacious';
+import { SResizeHandleCancel, SResizeHandleCompletion, SResizeHandleHitbox } from './types';
+export type { SResizeHandleCancel, SResizeHandleCancelReason, SResizeHandleCompletion, SResizeHandleHitbox, } from './types';
 type __VLS_Props = {
     orientation: 'vertical' | 'horizontal';
     variant?: 'inline' | 'overlay';
@@ -19,11 +20,13 @@ type __VLS_Props = {
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     resize: (value: number) => any;
     "resize-start": (pointerEvent: PointerEvent) => any;
-    "resize-end": (value: number) => any;
+    "resize-end": (value: number, completion?: SResizeHandleCompletion | undefined) => any;
+    "resize-cancel": (cancellation: SResizeHandleCancel) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onResize?: ((value: number) => any) | undefined;
     "onResize-start"?: ((pointerEvent: PointerEvent) => any) | undefined;
-    "onResize-end"?: ((value: number) => any) | undefined;
+    "onResize-end"?: ((value: number, completion?: SResizeHandleCompletion | undefined) => any) | undefined;
+    "onResize-cancel"?: ((cancellation: SResizeHandleCancel) => any) | undefined;
 }>, {
     value: number;
     max: number;

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

@@ -1,8 +1,8 @@
-import "../../../assets/src/components/layout/SResizeHandle.vue_vue_type_style_index_0_scoped_90cc655e_lang.css";
+import "../../../assets/src/components/layout/SResizeHandle.vue_vue_type_style_index_0_scoped_13b9b27a_lang.css";
 import e from "../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./SResizeHandle.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                              */
 //#region src/components/layout/SResizeHandle.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-90cc655e"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-13b9b27a"]]);
 //#endregion
 export { n as default };

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

@@ -1,10 +1,10 @@
-import { useOwnedAttrs as e } from "../../internal/ownedAttrs.js";
-import { validateExactString as t, validateNonEmptyString as n } from "../../internal/runtimeContract.js";
+import { validateExactString as e, validateNonEmptyString as t } from "../../internal/runtimeContract.js";
+import { useOwnedAttrs as n } from "../../internal/ownedAttrs.js";
 import { useInteractiveLeafRegistration as r } from "../../internal/passiveContentContract.js";
 import { acquirePointerInteractionLease as i } from "../../internal/pointerInteractionLease.js";
-import { computed as a, createElementBlock as o, createElementVNode as s, defineComponent as c, mergeProps as l, normalizeClass as u, onBeforeUnmount as d, openBlock as f, ref as p, unref as m } from "vue";
+import { computed as a, createElementBlock as o, createElementVNode as s, defineComponent as c, mergeProps as l, normalizeClass as u, onBeforeUnmount as d, openBlock as f, shallowRef as p, unref as m, watch as h } from "vue";
 //#region src/components/layout/SResizeHandle.vue?vue&type=script&setup=true&lang.ts
-var h = [
+var g = [
 	"aria-orientation",
 	"aria-label",
 	"aria-valuenow",
@@ -19,7 +19,7 @@ var h = [
 	"data-hitbox",
 	"data-orientation",
 	"data-variant"
-], g = /*@__PURE__*/ c({
+], _ = /*@__PURE__*/ c({
 	inheritAttrs: !1,
 	__name: "SResizeHandle",
 	props: {
@@ -50,126 +50,164 @@ var h = [
 	emits: [
 		"resize-start",
 		"resize",
-		"resize-end"
+		"resize-end",
+		"resize-cancel"
 	],
-	setup(c, { emit: g }) {
-		let _ = [
+	setup(c, { emit: _ }) {
+		let v = [
 			"compact",
 			"standard",
 			"spacious"
-		], v = c, y = g, b = p(null), x = e({
+		], y = c, b = _, x = p(null), S = !1, C = n({
 			component: "SResizeHandle",
 			owner: "native separator button"
 		});
 		r({ owner: "SResizeHandle" });
-		let S = a(() => v.resizing || b.value !== null), C = a(() => n("SResizeHandle", "label", v.label)), w = a(() => t("SResizeHandle", "hitbox", v.hitbox ?? (v.variant === "overlay" ? "spacious" : "compact"), _)), T = a(() => (E(), {
-			value: v.value,
-			min: v.min,
-			max: v.max
+		let w = a(() => y.resizing || x.value !== null), T = a(() => t("SResizeHandle", "label", y.label)), E = a(() => e("SResizeHandle", "hitbox", y.hitbox ?? (y.variant === "overlay" ? "spacious" : "compact"), v)), D = a(() => (O(), {
+			value: y.value,
+			min: y.min,
+			max: y.max
 		}));
-		function E() {
+		function O() {
 			if (![
-				v.value,
-				v.min,
-				v.max,
-				v.step,
-				v.pointerScale
+				y.value,
+				y.min,
+				y.max,
+				y.step,
+				y.pointerScale
 			].every(Number.isFinite)) throw RangeError("SResizeHandle: value, min, max, step и pointerScale должны быть конечными числами");
-			if (v.min > v.max) throw RangeError(`SResizeHandle: min ${v.min} не может превышать max ${v.max}`);
-			if (v.value < v.min || v.value > v.max) throw RangeError(`SResizeHandle: value ${v.value} должен находиться в диапазоне ${v.min}..${v.max}`);
-			if (v.step <= 0) throw RangeError("SResizeHandle: step должен быть больше нуля");
-			if (v.pointerScale <= 0) throw RangeError("SResizeHandle: pointerScale должен быть больше нуля");
+			if (y.min > y.max) throw RangeError(`SResizeHandle: min ${y.min} не может превышать max ${y.max}`);
+			if (y.value < y.min || y.value > y.max) throw RangeError(`SResizeHandle: value ${y.value} должен находиться в диапазоне ${y.min}..${y.max}`);
+			if (y.step <= 0) throw RangeError("SResizeHandle: step должен быть больше нуля");
+			if (y.pointerScale <= 0) throw RangeError("SResizeHandle: pointerScale должен быть больше нуля");
 		}
-		function D(e) {
-			return Math.min(v.max, Math.max(v.min, e));
+		function k(e) {
+			return Math.min(y.max, Math.max(y.min, e));
 		}
-		function O(e) {
-			return v.orientation === "vertical" ? e.clientX : e.clientY;
+		function A(e, t) {
+			let n = t === "vertical" ? e.clientX : e.clientY;
+			if (!Number.isFinite(n)) throw RangeError("SResizeHandle: pointer coordinate должен быть конечным числом");
+			return n;
 		}
-		function k(e) {
-			let t = b.value;
+		function j(e, t) {
+			let n = (A(e, t.orientation) - t.startCoordinate) * t.direction * t.pointerScale, r = t.startValue + n;
+			if (!Number.isFinite(r)) throw RangeError("SResizeHandle: pointer logical value должен быть конечным числом");
+			return r;
+		}
+		function M(e, t) {
+			let n = k(t);
+			n !== e.latestValue && (e.latestValue = n, b("resize", n));
+		}
+		function N(e) {
+			let t = x.value;
+			t && t.pointerId === e.pointerId && (O(), M(t, j(e, t)));
+		}
+		function P(e) {
+			let t = x.value;
 			if (!t || t.pointerId !== e.pointerId) return;
-			let n = v.valueDirection === "forward" ? 1 : -1, r = (O(e) - t.startCoordinate) * n * v.pointerScale, i = D(t.startValue + r);
-			i !== t.latestValue && (t.latestValue = i, y("resize", i));
+			O();
+			let n = j(e, t);
+			M(t, n), x.value === t && (z(t), b("resize-end", t.latestValue, {
+				source: "pointer",
+				startValue: t.startValue,
+				unclampedValue: n
+			}));
 		}
-		function A(e) {
-			let t = b.value;
-			t && t.pointerId === e.pointerId && M(!0);
+		function F(e) {
+			let t = x.value;
+			t && t.pointerId === e.pointerId && R("lostpointercapture");
 		}
-		function j(e) {
-			let t = b.value;
-			t && t.pointerId === e.pointerId && M(!0);
+		function I(e) {
+			let t = x.value;
+			t && t.pointerId === e.pointerId && R("pointercancel");
 		}
-		function M(e) {
-			let t = b.value;
-			if (t) {
-				window.removeEventListener("pointermove", k), window.removeEventListener("pointerup", A), window.removeEventListener("pointercancel", A), t.target.removeEventListener("lostpointercapture", j);
-				try {
-					t.target.hasPointerCapture?.(t.pointerId) && t.target.releasePointerCapture(t.pointerId);
-				} finally {
-					t.interactionLease.release(), b.value = null;
-				}
-				e && y("resize-end", t.latestValue);
-			}
+		function L() {
+			R("window-blur");
 		}
-		function N(e) {
-			if (v.disabled || e.pointerType !== "touch" && e.button !== 0) return;
-			E(), M(!1);
-			let t = e.currentTarget, n = i({ cursor: v.orientation === "vertical" ? "col-resize" : "row-resize" });
+		function R(e) {
+			let t = x.value;
+			t && (z(t), b("resize-cancel", {
+				initialValue: t.startValue,
+				latestValue: t.latestValue,
+				reason: e
+			}));
+		}
+		function z(e) {
+			x.value = null, window.removeEventListener("pointermove", N), window.removeEventListener("pointerup", P), window.removeEventListener("pointercancel", I), window.removeEventListener("blur", L), e.target.removeEventListener("lostpointercapture", F);
 			try {
-				t.focus({ preventScroll: !0 }), t.setPointerCapture?.(e.pointerId), e.preventDefault();
-			} catch (e) {
-				throw n.release(), e;
+				e.target.hasPointerCapture?.(e.pointerId) && e.target.releasePointerCapture(e.pointerId);
+			} finally {
+				e.interactionLease.release();
 			}
-			b.value = {
+		}
+		function B(e) {
+			if (S || y.disabled || e.pointerType !== "touch" && e.button !== 0) return;
+			O();
+			let t = e.currentTarget;
+			if (!(t instanceof HTMLButtonElement)) throw TypeError("SResizeHandle: pointer activation owner должен быть native HTMLButtonElement");
+			let n = A(e, y.orientation);
+			if (R("superseded"), S || y.disabled || x.value !== null || (t.focus({ preventScroll: !0 }), S || y.disabled || x.value !== null)) return;
+			let r = i({ cursor: y.orientation === "vertical" ? "col-resize" : "row-resize" }), a = {
 				pointerId: e.pointerId,
-				startCoordinate: O(e),
-				startValue: v.value,
-				latestValue: v.value,
+				startCoordinate: n,
+				startValue: y.value,
+				latestValue: y.value,
+				orientation: y.orientation,
+				direction: y.valueDirection === "forward" ? 1 : -1,
+				pointerScale: y.pointerScale,
 				target: t,
-				interactionLease: n
-			}, window.addEventListener("pointermove", k), window.addEventListener("pointerup", A), window.addEventListener("pointercancel", A), t.addEventListener("lostpointercapture", j), y("resize-start", e);
+				interactionLease: r
+			};
+			x.value = a, window.addEventListener("pointermove", N), window.addEventListener("pointerup", P), window.addEventListener("pointercancel", I), window.addEventListener("blur", L), t.addEventListener("lostpointercapture", F);
+			try {
+				t.setPointerCapture?.(e.pointerId), e.preventDefault();
+			} catch (e) {
+				throw z(a), e;
+			}
+			x.value === a && b("resize-start", e);
 		}
-		function P(e) {
-			if (v.disabled) return;
-			E();
-			let t = v.orientation === "vertical" ? "ArrowLeft" : "ArrowUp", n = v.orientation === "vertical" ? "ArrowRight" : "ArrowDown", r = v.valueDirection === "forward" ? t : n, i = v.valueDirection === "forward" ? n : t, a;
-			e.key === r && (a = v.value - v.step), e.key === i && (a = v.value + v.step), e.key === "Home" && (a = v.min), e.key === "End" && (a = v.max), a !== void 0 && (e.preventDefault(), y("resize", D(a)));
+		function V(e) {
+			if (y.disabled) return;
+			O();
+			let t = y.orientation === "vertical" ? "ArrowLeft" : "ArrowUp", n = y.orientation === "vertical" ? "ArrowRight" : "ArrowDown", r = y.valueDirection === "forward" ? t : n, i = y.valueDirection === "forward" ? n : t, a;
+			e.key === r && (a = y.value - y.step), e.key === i && (a = y.value + y.step), e.key === "Home" && (a = y.min), e.key === "End" && (a = y.max), a !== void 0 && (e.preventDefault(), b("resize", k(a)));
 		}
 		d(() => {
-			M(!1);
-		});
-		let F = a(() => [
+			S = !0, R("unmount");
+		}), h(() => y.disabled, (e) => {
+			e && R("disabled");
+		}, { flush: "sync" });
+		let H = a(() => [
 			"s-resize-handle group flex touch-none border-0 bg-transparent p-0",
-			{ "max-lg:hidden": v.hiddenOnNarrow },
-			v.variant === "inline" ? "relative flex-shrink-0" : "pointer-events-auto absolute z-[var(--s-layer-floating)] items-center justify-center",
-			v.orientation === "vertical" ? v.variant === "inline" ? "self-stretch cursor-col-resize items-stretch justify-center" : "inset-y-3 left-2 -translate-x-1/2 cursor-col-resize" : v.variant === "inline" ? "w-full cursor-row-resize items-center justify-stretch" : "inset-x-5 top-0 -translate-y-1/2 cursor-row-resize"
-		]), I = a(() => v.orientation === "vertical" ? v.variant === "inline" ? "block h-full w-px bg-surface-200 transition-colors group-hover:bg-primary-500/45 dark:bg-surface-700 dark:group-hover:bg-primary-500/55" : "block h-24 w-1.5 rounded-full border border-surface-200/80 bg-surface-0/95 shadow-sm transition-colors group-hover:border-primary-300 group-hover:bg-primary-50/95 group-data-[resizing=true]:border-primary-300 group-data-[resizing=true]:bg-primary-50/95 dark:border-surface-700/80 dark:bg-surface-850/95 dark:group-hover:border-primary-500/70 dark:group-hover:bg-surface-800/95 dark:group-data-[resizing=true]:border-primary-500/70 dark:group-data-[resizing=true]:bg-surface-800/95" : v.variant === "inline" ? "block h-px w-full bg-surface-200 transition-colors group-hover:bg-primary-500/45 dark:bg-surface-700 dark:group-hover:bg-primary-500/55" : "block h-1.5 w-24 rounded-full border border-surface-200/80 bg-surface-0/95 shadow-sm transition-colors group-hover:border-primary-300 group-hover:bg-primary-50/95 group-data-[resizing=true]:border-primary-300 group-data-[resizing=true]:bg-primary-50/95 dark:border-surface-700/80 dark:bg-surface-850/95 dark:group-hover:border-primary-500/70 dark:group-hover:bg-surface-800/95 dark:group-data-[resizing=true]:border-primary-500/70 dark:group-data-[resizing=true]:bg-surface-800/95");
-		return (e, t) => (f(), o("button", l(m(x).bindings(), {
+			{ "max-lg:hidden": y.hiddenOnNarrow },
+			y.variant === "inline" ? "relative flex-shrink-0" : "pointer-events-auto absolute z-[var(--s-layer-floating)] items-center justify-center",
+			y.orientation === "vertical" ? y.variant === "inline" ? "self-stretch cursor-col-resize items-stretch justify-center" : "inset-y-3 left-2 -translate-x-1/2 cursor-col-resize" : y.variant === "inline" ? "w-full cursor-row-resize items-center justify-stretch" : "inset-x-5 top-0 -translate-y-1/2 cursor-row-resize"
+		]), U = a(() => y.orientation === "vertical" ? y.variant === "inline" ? "block h-full w-px bg-surface-200 transition-colors group-hover:bg-primary-500/45 dark:bg-surface-700 dark:group-hover:bg-primary-500/55" : "block h-24 w-1.5 rounded-full border border-surface-200/80 bg-surface-0/95 shadow-sm transition-colors group-hover:border-primary-300 group-hover:bg-primary-50/95 group-data-[resizing=true]:border-primary-300 group-data-[resizing=true]:bg-primary-50/95 dark:border-surface-700/80 dark:bg-surface-850/95 dark:group-hover:border-primary-500/70 dark:group-hover:bg-surface-800/95 dark:group-data-[resizing=true]:border-primary-500/70 dark:group-data-[resizing=true]:bg-surface-800/95" : y.variant === "inline" ? "block h-px w-full bg-surface-200 transition-colors group-hover:bg-primary-500/45 dark:bg-surface-700 dark:group-hover:bg-primary-500/55" : "block h-1.5 w-24 rounded-full border border-surface-200/80 bg-surface-0/95 shadow-sm transition-colors group-hover:border-primary-300 group-hover:bg-primary-50/95 group-data-[resizing=true]:border-primary-300 group-data-[resizing=true]:bg-primary-50/95 dark:border-surface-700/80 dark:bg-surface-850/95 dark:group-hover:border-primary-500/70 dark:group-hover:bg-surface-800/95 dark:group-data-[resizing=true]:border-primary-500/70 dark:group-data-[resizing=true]:bg-surface-800/95");
+		return (e, t) => (f(), o("button", l(m(C).bindings(), {
 			type: "button",
 			role: "separator",
 			"aria-orientation": c.orientation,
-			"aria-label": C.value,
-			"aria-valuenow": T.value.value,
-			"aria-valuemin": T.value.min,
-			"aria-valuemax": T.value.max,
+			"aria-label": T.value,
+			"aria-valuenow": D.value.value,
+			"aria-valuemin": D.value.min,
+			"aria-valuemax": D.value.max,
 			"aria-disabled": c.disabled || void 0,
 			disabled: c.disabled,
-			title: C.value,
+			title: T.value,
 			"data-testid": c.dataTestId,
-			"data-resizing": S.value || void 0,
+			"data-resizing": w.value || void 0,
 			"data-hidden-on-narrow": c.hiddenOnNarrow || void 0,
-			"data-hitbox": w.value,
+			"data-hitbox": E.value,
 			"data-orientation": c.orientation,
 			"data-variant": c.variant,
-			class: F.value,
-			onPointerdown: N,
-			onKeydown: P
+			class: H.value,
+			onPointerdown: B,
+			onKeydown: V
 		}), [s("span", {
 			"aria-hidden": "true",
-			class: u(I.value)
-		}, null, 2)], 16, h));
+			class: u(U.value)
+		}, null, 2)], 16, g));
 	}
 });
 //#endregion
-export { g as default };
+export { _ as default };

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

@@ -28,8 +28,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<{}>, {
     fill: "content" | "container";
     direction: "column" | "row";
-    gap: SStackGap;
     align: "stretch" | "start" | "center" | "end";
+    gap: SStackGap;
     as: "div" | "section" | "article" | "ul" | "ol";
     paddingEnd: SStackPadding;
     justify: "start" | "center" | "end" | "between";