@pgcorp/ui-kit 0.12.0 → 0.14.0

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;

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

@@ -35,13 +35,13 @@ declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, i
     density: "comfortable" | "compact" | "dense";
     surface: "card" | "plain";
     lazy: boolean;
+    defaultOpen: boolean;
     summaryTypography: SDisclosureSummaryTypography;
     summaryCase: SDisclosureSummaryCase;
     summaryState: SDisclosureSummaryState;
     summaryFacts: readonly SDisclosureSummaryFact[];
     summaryBadges: readonly SDisclosureSummaryBadge[];
     summaryStatus: SDisclosureSummaryStatus;
-    defaultOpen: boolean;
     contentPadding: "density" | "none";
     headerVariant: "default" | "minimal";
     noAnimation: boolean;

package/dist/src/components/shared/containers/SCollapsiblePanel.vue.js

@@ -1,8 +1,8 @@
-import "../../../../assets/src/components/shared/containers/SCollapsiblePanel.css_vue_type_style_index_0_src_4882f962_scoped_4882f962_lang.css";
+import "../../../../assets/src/components/shared/containers/SCollapsiblePanel.css_vue_type_style_index_0_src_71824088_scoped_71824088_lang.css";
 import e from "../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./SCollapsiblePanel.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                               */
 //#region src/components/shared/containers/SCollapsiblePanel.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-4882f962"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-71824088"]]);
 //#endregion
 export { n as default };

package/dist/src/components/shared/containers/SCollapsiblePanel.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import { useDisclosure as e } from "../../../composables/useDisclosure.js";
 import { useOwnedAttrs as t } from "../../../internal/ownedAttrs.js";
 import n from "../controls/SButton.vue.js";
 import r from "../_internal/SDisclosureSummary.vue.js";
