@feugene/granularity 0.11.0 → 0.13.0

package/dist/components/GrAlert/chunks/GrAlert-B9gmpoPC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrAlert-B9gmpoPC.js","names":[],"sources":["../../../../src/components/GrAlert/grAlertStyles.ts","../../../../src/components/GrAlert/GrAlert.vue","../../../../src/components/GrAlert/GrAlert.vue"],"sourcesContent":["import type { GrTone } from '../shared/tones'\n\n/**\n * Цветовая модель `GrAlert`.\n *\n * Модуль намеренно чистый: он оперирует **строками CSS-значений**, а не\n * utility-классами UnoCSS. Классы, живущие только строковыми литералами в\n * `.ts`, не сканируются `granularContent` и требуют ручного safelist — здесь\n * этой проблемы нет по построению, а логику цветов можно тестировать без\n * монтирования компонента.\n */\n\n/**\n * `soft` — залитая тоном подложка, тональный текст. Основной вариант.\n * `outline` — фон страницы, тон несут рамка и иконка; текст нейтральный.\n *\n * `light` (устаревший) нормализуется в `soft`: раньше он существовал ровно для\n * одного тона (`warning`) и был набран hex-литералами, то есть не реагировал на\n * смену темы. См. {@link normalizeGrAlertVariant}.\n */\nexport const GR_ALERT_VARIANTS = ['soft', 'outline'] as const\n\nexport type GrAlertVariant = typeof GR_ALERT_VARIANTS[number]\n\n/** То, что компонент принимает в проп `variant`, включая устаревший алиас. */\nexport type GrAlertVariantInput = GrAlertVariant | 'light'\n\n/** Ключ иконки тона. Сама иконка резолвится в SFC — модуль остаётся чистым. */\nexport type GrAlertIconKey = 'info' | 'success' | 'warning' | 'danger'\n\ntype GrAlertToneTokens = {\n  /** Подложка варианта `soft`. */\n  surface: string\n  /** Насыщенный цвет тона: база для рамки. */\n  accent: string\n  /**\n   * Тональный цвет текста — рассчитан на подложку `surface`.\n   *\n   * Именно он, а не `accent`, красит иконку и текст: на светлой теме\n   * `--gr-success` (#10b981) на `--gr-success-light` (#d1fae5) даёт 2.24:1 —\n   * ниже порога 3:1 даже для нетекстовой графики. `--gr-success-text`\n   * (#065f46) на той же подложке даёт 6.78:1.\n   */\n  text: string\n  icon: GrAlertIconKey\n}\n\n/**\n * Тон → тройка токенов.\n *\n * `primary` и `neutral` не имеют пары `-light`/`-text` и отображаются на\n * ближайшие семантические роли: акцентную поверхность и нейтральную muted.\n */\nconst TONE_TOKENS: Record<GrTone, GrAlertToneTokens> = {\n  primary: { surface: 'var(--gr-accent)', accent: 'var(--gr-primary)', text: 'var(--gr-accent-fg)', icon: 'info' },\n  neutral: { surface: 'var(--gr-muted)', accent: 'var(--gr-muted-fg)', text: 'var(--gr-fg)', icon: 'info' },\n  success: { surface: 'var(--gr-success-light)', accent: 'var(--gr-success)', text: 'var(--gr-success-text)', icon: 'success' },\n  warning: { surface: 'var(--gr-warning-light)', accent: 'var(--gr-warning)', text: 'var(--gr-warning-text)', icon: 'warning' },\n  danger: { surface: 'var(--gr-danger-light)', accent: 'var(--gr-danger)', text: 'var(--gr-danger-text)', icon: 'danger' },\n  info: { surface: 'var(--gr-info-light)', accent: 'var(--gr-info)', text: 'var(--gr-info-text)', icon: 'info' },\n  slate: { surface: 'var(--gr-slate-light)', accent: 'var(--gr-slate)', text: 'var(--gr-slate-text)', icon: 'info' },\n  azure: { surface: 'var(--gr-azure-light)', accent: 'var(--gr-azure)', text: 'var(--gr-azure-text)', icon: 'info' },\n}\n\n/** Разрешённые цвета одного алерта — ровно то, что уходит в CSS-переменные. */\nexport type GrAlertColors = {\n  bg: string\n  border: string\n  icon: string\n  title: string\n  text: string\n  close: string\n  closeHover: string\n  closeHoverBg: string\n}\n\n/** Пользовательские переопределения цвета (пропы-эскейпы). */\nexport type GrAlertColorOverrides = {\n  backgroundColor?: string\n  textColor?: string\n  borderColor?: string\n}\n\nexport function normalizeGrAlertVariant(variant: GrAlertVariantInput): GrAlertVariant {\n  return variant === 'light' ? 'soft' : variant\n}\n\nexport function grAlertIconKey(tone: GrTone): GrAlertIconKey {\n  return TONE_TOKENS[tone].icon\n}\n\n/**\n * Рамка выводится из тона формулой, а не задаётся отдельным токеном на каждый\n * тон: доля тона в смеси с `--gr-brd` — единственное, что отличает рамки между\n * собой. 22% (как было) давало 1.27–1.51:1 к собственной подложке — край\n * практически не читался; 35/45% поднимают его до 1.42–2.07:1.\n */\nfunction border(accent: string, ratio: number): string {\n  return `color-mix(in srgb, ${accent} ${ratio}%, var(--gr-brd))`\n}\n\nexport function resolveGrAlertColors(tone: GrTone, variant: GrAlertVariant): GrAlertColors {\n  const t = TONE_TOKENS[tone]\n\n  if (variant === 'outline') {\n    return {\n      bg: 'var(--gr-bg)',\n      border: border(t.accent, 45),\n      icon: t.text,\n      title: 'var(--gr-fg)',\n      text: 'var(--gr-muted-fg)',\n      close: 'var(--gr-muted-fg)',\n      closeHover: 'var(--gr-fg)',\n      closeHoverBg: 'var(--gr-muted)',\n    }\n  }\n\n  return {\n    bg: t.surface,\n    border: border(t.accent, 35),\n    // Иерархия «заголовок / текст» держится на размере и насыщении шрифта, а не\n    // на цвете: приглушать тональный текст подмешиванием подложки нельзя —\n    // на тёмной теме warning и danger проваливают 4.5:1 уже при 15% подмеса.\n    icon: t.text,\n    title: t.text,\n    text: t.text,\n    close: t.text,\n    closeHover: t.text,\n    closeHoverBg: `color-mix(in srgb, ${t.accent} 16%, transparent)`,\n  }\n}\n\n/**\n * Пропы-эскейпы поверх тона. `textColor` красит весь текстовый слой целиком\n * (иконка, заголовок, текст, кнопка закрытия) — иначе пользовательский цвет\n * соседствовал бы с тональным и давал грязь.\n */\nexport function applyGrAlertOverrides(colors: GrAlertColors, overrides: GrAlertColorOverrides): GrAlertColors {\n  const custom = (value?: string) => value?.trim() || undefined\n  const text = custom(overrides.textColor)\n\n  return {\n    ...colors,\n    bg: custom(overrides.backgroundColor) ?? colors.bg,\n    border: custom(overrides.borderColor) ?? colors.border,\n    icon: text ?? colors.icon,\n    title: text ?? colors.title,\n    text: text ?? colors.text,\n    close: text ?? colors.close,\n    closeHover: text ?? colors.closeHover,\n    closeHoverBg: text ? `color-mix(in srgb, ${text} 12%, transparent)` : colors.closeHoverBg,\n  }\n}\n\n/**\n * Публичный контракт кастомизации: переменные `--gr-alert-*` можно\n * переопределить снаружи так же, как их задаёт компонент.\n */\nexport function grAlertCssVars(colors: GrAlertColors): Record<string, string> {\n  return {\n    '--gr-alert-bg': colors.bg,\n    '--gr-alert-brd': colors.border,\n    '--gr-alert-icon-color': colors.icon,\n    '--gr-alert-title-color': colors.title,\n    '--gr-alert-text-color': colors.text,\n    '--gr-alert-close-color': colors.close,\n    '--gr-alert-close-hover-color': colors.closeHover,\n    '--gr-alert-close-hover-bg': colors.closeHoverBg,\n  }\n}\n","<script setup lang=\"ts\">\n/**\n * GrAlert — блочное сообщение с тоном, иконкой и опциональным закрытием.\n *\n * Цветовая модель вынесена в `grAlertStyles.ts` и выражена **только токенами**\n * `--gr-*`: компонент одинаково корректен в light и dark без единого hex-литерала.\n *\n * Точки кастомизации — переменные `--gr-alert-*` (см. `grAlertCssVars`); пропы\n * `backgroundColor`/`textColor`/`borderColor` — тот же контракт, но точечно.\n */\nimport { computed } from 'vue'\n\nimport IconWarning from '~icons/lucide/alert-triangle'\nimport IconCheck from '~icons/lucide/check-circle'\nimport IconInfo from '~icons/lucide/info'\nimport IconClose from '~icons/lucide/x'\nimport IconError from '~icons/lucide/x-circle'\n\nimport type { Component } from 'vue'\nimport type { GrTone } from '../shared/tones'\nimport type { GrAlertIconKey, GrAlertVariantInput } from './grAlertStyles'\n\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport {\n  applyGrAlertOverrides,\n  grAlertCssVars,\n  grAlertIconKey,\n  normalizeGrAlertVariant,\n  resolveGrAlertColors,\n} from './grAlertStyles'\n\nimport './defaults'\n\nexport type GrAlertTone = GrTone\nexport type { GrAlertVariant, GrAlertVariantInput } from './grAlertStyles'\n\n/**\n * Режим объявления сообщения скринридеру.\n * `auto` — по тону: `warning`/`danger` перебивают речь (`role=\"alert\"`),\n * остальные ждут паузы (`role=\"status\"`).\n */\nexport type GrAlertLive = 'auto' | 'assertive' | 'polite' | 'off'\n\nexport interface GrAlertProps {\n  tone?: GrAlertTone\n  variant?: GrAlertVariantInput\n  title?: string\n  closable?: boolean\n  live?: GrAlertLive\n  backgroundColor?: string\n  textColor?: string\n  borderColor?: string\n}\n\nconst emit = defineEmits<{\n  (event: 'close'): void\n}>()\n\n// Дефолты tone/variant/closable намеренно `undefined`: «настоящий» дефолт\n// переехал в `useGrComponentProp`, иначе `GrConfigProvider` не смог бы отличить\n// заданный пользователем проп от подставленного Vue.\nconst props = withDefaults(defineProps<GrAlertProps>(), {\n  tone: undefined,\n  variant: undefined,\n  title: undefined,\n  closable: undefined,\n  live: 'auto',\n  backgroundColor: undefined,\n  textColor: undefined,\n  borderColor: undefined,\n})\n\nconst { t } = useGranularityTranslations()\n\nconst tone = useGrComponentProp('GrAlert', 'tone', () => props.tone, 'info')\nconst variantInput = useGrComponentProp('GrAlert', 'variant', () => props.variant, 'soft')\nconst closable = useGrComponentProp('GrAlert', 'closable', () => props.closable, false)\n\nconst variant = computed(() => normalizeGrAlertVariant(variantInput.value))\n\nconst ICONS: Record<GrAlertIconKey, Component> = {\n  info: IconInfo,\n  success: IconCheck,\n  warning: IconWarning,\n  danger: IconError,\n}\n\nconst icon = computed<Component>(() => ICONS[grAlertIconKey(tone.value)])\n\nconst colors = computed(() => applyGrAlertOverrides(\n  resolveGrAlertColors(tone.value, variant.value),\n  props,\n))\n\nconst rootStyle = computed(() => ({\n  ...grAlertCssVars(colors.value),\n  background: 'var(--gr-alert-bg)',\n  borderColor: 'var(--gr-alert-brd)',\n}))\n\n/**\n * `role=\"alert\"` — assertive-регион: он прерывает чтение. Вешать его на любое\n * информационное сообщение значит превращать спокойную подсказку в тревогу,\n * поэтому по умолчанию его получают только `warning` и `danger`.\n */\nconst role = computed(() => {\n  const mode = props.live === 'auto'\n    ? (tone.value === 'danger' || tone.value === 'warning' ? 'assertive' : 'polite')\n    : props.live\n\n  if (mode === 'off') return undefined\n  return mode === 'assertive' ? 'alert' : 'status'\n})\n</script>\n\n<template>\n  <div\n    :role=\"role\"\n    data-gr-alert\n    class=\"rounded-[var(--gr-radius-lg)] border px-4 py-3\"\n    :style=\"rootStyle\"\n  >\n    <div class=\"flex items-start gap-3\">\n      <component\n        :is=\"icon\"\n        class=\"mt-0.5 h-5 w-5 shrink-0 text-[var(--gr-alert-icon-color)]\"\n        aria-hidden=\"true\"\n      />\n\n      <div class=\"min-w-0 flex-1\">\n        <div\n          v-if=\"props.title\"\n          class=\"text-[length:var(--gr-text-sm)] font-600 text-[var(--gr-alert-title-color)]\"\n        >\n          {{ props.title }}\n        </div>\n        <div\n          class=\"text-[length:var(--gr-text-sm)] leading-relaxed text-[var(--gr-alert-text-color)]\"\n          :class=\"props.title ? 'mt-1' : ''\"\n        >\n          <slot />\n        </div>\n      </div>\n\n      <button\n        v-if=\"closable\"\n        type=\"button\"\n        class=\"-mr-1.5 -mt-1.5 shrink-0 rounded-[var(--gr-radius-md)] p-1.5 text-[var(--gr-alert-close-color)] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] hover:bg-[var(--gr-alert-close-hover-bg)] hover:text-[var(--gr-alert-close-hover-color)]\"\n        :aria-label=\"t('gr.common.close', 'Close')\"\n        @click=\"emit('close')\"\n      >\n        <IconClose class=\"h-4 w-4\" aria-hidden=\"true\" />\n      </button>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrAlert — блочное сообщение с тоном, иконкой и опциональным закрытием.\n *\n * Цветовая модель вынесена в `grAlertStyles.ts` и выражена **только токенами**\n * `--gr-*`: компонент одинаково корректен в light и dark без единого hex-литерала.\n *\n * Точки кастомизации — переменные `--gr-alert-*` (см. `grAlertCssVars`); пропы\n * `backgroundColor`/`textColor`/`borderColor` — тот же контракт, но точечно.\n */\nimport { computed } from 'vue'\n\nimport IconWarning from '~icons/lucide/alert-triangle'\nimport IconCheck from '~icons/lucide/check-circle'\nimport IconInfo from '~icons/lucide/info'\nimport IconClose from '~icons/lucide/x'\nimport IconError from '~icons/lucide/x-circle'\n\nimport type { Component } from 'vue'\nimport type { GrTone } from '../shared/tones'\nimport type { GrAlertIconKey, GrAlertVariantInput } from './grAlertStyles'\n\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport {\n  applyGrAlertOverrides,\n  grAlertCssVars,\n  grAlertIconKey,\n  normalizeGrAlertVariant,\n  resolveGrAlertColors,\n} from './grAlertStyles'\n\nimport './defaults'\n\nexport type GrAlertTone = GrTone\nexport type { GrAlertVariant, GrAlertVariantInput } from './grAlertStyles'\n\n/**\n * Режим объявления сообщения скринридеру.\n * `auto` — по тону: `warning`/`danger` перебивают речь (`role=\"alert\"`),\n * остальные ждут паузы (`role=\"status\"`).\n */\nexport type GrAlertLive = 'auto' | 'assertive' | 'polite' | 'off'\n\nexport interface GrAlertProps {\n  tone?: GrAlertTone\n  variant?: GrAlertVariantInput\n  title?: string\n  closable?: boolean\n  live?: GrAlertLive\n  backgroundColor?: string\n  textColor?: string\n  borderColor?: string\n}\n\nconst emit = defineEmits<{\n  (event: 'close'): void\n}>()\n\n// Дефолты tone/variant/closable намеренно `undefined`: «настоящий» дефолт\n// переехал в `useGrComponentProp`, иначе `GrConfigProvider` не смог бы отличить\n// заданный пользователем проп от подставленного Vue.\nconst props = withDefaults(defineProps<GrAlertProps>(), {\n  tone: undefined,\n  variant: undefined,\n  title: undefined,\n  closable: undefined,\n  live: 'auto',\n  backgroundColor: undefined,\n  textColor: undefined,\n  borderColor: undefined,\n})\n\nconst { t } = useGranularityTranslations()\n\nconst tone = useGrComponentProp('GrAlert', 'tone', () => props.tone, 'info')\nconst variantInput = useGrComponentProp('GrAlert', 'variant', () => props.variant, 'soft')\nconst closable = useGrComponentProp('GrAlert', 'closable', () => props.closable, false)\n\nconst variant = computed(() => normalizeGrAlertVariant(variantInput.value))\n\nconst ICONS: Record<GrAlertIconKey, Component> = {\n  info: IconInfo,\n  success: IconCheck,\n  warning: IconWarning,\n  danger: IconError,\n}\n\nconst icon = computed<Component>(() => ICONS[grAlertIconKey(tone.value)])\n\nconst colors = computed(() => applyGrAlertOverrides(\n  resolveGrAlertColors(tone.value, variant.value),\n  props,\n))\n\nconst rootStyle = computed(() => ({\n  ...grAlertCssVars(colors.value),\n  background: 'var(--gr-alert-bg)',\n  borderColor: 'var(--gr-alert-brd)',\n}))\n\n/**\n * `role=\"alert\"` — assertive-регион: он прерывает чтение. Вешать его на любое\n * информационное сообщение значит превращать спокойную подсказку в тревогу,\n * поэтому по умолчанию его получают только `warning` и `danger`.\n */\nconst role = computed(() => {\n  const mode = props.live === 'auto'\n    ? (tone.value === 'danger' || tone.value === 'warning' ? 'assertive' : 'polite')\n    : props.live\n\n  if (mode === 'off') return undefined\n  return mode === 'assertive' ? 'alert' : 'status'\n})\n</script>\n\n<template>\n  <div\n    :role=\"role\"\n    data-gr-alert\n    class=\"rounded-[var(--gr-radius-lg)] border px-4 py-3\"\n    :style=\"rootStyle\"\n  >\n    <div class=\"flex items-start gap-3\">\n      <component\n        :is=\"icon\"\n        class=\"mt-0.5 h-5 w-5 shrink-0 text-[var(--gr-alert-icon-color)]\"\n        aria-hidden=\"true\"\n      />\n\n      <div class=\"min-w-0 flex-1\">\n        <div\n          v-if=\"props.title\"\n          class=\"text-[length:var(--gr-text-sm)] font-600 text-[var(--gr-alert-title-color)]\"\n        >\n          {{ props.title }}\n        </div>\n        <div\n          class=\"text-[length:var(--gr-text-sm)] leading-relaxed text-[var(--gr-alert-text-color)]\"\n          :class=\"props.title ? 'mt-1' : ''\"\n        >\n          <slot />\n        </div>\n      </div>\n\n      <button\n        v-if=\"closable\"\n        type=\"button\"\n        class=\"-mr-1.5 -mt-1.5 shrink-0 rounded-[var(--gr-radius-md)] p-1.5 text-[var(--gr-alert-close-color)] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] hover:bg-[var(--gr-alert-close-hover-bg)] hover:text-[var(--gr-alert-close-hover-color)]\"\n        :aria-label=\"t('gr.common.close', 'Close')\"\n        @click=\"emit('close')\"\n      >\n        <IconClose class=\"h-4 w-4\" aria-hidden=\"true\" />\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/GrAlert/index.js

@@ -1,3 +1,3 @@
-import { t as GrAlert_default } from "./chunks/GrAlert-DPJSU_fG.js";
+import { a as grAlertIconKey, i as grAlertCssVars, n as GR_ALERT_VARIANTS, o as normalizeGrAlertVariant, r as applyGrAlertOverrides, s as resolveGrAlertColors, t as GrAlert_default } from "./chunks/GrAlert-B9gmpoPC.js";
 import { t as grAlertConfig } from "../../chunks/config-BNu8lFQB.js";
-export { GrAlert_default as GrAlert, GrAlert_default as default, grAlertConfig };
+export { GR_ALERT_VARIANTS, GrAlert_default as GrAlert, GrAlert_default as default, applyGrAlertOverrides, grAlertConfig, grAlertCssVars, grAlertIconKey, normalizeGrAlertVariant, resolveGrAlertColors };

package/dist/components/GrAutocomplete/chunks/GrAutocomplete-BVLoQ5tZ.js

@@ -0,0 +1,499 @@
+import { a as useGrComponentProp, o as useGrComponentSize } from "../../../chunks/context-DfWYCBB-.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-SH0I--GW.js";
+import { vClickOutside } from "../../../directives/clickOutside.js";
+import { t as useFloating } from "../../../chunks/useFloating-DtM6TyE4.js";
+import { t as useEscapeToClose } from "../../../chunks/useEscapeToClose-C2t_S1gh.js";
+import { n as useGrFormFieldContext } from "../../../chunks/context-DdNIxa1w.js";
+import { a as autocompleteShellClass, i as autocompletePanelClasses, r as autocompleteChipClass } from "../../../chunks/config-DToHb81g.js";
+import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+//#region src/components/GrAutocomplete/GrAutocomplete.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "truncate" };
+var _hoisted_2 = ["aria-label", "onClick"];
+var _hoisted_3 = [
+	"id",
+	"value",
+	"disabled",
+	"placeholder",
+	"aria-label",
+	"aria-invalid",
+	"aria-describedby",
+	"aria-required",
+	"aria-autocomplete",
+	"aria-controls",
+	"aria-activedescendant",
+	"aria-expanded"
+];
+var _hoisted_4 = {
+	key: 1,
+	"data-gr-autocomplete-spinner": "",
+	class: "shrink-0 flex items-center text-[var(--gr-muted-fg)]"
+};
+var _hoisted_5 = ["aria-label"];
+var _hoisted_6 = {
+	key: 3,
+	"data-testid": "gr-autocomplete-chevron",
+	class: "shrink-0 flex items-center text-[var(--gr-muted-fg)] pointer-events-none"
+};
+var _hoisted_7 = ["id", "aria-multiselectable"];
+var _hoisted_8 = [
+	"id",
+	"disabled",
+	"aria-selected",
+	"aria-disabled",
+	"onClick",
+	"onMousemove"
+];
+var _hoisted_9 = { class: "flex items-center gap-2 min-w-0" };
+var _hoisted_10 = { class: "truncate" };
+var _hoisted_11 = {
+	key: 1,
+	"data-gr-autocomplete-loading": "",
+	class: "flex items-center gap-2 px-3 py-2 text-[13px] text-[var(--gr-muted-fg)]"
+};
+var _hoisted_12 = {
+	key: 2,
+	"data-gr-autocomplete-hint": "",
+	class: "px-3 py-2 text-[13px] text-[var(--gr-muted-fg)]"
+};
+var _hoisted_13 = {
+	key: 3,
+	"data-gr-autocomplete-empty": "",
+	class: "px-3 py-2 text-[13px] text-[var(--gr-muted-fg)]"
+};
+//#endregion
+//#region src/components/GrAutocomplete/GrAutocomplete.vue
+var GrAutocomplete_default = /* @__PURE__ */ defineComponent({
+	__name: "GrAutocomplete",
+	props: {
+		modelValue: {},
+		options: { default: void 0 },
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		size: { default: void 0 },
+		placeholder: { default: void 0 },
+		ariaLabel: { default: void 0 },
+		clearable: {
+			type: Boolean,
+			default: void 0
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		filterable: {
+			type: Boolean,
+			default: true
+		},
+		filter: {
+			type: Function,
+			default: void 0
+		},
+		minQueryLength: { default: 0 },
+		debounce: { default: 250 },
+		allowCustomValue: {
+			type: Boolean,
+			default: false
+		},
+		closeOnSelect: {
+			type: Boolean,
+			default: true
+		},
+		dropdownMaxHeight: { default: 280 },
+		loadingText: { default: void 0 },
+		noResultsText: { default: void 0 },
+		clearLabel: { default: void 0 }
+	},
+	emits: ["update:modelValue", "search"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrAutocomplete" });
+		const resolvedClearable = useGrComponentProp("GrAutocomplete", "clearable", () => props.clearable, false);
+		const emit = __emit;
+		const { t } = useGranularityTranslations();
+		const resolvedLoadingText = computed(() => props.loadingText ?? t("gr.autocomplete.loading", "Loading…"));
+		const resolvedNoResultsText = computed(() => props.noResultsText ?? t("gr.autocomplete.noResults", "No results"));
+		const resolvedClearLabel = computed(() => props.clearLabel ?? t("gr.common.clear", "Clear"));
+		const resolvedTypeMoreText = computed(() => t("gr.autocomplete.typeMore", "Type at least {n} characters", { n: props.minQueryLength }));
+		const field = useGrFormFieldContext();
+		const resolvedId = computed(() => field?.id.value);
+		const isInvalid = computed(() => Boolean(field?.invalid.value));
+		const describedBy = computed(() => field?.describedById.value);
+		const isRequired = computed(() => Boolean(field?.required.value));
+		const optionsResolved = computed(() => props.options ?? []);
+		function toArray(value) {
+			if (Array.isArray(value)) return value;
+			if (!value) return [];
+			return [value];
+		}
+		const modelSingle = computed(() => Array.isArray(props.modelValue) ? props.modelValue[0] ?? "" : props.modelValue);
+		const selectedValues = computed(() => props.multiple ? toArray(props.modelValue) : modelSingle.value ? [modelSingle.value] : []);
+		const hasSelection = computed(() => selectedValues.value.length > 0);
+		function labelFor(value) {
+			return optionsResolved.value.find((o) => o.value === value)?.label ?? value;
+		}
+		/** Опции выбранных значений (для chips в multiple). Неизвестные значения показываем как есть. */
+		const selectedOptions = computed(() => selectedValues.value.map((v) => optionsResolved.value.find((o) => o.value === v) ?? {
+			value: v,
+			label: v
+		}));
+		const singleSelectedLabel = computed(() => props.multiple || !modelSingle.value ? "" : labelFor(modelSingle.value));
+		const query = ref("");
+		const dirty = ref(false);
+		const open = ref(false);
+		const activeIndex = ref(-1);
+		const rootEl = ref(null);
+		const panelEl = ref(null);
+		const inputEl = ref(null);
+		const clickOutsideExclude = [() => panelEl.value];
+		const { floatingStyle } = useFloating(rootEl, panelEl, open, {
+			placement: "bottom-start",
+			matchWidth: true,
+			zIndexVar: "--gr-z-dropdown"
+		});
+		useEscapeToClose(open, closeDropdown);
+		const searchQuery = computed(() => {
+			if (!props.filterable) return "";
+			if (!props.multiple && !dirty.value) return "";
+			return query.value.trim();
+		});
+		function defaultFilter(option, q) {
+			const needle = q.toLowerCase();
+			return option.label.toLowerCase().includes(needle) || option.value.toLowerCase().includes(needle);
+		}
+		const filteredOptions = computed(() => {
+			const q = searchQuery.value;
+			if (!q) return optionsResolved.value;
+			const matcher = props.filter ?? defaultFilter;
+			return optionsResolved.value.filter((o) => matcher(o, q));
+		});
+		const navigableValues = computed(() => filteredOptions.value.filter((o) => !o.disabled).map((o) => o.value));
+		const canAddCustom = computed(() => {
+			if (!props.allowCustomValue) return false;
+			const v = query.value.trim();
+			if (!v) return false;
+			if (props.multiple && selectedValues.value.includes(v)) return false;
+			if (!props.multiple && v === modelSingle.value) return false;
+			return !optionsResolved.value.some((o) => o.value === v || o.label === v);
+		});
+		const belowMinQuery = computed(() => props.minQueryLength > 0 && query.value.trim().length < props.minQueryLength);
+		const showLoading = computed(() => props.loading);
+		const showEmpty = computed(() => !props.loading && filteredOptions.value.length === 0 && !canAddCustom.value);
+		const listboxId = useId();
+		function optionDomId(value) {
+			return `${listboxId}-opt-${value}`;
+		}
+		const activeValue = computed(() => activeIndex.value >= 0 ? navigableValues.value[activeIndex.value] : void 0);
+		const activeDescendantId = computed(() => open.value && activeValue.value !== void 0 ? optionDomId(activeValue.value) : void 0);
+		function isSelected(value) {
+			return selectedValues.value.includes(value);
+		}
+		function clampActive(index) {
+			const len = navigableValues.value.length;
+			if (len === 0) return -1;
+			return (index % len + len) % len;
+		}
+		async function scrollActiveIntoView() {
+			await nextTick();
+			const value = activeValue.value;
+			if (value === void 0) return;
+			document.getElementById(optionDomId(value))?.scrollIntoView?.({ block: "nearest" });
+		}
+		function setActive(index) {
+			activeIndex.value = clampActive(index);
+			scrollActiveIntoView();
+		}
+		function initActiveIndex() {
+			const selectedIdx = navigableValues.value.findIndex((v) => isSelected(v));
+			activeIndex.value = selectedIdx >= 0 ? selectedIdx : navigableValues.value.length ? 0 : -1;
+		}
+		watch(navigableValues, () => {
+			if (!open.value) return;
+			if (activeIndex.value >= navigableValues.value.length) activeIndex.value = navigableValues.value.length - 1;
+			if (activeIndex.value < 0 && navigableValues.value.length) activeIndex.value = 0;
+		});
+		function openDropdown() {
+			if (props.disabled || open.value) return;
+			open.value = true;
+		}
+		function closeDropdown() {
+			open.value = false;
+		}
+		function focusInput() {
+			inputEl.value?.focus();
+		}
+		let searchTimer = null;
+		function scheduleSearch(value) {
+			if (searchTimer) clearTimeout(searchTimer);
+			searchTimer = setTimeout(() => {
+				if (props.minQueryLength > 0 && value.trim().length < props.minQueryLength) return;
+				emit("search", value.trim());
+			}, props.debounce);
+		}
+		onBeforeUnmount(() => {
+			if (searchTimer) clearTimeout(searchTimer);
+		});
+		function onInput(event) {
+			const value = event.target.value;
+			query.value = value;
+			dirty.value = true;
+			openDropdown();
+			scheduleSearch(value);
+		}
+		function onFocus() {
+			if (props.disabled) return;
+			openDropdown();
+		}
+		function setQuery(value) {
+			query.value = value;
+			dirty.value = false;
+		}
+		function selectSingle(value, label) {
+			emit("update:modelValue", value);
+			setQuery(label);
+			closeDropdown();
+		}
+		function toggleMultiple(value) {
+			const next = selectedValues.value.slice();
+			const idx = next.indexOf(value);
+			if (idx >= 0) next.splice(idx, 1);
+			else next.push(value);
+			emit("update:modelValue", next);
+			setQuery("");
+			if (props.closeOnSelect) closeDropdown();
+			else nextTick(focusInput);
+		}
+		function chooseOption(option) {
+			if (option.disabled) return;
+			if (props.multiple) toggleMultiple(option.value);
+			else selectSingle(option.value, option.label);
+		}
+		function commitCustom() {
+			const v = query.value.trim();
+			if (!v) return;
+			if (props.multiple) toggleMultiple(v);
+			else selectSingle(v, v);
+		}
+		function removeValue(value) {
+			const next = selectedValues.value.filter((v) => v !== value);
+			emit("update:modelValue", next);
+			nextTick(focusInput);
+		}
+		function clearSelection() {
+			if (props.disabled) return;
+			emit("update:modelValue", props.multiple ? [] : "");
+			setQuery("");
+			nextTick(focusInput);
+		}
+		const showClear = computed(() => resolvedClearable.value && !props.disabled && (hasSelection.value || query.value.length > 0));
+		function onKeydown(event) {
+			if (props.disabled) return;
+			if (!open.value && ["ArrowDown", "ArrowUp"].includes(event.key)) {
+				event.preventDefault();
+				openDropdown();
+				return;
+			}
+			switch (event.key) {
+				case "ArrowDown":
+					event.preventDefault();
+					setActive(activeIndex.value + 1);
+					break;
+				case "ArrowUp":
+					event.preventDefault();
+					setActive(activeIndex.value - 1);
+					break;
+				case "Home":
+					if (!open.value) break;
+					event.preventDefault();
+					setActive(0);
+					break;
+				case "End":
+					if (!open.value) break;
+					event.preventDefault();
+					setActive(navigableValues.value.length - 1);
+					break;
+				case "Enter":
+					if (!open.value) break;
+					event.preventDefault();
+					if (activeValue.value !== void 0) {
+						const opt = filteredOptions.value.find((o) => o.value === activeValue.value);
+						if (opt) chooseOption(opt);
+					} else if (canAddCustom.value) commitCustom();
+					break;
+				case "Backspace":
+					if (props.multiple && query.value === "" && selectedValues.value.length) {
+						event.preventDefault();
+						removeValue(selectedValues.value[selectedValues.value.length - 1]);
+					}
+					break;
+				case "Tab":
+					closeDropdown();
+					break;
+			}
+		}
+		watch([singleSelectedLabel, () => props.multiple], ([label, multiple]) => {
+			if (multiple) return;
+			if (open.value || dirty.value) return;
+			setQuery(label);
+		}, { immediate: true });
+		watch(open, (isOpen) => {
+			if (isOpen) {
+				initActiveIndex();
+				return;
+			}
+			activeIndex.value = -1;
+			if (props.multiple) setQuery("");
+			else setQuery(singleSelectedLabel.value);
+		});
+		const ariaAutocomplete = computed(() => props.allowCustomValue ? "both" : "list");
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("div", {
+				ref_key: "rootEl",
+				ref: rootEl,
+				"data-gr-autocomplete": "",
+				class: "relative w-full"
+			}, [createElementVNode("div", {
+				"data-gr-autocomplete-shell": "",
+				class: normalizeClass(unref(autocompleteShellClass)({
+					size: unref(resolvedSize),
+					disabled: __props.disabled,
+					invalid: isInvalid.value
+				})),
+				onMousedown: withModifiers(focusInput, ["self", "prevent"])
+			}, [
+				__props.multiple ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(selectedOptions.value, (option) => {
+					return openBlock(), createElementBlock("span", {
+						key: option.value,
+						"data-gr-autocomplete-chip": "",
+						class: normalizeClass(unref(autocompleteChipClass))
+					}, [createElementVNode("span", _hoisted_1, toDisplayString(option.label), 1), !__props.disabled ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						type: "button",
+						"data-gr-autocomplete-chip-remove": "",
+						class: "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-full text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)]",
+						"aria-label": unref(t)("gr.inputTag.removeTag", "Remove tag"),
+						tabindex: "-1",
+						onClick: ($event) => removeValue(option.value)
+					}, [..._cache[0] || (_cache[0] = [createElementVNode("span", {
+						class: "i-lucide-x block h-3 w-3",
+						"aria-hidden": "true"
+					}, null, -1)])], 8, _hoisted_2)) : createCommentVNode("", true)], 2);
+				}), 128)) : createCommentVNode("", true),
+				createElementVNode("input", {
+					id: resolvedId.value,
+					ref_key: "inputEl",
+					ref: inputEl,
+					"data-gr-autocomplete-input": "",
+					"data-testid": "gr-autocomplete-input",
+					type: "text",
+					autocomplete: "off",
+					spellcheck: "false",
+					role: "combobox",
+					value: query.value,
+					disabled: __props.disabled,
+					placeholder: hasSelection.value && __props.multiple ? void 0 : __props.placeholder,
+					"aria-label": __props.ariaLabel,
+					"aria-invalid": isInvalid.value ? "true" : void 0,
+					"aria-describedby": describedBy.value,
+					"aria-required": isRequired.value ? "true" : void 0,
+					"aria-haspopup": "listbox",
+					"aria-autocomplete": ariaAutocomplete.value,
+					"aria-controls": open.value ? unref(listboxId) : void 0,
+					"aria-activedescendant": activeDescendantId.value,
+					"aria-expanded": open.value ? "true" : "false",
+					class: "min-w-0 flex-1 bg-transparent text-inherit placeholder:text-[var(--gr-muted-fg)] focus:outline-none disabled:cursor-not-allowed",
+					onInput,
+					onFocus,
+					onKeydown
+				}, null, 40, _hoisted_3),
+				__props.loading ? (openBlock(), createElementBlock("span", _hoisted_4, [..._cache[1] || (_cache[1] = [createElementVNode("span", {
+					class: "i-lucide-loader-2 block h-4 w-4 animate-spin",
+					"aria-hidden": "true"
+				}, null, -1)])])) : showClear.value ? (openBlock(), createElementBlock("button", {
+					key: 2,
+					type: "button",
+					"data-testid": "gr-autocomplete-clear",
+					"data-gr-autocomplete-clear": "",
+					class: "shrink-0 inline-flex h-5 w-5 items-center justify-center rounded-md text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)]",
+					"aria-label": resolvedClearLabel.value,
+					tabindex: "-1",
+					onClick: clearSelection
+				}, [..._cache[2] || (_cache[2] = [createElementVNode("span", {
+					class: "i-lucide-x block h-4 w-4",
+					"aria-hidden": "true"
+				}, null, -1)])], 8, _hoisted_5)) : (openBlock(), createElementBlock("span", _hoisted_6, [..._cache[3] || (_cache[3] = [createElementVNode("span", {
+					class: "i-lucide-chevron-down block h-4 w-4",
+					"aria-hidden": "true"
+				}, null, -1)])]))
+			], 34), (openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, {
+				"enter-active-class": "transition ease-out duration-150",
+				"enter-from-class": "transform opacity-0 scale-95",
+				"enter-to-class": "transform opacity-100 scale-100",
+				"leave-active-class": "transition ease-in duration-100",
+				"leave-from-class": "transform opacity-100 scale-100",
+				"leave-to-class": "transform opacity-0 scale-95"
+			}, {
+				default: withCtx(() => [withDirectives(createElementVNode("div", {
+					ref_key: "panelEl",
+					ref: panelEl,
+					"data-testid": "gr-autocomplete-panel",
+					"data-gr-autocomplete-panel": "",
+					style: normalizeStyle(unref(floatingStyle))
+				}, [createElementVNode("div", { class: normalizeClass(unref(autocompletePanelClasses)) }, [createElementVNode("div", {
+					id: unref(listboxId),
+					"data-gr-autocomplete-listbox": "",
+					class: "p-1 overflow-auto",
+					style: normalizeStyle({ maxHeight: `${__props.dropdownMaxHeight}px` }),
+					role: "listbox",
+					"aria-multiselectable": __props.multiple ? "true" : void 0
+				}, [
+					canAddCustom.value ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						type: "button",
+						"data-testid": "gr-autocomplete-add-option",
+						"data-gr-autocomplete-add-option": "",
+						class: "w-full rounded-[10px] px-3 py-2 text-left text-[13px] hover:bg-[color-mix(in_srgb,var(--gr-muted)_30%,transparent)]",
+						onClick: commitCustom
+					}, toDisplayString(unref(t)("gr.autocomplete.addOption", "Add \"{value}\"", { value: query.value.trim() })), 1)) : createCommentVNode("", true),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(filteredOptions.value, (option) => {
+						return openBlock(), createElementBlock("button", {
+							id: optionDomId(option.value),
+							key: option.value,
+							"data-gr-autocomplete-option": "",
+							type: "button",
+							role: "option",
+							disabled: option.disabled,
+							"aria-selected": isSelected(option.value) ? "true" : "false",
+							"aria-disabled": option.disabled ? "true" : void 0,
+							class: normalizeClass(["w-full rounded-[10px] px-3 py-2 text-left text-[13px]", [option.disabled ? "cursor-not-allowed opacity-50" : "hover:bg-[color-mix(in_srgb,var(--gr-muted)_30%,transparent)]", activeValue.value === option.value && !option.disabled ? "bg-[color-mix(in_srgb,var(--gr-muted)_30%,transparent)]" : ""]]),
+							onClick: ($event) => chooseOption(option),
+							onMousemove: ($event) => activeIndex.value = navigableValues.value.indexOf(option.value)
+						}, [renderSlot(_ctx.$slots, "option", {
+							option,
+							selected: isSelected(option.value)
+						}, () => [createElementVNode("span", _hoisted_9, [createElementVNode("span", {
+							class: normalizeClass(["inline-block h-4 w-4 shrink-0", isSelected(option.value) ? "i-lucide-check text-[var(--gr-primary)]" : ""]),
+							"aria-hidden": "true"
+						}, null, 2), createElementVNode("span", _hoisted_10, toDisplayString(option.label), 1)])])], 42, _hoisted_8);
+					}), 128)),
+					showLoading.value ? (openBlock(), createElementBlock("div", _hoisted_11, [renderSlot(_ctx.$slots, "loading", {}, () => [_cache[4] || (_cache[4] = createElementVNode("span", {
+						class: "i-lucide-loader-2 block h-4 w-4 animate-spin",
+						"aria-hidden": "true"
+					}, null, -1)), createElementVNode("span", null, toDisplayString(resolvedLoadingText.value), 1)])])) : showEmpty.value && belowMinQuery.value ? (openBlock(), createElementBlock("div", _hoisted_12, toDisplayString(resolvedTypeMoreText.value), 1)) : showEmpty.value ? (openBlock(), createElementBlock("div", _hoisted_13, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(resolvedNoResultsText.value), 1)])])) : createCommentVNode("", true)
+				], 12, _hoisted_7)], 2)], 4), [[vShow, open.value]])]),
+				_: 3
+			})]))])), [[unref(vClickOutside), {
+				handler: closeDropdown,
+				enabled: open.value,
+				exclude: clickOutsideExclude
+			}]]);
+		};
+	}
+});
+//#endregion
+export { GrAutocomplete_default as t };