@shtabapp/ui-kit 1.85.0 → 1.85.2

package/dist/components/SInput/SInput.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,309 @@
+const require_SButton_types = require("../SButton/SButton.types.cjs");
+const require_SButton = require("../SButton/SButton.vue.cjs");
+const require_SInput_types = require("./SInput.types.cjs");
+const require_fieldLabelId = require("./utils/fieldLabelId.cjs");
+const require_SInlineMessage_types = require("../SInlineMessage/SInlineMessage.types.cjs");
+const require_SInlineMessage = require("../SInlineMessage/SInlineMessage.vue.cjs");
+const require_SLabel = require("../SLabel/SLabel.vue.cjs");
+const require_useFieldAttrs = require("../../composables/useFieldAttrs.cjs");
+const require_useFieldFilled = require("../../composables/useFieldFilled.cjs");
+const require_useFieldFocus = require("../../composables/useFieldFocus.cjs");
+const require_useFieldMessages = require("../../composables/useFieldMessages.cjs");
+let vue = require("vue");
+let _shtabapp_ui_kit_primitives = require("@shtabapp/ui-kit-primitives");
+//#region src/components/SInput/SInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["inert", "aria-disabled"];
+var _hoisted_2 = {
+	key: 0,
+	class: "s-ui-input__prepend"
+};
+var _hoisted_3 = { class: "s-ui-input__row" };
+var _hoisted_4 = {
+	key: 0,
+	class: "s-ui-input__prefix"
+};
+var _hoisted_5 = [
+	"id",
+	"type",
+	"name",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"autocomplete"
+];
+var _hoisted_6 = {
+	key: 0,
+	class: "s-ui-input__inline"
+};
+var _hoisted_7 = {
+	key: 1,
+	class: "s-ui-input__clear"
+};
+var _hoisted_8 = {
+	key: 2,
+	class: "s-ui-input__action"
+};
+var prefixIconSize = 16;
+var SInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "SInput",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		label: {},
+		labelProps: {},
+		placeholder: {},
+		helpMessages: {},
+		errorMessages: {},
+		bordered: {
+			type: Boolean,
+			default: true
+		},
+		reserveMessageSpace: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		hasValue: { type: Boolean },
+		focused: {
+			type: Boolean,
+			default: false
+		},
+		iconLeft: {},
+		iconRight: {},
+		customize: { default: () => require_SInput_types.ESInputCustomize.NONE },
+		name: {},
+		type: { default: "text" },
+		id: {},
+		autocomplete: {},
+		autofocus: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ (0, vue.mergeModels)([
+		"clear",
+		"focus",
+		"blur"
+	], ["update:modelValue"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		/**
+		* Текстовое поле с подписью, иконками, сообщениями валидации и слотами customize.
+		* @displayName SInput
+		*/
+		const modelValue = (0, vue.useModel)(__props, "modelValue");
+		const { t } = (0, _shtabapp_ui_kit_primitives.useUiKitI18n)();
+		const emit = __emit;
+		const { rootAttrs, controlAttrs, errorQa } = require_useFieldAttrs.useFieldAttrs();
+		const slots = (0, vue.useSlots)();
+		const generatedInputId = (0, vue.useId)();
+		const fieldElementRef = (0, vue.useTemplateRef)("fieldElementRef");
+		const inputElementRef = (0, vue.useTemplateRef)("inputElementRef");
+		const { isFocused, handleFocus: handleInputFocus, handleFocusOut: handleFieldFocusOut } = require_useFieldFocus.useFieldFocus({
+			isDisabled: () => __props.disabled,
+			blurField: () => blur(),
+			emitFocus: (event) => emit("focus", event),
+			emitBlur: (event) => emit("blur", event)
+		});
+		const { normalizedHelpMessages, normalizedErrorMessages, hasErrorMessages, hasHelpMessages } = require_useFieldMessages.useFieldMessages(() => __props.helpMessages, () => __props.errorMessages);
+		const inputElementId = (0, vue.computed)(() => {
+			if (__props.id) return __props.id;
+			return generatedInputId;
+		});
+		const labelElementId = (0, vue.computed)(() => require_fieldLabelId.buildFieldLabelId(inputElementId.value));
+		const showLabel = (0, vue.computed)(() => {
+			return Boolean(__props.label || slots.label);
+		});
+		const showPrefix = (0, vue.computed)(() => {
+			return Boolean(__props.iconLeft || slots.prefix);
+		});
+		const showVerticalPrepend = (0, vue.computed)(() => {
+			return __props.customize === require_SInput_types.ESInputCustomize.VERTICAL && Boolean(slots.prepend);
+		});
+		const showHorizontalPrepend = (0, vue.computed)(() => {
+			return __props.customize === require_SInput_types.ESInputCustomize.HORIZONTAL && Boolean(slots.prepend);
+		});
+		const showClearAction = () => {
+			if (!__props.clearable || __props.disabled || __props.readonly) return false;
+			return isFieldFilled();
+		};
+		const clearButtonTabIndex = (0, vue.computed)(() => {
+			if (isFocused.value) return;
+			return -1;
+		});
+		const showAction = (0, vue.computed)(() => {
+			return Boolean(__props.iconRight || slots.action);
+		});
+		const showMessages = (0, vue.computed)(() => {
+			return Boolean(slots.message) || hasHelpMessages.value || hasErrorMessages.value;
+		});
+		const isFieldFilled = require_useFieldFilled.useFieldFilled({
+			hasControlSlot: () => Boolean(slots.control),
+			hasValue: () => __props.hasValue,
+			value: () => modelValue.value
+		});
+		const rootClasses = (0, vue.computed)(() => {
+			return {
+				"s-ui-input--disabled": __props.disabled,
+				"s-ui-input--readonly": __props.readonly
+			};
+		});
+		const fieldClasses = (0, vue.computed)(() => {
+			return [{
+				"s-ui-input__field--bordered": __props.bordered,
+				"s-ui-input__field--borderless": !__props.bordered,
+				"s-ui-input__field--disabled": __props.disabled,
+				"s-ui-input__field--readonly": __props.readonly,
+				"s-ui-input__field--error": hasErrorMessages.value,
+				"s-ui-input__field--vertical": __props.customize === require_SInput_types.ESInputCustomize.VERTICAL,
+				"s-ui-input__field--focused": isFocused.value || __props.focused
+			}];
+		});
+		const focusControlElement = (options) => {
+			const fieldElement = fieldElementRef.value;
+			if (!fieldElement) return;
+			fieldElement.querySelector(".s-ui-input__control, .s-ui-select__control, .s-ui-select__search-input, [tabindex]:not([tabindex=\"-1\"])")?.focus(options);
+		};
+		const focus = (options) => {
+			if (slots.control) {
+				focusControlElement(options);
+				return;
+			}
+			inputElementRef.value?.focus(options);
+		};
+		const blur = () => {
+			if (slots.control) {
+				const activeElement = document.activeElement;
+				if (activeElement instanceof HTMLElement && fieldElementRef.value?.contains(activeElement)) activeElement.blur();
+				return;
+			}
+			inputElementRef.value?.blur();
+		};
+		const handleFieldClick = (event) => {
+			if (__props.disabled || __props.readonly) return;
+			if (!(event.target instanceof HTMLElement)) return;
+			if (event.target.closest(".s-ui-input__prepend, .s-ui-input__inline, .s-ui-input__clear, .s-ui-input__action")) return;
+			focus();
+		};
+		const handleClearClick = () => {
+			modelValue.value = "";
+			emit("clear");
+			focus();
+		};
+		(0, vue.onMounted)(() => {
+			if (!__props.autofocus) return;
+			(0, vue.nextTick)(() => {
+				focus();
+			});
+		});
+		__expose({
+			blur,
+			focus,
+			fieldElementRef,
+			inputElementRef
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({ class: ["s-ui-input", rootClasses.value] }, (0, vue.unref)(rootAttrs)), [
+				showLabel.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SLabel.default), (0, vue.mergeProps)({
+					key: 0,
+					id: labelElementId.value
+				}, __props.labelProps, { "html-for": inputElementId.value }), {
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "label", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1)])]),
+					_: 3
+				}, 16, ["id", "html-for"])) : (0, vue.createCommentVNode)("", true),
+				(0, vue.createElementVNode)("div", {
+					ref_key: "fieldElementRef",
+					ref: fieldElementRef,
+					class: (0, vue.normalizeClass)(["s-ui-input__field", [fieldClasses.value, { "s-ui-input__field--filled": (0, vue.unref)(isFieldFilled)() }]]),
+					inert: __props.disabled ? true : void 0,
+					"aria-disabled": __props.disabled ? true : void 0,
+					onClick: _cache[2] || (_cache[2] = ($event) => handleFieldClick($event)),
+					onFocusout: _cache[3] || (_cache[3] = (...args) => (0, vue.unref)(handleFieldFocusOut) && (0, vue.unref)(handleFieldFocusOut)(...args))
+				}, [showVerticalPrepend.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2, [(0, vue.renderSlot)(_ctx.$slots, "prepend", { disabled: __props.disabled })])) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", _hoisted_3, [
+					showPrefix.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4, [(0, vue.renderSlot)(_ctx.$slots, "prefix", { disabled: __props.disabled }, () => [__props.iconLeft ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_shtabapp_ui_kit_primitives.SIcon), {
+						key: 0,
+						name: __props.iconLeft,
+						size: prefixIconSize
+					}, null, 8, ["name"])) : (0, vue.createCommentVNode)("", true)])])) : (0, vue.createCommentVNode)("", true),
+					(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(["s-ui-input__control-wrap", { "s-ui-input__control-wrap--horizontal": __props.customize === (0, vue.unref)(require_SInput_types.ESInputCustomize).HORIZONTAL }]) }, [(0, vue.renderSlot)(_ctx.$slots, "control", { disabled: __props.disabled }, () => [(0, vue.withDirectives)((0, vue.createElementVNode)("input", (0, vue.mergeProps)({
+						id: inputElementId.value,
+						ref_key: "inputElementRef",
+						ref: inputElementRef,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+						class: "s-ui-input__control s-ui-typography-body-14-regular",
+						type: __props.type,
+						name: __props.name,
+						placeholder: __props.placeholder,
+						disabled: __props.disabled,
+						readonly: __props.readonly,
+						autocomplete: __props.autocomplete
+					}, (0, vue.unref)(controlAttrs), { onFocus: _cache[1] || (_cache[1] = (...args) => (0, vue.unref)(handleInputFocus) && (0, vue.unref)(handleInputFocus)(...args)) }), null, 16, _hoisted_5), [[vue.vModelDynamic, modelValue.value]])]), showHorizontalPrepend.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_6, [(0, vue.renderSlot)(_ctx.$slots, "prepend", { disabled: __props.disabled })])) : (0, vue.createCommentVNode)("", true)], 2),
+					showClearAction() ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_7, [(0, vue.createVNode)((0, vue.unref)(require_SButton.default), {
+						appearance: (0, vue.unref)(require_SButton_types.EButtonAppearance).BARE,
+						variant: (0, vue.unref)(require_SButton_types.EButtonVariant).NEUTRAL,
+						size: (0, vue.unref)(require_SButton_types.EButtonSize).SMALL,
+						icon: "closeMini",
+						"aria-label": (0, vue.unref)(t)("input.clear"),
+						tabindex: clearButtonTabIndex.value,
+						onClick: (0, vue.withModifiers)(handleClearClick, ["stop"])
+					}, null, 8, [
+						"appearance",
+						"variant",
+						"size",
+						"aria-label",
+						"tabindex"
+					])])) : (0, vue.createCommentVNode)("", true),
+					showAction.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_8, [(0, vue.renderSlot)(_ctx.$slots, "action", { disabled: __props.disabled }, () => [__props.iconRight ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SButton.default), {
+						key: 0,
+						appearance: (0, vue.unref)(require_SButton_types.EButtonAppearance).BARE,
+						variant: (0, vue.unref)(require_SButton_types.EButtonVariant).NEUTRAL,
+						size: (0, vue.unref)(require_SButton_types.EButtonSize).SMALL,
+						disabled: __props.disabled,
+						icon: __props.iconRight,
+						tabindex: -1
+					}, null, 8, [
+						"appearance",
+						"variant",
+						"size",
+						"disabled",
+						"icon"
+					])) : (0, vue.createCommentVNode)("", true)])])) : (0, vue.createCommentVNode)("", true)
+				])], 42, _hoisted_1),
+				showMessages.value || __props.reserveMessageSpace ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					key: 1,
+					class: (0, vue.normalizeClass)(["s-ui-input__messages", { "s-ui-input__messages--reserved": __props.reserveMessageSpace }])
+				}, [(0, vue.renderSlot)(_ctx.$slots, "message", {}, () => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(normalizedHelpMessages), (helpMessageItem, helpMessageIndex) => {
+					return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SInlineMessage.default), {
+						key: `help-${helpMessageIndex}`,
+						message: helpMessageItem
+					}, null, 8, ["message"]);
+				}), 128)), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(normalizedErrorMessages), (errorMessageItem, errorMessageIndex) => {
+					return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SInlineMessage.default), {
+						key: `error-${errorMessageIndex}`,
+						message: errorMessageItem,
+						"data-qa": (0, vue.unref)(errorQa),
+						"validation-status": (0, vue.unref)(require_SInlineMessage_types.ESInlineMessageValidationStatus).ERROR
+					}, null, 8, [
+						"message",
+						"data-qa",
+						"validation-status"
+					]);
+				}), 128))])], 2)) : (0, vue.createCommentVNode)("", true)
+			], 16);
+		};
+	}
+});
+//#endregion
+exports.default = SInput_vue_vue_type_script_setup_true_lang_default;

