@pgcorp/ui-kit 0.11.0 → 0.13.0

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

@@ -3,9 +3,10 @@ import { resolveOptionalDomId as n, validateBoolean as r, validateBoundedInteger
 import { useInteractiveLeafRegistration as c } from "../../../internal/passiveContentContract.js";
 import l from "./SField.vue.js";
 import { resolveFieldSurfaceBindings as ee } from "../../../internal/fieldSurface.js";
-import { computed as u, createBlock as d, createElementVNode as te, defineComponent as f, mergeProps as ne, nextTick as p, onBeforeUnmount as re, onMounted as ie, openBlock as ae, ref as m, unref as h, useId as oe, watch as g, withCtx as _ } from "vue";
+import { resolveTextLengthConstraints as te } from "../../../internal/textLengthConstraints.js";
+import { computed as u, createBlock as ne, createElementVNode as re, defineComponent as d, mergeProps as ie, nextTick as f, onBeforeUnmount as ae, onMounted as oe, openBlock as se, ref as p, unref as m, useId as ce, watch as h, withCtx as le } from "vue";
 //#region src/components/shared/controls/STextarea.vue?vue&type=script&setup=true&lang.ts
-var se = [
+var ue = [
 	"id",
 	"data-appearance",
 	"data-size",
@@ -20,6 +21,8 @@ var se = [
 	"disabled",
 	"readonly",
 	"required",
+	"minlength",
+	"maxlength",
 	"aria-invalid",
 	"aria-required",
 	"aria-readonly",
@@ -29,7 +32,7 @@ var se = [
 	"aria-autocomplete",
 	"aria-haspopup",
 	"rows"
-], v = 100, y = /*@__PURE__*/ f({
+], g = 100, _ = /*@__PURE__*/ d({
 	inheritAttrs: !1,
 	__name: "STextarea",
 	props: {
@@ -56,6 +59,8 @@ var se = [
 		helpText: { default: void 0 },
 		id: { default: void 0 },
 		rows: { default: 3 },
+		minLength: { default: void 0 },
+		maxLength: { default: void 0 },
 		size: { default: "md" },
 		autoResize: {
 			type: Boolean,
@@ -76,6 +81,8 @@ var se = [
 		"keydown",
 		"keyup",
 		"click",
+		"focus",
+		"blur",
 		"paste",
 		"compositionstart",
 		"compositionupdate",
@@ -83,58 +90,58 @@ var se = [
 		"selection-change",
 		"state-change"
 	],
-	setup(f, { expose: y, emit: ce }) {
-		let le = ["default", "ghost"], ue = [
+	setup(d, { expose: _, emit: de }) {
+		let fe = ["default", "ghost"], pe = [
 			"sm",
 			"md",
 			"lg"
-		], b = {
+		], v = {
 			minimum: 1,
 			maximum: 100
-		}, x = {
+		}, y = {
 			minimum: 1,
 			maximum: 4096
-		}, de = [
+		}, me = [
 			"list",
 			"both",
 			"inline",
 			"none"
-		], fe = [
+		], he = [
 			"listbox",
 			"grid",
 			"tree",
 			"dialog"
-		], S = [
+		], b = [
 			"forward",
 			"backward",
 			"none"
-		], pe = [
+		], ge = [
 			"select",
 			"start",
 			"end",
 			"preserve"
-		], C = f, w = ce, T = t({
+		], x = d, S = de, C = t({
 			component: "STextarea",
 			owner: "native textarea"
 		});
 		c({ owner: "STextarea" });
-		let me = oe(), E = u(() => n("STextarea", "id", C.id, `s-textarea-${me}`)), D = m(null), O = m(!1), k = null, A = null, j = null, M = null, N = !1, P = [], F = [], I = u(() => s("STextarea", "appearance", C.appearance, le)), L = u(() => s("STextarea", "size", C.size, ue)), R = u(() => i("STextarea", "rows", C.rows, b)), z = u(() => C.maxRows === void 0 ? void 0 : i("STextarea", "maxRows", C.maxRows, b)), B = u(() => C.minHeight === void 0 ? void 0 : a("STextarea", "minHeight", C.minHeight, x)), V = u(() => C.maxHeight === void 0 ? void 0 : a("STextarea", "maxHeight", C.maxHeight, x)), H = u(() => {
-			if (C.suggestions === void 0) return;
-			if (C.suggestions === null || typeof C.suggestions != "object" || Array.isArray(C.suggestions)) throw TypeError("STextarea: suggestions должен быть объектом. / STextarea: suggestions must be an object.");
-			let e = C.suggestions.activeDescendant === void 0 ? void 0 : o("STextarea", "suggestions.activeDescendant", C.suggestions.activeDescendant);
+		let _e = ce(), w = u(() => n("STextarea", "id", x.id, `s-textarea-${_e}`)), T = p(null), E = p(!1), D = null, O = null, k = null, A = null, j = !1, M = [], N = [], P = u(() => s("STextarea", "appearance", x.appearance, fe)), F = u(() => s("STextarea", "size", x.size, pe)), I = u(() => i("STextarea", "rows", x.rows, v)), L = u(() => te("STextarea", x.minLength, x.maxLength)), R = u(() => x.maxRows === void 0 ? void 0 : i("STextarea", "maxRows", x.maxRows, v)), z = u(() => x.minHeight === void 0 ? void 0 : a("STextarea", "minHeight", x.minHeight, y)), B = u(() => x.maxHeight === void 0 ? void 0 : a("STextarea", "maxHeight", x.maxHeight, y)), V = u(() => {
+			if (x.suggestions === void 0) return;
+			if (x.suggestions === null || typeof x.suggestions != "object" || Array.isArray(x.suggestions)) throw TypeError("STextarea: suggestions должен быть объектом. / STextarea: suggestions must be an object.");
+			let e = x.suggestions.activeDescendant === void 0 ? void 0 : o("STextarea", "suggestions.activeDescendant", x.suggestions.activeDescendant);
 			return {
-				controls: o("STextarea", "suggestions.controls", C.suggestions.controls),
+				controls: o("STextarea", "suggestions.controls", x.suggestions.controls),
 				activeDescendant: e,
-				autocomplete: s("STextarea", "suggestions.autocomplete", C.suggestions.autocomplete ?? "list", de),
-				popupRole: s("STextarea", "suggestions.popupRole", C.suggestions.popupRole ?? "listbox", fe)
+				autocomplete: s("STextarea", "suggestions.autocomplete", x.suggestions.autocomplete ?? "list", me),
+				popupRole: s("STextarea", "suggestions.popupRole", x.suggestions.popupRole ?? "listbox", he)
 			};
-		}), U = u(() => {
-			let e = r("STextarea", "autoResize", C.autoResize), t = z.value, n = B.value, i = V.value;
+		}), H = u(() => {
+			let e = r("STextarea", "autoResize", x.autoResize), t = R.value, n = z.value, i = B.value;
 			if (!e && t !== void 0 && n === void 0 && i === void 0) throw TypeError(`STextarea: maxRows применяется только при autoResize=true; получено autoResize=false, maxRows=${t}. / STextarea: maxRows applies only when autoResize=true; received autoResize=false, maxRows=${t}.`);
 			if (!e && (n !== void 0 || i !== void 0)) throw TypeError("STextarea: maxRows/minHeight/maxHeight применяются только при autoResize=true. / STextarea: maxRows/minHeight/maxHeight apply only when autoResize=true.");
 			if (t !== void 0 && i !== void 0) throw TypeError("STextarea: maxRows и maxHeight являются альтернативными ограничителями; укажите один. / STextarea: maxRows and maxHeight are alternative bounds; provide one.");
 			if (n !== void 0 && i !== void 0 && i < n) throw TypeError(`STextarea: maxHeight не может быть меньше minHeight; получено minHeight=${n}, maxHeight=${i}. / STextarea: maxHeight cannot be below minHeight; received minHeight=${n}, maxHeight=${i}.`);
-			if (t !== void 0 && t < R.value) throw TypeError(`STextarea: maxRows не может быть меньше rows; получено rows=${R.value}, maxRows=${t}. / STextarea: maxRows cannot be less than rows; received rows=${R.value}, maxRows=${t}.`);
+			if (t !== void 0 && t < I.value) throw TypeError(`STextarea: maxRows не может быть меньше rows; получено rows=${I.value}, maxRows=${t}. / STextarea: maxRows cannot be less than rows; received rows=${I.value}, maxRows=${t}.`);
 			return e ? {
 				mode: "content",
 				autoResize: !0,
@@ -146,84 +153,84 @@ var se = [
 				autoResize: !1
 			};
 		});
-		function he(e) {
+		function ve(e) {
 			return ee("STextarea", {
 				kind: "textarea",
-				appearance: I.value === "default" ? "field" : "ghost",
+				appearance: P.value === "default" ? "field" : "ghost",
 				invalid: e.invalid,
 				disabled: e.disabled,
 				readonly: e.readonly
 			});
 		}
-		function W(e, t) {
+		function U(e, t) {
 			let n = Z(e.selectionStart, e.value.length, `${t} selectionStart`), r = Z(e.selectionEnd, e.value.length, `${t} selectionEnd`);
 			if (r < n) throw RangeError(`STextarea: ${t} selectionEnd=${r} is below selectionStart=${n}.`);
 			return {
 				start: n,
 				end: r,
-				direction: s("STextarea", `${t} selectionDirection`, e.selectionDirection ?? "none", S)
+				direction: s("STextarea", `${t} selectionDirection`, e.selectionDirection ?? "none", b)
 			};
 		}
-		function G(e) {
-			let t = W(e, "state-change");
-			w("state-change", {
+		function W(e) {
+			let t = U(e, "state-change");
+			S("state-change", {
 				text: e.value,
 				cursor: t.start,
 				selection: t,
-				composing: O.value
+				composing: E.value
 			});
 		}
-		function ge(e) {
+		function ye(e) {
 			let t = e.target, n = e instanceof InputEvent ? e.inputType : "";
-			!N && n !== "historyUndo" && n !== "historyRedo" && F.splice(0), w("update:modelValue", t.value), G(t), p(Y);
+			!j && n !== "historyUndo" && n !== "historyRedo" && N.splice(0), S("update:modelValue", t.value), W(t), f(Y);
 		}
-		function K(e, t) {
+		function G(e, t) {
 			return {
 				text: e.value,
-				selection: W(e, t)
+				selection: U(e, t)
 			};
 		}
-		function q(e, t) {
-			e.value = t.text, e.focus(), e.setSelectionRange(t.selection.start, t.selection.end, t.selection.direction), w("update:modelValue", t.text), w("selection-change", t.selection), G(e), p(Y);
+		function K(e, t) {
+			e.value = t.text, e.focus(), e.setSelectionRange(t.selection.start, t.selection.end, t.selection.direction), S("update:modelValue", t.text), S("selection-change", t.selection), W(e), f(Y);
 		}
-		function _e(e, t) {
+		function q(e, t) {
 			return e.value === t.text;
 		}
-		function ve(e, t) {
+		function be(e, t) {
 			if (e.altKey || !(e.metaKey || e.ctrlKey)) return !1;
 			let n = e.key.toLowerCase(), r = n === "z" && !e.shiftKey, i = n === "z" && e.shiftKey || n === "y" && !e.shiftKey;
 			if (!r && !i) return !1;
-			let a = r ? P : F, o = a[a.length - 1], s = r ? o?.after : o?.before;
-			return !o || !s || !_e(t, s) ? !1 : (e.preventDefault(), a.pop(), r ? (F.push(o), q(t, o.before)) : (P.push(o), q(t, o.after)), !0);
-		}
-		function ye(e) {
-			w("keydown", e), !(e.defaultPrevented || O.value || C.disabled || C.readonly) && ve(e, e.currentTarget);
-		}
-		function be(e) {
-			w("keyup", e), G(e.currentTarget);
+			let a = r ? M : N, o = a[a.length - 1], s = r ? o?.after : o?.before;
+			return !o || !s || !q(t, s) ? !1 : (e.preventDefault(), a.pop(), r ? (N.push(o), K(t, o.before)) : (M.push(o), K(t, o.after)), !0);
 		}
 		function xe(e) {
-			w("click", e), G(e.currentTarget);
+			S("keydown", e), !(e.defaultPrevented || E.value || x.disabled || x.readonly) && be(e, e.currentTarget);
 		}
 		function Se(e) {
-			let t = e.currentTarget, n = W(t, "selection-change");
-			w("selection-change", n), G(t);
+			S("keyup", e), W(e.currentTarget);
 		}
 		function Ce(e) {
-			O.value = !0, w("compositionstart", e), G(e.currentTarget);
+			S("click", e), W(e.currentTarget);
 		}
 		function we(e) {
-			w("compositionupdate", e), G(e.currentTarget);
+			let t = e.currentTarget, n = U(t, "selection-change");
+			S("selection-change", n), W(t);
 		}
 		function Te(e) {
-			O.value = !1, w("compositionend", e), G(e.currentTarget), Y();
+			E.value = !0, S("compositionstart", e), W(e.currentTarget);
+		}
+		function Ee(e) {
+			S("compositionupdate", e), W(e.currentTarget);
+		}
+		function De(e) {
+			E.value = !1, S("compositionend", e), W(e.currentTarget), Y();
 		}
 		function J() {
-			let e = D.value, t = U.value;
+			let e = T.value, t = H.value;
 			if (t.mode === "fixed" || !e || e.scrollHeight === 0) return;
-			let n = window.getComputedStyle(e), r = Number.parseFloat(n.lineHeight) || Number.parseFloat(n.fontSize) * 1.5, i = Number.parseFloat(n.paddingTop) || 0, a = Number.parseFloat(n.paddingBottom) || 0, o = R.value * r + i + a, s = t.minHeight ?? o, c = t.maxHeight ?? (t.maxRows === void 0 ? 0 : t.maxRows * r + i + a);
+			let n = window.getComputedStyle(e), r = Number.parseFloat(n.lineHeight) || Number.parseFloat(n.fontSize) * 1.5, i = Number.parseFloat(n.paddingTop) || 0, a = Number.parseFloat(n.paddingBottom) || 0, o = I.value * r + i + a, s = t.minHeight ?? o, c = t.maxHeight ?? (t.maxRows === void 0 ? 0 : t.maxRows * r + i + a);
 			if (c > 0 && c < s) throw RangeError(`STextarea: вычисленный maxHeight=${c} меньше minimumHeight=${s}. / STextarea: resolved maxHeight=${c} is below minimumHeight=${s}.`);
-			if (C.disabled || C.modelValue === null || C.modelValue.length === 0) {
+			if (x.disabled || x.modelValue === null || x.modelValue.length === 0) {
 				e.style.height = `${s}px`, e.style.overflowY = "hidden";
 				return;
 			}
@@ -236,15 +243,15 @@ var se = [
 			e.style.height = `${Math.max(s, l)}px`, e.style.overflowY = "hidden";
 		}
 		function Y() {
-			M === null && U.value.mode !== "fixed" && (M = window.requestAnimationFrame(() => {
-				M = null, J();
+			A === null && H.value.mode !== "fixed" && (A = window.requestAnimationFrame(() => {
+				A = null, J();
 			}));
 		}
-		function Ee() {
-			D.value?.focus();
+		function Oe() {
+			T.value?.focus();
 		}
 		function X(e) {
-			let t = D.value;
+			let t = T.value;
 			if (!t) throw Error(`STextarea: textarea не готова для ${e}; дождитесь mount. / STextarea: textarea is not ready for ${e}; wait for mount.`);
 			return t;
 		}
@@ -254,12 +261,12 @@ var se = [
 				maximum: t
 			});
 		}
-		function De() {
+		function ke() {
 			let e = X("getSelectionOffset");
 			return Z(e.selectionStart, e.value.length, "getSelectionOffset");
 		}
-		function Oe() {
-			return W(X("getSelection"), "getSelection");
+		function Ae() {
+			return U(X("getSelection"), "getSelection");
 		}
 		function Q(e, t, n) {
 			if (typeof e != "object" || !e || Array.isArray(e)) throw TypeError(`STextarea: ${n} должен быть selection object. / STextarea: ${n} must be a selection object.`);
@@ -268,31 +275,31 @@ var se = [
 			return {
 				start: r,
 				end: i,
-				direction: s("STextarea", `${n}.direction`, e.direction, S)
+				direction: s("STextarea", `${n}.direction`, e.direction, b)
 			};
 		}
-		function ke(e, t = !0) {
+		function je(e, t = !0) {
 			let n = X("setSelection"), r = Q(e, n.value.length, "setSelection");
-			t && n.focus(), n.setSelectionRange(r.start, r.end, r.direction), w("selection-change", r), G(n);
+			t && n.focus(), n.setSelectionRange(r.start, r.end, r.direction), S("selection-change", r), W(n);
 		}
-		function Ae(e) {
+		function Me(e) {
 			let t = X("setSelectionOffset"), n = Z(e, t.value.length, "setSelectionOffset");
 			t.focus(), t.setSelectionRange(n, n);
 		}
 		function $(e, t = {}) {
 			let n = X("replaceSelection");
-			if (C.disabled || C.readonly) throw Error("STextarea: replaceSelection недоступен для disabled/readonly поля. / STextarea: replaceSelection is unavailable for a disabled/readonly field.");
-			if (O.value) throw Error("STextarea: replaceSelection недоступен во время IME composition. / STextarea: replaceSelection is unavailable during IME composition.");
+			if (x.disabled || x.readonly) throw Error("STextarea: replaceSelection недоступен для disabled/readonly поля. / STextarea: replaceSelection is unavailable for a disabled/readonly field.");
+			if (E.value) throw Error("STextarea: replaceSelection недоступен во время IME composition. / STextarea: replaceSelection is unavailable during IME composition.");
 			if (typeof e != "string") throw TypeError("STextarea: replaceSelection text должен быть строкой. / STextarea: replaceSelection text must be a string.");
-			let r = t.selection === void 0 ? W(n, "replaceSelection") : Q(t.selection, n.value.length, "replaceSelection.selection"), i = s("STextarea", "replaceSelection.selectionMode", t.selectionMode ?? "end", pe);
+			let r = t.selection === void 0 ? U(n, "replaceSelection") : Q(t.selection, n.value.length, "replaceSelection.selection"), i = s("STextarea", "replaceSelection.selectionMode", t.selectionMode ?? "end", ge);
 			(t.focus ?? !0) && n.focus();
-			let a = K(n, "replaceSelection before");
+			let a = G(n, "replaceSelection before");
 			n.setRangeText(e, r.start, r.end, i);
-			let o = K(n, "replaceSelection after");
-			P.push({
+			let o = G(n, "replaceSelection after");
+			M.push({
 				before: a,
 				after: o
-			}), P.length > v && P.shift(), F.splice(0), N = !0;
+			}), M.length > g && M.shift(), N.splice(0), j = !0;
 			try {
 				n.dispatchEvent(new InputEvent("input", {
 					bubbles: !0,
@@ -301,101 +308,105 @@ var se = [
 					inputType: "insertReplacementText"
 				}));
 			} finally {
-				N = !1;
+				j = !1;
 			}
-			w("selection-change", o.selection);
+			S("selection-change", o.selection);
 			let c = o.selection;
 			return {
 				text: n.value,
 				cursor: c.start,
 				selection: c,
-				composing: O.value
+				composing: E.value
 			};
 		}
-		function je() {
-			C.disabled || C.readonly || $("\n");
+		function Ne() {
+			x.disabled || x.readonly || $("\n");
 		}
-		return y({
-			focus: Ee,
-			getSelection: Oe,
-			getSelectionOffset: De,
-			insertSoftLineBreak: je,
+		return _({
+			focus: Oe,
+			getSelection: Ae,
+			getSelectionOffset: ke,
+			insertSoftLineBreak: Ne,
 			replaceSelection: $,
 			resize: J,
-			setSelection: ke,
-			setSelectionOffset: Ae
-		}), ie(() => {
-			J(), A = D.value?.parentElement ?? null, typeof ResizeObserver < "u" && A && (k = new ResizeObserver((e) => {
-				let t = e.find((e) => e.target === A);
+			setSelection: je,
+			setSelectionOffset: Me
+		}), oe(() => {
+			J(), O = T.value?.parentElement ?? null, typeof ResizeObserver < "u" && O && (D = new ResizeObserver((e) => {
+				let t = e.find((e) => e.target === O);
 				if (!t) return;
 				let n = t.contentRect.width;
-				n !== j && (j = n, Y());
-			}), k.observe(A));
-		}), g(() => [
-			C.modelValue,
-			C.disabled,
-			C.rows,
-			C.maxRows,
-			C.minHeight,
-			C.maxHeight
+				n !== k && (k = n, Y());
+			}), D.observe(O));
+		}), h(() => [
+			x.modelValue,
+			x.disabled,
+			x.rows,
+			x.maxRows,
+			x.minHeight,
+			x.maxHeight
 		], () => {
-			p(Y);
-		}), g(() => C.modelValue, (e) => {
-			let t = D.value;
-			t && t.value !== (e ?? "") && (P.splice(0), F.splice(0));
-		}), re(() => {
-			M !== null && window.cancelAnimationFrame(M), k?.disconnect(), k = null, A = null, P.splice(0), F.splice(0);
-		}), (t, n) => (ae(), d(l, {
-			"control-id": E.value,
-			label: f.label,
-			required: f.required,
-			"help-text": f.helpText,
-			"error-message": f.errorMessage,
-			invalid: f.invalid,
-			disabled: f.disabled,
-			readonly: f.readonly,
-			fill: I.value === "ghost" ? "container" : "content"
+			f(Y);
+		}), h(() => x.modelValue, (e) => {
+			let t = T.value;
+			t && t.value !== (e ?? "") && (M.splice(0), N.splice(0));
+		}), ae(() => {
+			A !== null && window.cancelAnimationFrame(A), D?.disconnect(), D = null, O = null, M.splice(0), N.splice(0);
+		}), (t, n) => (se(), ne(l, {
+			"control-id": w.value,
+			label: d.label,
+			required: d.required,
+			"help-text": d.helpText,
+			"error-message": d.errorMessage,
+			invalid: d.invalid,
+			disabled: d.disabled,
+			readonly: d.readonly,
+			fill: P.value === "ghost" ? "container" : "content"
 		}, {
-			default: _((t) => [te("textarea", ne({
-				...h(T).bindings(),
-				...he(t)
+			default: le((t) => [re("textarea", ie({
+				...m(C).bindings(),
+				...ve(t)
 			}, {
-				id: E.value,
+				id: w.value,
 				ref_key: "textareaRef",
-				ref: D,
+				ref: T,
 				class: "s-textarea",
-				"data-appearance": I.value,
-				"data-size": L.value,
-				"data-monospace": f.monospace || void 0,
-				"data-auto-resize": U.value.mode === "content" || void 0,
-				"data-max-rows": z.value,
-				"data-min-height": B.value,
-				"data-max-height": V.value,
+				"data-appearance": P.value,
+				"data-size": F.value,
+				"data-monospace": d.monospace || void 0,
+				"data-auto-resize": H.value.mode === "content" || void 0,
+				"data-max-rows": R.value,
+				"data-min-height": z.value,
+				"data-max-height": B.value,
 				"data-invalid": t.invalid || void 0,
-				value: f.modelValue,
-				placeholder: f.placeholder,
+				value: d.modelValue,
+				placeholder: d.placeholder,
 				disabled: t.disabled,
 				readonly: t.readonly,
 				required: t.required,
+				minlength: L.value.minLength,
+				maxlength: L.value.maxLength,
 				"aria-invalid": t.invalid || void 0,
 				"aria-required": t.required || void 0,
 				"aria-readonly": t.readonly || void 0,
-				"aria-describedby": h(e)(h(T).string("aria-describedby"), t.describedBy),
-				"aria-controls": H.value?.controls,
-				"aria-activedescendant": H.value?.activeDescendant,
-				"aria-autocomplete": H.value?.autocomplete,
-				"aria-haspopup": H.value?.popupRole,
-				rows: R.value,
-				onInput: ge,
-				onKeydown: ye,
-				onKeyup: be,
-				onClick: xe,
-				onSelect: Se,
-				onPaste: n[0] ||= (e) => w("paste", e),
-				onCompositionstart: Ce,
-				onCompositionupdate: we,
-				onCompositionend: Te
-			}), null, 16, se)]),
+				"aria-describedby": m(e)(m(C).string("aria-describedby"), t.describedBy),
+				"aria-controls": V.value?.controls,
+				"aria-activedescendant": V.value?.activeDescendant,
+				"aria-autocomplete": V.value?.autocomplete,
+				"aria-haspopup": V.value?.popupRole,
+				rows: I.value,
+				onInput: ye,
+				onKeydown: xe,
+				onKeyup: Se,
+				onClick: Ce,
+				onFocus: n[0] ||= (e) => S("focus", e),
+				onBlur: n[1] ||= (e) => S("blur", e),
+				onSelect: we,
+				onPaste: n[2] ||= (e) => S("paste", e),
+				onCompositionstart: Te,
+				onCompositionupdate: Ee,
+				onCompositionend: De
+			}), null, 16, ue)]),
 			_: 1
 		}, 8, [
 			"control-id",
@@ -411,4 +422,4 @@ var se = [
 	}
 });
 //#endregion
-export { y as default };
+export { _ as default };

package/dist/src/components/shared/controls/menu.d.ts

@@ -9,6 +9,7 @@ interface SMenuLabelledEntry {
     readonly label: string;
     readonly icon?: Component;
     readonly disabled?: boolean;
+    readonly description?: string;
     readonly shortcut?: string;
     readonly badge?: string | number;
     readonly badgeSeverity?: BadgeSeverity;
@@ -44,9 +45,16 @@ export interface SMenuSeparatorEntry {
     readonly kind: 'separator';
     readonly id: string;
 }
+/** Видимая и семантическая группа menu items без дополнительного focus owner. / A visible semantic menu-item group without another focus owner. */
+export interface SMenuGroupEntry {
+    readonly kind: 'group';
+    readonly id: string;
+    readonly label: string;
+    readonly children: readonly SMenuInteractiveEntry[];
+}
 export type SMenuSelectableEntry = SMenuAction | SMenuDestination | SMenuCheckbox | SMenuRadio;
 export type SMenuInteractiveEntry = SMenuSelectableEntry | SMenuSubmenu;
-export type SMenuEntry = SMenuInteractiveEntry | SMenuSeparatorEntry;
+export type SMenuEntry = SMenuInteractiveEntry | SMenuSeparatorEntry | SMenuGroupEntry;
 /** Проверяет полный recursive discriminated menu contract без coercion/fallback. / Validates the complete recursive discriminated menu contract without coercion/fallback. */
 export declare function validateSMenuEntries(value: unknown): asserts value is readonly SMenuEntry[];
 export {};

package/dist/src/components/shared/controls/menu.js

@@ -7,7 +7,8 @@ var i = [
 	"checkbox",
 	"radio",
 	"separator",
-	"submenu"
+	"submenu",
+	"group"
 ], a = ["row", "tile"], o = [
 	"secondary",
 	"success",
@@ -21,6 +22,7 @@ var i = [
 	"label",
 	"icon",
 	"disabled",
+	"description",
 	"shortcut",
 	"badge",
 	"badgeSeverity",
@@ -37,7 +39,8 @@ var i = [
 	checkbox: ["checked"],
 	radio: ["groupId", "checked"],
 	separator: [],
-	submenu: ["children"]
+	submenu: ["children"],
+	group: ["children"]
 };
 function l(e, t) {
 	if (typeof e != "object" || !e || Array.isArray(e)) throw TypeError(`SMenuSurface: ${t} must be an object`);
@@ -49,43 +52,55 @@ function d(e, t, r) {
 	e[t] !== void 0 && n("SMenuSurface", `${r}.${t}`, e[t]);
 }
 function f(e, r) {
-	if (n("SMenuSurface", `${r}.id`, e.id), n("SMenuSurface", `${r}.label`, e.label), u(e, "disabled", r), d(e, "shortcut", r), e.icon !== void 0 && typeof e.icon != "object" && typeof e.icon != "function") throw TypeError(`SMenuSurface: ${r}.icon must be a Vue component`);
+	if (n("SMenuSurface", `${r}.id`, e.id), n("SMenuSurface", `${r}.label`, e.label), u(e, "disabled", r), d(e, "description", r), d(e, "shortcut", r), e.icon !== void 0 && typeof e.icon != "object" && typeof e.icon != "function") throw TypeError(`SMenuSurface: ${r}.icon must be a Vue component`);
 	if (e.badge !== void 0 && (typeof e.badge != "string" || e.badge.length === 0) && (typeof e.badge != "number" || !Number.isFinite(e.badge))) throw TypeError(`SMenuSurface: ${r}.badge must be a non-empty string or finite number`);
 	e.badgeSeverity !== void 0 && t("SMenuSurface", `${r}.badgeSeverity`, e.badgeSeverity, o), e.layout !== void 0 && t("SMenuSurface", `${r}.layout`, e.layout, a);
 }
 function p(e, t, n) {
-	let r = new Set(t === "separator" ? ["kind", "id"] : [...s, ...c[t]]);
+	let r = new Set(t === "separator" ? ["kind", "id"] : t === "group" ? [
+		"kind",
+		"id",
+		"label",
+		"children"
+	] : [...s, ...c[t]]);
 	for (let t of Object.keys(e)) if (!r.has(t)) throw TypeError(`SMenuSurface: ${n} has unsupported field '${t}'`);
 }
-function m(a, o, s) {
+function m(a, o, s, c = !0) {
 	if (!Array.isArray(a)) throw TypeError(`SMenuSurface: ${o} must be an array`);
 	if (o !== "items" && a.length === 0) throw TypeError(`SMenuSurface: ${o} children must be a non-empty array`);
-	let c = /* @__PURE__ */ new Set(), d = !1;
-	for (let [h, g] of a.entries()) {
-		let _ = `${o}[${h}]`;
-		l(g, _);
-		let v = t("SMenuSurface", `${_}.kind`, g.kind, i);
-		p(g, v, _);
-		let y = n("SMenuSurface", `${_}.id`, g.id);
-		if (s.has(y)) throw TypeError(`SMenuSurface: duplicate entry id '${y}'`);
-		if (s.add(y), v === "separator") {
-			if (h === 0 || h === a.length - 1 || d) throw TypeError("SMenuSurface: separator cannot be first, last, or consecutive");
-			d = !0;
+	let d = /* @__PURE__ */ new Set(), h = !1;
+	for (let [g, _] of a.entries()) {
+		let v = `${o}[${g}]`;
+		l(_, v);
+		let y = t("SMenuSurface", `${v}.kind`, _.kind, i);
+		p(_, y, v);
+		let b = n("SMenuSurface", `${v}.id`, _.id);
+		if (s.has(b)) throw TypeError(`SMenuSurface: duplicate entry id '${b}'`);
+		if (s.add(b), y === "separator") {
+			if (!c) throw TypeError(`SMenuSurface: ${v} separator is not allowed inside a group`);
+			if (g === 0 || g === a.length - 1 || h) throw TypeError("SMenuSurface: separator cannot be first, last, or consecutive");
+			h = !0;
 			continue;
 		}
-		if (d = !1, f(g, _), (v === "action" || v === "destination") && u(g, "current", _), v === "destination" && r({
-			owner: `SMenuSurface: ${_}`,
-			href: g.href,
-			to: g.to,
-			target: g.target,
-			rel: g.rel
-		}), v === "checkbox" && g.checked !== "mixed" && typeof g.checked != "boolean") throw TypeError(`SMenuSurface: ${_}.checked must be a boolean or "mixed"`);
-		if (v === "radio") {
-			let t = n("SMenuSurface", `${_}.groupId`, g.groupId), r = e("SMenuSurface", `${_}.checked`, g.checked);
-			if (r && c.has(t)) throw TypeError(`SMenuSurface: radio group '${t}' has more than one checked entry`);
-			r && c.add(t);
+		if (y === "group") {
+			if (!c) throw TypeError(`SMenuSurface: ${v} nested group is not allowed`);
+			if (n("SMenuSurface", `${v}.label`, _.label), !Array.isArray(_.children) || _.children.length === 0) throw TypeError(`SMenuSurface: ${v}.children must be a non-empty array`);
+			m(_.children, `${v}.children`, s, !1), h = !1;
+			continue;
+		}
+		if (h = !1, f(_, v), (y === "action" || y === "destination") && u(_, "current", v), y === "destination" && r({
+			owner: `SMenuSurface: ${v}`,
+			href: _.href,
+			to: _.to,
+			target: _.target,
+			rel: _.rel
+		}), y === "checkbox" && _.checked !== "mixed" && typeof _.checked != "boolean") throw TypeError(`SMenuSurface: ${v}.checked must be a boolean or "mixed"`);
+		if (y === "radio") {
+			let t = n("SMenuSurface", `${v}.groupId`, _.groupId), r = e("SMenuSurface", `${v}.checked`, _.checked);
+			if (r && d.has(t)) throw TypeError(`SMenuSurface: radio group '${t}' has more than one checked entry`);
+			r && d.add(t);
 		}
-		v === "submenu" && m(g.children, `${_}.children`, s);
+		y === "submenu" && m(_.children, `${v}.children`, s);
 	}
 }
 function h(e) {