@pgcorp/ui-kit 0.13.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_ddcc5fbb_scoped_ddcc5fbb_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-ddcc5fbb"]]);
+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,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 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 C = [
+var x = [
 	"data-density",
 	"data-orientation",
 	"aria-label",
 	"aria-orientation"
-], ue = ["aria-label", "data-menu-group-id"], de = {
+], S = ["aria-label", "data-menu-group-id"], pe = {
 	class: "s-menu-group__label",
 	"aria-hidden": "true"
-}, w = /*@__PURE__*/ p({
+}, C = /*@__PURE__*/ f({
 	inheritAttrs: !1,
 	__name: "SMenuSurface",
 	props: {
@@ -38,212 +38,237 @@ var C = [
 		"submenu-back",
 		"dismiss-tree"
 	],
-	setup(p, { expose: w, emit: T }) {
-		let E = p, D = T, fe = e({
+	setup(f, { expose: C, emit: me }) {
+		let w = f, 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 = 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 (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 = _(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;
-		}), U = "", W = null, G = () => [...A.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;
-		}), K = (e, t) => {
+		}), W = (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(), $());
+		}, G = () => {
+			let e = U();
+			e.length > 0 && W(e, 0);
+		}, K = () => {
+			let e = U();
+			e.length > 0 && W(e, e.length - 1);
 		}, 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();
+			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());
-			K(t, ((n < 0 ? e === 1 ? -1 : 0 : n) + e + t.length) % t.length);
-		}, he = (e) => {
+			W(t, ((n < 0 ? e === 1 ? -1 : 0 : n) + e + t.length) % t.length);
+		}, xe = (e) => {
 			let t = e.toLocaleLowerCase();
-			U += t, W && clearTimeout(W), W = setTimeout(() => {
-				U = "", W = null;
+			V += t, H && clearTimeout(H), H = setTimeout(() => {
+				V = "", H = null;
 			}, 500);
-			let n = [...U].every((e) => e === t) ? t : U, r = G();
+			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 && K(r, r.indexOf(a));
+			a && W(r, r.indexOf(a));
 		};
-		async function Y(e, t) {
-			let n = V(e), r = A.get(e);
+		async function J(e, t) {
+			let n = z(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 m(() => F.value?.focusFirst());
 					return;
 				}
-				j.value && z("outside"), M.value = t, j.value = e, await R({
+				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 h(() => P.value?.focusFirst());
+				}, r.element()), t && await m(() => F.value?.focusFirst());
 			}
 		}
+		function Y(e) {
+			M.value &&= (R(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 Se(e, t) {
+			T("select", e, t);
 		}
-		function ge(e, t) {
-			D("select", e, t);
+		function Q() {
+			return U().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 Ce = (e) => {
 			let t = e.target;
-			if (e.currentTarget !== t && !G().some((e) => e.ownsEventTarget(t))) return;
+			if (e.currentTarget !== t && !U().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(), be(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" ? 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 && he(e.key);
-		}, ve = (e) => {
+			e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey && xe(e.key);
+		}, we = (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 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
-		}), ae(() => {
-			W && clearTimeout(W);
-		}), w({
-			focusFirst: q,
-			focusLast: J
+		}), se(() => {
+			A?.(), A = null, H && clearTimeout(H);
+		}), C({
+			focusFirst: G,
+			focusLast: K
 		}), (e, t) => {
-			let n = se("SMenuSurface", !0);
-			return g(), d("div", m({
+			let n = le("SMenuSurface", !0);
+			return h(), u("div", oe({
 				ref_key: "surfaceRef",
-				ref: k
-			}, b(fe).bindings(), {
+				ref: D
+			}, y(he).bindings(), {
 				class: "s-menu-surface",
-				"data-density": p.density,
-				"data-orientation": p.orientation,
-				"data-menu-depth": O,
+				"data-density": f.density,
+				"data-orientation": f.orientation,
+				"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, {
+				"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"])) : e.kind === "group" ? (g(), d("div", {
+			}, 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
-			}, [f("div", de, ce(e.label), 1), (g(!0), d(c, null, y(e.children, (e) => (g(), u(o, {
+			}, [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": H.value?.id === e.id,
-				onSelect: (t) => Q(e, t),
-				onOpenSubmenu: (t) => Y(e.id, !0),
-				onPointerIntent: (t) => Z(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, ue)) : (g(), u(o, {
+			]))), 128))], 8, S)) : (h(), 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": 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)), (g(), u(te, { to: "body" }, [H.value ? (g(), u(r, {
+			]))], 64))), 128))], 512), (h(), l(re, { to: "body" }, [B.value ? (h(), 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": `${f.label}: ${B.value.label}`,
+				position: y(L),
+				"available-size": y(ge),
+				"z-index": y(_e)
 			}, {
-				default: S(() => [re(n, {
+				default: b(() => [ae(n, {
 					ref_key: "submenuSurfaceRef",
-					ref: P,
-					label: `${p.label}: ${H.value.label}`,
-					items: H.value.children,
-					density: p.density,
+					ref: F,
+					label: `${f.label}: ${B.value.label}`,
+					items: B.value.children,
+					density: f.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: Se,
+					onTab: t[3] ||= (e) => T("tab", e)
 				}, null, 8, [
 					"label",
 					"items",
@@ -254,10 +279,11 @@ var C = [
 			}, 8, [
 				"landmark-label",
 				"position",
+				"available-size",
 				"z-index"
-			])) : ne("", !0)]))], 16, C);
+			])) : ie("", !0)]))], 16, x);
 		};
 	}
 });
 //#endregion
-export { w as default };
+export { C as default };