package/dist/components/SInput/SInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,309 @@
+import { EButtonAppearance, EButtonSize, EButtonVariant } from "../SButton/SButton.types.js";
+import SButton_default from "../SButton/SButton.vue.js";
+import { ESInputCustomize } from "./SInput.types.js";
+import { buildFieldLabelId } from "./utils/fieldLabelId.js";
+import { ESInlineMessageValidationStatus } from "../SInlineMessage/SInlineMessage.types.js";
+import SInlineMessage_default from "../SInlineMessage/SInlineMessage.vue.js";
+import SLabel_default from "../SLabel/SLabel.vue.js";
+import { useFieldAttrs } from "../../composables/useFieldAttrs.js";
+import { useFieldFilled } from "../../composables/useFieldFilled.js";
+import { useFieldFocus } from "../../composables/useFieldFocus.js";
+import { useFieldMessages } from "../../composables/useFieldMessages.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, onMounted, openBlock, renderList, renderSlot, toDisplayString, unref, useId, useModel, useSlots, useTemplateRef, vModelDynamic, withCtx, withDirectives, withModifiers } from "vue";
+import { SIcon, useUiKitI18n } from "@shtabapp/ui-kit-primitives";
+//#region src/components/SInput/SInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["inert", "aria-disabled"];
+var _hoisted_2 = {
+	key: 0,
+	class: "s-ui-input__prepend"
+};
+var _hoisted_3 = { class: "s-ui-input__row" };
+var _hoisted_4 = {
+	key: 0,
+	class: "s-ui-input__prefix"
+};
+var _hoisted_5 = [
+	"id",
+	"type",
+	"name",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"autocomplete"
+];
+var _hoisted_6 = {
+	key: 0,
+	class: "s-ui-input__inline"
+};
+var _hoisted_7 = {
+	key: 1,
+	class: "s-ui-input__clear"
+};
+var _hoisted_8 = {
+	key: 2,
+	class: "s-ui-input__action"
+};
+var prefixIconSize = 16;
+var SInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "SInput",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		labelProps: {},
+		placeholder: {},
+		helpMessages: {},
+		errorMessages: {},
+		bordered: {
+			type: Boolean,
+			default: true
+		},
+		reserveMessageSpace: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		hasValue: { type: Boolean },
+		focused: {
+			type: Boolean,
+			default: false
+		},
+		iconLeft: {},
+		iconRight: {},
+		customize: { default: () => ESInputCustomize.NONE },
+		name: {},
+		type: { default: "text" },
+		id: {},
+		autocomplete: {},
+		autofocus: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"clear",
+		"focus",
+		"blur"
+	], ["update:modelValue"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		/**
+		* Текстовое поле с подписью, иконками, сообщениями валидации и слотами customize.
+		* @displayName SInput
+		*/
+		const modelValue = useModel(__props, "modelValue");
+		const { t } = useUiKitI18n();
+		const emit = __emit;
+		const { rootAttrs, controlAttrs, errorQa } = useFieldAttrs();
+		const slots = useSlots();
+		const generatedInputId = useId();
+		const fieldElementRef = useTemplateRef("fieldElementRef");
+		const inputElementRef = useTemplateRef("inputElementRef");
+		const { isFocused, handleFocus: handleInputFocus, handleFocusOut: handleFieldFocusOut } = useFieldFocus({
+			isDisabled: () => __props.disabled,
+			blurField: () => blur(),
+			emitFocus: (event) => emit("focus", event),
+			emitBlur: (event) => emit("blur", event)
+		});
+		const { normalizedHelpMessages, normalizedErrorMessages, hasErrorMessages, hasHelpMessages } = useFieldMessages(() => __props.helpMessages, () => __props.errorMessages);
+		const inputElementId = computed(() => {
+			if (__props.id) return __props.id;
+			return generatedInputId;
+		});
+		const labelElementId = computed(() => buildFieldLabelId(inputElementId.value));
+		const showLabel = computed(() => {
+			return Boolean(__props.label || slots.label);
+		});
+		const showPrefix = computed(() => {
+			return Boolean(__props.iconLeft || slots.prefix);
+		});
+		const showVerticalPrepend = computed(() => {
+			return __props.customize === ESInputCustomize.VERTICAL && Boolean(slots.prepend);
+		});
+		const showHorizontalPrepend = computed(() => {
+			return __props.customize === ESInputCustomize.HORIZONTAL && Boolean(slots.prepend);
+		});
+		const showClearAction = () => {
+			if (!__props.clearable || __props.disabled || __props.readonly) return false;
+			return isFieldFilled();
+		};
+		const clearButtonTabIndex = computed(() => {
+			if (isFocused.value) return;
+			return -1;
+		});
+		const showAction = computed(() => {
+			return Boolean(__props.iconRight || slots.action);
+		});
+		const showMessages = computed(() => {
+			return Boolean(slots.message) || hasHelpMessages.value || hasErrorMessages.value;
+		});
+		const isFieldFilled = useFieldFilled({
+			hasControlSlot: () => Boolean(slots.control),
+			hasValue: () => __props.hasValue,
+			value: () => modelValue.value
+		});
+		const rootClasses = computed(() => {
+			return {
+				"s-ui-input--disabled": __props.disabled,
+				"s-ui-input--readonly": __props.readonly
+			};
+		});
+		const fieldClasses = computed(() => {
+			return [{
+				"s-ui-input__field--bordered": __props.bordered,
+				"s-ui-input__field--borderless": !__props.bordered,
+				"s-ui-input__field--disabled": __props.disabled,
+				"s-ui-input__field--readonly": __props.readonly,
+				"s-ui-input__field--error": hasErrorMessages.value,
+				"s-ui-input__field--vertical": __props.customize === ESInputCustomize.VERTICAL,
+				"s-ui-input__field--focused": isFocused.value || __props.focused
+			}];
+		});
+		const focusControlElement = (options) => {
+			const fieldElement = fieldElementRef.value;
+			if (!fieldElement) return;
+			fieldElement.querySelector(".s-ui-input__control, .s-ui-select__control, .s-ui-select__search-input, [tabindex]:not([tabindex=\"-1\"])")?.focus(options);
+		};
+		const focus = (options) => {
+			if (slots.control) {
+				focusControlElement(options);
+				return;
+			}
+			inputElementRef.value?.focus(options);
+		};
+		const blur = () => {
+			if (slots.control) {
+				const activeElement = document.activeElement;
+				if (activeElement instanceof HTMLElement && fieldElementRef.value?.contains(activeElement)) activeElement.blur();
+				return;
+			}
+			inputElementRef.value?.blur();
+		};
+		const handleFieldClick = (event) => {
+			if (__props.disabled || __props.readonly) return;
+			if (!(event.target instanceof HTMLElement)) return;
+			if (event.target.closest(".s-ui-input__prepend, .s-ui-input__inline, .s-ui-input__clear, .s-ui-input__action")) return;
+			focus();
+		};
+		const handleClearClick = () => {
+			modelValue.value = "";
+			emit("clear");
+			focus();
+		};
+		onMounted(() => {
+			if (!__props.autofocus) return;
+			nextTick(() => {
+				focus();
+			});
+		});
+		__expose({
+			blur,
+			focus,
+			fieldElementRef,
+			inputElementRef
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({ class: ["s-ui-input", rootClasses.value] }, unref(rootAttrs)), [
+				showLabel.value ? (openBlock(), createBlock(unref(SLabel_default), mergeProps({
+					key: 0,
+					id: labelElementId.value
+				}, __props.labelProps, { "html-for": inputElementId.value }), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])]),
+					_: 3
+				}, 16, ["id", "html-for"])) : createCommentVNode("", true),
+				createElementVNode("div", {
+					ref_key: "fieldElementRef",
+					ref: fieldElementRef,
+					class: normalizeClass(["s-ui-input__field", [fieldClasses.value, { "s-ui-input__field--filled": unref(isFieldFilled)() }]]),
+					inert: __props.disabled ? true : void 0,
+					"aria-disabled": __props.disabled ? true : void 0,
+					onClick: _cache[2] || (_cache[2] = ($event) => handleFieldClick($event)),
+					onFocusout: _cache[3] || (_cache[3] = (...args) => unref(handleFieldFocusOut) && unref(handleFieldFocusOut)(...args))
+				}, [showVerticalPrepend.value ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "prepend", { disabled: __props.disabled })])) : createCommentVNode("", true), createElementVNode("div", _hoisted_3, [
+					showPrefix.value ? (openBlock(), createElementBlock("span", _hoisted_4, [renderSlot(_ctx.$slots, "prefix", { disabled: __props.disabled }, () => [__props.iconLeft ? (openBlock(), createBlock(unref(SIcon), {
+						key: 0,
+						name: __props.iconLeft,
+						size: prefixIconSize
+					}, null, 8, ["name"])) : createCommentVNode("", true)])])) : createCommentVNode("", true),
+					createElementVNode("div", { class: normalizeClass(["s-ui-input__control-wrap", { "s-ui-input__control-wrap--horizontal": __props.customize === unref(ESInputCustomize).HORIZONTAL }]) }, [renderSlot(_ctx.$slots, "control", { disabled: __props.disabled }, () => [withDirectives(createElementVNode("input", mergeProps({
+						id: inputElementId.value,
+						ref_key: "inputElementRef",
+						ref: inputElementRef,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+						class: "s-ui-input__control s-ui-typography-body-14-regular",
+						type: __props.type,
+						name: __props.name,
+						placeholder: __props.placeholder,
+						disabled: __props.disabled,
+						readonly: __props.readonly,
+						autocomplete: __props.autocomplete
+					}, unref(controlAttrs), { onFocus: _cache[1] || (_cache[1] = (...args) => unref(handleInputFocus) && unref(handleInputFocus)(...args)) }), null, 16, _hoisted_5), [[vModelDynamic, modelValue.value]])]), showHorizontalPrepend.value ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "prepend", { disabled: __props.disabled })])) : createCommentVNode("", true)], 2),
+					showClearAction() ? (openBlock(), createElementBlock("span", _hoisted_7, [createVNode(unref(SButton_default), {
+						appearance: unref(EButtonAppearance).BARE,
+						variant: unref(EButtonVariant).NEUTRAL,
+						size: unref(EButtonSize).SMALL,
+						icon: "closeMini",
+						"aria-label": unref(t)("input.clear"),
+						tabindex: clearButtonTabIndex.value,
+						onClick: withModifiers(handleClearClick, ["stop"])
+					}, null, 8, [
+						"appearance",
+						"variant",
+						"size",
+						"aria-label",
+						"tabindex"
+					])])) : createCommentVNode("", true),
+					showAction.value ? (openBlock(), createElementBlock("span", _hoisted_8, [renderSlot(_ctx.$slots, "action", { disabled: __props.disabled }, () => [__props.iconRight ? (openBlock(), createBlock(unref(SButton_default), {
+						key: 0,
+						appearance: unref(EButtonAppearance).BARE,
+						variant: unref(EButtonVariant).NEUTRAL,
+						size: unref(EButtonSize).SMALL,
+						disabled: __props.disabled,
+						icon: __props.iconRight,
+						tabindex: -1
+					}, null, 8, [
+						"appearance",
+						"variant",
+						"size",
+						"disabled",
+						"icon"
+					])) : createCommentVNode("", true)])])) : createCommentVNode("", true)
+				])], 42, _hoisted_1),
+				showMessages.value || __props.reserveMessageSpace ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(["s-ui-input__messages", { "s-ui-input__messages--reserved": __props.reserveMessageSpace }])
+				}, [renderSlot(_ctx.$slots, "message", {}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(normalizedHelpMessages), (helpMessageItem, helpMessageIndex) => {
+					return openBlock(), createBlock(unref(SInlineMessage_default), {
+						key: `help-${helpMessageIndex}`,
+						message: helpMessageItem
+					}, null, 8, ["message"]);
+				}), 128)), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(normalizedErrorMessages), (errorMessageItem, errorMessageIndex) => {
+					return openBlock(), createBlock(unref(SInlineMessage_default), {
+						key: `error-${errorMessageIndex}`,
+						message: errorMessageItem,
+						"data-qa": unref(errorQa),
+						"validation-status": unref(ESInlineMessageValidationStatus).ERROR
+					}, null, 8, [
+						"message",
+						"data-qa",
+						"validation-status"
+					]);
+				}), 128))])], 2)) : createCommentVNode("", true)
+			], 16);
+		};
+	}
+});
+//#endregion
+export { SInput_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/SInput/utils/fieldLabelId.cjs

@@ -0,0 +1,8 @@
+//#region src/components/SInput/utils/fieldLabelId.ts
+/**
+* id подписи поля. Нативный `input` связан с ней через `for`, а контрол без нативной
+* подписи (combobox `SSelect` на `div`) — через `aria-labelledby` с этим же id.
+*/
+var buildFieldLabelId = (fieldId) => `${fieldId}-label`;
+//#endregion
+exports.buildFieldLabelId = buildFieldLabelId;

package/dist/components/SInput/utils/fieldLabelId.js

@@ -0,0 +1,8 @@
+//#region src/components/SInput/utils/fieldLabelId.ts
+/**
+* id подписи поля. Нативный `input` связан с ней через `for`, а контрол без нативной
+* подписи (combobox `SSelect` на `div`) — через `aria-labelledby` с этим же id.
+*/
+var buildFieldLabelId = (fieldId) => `${fieldId}-label`;
+//#endregion
+export { buildFieldLabelId };

package/dist/components/SLabel/SLabel.types.cjs

@@ -0,0 +1,17 @@
+//#region src/components/SLabel/SLabel.types.ts
+var ESLabelSize = /* @__PURE__ */ function(ESLabelSize) {
+	ESLabelSize["EXTRA_SMALL"] = "extra-small";
+	ESLabelSize["SMALL"] = "small";
+	ESLabelSize["MEDIUM"] = "medium";
+	return ESLabelSize;
+}({});
+var ESLabelVariant = /* @__PURE__ */ function(ESLabelVariant) {
+	ESLabelVariant["NEUTRAL"] = "neutral";
+	ESLabelVariant["MAIN"] = "main";
+	ESLabelVariant["ERROR"] = "error";
+	ESLabelVariant["SUCCESS"] = "success";
+	return ESLabelVariant;
+}({});
+//#endregion
+exports.ESLabelSize = ESLabelSize;
+exports.ESLabelVariant = ESLabelVariant;

package/dist/components/SLabel/SLabel.types.js

@@ -0,0 +1,16 @@
+//#region src/components/SLabel/SLabel.types.ts
+var ESLabelSize = /* @__PURE__ */ function(ESLabelSize) {
+	ESLabelSize["EXTRA_SMALL"] = "extra-small";
+	ESLabelSize["SMALL"] = "small";
+	ESLabelSize["MEDIUM"] = "medium";
+	return ESLabelSize;
+}({});
+var ESLabelVariant = /* @__PURE__ */ function(ESLabelVariant) {
+	ESLabelVariant["NEUTRAL"] = "neutral";
+	ESLabelVariant["MAIN"] = "main";
+	ESLabelVariant["ERROR"] = "error";
+	ESLabelVariant["SUCCESS"] = "success";
+	return ESLabelVariant;
+}({});
+//#endregion
+export { ESLabelSize, ESLabelVariant };

package/dist/components/SLabel/SLabel.vue.cjs

@@ -0,0 +1,6 @@
+const require_SLabel_vue_vue_type_script_setup_true_lang = require("./SLabel.vue_vue_type_script_setup_true_lang.cjs");
+;/* empty css                                                            */
+//#region src/components/SLabel/SLabel.vue
+var SLabel_default = require_SLabel_vue_vue_type_script_setup_true_lang.default;
+//#endregion
+exports.default = SLabel_default;