@pgcorp/ui-kit 0.13.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.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_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-1ccb9efc"]]);
+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,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 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 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 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: {
@@ -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: 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"
-		}), 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) {
+		}), 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");
@@ -44,109 +49,110 @@ 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;
-		}, Y = () => {
-			let e = j.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": K.value,
-				"aria-controls": H,
-				onClick: ae,
-				onKeydown: oe
+				"aria-expanded": G.value,
+				"aria-controls": V,
+				onClick: $,
+				onKeydown: se
 			};
 		};
-		function X(e) {
-			let t = q(P);
+		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;
 		}
-		ne(() => {
-			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();
+		g(() => {
+			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 ie(e) {
-			let t = X(e), n = D.placement === "auto" ? void 0 : D.placement;
+		function oe(e) {
+			let t = Y(e), n = w.placement === "auto" ? void 0 : w.placement;
 			return {
 				anchor: {
 					type: "element",
 					element: t,
-					align: D.align,
+					align: w.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);
+		async function X(e) {
+			if (N.value || P.value) return;
+			let { anchor: t, trigger: n } = oe(e);
+			await B(t, n);
+		}
+		function Z(e) {
+			N.value && W.value || (N.value = !1, !G.value && (D("update:open", !0), W.value || X(e)));
 		}
 		function Q(e) {
-			K.value || (k("update:open", !0), G.value || Z(e));
+			(G.value || P.value) && (D("update:open", !1), W.value || R(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));
+			G.value ? Q("trigger") : (H.value = "first", Z(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 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()));
 		}
-		function se(e, t) {
-			e.disabled || (k("select", e, t), D.closeOnSelect && $("selection"));
+		function ce(e, t) {
+			e.disabled || (D("select", e, t), w.closeOnSelect && Q("selection"));
 		}
-		function ce(e) {
-			B(e);
+		function le(e) {
+			z(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(() => 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"
-			]), 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", 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: K.value,
-				controls: H
+				expanded: G.value,
+				controls: V
 			},
 			severity: "secondary"
-		}), null, 16, ["disclosure"])), (g(), u(c, { to: "body" }, [y(I) ? (g(), u(o, {
+		}), null, 16, ["disclosure"])), (_(), u(c, { to: "body" }, [y(P) ? (_(), u(a, {
 			key: 0,
 			ref_key: "layerRef",
-			ref: M,
+			ref: A,
 			kind: "dropdown",
-			"landmark-label": O.value,
-			position: y(L),
-			"z-index": y(R)
+			"landmark-label": E.value,
+			position: y(F),
+			"available-size": y(I),
+			"z-index": y(L)
 		}, {
-			default: w(() => [te(s, {
+			default: ie(() => [f(s, {
 				ref_key: "menuSurfaceRef",
-				ref: N,
-				id: H,
-				label: O.value,
+				ref: j,
+				id: V,
+				label: E.value,
 				density: "compact",
 				autofocus: "",
-				"initial-focus": U.value,
+				"initial-focus": H.value,
 				items: p.items,
-				onDismissTree: t[0] ||= (e) => $("outside"),
-				onEscape: t[1] ||= (e) => $("escape"),
-				onFocusExit: t[2] ||= (e) => $("outside"),
-				onSelect: se,
-				onTab: ce
+				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",
@@ -156,9 +162,10 @@ var T = { class: "s-dropdown-menu" }, E = /*@__PURE__*/ p({
 		}, 8, [
 			"landmark-label",
 			"position",
+			"available-size",
 			"z-index"
-		])) : d("", !0)]))]));
+		])) : te("", !0)]))]));
 	}
 });
 //#endregion
-export { E as default };
+export { C 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 };