@pgcorp/ui-kit 0.12.0 → 0.13.0

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/SModal.vue.js

@@ -1,8 +1,8 @@
-import "../../../../assets/src/components/shared/containers/SModal.css_vue_type_style_index_0_src_23373daf_scoped_23373daf_lang.css";
+import "../../../../assets/src/components/shared/containers/SModal.css_vue_type_style_index_0_src_0dc51b74_scoped_0dc51b74_lang.css";
 import e from "../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./SModal.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                    */
 //#region src/components/shared/containers/SModal.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-23373daf"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-0dc51b74"]]);
 //#endregion
 export { n as default };

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

@@ -3,9 +3,9 @@ import { useUiKitLocale as t } from "../../../composables/useUiKitLocale.js";
 import { useOwnedAttrs as n } from "../../../internal/ownedAttrs.js";
 import { validateDialogSurfaceHeadingLevel as r } from "../_internal/dialogSurface.js";
 import i from "../_internal/SDialogSurface.vue.js";
-import { Teleport as a, Transition as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, createVNode as p, defineComponent as m, mergeProps as h, normalizeClass as g, normalizeStyle as _, openBlock as v, renderSlot as y, toRef as b, unref as x, withCtx as S } from "vue";
+import { Teleport as a, Transition as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, createVNode as p, defineComponent as m, mergeProps as h, normalizeClass as g, normalizeStyle as _, onErrorCaptured as v, openBlock as y, renderSlot as b, toRef as x, unref as S, useId as C, withCtx as w } from "vue";
 //#region src/components/shared/containers/SModal.vue?vue&type=script&setup=true&lang.ts
