@pgcorp/ui-kit 0.13.0 → 0.15.0

package/dist/src/components/shared/_internal/SListboxGroup.vue.js

@@ -1,8 +1,8 @@
-import "../../../../assets/src/components/shared/_internal/SListboxGroup.css_vue_type_style_index_0_src_518787d3_scoped_518787d3_lang.css";
+import "../../../../assets/src/components/shared/_internal/SListboxGroup.css_vue_type_style_index_0_src_00060944_scoped_00060944_lang.css";
 import e from "../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./SListboxGroup.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                           */
 //#region src/components/shared/_internal/SListboxGroup.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-518787d3"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-00060944"]]);
 //#endregion
 export { n as default };

package/dist/src/components/shared/_internal/SListboxGroup.vue_vue_type_script_setup_true_lang.js

@@ -1,26 +1,44 @@
-import { createElementBlock as e, createElementVNode as t, defineComponent as n, openBlock as r, renderSlot as i, toDisplayString as a } from "vue";
+import { listboxContextKey as e } from "./listboxContext.js";
+import { createElementBlock as t, createElementVNode as n, defineComponent as r, inject as i, normalizeStyle as a, onBeforeUnmount as o, onMounted as s, openBlock as c, ref as l, renderSlot as u, toDisplayString as d } from "vue";
 //#region src/components/shared/_internal/SListboxGroup.vue?vue&type=script&setup=true&lang.ts
