@pgcorp/ui-kit 0.10.0 → 0.10.1

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

@@ -0,0 +1,166 @@
+import { hasOwn as e } from "../../internal/es2020.js";
+import { useUiKitLocale as t } from "../../composables/useUiKitLocale.js";
+import { useOwnedAttrs as n } from "../../internal/ownedAttrs.js";
+import { validateNonEmptyString as r } from "../../internal/runtimeContract.js";
+import i from "../shared/data-display/SBadge.vue.js";
+import a from "../shared/containers/SPanel.vue.js";
+import o from "../shared/controls/SLink.vue.js";
+import s from "./_internal/SAppBrand.vue.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createTextVNode as h, createVNode as g, defineComponent as _, getCurrentInstance as v, mergeProps as y, normalizeClass as b, openBlock as x, renderList as S, renderSlot as C, toDisplayString as w, unref as T, useSlots as E, withCtx as D } from "vue";
+//#region src/components/layout/SAppShell.vue?vue&type=script&setup=true&lang.ts
+var O = { class: "mx-auto flex min-h-screen max-w-[1680px] gap-6 p-4 lg:p-6" }, k = {
+	key: 0,
+	class: "hidden w-72 shrink-0 self-start lg:flex lg:flex-col"
+}, A = { class: "sticky top-0" }, j = ["aria-label"], M = { class: "min-w-0 flex-1" }, N = { class: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between" }, P = {
+	key: 0,
+	class: "min-w-0"
+}, F = {
+	key: 0,
+	class: "text-xs uppercase tracking-[0.3em] text-surface-500"
+}, I = { class: "flex flex-wrap items-center gap-2" }, L = { class: "text-lg font-semibold" }, R = {
+	key: 1,
+	class: "text-sm text-surface-500"
+}, z = { class: "flex flex-wrap items-center gap-2" }, B = { class: "pb-8 pt-1" }, V = /*@__PURE__*/ _({
+	inheritAttrs: !1,
+	__name: "SAppShell",
+	props: {
+		mode: {},
+		pageEyebrow: {},
+		pageTitle: {},
+		pageBadgeLabel: {},
+		pageBadgeSeverity: {},
+		userLabel: {},
+		navigation: {},
+		navigationLabel: {},
+		showSidebar: { type: Boolean },
+		brandTitle: {},
+		brandTo: {},
+		brandSubtitle: {}
+	},
+	setup(_) {
+		let V = _, { t: H } = t();
+		function U() {
+			let e = v();
+			if (!e) throw Error("SAppShell: component instance unavailable during setup");
+			return e;
+		}
+		let W = U(), G = E(), K = l(() => !!G["brand-icon"]), q = l(() => !!G["brand-logo"]), J = [
+			"pageEyebrow",
+			"pageTitle",
+			"pageBadgeLabel",
+			"pageBadgeSeverity",
+			"userLabel",
+			"navigation",
+			"navigationLabel",
+			"showSidebar"
+		];
+		function Y(e) {
+			return e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
+		}
+		function X(t) {
+			let n = W.vnode.props;
+			return n !== null && (e(n, t) || e(n, Y(t)));
+		}
+		let Z = l(() => {
+			if (r("SAppShell", "brandTitle", V.brandTitle), V.mode === "public") {
+				for (let e of J) if (X(e)) throw TypeError(`SAppShell: app-only prop '${e}' недоступен в public mode / is unavailable in public mode`);
+				return { mode: "public" };
+			}
+			return {
+				mode: "app",
+				navigation: V.navigation ?? [],
+				navigationLabel: r("SAppShell", "navigationLabel", V.navigationLabel ?? H("navigation.main")),
+				pageBadgeLabel: V.pageBadgeLabel ?? "",
+				pageBadgeSeverity: V.pageBadgeSeverity ?? "info",
+				pageEyebrow: V.pageEyebrow ?? "",
+				pageTitle: r("SAppShell", "pageTitle", V.pageTitle),
+				showSidebar: !X("showSidebar") || V.showSidebar === !0,
+				userLabel: V.userLabel ?? ""
+			};
+		}), Q = l(() => Z.value.mode === "app" && Z.value.showSidebar), $ = n({
+			component: "SAppShell",
+			owner: "application shell root"
+		});
+		return (e, t) => (x(), f("div", y(T($).bindings(), { class: "min-h-screen" }), [p("div", O, [Q.value ? (x(), f("aside", k, [p("div", A, [g(a, { "surface-overflow": "clip" }, {
+			header: D(() => [g(s, {
+				title: _.brandTitle,
+				subtitle: _.brandSubtitle,
+				to: _.brandTo,
+				placement: "sidebar"
+			}, m({ _: 2 }, [q.value ? {
+				name: "logo",
+				fn: D(() => [C(e.$slots, "brand-logo")]),
+				key: "0"
+			} : void 0, K.value ? {
+				name: "icon",
+				fn: D(() => [C(e.$slots, "brand-icon")]),
+				key: "1"
+			} : void 0]), 1032, [
+				"title",
+				"subtitle",
+				"to"
+			])]),
+			actions: D(() => [C(e.$slots, "sidebar-actions")]),
+			default: D(() => [p("nav", {
+				class: "space-y-2 px-2 pb-2",
+				"aria-label": Z.value.mode === "app" ? Z.value.navigationLabel : void 0
+			}, [(x(!0), f(c, null, S(Z.value.mode === "app" ? Z.value.navigation : [], (e) => (x(), u(o, {
+				key: e.key,
+				to: e.to,
+				variant: "navigation",
+				width: "full",
+				active: e.active,
+				"leading-icon": e.icon
+			}, m({
+				default: D(() => [h(w(e.label) + " ", 1)]),
+				_: 2
+			}, [e.badgeLabel ? {
+				name: "trailing",
+				fn: D(() => [g(i, { severity: e.badgeSeverity ?? "secondary" }, {
+					default: D(() => [h(w(e.badgeLabel), 1)]),
+					_: 2
+				}, 1032, ["severity"])]),
+				key: "0"
+			} : void 0]), 1032, [
+				"to",
+				"active",
+				"leading-icon"
+			]))), 128))], 8, j)]),
+			_: 3
+		})])])) : d("", !0), p("div", M, [
+			p("header", { class: b(["mb-6 px-1", Z.value.mode === "app" ? "rounded-[1.4rem] border border-surface-200/80 bg-surface-0/88 px-4 py-3 shadow-sm backdrop-blur dark:border-surface-700 dark:bg-surface-900/74" : "rounded-[var(--s-app-shell-floating-radius)] border border-surface-200/80 bg-surface-0/82 px-4 py-3 shadow-[var(--s-app-shell-floating-shadow)] backdrop-blur dark:border-surface-700 dark:bg-surface-900/72"]) }, [p("div", N, [Z.value.mode === "app" ? (x(), f("div", P, [
+				Z.value.pageEyebrow ? (x(), f("div", F, w(Z.value.pageEyebrow), 1)) : d("", !0),
+				p("div", I, [p("h1", L, w(Z.value.pageTitle), 1), Z.value.pageBadgeLabel ? (x(), u(i, {
+					key: 0,
+					severity: Z.value.pageBadgeSeverity
+				}, {
+					default: D(() => [h(w(Z.value.pageBadgeLabel), 1)]),
+					_: 1
+				}, 8, ["severity"])) : d("", !0)]),
+				Z.value.userLabel ? (x(), f("div", R, w(Z.value.userLabel), 1)) : d("", !0)
+			])) : (x(), u(s, {
+				key: 1,
+				title: _.brandTitle,
+				subtitle: _.brandSubtitle,
+				to: _.brandTo,
+				placement: "header"
+			}, m({ _: 2 }, [q.value ? {
+				name: "logo",
+				fn: D(() => [C(e.$slots, "brand-logo")]),
+				key: "0"
+			} : void 0, K.value ? {
+				name: "icon",
+				fn: D(() => [C(e.$slots, "brand-icon")]),
+				key: "1"
+			} : void 0]), 1032, [
+				"title",
+				"subtitle",
+				"to"
+			])), p("div", z, [C(e.$slots, "header-actions")])])], 2),
+			C(e.$slots, "banner"),
+			p("main", B, [C(e.$slots, "default")])
+		])])], 16));
+	}
+});
+//#endregion
+export { V as default };

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

