@pgcorp/ui-kit 0.12.0 → 0.14.0

package/dist/src/components/shared/controls/SListboxOption.vue.d.ts

@@ -10,6 +10,9 @@ export interface Props {
     id?: string;
     active?: boolean;
     focusOnSelect?: boolean;
+    position?: number;
+    setSize?: number;
+    virtualOffset?: number;
 }
 declare const __VLS_export: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: () => any;
@@ -23,7 +26,10 @@ declare const __VLS_export: import('vue').DefineComponent<Props, {}, {}, {}, {},
     title: string;
     marker: MarkerContract;
     disabled: boolean;
+    position: number;
+    setSize: number;
     appearance: "select" | "color";
+    virtualOffset: number;
     focusOnSelect: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/src/components/shared/controls/SListboxOption.vue.js

@@ -1,8 +1,8 @@
-import "../../../../assets/src/components/shared/controls/SListboxOption.css_vue_type_style_index_0_src_77c399b4_scoped_77c399b4_lang.css";
+import "../../../../assets/src/components/shared/controls/SListboxOption.css_vue_type_style_index_0_src_59c9c538_scoped_59c9c538_lang.css";
 import e from "../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./SListboxOption.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                            */
 //#region src/components/shared/controls/SListboxOption.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-77c399b4"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-59c9c538"]]);
 //#endregion
 export { n as default };

package/dist/src/components/shared/controls/SListboxOption.vue_vue_type_script_setup_true_lang.js

@@ -2,17 +2,19 @@ import { Check as e } from "../../icons/_internal/generatedSputnigUiIconComponen
 import { useInteractiveLeafRegistration as t } from "../../../internal/passiveContentContract.js";
 import n from "./SMarker.vue.js";
 import { listboxContextKey as r } from "../_internal/listboxContext.js";
-import { createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, inject as u, onBeforeUnmount as d, onMounted as f, openBlock as p, ref as m, toDisplayString as h, unref as g, withModifiers as _ } from "vue";
+import { createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, inject as u, normalizeStyle as d, onBeforeUnmount as f, onMounted as p, openBlock as m, ref as h, toDisplayString as g, unref as _, withModifiers as v } from "vue";
 //#region src/components/shared/controls/SListboxOption.vue?vue&type=script&setup=true&lang.ts