-var C = /*@__PURE__*/ m({
+var T = /*@__PURE__*/ m({
 	inheritAttrs: !1,
 	__name: "SModal",
 	props: {
@@ -27,71 +27,77 @@ var C = /*@__PURE__*/ m({
 		headingLevel: { default: 2 }
 	},
 	emits: ["update:open", "opened"],
-	setup(m, { emit: C }) {
-		let w = m, { t: T } = t(), E = C;
-		function D() {
-			E("update:open", !1);
+	setup(m, { emit: T }) {
+		let E = m, { t: D } = t(), O = `s-modal-${C()}`, k = T;
+		function A() {
+			k("update:open", !1);
 		}
-		let O = s(() => w.fullScreen || w.layout === "mobile-fullscreen"), k = n({
+		let j = s(() => E.fullScreen || E.layout === "mobile-fullscreen"), M = n({
 			component: "SModal",
 			owner: "modal dialog surface"
-		}), A = s(() => w.ariaLabel ?? T("dialog.modal")), j = s(() => r("SModal", w.headingLevel));
-		j.value;
-		let M = s(() => ({
+		}), N = s(() => E.ariaLabel ?? D("dialog.modal")), P = s(() => r("SModal", E.headingLevel));
+		P.value;
+		let F = s(() => ({
 			kind: "modal",
-			size: w.size,
-			fullscreen: O.value,
-			surface: w.surface,
-			scrollBehavior: w.scrollBehavior
-		})), { setPanelElement: N, backdropStyle: P, surfaceStyle: F } = e({
-			open: b(w, "open"),
-			closable: b(w, "closable"),
-			requestClose: D,
-			opened: () => E("opened")
-		});
-		return (e, t) => (v(), c(a, { to: "body" }, [p(o, { name: "s-modal-backdrop" }, {
-			default: S(() => [m.open ? (v(), u("div", {
+			size: E.size,
+			fullscreen: j.value,
+			surface: E.surface,
+			scrollBehavior: E.scrollBehavior
+		})), { setPanelElement: I, backdropStyle: L, surfaceStyle: R, dispose: z } = e({
+			open: x(E, "open"),
+			closable: x(E, "closable"),
+			requestClose: A,
+			opened: () => k("opened")
+		}), B = () => {
+			if (typeof document < "u") for (let e of document.querySelectorAll("[data-s-modal-owner]")) e.dataset.sModalOwner === O && e.remove();
+		};
+		return v(() => {
+			z(), B(), queueMicrotask(B);
+		}), (e, t) => (y(), c(a, { to: "body" }, [p(o, { name: "s-modal-backdrop" }, {
+			default: w(() => [m.open ? (y(), u("div", {
 				key: 0,
 				class: "s-modal-backdrop",
-				style: _(x(P)),
+				"data-s-modal-owner": O,
+				style: _(S(L)),
 				"aria-hidden": "true"
 			}, null, 4)) : l("", !0)]),
 			_: 1
 		}), p(o, { name: "s-modal-panel" }, {
-			default: S(() => [m.open ? (v(), u("div", {
+			default: w(() => [m.open ? (y(), u("div", {
 				key: 0,
 				class: "s-modal-container",
-				style: _(x(F))
-			}, [d("div", { class: g(["s-modal-panel-container", { "s-modal-panel-container--fullscreen": O.value }]) }, [p(i, h(x(k).bindings(), {
-				presentation: M.value,
+				"data-s-modal-owner": O,
+				style: _(S(R))
+			}, [d("div", { class: g(["s-modal-panel-container", { "s-modal-panel-container--fullscreen": j.value }]) }, [p(i, h(S(M).bindings(), {
+				presentation: F.value,
 				title: m.title,
-				"accessible-name": A.value,
-				"heading-level": j.value,
+				"accessible-name": N.value,
+				"heading-level": P.value,
 				closable: m.closable,
-				"set-surface-element": x(N),
-				onRequestClose: D
+				"set-surface-element": S(I),
+				onRequestClose: A
 			}), f({
-				default: S(() => [y(e.$slots, "default", {}, void 0, !0)]),
+				default: w(() => [b(e.$slots, "default", {}, void 0, !0)]),
 				_: 2
 			}, [
 				e.$slots.header ? {
 					name: "header",
-					fn: S(() => [y(e.$slots, "header", {}, void 0, !0)]),
+					fn: w(() => [b(e.$slots, "header", {}, void 0, !0)]),
 					key: "0"
 				} : void 0,
 				e.$slots.footer ? {
 					name: "footer",
-					fn: S(({ close: t }) => [y(e.$slots, "footer", { close: t }, void 0, !0)]),
+					fn: w(({ close: t }) => [b(e.$slots, "footer", { close: t }, void 0, !0)]),
 					key: "1"
 				} : void 0,
 				e.$slots["footer-start"] ? {
 					name: "footer-start",
-					fn: S(({ close: t }) => [y(e.$slots, "footer-start", { close: t }, void 0, !0)]),
+					fn: w(({ close: t }) => [b(e.$slots, "footer-start", { close: t }, void 0, !0)]),
 					key: "2"
 				} : void 0,
 				e.$slots["footer-end"] ? {
 					name: "footer-end",
-					fn: S(({ close: t }) => [y(e.$slots, "footer-end", { close: t }, void 0, !0)]),
+					fn: w(({ close: t }) => [b(e.$slots, "footer-end", { close: t }, void 0, !0)]),
 					key: "3"
 				} : void 0
 			]), 1040, [
@@ -107,4 +113,4 @@ var C = /*@__PURE__*/ m({
 	}
 });
 //#endregion
-export { C as default };
+export { T as default };

package/dist/src/components/shared/controls/SDropdownMenu.vue.d.ts

@@ -1,11 +1,16 @@
 import { VNodeChild, VNodeRef } from 'vue';
 import { OwnedAttributeBindings } from '../../../internal/ownedAttrs';
 import { SMenuActivationEvent, SMenuEntry, SMenuSelectableEntry } from './menu';
-type __VLS_Props = {
+export type SDropdownMenuPlacement = 'auto' | 'bottom' | 'top';
+export interface Props {
     items: readonly SMenuEntry[];
     align?: 'left' | 'right';
     menuLabel?: string;
-};
+    open?: boolean;
+    defaultOpen?: boolean;
+    placement?: SDropdownMenuPlacement;
+    closeOnSelect?: boolean;
+}
 export type SDropdownMenuTriggerAttrs = OwnedAttributeBindings<'SDropdownMenu'> & {
     readonly ref: VNodeRef;
     readonly 'aria-haspopup': 'menu';
@@ -20,13 +25,19 @@ type __VLS_Slots = {
         triggerAttrs: SDropdownMenuTriggerAttrs;
     }) => VNodeChild;
 };
-declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (entry: SMenuSelectableEntry, event: SMenuActivationEvent) => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     onSelect?: ((entry: SMenuSelectableEntry, event: SMenuActivationEvent) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
+    open: boolean;
     align: "left" | "right";
+    placement: SDropdownMenuPlacement;
     menuLabel: string;
+    defaultOpen: boolean;
+    closeOnSelect: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/src/components/shared/controls/SDropdownMenu.vue.js

@@ -1,8 +1,8 @@
-import "../../../../assets/src/components/shared/controls/SDropdownMenu.css_vue_type_style_index_0_src_b854a89e_scoped_b854a89e_lang.css";
+import "../../../../assets/src/components/shared/controls/SDropdownMenu.css_vue_type_style_index_0_src_1ccb9efc_scoped_1ccb9efc_lang.css";
 import e from "../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./SDropdownMenu.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                           */
 //#region src/components/shared/controls/SDropdownMenu.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-b854a89e"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-1ccb9efc"]]);
 //#endregion
 export { n as default };

package/dist/src/components/shared/controls/SDropdownMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,12 @@
 import { useUiKitLocale as e } from "../../../composables/useUiKitLocale.js";
 import { useOwnedAttrs as t } from "../../../internal/ownedAttrs.js";
-import n from "./SButton.vue.js";
-import { useMenuLayer as r } from "../../../internal/useMenuLayer.js";
-import i from "../_internal/SMenuLayer.vue.js";
-import { validateSMenuEntries as a } from "./menu.js";
-import o from "./SMenuSurface.vue.js";
-import { Teleport as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createVNode as f, defineComponent as p, mergeProps as m, nextTick as h, onMounted as g, openBlock as _, ref as v, renderSlot as y, unref as b, useId as x, useSlots as S, watchEffect as C, withCtx as w } from "vue";
+import { validateBoolean as n, validateExactString as r } from "../../../internal/runtimeContract.js";
+import i from "./SButton.vue.js";
+import { useMenuLayer as a } from "../../../internal/useMenuLayer.js";
+import o from "../_internal/SMenuLayer.vue.js";
+import { validateSMenuEntries as ee } from "./menu.js";
+import s from "./SMenuSurface.vue.js";
+import { Teleport as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createVNode as te, defineComponent as p, mergeProps as m, nextTick as h, onMounted as ne, openBlock as g, ref as _, renderSlot as v, unref as y, useId as b, useSlots as x, watch as S, watchEffect as C, withCtx as w } from "vue";
 //#region src/components/shared/controls/SDropdownMenu.vue?vue&type=script&setup=true&lang.ts
 var T = { class: "s-dropdown-menu" }, E = /*@__PURE__*/ p({
 	inheritAttrs: !1,
@@ -13,14 +14,27 @@ var T = { class: "s-dropdown-menu" }, E = /*@__PURE__*/ p({
 	props: {
 		items: {},
 		align: { default: "right" },
-		menuLabel: { default: void 0 }
+		menuLabel: { default: void 0 },
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			default: !1
+		},
+		placement: { default: "auto" },
+		closeOnSelect: {
+			type: Boolean,
+			default: !0
+		}
 	},
-	emits: ["select"],
+	emits: ["select", "update:open"],
 	setup(p, { emit: E }) {
-		let D = p, { t: O } = e(), k = c(() => D.menuLabel ?? O("dialog.moreActions")), A = E, j = S(), M = t({
+		let D = p, { t: re } = e(), O = l(() => D.menuLabel ?? re("dialog.moreActions")), k = E, A = x(), j = t({
 			component: "SDropdownMenu",
 			owner: "menu trigger"
-		}), N = v(null), P = v(null), F = null, I = c(() => N.value?.getElement() ?? null), { isOpen: L, position: R, zIndex: z, close: B, closeForTab: V, open: H, toggle: U } = r(I), W = `s-dropdown-menu-${x()}`, G = v("first"), K = !!j.default;
+		}), M = _(null), N = _(null), P = null, F = l(() => M.value?.getElement() ?? null), { isOpen: I, position: L, zIndex: R, close: z, closeForTab: B, open: V } = a(F, { onRequestDismiss: $ }), H = `s-dropdown-menu-${b()}`, U = _("first"), W = !!A.default, G = l(() => D.open !== void 0), K = l(() => G.value ? D.open === !0 : I.value);
 		function q(e) {
 			if (e === null) return null;
 			if (e instanceof HTMLElement) return e;
@@ -31,97 +45,119 @@ var T = { class: "s-dropdown-menu" }, E = /*@__PURE__*/ p({
 			return n;
 		}
 		let J = (e) => {
-			if (e !== null && F !== null && e !== F) throw Error("SDropdownMenu: trigger binding must belong to exactly one UI-kit leaf");
-			F = e;
+			if (e !== null && P !== null && e !== P) throw Error("SDropdownMenu: trigger binding must belong to exactly one UI-kit leaf");
+			P = e;
 		}, Y = () => {
-			let e = M.bindings();
+			let e = j.bindings();
 			if (Object.prototype.hasOwnProperty.call(e, "onClick")) throw Error("SDropdownMenu: @click belongs to the typed triggerAttrs activation contract");
 			return {
 				...e,
 				ref: J,
 				"aria-haspopup": "menu",
-				"aria-expanded": L.value,
-				"aria-controls": W,
-				onClick: Z,
-				onKeydown: Q
+				"aria-expanded": K.value,
+				"aria-controls": H,
+				onClick: ae,
+				onKeydown: oe
 			};
 		};
 		function X(e) {
-			let t = q(F);
+			let t = q(P);
 			if (!t) throw Error("SDropdownMenu: expected exactly one trigger, received 0");
 			if (e?.currentTarget instanceof HTMLElement && e.currentTarget !== t) throw Error("SDropdownMenu: activation target does not match the registered trigger");
 			return t;
 		}
-		g(() => {
+		ne(() => {
 			let e = X();
-			if (e.getAttribute("aria-haspopup") !== "menu" || e.getAttribute("aria-controls") !== W) throw Error("SDropdownMenu: expected exactly one trigger, received 0");
+			if (e.getAttribute("aria-haspopup") !== "menu" || e.getAttribute("aria-controls") !== H) throw Error("SDropdownMenu: expected exactly one trigger, received 0");
+			(G.value && D.open || !G.value && D.defaultOpen) && Z();
 		});
-		function Z(e) {
-			let t = X(e);
-			G.value = "first", U({
-				type: "element",
-				element: t,
-				align: D.align
-			}, t);
+		function ie(e) {
+			let t = X(e), n = D.placement === "auto" ? void 0 : D.placement;
+			return {
+				anchor: {
+					type: "element",
+					element: t,
+					align: D.align,
+					...n === void 0 ? {} : { placement: n }
+				},
+				trigger: t
+			};
+		}
+		async function Z(e) {
+			if (I.value) return;
+			let { anchor: t, trigger: n } = ie(e);
+			await V(t, n);
+		}
+		function Q(e) {
+			K.value || (k("update:open", !0), G.value || Z(e));
+		}
+		function $(e) {
+			(K.value || I.value) && (k("update:open", !1), G.value || z(e));
+		}
+		function ae(e) {
+			K.value ? $("trigger") : (U.value = "first", Q(e));
+		}
+		async function oe(e) {
+			(e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), e.stopPropagation(), U.value = e.key === "ArrowUp" ? "last" : "first", K.value || Q(e), await h(), await h(), I.value && (U.value === "last" ? N.value?.focusLast() : N.value?.focusFirst()));
 		}
-		async function Q(e) {
-			if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
-			e.preventDefault(), e.stopPropagation();
-			let t = X(e);
-			G.value = e.key === "ArrowUp" ? "last" : "first", L.value || await H({
-				type: "element",
-				element: t,
-				align: D.align
-			}, t), await h(), G.value === "last" ? P.value?.focusLast() : P.value?.focusFirst();
+		function se(e, t) {
+			e.disabled || (k("select", e, t), D.closeOnSelect && $("selection"));
 		}
-		function $(e, t) {
-			e.disabled || (B("selection"), A("select", e, t));
+		function ce(e) {
+			B(e);
 		}
-		return C(() => {
-			if (a(D.items), !k.value.trim()) throw TypeError("SDropdownMenu: menuLabel must be a non-empty string");
-			if (D.align !== "left" && D.align !== "right") throw TypeError("SDropdownMenu: align must be 'left' or 'right'");
-		}), (e, t) => (_(), d("div", T, [b(K) ? y(e.$slots, "default", { triggerAttrs: Y() }, void 0, !0, 0) : (_(), l(n, m({ key: 1 }, Y(), {
+		return S(() => D.open, (e) => {
+			e !== void 0 && (e && !I.value ? Z() : !e && I.value && z("programmatic"));
+		}), S(() => [D.align, D.placement], () => {
+			I.value && (z("programmatic"), Z());
+		}), C(() => {
+			if (ee(D.items), !O.value.trim()) throw TypeError("SDropdownMenu: menuLabel must be a non-empty string");
+			r("SDropdownMenu", "align", D.align, ["left", "right"]), r("SDropdownMenu", "placement", D.placement, [
+				"auto",
+				"bottom",
+				"top"
+			]), n("SDropdownMenu", "defaultOpen", D.defaultOpen), n("SDropdownMenu", "closeOnSelect", D.closeOnSelect), D.open !== void 0 && n("SDropdownMenu", "open", D.open);
+		}), (e, t) => (g(), f("div", T, [y(W) ? v(e.$slots, "default", { triggerAttrs: Y() }, void 0, !0, 0) : (g(), u(i, m({ key: 1 }, Y(), {
 			label: "Опции",
 			disclosure: {
-				expanded: b(L),
-				controls: W
+				expanded: K.value,
+				controls: H
 			},
 			severity: "secondary"
-		}), null, 16, ["disclosure"])), (_(), l(s, { to: "body" }, [b(L) ? (_(), l(i, {
+		}), null, 16, ["disclosure"])), (g(), u(c, { to: "body" }, [y(I) ? (g(), u(o, {
 			key: 0,
 			ref_key: "layerRef",
-			ref: N,
+			ref: M,
 			kind: "dropdown",
-			"landmark-label": k.value,
-			position: b(R),
-			"z-index": b(z)
+			"landmark-label": O.value,
+			position: y(L),
+			"z-index": y(R)
 		}, {
-			default: w(() => [f(o, {
+			default: w(() => [te(s, {
 				ref_key: "menuSurfaceRef",
-				ref: P,
-				id: W,
-				label: k.value,
+				ref: N,
+				id: H,
+				label: O.value,
 				density: "compact",
 				autofocus: "",
-				"initial-focus": G.value,
+				"initial-focus": U.value,
 				items: p.items,
-				onDismissTree: t[0] ||= (e) => b(B)("outside"),
-				onEscape: t[1] ||= (e) => b(B)("escape"),
-				onFocusExit: t[2] ||= (e) => b(B)("outside"),
-				onSelect: $,
-				onTab: b(V)
+				onDismissTree: t[0] ||= (e) => $("outside"),
+				onEscape: t[1] ||= (e) => $("escape"),
+				onFocusExit: t[2] ||= (e) => $("outside"),
+				onSelect: se,
+				onTab: ce
 			}, null, 8, [
 				"label",
 				"initial-focus",
-				"items",
-				"onTab"
+				"items"
 			])]),
 			_: 1
 		}, 8, [
 			"landmark-label",
 			"position",
 			"z-index"
-		])) : u("", !0)]))]));
+		])) : d("", !0)]))]));
 	}
 });
 //#endregion