@pgcorp/ui-kit 0.13.0 → 0.14.0

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,6 +1,8 @@
 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;
@@ -13,12 +15,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 +42,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,32 @@
+import { hasOwn as e } from "../../../internal/es2020.js";
 //#region src/components/shared/_internal/dialogSurface.ts
-function e(e, t) {
+function t(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 n(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 r = class extends Error {
 	constructor(e, t) {
 		super(t), this.name = "DialogSurfaceContractError", this.code = e;
 	}
-}, n = /* @__PURE__ */ new Set([
+}, i = /* @__PURE__ */ new Set([
 	"kind",
 	"size",
 	"fullscreen",
 	"surface",
 	"scrollBehavior"
-]), r = /* @__PURE__ */ new Set([
+]), a = /* @__PURE__ */ new Set([
 	"kind",
 	"size",
 	"placement",
-	"mobileFullScreen"
-]), i = /* @__PURE__ */ new Set([
+	"mobileFullScreen",
+	"scope",
+	"extent",
+	"scrollBehavior"
+]), o = /* @__PURE__ */ new Set([
 	"sm",
 	"md",
 	"lg",
@@ -28,30 +36,38 @@ var t = class extends Error {
 	"4xl",
 	"wide",
 	"full"
-]), a = /* @__PURE__ */ new Set([
+]), s = /* @__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}`);
+]), c = /* @__PURE__ */ new Set([
+	"left",
+	"right",
+	"bottom"
+]), l = /* @__PURE__ */ new Set(["default", "subtle"]), u = /* @__PURE__ */ new Set(["page", "body"]), d = (e, t, n) => {
+	let i = Object.keys(e).find((e) => !n.has(e));
+	if (i) throw new r("invalid-presentation", `SDialogSurface presentation kind="${t}" содержит недопустимое поле ${i}`);
 };
-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 f(t) {
+	let f = t;
+	if (f.kind === "modal") {
+		if (d(f, "modal", i), !o.has(f.size)) throw new r("invalid-size", `Недопустимый размер SModal: ${String(f.size)}`);
+		if (typeof f.fullscreen != "boolean") throw new r("invalid-presentation", "SModal presentation требует boolean fullscreen");
+		if (!l.has(f.surface)) throw new r("invalid-surface", `Недопустимая поверхность SModal: ${String(f.surface)}`);
+		if (!u.has(f.scrollBehavior)) throw new r("invalid-scroll-behavior", `Недопустимый scroll behavior SModal: ${String(f.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 (f.kind === "drawer") {
+		if (d(f, "drawer", a), !s.has(f.size)) throw new r("invalid-size", `Недопустимый размер SDrawer: ${String(f.size)}`);
+		if (!c.has(f.placement)) throw new r("invalid-presentation", `Недопустимое размещение SDrawer: ${String(f.placement)}`);
+		if (typeof f.mobileFullScreen != "boolean") throw new r("invalid-presentation", "SDrawer presentation требует boolean mobileFullScreen");
+		if (f.scope !== "viewport" && f.scope !== "contained") throw new r("invalid-presentation", "SDrawer presentation requires viewport or contained scope");
+		if (f.scrollBehavior !== "body" && f.scrollBehavior !== "content") throw new r("invalid-scroll-behavior", "SDrawer presentation requires body or content scrollBehavior");
+		if (f.scope === "contained") n("SDialogSurface", f.extent);
+		else if (e(f, "extent")) throw new r("invalid-presentation", "SDrawer extent requires contained scope");
 		return;
 	}
-	throw new t("invalid-presentation", `Неизвестный kind SDialogSurface: ${String(u.kind)}`);
+	throw new r("invalid-presentation", `Неизвестный kind SDialogSurface: ${String(f.kind)}`);
 }
 //#endregion
-export { t as DialogSurfaceContractError, u as assertDialogSurfacePresentation, e as validateDialogSurfaceHeadingLevel };
+export { r as DialogSurfaceContractError, f as assertDialogSurfacePresentation, t as validateDialogSurfaceHeadingLevel, n as validateDrawerExtent };

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>;

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

@@ -1,4 +1,4 @@
 //#region src/components/shared/_internal/menuContext.ts
-var e = Symbol("s-menu-context"), t = Symbol("s-menu-depth");
+var e = Symbol("s-menu-context"), t = Symbol("s-menu-depth"), n = Symbol("s-menu-viewport");
 //#endregion
-export { e as menuContextKey, t as menuDepthKey };
+export { e as menuContextKey, t as menuDepthKey, n as menuViewportKey };

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

@@ -23,5 +23,6 @@ export interface SidebarGroupContext {
     beginResize(topKey: string, bottomKey: string): void;
     resizeSections(topKey: string, bottomKey: string, requestedTopSize: number): void;
     finishResize(topKey: string, bottomKey: string): void;
+    cancelResize(topKey: string, bottomKey: string): void;
 }
 export declare const sidebarGroupContextKey: InjectionKey<SidebarGroupContext>;

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

@@ -0,0 +1,45 @@
+import { Ref, VNodeRef } from 'vue';
+type Key = string | number;
+type Alignment = 'auto' | 'start' | 'center' | 'end';
+interface VirtualCollectionInputs<Item> {
+    owner: string;
+    items: () => readonly Item[];
+    itemKey: (item: Item) => Key;
+    estimatedSize: () => number;
+    overscan: () => number;
+    scrollOffset: Readonly<Ref<number>>;
+    viewportSize: Readonly<Ref<number>>;
+    leadingSize?: () => number;
+    pinnedKeys?: () => readonly Key[];
+    observer: () => ResizeObserver | null;
+}
+/** Shared measured keyed geometry; each semantic owner retains its own focus and scroll lifecycle. */
+export declare function useVirtualCollection<Item>(inputs: VirtualCollectionInputs<Item>): {
+    measurements: Ref<Map<Key, number> & Omit<Map<Key, number>, keyof Map<any, any>>, Map<Key, number> | (Map<Key, number> & Omit<Map<Key, number>, keyof Map<any, any>>)>;
+    itemKeys: import('vue').ComputedRef<(string | number)[]>;
+    itemKeyIndexes: import('vue').ComputedRef<Map<string | number, number>>;
+    itemSizes: import('vue').ComputedRef<number[]>;
+    offsets: import('vue').ComputedRef<number[]>;
+    totalHeight: import('vue').ComputedRef<number>;
+    firstVisibleIndex: import('vue').ComputedRef<number>;
+    lastVisibleIndex: import('vue').ComputedRef<number>;
+    startIndex: import('vue').ComputedRef<number>;
+    endIndex: import('vue').ComputedRef<number>;
+    visibleEntries: import('vue').ComputedRef<{
+        item: NonNullable<Item>;
+        index: number;
+        key: string | number;
+    }[]>;
+    indexAtOffset: (offset: number) => number;
+    renderedItemsByKey: Map<Key, HTMLElement>;
+    renderedItemKeysByElement: Map<HTMLElement, Key>;
+    renderedItemRefs: Map<Key, VNodeRef>;
+    registerRenderedItem: (key: Key, element: HTMLElement) => void;
+    unregisterRenderedItem: (key: Key) => void;
+    renderedItemRef: (key: Key) => VNodeRef;
+    measureItems: (entries: readonly ResizeObserverEntry[]) => boolean;
+    offsetForIndex: (index: number, alignment?: Alignment) => number | null;
+    prune: (keys: readonly Key[]) => void;
+    clear: () => void;
+};
+export {};

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

@@ -0,0 +1,123 @@
+import { computed as e, ref as t } from "vue";
+//#region src/components/shared/_internal/useVirtualCollection.ts
+function n(n) {
+	let r = t(/* @__PURE__ */ new Map()), i = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map(), s = e(() => {
+		let e = /* @__PURE__ */ new Set();
+		return n.items().map((t, r) => {
+			let i = n.itemKey(t);
+			if (typeof i == "string" && i.trim().length === 0) throw TypeError(`${n.owner} itemKey returned an empty string for item at index ${r}`);
+			if (typeof i == "number" && !Number.isFinite(i)) throw TypeError(`${n.owner} itemKey returned a non-finite number for item at index ${r}`);
+			if (typeof i != "string" && typeof i != "number") throw TypeError(`${n.owner} itemKey returned unsupported ${typeof i} key for item at index ${r}`);
+			if (e.has(i)) throw TypeError(`${n.owner} itemKey returned duplicate key ${v(i)} at index ${r}`);
+			return e.add(i), i;
+		});
+	}), c = e(() => new Map(s.value.map((e, t) => [e, t]))), l = e(() => s.value.map((e) => r.value.get(e) ?? n.estimatedSize())), u = e(() => {
+		let e = [0];
+		for (let t of l.value) e.push(e[e.length - 1] + t);
+		return e;
+	}), d = e(() => u.value[s.value.length]);
+	function f(e) {
+		let t = 0, n = s.value.length;
+		for (; t < n;) {
+			let r = Math.floor((t + n) / 2);
+			u.value[r + 1] <= e ? t = r + 1 : n = r;
+		}
+		return Math.min(t, Math.max(s.value.length - 1, 0));
+	}
+	let p = e(() => s.value.length === 0 ? 0 : f(Math.max(0, n.scrollOffset.value - (n.leadingSize?.() ?? 0)))), m = e(() => s.value.length === 0 ? -1 : f(Math.max(0, n.scrollOffset.value + n.viewportSize.value - (n.leadingSize?.() ?? 0)))), h = e(() => Math.max(0, p.value - n.overscan())), g = e(() => Math.min(s.value.length, m.value + n.overscan() + 1)), _ = e(() => {
+		let e = /* @__PURE__ */ new Set();
+		for (let t = h.value; t < g.value; t += 1) e.add(t);
+		for (let t of n.pinnedKeys?.() ?? []) {
+			let n = c.value.get(t);
+			n !== void 0 && e.add(n);
+		}
+		let t = n.items();
+		return [...e].sort((e, t) => e - t).map((e) => ({
+			item: t[e],
+			index: e,
+			key: s.value[e]
+		}));
+	});
+	function v(e) {
+		return `${typeof e}:${JSON.stringify(e)}`;
+	}
+	function y(e) {
+		let t = i.get(e);
+		if (!t) return;
+		let r = a.get(t);
+		if (r !== e) throw Error(`${n.owner} rendered item registry mismatch for key ${v(e)}: element belongs to ${r === void 0 ? "no key" : v(r)}`);
+		n.observer()?.unobserve(t), i.delete(e), a.delete(t);
+	}
+	function b(e, t) {
+		let r = c.value.get(e);
+		if (r === void 0) throw Error(`${n.owner} received a rendered item ref for stale key ${v(e)}`);
+		let o = i.get(e);
+		if (o && o !== t) throw Error(`${n.owner} rendered item key collision for ${v(e)} at index ${r}`);
+		let s = a.get(t);
+		if (s !== void 0 && s !== e) throw Error(`${n.owner} rendered item element collision between ${v(s)} and ${v(e)}`);
+		o !== t && (i.set(e, t), a.set(t, e), n.observer()?.observe(t));
+	}
+	function x(e) {
+		let t = o.get(e);
+		if (t) return t;
+		let r = (t) => {
+			if (t === null) y(e);
+			else if (t instanceof HTMLElement) b(e, t);
+			else throw TypeError(`${n.owner} rendered item ref for ${v(e)} must resolve to an HTMLElement`);
+		};
+		return o.set(e, r), r;
+	}
+	function S(e) {
+		let t = new Map(r.value), o = !1;
+		for (let r of e) {
+			if (!(r.target instanceof HTMLElement)) throw TypeError(`${n.owner} received a ResizeObserver entry for a non-HTMLElement target`);
+			let e = a.get(r.target);
+			if (e === void 0 || i.get(e) !== r.target) throw Error(`${n.owner} received a ResizeObserver entry for an unregistered rendered item`);
+			if (!c.value.has(e)) throw Error(`${n.owner} received a ResizeObserver entry for stale key ${v(e)}`);
+			let s = r.borderBoxSize[0]?.blockSize ?? r.contentRect.height;
+			!Number.isFinite(s) || s <= 0 || t.get(e) === s || (t.set(e, s), o = !0);
+		}
+		return o && (r.value = t), o;
+	}
+	function C(e, t = "auto") {
+		if (!Number.isInteger(e) || e < 0 || e >= s.value.length) throw RangeError(`${n.owner} index ${e} is outside 0..${Math.max(s.value.length - 1, 0)}`);
+		let r = n.leadingSize?.() ?? 0, i = r + u.value[e], a = r + u.value[e + 1], o = n.scrollOffset.value, c = o + n.viewportSize.value;
+		return t === "auto" && i >= o && a <= c ? null : t === "end" || t === "auto" && a > c ? a - n.viewportSize.value : t === "center" ? i - (n.viewportSize.value - (a - i)) / 2 : i;
+	}
+	function w(e) {
+		let t = new Set(e);
+		r.value = new Map([...r.value].filter(([e]) => t.has(e)));
+		for (let e of i.keys()) t.has(e) || y(e);
+		for (let e of o.keys()) t.has(e) || o.delete(e);
+	}
+	function T() {
+		for (let e of i.keys()) y(e);
+		o.clear(), r.value = /* @__PURE__ */ new Map();
+	}
+	return {
+		measurements: r,
+		itemKeys: s,
+		itemKeyIndexes: c,
+		itemSizes: l,
+		offsets: u,
+		totalHeight: d,
+		firstVisibleIndex: p,
+		lastVisibleIndex: m,
+		startIndex: h,
+		endIndex: g,
+		visibleEntries: _,
+		indexAtOffset: f,
+		renderedItemsByKey: i,
+		renderedItemKeysByElement: a,
+		renderedItemRefs: o,
+		registerRenderedItem: b,
+		unregisterRenderedItem: y,
+		renderedItemRef: x,
+		measureItems: S,
+		offsetForIndex: C,
+		prune: w,
+		clear: T
+	};
+}
+//#endregion
+export { n as useVirtualCollection };

package/dist/src/components/shared/complex/SKanbanLane.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
-import { useUiKitLocale as e } from "../../../composables/useUiKitLocale.js";
-import { useOwnedAttrs as t } from "../../../internal/ownedAttrs.js";
-import { validateBoundedInteger as n, validateNonEmptyString as r } from "../../../internal/runtimeContract.js";
+import { validateBoundedInteger as e, validateNonEmptyString as t } from "../../../internal/runtimeContract.js";
+import { useUiKitLocale as n } from "../../../composables/useUiKitLocale.js";
+import { useOwnedAttrs as r } from "../../../internal/ownedAttrs.js";
 import i from "../data-display/SEmptyState.vue.js";
 import a from "../../layout/SStack.vue.js";
 import o from "../containers/SCollapsiblePanel.vue.js";
@@ -25,10 +25,10 @@ var h = /*@__PURE__*/ l({
 	},
 	emits: ["update:open"],
 	setup(l) {
-		let h = l, { t: g } = e(), _ = s(() => r("SKanbanLane", "title", h.title)), v = s(() => n("SKanbanLane", "count", h.count, {
+		let h = l, { t: g } = n(), _ = s(() => t("SKanbanLane", "title", h.title)), v = s(() => e("SKanbanLane", "count", h.count, {
 			minimum: 0,
 			maximum: 2 ** 53 - 1
-		})), y = s(() => r("SKanbanLane", "emptyText", h.emptyText ?? g("kanban.empty"))), b = t({
+		})), y = s(() => t("SKanbanLane", "emptyText", h.emptyText ?? g("kanban.empty"))), b = r({
 			component: "SKanbanLane",
 			owner: "collapsible lane composition"
 		});

package/dist/src/components/shared/containers/SCloudChrome.vue.d.ts

@@ -24,8 +24,8 @@ declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, i
     emptyText: string;
     empty: boolean;
     title: string;
-    density: SCloudChromeDensity;
     description: string;
+    density: SCloudChromeDensity;
     surface: "cloud" | "flat" | "embedded";
     zone: "top" | "composer" | "hidden";
     editing: boolean;

package/dist/src/components/shared/containers/SCloudChromeRow.vue.d.ts

@@ -29,8 +29,8 @@ declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, i
     "onDrag-start"?: ((pointerEvent: PointerEvent) => any) | undefined;
     onRestore?: (() => any) | undefined;
 }>, {
-    hidden: boolean;
     draggable: boolean;
+    hidden: boolean;
     itemId: string;
     appearance: "raised" | "embedded";
     editing: boolean;