-var v = [
+var y = [
 	"id",
 	"data-appearance",
 	"data-focused",
 	"title",
 	"aria-label",
 	"aria-selected",
-	"aria-disabled"
-], y = ["data-appearance"], b = ["data-selected"], x = ["data-appearance"], S = /*@__PURE__*/ l({
+	"aria-disabled",
+	"aria-posinset",
+	"aria-setsize"
+], b = ["data-appearance"], x = ["data-selected"], S = ["data-appearance"], C = /*@__PURE__*/ l({
 	inheritAttrs: !1,
 	__name: "SListboxOption",
 	props: {
@@ -34,66 +36,77 @@ var v = [
 		focusOnSelect: {
 			type: Boolean,
 			default: !0
-		}
+		},
+		position: { default: void 0 },
+		setSize: { default: void 0 },
+		virtualOffset: { default: void 0 }
 	},
 	emits: ["select", "hover"],
-	setup(l, { emit: S }) {
-		let C = l, w = S;
+	setup(l, { emit: C }) {
+		let w = l, T = C;
 		t({ owner: "SListboxOption" });
-		let T = u(r);
-		if (!T) throw Error("SListboxOption must be used inside SListbox");
-		let E = m(!1), D = m(null), O, k = () => {
-			C.disabled || (C.focusOnSelect && D.value?.focus(), w("select"));
-		}, A = (e) => {
-			C.focusOnSelect || e.preventDefault();
+		let E = u(r);
+		if (!E) throw Error("SListboxOption must be used inside SListbox");
+		let D = h(!1), O = h(null), k, A = () => {
+			w.disabled || (w.focusOnSelect && O.value?.focus(), T("select"));
+		}, j = (e) => {
+			w.focusOnSelect || e.preventDefault();
 		};
-		return f(() => {
-			let e = D.value;
+		return p(() => {
+			let e = O.value;
 			if (!(e instanceof HTMLLIElement)) throw Error("SListboxOption: option element is unavailable");
-			O = T.register({
+			k = E.register({
 				element: e,
-				token: C.registrationToken,
-				activate: k,
-				disabled: () => C.disabled,
-				label: () => C.label,
-				selected: () => C.selected
+				token: w.registrationToken,
+				activate: A,
+				disabled: () => w.disabled,
+				label: () => w.label,
+				selected: () => w.selected
 			});
-		}), d(() => O?.()), (t, r) => (p(), o("li", {
+		}), f(() => k?.()), (t, r) => (m(), o("li", {
 			ref_key: "optionRef",
-			ref: D,
+			ref: O,
 			id: l.id,
 			class: "s-listbox-option__control",
 			"data-appearance": l.appearance,
-			"data-focused": E.value || l.active || void 0,
+			"data-focused": D.value || l.active || void 0,
+			style: d(l.virtualOffset === void 0 ? void 0 : {
+				position: "absolute",
+				top: `${l.virtualOffset}px`,
+				left: "0",
+				right: "0"
+			}),
 			title: l.title ?? l.label,
 			"aria-label": l.appearance === "color" ? l.label : void 0,
 			role: "option",
 			"aria-selected": l.selected,
 			"aria-disabled": l.disabled || void 0,
+			"aria-posinset": l.position,
+			"aria-setsize": l.setSize,
 			tabindex: -1,
-			onFocus: r[0] ||= (e) => E.value = !0,
-			onBlur: r[1] ||= (e) => E.value = !1,
-			onMousedown: A,
-			onMouseenter: r[2] ||= (e) => w("hover"),
-			onClick: _(k, ["stop"])
+			onFocus: r[0] ||= (e) => D.value = !0,
+			onBlur: r[1] ||= (e) => D.value = !1,
+			onMousedown: j,
+			onMouseenter: r[2] ||= (e) => T("hover"),
+			onClick: v(A, ["stop"])
 		}, [s("span", {
 			class: "s-listbox-option__main",
 			"data-appearance": l.appearance
-		}, [l.marker ? (p(), i(n, {
+		}, [l.marker ? (m(), i(n, {
 			key: 0,
 			marker: l.marker,
 			size: l.appearance === "color" ? "lg" : "sm"
-		}, null, 8, ["marker", "size"])) : a("", !0), l.appearance === "select" ? (p(), o("span", {
+		}, null, 8, ["marker", "size"])) : a("", !0), l.appearance === "select" ? (m(), o("span", {
 			key: 1,
 			class: "s-listbox-option__label",
 			"data-selected": l.selected || void 0
-		}, h(l.label), 9, b)) : a("", !0)], 8, y), l.selected ? (p(), o("span", {
+		}, g(l.label), 9, x)) : a("", !0)], 8, b), l.selected ? (m(), o("span", {
 			key: 0,
 			class: "s-listbox-option__check",
 			"data-appearance": l.appearance,
 			"aria-hidden": "true"
-		}, [c(g(e))], 8, x)) : a("", !0)], 40, v));
+		}, [c(_(e))], 8, S)) : a("", !0)], 44, y));
 	}
 });
 //#endregion
-export { S as default };
+export { C as default };

package/dist/src/components/shared/controls/SMenuSurface.vue.d.ts

@@ -17,15 +17,15 @@ export interface SMenuSurfaceApi {
 declare const __VLS_export: import('vue').DefineComponent<Props, SMenuSurfaceApi, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (item: SMenuSelectableEntry, event: SMenuActivationEvent) => any;
     escape: () => any;
-    "focus-exit": (event: FocusEvent) => any;
     tab: (event: KeyboardEvent) => any;
+    "focus-exit": (event: FocusEvent) => any;
     "submenu-back": () => any;
     "dismiss-tree": () => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     onSelect?: ((item: SMenuSelectableEntry, event: SMenuActivationEvent) => any) | undefined;
     onEscape?: (() => any) | undefined;
-    "onFocus-exit"?: ((event: FocusEvent) => any) | undefined;
     onTab?: ((event: KeyboardEvent) => any) | undefined;
+    "onFocus-exit"?: ((event: FocusEvent) => any) | undefined;
     "onSubmenu-back"?: (() => any) | undefined;
     "onDismiss-tree"?: (() => any) | undefined;
 }>, {

package/dist/src/components/shared/controls/SMenuSurface.vue.js

@@ -1,8 +1,8 @@
-import "../../../../assets/src/components/shared/controls/SMenuSurface.css_vue_type_style_index_0_src_bc7c7be4_scoped_bc7c7be4_lang.css";
+import "../../../../assets/src/components/shared/controls/SMenuSurface.css_vue_type_style_index_0_src_84109ad9_scoped_84109ad9_lang.css";
 import e from "../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./SMenuSurface.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                          */
 //#region src/components/shared/controls/SMenuSurface.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-bc7c7be4"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-84109ad9"]]);
 //#endregion
 export { n as default };

package/dist/src/components/shared/controls/SMenuSurface.vue_vue_type_script_setup_true_lang.js

@@ -1,19 +1,22 @@
 import { useOwnedAttrs as e } from "../../../internal/ownedAttrs.js";
 import { useInteractiveLeafRegistration as t } from "../../../internal/passiveContentContract.js";
 import { useMenuLayer as n } from "../../../internal/useMenuLayer.js";
-import r from "../_internal/SMenuLayer.vue.js";
-import { menuContextKey as i, menuDepthKey as a } from "../_internal/menuContext.js";
-import ee from "../_internal/SMenuItem.vue.js";
-import o from "../_internal/SMenuSeparator.vue.js";
-import { validateSMenuEntries as s } from "./menu.js";
-import { Fragment as c, Teleport as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createVNode as m, defineComponent as h, inject as g, mergeProps as _, nextTick as v, onBeforeUnmount as y, onMounted as b, openBlock as x, provide as S, ref as C, renderList as te, resolveComponent as ne, toRef as re, unref as w, watch as ie, withCtx as T } from "vue";
+import { menuContextKey as r, menuDepthKey as i, menuViewportKey as a } from "../_internal/menuContext.js";
+import ee from "../_internal/SMenuLayer.vue.js";
+import o from "../_internal/SMenuItem.vue.js";
+import te from "../_internal/SMenuSeparator.vue.js";
+import { validateSMenuEntries as ne } from "./menu.js";
+import { Fragment as s, Teleport as re, computed as c, createBlock as l, createCommentVNode as ie, createElementBlock as u, createElementVNode as d, createVNode as ae, defineComponent as f, inject as p, mergeProps as oe, nextTick as m, onBeforeUnmount as se, onMounted as ce, openBlock as h, provide as g, ref as _, renderList as v, resolveComponent as le, toDisplayString as ue, toRef as de, unref as y, watch as fe, withCtx as b } from "vue";
 //#region src/components/shared/controls/SMenuSurface.vue?vue&type=script&setup=true&lang.ts
-var E = [
+var x = [
 	"data-density",
 	"data-orientation",
 	"aria-label",
 	"aria-orientation"
-], D = /*@__PURE__*/ h({
+], S = ["aria-label", "data-menu-group-id"], pe = {
+	class: "s-menu-group__label",
+	"aria-hidden": "true"
+}, C = /*@__PURE__*/ f({
 	inheritAttrs: !1,
 	__name: "SMenuSurface",
 	props: {
@@ -35,193 +38,237 @@ var E = [
 		"submenu-back",
 		"dismiss-tree"
 	],
-	setup(h, { expose: D, emit: O }) {
-		let k = h, A = O, j = e({
+	setup(f, { expose: C, emit: me }) {
+		let w = f, T = me, he = e({
 			component: "SMenuSurface",
 			owner: "menu root"
 		});
 		t({ owner: "SMenuSurface" });
-		let M = g(a, -1) + 1;
-		S(a, M);
-		let N = C(null), P = /* @__PURE__ */ new Map();
-		S(i, {
-			density: re(k, "density"),
+		let E = p(i, -1) + 1;
+		g(i, E);
+		let D = _(null), O = _(null), k = p(a, null), A = null, j = /* @__PURE__ */ new Map();
+		g(r, {
+			density: de(w, "density"),
 			register: (e) => {
-				if (P.has(e.entryId)) throw Error(`SMenuSurface: duplicate mounted entry id '${e.entryId}'`);
-				return P.set(e.entryId, e), () => P.delete(e.entryId);
+				if (j.has(e.entryId)) throw Error(`SMenuSurface: duplicate mounted entry id '${e.entryId}'`);
+				return j.set(e.entryId, e), () => j.delete(e.entryId);
 			}
 		});
-		let F = C(null), I = C(!0), L = C(null), R = C(null), z = u(() => L.value?.getElement() ?? null), { position: B, zIndex: V, open: H, close: U } = n(z, { onDismiss: (e) => {
-			F.value = null, e === "outside" && A("dismiss-tree");
-		} }), W = u(() => {
-			let e = k.items.find((e) => e.id === F.value);
+		let M = _(null), N = _(!0), P = _(null), F = _(null), I = c(() => P.value?.getElement() ?? null), { position: L, availableSize: ge, zIndex: _e, open: ve, close: R } = n(P, {
+			onRetire: () => {
+				M.value = null;
+			},
+			onDismiss: (e) => {
+				M.value = null, e === "outside" && T("dismiss-tree");
+			}
+		}), ye = (e) => e.flatMap((e) => e.kind === "group" ? [...e.children] : e.kind === "separator" ? [] : [e]), z = (e) => ye(w.items).find((t) => t.id === e), B = c(() => {
+			let e = M.value ? z(M.value) : void 0;
 			return e?.kind === "submenu" ? e : null;
-		}), G = "", K = null, q = () => [...P.values()].filter((e) => e.element().isConnected).sort((e, t) => {
+		}), V = "", H = null, U = () => [...j.values()].filter((e) => e.element().isConnected).sort((e, t) => {
 			let n = e.element().compareDocumentPosition(t.element());
 			return n & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : n & Node.DOCUMENT_POSITION_PRECEDING ? 1 : 0;
-		}), J = (e, t) => {
+		}), W = (e, t) => {
 			for (let t of e) t.setTabStop(!1);
 			let n = e[t];
-			n && (n.setTabStop(!0), n.focus());
-		}, Y = () => {
-			let e = q();
-			e.length > 0 && J(e, 0);
-		}, X = () => {
-			let e = q();
-			e.length > 0 && J(e, e.length - 1);
-		}, ae = () => {
-			if (typeof k.label != "string" || !k.label.trim()) throw TypeError("SMenuSurface: label must be a non-empty string");
-			s(k.items);
-		}, oe = (e) => {
-			let t = q();
+			n && (n.setTabStop(!0), n.focus(), $());
+		}, G = () => {
+			let e = U();
+			e.length > 0 && W(e, 0);
+		}, K = () => {
+			let e = U();
+			e.length > 0 && W(e, e.length - 1);
+		}, q = () => {
+			if (typeof w.label != "string" || !w.label.trim()) throw TypeError("SMenuSurface: label must be a non-empty string");
+			ne(w.items);
+		}, be = (e) => {
+			let t = U();
 			if (t.length === 0) return;
 			let n = t.findIndex((e) => e.isFocused());
-			J(t, ((n < 0 ? e === 1 ? -1 : 0 : n) + e + t.length) % t.length);
-		}, se = (e) => {
+			W(t, ((n < 0 ? e === 1 ? -1 : 0 : n) + e + t.length) % t.length);
+		}, xe = (e) => {
 			let t = e.toLocaleLowerCase();
-			G += t, K && clearTimeout(K), K = setTimeout(() => {
-				G = "", K = null;
+			V += t, H && clearTimeout(H), H = setTimeout(() => {
+				V = "", H = null;
 			}, 500);
-			let n = [...G].every((e) => e === t) ? t : G, r = q();
+			let n = [...V].every((e) => e === t) ? t : V, r = U();
 			if (r.length === 0) return;
 			let i = r.findIndex((e) => e.isFocused()), a = [...r.slice(i + 1), ...r.slice(0, i + 1)].find((e) => e.label().trim().toLocaleLowerCase().startsWith(n));
-			a && J(r, r.indexOf(a));
+			a && W(r, r.indexOf(a));
 		};
-		async function Z(e, t) {
-			let n = k.items.find((t) => t.id === e), r = P.get(e);
+		async function J(e, t) {
+			let n = z(e), r = j.get(e);
 			if (n?.kind === "submenu" && !n.disabled && r) {
-				if (F.value === e) {
-					t && await v(() => R.value?.focusFirst());
+				if (M.value === e) {
+					t && await m(() => F.value?.focusFirst());
 					return;
 				}
-				F.value && U("outside"), I.value = t, F.value = e, await H({
+				M.value && R("outside"), N.value = t, M.value = e, await ve({
 					type: "element",
 					element: r.element(),
 					align: "left",
 					placement: "inline"
-				}, r.element()), t && await v(() => R.value?.focusFirst());
+				}, r.element()), t && await m(() => F.value?.focusFirst());
 			}
 		}
-		function Q(e) {
-			F.value &&= (U(e), null);
+		function Y(e) {
+			M.value &&= (R(e), null);
+		}
+		function X(e) {
+			e.kind === "submenu" && !e.disabled ? J(e.id, !1) : M.value && Y("outside");
 		}
-		function ce(e) {
-			e.kind === "submenu" && !e.disabled ? Z(e.id, !1) : F.value && Q("outside");
+		function Z(e, t) {
+			e.kind === "submenu" || e.disabled || T("select", e, t);
 		}
-		function le(e, t) {
-			e.kind === "submenu" || e.disabled || A("select", e, t);
+		function Se(e, t) {
+			T("select", e, t);
 		}
-		function ue(e, t) {
-			A("select", e, t);
+		function Q() {
+			return U().find((e) => e.isFocused());
 		}
 		function $() {
-			return q().find((e) => e.isFocused());
+			let e = D.value, t = Q();
+			if (!e || !t || e.clientHeight === 0 || e.clientWidth === 0) return;
+			let n = e.getBoundingClientRect(), r = t.element().getBoundingClientRect();
+			r.top < n.top ? e.scrollTop += r.top - n.top : r.bottom > n.bottom && (e.scrollTop += r.bottom - n.bottom), r.left < n.left ? e.scrollLeft += r.left - n.left : r.right > n.right && (e.scrollLeft += r.right - n.right);
 		}
-		let de = (e) => {
+		let Ce = (e) => {
 			let t = e.target;
-			if (e.currentTarget !== t && !q().some((e) => e.ownsEventTarget(t))) return;
+			if (e.currentTarget !== t && !U().some((e) => e.ownsEventTarget(t))) return;
 			if (e.key === "Tab") {
-				A("tab", e);
+				T("tab", e);
 				return;
 			}
 			if (e.key === "Escape") {
-				e.preventDefault(), A("escape");
+				e.preventDefault(), T("escape");
 				return;
 			}
-			let n = k.orientation === "horizontal" ? "ArrowRight" : "ArrowDown", r = k.orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
-			if (k.orientation === "vertical" && (e.key === "ArrowRight" || e.key === "ArrowLeft")) {
-				let t = $();
-				e.preventDefault(), e.key === "ArrowRight" && t?.hasSubmenu() ? Z(t.entryId, !0) : e.key === "ArrowLeft" && M > 0 && A("submenu-back");
+			let n = w.orientation === "horizontal" ? "ArrowRight" : "ArrowDown", r = w.orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+			if (w.orientation === "vertical" && (e.key === "ArrowRight" || e.key === "ArrowLeft")) {
+				let t = Q();
+				e.preventDefault(), e.key === "ArrowRight" && t?.hasSubmenu() ? J(t.entryId, !0) : e.key === "ArrowLeft" && E > 0 && T("submenu-back");
 				return;
 			}
 			if (e.key === n || e.key === r) {
-				e.preventDefault(), oe(e.key === n ? 1 : -1);
+				e.preventDefault(), be(e.key === n ? 1 : -1);
 				return;
 			}
-			if (k.orientation === "horizontal" && e.key === "ArrowDown") {
-				let t = $();
-				t?.hasSubmenu() && (e.preventDefault(), Z(t.entryId, !0));
+			if (w.orientation === "horizontal" && e.key === "ArrowDown") {
+				let t = Q();
+				t?.hasSubmenu() && (e.preventDefault(), J(t.entryId, !0));
 				return;
 			}
 			if (e.key === "Home" || e.key === "End") {
-				e.preventDefault(), e.key === "Home" ? Y() : X();
+				e.preventDefault(), e.key === "Home" ? G() : K();
 				return;
 			}
 			if (e.key === "Enter" || e.key === " ") {
-				let t = $();
+				let t = Q();
 				t && t.activate(e);
 				return;
 			}
-			e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey && se(e.key);
-		}, fe = (e) => {
+			e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey && xe(e.key);
+		}, we = (e) => {
 			let t = e.relatedTarget;
-			t instanceof Node && (N.value?.contains(t) || z.value?.contains(t)) || A("focus-exit", e);
+			t instanceof Node && (D.value?.contains(t) || I.value?.contains(t)) || T("focus-exit", e);
 		};
-		return b(() => {
-			k.autofocus && v(k.initialFocus === "last" ? X : Y);
-		}), ie(() => [k.label, k.items], () => {
-			ae(), F.value && !W.value && Q("outside");
+		return ce(() => {
+			if (k) {
+				let e = D.value, t = O.value;
+				if (!e || !t) throw Error("SMenuSurface: native surface/content are unavailable after mounting");
+				A = k.register({
+					surface: e,
+					content: t,
+					revealFocusedItem: $
+				});
+			}
+			w.autofocus && m(w.initialFocus === "last" ? K : G);
+		}), fe(() => [w.label, w.items], () => {
+			q(), M.value && !B.value && Y("outside");
 		}, {
 			immediate: !0,
 			deep: !0
-		}), y(() => {
-			K && clearTimeout(K);
-		}), D({
-			focusFirst: Y,
-			focusLast: X
+		}), se(() => {
+			A?.(), A = null, H && clearTimeout(H);
+		}), C({
+			focusFirst: G,
+			focusLast: K
 		}), (e, t) => {
-			let n = ne("SMenuSurface", !0);
-			return x(), p("div", _({
+			let n = le("SMenuSurface", !0);
+			return h(), u("div", oe({
 				ref_key: "surfaceRef",
-				ref: N
-			}, w(j).bindings(), {
+				ref: D
+			}, y(he).bindings(), {
 				class: "s-menu-surface",
-				"data-density": h.density,
-				"data-orientation": h.orientation,
-				"data-menu-depth": M,
+				"data-density": f.density,
+				"data-orientation": f.orientation,
+				"data-menu-depth": E,
 				role: "menu",
-				"aria-label": h.label,
-				"aria-orientation": h.orientation,
-				onKeydown: de,
-				onFocusout: fe
-			}), [(x(!0), p(c, null, te(h.items, (e) => (x(), p(c, { key: e.id }, [e.kind === "separator" ? (x(), d(o, {
+				"aria-label": f.label,
+				"aria-orientation": f.orientation,
+				onKeydown: Ce,
+				onFocusout: we
+			}), [d("div", {
+				ref_key: "contentRef",
+				ref: O,
+				class: "s-menu-surface__content"
+			}, [(h(!0), u(s, null, v(f.items, (e) => (h(), u(s, { key: e.id }, [e.kind === "separator" ? (h(), l(te, {
 				key: 0,
 				"entry-id": e.id
-			}, null, 8, ["entry-id"])) : (x(), d(ee, {
+			}, null, 8, ["entry-id"])) : e.kind === "group" ? (h(), u("div", {
 				key: 1,
+				class: "s-menu-group",
+				role: "group",
+				"aria-label": e.label,
+				"data-menu-group-id": e.id
+			}, [d("div", pe, ue(e.label), 1), (h(!0), u(s, null, v(e.children, (e) => (h(), l(o, {
+				key: e.id,
+				entry: e,
+				"submenu-open": B.value?.id === e.id,
+				onSelect: (t) => Z(e, t),
+				onOpenSubmenu: (t) => J(e.id, !0),
+				onPointerIntent: (t) => X(e)
+			}, null, 8, [
+				"entry",
+				"submenu-open",
+				"onSelect",
+				"onOpenSubmenu",
+				"onPointerIntent"
+			]))), 128))], 8, S)) : (h(), l(o, {
+				key: 2,
 				entry: e,
-				"submenu-open": W.value?.id === e.id,
-				onSelect: (t) => le(e, t),
-				onOpenSubmenu: (t) => Z(e.id, !0),
-				onPointerIntent: (t) => ce(e)
+				"submenu-open": B.value?.id === e.id,
+				onSelect: (t) => Z(e, t),
+				onOpenSubmenu: (t) => J(e.id, !0),
+				onPointerIntent: (t) => X(e)
 			}, null, 8, [
 				"entry",
 				"submenu-open",
 				"onSelect",
 				"onOpenSubmenu",
 				"onPointerIntent"
-			]))], 64))), 128)), (x(), d(l, { to: "body" }, [W.value ? (x(), d(r, {
+			]))], 64))), 128))], 512), (h(), l(re, { to: "body" }, [B.value ? (h(), l(ee, {
 				key: 0,
 				ref_key: "submenuLayerRef",
-				ref: L,
+				ref: P,
 				kind: "submenu",
-				"landmark-label": `${h.label}: ${W.value.label}`,
-				position: w(B),
-				"z-index": w(V)
+				"landmark-label": `${f.label}: ${B.value.label}`,
+				position: y(L),
+				"available-size": y(ge),
+				"z-index": y(_e)
 			}, {
-				default: T(() => [m(n, {
+				default: b(() => [ae(n, {
 					ref_key: "submenuSurfaceRef",
-					ref: R,
-					label: `${h.label}: ${W.value.label}`,
-					items: W.value.children,
-					density: h.density,
+					ref: F,
+					label: `${f.label}: ${B.value.label}`,
+					items: B.value.children,
+					density: f.density,
 					orientation: "vertical",
-					autofocus: I.value,
-					onEscape: t[0] ||= (e) => Q("escape"),
-					onSubmenuBack: t[1] ||= (e) => Q("escape"),
-					onDismissTree: t[2] ||= (e) => A("dismiss-tree"),
-					onSelect: ue,
-					onTab: t[3] ||= (e) => A("tab", e)
+					autofocus: N.value,
+					onEscape: t[0] ||= (e) => Y("escape"),
+					onSubmenuBack: t[1] ||= (e) => Y("escape"),
+					onDismissTree: t[2] ||= (e) => T("dismiss-tree"),
+					onSelect: Se,
+					onTab: t[3] ||= (e) => T("tab", e)
 				}, null, 8, [
 					"label",
 					"items",
@@ -232,10 +279,11 @@ var E = [
 			}, 8, [
 				"landmark-label",
 				"position",
+				"available-size",
 				"z-index"
-			])) : f("", !0)]))], 16, E);
+			])) : ie("", !0)]))], 16, x);
 		};
 	}
 });
 //#endregion
-export { D as default };
+export { C as default };

package/dist/src/components/shared/controls/SRange.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
-import { mergeIdReferences as e, useOwnedAttrs as t } from "../../../internal/ownedAttrs.js";
-import { resolveOptionalDomId as n } from "../../../internal/runtimeContract.js";
+import { resolveOptionalDomId as e } from "../../../internal/runtimeContract.js";
+import { mergeIdReferences as t, useOwnedAttrs as n } from "../../../internal/ownedAttrs.js";
 import { useInteractiveLeafRegistration as r } from "../../../internal/passiveContentContract.js";
 import i from "./SField.vue.js";
 import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, mergeProps as d, openBlock as f, toDisplayString as p, unref as m, useId as h, withCtx as g } from "vue";
@@ -67,7 +67,7 @@ var _ = { class: "s-range" }, v = [
 			let e = C("modelValue", x.modelValue);
 			if (e < w.value || e > T.value) throw RangeError("SRange: modelValue должен находиться внутри [min, max] / must be within [min, max]");
 			return e;
-		}), O = h(), k = a(() => n("SRange", "id", x.id, `s-range-${O}`)), A = t({
+		}), O = h(), k = a(() => e("SRange", "id", x.id, `s-range-${O}`)), A = n({
 			component: "SRange",
 			owner: "native range input"
 		});
@@ -82,7 +82,7 @@ var _ = { class: "s-range" }, v = [
 			let n = Number(t.value);
 			C("input value", n), S("update:modelValue", n);
 		}
-		return (t, n) => (f(), o(i, {
+		return (e, n) => (f(), o(i, {
 			"control-id": k.value,
 			label: u.label,
 			disabled: u.disabled,
@@ -92,24 +92,24 @@ var _ = { class: "s-range" }, v = [
 			"error-message": u.errorMessage,
 			invalid: u.invalid
 		}, {
-			default: g((t) => [l("div", _, [l("input", d(m(A).bindings(), {
-				id: t.controlId,
+			default: g((e) => [l("div", _, [l("input", d(m(A).bindings(), {
+				id: e.controlId,
 				class: "s-range__input",
 				type: "range",
 				min: w.value,
 				max: T.value,
 				step: E.value,
 				value: D.value,
-				disabled: t.disabled,
-				"aria-invalid": t.invalid || void 0,
-				"aria-readonly": t.readonly || void 0,
-				"aria-required": t.required || void 0,
-				"aria-describedby": m(e)(m(A).string("aria-describedby"), t.describedBy),
+				disabled: e.disabled,
+				"aria-invalid": e.invalid || void 0,
+				"aria-readonly": e.readonly || void 0,
+				"aria-required": e.required || void 0,
+				"aria-describedby": m(t)(m(A).string("aria-describedby"), e.describedBy),
 				onInput: j
 			}), null, 16, v), u.showValue ? (f(), c("output", {
 				key: 0,
 				class: "s-range__value",
-				for: t.controlId
+				for: e.controlId
 			}, p(D.value), 9, y)) : s("", !0)])]),
 			_: 1
 		}, 8, [