@pgcorp/ui-kit 0.13.0 → 0.15.0

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

@@ -1,4 +1,6 @@
 import { SDisclosureSummaryBadge, SDisclosureSummaryCase, SDisclosureSummaryFact, SDisclosureSummaryState, SDisclosureSummaryStatus, SDisclosureSummaryTypography } from './disclosureSummary';
+/** Семантика disclosure content: landmark section или локальная именованная группа. / Disclosure-content semantics: a landmark section or a local named group. */
+export type SCollapsiblePanelContentRole = 'region' | 'group';
 export interface Props {
     summary: string;
     summaryTypography?: SDisclosureSummaryTypography;
@@ -12,6 +14,8 @@ export interface Props {
     fill?: boolean;
     density?: 'comfortable' | 'compact' | 'dense';
     contentPadding?: 'density' | 'none';
+    /** region включается в landmark navigation; group предназначен для повторяемых и вложенных сведений. / region participates in landmark navigation; group is intended for repeated and nested details. */
+    contentRole?: SCollapsiblePanelContentRole;
     headerVariant?: 'default' | 'minimal';
     lazy?: boolean;
     noAnimation?: boolean;
@@ -43,6 +47,7 @@ declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, i
     summaryBadges: readonly SDisclosureSummaryBadge[];
     summaryStatus: SDisclosureSummaryStatus;
     contentPadding: "density" | "none";
+    contentRole: SCollapsiblePanelContentRole;
     headerVariant: "default" | "minimal";
     noAnimation: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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_71824088_scoped_71824088_lang.css";
+import "../../../../assets/src/components/shared/containers/SCollapsiblePanel.css_vue_type_style_index_0_src_db85261d_scoped_db85261d_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-71824088"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-db85261d"]]);
 //#endregion
 export { n as default };

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

@@ -1,21 +1,26 @@
-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 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";
+import { isFocusableElement as e } from "../../../internal/focusNavigation.js";
+import { validateExactString as t } from "../../../internal/runtimeContract.js";
+import { useDisclosure as n } from "../../../composables/useDisclosure.js";
+import { useOwnedAttrs as r } from "../../../internal/ownedAttrs.js";
+import i from "../controls/SButton.vue.js";
+import a from "../_internal/SDisclosureSummary.vue.js";
+import { computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeProps as f, nextTick as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as g, onMounted as _, openBlock as v, ref as y, renderSlot as b, unref as x, useSlots as S, vShow as ee, watch as te, withCtx as C, withDirectives as w } from "vue";
 //#region src/components/shared/containers/SCollapsiblePanel.vue?vue&type=script&setup=true&lang.ts
-var C = [
+var ne = [
 	"data-density",
 	"data-surface",
 	"data-content-padding"
-], w = { class: "s-collapsible-panel-header" }, T = { class: "s-collapsible-panel-trigger" }, E = {
+], T = { class: "s-collapsible-panel-header" }, E = { class: "s-collapsible-panel-trigger" }, D = {
 	key: 0,
 	class: "s-collapsible-panel-actions"
-}, D = [
+}, O = [
 	"id",
 	"aria-labelledby",
+	"role",
+	"inert",
+	"aria-hidden",
 	"data-open"
-], O = /*@__PURE__*/ l({
+], k = /*@__PURE__*/ d({
 	inheritAttrs: !1,
 	__name: "SCollapsiblePanel",
 	props: {
@@ -40,6 +45,7 @@ var C = [
 		},
 		density: { default: "comfortable" },
 		contentPadding: { default: "density" },
+		contentRole: { default: "region" },
 		headerVariant: { default: "default" },
 		lazy: {
 			type: Boolean,
@@ -57,128 +63,122 @@ var C = [
 		}
 	},
 	emits: ["update:open"],
-	setup(l, { emit: O }) {
-		let k = l, ne = v(), A = O, j = i(() => !!ne.actions), M = t({
+	setup(d, { emit: k }) {
+		let A = d, re = S(), ie = k, ae = o(() => !!re.actions), oe = r({
 			component: "SCollapsiblePanel",
 			owner: "collapsible panel root"
-		}), 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 : F,
-			defaultOpen: k.open === void 0 ? k.defaultOpen : void 0,
-			disabled: () => k.disabled,
-			onUpdate: (e) => A("update:open", e)
-		}), { 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 && (H.value = !0);
-		});
-		function U() {
-			if (k.disabled) return;
-			if (k.noAnimation) {
-				I.toggle();
-				return;
-			}
-			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();
+		}), se = o(() => t("SCollapsiblePanel", "contentRole", A.contentRole, ["region", "group"])), ce = o(() => A.density === "comfortable" ? "md" : "sm"), le = o(() => A.density === "comfortable" ? "default" : "compact"), j = o(() => A.open ?? !1), M = n({
+			id: A.id,
+			open: A.open === void 0 ? void 0 : j,
+			defaultOpen: A.open === void 0 ? A.defaultOpen : void 0,
+			disabled: () => A.disabled,
+			onUpdate: (e) => ie("update:open", e)
+		}), { isOpen: N, triggerId: P, panelId: F } = M, I = y(!1), L = o(() => N.value || I.value), R = y(!A.lazy || N.value), z = y(null), B = y(null), V = y(null), H = y(null), U = null, W = null, G = 0, K = 0, q = !1;
+		function ue() {
+			M.toggle();
+		}
+		function J() {
+			W !== null && (window.cancelAnimationFrame(W), W = null);
 		}
-		let W = h(null), G = h(null), K = h(null), q = null, J = null;
 		function Y() {
-			J !== null && (window.cancelAnimationFrame(J), J = null);
+			let e = B.value;
+			e && (e.classList.remove("is-animating"), e.classList.add("is-opened"), e.style.transition = A.noAnimation ? "none" : "", e.style.overflow = "", e.style.maxHeight = "", H.value?.classList.remove("is-animating"), H.value?.classList.add("is-opened"));
 		}
 		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);
+			let e = B.value;
+			e && (e.classList.remove("is-animating", "is-opened"), e.style.transition = A.noAnimation ? "none" : "", e.style.maxHeight = "0px", e.style.overflow = "hidden", H.value?.classList.remove("is-animating", "is-opened"));
 		}
-		function re() {
-			Y(), J = window.requestAnimationFrame(() => {
-				J = null, X();
-			});
-		}
-		function Z() {
-			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 = K.value;
-			t && (t.classList.remove("is-animating"), t.classList.add("is-opened"));
+		function Z(e, t) {
+			return !q && t === G && N.value === e;
 		}
-		function Q() {
-			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 = K.value;
-			t && (t.classList.remove("is-animating"), t.classList.remove("is-opened"));
+		function Q(e, t) {
+			Z(e, t) && (K += 1, J(), e ? Y() : X(), I.value = !1);
 		}
-		async function $(e) {
-			e ? (await d(), H.value = !0, Z()) : Q(), B.value = !1;
+		function $(e, t, n) {
+			let r = ++K, i = e.getAnimations().filter((t) => t.effect instanceof KeyframeEffect && t.effect.target === e && t.effect.pseudoElement === null && "transitionProperty" in t && t.transitionProperty === "max-height" && t.playState !== "idle" && t.playState !== "finished");
+			if (i.length === 0) {
+				Q(t, n);
+				return;
+			}
+			let a = () => Z(t, n) && B.value === e && r === K;
+			Promise.all(i.map((e) => e.finished)).then(() => {
+				a() && Q(t, n);
+			}, (r) => {
+				if (!(r instanceof DOMException) || r.name !== "AbortError") throw r;
+				a() && $(e, t, n);
+			});
 		}
-		async function ie() {
-			let e = W.value;
-			if (!e) return;
-			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), 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 de() {
+			let e = B.value, t = V.value;
+			if (q || !e || !t || !N.value || !I.value) return;
+			let n = `${t.scrollHeight}px`;
+			e.style.maxHeight !== n && (K += 1, e.style.maxHeight = n, $(e, !0, G));
 		}
-		function ae() {
-			let e = W.value;
-			if (!e) return;
-			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), !L.value && (Y(), e.classList.remove("is-animating"), t && t.classList.remove("is-animating"), B.value = !1);
-			};
-			e.addEventListener("transitionend", n);
+		function fe() {
+			q || (J(), W = window.requestAnimationFrame(() => {
+				W = null, de();
+			}));
 		}
-		return p(() => {
-			let e = W.value;
-			if (!e) return;
-			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;
+		async function pe(t) {
+			let n = ++G;
+			K += 1, J(), t && (R.value = !0);
+			let r = B.value, i = V.value;
+			if (!r || !i) return;
+			let a = r.ownerDocument.activeElement, o = z.value;
+			if (!t && !A.disabled && a && r.contains(a) && o) {
+				let t = o.getElement();
+				t.isConnected && e(t) && o.focus({ preventScroll: !0 });
+			}
+			let s = r.getBoundingClientRect().height;
+			if (I.value = !A.noAnimation, await p(), Z(t, n) && B.value === r && V.value === i) {
+				if (A.noAnimation) {
+					Q(t, n);
+					return;
+				}
+				r.classList.remove("is-opened"), r.classList.add("is-animating"), H.value?.classList.remove("is-opened"), H.value?.classList.add("is-animating"), r.style.transition = "none", r.style.overflow = "hidden", r.style.maxHeight = `${s}px`, r.offsetHeight, r.style.transition = "", r.style.maxHeight = `${t ? i.scrollHeight : 0}px`, $(r, t, n);
 			}
-			e ? ie() : ae();
-		}), (e, t) => (m(), o("div", u({
+		}
+		return _(() => {
+			N.value ? Y() : X();
+			let e = V.value;
+			"ResizeObserver" in window && e && (U = new ResizeObserver(fe), U.observe(e));
+		}), g(() => {
+			q = !0, G += 1, K += 1, J(), U?.disconnect(), U = null;
+		}), te([N, () => A.noAnimation], ([e]) => {
+			pe(e);
+		}), (e, t) => (v(), c("div", f({
 			class: "s-collapsible-panel",
 			ref_key: "rootEl",
-			ref: K,
-			"data-density": l.density,
-			"data-surface": l.surface,
-			"data-content-padding": l.contentPadding
-		}, _(M).bindings()), [s("div", w, [s("div", T, [c(n, {
-			id: _(R),
-			appearance: l.headerVariant === "minimal" ? "ghost" : "soft",
+			ref: H,
+			"data-density": d.density,
+			"data-surface": d.surface,
+			"data-content-padding": d.contentPadding
+		}, x(oe).bindings()), [l("div", T, [l("div", E, [u(i, {
+			ref_key: "triggerApi",
+			ref: z,
+			id: x(P),
+			appearance: d.headerVariant === "minimal" ? "ghost" : "soft",
 			severity: "secondary",
 			shape: "row",
-			size: N.value,
-			density: P.value,
+			size: ce.value,
+			density: le.value,
 			width: "full",
 			"content-align": "between",
-			disabled: l.disabled,
+			disabled: d.disabled,
 			disclosure: {
-				expanded: _(L),
-				controls: _(z)
+				expanded: x(N),
+				controls: x(F)
 			},
-			onClick: U
+			onClick: ue
 		}, {
-			default: x(() => [c(r, {
-				title: l.summary,
-				typography: l.summaryTypography,
-				casing: l.summaryCase,
-				state: l.summaryState,
-				facts: l.summaryFacts,
-				badges: l.summaryBadges,
-				status: l.summaryStatus
+			default: C(() => [u(a, {
+				title: d.summary,
+				typography: d.summaryTypography,
+				casing: d.summaryCase,
+				state: d.summaryState,
+				facts: d.summaryFacts,
+				badges: d.summaryBadges,
+				status: d.summaryStatus
 			}, null, 8, [
 				"title",
 				"typography",
@@ -196,21 +196,23 @@ var C = [
 			"density",
 			"disabled",
 			"disclosure"
-		])]), 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",
+		])]), ae.value ? (v(), c("div", D, [b(e.$slots, "actions", {}, void 0, !0)])) : s("", !0)]), w(l("div", {
+			id: x(F),
+			"aria-labelledby": x(P),
+			role: se.value,
+			inert: !x(N) || void 0,
+			"aria-hidden": !x(N),
 			ref_key: "contentWrapEl",
-			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": _(L),
-			style: ee({ ...l.noAnimation ? { transition: "none" } : {} })
-		}, [s("div", {
+			ref: B,
+			class: m(["s-collapsible-panel-content w-full min-w-0", [{ "min-h-0 flex flex-col grow overflow-y-auto overflow-x-hidden": d.fill }, { "no-transition": d.noAnimation }]]),
+			"data-open": x(N),
+			style: h({ ...d.noAnimation ? { transition: "none" } : {} })
+		}, [l("div", {
 			ref_key: "contentInnerEl",
-			ref: G,
+			ref: V,
 			class: "s-collapsible-panel-inner"
-		}, [H.value ? g(e.$slots, "default", {}, void 0, !0, 0) : a("", !0)], 512)], 14, D), [[y, V.value]])], 16, C));
+		}, [R.value ? b(e.$slots, "default", {}, void 0, !0, 0) : s("", !0)], 512)], 14, O), [[ee, L.value]])], 16, ne));
 	}
 });
 //#endregion
-export { O as default };
+export { k as default };

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,16 +14,22 @@ 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: {
+declare var __VLS_17: {}, __VLS_19: {}, __VLS_22: {
     close: () => void;
 };
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_28) => any;
+    header?: (props: typeof __VLS_17) => any;
 } & {
-    default?: (props: typeof __VLS_30) => any;
+    default?: (props: typeof __VLS_19) => any;
 } & {
-    footer?: (props: typeof __VLS_33) => any;
+    footer?: (props: typeof __VLS_22) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
@@ -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,5 @@
-import "../../../../assets/src/components/shared/containers/SDrawer.css_vue_type_style_index_0_src_091d7325_scoped_091d7325_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                                                                     */
+import e from "./SDrawer.vue_vue_type_script_setup_true_lang.js";
 //#region src/components/shared/containers/SDrawer.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-091d7325"]]);
+var t = e;
 //#endregion
-export { n as default };
+export { t as default };