-import { computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, mergeProps as u, nextTick as d, normalizeClass as f, normalizeStyle as ee, onBeforeUnmount as p, onMounted as m, openBlock as h, ref as g, renderSlot as _, unref as v, useSlots as y, vShow as te, watch as b, withCtx as x, withDirectives as S } from "vue";
+import { computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, mergeProps as u, nextTick as d, normalizeClass as f, normalizeStyle as ee, onBeforeUnmount as te, onMounted as p, openBlock as m, ref as h, renderSlot as g, unref as _, useSlots as v, vShow as y, watch as b, withCtx as x, withDirectives as S } from "vue";
 //#region src/components/shared/containers/SCollapsiblePanel.vue?vue&type=script&setup=true&lang.ts
 var C = [
 	"data-density",
@@ -58,117 +58,118 @@ var C = [
 	},
 	emits: ["update:open"],
 	setup(l, { emit: O }) {
-		let k = l, ne = y(), A = O, j = i(() => !!ne.actions), M = t({
+		let k = l, ne = v(), A = O, j = i(() => !!ne.actions), M = t({
 			component: "SCollapsiblePanel",
 			owner: "collapsible panel root"
-		}), N = i(() => k.density === "comfortable" ? "md" : "sm"), P = i(() => k.open ?? !1), F = e({
+		}), N = i(() => k.density === "comfortable" ? "md" : "sm"), P = i(() => k.density === "comfortable" ? "default" : "compact"), F = i(() => k.open ?? !1), I = e({
 			id: k.id,
-			open: k.open === void 0 ? void 0 : P,
+			open: k.open === void 0 ? void 0 : F,
 			defaultOpen: k.open === void 0 ? k.defaultOpen : void 0,
 			disabled: () => k.disabled,
 			onUpdate: (e) => A("update:open", e)
-		}), { isOpen: I, triggerId: L, panelId: R } = F, z = g(!1), B = i(() => I.value || z.value), V = g(!k.lazy || k.defaultOpen || k.open === !0);
+		}), { isOpen: L, triggerId: R, panelId: z } = I, B = h(!1), V = i(() => L.value || B.value), H = h(!k.lazy || k.defaultOpen || k.open === !0);
 		b(() => k.open, (e) => {
-			e && (V.value = !0);
+			e && (H.value = !0);
 		});
-		function H() {
+		function U() {
 			if (k.disabled) return;
 			if (k.noAnimation) {
-				F.toggle();
+				I.toggle();
 				return;
 			}
-			let e = G.value, t = U.value;
-			z.value = !0, e?.classList.add("is-animating"), e?.classList.remove("is-opened"), t?.classList.add("is-animating"), t?.classList.remove("is-opened"), F.toggle();
-		}
-		let U = g(null), W = g(null), G = g(null), K = null, q = null;
-		function J() {
-			q !== null && (window.cancelAnimationFrame(q), q = null);
+			let e = K.value, t = W.value;
+			B.value = !0, e?.classList.add("is-animating"), e?.classList.remove("is-opened"), t?.classList.add("is-animating"), t?.classList.remove("is-opened"), I.toggle();
 		}
+		let W = h(null), G = h(null), K = h(null), q = null, J = null;
 		function Y() {
-			let e = U.value, t = W.value;
-			if (!e || !t || !I.value || !z.value) return;
+			J !== null && (window.cancelAnimationFrame(J), J = null);
+		}
+		function X() {
+			let e = W.value, t = G.value;
+			if (!e || !t || !L.value || !B.value) return;
 			let n = `${t.scrollHeight}px`;
 			e.style.maxHeight !== n && (e.style.maxHeight = n);
 		}
-		function X() {
-			J(), q = window.requestAnimationFrame(() => {
-				q = null, Y();
+		function re() {
+			Y(), J = window.requestAnimationFrame(() => {
+				J = null, X();
 			});
 		}
 		function Z() {
-			let e = U.value;
+			let e = W.value;
 			if (!e) return;
 			e.classList.remove("is-animating"), e.classList.add("is-opened"), e.style.overflow = "", e.style.maxHeight = "";
-			let t = G.value;
+			let t = K.value;
 			t && (t.classList.remove("is-animating"), t.classList.add("is-opened"));
 		}
 		function Q() {
-			let e = U.value;
+			let e = W.value;
 			if (!e) return;
 			e.classList.remove("is-animating"), e.classList.remove("is-opened"), e.style.maxHeight = "0px", e.style.overflow = "hidden";
-			let t = G.value;
+			let t = K.value;
 			t && (t.classList.remove("is-animating"), t.classList.remove("is-opened"));
 		}
 		async function $(e) {
-			e ? (await d(), V.value = !0, Z()) : Q(), z.value = !1;
+			e ? (await d(), H.value = !0, Z()) : Q(), B.value = !1;
 		}
-		async function re() {
-			let e = U.value;
+		async function ie() {
+			let e = W.value;
 			if (!e) return;
-			let t = G.value;
+			let t = K.value;
 			await d(), e.classList.remove("is-opened"), e.classList.add("is-animating"), t && (t.classList.add("is-animating"), t.classList.remove("is-opened")), e.style.overflow = "hidden", e.style.maxHeight = "0px", e.offsetHeight, e.style.maxHeight = e.scrollHeight + "px";
 			let n = () => {
-				e.removeEventListener("transitionend", n), I.value && (J(), e.style.maxHeight = "", e.style.overflow = "", e.classList.remove("is-animating"), e.classList.add("is-opened"), t && (t.classList.remove("is-animating"), t.classList.add("is-opened")), z.value = !1);
+				e.removeEventListener("transitionend", n), L.value && (Y(), e.style.maxHeight = "", e.style.overflow = "", e.classList.remove("is-animating"), e.classList.add("is-opened"), t && (t.classList.remove("is-animating"), t.classList.add("is-opened")), B.value = !1);
 			};
 			e.addEventListener("transitionend", n);
 		}
-		function ie() {
-			let e = U.value;
+		function ae() {
+			let e = W.value;
 			if (!e) return;
-			let t = G.value;
-			z.value = !0, e.classList.add("is-animating"), e.classList.remove("is-opened"), t && (t.classList.add("is-animating"), t.classList.remove("is-opened")), (e.style.maxHeight === "" || e.style.maxHeight === "none") && (e.style.maxHeight = e.scrollHeight + "px", e.offsetHeight), e.style.overflow = "hidden", e.style.maxHeight = "0px";
+			let t = K.value;
+			B.value = !0, e.classList.add("is-animating"), e.classList.remove("is-opened"), t && (t.classList.add("is-animating"), t.classList.remove("is-opened")), (e.style.maxHeight === "" || e.style.maxHeight === "none") && (e.style.maxHeight = e.scrollHeight + "px", e.offsetHeight), e.style.overflow = "hidden", e.style.maxHeight = "0px";
 			let n = () => {
-				e.removeEventListener("transitionend", n), !I.value && (J(), e.classList.remove("is-animating"), t && t.classList.remove("is-animating"), z.value = !1);
+				e.removeEventListener("transitionend", n), !L.value && (Y(), e.classList.remove("is-animating"), t && t.classList.remove("is-animating"), B.value = !1);
 			};
 			e.addEventListener("transitionend", n);
 		}
-		return m(() => {
-			let e = U.value;
+		return p(() => {
+			let e = W.value;
 			if (!e) return;
-			e.style.willChange = "max-height", k.noAnimation ? $(I.value) : I.value ? Z() : Q();
-			let t = W.value;
-			!k.noAnimation && "ResizeObserver" in window && t && (K = new ResizeObserver(() => {
-				X();
-			}), K.observe(t));
-		}), p(() => {
-			J(), K &&= (K.disconnect(), null);
-		}), b(I, (e) => {
+			e.style.willChange = "max-height", k.noAnimation ? $(L.value) : L.value ? Z() : Q();
+			let t = G.value;
+			!k.noAnimation && "ResizeObserver" in window && t && (q = new ResizeObserver(() => {
+				re();
+			}), q.observe(t));
+		}), te(() => {
+			Y(), q &&= (q.disconnect(), null);
+		}), b(L, (e) => {
 			if (k.noAnimation) {
 				$(e);
 				return;
 			}
-			e ? re() : ie();
-		}), (e, t) => (h(), o("div", u({
+			e ? ie() : ae();
+		}), (e, t) => (m(), o("div", u({
 			class: "s-collapsible-panel",
 			ref_key: "rootEl",
-			ref: G,
+			ref: K,
 			"data-density": l.density,
 			"data-surface": l.surface,
 			"data-content-padding": l.contentPadding
-		}, v(M).bindings()), [s("div", w, [s("div", T, [c(n, {
-			id: v(L),
+		}, _(M).bindings()), [s("div", w, [s("div", T, [c(n, {
+			id: _(R),
 			appearance: l.headerVariant === "minimal" ? "ghost" : "soft",
 			severity: "secondary",
 			shape: "row",
 			size: N.value,
+			density: P.value,
 			width: "full",
 			"content-align": "between",
 			disabled: l.disabled,
 			disclosure: {
-				expanded: v(I),
-				controls: v(R)
+				expanded: _(L),
+				controls: _(z)
 			},
-			onClick: H
+			onClick: U
 		}, {
 			default: x(() => [c(r, {
 				title: l.summary,
@@ -192,22 +193,23 @@ var C = [
 			"id",
 			"appearance",
 			"size",
+			"density",
 			"disabled",
 			"disclosure"
-		])]), j.value ? (h(), o("div", E, [_(e.$slots, "actions", {}, void 0, !0)])) : a("", !0)]), S(s("div", {
-			id: v(R),
-			"aria-labelledby": v(L),
+		])]), j.value ? (m(), o("div", E, [g(e.$slots, "actions", {}, void 0, !0)])) : a("", !0)]), S(s("div", {
+			id: _(z),
+			"aria-labelledby": _(R),
 			role: "region",
 			ref_key: "contentWrapEl",
-			ref: U,
+			ref: W,
 			class: f(["s-collapsible-panel-content w-full min-w-0", [{ "min-h-0 flex flex-col grow overflow-y-auto overflow-x-hidden": l.fill }, { "no-transition": l.noAnimation }]]),
-			"data-open": v(I),
+			"data-open": _(L),
 			style: ee({ ...l.noAnimation ? { transition: "none" } : {} })
 		}, [s("div", {
 			ref_key: "contentInnerEl",
-			ref: W,
+			ref: G,
 			class: "s-collapsible-panel-inner"
-		}, [V.value ? _(e.$slots, "default", {}, void 0, !0, 0) : a("", !0)], 512)], 14, D), [[te, B.value]])], 16, C));
+		}, [H.value ? g(e.$slots, "default", {}, void 0, !0, 0) : a("", !0)], 512)], 14, D), [[y, V.value]])], 16, C));
 	}
 });
 //#endregion

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

@@ -1,7 +1,9 @@
-import { DialogSurfaceDrawerPlacement, DialogSurfaceDrawerSize, DialogSurfaceHeadingLevel } from '../_internal/dialogSurface';
+import { DialogSurfaceDrawerPlacement, DialogSurfaceDrawerSize, DialogSurfaceHeadingLevel, DialogSurfaceDrawerScope, DialogSurfaceDrawerScrollBehavior } from '../_internal/dialogSurface';
 export type DrawerSize = DialogSurfaceDrawerSize;
 export type DrawerPlacement = DialogSurfaceDrawerPlacement;
 export type DrawerHeadingLevel = DialogSurfaceHeadingLevel;
+export type DrawerScope = DialogSurfaceDrawerScope;
+export type DrawerScrollBehavior = DialogSurfaceDrawerScrollBehavior;
 export interface Props {
     open: boolean;
     title?: string;
@@ -12,6 +14,12 @@ export interface Props {
     ariaLabel?: string;
     /** Уровень видимого заголовка в document outline. / Visible title level in the document outline. */
     headingLevel?: DrawerHeadingLevel;
+    /** viewport is globally modal; contained uses the nearest SOverlayHost and keeps external controls available. */
+    scope?: DrawerScope;
+    /** Percentage of the contained host along the placement axis, finite and in (0,100]. Forbidden for viewport. */
+    extent?: number;
+    /** body owns padded native scrolling; content delegates unpadded fill layout to a child viewport. */
+    scrollBehavior?: DrawerScrollBehavior;
 }
 declare var __VLS_28: {}, __VLS_30: {}, __VLS_33: {
     close: () => void;
@@ -34,8 +42,11 @@ declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, i
     size: DrawerSize;
     closable: boolean;
     ariaLabel: string;
+    scope: DrawerScope;
+    scrollBehavior: DrawerScrollBehavior;
     placement: DrawerPlacement;
     mobileFullScreen: boolean;
+    extent: number;
     headingLevel: DrawerHeadingLevel;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/src/components/shared/containers/SDrawer.vue.js

@@ -1,8 +1,8 @@
-import "../../../../assets/src/components/shared/containers/SDrawer.css_vue_type_style_index_0_src_091d7325_scoped_091d7325_lang.css";
+import "../../../../assets/src/components/shared/containers/SDrawer.css_vue_type_style_index_0_src_61cf20dd_scoped_61cf20dd_lang.css";
 import e from "../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./SDrawer.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                     */
 //#region src/components/shared/containers/SDrawer.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-091d7325"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-61cf20dd"]]);
 //#endregion
 export { n as default };