@pgcorp/ui-kit 0.13.0 → 0.15.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_ddcc5fbb_scoped_ddcc5fbb_lang.css";
+import "../../../../assets/src/components/shared/controls/SMenuSurface.css_vue_type_style_index_0_src_d2b7d71b_scoped_d2b7d71b_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-ddcc5fbb"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-d2b7d71b"]]);
 //#endregion
 export { n as default };

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

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