@pgcorp/ui-kit 0.13.0 → 0.15.0

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

@@ -1,13 +1,14 @@
 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 l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as ee, createVNode as p, defineComponent as m, mergeProps as te, nextTick as h, onBeforeUnmount as g, onUpdated as ne, openBlock as _, ref as v, renderSlot as re, unref as y, useId as ie, watch as b, watchEffect as x, withCtx as S } from "vue";
 //#region src/components/shared/controls/SContextMenu.vue?vue&type=script&setup=true&lang.ts
-var w = ["data-layout"], T = /*@__PURE__*/ m({
+var ae = ["data-layout"], C = /*@__PURE__*/ m({
 	inheritAttrs: !1,
 	__name: "SContextMenu",
 	props: {
@@ -19,111 +20,200 @@ var w = ["data-layout"], T = /*@__PURE__*/ m({
 		trigger: { default: "contextmenu" },
 		boundaryLayout: { default: "block" }
 	},
-	emits: ["select"],
-	setup(m, { emit: T }) {
-		let E = m, D = T, O = t({
+	emits: ["before-open", "select"],
+	setup(m, { emit: C }) {
+		let w = m, T = C, E = n({
 			component: "SContextMenu",
 			owner: "interaction boundary root"
-		});
-		n({
+		}), D = t();
+		r({
 			owner: "SContextMenu",
-			active: () => E.enabled
+			active: () => w.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 O = `s-context-menu-${ie()}`, k = v("first"), A = v(null), j = v(null), M = v(null), N = v(!1), P = u(() => j.value?.getElement() ?? null), F = null, { isOpen: I, portalTarget: L, position: R, availableSize: z, zIndex: B, open: V, close: H, closeForTab: U } = i(j, { onRequestDismiss: (e) => q(e) }), W = u(() => I.value && N.value ? O : void 0), G = u(() => w.enabled ? {
+			"aria-haspopup": "menu",
+			"aria-expanded": I.value,
+			"aria-controls": W.value,
+			onKeydown: ce
+		} : {}), K = u(() => w.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: se
+		} : {});
+		function q(e = "programmatic") {
+			let t = F;
+			F = null, t?.release(), N.value = !1, H(e);
+		}
+		let J = (t) => F === t && w.enabled && D.value && L.value !== null && A.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 = F;
+			e && !J(e) && q("outside");
+		}, oe = async (e) => {
+			if (await h(), F !== e) return;
+			if (!J(e)) {
+				q("outside");
+				return;
+			}
+			if (e.phase = "mounting", k.value = e.initialFocus, await V(e.anchor, e.focusOwner), F !== e) return;
+			if (!J(e) || !I.value || !P.value?.isConnected) {
+				q("outside");
+				return;
+			}
+			if (N.value = !0, await h(), F !== e) return;
+			if (!J(e) || !I.value || !P.value?.isConnected) {
+				q("outside");
+				return;
+			}
+			let t = M.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 = A.value, a = e.target;
+			if (!D.value || L.value === null || !w.enabled || e.defaultPrevented || !i?.isConnected || !(a instanceof Node) || !a.isConnected || !i.contains(a) || P.value?.contains(a)) return;
+			q("outside");
+			let o = (e) => {
+				e.key === "Escape" && F === 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), F = c, T("before-open", e), e.defaultPrevented) {
+				F === c && q("outside");
+				return;
+			}
+			e.preventDefault(), e.stopPropagation(), F === c && oe(c);
+		}, Z = (e, t, n) => {
+			if (!w.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), se = (e) => {
+			Q(e) && Z(e, "first");
+		}, ce = (e) => {
+			if (Q(e)) {
+				Z(e, "first");
+				return;
+			}
+			(w.trigger === "click" || w.trigger === "both") && (e.key === "ArrowDown" || e.key === "ArrowUp") && Z(e, e.key === "ArrowUp" ? "last" : "first");
+		}, le = (t) => {
+			if (!Q(t) || !w.enabled || t.defaultPrevented || t.isComposing) return;
+			let n = A.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 (!w.enabled || t.defaultPrevented) return;
+			let n = e(t.target, A.value), r = e(document.activeElement), i = n ?? (r && P.value?.contains(r) ? F?.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");
+		}, ue = (e) => {
+			(w.trigger === "click" || w.trigger === "both") && $(e);
+		}, de = (e) => {
+			(w.trigger === "contextmenu" || w.trigger === "both") && $(e);
 		};
-		x(() => E.enabled, (e) => {
-			e || L("programmatic");
-		});
-		let G = (e, t) => {
-			e.disabled || (L("selection"), D("select", e, t));
+		b(() => w.enabled, (e) => {
+			e || q("programmatic");
+		}, { flush: "sync" }), b(D, (e) => {
+			e || q("outside");
+		}, { flush: "sync" }), b(L, (e) => {
+			e === null && q("outside");
+		}, { flush: "sync" }), b(I, (e) => {
+			if (e || (N.value = !1), e || !F || F.phase === "preparing") return;
+			let t = F;
+			F = null, t.release();
+		}, { flush: "sync" }), ne(Y), g(() => q("outside"));
+		let fe = (e, t) => {
+			e.disabled || (q("selection"), T("select", e, t));
 		};
-		return S(() => {
-			if (a(E.items), typeof E.enabled != "boolean") throw TypeError("SContextMenu: enabled must be a boolean");
+		return x(() => {
+			if (o(w.items), typeof w.enabled != "boolean") throw TypeError("SContextMenu: enabled must be a boolean");
 			if (![
 				"contextmenu",
 				"click",
 				"both"
-			].includes(E.trigger)) throw TypeError("SContextMenu: trigger must be 'contextmenu', 'click', or 'both'");
+			].includes(w.trigger)) throw TypeError("SContextMenu: trigger must be 'contextmenu', 'click', or 'both'");
 			if (![
 				"block",
 				"inline",
 				"contents"
-			].includes(E.boundaryLayout)) throw TypeError("SContextMenu: boundaryLayout must be 'block', 'inline', or 'contents'");
-		}), (e, t) => (g(), f("div", h(y(O).bindings(), {
+			].includes(w.boundaryLayout)) throw TypeError("SContextMenu: boundaryLayout must be 'block', 'inline', or 'contents'");
+		}), (e, t) => (_(), ee("div", te({
+			ref_key: "boundaryRef",
+			ref: A
+		}, y(E).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, {
-			"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",
-			"leave-active-class": "transition ease-in duration-[var(--s-motion-instant)]",
-			"leave-from-class": "transform opacity-100 scale-100",
-			"leave-to-class": "transform opacity-0 scale-95"
+			onClick: ue,
+			onContextmenu: de,
+			onKeydown: le
+		}), [re(e.$slots, "default", {
+			triggerProps: G.value,
+			textInputTriggerProps: K.value
+		}, void 0, !0), y(L) ? (_(), d(c, {
+			key: 0,
+			to: y(L)
+		}, [p(l, {
+			"enter-active-class": "transition-transform ease-out duration-[var(--s-motion-fast)]",
+			"enter-from-class": "transform scale-95",
+			"enter-to-class": "transform scale-100",
+			"leave-active-class": "transition-transform ease-in duration-[var(--s-motion-instant)]",
+			"leave-from-class": "transform scale-100",
+			"leave-to-class": "transform scale-95"
 		}, {
-			default: C(() => [y(N) ? (g(), u(i, {
+			default: S(() => [y(I) ? (_(), d(a, {
 				key: 0,
 				ref_key: "layerRef",
 				ref: j,
 				kind: "context",
 				"landmark-label": "Контекстные действия",
-				position: y(P),
-				"z-index": y(F)
+				position: y(R),
+				"available-size": y(z),
+				"z-index": y(B)
 			}, {
-				default: C(() => [p(o, {
-					id: k,
+				default: S(() => [p(s, {
+					ref_key: "menuSurfaceRef",
+					ref: M,
+					id: O,
 					label: "Контекстные действия",
-					autofocus: "",
-					"initial-focus": A.value,
+					"initial-focus": k.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: fe,
+					onTab: y(U)
 				}, null, 8, [
 					"initial-focus",
 					"items",
 					"onTab"
 				])]),
 				_: 1
-			}, 8, ["position", "z-index"])) : d("", !0)]),
+			}, 8, [
+				"position",
+				"available-size",
+				"z-index"
+			])) : f("", !0)]),
 			_: 1
-		})]))], 16, w));
+		})], 8, ["to"])) : f("", !0)], 16, ae));
 	}
 });
 //#endregion
-export { T as default };
+export { C as default };

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.js

@@ -1,8 +1,8 @@
-import "../../../../assets/src/components/shared/controls/SDropdownMenu.css_vue_type_style_index_0_src_1ccb9efc_scoped_1ccb9efc_lang.css";
+import "../../../../assets/src/components/shared/controls/SDropdownMenu.css_vue_type_style_index_0_src_40040ae5_scoped_40040ae5_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-1ccb9efc"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-40040ae5"]]);
 //#endregion
 export { n as default };

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

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

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

@@ -13,8 +13,10 @@ export interface Props {
     readonly?: boolean;
     layout?: SFieldLayout;
     fill?: SFieldFill;
+    /** Native HTML content model of the field and its supporting regions. */
+    contentFlow?: 'flow' | 'phrasing';
 }
-declare var __VLS_1: {}, __VLS_3: {
+declare var __VLS_8: {}, __VLS_16: {
     controlId: string;
     labelledBy: string | undefined;
     describedBy: string | undefined;
@@ -22,15 +24,15 @@ declare var __VLS_1: {}, __VLS_3: {
     disabled: boolean;
     readonly: boolean;
     required: boolean;
-}, __VLS_5: {}, __VLS_7: {};
+}, __VLS_24: {}, __VLS_32: {};
 type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_1) => any;
+    label?: (props: typeof __VLS_8) => any;
 } & {
-    default?: (props: typeof __VLS_3) => any;
+    default?: (props: typeof __VLS_16) => any;
 } & {
-    help?: (props: typeof __VLS_5) => any;
+    help?: (props: typeof __VLS_24) => any;
 } & {
-    error?: (props: typeof __VLS_7) => any;
+    error?: (props: typeof __VLS_32) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
     layout: SFieldLayout;
@@ -42,6 +44,7 @@ declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, i
     readonly: boolean;
     helpText: string;
     errorMessage: string;
+    contentFlow: "flow" | "phrasing";
 }, {}, {}, {}, 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/SField.vue.js

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