@@ -0,0 +1,50 @@
+type DockPlacement = 'left' | 'right' | 'bottom';
+type __VLS_Props = {
+    placement: DockPlacement;
+    visible: boolean;
+    size: number;
+    minSize?: number;
+    maxSize?: number;
+    resizeStep?: number;
+    resizing?: boolean;
+    surface?: 'base' | 'subtle' | 'transparent';
+    elevated?: boolean;
+    resizeLabel?: string;
+    resizeTestId?: string;
+    handleVariant?: 'inline' | 'overlay';
+    hideResizeHandleOnNarrow?: boolean;
+    responsiveSize?: 'fixed' | 'fill-on-narrow';
+};
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    resize: (size: number) => any;
+    "resize-start": (pointerEvent: PointerEvent) => any;
+    "resize-end": (size: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onResize?: ((size: number) => any) | undefined;
+    "onResize-start"?: ((pointerEvent: PointerEvent) => any) | undefined;
+    "onResize-end"?: ((size: number) => any) | undefined;
+}>, {
+    minSize: number;
+    surface: "base" | "subtle" | "transparent";
+    resizing: boolean;
+    maxSize: number;
+    resizeStep: number;
+    elevated: boolean;
+    resizeLabel: string;
+    resizeTestId: string;
+    handleVariant: "inline" | "overlay";
+    hideResizeHandleOnNarrow: boolean;
+    responsiveSize: "fixed" | "fill-on-narrow";
+}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,8 @@
+import "../../../assets/src/components/layout/SDockRegion.vue_vue_type_style_index_0_scoped_2932631d_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"]]);
+//#endregion
+export { n as default };

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

