@feugene/granularity 0.49.0 → 0.50.0

package/dist/components/GrInput/chunks/{GrInput-DV4gMWPR.js → GrInput-CoaFLpaU.js}

@@ -8,7 +8,7 @@ import { t as useControlAddons } from "../../../chunks/useControlAddons-asUr10Pf
 import { a as controlStateTextKey, i as controlStateIconColors, n as controlStateFallbackText, r as controlStateIconClass, t as controlSignalState } from "../../../chunks/controlState-DoImKciE.js";
 import { a as grInputFieldClass, c as paddingX, i as addonSegmentSuffixClass, n as addonInlineSuffixClass, o as grInputShellClass, r as addonSegmentPrefixClass, t as addonInlinePrefixClass } from "../../../chunks/grInputStyles-DgQYjJvD.js";
 import { t as loader_2_default } from "../../../chunks/loader-2-B1fdsdWW.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, markRaw, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, markRaw, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useSlots } from "vue";
 //#region ~icons/lucide/eye
 var _hoisted_1$2 = {
 	viewBox: "0 0 24 24",
@@ -58,7 +58,8 @@ var _hoisted_1 = {
 	"data-gr-input": "",
 	class: "w-full"
 };
-var _hoisted_2 = [
+var _hoisted_2 = ["id", "aria-hidden"];
+var _hoisted_3 = [
 	"id",
 	"name",
 	"type",
@@ -76,22 +77,23 @@ var _hoisted_2 = [
 	"aria-label",
 	"aria-busy"
 ];
-var _hoisted_3 = {
+var _hoisted_4 = {
 	key: 1,
 	"data-gr-input-trailing": "",
 	class: "absolute inset-y-0 right-1 flex items-center gap-0.5"
 };
-var _hoisted_4 = {
+var _hoisted_5 = {
 	key: 1,
 	"data-gr-input-spinner": "",
 	class: "flex h-6 w-6 items-center justify-center text-[var(--gr-muted-fg)]",
 	"aria-hidden": "true"
 };
-var _hoisted_5 = ["aria-label"];
-var _hoisted_6 = ["aria-label", "aria-pressed"];
-var _hoisted_7 = ["id"];
-var _hoisted_8 = ["id"];
-var _hoisted_9 = {
+var _hoisted_6 = ["aria-label"];
+var _hoisted_7 = ["aria-label", "aria-pressed"];
+var _hoisted_8 = ["id", "aria-hidden"];
+var _hoisted_9 = ["id"];
+var _hoisted_10 = ["id"];
+var _hoisted_11 = {
 	key: 2,
 	"data-gr-input-live": "",
 	class: "sr-only",
@@ -140,6 +142,10 @@ var GrInput_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: false
 		},
+		describeAddons: {
+			type: Boolean,
+			default: false
+		},
 		loading: {
 			type: Boolean,
 			default: false
@@ -175,6 +181,7 @@ var GrInput_default = /* @__PURE__ */ defineComponent({
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const slots = useSlots();
 		const field = useGrFormFieldContext();
 		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrInput" });
 		const resolvedClearable = useGrComponentProp("GrInput", "clearable", () => props.clearable, false);
@@ -216,10 +223,22 @@ var GrInput_default = /* @__PURE__ */ defineComponent({
 		const stateIcon = computed(() => signalState.value === "success" ? check_circle_default : alert_triangle_default);
 		const stateIconClass = computed(() => signalState.value ? `${controlStateIconClass} ${controlStateIconColors[signalState.value]}` : "");
 		const stateTextId = useId();
+		const prefixId = useId();
+		const suffixId = useId();
+		/**
+		* Аддоны в описании поля.
+		*
+		* Снять с них `aria-hidden` мало: `<div>` рядом с полем в его доступное имя не
+		* входит, и диктор наткнулся бы на текст только при обходе страницы — то есть
+		* не тогда, когда он нужен. Поэтому значащий аддон уезжает в
+		* `aria-describedby`, а не просто перестаёт быть скрытым.
+		*/
+		const addonDescribedBy = computed(() => props.describeAddons ? [slots.prefix ? prefixId : void 0, slots.suffix ? suffixId : void 0] : []);
 		const describedBy = computed(() => [
 			field?.describedById.value,
 			props.showCount ? countId : void 0,
-			signalState.value ? stateTextId : void 0
+			signalState.value ? stateTextId : void 0,
+			...addonDescribedBy.value
 		].filter(Boolean).join(" ") || void 0);
 		const trailingCount = computed(() => (showClear.value ? 1 : 0) + (showPasswordToggle.value ? 1 : 0) + (props.loading ? 1 : 0) + (signalState.value ? 1 : 0));
 		const trailingReserve = computed(() => trailingCount.value > 0 ? `${trailingCount.value * 28}px` : "0px");
@@ -280,13 +299,14 @@ var GrInput_default = /* @__PURE__ */ defineComponent({
 				createElementVNode("div", { class: normalizeClass(shellClass.value) }, [
 					_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", {
 						key: 0,
+						id: unref(prefixId),
 						ref_key: "prefixEl",
 						ref: prefixEl,
 						"data-testid": "gr-input-prefix",
 						class: normalizeClass(["absolute inset-y-0 left-0 flex items-center justify-center text-[var(--gr-muted-fg)] pointer-events-none select-none truncate", prefixAddonClass.value]),
 						style: normalizeStyle(unref(prefixStyle)),
-						"aria-hidden": "true"
-					}, [renderSlot(_ctx.$slots, "prefix")], 6)) : createCommentVNode("", true),
+						"aria-hidden": __props.describeAddons ? void 0 : "true"
+					}, [renderSlot(_ctx.$slots, "prefix")], 14, _hoisted_2)) : createCommentVNode("", true),
 					createElementVNode("input", mergeProps({
 						id: resolvedId.value,
 						ref_key: "inputEl",
@@ -313,15 +333,15 @@ var GrInput_default = /* @__PURE__ */ defineComponent({
 						onChange,
 						onFocus,
 						onBlur
-					}), null, 16, _hoisted_2),
-					trailingCount.value > 0 ? (openBlock(), createElementBlock("div", _hoisted_3, [
+					}), null, 16, _hoisted_3),
+					trailingCount.value > 0 ? (openBlock(), createElementBlock("div", _hoisted_4, [
 						signalState.value ? (openBlock(), createElementBlock("span", {
 							key: 0,
 							"data-gr-input-state": "",
 							class: normalizeClass(stateIconClass.value),
 							"aria-hidden": "true"
 						}, [(openBlock(), createBlock(resolveDynamicComponent(stateIcon.value), { class: "h-4 w-4" }))], 2)) : createCommentVNode("", true),
-						__props.loading ? (openBlock(), createElementBlock("span", _hoisted_4, [createVNode(unref(loader_2_default), { class: "h-4 w-4 animate-spin" })])) : createCommentVNode("", true),
+						__props.loading ? (openBlock(), createElementBlock("span", _hoisted_5, [createVNode(unref(loader_2_default), { class: "h-4 w-4 animate-spin" })])) : createCommentVNode("", true),
 						showClear.value ? (openBlock(), createElementBlock("button", {
 							key: 2,
 							type: "button",
@@ -332,7 +352,7 @@ var GrInput_default = /* @__PURE__ */ defineComponent({
 						}, [createVNode(unref(x_default), {
 							class: "h-4 w-4",
 							"aria-hidden": "true"
-						})], 8, _hoisted_5)) : createCommentVNode("", true),
+						})], 8, _hoisted_6)) : createCommentVNode("", true),
 						showPasswordToggle.value ? (openBlock(), createElementBlock("button", {
 							key: 3,
 							type: "button",
@@ -349,31 +369,32 @@ var GrInput_default = /* @__PURE__ */ defineComponent({
 							key: 1,
 							class: "h-4 w-4",
 							"aria-hidden": "true"
-						}))], 8, _hoisted_6)) : createCommentVNode("", true)
+						}))], 8, _hoisted_7)) : createCommentVNode("", true)
 					])) : createCommentVNode("", true),
 					_ctx.$slots.suffix ? (openBlock(), createElementBlock("div", {
 						key: 2,
+						id: unref(suffixId),
 						ref_key: "suffixEl",
 						ref: suffixEl,
 						"data-testid": "gr-input-suffix",
 						class: normalizeClass(["absolute inset-y-0 right-0 flex items-center justify-center text-[var(--gr-muted-fg)] pointer-events-none select-none truncate", [suffixAddonClass.value, __props.suffixFixed ? "[direction:rtl]" : ""]]),
 						style: normalizeStyle(unref(suffixStyle)),
-						"aria-hidden": "true"
-					}, [renderSlot(_ctx.$slots, "suffix")], 6)) : createCommentVNode("", true)
+						"aria-hidden": __props.describeAddons ? void 0 : "true"
+					}, [renderSlot(_ctx.$slots, "suffix")], 14, _hoisted_8)) : createCommentVNode("", true)
 				], 2),
 				signalState.value ? (openBlock(), createElementBlock("span", {
 					key: 0,
 					id: unref(stateTextId),
 					"data-gr-input-state-text": "",
 					class: "sr-only"
-				}, toDisplayString(stateText.value), 9, _hoisted_7)) : createCommentVNode("", true),
+				}, toDisplayString(stateText.value), 9, _hoisted_9)) : createCommentVNode("", true),
 				__props.showCount ? (openBlock(), createElementBlock("div", {
 					key: 1,
 					id: unref(countId),
 					"data-gr-input-count": "",
 					class: "mt-1 text-right text-[length:var(--gr-control-text-xs)] leading-[var(--gr-leading-xs)] text-[var(--gr-muted-fg)] tabular-nums"
-				}, toDisplayString(countText.value), 9, _hoisted_8)) : createCommentVNode("", true),
-				__props.showCount ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(liveMessage.value), 1)) : createCommentVNode("", true)
+				}, toDisplayString(countText.value), 9, _hoisted_10)) : createCommentVNode("", true),
+				__props.showCount ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(liveMessage.value), 1)) : createCommentVNode("", true)
 			]);
 		};
 	}