-var o = ["data-variant", "aria-labelledby"], s = ["id"], c = {
-	class: "s-listbox-group__options",
-	role: "presentation"
-}, l = /*@__PURE__*/ n({
+var f = ["data-variant"], p = ["id"], m = ["aria-labelledby"], h = /*@__PURE__*/ r({
 	__name: "SListboxGroup",
 	props: {
 		label: {},
 		labelId: {},
-		variant: { default: "select" }
+		variant: { default: "select" },
+		registrationToken: {},
+		virtualOffset: { default: void 0 },
+		virtualHeight: { default: void 0 }
 	},
-	setup(n) {
-		return (l, u) => (r(), e("li", {
+	setup(r) {
+		let h = r, g = i(e), _ = l(null), v;
+		return s(() => {
+			let e = _.value;
+			if (!(e instanceof HTMLElement)) throw Error("SListboxGroup: label element is unavailable");
+			v = g?.registerGeometry?.(`header:${h.registrationToken}`, e);
+		}), o(() => v?.()), (e, i) => (c(), t("li", {
 			class: "s-listbox-group",
-			"data-variant": n.variant,
-			role: "group",
-			"aria-labelledby": n.labelId
-		}, [t("span", {
-			id: n.labelId,
+			"data-variant": r.variant,
+			role: "presentation",
+			style: a(r.virtualOffset === void 0 ? void 0 : {
+				position: "absolute",
+				top: `${r.virtualOffset}px`,
+				height: `${r.virtualHeight}px`,
+				left: "0",
+				right: "0"
+			})
+		}, [n("span", {
+			ref_key: "labelElement",
+			ref: _,
+			id: r.labelId,
 			class: "s-listbox-group__label"
-		}, a(n.label), 9, s), t("ul", c, [i(l.$slots, "default", {}, void 0, !0)])], 8, o));
+		}, d(r.label), 9, p), n("ul", {
+			class: "s-listbox-group__options",
+			role: "group",
+			"aria-labelledby": r.labelId
+		}, [u(e.$slots, "default", {}, void 0, !0)], 8, m)], 12, f));
 	}
 });
 //#endregion
-export { l as default };
+export { h as default };

package/dist/src/components/shared/_internal/SMenuLayer.vue.d.ts

@@ -1,5 +1,8 @@
 import { ElementApi } from '../../../internal/interactiveElement';
-export type SMenuLayerApi = ElementApi<HTMLDivElement>;
+import { FloatingAvailableSize, FloatingSizingElements } from '../../../composables/useFloatingPosition';
+export interface SMenuLayerApi extends ElementApi<HTMLDivElement> {
+    getSizingElements: () => FloatingSizingElements | null;
+}
 interface Props {
     kind: 'dropdown' | 'context' | 'submenu';
     landmarkLabel: string;
@@ -8,6 +11,7 @@ interface Props {
         top: number;
     };
     zIndex: string;
+    availableSize: FloatingAvailableSize | null;
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/src/components/shared/_internal/SMenuLayer.vue.js

@@ -1,8 +1,8 @@
-import "../../../../assets/src/components/shared/_internal/SMenuLayer.css_vue_type_style_index_0_src_4913bbe1_scoped_4913bbe1_lang.css";
+import "../../../../assets/src/components/shared/_internal/SMenuLayer.css_vue_type_style_index_0_src_e478164c_scoped_e478164c_lang.css";
 import e from "../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./SMenuLayer.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                        */
 //#region src/components/shared/_internal/SMenuLayer.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-4913bbe1"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-e478164c"]]);
 //#endregion
 export { n as default };

package/dist/src/components/shared/_internal/SMenuLayer.vue_vue_type_script_setup_true_lang.js

@@ -1,33 +1,77 @@
-import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, normalizeStyle as i, openBlock as a, ref as o, renderSlot as s } from "vue";
+import { useOverlayAdmission as e } from "../../../internal/overlayHost.js";
+import { menuViewportKey as t } from "./menuContext.js";
+import { computed as n, createElementBlock as r, defineComponent as i, nextTick as a, normalizeClass as o, normalizeStyle as s, openBlock as c, provide as l, ref as u, renderSlot as d, unref as f, watch as p } from "vue";
 //#region src/components/shared/_internal/SMenuLayer.vue?vue&type=script&setup=true&lang.ts
-var c = ["data-kind", "aria-label"], l = /*@__PURE__*/ n({
+var m = [
+	"hidden",
+	"^inert",
+	"data-kind",
+	"aria-label"
+], h = /*@__PURE__*/ i({
 	__name: "SMenuLayer",
 	props: {
 		kind: {},
 		landmarkLabel: {},
 		position: {},
-		zIndex: {}
+		zIndex: {},
+		availableSize: {}
 	},
-	setup(n, { expose: l }) {
-		let u = n, d = o(null), f = e(() => ({
-			left: `${u.position.left}px`,
-			top: `${u.position.top}px`,
-			zIndex: u.zIndex
+	setup(i, { expose: h }) {
+		let g = i, _ = u(null), v = e(), y = u(!v.value);
+		p(v, (e) => {
+			if (e) return;
+			y.value = !0;
+			let t = _.value;
+			if (!t) return;
+			t.hidden = !0, t.setAttribute("inert", "");
+			let n = t.ownerDocument.activeElement;
+			n instanceof HTMLElement && t.contains(n) && n.blur();
+		}, { flush: "sync" });
+		let b = null;
+		l(t, { register(e) {
+			if (b !== null) throw Error("SMenuLayer: exactly one native menu sizing surface is allowed");
+			if (!e.surface.contains(e.content)) throw Error("SMenuLayer: native sizing content must belong to its surface");
+			return b = e, () => {
+				b === e && (b = null);
+			};
+		} });
+		let x = n(() => ({
+			left: `${g.position.left}px`,
+			top: `${g.position.top}px`,
+			zIndex: g.zIndex,
+			...g.availableSize ? {
+				"--s-menu-viewport-available-inline-size": `${g.availableSize.width}px`,
+				"--s-menu-viewport-available-block-size": `${g.availableSize.height}px`
+			} : {}
 		}));
-		return l({ getElement: () => {
-			let e = d.value;
-			if (!e) throw Error("SMenuLayer: layer element is unavailable");
-			return e;
-		} }), (e, o) => (a(), t("div", {
+		return p(() => [g.availableSize?.width, g.availableSize?.height], async ([e, t], n) => {
+			if (e === n[0] && t === n[1]) return;
+			let r = b;
+			await a(), r && b === r && _.value?.isConnected && r.surface.isConnected && _.value.contains(r.surface) && r.revealFocusedItem();
+		}), h({
+			getElement: () => {
+				let e = _.value;
+				if (!e) throw Error("SMenuLayer: layer element is unavailable");
+				return e;
+			},
+			getSizingElements: () => {
+				let e = _.value;
+				if (!e || !b) return null;
+				if (!e.contains(b.surface)) throw Error("SMenuLayer: native sizing surface must belong to the current layer");
+				return b;
+			}
+		}), (e, t) => (c(), r("div", {
 			ref_key: "layerRef",
-			ref: d,
-			class: r(["s-menu-layer", [`s-menu-layer--${n.kind}`, n.kind === "context" ? "s-context-menu" : n.kind === "dropdown" ? "s-dropdown-menu-items" : "s-submenu-items"]]),
-			"data-kind": n.kind,
+			ref: _,
+			hidden: y.value || !f(v),
+			"^inert": y.value || !f(v) ? !0 : void 0,
+			class: o(["s-menu-layer", [`s-menu-layer--${i.kind}`, i.kind === "context" ? "s-context-menu" : i.kind === "dropdown" ? "s-dropdown-menu-items" : "s-submenu-items"]]),
+			"data-kind": i.kind,
 			role: "region",
-			"aria-label": n.landmarkLabel,
-			style: i(f.value)
-		}, [s(e.$slots, "default", {}, void 0, !0)], 14, c));
+			"aria-label": i.landmarkLabel,
+			style: s(x.value)
+		}, [d(e.$slots, "default", {}, void 0, !0)], 14, m));
 	}
 });
 //#endregion
-export { l as default };
+export { h as default };

package/dist/src/components/shared/_internal/dialogSurface.d.ts

@@ -1,9 +1,13 @@
 export type DialogSurfaceModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'wide' | 'full';
 export type DialogSurfaceDrawerSize = 'sm' | 'md' | 'lg';
-export type DialogSurfaceDrawerPlacement = 'right' | 'bottom';
+export type DialogSurfaceDrawerPlacement = 'left' | 'right' | 'bottom';
+export type DialogSurfaceDrawerScope = 'viewport' | 'contained';
+export type DialogSurfaceDrawerScrollBehavior = 'body' | 'content';
 export type DialogSurfaceTone = 'default' | 'subtle';
 export type DialogSurfaceScrollBehavior = 'page' | 'body';
 export type DialogSurfaceHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/** Translates the canonical registration base into the exact dialog-owned paint bands. */
+export declare function resolveDialogSurfaceLayerIndex(base: string, band: 'backdrop' | 'surface' | 'toast'): string;
 /** Проверяет уровень native heading без числового coercion. / Validates a native heading level without numeric coercion. */
 export declare function validateDialogSurfaceHeadingLevel(owner: string, value: unknown): DialogSurfaceHeadingLevel;
 export interface ModalDialogSurfacePresentation {
@@ -13,12 +17,22 @@ export interface ModalDialogSurfacePresentation {
     surface: DialogSurfaceTone;
     scrollBehavior: DialogSurfaceScrollBehavior;
 }
-export interface DrawerDialogSurfacePresentation {
+interface DrawerDialogSurfaceBase {
     kind: 'drawer';
     size: DialogSurfaceDrawerSize;
     placement: DialogSurfaceDrawerPlacement;
     mobileFullScreen: boolean;
+    scrollBehavior: DialogSurfaceDrawerScrollBehavior;
 }
+export type DrawerDialogSurfacePresentation = DrawerDialogSurfaceBase & ({
+    scope: 'viewport';
+    extent?: never;
+} | {
+    scope: 'contained';
+    extent: number;
+});
+/** Validates an exact finite percentage in (0,100], with no unit coercion. */
+export declare function validateDrawerExtent(owner: string, value: unknown): number;
 export type DialogSurfacePresentation = ModalDialogSurfacePresentation | DrawerDialogSurfacePresentation;
 export type DialogSurfaceContractErrorCode = 'invalid-presentation' | 'invalid-size' | 'invalid-surface' | 'invalid-scroll-behavior';
 export declare class DialogSurfaceContractError extends Error {
@@ -30,3 +44,4 @@ export declare class DialogSurfaceContractError extends Error {
  * Validates the private dialog surface discriminated contract without fallback branches.
  */
 export declare function assertDialogSurfacePresentation(presentation: DialogSurfacePresentation): asserts presentation is DialogSurfacePresentation;
+export {};

package/dist/src/components/shared/_internal/dialogSurface.js

@@ -1,24 +1,35 @@
+import { hasOwn as e } from "../../../internal/es2020.js";
 //#region src/components/shared/_internal/dialogSurface.ts
-function e(e, t) {
+function t(e, t) {
+	return t === "backdrop" ? e : `calc(${e} + var(${t === "surface" ? "--s-layer-overlay-surface-offset" : "--s-layer-toast"}))`;
+}
+function n(e, t) {
 	if (t === 1 || t === 2 || t === 3 || t === 4 || t === 5 || t === 6) return t;
 	throw TypeError(`${e}: headingLevel должен быть целым числом от 1 до 6; получено ${String(t)}. / ${e}: headingLevel must be an integer from 1 to 6; received ${String(t)}.`);
 }
-var t = class extends Error {
+function r(e, t) {
+	if (typeof t == "number" && Number.isFinite(t) && t > 0 && t <= 100) return t;
+	throw TypeError(`${e}: extent must be a finite percentage in (0,100]; received ${String(t)}`);
+}
+var i = class extends Error {
 	constructor(e, t) {
 		super(t), this.name = "DialogSurfaceContractError", this.code = e;
 	}
-}, n = /* @__PURE__ */ new Set([
+}, a = /* @__PURE__ */ new Set([
 	"kind",
 	"size",
 	"fullscreen",
 	"surface",
 	"scrollBehavior"
-]), r = /* @__PURE__ */ new Set([
+]), o = /* @__PURE__ */ new Set([
 	"kind",
 	"size",
 	"placement",
-	"mobileFullScreen"
-]), i = /* @__PURE__ */ new Set([
+	"mobileFullScreen",
+	"scope",
+	"extent",
+	"scrollBehavior"
+]), s = /* @__PURE__ */ new Set([
 	"sm",
 	"md",
 	"lg",
@@ -28,30 +39,38 @@ var t = class extends Error {
 	"4xl",
 	"wide",
 	"full"
-]), a = /* @__PURE__ */ new Set([
+]), c = /* @__PURE__ */ new Set([
 	"sm",
 	"md",
 	"lg"
-]), o = /* @__PURE__ */ new Set(["right", "bottom"]), s = /* @__PURE__ */ new Set(["default", "subtle"]), c = /* @__PURE__ */ new Set(["page", "body"]), l = (e, n, r) => {
-	let i = Object.keys(e).find((e) => !r.has(e));
-	if (i) throw new t("invalid-presentation", `SDialogSurface presentation kind="${n}" содержит недопустимое поле ${i}`);
+]), l = /* @__PURE__ */ new Set([
+	"left",
+	"right",
+	"bottom"
+]), u = /* @__PURE__ */ new Set(["default", "subtle"]), d = /* @__PURE__ */ new Set(["page", "body"]), f = (e, t, n) => {
+	let r = Object.keys(e).find((e) => !n.has(e));
+	if (r) throw new i("invalid-presentation", `SDialogSurface presentation kind="${t}" содержит недопустимое поле ${r}`);
 };
-function u(e) {
-	let u = e;
-	if (u.kind === "modal") {
-		if (l(u, "modal", n), !i.has(u.size)) throw new t("invalid-size", `Недопустимый размер SModal: ${String(u.size)}`);
-		if (typeof u.fullscreen != "boolean") throw new t("invalid-presentation", "SModal presentation требует boolean fullscreen");
-		if (!s.has(u.surface)) throw new t("invalid-surface", `Недопустимая поверхность SModal: ${String(u.surface)}`);
-		if (!c.has(u.scrollBehavior)) throw new t("invalid-scroll-behavior", `Недопустимый scroll behavior SModal: ${String(u.scrollBehavior)}`);
+function p(t) {
+	let n = t;
+	if (n.kind === "modal") {
+		if (f(n, "modal", a), !s.has(n.size)) throw new i("invalid-size", `Недопустимый размер SModal: ${String(n.size)}`);
+		if (typeof n.fullscreen != "boolean") throw new i("invalid-presentation", "SModal presentation требует boolean fullscreen");
+		if (!u.has(n.surface)) throw new i("invalid-surface", `Недопустимая поверхность SModal: ${String(n.surface)}`);
+		if (!d.has(n.scrollBehavior)) throw new i("invalid-scroll-behavior", `Недопустимый scroll behavior SModal: ${String(n.scrollBehavior)}`);
 		return;
 	}
-	if (u.kind === "drawer") {
-		if (l(u, "drawer", r), !a.has(u.size)) throw new t("invalid-size", `Недопустимый размер SDrawer: ${String(u.size)}`);
-		if (!o.has(u.placement)) throw new t("invalid-presentation", `Недопустимое размещение SDrawer: ${String(u.placement)}`);
-		if (typeof u.mobileFullScreen != "boolean") throw new t("invalid-presentation", "SDrawer presentation требует boolean mobileFullScreen");
+	if (n.kind === "drawer") {
+		if (f(n, "drawer", o), !c.has(n.size)) throw new i("invalid-size", `Недопустимый размер SDrawer: ${String(n.size)}`);
+		if (!l.has(n.placement)) throw new i("invalid-presentation", `Недопустимое размещение SDrawer: ${String(n.placement)}`);
+		if (typeof n.mobileFullScreen != "boolean") throw new i("invalid-presentation", "SDrawer presentation требует boolean mobileFullScreen");
+		if (n.scope !== "viewport" && n.scope !== "contained") throw new i("invalid-presentation", "SDrawer presentation requires viewport or contained scope");
+		if (n.scrollBehavior !== "body" && n.scrollBehavior !== "content") throw new i("invalid-scroll-behavior", "SDrawer presentation requires body or content scrollBehavior");
+		if (n.scope === "contained") r("SDialogSurface", n.extent);
+		else if (e(n, "extent")) throw new i("invalid-presentation", "SDrawer extent requires contained scope");
 		return;
 	}
-	throw new t("invalid-presentation", `Неизвестный kind SDialogSurface: ${String(u.kind)}`);
+	throw new i("invalid-presentation", `Неизвестный kind SDialogSurface: ${String(n.kind)}`);
 }
 //#endregion
-export { t as DialogSurfaceContractError, u as assertDialogSurfacePresentation, e as validateDialogSurfaceHeadingLevel };
+export { i as DialogSurfaceContractError, p as assertDialogSurfacePresentation, t as resolveDialogSurfaceLayerIndex, n as validateDialogSurfaceHeadingLevel, r as validateDrawerExtent };

package/dist/src/components/shared/_internal/dialogSurfaceMotion.d.ts

@@ -0,0 +1,14 @@
+export interface DialogSurfaceMotionElements {
+    readonly subject: HTMLElement;
+    readonly frame: HTMLElement;
+    readonly backdrop: HTMLElement;
+}
+export interface DialogSurfaceMotionOwner {
+    readonly register: (elements: DialogSurfaceMotionElements) => () => void;
+    readonly enter: (element: Element, done: () => void) => void;
+    readonly leave: (element: Element, done: () => void) => void;
+    readonly cancel: (element: Element) => void;
+    readonly dispose: () => void;
+}
+/** Coordinates exact child CSS effects with Vue's explicit completion hooks; no duration clock or root motion. */
+export declare function useDialogSurfaceMotion(enabled: () => boolean): DialogSurfaceMotionOwner;

package/dist/src/components/shared/_internal/dialogSurfaceMotion.js

@@ -0,0 +1,84 @@
+import { createAggregateError as e } from "../../../internal/es2020.js";
+import { onBeforeUnmount as t } from "vue";
+//#region src/components/shared/_internal/dialogSurfaceMotion.ts
+function n(n) {
+	let r = "s-dialog-surface-motion", i = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map(), o = !1, s = (e) => {
+		if (!(e instanceof HTMLElement)) return;
+		let t = a.get(e);
+		t && (a.delete(e), t.observer.disconnect());
+	}, c = (e) => !o && a.get(e.subject) === e, l = (e) => {
+		c(e) && (s(e.subject), e.direction === "leave" && i.delete(e.subject), e.done());
+	}, u = (e) => [...e.frame.getAnimations().filter((t) => t.effect instanceof KeyframeEffect && t.effect.target === e.frame && t.effect.pseudoElement === null && "transitionProperty" in t && t.transitionProperty === "transform"), ...e.backdrop.getAnimations().filter((t) => t.effect instanceof KeyframeEffect && t.effect.target === e.backdrop && t.effect.pseudoElement === null && "transitionProperty" in t && t.transitionProperty === "opacity")].filter((e) => e.playState !== "idle" && e.playState !== "finished"), d = (e) => {
+		if (!c(e) || !e.subject.classList.contains(e.toClass) || e.waiting) return;
+		let t = i.get(e.subject);
+		if (!t) throw TypeError("dialogSurfaceMotion: current semantic subject requires its exact frame/backdrop refs");
+		let n = u(t);
+		if (n.length === 0) {
+			l(e);
+			return;
+		}
+		e.waiting = !0, Promise.all(n.map((e) => e.finished)).then(() => {
+			e.waiting = !1, d(e);
+		}, (t) => {
+			if (e.waiting = !1, !(t instanceof DOMException) || t.name !== "AbortError") throw s(e.subject), t;
+			d(e);
+		});
+	}, f = (e, t, l) => {
+		if (!(e instanceof HTMLElement)) throw TypeError("dialogSurfaceMotion: Vue subject must be its native HTMLElement");
+		if (s(e), o || !n()) {
+			l === "leave" && i.delete(e), t();
+			return;
+		}
+		let u = `${r}-${l}-active`, f = `${r}-${l}-to`, p = new MutationObserver(() => {
+			if (c(m)) {
+				if (!e.classList.contains(u)) {
+					s(e);
+					return;
+				}
+				d(m);
+			}
+		}), m = {
+			subject: e,
+			direction: l,
+			activeClass: u,
+			toClass: f,
+			done: t,
+			observer: p,
+			waiting: !1
+		};
+		a.set(e, m), p.observe(e, {
+			attributes: !0,
+			attributeFilter: ["class"]
+		}), d(m);
+	}, p = () => {
+		if (o) return;
+		o = !0;
+		let t = [];
+		for (let e of [...a.values()]) {
+			s(e.subject);
+			try {
+				e.done();
+			} catch (e) {
+				t.push(e);
+			}
+		}
+		if (i.clear(), t.length === 1) throw t[0];
+		if (t.length > 1) throw e(t, "dialogSurfaceMotion: completion cleanup failed");
+	};
+	return t(p), {
+		register: (e) => {
+			if (e.frame === e.backdrop || !e.subject.contains(e.frame) || !e.subject.contains(e.backdrop)) throw TypeError("dialogSurfaceMotion: exact frame/backdrop must be distinct descendants of their subject");
+			i.set(e.subject, e);
+			let t = a.get(e.subject);
+			return t && d(t), () => {
+				i.get(e.subject) === e && (e.subject.isConnected || (i.delete(e.subject), s(e.subject)));
+			};
+		},
+		enter: (e, t) => f(e, t, "enter"),
+		leave: (e, t) => f(e, t, "leave"),
+		cancel: s,
+		dispose: p
+	};
+}
+//#endregion
+export { n as useDialogSurfaceMotion };

package/dist/src/components/shared/_internal/focusTrap.js

@@ -1,20 +1,22 @@
-import { getFocusableElements as e } from "../../../internal/focusNavigation.js";
+import { flatTreeContains as e } from "../../../internal/flatTree.js";
+import { nativeFocusedElement as t } from "../../../internal/nativeFocus.js";
+import { getFocusableElements as n } from "../../../internal/focusNavigation.js";
 //#region src/components/shared/_internal/focusTrap.ts
-function t(t, n, r) {
-	if (t.key !== "Tab" || !r) return;
-	let i = n.value;
-	if (!i) return;
-	let a = e(i, { requireLayout: !0 });
-	if (a.length === 0) {
-		t.preventDefault(), i.focus();
+function r(r, i, a) {
+	if (r.key !== "Tab" || !a) return;
+	let o = i.value;
+	if (!o) return;
+	let s = n(o, { requireLayout: !0 });
+	if (s.length === 0) {
+		r.preventDefault(), o.focus();
 		return;
 	}
-	let o = a[0], s = a[a.length - 1], c = document.activeElement, l = c === i || !i.contains(c);
-	if (t.shiftKey) {
-		(c === o || l) && (t.preventDefault(), s?.focus());
+	let c = s[0], l = s[s.length - 1], u = t(), d = u === o || u === null || !e(o, u);
+	if (r.shiftKey) {
+		(u === c || d) && (r.preventDefault(), l?.focus());
 		return;
 	}
-	(c === s || l) && (t.preventDefault(), o?.focus());
+	(u === l || d) && (r.preventDefault(), c?.focus());
 }
 //#endregion
-export { t as trapFocusInsidePanel };
+export { r as trapFocusInsidePanel };

package/dist/src/components/shared/_internal/listboxContext.d.ts

@@ -9,5 +9,6 @@ export interface ListboxOptionRegistration {
 }
 export interface ListboxContext {
     register: (registration: ListboxOptionRegistration) => () => void;
+    registerGeometry?: (token: string, element: HTMLElement) => () => void;
 }
 export declare const listboxContextKey: InjectionKey<ListboxContext>;

package/dist/src/components/shared/_internal/listboxInventory.d.ts

@@ -0,0 +1,51 @@
+import { ResolvedSelectionInventory, ResolvedSelectionOption } from './selectionContract';
+import { SelectionKey } from './useSelectionRoving';
+export declare const CLEAR_OPTION_TOKEN = "clear-option";
+export interface ListboxCatalogOption<TKey extends SelectionKey> extends ResolvedSelectionOption<TKey> {
+    position: number;
+    rowIndex: number;
+}
+export type ListboxCatalogEntry<TKey extends SelectionKey> = {
+    kind: 'option';
+    token: string;
+    record: ListboxCatalogOption<TKey>;
+} | {
+    kind: 'group';
+    token: string;
+    label: string;
+    headerIndex: number;
+    endIndex: number;
+    records: readonly ListboxCatalogOption<TKey>[];
+};
+export interface ListboxNavigationOption<TKey extends SelectionKey> {
+    token: string;
+    value: TKey | null;
+    label: string;
+    disabled: boolean;
+    position: number;
+    rowIndex: number;
+}
+export type ListboxVirtualRow<TKey extends SelectionKey> = {
+    kind: 'clear';
+    key: string;
+} | {
+    kind: 'header';
+    key: string;
+    entryToken: string;
+} | {
+    kind: 'option';
+    key: string;
+    entryToken: string;
+    record: ListboxCatalogOption<TKey>;
+};
+/** Complete semantic inventory, independent of mounted viewport rows. */
+export declare function createListboxInventory<TKey extends SelectionKey>(inventory: ResolvedSelectionInventory<TKey>, clearLabel: string | undefined, disabled: boolean): {
+    rows: ListboxVirtualRow<TKey>[];
+    entries: ListboxCatalogEntry<TKey>[];
+    entriesByToken: Map<string, ListboxCatalogEntry<TKey>>;
+    navigation: ListboxNavigationOption<TKey>[];
+    navigationByToken: Map<string, ListboxNavigationOption<TKey>>;
+    setSize: number;
+};
+/** A bounded DOM projection; a mounted group always includes at least one option and its accessible label. */
+export declare function projectListboxEntries<TKey extends SelectionKey>(catalog: ReturnType<typeof createListboxInventory<TKey>>, rows: readonly ListboxVirtualRow<TKey>[]): ListboxCatalogEntry<TKey>[];

package/dist/src/components/shared/_internal/listboxInventory.js

@@ -0,0 +1,85 @@
+//#region src/components/shared/_internal/listboxInventory.ts
+var e = "clear-option";
+function t(t, n, r) {
+	let i = [], a = [], o = [];
+	n !== void 0 && (i.push({
+		kind: "clear",
+		key: e
+	}), o.push({
+		token: e,
+		value: null,
+		label: n,
+		disabled: r,
+		position: 1,
+		rowIndex: 0
+	}));
+	function s(e, t) {
+		let n = {
+			...e,
+			position: o.length + 1,
+			rowIndex: i.length
+		};
+		return o.push({
+			token: e.token,
+			value: e.option.value,
+			label: e.option.label,
+			disabled: r || e.option.disabled === !0,
+			position: n.position,
+			rowIndex: n.rowIndex
+		}), i.push({
+			kind: "option",
+			key: e.token,
+			entryToken: t,
+			record: n
+		}), n;
+	}
+	for (let e of t.entries) if (e.kind === "option") a.push({
+		kind: "option",
+		token: e.token,
+		record: s(e.record, e.token)
+	});
+	else {
+		let t = i.length;
+		i.push({
+			kind: "header",
+			key: `header:${e.token}`,
+			entryToken: e.token
+		});
+		let n = e.records.map((t) => s(t, e.token));
+		a.push({
+			kind: "group",
+			token: e.token,
+			label: e.label,
+			headerIndex: t,
+			endIndex: i.length,
+			records: n
+		});
+	}
+	return {
+		rows: i,
+		entries: a,
+		entriesByToken: new Map(a.map((e) => [e.token, e])),
+		navigation: o,
+		navigationByToken: new Map(o.map((e) => [e.token, e])),
+		setSize: o.length
+	};
+}
+function n(e, t) {
+	let n = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map();
+	for (let i of t) {
+		if (i.kind === "clear") continue;
+		let t = e.entriesByToken.get(i.entryToken);
+		if (!t) throw Error("SListbox: virtual row refers to a stale entry");
+		if (t.kind === "option") n.set(t.token, t);
+		else {
+			let e = r.get(t.token);
+			e || (e = /* @__PURE__ */ new Map(), r.set(t.token, e)), i.kind === "option" ? e.set(i.record.token, i.record) : e.size === 0 && e.set(t.records[0].token, t.records[0]), n.set(t.token, t);
+		}
+	}
+	return [...n.values()].map((e) => e.kind === "option" ? e : {
+		...e,
+		records: [...r.get(e.token).values()].sort((e, t) => e.rowIndex - t.rowIndex)
+	}).sort((e, t) => (e.kind === "option" ? e.record.rowIndex : e.headerIndex) - (t.kind === "option" ? t.record.rowIndex : t.headerIndex));
+}
+//#endregion
+export { e as CLEAR_OPTION_TOKEN, t as createListboxInventory, n as projectListboxEntries };

package/dist/src/components/shared/_internal/menuContext.d.ts

@@ -1,4 +1,5 @@
 import { InjectionKey, Ref } from 'vue';
+import { FloatingSizingElements } from '../../../composables/useFloatingPosition';
 export type MenuDensity = 'compact' | 'comfortable';
 export interface MenuItemRegistration {
     readonly entryId: string;
@@ -15,5 +16,12 @@ export interface MenuContext {
     density: Readonly<Ref<MenuDensity>>;
     register: (registration: MenuItemRegistration) => () => void;
 }
+export interface MenuViewportRegistration extends FloatingSizingElements {
+    revealFocusedItem: () => void;
+}
+export interface MenuViewportContext {
+    register: (elements: MenuViewportRegistration) => () => void;
+}
 export declare const menuContextKey: InjectionKey<MenuContext>;
 export declare const menuDepthKey: InjectionKey<number>;
+export declare const menuViewportKey: InjectionKey<MenuViewportContext>;