@pgcorp/ui-kit 0.14.0 → 0.15.0

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

@@ -1,24 +1,27 @@
 import { hasOwn as e } from "../../../internal/es2020.js";
 //#region src/components/shared/_internal/dialogSurface.ts
 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)}.`);
 }
-function n(e, t) {
+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 r = class extends Error {
+var i = class extends Error {
 	constructor(e, t) {
 		super(t), this.name = "DialogSurfaceContractError", this.code = e;
 	}
-}, i = /* @__PURE__ */ new Set([
+}, a = /* @__PURE__ */ new Set([
 	"kind",
 	"size",
 	"fullscreen",
 	"surface",
 	"scrollBehavior"
-]), a = /* @__PURE__ */ new Set([
+]), o = /* @__PURE__ */ new Set([
 	"kind",
 	"size",
 	"placement",
@@ -26,7 +29,7 @@ var r = class extends Error {
 	"scope",
 	"extent",
 	"scrollBehavior"
-]), o = /* @__PURE__ */ new Set([
+]), s = /* @__PURE__ */ new Set([
 	"sm",
 	"md",
 	"lg",
@@ -36,38 +39,38 @@ var r = class extends Error {
 	"4xl",
 	"wide",
 	"full"
-]), s = /* @__PURE__ */ new Set([
+]), c = /* @__PURE__ */ new Set([
 	"sm",
 	"md",
 	"lg"
-]), c = /* @__PURE__ */ new Set([
+]), l = /* @__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}`);
+]), 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 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)}`);
+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 (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");
+	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 r("invalid-presentation", `Неизвестный kind SDialogSurface: ${String(f.kind)}`);
+	throw new i("invalid-presentation", `Неизвестный kind SDialogSurface: ${String(n.kind)}`);
 }
 //#endregion
-export { r as DialogSurfaceContractError, f as assertDialogSurfacePresentation, t as validateDialogSurfaceHeadingLevel, n as validateDrawerExtent };
+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/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

@@ -21,15 +21,15 @@ export interface Props {
     /** 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;

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_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                                                                     */
+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-61cf20dd"]]);
+var t = e;
 //#endregion
-export { n as default };
+export { t as default };