@feugene/granularity 0.19.0 → 0.21.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"GrInput-Bb_pxqpT.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 { 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 { grInputFieldClass, grInputShellClass, paddingX } from './grInputStyles'\n\nimport IconLoader from '~icons/lucide/loader-2'\nimport IconX from '~icons/lucide/x'\nimport IconEye from '~icons/lucide/eye'\nimport IconEyeOff from '~icons/lucide/eye-off'\n\nexport interface GrInputProps {\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     * Фоновая работа по полю (проверка занятости логина, автосохранение):\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\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      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      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    },\n)\n\nconst emit = defineEmits<GrInputEmits>()\ndefineSlots<{\n  /** Аддон слева от поля: иконка, код валюты, метка. */\n  prefix?: () => any\n  /** Аддон справа от поля: единица измерения, подсказка. */\n  suffix?: () => any\n}>()\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 describedBy = computed(() =>\n  [field?.describedById.value, props.showCount ? countId : undefined]\n    .filter(Boolean)\n    .join(' ') || undefined,\n)\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\nconst trailingCount = computed(() => (showClear.value ? 1 : 0) + (showPasswordToggle.value ? 1 : 0) + (props.loading ? 1 : 0))\nconst trailingReserve = computed(() => (trailingCount.value > 0 ? `${trailingCount.value * 28}px` : '0px'))\n\nconst {\n  prefixEl,\n  suffixEl,\n  prefixStyle,\n  suffixStyle,\n  fieldPadding: inputStyle,\n} = useControlAddons(() => props, {\n  defaultMinWidth: () => 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()\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  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          ref=\"prefixEl\"\n          data-testid=\"gr-input-prefix\"\n          class=\"absolute inset-y-0 left-0 flex items-center justify-center border-r border-[var(--gr-brd)] px-2 text-[var(--gr-muted-fg)] pointer-events-none select-none truncate\"\n          :style=\"prefixStyle\"\n          aria-hidden=\"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=\"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          ref=\"suffixEl\"\n          data-testid=\"gr-input-suffix\"\n          class=\"absolute inset-y-0 right-0 flex items-center justify-center border-l border-[var(--gr-brd)] px-2 text-[var(--gr-muted-fg)] pointer-events-none select-none truncate\"\n          :class=\"suffixFixed ? '[direction:rtl]' : ''\"\n          :style=\"suffixStyle\"\n          aria-hidden=\"true\"\n      >\n        <slot name=\"suffix\" />\n      </div>\n    </div>\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 { 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 { grInputFieldClass, grInputShellClass, paddingX } from './grInputStyles'\n\nimport IconLoader from '~icons/lucide/loader-2'\nimport IconX from '~icons/lucide/x'\nimport IconEye from '~icons/lucide/eye'\nimport IconEyeOff from '~icons/lucide/eye-off'\n\nexport interface GrInputProps {\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     * Фоновая работа по полю (проверка занятости логина, автосохранение):\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\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      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      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    },\n)\n\nconst emit = defineEmits<GrInputEmits>()\ndefineSlots<{\n  /** Аддон слева от поля: иконка, код валюты, метка. */\n  prefix?: () => any\n  /** Аддон справа от поля: единица измерения, подсказка. */\n  suffix?: () => any\n}>()\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 describedBy = computed(() =>\n  [field?.describedById.value, props.showCount ? countId : undefined]\n    .filter(Boolean)\n    .join(' ') || undefined,\n)\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\nconst trailingCount = computed(() => (showClear.value ? 1 : 0) + (showPasswordToggle.value ? 1 : 0) + (props.loading ? 1 : 0))\nconst trailingReserve = computed(() => (trailingCount.value > 0 ? `${trailingCount.value * 28}px` : '0px'))\n\nconst {\n  prefixEl,\n  suffixEl,\n  prefixStyle,\n  suffixStyle,\n  fieldPadding: inputStyle,\n} = useControlAddons(() => props, {\n  defaultMinWidth: () => 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()\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  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          ref=\"prefixEl\"\n          data-testid=\"gr-input-prefix\"\n          class=\"absolute inset-y-0 left-0 flex items-center justify-center border-r border-[var(--gr-brd)] px-2 text-[var(--gr-muted-fg)] pointer-events-none select-none truncate\"\n          :style=\"prefixStyle\"\n          aria-hidden=\"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=\"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          ref=\"suffixEl\"\n          data-testid=\"gr-input-suffix\"\n          class=\"absolute inset-y-0 right-0 flex items-center justify-center border-l border-[var(--gr-brd)] px-2 text-[var(--gr-muted-fg)] pointer-events-none select-none truncate\"\n          :class=\"suffixFixed ? '[direction:rtl]' : ''\"\n          :style=\"suffixStyle\"\n          aria-hidden=\"true\"\n      >\n        <slot name=\"suffix\" />\n      </div>\n    </div>\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-2wd7Crs0.js";
+import { t as GrInput_default } from "./chunks/GrInput-Bb_pxqpT.js";
 import { n as grInputSafelist, t as grInputConfig } from "../../chunks/config-DpeQchsV.js";
 export { GrInput_default as GrInput, GrInput_default as default, grInputConfig, grInputSafelist };