@@ -0,0 +1,130 @@
+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";
+//#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({
+	inheritAttrs: !1,
+	__name: "SDockRegion",
+	props: {
+		placement: {},
+		visible: { type: Boolean },
+		size: {},
+		minSize: { default: 0 },
+		maxSize: { default: 4096 },
+		resizeStep: { default: 10 },
+		resizing: {
+			type: Boolean,
+			default: !1
+		},
+		surface: { default: "base" },
+		elevated: {
+			type: Boolean,
+			default: !1
+		},
+		resizeLabel: { default: void 0 },
+		resizeTestId: { default: void 0 },
+		handleVariant: { default: "inline" },
+		hideResizeHandleOnNarrow: {
+			type: Boolean,
+			default: !1
+		},
+		responsiveSize: { default: "fixed" }
+	},
+	emits: [
+		"resize-start",
+		"resize",
+		"resize-end"
+	],
+	setup(d, { emit: S }) {
+		let C = d, { t: w } = e(), T = S, E = g(!1), D = t({
+			component: "SDockRegion",
+			owner: "dock region root"
+		}), O = s(() => ({
+			placement: r("SDockRegion", "placement", C.placement, [
+				"left",
+				"right",
+				"bottom"
+			]),
+			visible: n("SDockRegion", "visible", C.visible),
+			surface: r("SDockRegion", "surface", C.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);
+		}
+		function F(e) {
+			E.value = !1, T("resize-end", e);
+		}
+		let I = s(() => O.value.placement === "bottom" ? "contents" : ["flex min-h-0 flex-shrink-0", { relative: O.value.handleVariant === "overlay" }]), L = s(() => [
+			"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",
+			{
+				"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
+			}
+		]), R = s(() => {
+			if (![
+				C.size,
+				C.minSize,
+				C.maxSize,
+				C.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` };
+		});
+		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, {
+			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
+		}, null, 8, [
+			"orientation",
+			"value-direction",
+			"variant",
+			"label",
+			"data-test-id",
+			"hidden-on-narrow",
+			"resizing",
+			"value",
+			"min",
+			"max",
+			"step"
+		])) : (h(), u("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);
+	}
+});
+//#endregion
+export { S as default };

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

@@ -0,0 +1,43 @@
+export type SResizeHandleHitbox = 'compact' | 'standard' | 'spacious';
+type __VLS_Props = {
+    orientation: 'vertical' | 'horizontal';
+    variant?: 'inline' | 'overlay';
+    valueDirection?: 'forward' | 'reverse';
+    label: string;
+    dataTestId?: string;
+    resizing?: boolean;
+    hiddenOnNarrow?: boolean;
+    disabled?: boolean;
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    pointerScale?: number;
+    /** Семантическая толщина pointer/focus hitbox; visual divider остаётся однопиксельным. */
+    hitbox?: SResizeHandleHitbox;
+};
+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;
+}, 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;
+}>, {
+    value: number;
+    max: number;
+    min: number;
+    orientation: "vertical" | "horizontal";
+    step: number;
+    disabled: boolean;
+    variant: "inline" | "overlay";
+    valueDirection: "forward" | "reverse";
+    dataTestId: string;
+    resizing: boolean;
+    hiddenOnNarrow: boolean;
+    pointerScale: number;
+    hitbox: SResizeHandleHitbox;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,8 @@
+import "../../../assets/src/components/layout/SResizeHandle.vue_vue_type_style_index_0_scoped_90cc655e_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"]]);
+//#endregion
+export { n as default };

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

@@ -0,0 +1,175 @@
+import { useOwnedAttrs as e } from "../../internal/ownedAttrs.js";
+import { validateExactString as t, validateNonEmptyString as n } from "../../internal/runtimeContract.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";
+//#region src/components/layout/SResizeHandle.vue?vue&type=script&setup=true&lang.ts
+var h = [
+	"aria-orientation",
+	"aria-label",
+	"aria-valuenow",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-disabled",
+	"disabled",
+	"title",
+	"data-testid",
+	"data-resizing",
+	"data-hidden-on-narrow",
+	"data-hitbox",
+	"data-orientation",
+	"data-variant"
+], g = /*@__PURE__*/ c({
+	inheritAttrs: !1,
+	__name: "SResizeHandle",
+	props: {
+		orientation: { default: "vertical" },
+		variant: { default: "inline" },
+		valueDirection: { default: "forward" },
+		label: {},
+		dataTestId: { default: void 0 },
+		resizing: {
+			type: Boolean,
+			default: !1
+		},
+		hiddenOnNarrow: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		value: { default: 50 },
+		min: { default: 0 },
+		max: { default: 100 },
+		step: { default: 10 },
+		pointerScale: { default: 1 },
+		hitbox: { default: void 0 }
+	},
+	emits: [
+		"resize-start",
+		"resize",
+		"resize-end"
+	],
+	setup(c, { emit: g }) {
+		let _ = [
+			"compact",
+			"standard",
+			"spacious"
+		], v = c, y = g, b = p(null), x = e({
+			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
+		}));
+		function E() {
+			if (![
+				v.value,
+				v.min,
+				v.max,
+				v.step,
+				v.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 должен быть больше нуля");
+		}
+		function D(e) {
+			return Math.min(v.max, Math.max(v.min, e));
+		}
+		function O(e) {
+			return v.orientation === "vertical" ? e.clientX : e.clientY;
+		}
+		function k(e) {
+			let t = b.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));
+		}
+		function A(e) {
+			let t = b.value;
+			t && t.pointerId === e.pointerId && M(!0);
+		}
+		function j(e) {
+			let t = b.value;
+			t && t.pointerId === e.pointerId && M(!0);
+		}
+		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 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" });
+			try {
+				t.focus({ preventScroll: !0 }), t.setPointerCapture?.(e.pointerId), e.preventDefault();
+			} catch (e) {
+				throw n.release(), e;
+			}
+			b.value = {
+				pointerId: e.pointerId,
+				startCoordinate: O(e),
+				startValue: v.value,
+				latestValue: v.value,
+				target: t,
+				interactionLease: n
+			}, window.addEventListener("pointermove", k), window.addEventListener("pointerup", A), window.addEventListener("pointercancel", A), t.addEventListener("lostpointercapture", j), y("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)));
+		}
+		d(() => {
+			M(!1);
+		});
+		let F = 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(), {
+			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-disabled": c.disabled || void 0,
+			disabled: c.disabled,
+			title: C.value,
+			"data-testid": c.dataTestId,
+			"data-resizing": S.value || void 0,
+			"data-hidden-on-narrow": c.hiddenOnNarrow || void 0,
+			"data-hitbox": w.value,
+			"data-orientation": c.orientation,
+			"data-variant": c.variant,
+			class: F.value,
+			onPointerdown: N,
+			onKeydown: P
+		}), [s("span", {
+			"aria-hidden": "true",
+			class: u(I.value)
+		}, null, 2)], 16, h));
+	}
+});
+//#endregion
+export { g as default };

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

@@ -0,0 +1,37 @@
+import { Component } from 'vue';
+import { SMenuEntry, SMenuSelectableEntry } from '../shared/controls/menu.ts';
+import { BadgeSeverity } from '../shared/data-display/SBadge.vue';
+type __VLS_Props = {
+    title: string;
+    icon: Component;
+    badge?: string | number;
+    badgeSeverity?: BadgeSeverity;
+    active?: boolean;
+    offsetTop?: boolean;
+    disabled?: boolean;
+    showLabel?: boolean;
+    shortcut?: string | null;
+    contextMenuItems?: readonly SMenuEntry[];
+    contextMenuTrigger?: 'contextmenu' | 'click' | 'both';
+    autofocus?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+    "context-menu-select": (entry: SMenuSelectableEntry) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    "onContext-menu-select"?: ((entry: SMenuSelectableEntry) => any) | undefined;
+}>, {
+    active: boolean;
+    autofocus: boolean;
+    disabled: boolean;
+    badge: string | number;
+    badgeSeverity: BadgeSeverity;
+    shortcut: string | null;
+    showLabel: boolean;
+    offsetTop: boolean;
+    contextMenuItems: readonly SMenuEntry[];
+    contextMenuTrigger: "contextmenu" | "click" | "both";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,5 @@
+import e from "./SSideMenuButton.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/layout/SSideMenuButton.vue
+var t = e;
+//#endregion
+export { t as default };