package/dist/components/GrInput/chunks/GrInput-CoaFLpaU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrInput-CoaFLpaU.js","names":["$slots","$attrs"],"sources":["../../../../src/components/GrInput/GrInput.vue","../../../../src/components/GrInput/GrInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { GrComponentSize } from '../shared/sizes'\nimport {\n  controlSignalState,\n  controlStateFallbackText,\n  controlStateIconClass,\n  controlStateIconColors,\n  controlStateTextKey,\n} from '../shared/controlState'\nimport { computed, ref, useId } from 'vue'\n\nimport { useControlAddons } from '../../composables/internal/useControlAddons'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { InputHTMLAttributes } from 'vue'\n\nimport { addonInlinePrefixClass, addonInlineSuffixClass, addonSegmentPrefixClass, addonSegmentSuffixClass, grInputFieldClass, grInputShellClass, paddingX } from './grInputStyles'\n\nimport IconLoader from '~icons/lucide/loader-2'\nimport IconX from '~icons/lucide/x'\nimport IconCheckCircle from '~icons/lucide/check-circle'\nimport IconAlertTriangle from '~icons/lucide/alert-triangle'\nimport IconEye from '~icons/lucide/eye'\nimport IconEyeOff from '~icons/lucide/eye-off'\n\nexport interface GrInputProps {\n  /**\n     * Значение поля. Необязательное: без `v-model` поле рисуется пустым.\n     * Дефолт — пустая строка, а не `undefined`: длина значения читается\n     * напрямую (`showClear`), и `undefined` уронил бы рендер.\n     */\n  modelValue?: string\n  type?: 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url'\n  placeholder?: string\n  autocomplete?: string\n  inputmode?: InputHTMLAttributes['inputmode']\n  disabled?: boolean\n  /** Только для чтения: значение видно и выделяемо, но не редактируется. */\n  readonly?: boolean\n  invalid?: boolean\n  /** Обязательное поле (`aria-required`). Складывается с `required` у `GrFormField`. */\n  required?: boolean\n  /** Доступное имя вне `GrFormField`. */\n  ariaLabel?: string\n  state?: 'default' | 'success' | 'warning' | 'danger'\n  name?: string\n  id?: string\n  size?: GrInputSize\n\n  /** Показывать кнопку очистки, когда есть значение (и не disabled/readonly). */\n  clearable?: boolean\n  /** i18n aria-label кнопки очистки. */\n  clearLabel?: string\n  /** Ограничение длины + основа для счётчика символов. */\n  maxlength?: number\n  /** Показывать счётчик символов (`len` или `len/maxlength`). */\n  showCount?: boolean\n  /**\n   * Аддоны `prefix`/`suffix` несут смысл, а не украшают.\n   *\n   * По умолчанию они скрыты от скринридера: чаще всего там иконка поиска или\n   * глиф, повторяющий подпись поля, и второе прочтение мешает. Но `https://`\n   * или `₽` бывают единственным местом, где сказано, что вводить, — тогда\n   * аддон уезжает в `aria-describedby` поля.\n   *\n   * Декоративную иконку внутри слота помечайте `aria-hidden` сами: проп снимает\n   * скрытие со всей обёртки, а не разбирает её содержимое.\n   */\n  describeAddons?: boolean\n  /**\n     * Фоновая работа по полю (проверка занятости логина, автосохранение):\n     * спиннер в trailing-области + `aria-busy`. Ввод не блокируется —\n     * для этого есть `disabled`/`readonly`.\n     */\n  loading?: boolean\n  /** Кнопка показать/скрыть пароль (только при `type=\"password\"`). */\n  passwordToggle?: boolean\n  /** i18n aria-label кнопки показать/скрыть пароль. */\n  passwordShowLabel?: string\n  passwordHideLabel?: string\n\n  textAlign?: GrInputTextAlign\n\n  prefixMinWidth?: string\n  prefixMaxWidth?: string\n  suffixMinWidth?: string\n  suffixMaxWidth?: string\n  /**\n     * Фиксированная ширина у prefix/suffix: аддон получает жёсткую ширину\n     * (из `*MaxWidth` → `*MinWidth` → дефолт), а контент обрезается по краю\n     * (prefix — справа, suffix — слева). По умолчанию аддоны «растягиваются»\n     * под контент (в пределах min/max), а излишек клипается оболочкой.\n     */\n  prefixFixed?: boolean\n  suffixFixed?: boolean\n  /**\n     * Как выглядят аддоны `#prefix`/`#suffix`.\n     *\n     * `segment` (по умолчанию) — отдельный отсек, отрезанный рамкой и выровненный\n     * по ступени размера: так поле с «₽» и поле с «USD» стоят в колонку.\n     * `inline` — украшение внутри рамки: ни разделителя, ни своей ширины.\n     *\n     * Разница не косметическая. Поисковая строка с лупой в сегменте читается\n     * составным элементом — полем с приклеенной кнопкой, — а не одним полем;\n     * именно поэтому иконку внутри рамки нельзя было выразить аддоном, и\n     * потребители отказывались от неё вовсе.\n     */\n  addon?: 'segment' | 'inline'\n}\n\nexport interface GrInputEmits {\n  (e: 'update:modelValue', value: string): void\n  /** Значение зафиксировано нативным `change` — по `blur` или `Enter`. */\n  (e: 'change', value: string): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n  /**\n   * Значение стёрто кнопкой очистки. Отдельное событие потому, что по\n   * `update:modelValue` программную очистку от ручного стирания не отличить.\n   */\n  (e: 'clear'): void\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nexport type GrInputSize = GrComponentSize\nexport type GrInputTextAlign = 'left' | 'center' | 'right'\n\nconst props = withDefaults(\n  defineProps<GrInputProps>(),\n  {\n    modelValue: '',\n    type: 'text',\n    placeholder: undefined,\n    autocomplete: undefined,\n    inputmode: undefined,\n    disabled: false,\n    readonly: false,\n    invalid: false,\n    required: false,\n    ariaLabel: undefined,\n    state: 'default',\n    name: undefined,\n    id: undefined,\n    size: undefined,\n\n    // Настраивается через `GrConfigProvider`; дефолт — в резолвере ниже.\n    clearable: undefined,\n    clearLabel: undefined,\n    maxlength: undefined,\n    showCount: false,\n    describeAddons: false,\n    loading: false,\n    passwordToggle: false,\n    passwordShowLabel: undefined,\n    passwordHideLabel: undefined,\n\n    textAlign: 'left',\n\n    prefixMinWidth: undefined,\n    prefixMaxWidth: undefined,\n    suffixMinWidth: undefined,\n    suffixMaxWidth: undefined,\n    prefixFixed: false,\n    suffixFixed: false,\n    addon: 'segment',\n  },\n)\n\nconst emit = defineEmits<GrInputEmits>()\nconst slots = defineSlots<{\n  /** Аддон слева от поля: иконка, код валюты, метка. */\n  prefix?: () => any\n  /** Аддон справа от поля: единица измерения, подсказка. */\n  suffix?: () => any\n}>()\n\n// Контекст `GrFormField` (если инпут внутри него): даёт id/aria-describedby/\n// invalid/required как fallback, чтобы не прокидывать `forId` вручную.\nconst field = useGrFormFieldContext()\n\n// Эффективные значения: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrInput' })\nconst resolvedClearable = useGrComponentProp('GrInput', 'clearable', () => props.clearable, false)\n\nconst resolvedId = computed(() => props.id ?? field?.id.value)\n\n// Счётчик обязан быть частью описания поля: иначе «12 / 60» видно глазами, но\n// не слышно — при том, что ограничение длины и есть смысл счётчика.\nconst countId = useId()\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n} = useGrFormControl(() => props)\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\nfunction focus(): void {\n  inputEl.value?.focus()\n}\n\nfunction blur(): void {\n  inputEl.value?.blur()\n}\n\n/** Выделить содержимое — спутник `focus()` для «подставили значение, перезапишите». */\nfunction select(): void {\n  inputEl.value?.select()\n}\n\ndefineExpose({\n  focus,\n  blur,\n  select,\n})\n\nconst ADDON_MIN_WIDTH_BY_SIZE: Record<GrInputSize, string> = {\n  xs: '2rem', // w-8\n  sm: '2.25rem', // w-9\n  md: '2.5rem', // w-10\n  lg: '3rem', // w-12\n}\n\nconst passwordVisible = ref(false)\n// Тип поля с учётом переключателя пароля.\nconst resolvedType = computed(() => (props.type === 'password' && passwordVisible.value ? 'text' : props.type))\n\nconst showPasswordToggle = computed(() => props.passwordToggle && props.type === 'password' && !isDisabled.value)\nconst showClear = computed(() => resolvedClearable.value && props.modelValue.length > 0 && !isDisabled.value && !isReadonly.value)\n\n/**\n * Небуквенный признак состояния: иконка для глаз плюс скрытая подпись для\n * скринридера. Смысл `success`/`warning` иначе несёт один цвет рамки — WCAG\n * 1.4.1. Подробности и почему `danger` его не получает — `shared/controlState`.\n */\nconst signalState = computed(() => controlSignalState(props.state, isInvalid.value))\nconst stateIcon = computed(() => (signalState.value === 'success' ? IconCheckCircle : IconAlertTriangle))\nconst stateIconClass = computed(() => (signalState.value\n  ? `${controlStateIconClass} ${controlStateIconColors[signalState.value]}`\n  : ''))\n\nconst stateTextId = useId()\nconst prefixId = useId()\nconst suffixId = useId()\n\n/**\n * Аддоны в описании поля.\n *\n * Снять с них `aria-hidden` мало: `<div>` рядом с полем в его доступное имя не\n * входит, и диктор наткнулся бы на текст только при обходе страницы — то есть\n * не тогда, когда он нужен. Поэтому значащий аддон уезжает в\n * `aria-describedby`, а не просто перестаёт быть скрытым.\n */\nconst addonDescribedBy = computed(() => (props.describeAddons\n  ? [slots.prefix ? prefixId : undefined, slots.suffix ? suffixId : undefined]\n  : []))\n\nconst describedBy = computed(() =>\n  [\n    field?.describedById.value,\n    props.showCount ? countId : undefined,\n    signalState.value ? stateTextId : undefined,\n    ...addonDescribedBy.value,\n  ]\n    .filter(Boolean)\n    .join(' ') || undefined,\n)\n\nconst trailingCount = computed(() => (showClear.value ? 1 : 0) + (showPasswordToggle.value ? 1 : 0) + (props.loading ? 1 : 0) + (signalState.value ? 1 : 0))\nconst trailingReserve = computed(() => (trailingCount.value > 0 ? `${trailingCount.value * 28}px` : '0px'))\n\nconst isInlineAddon = computed(() => props.addon === 'inline')\n\nconst prefixAddonClass = computed(() => (isInlineAddon.value ? addonInlinePrefixClass : addonSegmentPrefixClass))\nconst suffixAddonClass = computed(() => (isInlineAddon.value ? addonInlineSuffixClass : addonSegmentSuffixClass))\n\nconst {\n  prefixEl,\n  suffixEl,\n  prefixStyle,\n  suffixStyle,\n  fieldPadding: inputStyle,\n} = useControlAddons(() => props, {\n  // У украшения своей ширины нет — иначе иконка висела бы в пустом отсеке\n  // шириной со ступень размера.\n  defaultMinWidth: () => (isInlineAddon.value ? '0px' : ADDON_MIN_WIDTH_BY_SIZE[resolvedSize.value]),\n  paddingX: () => paddingX[resolvedSize.value],\n  trailingReserve: () => trailingReserve.value,\n})\n\n// Border/ring/disabled — на оболочке (`focus-within`), размеры/выравнивание — на инпуте.\nconst shellClass = computed(() => grInputShellClass({\n  state: props.state,\n  invalid: isInvalid.value,\n  disabled: isDisabled.value,\n}))\n\nconst className = computed(() => grInputFieldClass({\n  size: resolvedSize.value,\n  align: props.textAlign,\n}))\n\nfunction onInput(e: Event): void {\n  emit('update:modelValue', (e.target as HTMLInputElement).value)\n}\n\n// Объявленный emit уходит из `$attrs`, поэтому нативные события переизлучаем\n// руками — иначе `@change`/`@focus`/`@blur` у потребителя перестали бы работать.\nfunction onChange(e: Event): void {\n  emit('change', (e.target as HTMLInputElement).value)\n}\n\nfunction onFocus(e: FocusEvent): void {\n  emit('focus', e)\n}\n\nfunction onBlur(e: FocusEvent): void {\n  emit('blur', e)\n}\n\n// ————— Trailing-контролы: очистка, переключатель пароля, счётчик символов.\nconst { t } = useGranularityTranslations()\n\nconst stateText = computed(() => (signalState.value\n  ? t(controlStateTextKey[signalState.value], controlStateFallbackText[signalState.value])\n  : ''))\nconst resolvedClearLabel = computed(() => props.clearLabel ?? t('gr.input.clear', 'Clear'))\nconst resolvedPasswordShowLabel = computed(() => props.passwordShowLabel ?? t('gr.input.showPassword', 'Show password'))\nconst resolvedPasswordHideLabel = computed(() => props.passwordHideLabel ?? t('gr.input.hidePassword', 'Hide password'))\n\n// Счётчик символов: `len` или `len / maxlength`.\nconst countText = computed(() =>\n  props.maxlength !== undefined ? `${props.modelValue.length} / ${props.maxlength}` : String(props.modelValue.length),\n)\n\n/**\n * Живой регион объявляет только исчерпание лимита. Читать вслух каждый символ\n * нельзя — диктор захлебнётся, а сам счётчик и так связан с полем через\n * `aria-describedby` и читается при фокусе.\n */\nconst limitReached = computed(() =>\n  props.maxlength !== undefined && props.modelValue.length >= props.maxlength,\n)\nconst liveMessage = computed(() =>\n  limitReached.value ? t('gr.input.limitReached', 'Character limit reached') : '',\n)\n\nfunction clear(): void {\n  emit('update:modelValue', '')\n  // Очистка — такая же фиксация значения, как уход фокуса: без `change`\n  // подписка «значение установилось» пропускала бы ровно её.\n  emit('change', '')\n  emit('clear')\n  inputEl.value?.focus()\n}\n\nfunction togglePassword(): void {\n  passwordVisible.value = !passwordVisible.value\n  inputEl.value?.focus()\n}\n</script>\n\n<template>\n  <div data-gr-input class=\"w-full\">\n    <div :class=\"shellClass\">\n      <div\n          v-if=\"$slots.prefix\"\n          :id=\"prefixId\"\n          ref=\"prefixEl\"\n          data-testid=\"gr-input-prefix\"\n          class=\"absolute inset-y-0 left-0 flex items-center justify-center text-[var(--gr-muted-fg)] pointer-events-none select-none truncate\"\n          :class=\"prefixAddonClass\"\n          :style=\"prefixStyle\"\n          :aria-hidden=\"describeAddons ? undefined : 'true'\"\n      >\n        <slot name=\"prefix\" />\n      </div>\n\n      <input\n          :id=\"resolvedId\"\n          ref=\"inputEl\"\n          v-bind=\"$attrs\"\n          :name=\"props.name\"\n          :type=\"resolvedType\"\n          :inputmode=\"props.inputmode\"\n          :autocomplete=\"props.autocomplete\"\n          :placeholder=\"props.placeholder\"\n          :disabled=\"isDisabled\"\n          :readonly=\"isReadonly\"\n          :maxlength=\"props.maxlength\"\n          :value=\"props.modelValue\"\n          :aria-invalid=\"isInvalid ? 'true' : undefined\"\n          :aria-describedby=\"describedBy\"\n          :aria-required=\"isRequired ? 'true' : undefined\"\n          :aria-readonly=\"isReadonly ? 'true' : undefined\"\n          :aria-label=\"ariaLabel\"\n          :aria-busy=\"props.loading ? 'true' : undefined\"\n          class=\"w-full bg-transparent text-[var(--gr-fg)] placeholder:text-[var(--gr-muted-fg)] focus:placeholder:text-transparent focus:outline-none disabled:cursor-not-allowed disabled:text-[var(--gr-muted-fg)]\"\n          :class=\"className\"\n          :style=\"inputStyle\"\n          @input=\"onInput\"\n          @change=\"onChange\"\n          @focus=\"onFocus\"\n          @blur=\"onBlur\"\n      >\n\n      <div\n          v-if=\"trailingCount > 0\"\n          data-gr-input-trailing\n          class=\"absolute inset-y-0 right-1 flex items-center gap-0.5\"\n      >\n        <span\n            v-if=\"signalState\"\n            data-gr-input-state\n            :class=\"stateIconClass\"\n            aria-hidden=\"true\"\n        >\n          <component :is=\"stateIcon\" class=\"h-4 w-4\" />\n        </span>\n\n        <span\n            v-if=\"loading\"\n            data-gr-input-spinner\n            class=\"flex h-6 w-6 items-center justify-center text-[var(--gr-muted-fg)]\"\n            aria-hidden=\"true\"\n        >\n          <IconLoader class=\"h-4 w-4 animate-spin\" />\n        </span>\n\n        <button\n            v-if=\"showClear\"\n            type=\"button\"\n            data-gr-input-clear\n            :aria-label=\"resolvedClearLabel\"\n            class=\"flex h-6 w-6 items-center justify-center rounded-[var(--gr-radius-sm)] text-[var(--gr-muted-fg)] transition-colors hover:bg-[var(--gr-muted)] hover:text-[var(--gr-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]\"\n            @click=\"clear\"\n        >\n          <IconX class=\"h-4 w-4\" aria-hidden=\"true\" />\n        </button>\n\n        <button\n            v-if=\"showPasswordToggle\"\n            type=\"button\"\n            data-gr-input-password-toggle\n            :aria-label=\"passwordVisible ? resolvedPasswordHideLabel : resolvedPasswordShowLabel\"\n            :aria-pressed=\"passwordVisible ? 'true' : 'false'\"\n            class=\"flex h-6 w-6 items-center justify-center rounded-[var(--gr-radius-sm)] text-[var(--gr-muted-fg)] transition-colors hover:bg-[var(--gr-muted)] hover:text-[var(--gr-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]\"\n            @click=\"togglePassword\"\n        >\n          <IconEyeOff v-if=\"passwordVisible\" class=\"h-4 w-4\" aria-hidden=\"true\" />\n          <IconEye v-else class=\"h-4 w-4\" aria-hidden=\"true\" />\n        </button>\n      </div>\n\n      <div\n          v-if=\"$slots.suffix\"\n          :id=\"suffixId\"\n          ref=\"suffixEl\"\n          data-testid=\"gr-input-suffix\"\n          class=\"absolute inset-y-0 right-0 flex items-center justify-center text-[var(--gr-muted-fg)] pointer-events-none select-none truncate\"\n          :class=\"[suffixAddonClass, suffixFixed ? '[direction:rtl]' : '']\"\n          :style=\"suffixStyle\"\n          :aria-hidden=\"describeAddons ? undefined : 'true'\"\n      >\n        <slot name=\"suffix\" />\n      </div>\n    </div>\n\n    <span v-if=\"signalState\" :id=\"stateTextId\" data-gr-input-state-text class=\"sr-only\">{{ stateText }}</span>\n\n    <div\n        v-if=\"showCount\"\n        :id=\"countId\"\n        data-gr-input-count\n        class=\"mt-1 text-right text-[length:var(--gr-control-text-xs)] leading-[var(--gr-leading-xs)] text-[var(--gr-muted-fg)] tabular-nums\"\n    >\n      {{ countText }}\n    </div>\n\n    <span\n        v-if=\"showCount\"\n        data-gr-input-live\n        class=\"sr-only\"\n        role=\"status\"\n        aria-live=\"polite\"\n    >{{ liveMessage }}</span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { GrComponentSize } from '../shared/sizes'\nimport {\n  controlSignalState,\n  controlStateFallbackText,\n  controlStateIconClass,\n  controlStateIconColors,\n  controlStateTextKey,\n} from '../shared/controlState'\nimport { computed, ref, useId } from 'vue'\n\nimport { useControlAddons } from '../../composables/internal/useControlAddons'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { InputHTMLAttributes } from 'vue'\n\nimport { addonInlinePrefixClass, addonInlineSuffixClass, addonSegmentPrefixClass, addonSegmentSuffixClass, grInputFieldClass, grInputShellClass, paddingX } from './grInputStyles'\n\nimport IconLoader from '~icons/lucide/loader-2'\nimport IconX from '~icons/lucide/x'\nimport IconCheckCircle from '~icons/lucide/check-circle'\nimport IconAlertTriangle from '~icons/lucide/alert-triangle'\nimport IconEye from '~icons/lucide/eye'\nimport IconEyeOff from '~icons/lucide/eye-off'\n\nexport interface GrInputProps {\n  /**\n     * Значение поля. Необязательное: без `v-model` поле рисуется пустым.\n     * Дефолт — пустая строка, а не `undefined`: длина значения читается\n     * напрямую (`showClear`), и `undefined` уронил бы рендер.\n     */\n  modelValue?: string\n  type?: 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url'\n  placeholder?: string\n  autocomplete?: string\n  inputmode?: InputHTMLAttributes['inputmode']\n  disabled?: boolean\n  /** Только для чтения: значение видно и выделяемо, но не редактируется. */\n  readonly?: boolean\n  invalid?: boolean\n  /** Обязательное поле (`aria-required`). Складывается с `required` у `GrFormField`. */\n  required?: boolean\n  /** Доступное имя вне `GrFormField`. */\n  ariaLabel?: string\n  state?: 'default' | 'success' | 'warning' | 'danger'\n  name?: string\n  id?: string\n  size?: GrInputSize\n\n  /** Показывать кнопку очистки, когда есть значение (и не disabled/readonly). */\n  clearable?: boolean\n  /** i18n aria-label кнопки очистки. */\n  clearLabel?: string\n  /** Ограничение длины + основа для счётчика символов. */\n  maxlength?: number\n  /** Показывать счётчик символов (`len` или `len/maxlength`). */\n  showCount?: boolean\n  /**\n   * Аддоны `prefix`/`suffix` несут смысл, а не украшают.\n   *\n   * По умолчанию они скрыты от скринридера: чаще всего там иконка поиска или\n   * глиф, повторяющий подпись поля, и второе прочтение мешает. Но `https://`\n   * или `₽` бывают единственным местом, где сказано, что вводить, — тогда\n   * аддон уезжает в `aria-describedby` поля.\n   *\n   * Декоративную иконку внутри слота помечайте `aria-hidden` сами: проп снимает\n   * скрытие со всей обёртки, а не разбирает её содержимое.\n   */\n  describeAddons?: boolean\n  /**\n     * Фоновая работа по полю (проверка занятости логина, автосохранение):\n     * спиннер в trailing-области + `aria-busy`. Ввод не блокируется —\n     * для этого есть `disabled`/`readonly`.\n     */\n  loading?: boolean\n  /** Кнопка показать/скрыть пароль (только при `type=\"password\"`). */\n  passwordToggle?: boolean\n  /** i18n aria-label кнопки показать/скрыть пароль. */\n  passwordShowLabel?: string\n  passwordHideLabel?: string\n\n  textAlign?: GrInputTextAlign\n\n  prefixMinWidth?: string\n  prefixMaxWidth?: string\n  suffixMinWidth?: string\n  suffixMaxWidth?: string\n  /**\n     * Фиксированная ширина у prefix/suffix: аддон получает жёсткую ширину\n     * (из `*MaxWidth` → `*MinWidth` → дефолт), а контент обрезается по краю\n     * (prefix — справа, suffix — слева). По умолчанию аддоны «растягиваются»\n     * под контент (в пределах min/max), а излишек клипается оболочкой.\n     */\n  prefixFixed?: boolean\n  suffixFixed?: boolean\n  /**\n     * Как выглядят аддоны `#prefix`/`#suffix`.\n     *\n     * `segment` (по умолчанию) — отдельный отсек, отрезанный рамкой и выровненный\n     * по ступени размера: так поле с «₽» и поле с «USD» стоят в колонку.\n     * `inline` — украшение внутри рамки: ни разделителя, ни своей ширины.\n     *\n     * Разница не косметическая. Поисковая строка с лупой в сегменте читается\n     * составным элементом — полем с приклеенной кнопкой, — а не одним полем;\n     * именно поэтому иконку внутри рамки нельзя было выразить аддоном, и\n     * потребители отказывались от неё вовсе.\n     */\n  addon?: 'segment' | 'inline'\n}\n\nexport interface GrInputEmits {\n  (e: 'update:modelValue', value: string): void\n  /** Значение зафиксировано нативным `change` — по `blur` или `Enter`. */\n  (e: 'change', value: string): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n  /**\n   * Значение стёрто кнопкой очистки. Отдельное событие потому, что по\n   * `update:modelValue` программную очистку от ручного стирания не отличить.\n   */\n  (e: 'clear'): void\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nexport type GrInputSize = GrComponentSize\nexport type GrInputTextAlign = 'left' | 'center' | 'right'\n\nconst props = withDefaults(\n  defineProps<GrInputProps>(),\n  {\n    modelValue: '',\n    type: 'text',\n    placeholder: undefined,\n    autocomplete: undefined,\n    inputmode: undefined,\n    disabled: false,\n    readonly: false,\n    invalid: false,\n    required: false,\n    ariaLabel: undefined,\n    state: 'default',\n    name: undefined,\n    id: undefined,\n    size: undefined,\n\n    // Настраивается через `GrConfigProvider`; дефолт — в резолвере ниже.\n    clearable: undefined,\n    clearLabel: undefined,\n    maxlength: undefined,\n    showCount: false,\n    describeAddons: false,\n    loading: false,\n    passwordToggle: false,\n    passwordShowLabel: undefined,\n    passwordHideLabel: undefined,\n\n    textAlign: 'left',\n\n    prefixMinWidth: undefined,\n    prefixMaxWidth: undefined,\n    suffixMinWidth: undefined,\n    suffixMaxWidth: undefined,\n    prefixFixed: false,\n    suffixFixed: false,\n    addon: 'segment',\n  },\n)\n\nconst emit = defineEmits<GrInputEmits>()\nconst slots = defineSlots<{\n  /** Аддон слева от поля: иконка, код валюты, метка. */\n  prefix?: () => any\n  /** Аддон справа от поля: единица измерения, подсказка. */\n  suffix?: () => any\n}>()\n\n// Контекст `GrFormField` (если инпут внутри него): даёт id/aria-describedby/\n// invalid/required как fallback, чтобы не прокидывать `forId` вручную.\nconst field = useGrFormFieldContext()\n\n// Эффективные значения: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrInput' })\nconst resolvedClearable = useGrComponentProp('GrInput', 'clearable', () => props.clearable, false)\n\nconst resolvedId = computed(() => props.id ?? field?.id.value)\n\n// Счётчик обязан быть частью описания поля: иначе «12 / 60» видно глазами, но\n// не слышно — при том, что ограничение длины и есть смысл счётчика.\nconst countId = useId()\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n} = useGrFormControl(() => props)\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\nfunction focus(): void {\n  inputEl.value?.focus()\n}\n\nfunction blur(): void {\n  inputEl.value?.blur()\n}\n\n/** Выделить содержимое — спутник `focus()` для «подставили значение, перезапишите». */\nfunction select(): void {\n  inputEl.value?.select()\n}\n\ndefineExpose({\n  focus,\n  blur,\n  select,\n})\n\nconst ADDON_MIN_WIDTH_BY_SIZE: Record<GrInputSize, string> = {\n  xs: '2rem', // w-8\n  sm: '2.25rem', // w-9\n  md: '2.5rem', // w-10\n  lg: '3rem', // w-12\n}\n\nconst passwordVisible = ref(false)\n// Тип поля с учётом переключателя пароля.\nconst resolvedType = computed(() => (props.type === 'password' && passwordVisible.value ? 'text' : props.type))\n\nconst showPasswordToggle = computed(() => props.passwordToggle && props.type === 'password' && !isDisabled.value)\nconst showClear = computed(() => resolvedClearable.value && props.modelValue.length > 0 && !isDisabled.value && !isReadonly.value)\n\n/**\n * Небуквенный признак состояния: иконка для глаз плюс скрытая подпись для\n * скринридера. Смысл `success`/`warning` иначе несёт один цвет рамки — WCAG\n * 1.4.1. Подробности и почему `danger` его не получает — `shared/controlState`.\n */\nconst signalState = computed(() => controlSignalState(props.state, isInvalid.value))\nconst stateIcon = computed(() => (signalState.value === 'success' ? IconCheckCircle : IconAlertTriangle))\nconst stateIconClass = computed(() => (signalState.value\n  ? `${controlStateIconClass} ${controlStateIconColors[signalState.value]}`\n  : ''))\n\nconst stateTextId = useId()\nconst prefixId = useId()\nconst suffixId = useId()\n\n/**\n * Аддоны в описании поля.\n *\n * Снять с них `aria-hidden` мало: `<div>` рядом с полем в его доступное имя не\n * входит, и диктор наткнулся бы на текст только при обходе страницы — то есть\n * не тогда, когда он нужен. Поэтому значащий аддон уезжает в\n * `aria-describedby`, а не просто перестаёт быть скрытым.\n */\nconst addonDescribedBy = computed(() => (props.describeAddons\n  ? [slots.prefix ? prefixId : undefined, slots.suffix ? suffixId : undefined]\n  : []))\n\nconst describedBy = computed(() =>\n  [\n    field?.describedById.value,\n    props.showCount ? countId : undefined,\n    signalState.value ? stateTextId : undefined,\n    ...addonDescribedBy.value,\n  ]\n    .filter(Boolean)\n    .join(' ') || undefined,\n)\n\nconst trailingCount = computed(() => (showClear.value ? 1 : 0) + (showPasswordToggle.value ? 1 : 0) + (props.loading ? 1 : 0) + (signalState.value ? 1 : 0))\nconst trailingReserve = computed(() => (trailingCount.value > 0 ? `${trailingCount.value * 28}px` : '0px'))\n\nconst isInlineAddon = computed(() => props.addon === 'inline')\n\nconst prefixAddonClass = computed(() => (isInlineAddon.value ? addonInlinePrefixClass : addonSegmentPrefixClass))\nconst suffixAddonClass = computed(() => (isInlineAddon.value ? addonInlineSuffixClass : addonSegmentSuffixClass))\n\nconst {\n  prefixEl,\n  suffixEl,\n  prefixStyle,\n  suffixStyle,\n  fieldPadding: inputStyle,\n} = useControlAddons(() => props, {\n  // У украшения своей ширины нет — иначе иконка висела бы в пустом отсеке\n  // шириной со ступень размера.\n  defaultMinWidth: () => (isInlineAddon.value ? '0px' : ADDON_MIN_WIDTH_BY_SIZE[resolvedSize.value]),\n  paddingX: () => paddingX[resolvedSize.value],\n  trailingReserve: () => trailingReserve.value,\n})\n\n// Border/ring/disabled — на оболочке (`focus-within`), размеры/выравнивание — на инпуте.\nconst shellClass = computed(() => grInputShellClass({\n  state: props.state,\n  invalid: isInvalid.value,\n  disabled: isDisabled.value,\n}))\n\nconst className = computed(() => grInputFieldClass({\n  size: resolvedSize.value,\n  align: props.textAlign,\n}))\n\nfunction onInput(e: Event): void {\n  emit('update:modelValue', (e.target as HTMLInputElement).value)\n}\n\n// Объявленный emit уходит из `$attrs`, поэтому нативные события переизлучаем\n// руками — иначе `@change`/`@focus`/`@blur` у потребителя перестали бы работать.\nfunction onChange(e: Event): void {\n  emit('change', (e.target as HTMLInputElement).value)\n}\n\nfunction onFocus(e: FocusEvent): void {\n  emit('focus', e)\n}\n\nfunction onBlur(e: FocusEvent): void {\n  emit('blur', e)\n}\n\n// ————— Trailing-контролы: очистка, переключатель пароля, счётчик символов.\nconst { t } = useGranularityTranslations()\n\nconst stateText = computed(() => (signalState.value\n  ? t(controlStateTextKey[signalState.value], controlStateFallbackText[signalState.value])\n  : ''))\nconst resolvedClearLabel = computed(() => props.clearLabel ?? t('gr.input.clear', 'Clear'))\nconst resolvedPasswordShowLabel = computed(() => props.passwordShowLabel ?? t('gr.input.showPassword', 'Show password'))\nconst resolvedPasswordHideLabel = computed(() => props.passwordHideLabel ?? t('gr.input.hidePassword', 'Hide password'))\n\n// Счётчик символов: `len` или `len / maxlength`.\nconst countText = computed(() =>\n  props.maxlength !== undefined ? `${props.modelValue.length} / ${props.maxlength}` : String(props.modelValue.length),\n)\n\n/**\n * Живой регион объявляет только исчерпание лимита. Читать вслух каждый символ\n * нельзя — диктор захлебнётся, а сам счётчик и так связан с полем через\n * `aria-describedby` и читается при фокусе.\n */\nconst limitReached = computed(() =>\n  props.maxlength !== undefined && props.modelValue.length >= props.maxlength,\n)\nconst liveMessage = computed(() =>\n  limitReached.value ? t('gr.input.limitReached', 'Character limit reached') : '',\n)\n\nfunction clear(): void {\n  emit('update:modelValue', '')\n  // Очистка — такая же фиксация значения, как уход фокуса: без `change`\n  // подписка «значение установилось» пропускала бы ровно её.\n  emit('change', '')\n  emit('clear')\n  inputEl.value?.focus()\n}\n\nfunction togglePassword(): void {\n  passwordVisible.value = !passwordVisible.value\n  inputEl.value?.focus()\n}\n</script>\n\n<template>\n  <div data-gr-input class=\"w-full\">\n    <div :class=\"shellClass\">\n      <div\n          v-if=\"$slots.prefix\"\n          :id=\"prefixId\"\n          ref=\"prefixEl\"\n          data-testid=\"gr-input-prefix\"\n          class=\"absolute inset-y-0 left-0 flex items-center justify-center text-[var(--gr-muted-fg)] pointer-events-none select-none truncate\"\n          :class=\"prefixAddonClass\"\n          :style=\"prefixStyle\"\n          :aria-hidden=\"describeAddons ? undefined : 'true'\"\n      >\n        <slot name=\"prefix\" />\n      </div>\n\n      <input\n          :id=\"resolvedId\"\n          ref=\"inputEl\"\n          v-bind=\"$attrs\"\n          :name=\"props.name\"\n          :type=\"resolvedType\"\n          :inputmode=\"props.inputmode\"\n          :autocomplete=\"props.autocomplete\"\n          :placeholder=\"props.placeholder\"\n          :disabled=\"isDisabled\"\n          :readonly=\"isReadonly\"\n          :maxlength=\"props.maxlength\"\n          :value=\"props.modelValue\"\n          :aria-invalid=\"isInvalid ? 'true' : undefined\"\n          :aria-describedby=\"describedBy\"\n          :aria-required=\"isRequired ? 'true' : undefined\"\n          :aria-readonly=\"isReadonly ? 'true' : undefined\"\n          :aria-label=\"ariaLabel\"\n          :aria-busy=\"props.loading ? 'true' : undefined\"\n          class=\"w-full bg-transparent text-[var(--gr-fg)] placeholder:text-[var(--gr-muted-fg)] focus:placeholder:text-transparent focus:outline-none disabled:cursor-not-allowed disabled:text-[var(--gr-muted-fg)]\"\n          :class=\"className\"\n          :style=\"inputStyle\"\n          @input=\"onInput\"\n          @change=\"onChange\"\n          @focus=\"onFocus\"\n          @blur=\"onBlur\"\n      >\n\n      <div\n          v-if=\"trailingCount > 0\"\n          data-gr-input-trailing\n          class=\"absolute inset-y-0 right-1 flex items-center gap-0.5\"\n      >\n        <span\n            v-if=\"signalState\"\n            data-gr-input-state\n            :class=\"stateIconClass\"\n            aria-hidden=\"true\"\n        >\n          <component :is=\"stateIcon\" class=\"h-4 w-4\" />\n        </span>\n\n        <span\n            v-if=\"loading\"\n            data-gr-input-spinner\n            class=\"flex h-6 w-6 items-center justify-center text-[var(--gr-muted-fg)]\"\n            aria-hidden=\"true\"\n        >\n          <IconLoader class=\"h-4 w-4 animate-spin\" />\n        </span>\n\n        <button\n            v-if=\"showClear\"\n            type=\"button\"\n            data-gr-input-clear\n            :aria-label=\"resolvedClearLabel\"\n            class=\"flex h-6 w-6 items-center justify-center rounded-[var(--gr-radius-sm)] text-[var(--gr-muted-fg)] transition-colors hover:bg-[var(--gr-muted)] hover:text-[var(--gr-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]\"\n            @click=\"clear\"\n        >\n          <IconX class=\"h-4 w-4\" aria-hidden=\"true\" />\n        </button>\n\n        <button\n            v-if=\"showPasswordToggle\"\n            type=\"button\"\n            data-gr-input-password-toggle\n            :aria-label=\"passwordVisible ? resolvedPasswordHideLabel : resolvedPasswordShowLabel\"\n            :aria-pressed=\"passwordVisible ? 'true' : 'false'\"\n            class=\"flex h-6 w-6 items-center justify-center rounded-[var(--gr-radius-sm)] text-[var(--gr-muted-fg)] transition-colors hover:bg-[var(--gr-muted)] hover:text-[var(--gr-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]\"\n            @click=\"togglePassword\"\n        >\n          <IconEyeOff v-if=\"passwordVisible\" class=\"h-4 w-4\" aria-hidden=\"true\" />\n          <IconEye v-else class=\"h-4 w-4\" aria-hidden=\"true\" />\n        </button>\n      </div>\n\n      <div\n          v-if=\"$slots.suffix\"\n          :id=\"suffixId\"\n          ref=\"suffixEl\"\n          data-testid=\"gr-input-suffix\"\n          class=\"absolute inset-y-0 right-0 flex items-center justify-center text-[var(--gr-muted-fg)] pointer-events-none select-none truncate\"\n          :class=\"[suffixAddonClass, suffixFixed ? '[direction:rtl]' : '']\"\n          :style=\"suffixStyle\"\n          :aria-hidden=\"describeAddons ? undefined : 'true'\"\n      >\n        <slot name=\"suffix\" />\n      </div>\n    </div>\n\n    <span v-if=\"signalState\" :id=\"stateTextId\" data-gr-input-state-text class=\"sr-only\">{{ stateText }}</span>\n\n    <div\n        v-if=\"showCount\"\n        :id=\"countId\"\n        data-gr-input-count\n        class=\"mt-1 text-right text-[length:var(--gr-control-text-xs)] leading-[var(--gr-leading-xs)] text-[var(--gr-muted-fg)] tabular-nums\"\n    >\n      {{ countText }}\n    </div>\n\n    <span\n        v-if=\"showCount\"\n        data-gr-input-live\n        class=\"sr-only\"\n        role=\"status\"\n        aria-live=\"polite\"\n    >{{ liveMessage }}</span>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/GrInput/index.js

@@ -1,3 +1,3 @@
-import { t as GrInput_default } from "./chunks/GrInput-DV4gMWPR.js";
+import { t as GrInput_default } from "./chunks/GrInput-CoaFLpaU.js";
 import { n as grInputSafelist, t as grInputConfig } from "../../chunks/config-CIUU9ZpY.js";
 export { GrInput_default as GrInput, GrInput_default as default, grInputConfig, grInputSafelist };