package/dist/components/GrInputTag/chunks/GrInputTag-C7QVPijj.js

@@ -0,0 +1,512 @@
+import { t as x_default } from "../../../chunks/x-2KXnqxiD.js";
+import { a as useGrComponentSize, i as useGrComponentProp } from "../../../chunks/context-CTbuwcYs.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { r as isComposingEvent } from "../../../chunks/keyboard-DE2yhz_b.js";
+import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-bQwtZtYT.js";
+import { n as useGrFormFieldContext } from "../../../chunks/context-DdNIxa1w.js";
+import { useGrFormControl } from "../../../composables/useGrFormControl.js";
+import { t as useFocusWithin } from "../../../chunks/useFocusWithin-BwHE0rzm.js";
+import { t as useControlAddons } from "../../../chunks/useControlAddons-asUr10Pf.js";
+import { t as GrBadge_default } from "../../GrBadge/chunks/GrBadge-u2ZdS7CN.js";
+import { useAnnouncer } from "../../../composables/useAnnouncer.js";
+import { t as loader_2_default } from "../../../chunks/loader-2-B1fdsdWW.js";
+import { useRovingFocus } from "../../../composables/useRovingFocus.js";
+import { a as grInputTagWrapperClass, i as grInputTagInputClass, o as removeButtonClass, r as clearButtonClass, s as spinnerClass } from "../../../chunks/config-BN4sXYXn.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, withCtx, withModifiers } from "vue";
+//#region src/components/GrInputTag/GrInputTag.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["name", "value"];
+var _hoisted_2 = {
+	key: 2,
+	role: "list",
+	class: "contents"
+};
+var _hoisted_3 = { class: "inline-flex items-center gap-1 align-middle" };
+var _hoisted_4 = { class: "truncate max-w-[18rem]" };
+var _hoisted_5 = [
+	"aria-label",
+	"tabindex",
+	"data-index",
+	"onFocus",
+	"onKeydown",
+	"onClick"
+];
+var _hoisted_6 = [
+	"id",
+	"value",
+	"disabled",
+	"readonly",
+	"placeholder",
+	"aria-label",
+	"aria-describedby",
+	"aria-required",
+	"aria-readonly",
+	"aria-invalid",
+	"aria-busy"
+];
+var _hoisted_7 = ["aria-label"];
+//#endregion
+//#region src/components/GrInputTag/GrInputTag.vue
+var GrInputTag_default = /* @__PURE__ */ defineComponent({
+	__name: "GrInputTag",
+	props: {
+		modelValue: {},
+		placeholder: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		state: { default: "default" },
+		size: { default: void 0 },
+		separators: { default: () => [","] },
+		allowDuplicates: {
+			type: Boolean,
+			default: false
+		},
+		trim: {
+			type: Boolean,
+			default: true
+		},
+		max: { default: void 0 },
+		addOnBlur: {
+			type: Boolean,
+			default: false
+		},
+		clearInputOnAdd: {
+			type: Boolean,
+			default: true
+		},
+		beforeAdd: {
+			type: Function,
+			default: void 0
+		},
+		clearable: {
+			type: Boolean,
+			default: void 0
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		tagTone: { default: "neutral" },
+		tagDark: {
+			type: Boolean,
+			default: false
+		},
+		tagSize: { default: "md" },
+		tagRadius: { default: "round" },
+		tagClosable: {
+			type: Boolean,
+			default: true
+		},
+		removeTagLabel: { default: void 0 },
+		clearAllLabel: { default: void 0 },
+		ariaLabel: { default: void 0 },
+		name: { default: void 0 },
+		prefixMinWidth: {},
+		prefixMaxWidth: {},
+		suffixMinWidth: {},
+		suffixMaxWidth: {},
+		prefixFixed: { type: Boolean },
+		suffixFixed: { type: Boolean }
+	},
+	emits: [
+		"update:modelValue",
+		"add",
+		"remove",
+		"reject",
+		"clear",
+		"change",
+		"focus",
+		"blur"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const REGEX_SPECIAL_CHAR_RE = /[.*+?^${}()|[\]\\]/g;
+		/**
+		* Props for {@link GrInputTag}.
+		* Tag-input primitive: renders a set of badges with an inline `<input>` for entering new tags.
+		* Splits input by configurable `separators`, supports paste, Enter and Backspace editing.
+		*/
+		const props = __props;
+		const emit = __emit;
+		const field = useGrFormFieldContext();
+		const resolvedId = computed(() => field?.id.value);
+		const describedBy = computed(() => field?.describedById.value);
+		const { disabled: isDisabled, invalid: isInvalid, required: isRequired, readonly: isReadonly } = useGrFormControl(() => props);
+		/** Ширина аддона по умолчанию — та же лестница, что у `GrInput`. */
+		const ADDON_MIN_WIDTH_BY_SIZE = {
+			xs: "2rem",
+			sm: "2.25rem",
+			md: "2.5rem",
+			lg: "3rem"
+		};
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrInputTag" });
+		/**
+		* Аддоны — флекс-соседи поля: оболочка тегового поля и так флекс-строка с
+		* бейджами, поэтому места паддингом резервировать не нужно.
+		*/
+		const { hasPrefix, hasSuffix, prefixEl, suffixEl, prefixStyle, suffixStyle } = useControlAddons(() => props, {
+			defaultMinWidth: () => ADDON_MIN_WIDTH_BY_SIZE[resolvedSize.value],
+			paddingX: () => "0px"
+		});
+		const resolvedClearable = useGrComponentProp("GrInputTag", "clearable", () => props.clearable, false);
+		const { t } = useGranularityTranslations();
+		const resolvedClearAllLabel = computed(() => props.clearAllLabel ?? t("gr.inputTag.clearAll", "Clear all tags"));
+		function removeTagLabelFor(tag) {
+			return props.removeTagLabel ?? t("gr.inputTag.removeTagNamed", "Remove tag {tag}", { tag });
+		}
+		const inputValue = ref("");
+		const inputEl = ref(null);
+		const rootEl = ref(null);
+		const { onFocusIn, onFocusOut } = useFocusWithin(rootEl, {
+			enter: (event) => emit("focus", event),
+			leave: (event) => emit("blur", event)
+		});
+		const removeEls = ref([]);
+		function setRemoveEl(index) {
+			return (el) => {
+				removeEls.value[index] = el;
+			};
+		}
+		function focus() {
+			inputEl.value?.focus();
+		}
+		function blur() {
+			inputEl.value?.blur();
+		}
+		const isMaxed = computed(() => props.max !== void 0 && props.modelValue.length >= props.max);
+		const canEdit = computed(() => !isDisabled.value && !isReadonly.value);
+		const showRemove = computed(() => props.tagClosable && canEdit.value);
+		const { announce } = useAnnouncer();
+		/**
+		* Roving tabindex по крестикам: двадцать тегов давали двадцать одну остановку
+		* `Tab`. В таб-порядке ровно один крестик, между ними ходят стрелками.
+		*
+		* Адресация индексом, а не значением тега: теги допускают повторы, и по
+		* значению два одинаковых чипа было бы не различить.
+		*/
+		const tagIndexes = computed(() => props.modelValue.map((_, index) => index));
+		const roving = useRovingFocus({
+			items: () => tagIndexes.value,
+			elementFor: (index) => removeEls.value[index],
+			orientation: () => "horizontal",
+			wrap: () => false,
+			onOverflow: (edge) => {
+				if (edge === "end") focus();
+				return true;
+			},
+			beforeFocus: () => nextTick()
+		});
+		async function focusTag(index) {
+			const last = props.modelValue.length - 1;
+			if (last < 0) {
+				focus();
+				return;
+			}
+			await roving.focusKey(Math.min(Math.max(index, 0), last));
+		}
+		function escapeRegexChar(ch) {
+			return ch.replace(REGEX_SPECIAL_CHAR_RE, "\\$&");
+		}
+		const splitRegex = computed(() => {
+			const seps = (props.separators ?? []).filter(Boolean).map((s) => s[0]);
+			const body = [.../* @__PURE__ */ new Set([
+				...seps,
+				"\n",
+				"\r",
+				"	"
+			])].map(escapeRegexChar).join("");
+			return new RegExp(`[${body}]+`, "g");
+		});
+		function normalizeTag(raw) {
+			return props.trim ? raw.trim() : raw;
+		}
+		function splitToTags(raw) {
+			return raw.split(splitRegex.value).map((v) => normalizeTag(v)).filter(Boolean);
+		}
+		function addMany(rawTags) {
+			if (!canEdit.value || isMaxed.value) return false;
+			const next = props.modelValue.slice();
+			const added = [];
+			for (const raw of rawTags) {
+				const tag = normalizeTag(raw);
+				if (!tag) continue;
+				if (!props.allowDuplicates && next.includes(tag)) continue;
+				if (props.max !== void 0 && next.length >= props.max) break;
+				next.push(tag);
+				added.push(tag);
+				emit("add", tag);
+			}
+			if (!added.length) return false;
+			emit("update:modelValue", next);
+			emit("change", next);
+			announce(added.length === 1 ? t("gr.inputTag.added", "Tag added: {tag}", { tag: added[0] }) : t("gr.inputTag.addedMany", "{count} tags added", { count: added.length }));
+			return true;
+		}
+		let validationRun = 0;
+		const validating = ref(false);
+		const isBusy = computed(() => props.loading || validating.value);
+		async function filterAllowed(tags, run) {
+			const check = props.beforeAdd;
+			if (!check) return tags;
+			const allowed = [];
+			for (const tag of tags) {
+				const ok = await check(tag);
+				if (run !== validationRun) return null;
+				if (ok) allowed.push(tag);
+				else emit("reject", tag);
+			}
+			return allowed;
+		}
+		async function commitInput() {
+			if (!canEdit.value || !inputValue.value) return;
+			if (isMaxed.value) {
+				announce(t("gr.inputTag.limitReached", "Tag limit reached"));
+				return;
+			}
+			const raw = inputValue.value;
+			const tags = splitToTags(raw);
+			if (!tags.length) return;
+			const run = ++validationRun;
+			validating.value = Boolean(props.beforeAdd);
+			const allowed = await filterAllowed(tags, run);
+			if (run === validationRun) validating.value = false;
+			if (allowed === null || !allowed.length) return;
+			if (addMany(allowed) && props.clearInputOnAdd && inputValue.value === raw) inputValue.value = "";
+		}
+		function removeAt(index) {
+			if (!canEdit.value) return;
+			const next = props.modelValue.slice();
+			const removed = next[index];
+			if (removed === void 0) return;
+			next.splice(index, 1);
+			emit("update:modelValue", next);
+			emit("change", next);
+			emit("remove", removed, index);
+			announce(t("gr.inputTag.removed", "Tag removed: {tag}", { tag: removed }));
+		}
+		/** Удаление с клавиатуры: фокус переезжает на соседний чип, а не пропадает. */
+		async function removeAtFromKeyboard(index) {
+			removeAt(index);
+			await nextTick();
+			if (props.modelValue.length === 0) {
+				focus();
+				return;
+			}
+			await focusTag(Math.min(index, props.modelValue.length - 1));
+		}
+		function clearAll() {
+			if (!canEdit.value || props.modelValue.length === 0) return;
+			emit("update:modelValue", []);
+			emit("change", []);
+			emit("clear");
+			announce(t("gr.inputTag.cleared", "All tags removed"));
+			focus();
+		}
+		function onInput(e) {
+			inputValue.value = e.target.value;
+		}
+		function onKeydown(e) {
+			if (isComposingEvent(e)) return;
+			if (!canEdit.value) return;
+			if (e.key === "Enter") {
+				e.preventDefault();
+				commitInput();
+				return;
+			}
+			if ((props.separators ?? []).includes(e.key)) {
+				e.preventDefault();
+				commitInput();
+				return;
+			}
+			if (inputValue.value.length === 0 && props.modelValue.length > 0) {
+				if (e.key === "Backspace") {
+					e.preventDefault();
+					removeAt(props.modelValue.length - 1);
+					return;
+				}
+				if (e.key === "ArrowLeft") {
+					e.preventDefault();
+					focusTag(props.modelValue.length - 1);
+				}
+			}
+		}
+		function onTagKeydown(e, index) {
+			if (roving.handleNavigationKeys(e)) return;
+			if (e.key === "Delete" || e.key === "Backspace") {
+				e.preventDefault();
+				removeAtFromKeyboard(index);
+			}
+		}
+		function onBlur() {
+			if (props.addOnBlur) commitInput();
+		}
+		function onPaste(e) {
+			if (!canEdit.value || isMaxed.value) return;
+			const pasted = e.clipboardData?.getData("text");
+			if (!pasted) return;
+			const tags = splitToTags(pasted);
+			if (tags.length <= 1) return;
+			e.preventDefault();
+			const run = ++validationRun;
+			validating.value = Boolean(props.beforeAdd);
+			filterAllowed(tags, run).then((allowed) => {
+				if (run === validationRun) validating.value = false;
+				if (allowed?.length) addMany(allowed);
+			});
+		}
+		const wrapperClassName = computed(() => {
+			return grInputTagWrapperClass({
+				size: resolvedSize.value,
+				state: props.state,
+				invalid: isInvalid.value,
+				disabled: isDisabled.value
+			});
+		});
+		const inputClassName = computed(() => grInputTagInputClass(resolvedSize.value));
+		const showClearAll = computed(() => resolvedClearable.value && canEdit.value && props.modelValue.length > 0);
+		const placeholderText = computed(() => props.modelValue.length > 0 ? void 0 : props.placeholder);
+		__expose({
+			focus,
+			blur,
+			clear: clearAll
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "rootEl",
+				ref: rootEl,
+				"data-gr-input-tag": "",
+				"data-testid": "gr-input-tag",
+				class: normalizeClass(wrapperClassName.value),
+				onClick: focus,
+				onFocusin: _cache[2] || (_cache[2] = (...args) => unref(onFocusIn) && unref(onFocusIn)(...args)),
+				onFocusout: _cache[3] || (_cache[3] = (...args) => unref(onFocusOut) && unref(onFocusOut)(...args))
+			}, [
+				unref(hasPrefix) ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					ref_key: "prefixEl",
+					ref: prefixEl,
+					"data-gr-input-tag-prefix": "",
+					class: "inline-flex shrink-0 items-center justify-center text-[var(--gr-muted-fg)]",
+					style: normalizeStyle(unref(prefixStyle))
+				}, [renderSlot(_ctx.$slots, "prefix")], 4)) : createCommentVNode("", true),
+				__props.name ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(__props.modelValue, (tag, tagIndex) => {
+					return openBlock(), createElementBlock("input", {
+						key: `hidden-${tagIndex}`,
+						type: "hidden",
+						name: __props.name,
+						value: tag
+					}, null, 8, _hoisted_1);
+				}), 128)) : createCommentVNode("", true),
+				__props.modelValue.length ? (openBlock(), createElementBlock("span", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.modelValue, (tag, i) => {
+					return openBlock(), createBlock(GrBadge_default, {
+						key: `${tag}-${i}`,
+						role: "listitem",
+						tone: __props.tagTone,
+						dark: __props.tagDark,
+						size: __props.tagSize,
+						radius: __props.tagRadius,
+						"data-gr-input-tag-item": "",
+						"data-testid": "gr-input-tag-item",
+						"data-index": i
+					}, {
+						default: withCtx(() => [createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "tag", {
+							tag,
+							index: i,
+							remove: () => removeAt(i)
+						}, () => [createElementVNode("span", _hoisted_4, toDisplayString(tag), 1)]), showRemove.value ? (openBlock(), createElementBlock("button", {
+							key: 0,
+							ref_for: true,
+							ref: setRemoveEl(i),
+							type: "button",
+							class: normalizeClass(unref(removeButtonClass)),
+							"aria-label": removeTagLabelFor(tag),
+							tabindex: unref(roving).tabindexFor(i),
+							"data-gr-input-tag-remove": "",
+							"data-testid": "gr-input-tag-remove",
+							"data-index": i,
+							onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent", "stop"])),
+							onFocus: ($event) => unref(roving).setActive(i),
+							onKeydown: ($event) => onTagKeydown($event, i),
+							onClick: withModifiers(($event) => removeAt(i), ["stop"])
+						}, [createVNode(GrIcon_default, { size: "sm" }, {
+							default: withCtx(() => [createVNode(unref(x_default))]),
+							_: 1
+						})], 42, _hoisted_5)) : createCommentVNode("", true)])]),
+						_: 2
+					}, 1032, [
+						"tone",
+						"dark",
+						"size",
+						"radius",
+						"data-index"
+					]);
+				}), 128))])) : createCommentVNode("", true),
+				createElementVNode("input", {
+					id: resolvedId.value,
+					ref_key: "inputEl",
+					ref: inputEl,
+					"data-gr-input-tag-input": "",
+					"data-testid": "gr-input-tag-input",
+					value: inputValue.value,
+					disabled: unref(isDisabled),
+					readonly: unref(isReadonly),
+					placeholder: placeholderText.value,
+					"aria-label": __props.ariaLabel,
+					"aria-describedby": describedBy.value,
+					"aria-required": unref(isRequired) ? "true" : void 0,
+					"aria-readonly": unref(isReadonly) ? "true" : void 0,
+					"aria-invalid": unref(isInvalid) ? "true" : void 0,
+					"aria-busy": isBusy.value ? "true" : void 0,
+					class: normalizeClass(["flex-1 min-w-[120px] bg-transparent border-none outline-none placeholder:text-[var(--gr-muted-fg)]", inputClassName.value]),
+					onInput,
+					onKeydown,
+					onBlur,
+					onPaste
+				}, null, 42, _hoisted_6),
+				unref(hasSuffix) ? (openBlock(), createElementBlock("span", {
+					key: 3,
+					ref_key: "suffixEl",
+					ref: suffixEl,
+					"data-gr-input-tag-suffix": "",
+					class: "inline-flex shrink-0 items-center justify-center text-[var(--gr-muted-fg)]",
+					style: normalizeStyle(unref(suffixStyle))
+				}, [renderSlot(_ctx.$slots, "suffix")], 4)) : createCommentVNode("", true),
+				isBusy.value ? (openBlock(), createElementBlock("span", {
+					key: 4,
+					"data-gr-input-tag-spinner": "",
+					class: normalizeClass(unref(spinnerClass)),
+					"aria-hidden": "true"
+				}, [createVNode(GrIcon_default, { size: "sm" }, {
+					default: withCtx(() => [createVNode(unref(loader_2_default), { class: "animate-spin" })]),
+					_: 1
+				})], 2)) : createCommentVNode("", true),
+				showClearAll.value ? (openBlock(), createElementBlock("button", {
+					key: 5,
+					type: "button",
+					"data-gr-input-tag-clear": "",
+					class: normalizeClass(unref(clearButtonClass)),
+					"aria-label": resolvedClearAllLabel.value,
+					onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent", "stop"])),
+					onClick: withModifiers(clearAll, ["stop"])
+				}, [createVNode(GrIcon_default, { size: "sm" }, {
+					default: withCtx(() => [createVNode(unref(x_default))]),
+					_: 1
+				})], 42, _hoisted_7)) : createCommentVNode("", true)
+			], 34);
+		};
+	}
+});
+//#endregion
+export { GrInputTag_default as t };