@pgcorp/ui-kit 0.12.0 → 0.14.0

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

@@ -1,11 +1,12 @@
 import { findFocusableOwner as e } from "../../../internal/focusNavigation.js";
-import { useOwnedAttrs as t } from "../../../internal/ownedAttrs.js";
-import { useInteractiveLeafRegistration as n } from "../../../internal/passiveContentContract.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, Transition as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createVNode as p, defineComponent as m, mergeProps as h, openBlock as g, ref as _, renderSlot as v, unref as y, useId as b, watch as x, watchEffect as S, withCtx as C } from "vue";
+import { useOverlayAdmission as t } from "../../../internal/overlayHost.js";
+import { useOwnedAttrs as n } from "../../../internal/ownedAttrs.js";
+import { useInteractiveLeafRegistration as r } from "../../../internal/passiveContentContract.js";
+import { useMenuLayer as i } from "../../../internal/useMenuLayer.js";
+import a from "../_internal/SMenuLayer.vue.js";
+import { validateSMenuEntries as o } from "./menu.js";
+import s from "./SMenuSurface.vue.js";
+import { Teleport as c, Transition as ee, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createVNode as p, defineComponent as m, mergeProps as te, nextTick as h, onBeforeUnmount as g, onUpdated as _, openBlock as v, ref as y, renderSlot as b, unref as x, useId as ne, watch as S, watchEffect as re, withCtx as C } from "vue";
 //#region src/components/shared/controls/SContextMenu.vue?vue&type=script&setup=true&lang.ts
 var w = ["data-layout"], T = /*@__PURE__*/ m({
 	inheritAttrs: !1,
@@ -19,58 +20,129 @@ var w = ["data-layout"], T = /*@__PURE__*/ m({
 		trigger: { default: "contextmenu" },
 		boundaryLayout: { default: "block" }
 	},
-	emits: ["select"],
+	emits: ["before-open", "select"],
 	setup(m, { emit: T }) {
-		let E = m, D = T, O = t({
+		let E = m, D = T, ie = n({
 			component: "SContextMenu",
 			owner: "interaction boundary root"
-		});
-		n({
+		}), O = t();
+		r({
 			owner: "SContextMenu",
 			active: () => E.enabled
 		});
-		let k = `s-context-menu-${b()}`, A = _("first"), j = _(null), M = l(() => j.value?.getElement() ?? null), { isOpen: N, position: P, zIndex: F, open: I, close: L, closeForTab: R } = r(M), z = l(() => E.enabled ? {
+		let k = `s-context-menu-${ne()}`, A = y("first"), j = y(null), M = y(null), N = y(null), P = y(!1), F = l(() => M.value?.getElement() ?? null), I = null, { isOpen: L, position: R, availableSize: z, zIndex: B, open: V, close: H, closeForTab: U } = i(M, { onRequestDismiss: (e) => q(e) }), W = l(() => L.value && P.value ? k : void 0), G = l(() => E.enabled ? {
+			"aria-haspopup": "menu",
+			"aria-expanded": L.value,
+			"aria-controls": W.value,
+			onKeydown: se
+		} : {}), K = l(() => E.enabled ? {
 			"aria-haspopup": "menu",
-			"aria-expanded": N.value,
-			"aria-controls": k,
-			onKeydown: V
-		} : {}), B = async (t) => {
-			if (!E.enabled) return;
-			A.value = "first";
-			let n = t.currentTarget instanceof Element ? t.currentTarget : null, r = e(t.target, n) ?? e(document.activeElement), i = t.clientX === 0 && t.clientY === 0 && t.detail === 0;
-			await I(i && r ? {
+			"aria-controls": W.value,
+			onKeydown: oe
+		} : {});
+		function q(e = "programmatic") {
+			let t = I;
+			I = null, t?.release(), P.value = !1, H(e);
+		}
+		let J = (t) => I === t && E.enabled && O.value && j.value === t.boundary && t.boundary.isConnected && t.target.isConnected && t.boundary.contains(t.target) && (!t.focusOwner || t.focusOwner.isConnected && e(t.focusOwner) === t.focusOwner), Y = () => {
+			let e = I;
+			e && !J(e) && q("outside");
+		}, ae = async (e) => {
+			if (await h(), I !== e) return;
+			if (!J(e)) {
+				q("outside");
+				return;
+			}
+			if (e.phase = "mounting", A.value = e.initialFocus, await V(e.anchor, e.focusOwner), I !== e) return;
+			if (!J(e) || !L.value || !F.value?.isConnected) {
+				q("outside");
+				return;
+			}
+			if (P.value = !0, await h(), I !== e) return;
+			if (!J(e) || !L.value || !F.value?.isConnected) {
+				q("outside");
+				return;
+			}
+			let t = N.value;
+			if (!t) throw q("outside"), Error("SContextMenu: current menu surface is unavailable after opening");
+			e.phase = "open", e.initialFocus === "last" ? t.focusLast() : t.focusFirst();
+		}, X = (e, t, n, r) => {
+			let i = j.value, a = e.target;
+			if (!O.value || !E.enabled || e.defaultPrevented || !i?.isConnected || !(a instanceof Node) || !a.isConnected || !i.contains(a) || F.value?.contains(a)) return;
+			q("outside");
+			let o = (e) => {
+				e.key === "Escape" && I === c && c.phase !== "open" && q("outside");
+			}, s = new MutationObserver(Y), c = {
+				boundary: i,
+				target: n && i.contains(n) ? n : a,
+				anchor: t,
+				focusOwner: n,
+				initialFocus: r,
+				phase: "preparing",
+				release: () => {
+					s.disconnect(), window.removeEventListener("keydown", o, !0);
+				}
+			};
+			if (s.observe(document.documentElement, {
+				childList: !0,
+				subtree: !0
+			}), window.addEventListener("keydown", o, !0), I = c, D("before-open", e), e.defaultPrevented) {
+				I === c && q("outside");
+				return;
+			}
+			e.preventDefault(), e.stopPropagation(), I === c && ae(c);
+		}, Z = (e, t, n) => {
+			if (!E.enabled || e.defaultPrevented || e.isComposing) return;
+			let r = n ?? e.currentTarget;
+			if (!(r instanceof HTMLElement)) throw TypeError("SContextMenu: trigger keydown currentTarget must be an HTMLElement");
+			X(e, {
 				type: "element",
 				element: r,
 				align: "left"
+			}, r, t);
+		}, Q = (e) => !e.altKey && !e.ctrlKey && !e.metaKey && (e.key === "ContextMenu" || e.key === "F10" && e.shiftKey), oe = (e) => {
+			Q(e) && Z(e, "first");
+		}, se = (e) => {
+			if (Q(e)) {
+				Z(e, "first");
+				return;
+			}
+			(E.trigger === "click" || E.trigger === "both") && (e.key === "ArrowDown" || e.key === "ArrowUp") && Z(e, e.key === "ArrowUp" ? "last" : "first");
+		}, ce = (t) => {
+			if (!Q(t) || !E.enabled || t.defaultPrevented || t.isComposing) return;
+			let n = j.value, r = document.activeElement;
+			r instanceof HTMLElement && t.target === r && n?.contains(r) && r !== n && e(r, n) === r && Z(t, "first", r);
+		}, $ = (t) => {
+			if (!E.enabled || t.defaultPrevented) return;
+			let n = e(t.target, j.value), r = e(document.activeElement), i = n ?? (r && F.value?.contains(r) ? I?.focusOwner ?? null : r), a = t.clientX === 0 && t.clientY === 0 && t.detail === 0;
+			X(t, a && i ? {
+				type: "element",
+				element: i,
+				align: "left"
 			} : {
 				type: "point",
 				x: t.clientX,
 				y: t.clientY
-			}, r);
-		}, V = (e) => {
-			if (!E.enabled || E.trigger !== "click" && E.trigger !== "both" || e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
-			let t = e.currentTarget;
-			if (!(t instanceof HTMLElement)) throw TypeError("SContextMenu: trigger keydown currentTarget must be an HTMLElement");
-			e.preventDefault(), e.stopPropagation(), A.value = e.key === "ArrowUp" ? "last" : "first", I({
-				type: "element",
-				element: t,
-				align: "left"
-			}, t);
-		}, H = (e) => {
-			E.enabled && (e.preventDefault(), e.stopPropagation(), B(e));
-		}, U = (e) => {
-			(E.trigger === "click" || E.trigger === "both") && H(e);
-		}, W = (e) => {
-			(E.trigger === "contextmenu" || E.trigger === "both") && H(e);
+			}, i, "first");
+		}, le = (e) => {
+			(E.trigger === "click" || E.trigger === "both") && $(e);
+		}, ue = (e) => {
+			(E.trigger === "contextmenu" || E.trigger === "both") && $(e);
 		};
-		x(() => E.enabled, (e) => {
-			e || L("programmatic");
-		});
-		let G = (e, t) => {
-			e.disabled || (L("selection"), D("select", e, t));
+		S(() => E.enabled, (e) => {
+			e || q("programmatic");
+		}, { flush: "sync" }), S(O, (e) => {
+			e || q("outside");
+		}, { flush: "sync" }), S(L, (e) => {
+			if (e || (P.value = !1), e || !I || I.phase === "preparing") return;
+			let t = I;
+			I = null, t.release();
+		}, { flush: "sync" }), _(Y), g(() => q("outside"));
+		let de = (e, t) => {
+			e.disabled || (q("selection"), D("select", e, t));
 		};
-		return S(() => {
-			if (a(E.items), typeof E.enabled != "boolean") throw TypeError("SContextMenu: enabled must be a boolean");
+		return re(() => {
+			if (o(E.items), typeof E.enabled != "boolean") throw TypeError("SContextMenu: enabled must be a boolean");
 			if (![
 				"contextmenu",
 				"click",
@@ -81,12 +153,19 @@ var w = ["data-layout"], T = /*@__PURE__*/ m({
 				"inline",
 				"contents"
 			].includes(E.boundaryLayout)) throw TypeError("SContextMenu: boundaryLayout must be 'block', 'inline', or 'contents'");
-		}), (e, t) => (g(), f("div", h(y(O).bindings(), {
+		}), (e, t) => (v(), f("div", te({
+			ref_key: "boundaryRef",
+			ref: j
+		}, x(ie).bindings(), {
 			class: "s-context-menu-boundary",
 			"data-layout": m.boundaryLayout,
-			onClick: U,
-			onContextmenu: W
-		}), [v(e.$slots, "default", { triggerProps: z.value }, void 0, !0), (g(), u(s, { to: "body" }, [p(c, {
+			onClick: le,
+			onContextmenu: ue,
+			onKeydown: ce
+		}), [b(e.$slots, "default", {
+			triggerProps: G.value,
+			textInputTriggerProps: K.value
+		}, void 0, !0), (v(), u(c, { to: "body" }, [p(ee, {
 			"enter-active-class": "transition ease-out duration-[var(--s-motion-fast)]",
 			"enter-from-class": "transform opacity-0 scale-95",
 			"enter-to-class": "transform opacity-100 scale-100",
@@ -94,33 +173,39 @@ var w = ["data-layout"], T = /*@__PURE__*/ m({
 			"leave-from-class": "transform opacity-100 scale-100",
 			"leave-to-class": "transform opacity-0 scale-95"
 		}, {
-			default: C(() => [y(N) ? (g(), u(i, {
+			default: C(() => [x(L) ? (v(), u(a, {
 				key: 0,
 				ref_key: "layerRef",
-				ref: j,
+				ref: M,
 				kind: "context",
 				"landmark-label": "Контекстные действия",
-				position: y(P),
-				"z-index": y(F)
+				position: x(R),
+				"available-size": x(z),
+				"z-index": x(B)
 			}, {
-				default: C(() => [p(o, {
+				default: C(() => [p(s, {
+					ref_key: "menuSurfaceRef",
+					ref: N,
 					id: k,
 					label: "Контекстные действия",
-					autofocus: "",
 					"initial-focus": A.value,
 					items: m.items,
-					onDismissTree: t[0] ||= (e) => y(L)("outside"),
-					onEscape: t[1] ||= (e) => y(L)("escape"),
-					onFocusExit: t[2] ||= (e) => y(L)("outside"),
-					onSelect: G,
-					onTab: y(R)
+					onDismissTree: t[0] ||= (e) => q("outside"),
+					onEscape: t[1] ||= (e) => q("escape"),
+					onFocusExit: t[2] ||= (e) => q("outside"),
+					onSelect: de,
+					onTab: x(U)
 				}, null, 8, [
 					"initial-focus",
 					"items",
 					"onTab"
 				])]),
 				_: 1
-			}, 8, ["position", "z-index"])) : d("", !0)]),
+			}, 8, [
+				"position",
+				"available-size",
+				"z-index"
+			])) : d("", !0)]),
 			_: 1
 		})]))], 16, w));
 	}

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

@@ -1,7 +1,7 @@
 import { Minus as e, MinusCircle as t, PlusCircle as n } from "../../icons/_internal/generatedSputnigUiIconComponents.js";
-import { useUiKitLocale as r } from "../../../composables/useUiKitLocale.js";
-import { useOwnedAttrs as i } from "../../../internal/ownedAttrs.js";
-import { validateNonEmptyString as a } from "../../../internal/runtimeContract.js";
+import { validateNonEmptyString as r } from "../../../internal/runtimeContract.js";
+import { useUiKitLocale as i } from "../../../composables/useUiKitLocale.js";
+import { useOwnedAttrs as a } from "../../../internal/ownedAttrs.js";
 import o from "./SButton.vue.js";
 import { computed as s, createBlock as c, defineComponent as l, mergeProps as u, openBlock as d, unref as f } from "vue";
 //#region src/components/shared/controls/SContextToggleButton.vue?vue&type=script&setup=true&lang.ts
@@ -24,12 +24,12 @@ var p = /*@__PURE__*/ l({
 	},
 	emits: ["click"],
 	setup(l, { emit: p }) {
-		let m = l, { t: h } = r(), g = p, _ = i({
+		let m = l, { t: h } = i(), g = p, _ = a({
 			component: "SContextToggleButton",
 			owner: "toggle button"
 		}), v = s(() => ({
-			add: a("SContextToggleButton", "addTitle", m.addTitle ?? h("forms.addToContext")),
-			remove: a("SContextToggleButton", "removeTitle", m.removeTitle ?? h("forms.removeFromContext"))
+			add: r("SContextToggleButton", "addTitle", m.addTitle ?? h("forms.addToContext")),
+			remove: r("SContextToggleButton", "removeTitle", m.removeTitle ?? h("forms.removeFromContext"))
 		})), y = s(() => m.inContext ? v.value.remove : v.value.add), b = s(() => m.partial ? "mixed" : m.inContext), x = s(() => m.inContext ? m.partial ? e : t : n);
 		return (e, t) => (d(), c(o, u(f(_).bindings(), {
 			appearance: "text",

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

@@ -1,7 +1,7 @@
 import { Drag as e } from "../../icons/_internal/generatedSputnigUiIconComponents.js";
-import { useUiKitLocale as t } from "../../../composables/useUiKitLocale.js";
-import { useOwnedAttrs as n } from "../../../internal/ownedAttrs.js";
-import { validateNonEmptyString as r } from "../../../internal/runtimeContract.js";
+import { 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 "./SButton.vue.js";
 import { computed as a, createBlock as o, defineComponent as s, mergeProps as c, openBlock as l, ref as u, unref as d, watchEffect as f } from "vue";
 //#region src/components/shared/controls/SDragHandle.vue?vue&type=script&setup=true&lang.ts
@@ -31,10 +31,10 @@ var p = /*@__PURE__*/ s({
 		"keyboard-active-change"
 	],
 	setup(s, { emit: p }) {
-		let m = s, h = p, g = n({
+		let m = s, h = p, g = r({
 			component: "SDragHandle",
 			owner: "drag handle command"
-		}), { t: _ } = t(), v = u(!1), y = a(() => r("SDragHandle", "label", m.label)), b = a(() => m.orientation === "vertical" ? "Enter Space ArrowUp ArrowDown Escape" : "Enter Space ArrowLeft ArrowRight Escape"), x = a(() => v.value ? _("layout.dragActive", { label: y.value }) : _("layout.dragIdle", { label: y.value }));
+		}), { t: _ } = n(), v = u(!1), y = a(() => t("SDragHandle", "label", m.label)), b = a(() => m.orientation === "vertical" ? "Enter Space ArrowUp ArrowDown Escape" : "Enter Space ArrowLeft ArrowRight Escape"), x = a(() => v.value ? _("layout.dragActive", { label: y.value }) : _("layout.dragIdle", { label: y.value }));
 		function S(e) {
 			v.value !== e && (v.value = e, h("keyboard-active-change", e));
 		}

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_857e2649_scoped_857e2649_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-857e2649"]]);
 //#endregion
 export { n as default };

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

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