@feugene/granularity 0.31.0 → 0.31.1

package/dist/components/GrAvatar/chunks/GrAvatar-CNmLmgcr.js.map

@@ -1 +1 @@
-{"version":3,"file":"GrAvatar-CNmLmgcr.js","names":[],"sources":["../../../../src/components/GrAvatar/avatarContext.ts","../../../../src/components/GrAvatar/GrAvatar.vue","../../../../src/components/GrAvatar/GrAvatar.vue","../../../../src/components/GrAvatar/GrAvatarGroup.vue","../../../../src/components/GrAvatar/GrAvatarGroup.vue"],"sourcesContent":["import type { InjectionKey } from 'vue'\n\nimport type { GrAvatarShape } from './grAvatarStyles'\nimport type { GrSizeWithPx } from '../shared/sizes'\n\n/**\n * Контекст `GrAvatarGroup`: размер и форма задаются на группе, чтобы ряд\n * аватаров не расползался, когда потребитель забыл повторить пропы у каждого.\n */\nexport interface GrAvatarGroupContext {\n  size?: GrSizeWithPx\n  shape?: GrAvatarShape\n}\n\nexport const GR_AVATAR_GROUP_KEY: InjectionKey<GrAvatarGroupContext> = Symbol.for('@feugene/granularity/avatar-group')\n","<script setup lang=\"ts\">\nimport { computed, inject, ref, watch } from 'vue'\n\nimport GrSkeleton from '../GrSkeleton/GrSkeleton.vue'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { GrSizeWithPx } from '../shared/sizes'\n\nimport { GR_AVATAR_GROUP_KEY } from './avatarContext'\nimport {\n  avatarFontSizePx,\n  grAvatarClass,\n  initialsFrom,\n  mediaClass,\n  mediaClipClass,\n  rootBaseClass,\n  rootStatusClass,\n  statusDotClass,\n  statusToneClass,\n  type GrAvatarShape,\n  type GrAvatarStatus,\n} from './grAvatarStyles'\n\nexport type { GrAvatarShape, GrAvatarStatus } from './grAvatarStyles'\n\n/** Диаметр аватара для каждой ступени канонической шкалы. */\nconst GR_AVATAR_SIZE_PX = {\n  xs: 24,\n  sm: 32,\n  md: 40,\n  lg: 56,\n} as const\n\nexport interface GrAvatarProps {\n  /**\n   * Размер по канонической шкале (`xs|sm|md|lg`) — тогда работает\n   * `GrConfigProvider`. Число — escape-hatch: аватар нужен произвольного\n   * диаметра (24px в строке списка, 96px в профиле), и четыре ступени шкалы\n   * этого не закрывают.\n   */\n  size?: GrSizeWithPx\n  src?: string\n  /** Резервная картинка: показывается, когда `src` не загрузился. */\n  fallbackSrc?: string\n  alt?: string\n  /** Имя участника: даёт инициалы и доступное имя аватара. */\n  name?: string\n  shape?: GrAvatarShape\n  /** Статус участника. Точка декоративна — рядом идёт скрытая подпись. */\n  status?: GrAvatarStatus\n}\n\nconst props = withDefaults(defineProps<GrAvatarProps>(), {\n  size: undefined,\n  src: undefined,\n  fallbackSrc: undefined,\n  alt: undefined,\n  name: undefined,\n  // Дефолт живёт в резолвере: Vue подставил бы свой раньше, чем компонент\n  // заглянет в `GrConfigProvider`.\n  shape: undefined,\n  status: undefined,\n})\n\nconst slots = defineSlots<{\n  /** Содержимое вместо картинки и инициалов. */\n  default?: () => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\nconst group = inject(GR_AVATAR_GROUP_KEY, null)\n\n// Размер и форма группы сильнее провайдера, но слабее собственного пропа.\nconst localSize = computed(() => props.size ?? group?.size)\n\nconst resolvedScaleSize = useGrComponentSize(\n  () => (typeof localSize.value === 'number' ? undefined : localSize.value),\n  { component: 'GrAvatar' },\n)\n\nconst resolvedShape = useGrComponentProp(\n  'GrAvatar',\n  'shape',\n  () => props.shape ?? group?.shape,\n  'circle',\n)\n\nconst sizePx = computed(() => (\n  typeof localSize.value === 'number' ? localSize.value : GR_AVATAR_SIZE_PX[resolvedScaleSize.value]\n))\n\nconst style = computed(() => {\n  const px = `${sizePx.value}px`\n  // Кегль на корне, а не на span инициалов: так он достаётся и слотовому тексту.\n  return { width: px, height: px, fontSize: `${avatarFontSizePx(sizePx.value)}px` }\n})\n\n/**\n * Состояние картинки. Без него битая ссылка оставляла `v-if=\"src\"` истинным:\n * браузер рисовал сломанное изображение, а запасной вариант не показывался\n * никогда.\n */\ntype ImageState = 'loading' | 'loaded' | 'error'\n\nconst primaryState = ref<ImageState>('loading')\nconst fallbackState = ref<ImageState>('loading')\n\n// Новая ссылка не должна наследовать ошибку прошлой.\nwatch(() => props.src, () => { primaryState.value = 'loading' })\nwatch(() => props.fallbackSrc, () => { fallbackState.value = 'loading' })\n\nconst activeSrc = computed(() => {\n  if (props.src && primaryState.value !== 'error') return props.src\n  if (props.fallbackSrc && fallbackState.value !== 'error') return props.fallbackSrc\n  return undefined\n})\n\nconst isFallbackActive = computed(() => Boolean(activeSrc.value) && activeSrc.value !== props.src)\n\n// Скелет держит место, пока картинка едет: иначе ряд аватаров мигает пустотой.\nconst showSkeleton = computed(() => {\n  if (!activeSrc.value) return false\n  return (isFallbackActive.value ? fallbackState.value : primaryState.value) === 'loading'\n})\n\nconst initials = computed(() => (props.name ? initialsFrom(props.name) : ''))\n\n// Пусто — когда нет ни картинки, ни слота, ни имени.\nconst showInitials = computed(() => !activeSrc.value && !slots.default && Boolean(initials.value))\n\nconst statusLabel = computed(() => (props.status\n  ? t(`gr.avatar.status.${props.status}`, props.status)\n  : undefined))\n\n/**\n * Доступное имя: `alt` сильнее всего, иначе имя участника.\n *\n * Когда есть картинка, имя несёт её `alt` — так привычнее потребителю и не\n * возникает двойного объявления. Без картинки роль и имя берёт на себя корень:\n * иначе аватар с инициалами остался бы для диктора пустым.\n */\nconst accessibleName = computed(() => props.alt ?? props.name ?? '')\n\nconst rootIsImage = computed(() => !activeSrc.value && accessibleName.value !== '')\n\nconst rootClass = computed(() => [\n  rootBaseClass,\n  grAvatarClass(resolvedShape.value),\n  props.status ? rootStatusClass : '',\n])\n\nfunction onError(kind: 'primary' | 'fallback'): void {\n  if (kind === 'primary') primaryState.value = 'error'\n  else fallbackState.value = 'error'\n}\n\nfunction onLoad(kind: 'primary' | 'fallback'): void {\n  if (kind === 'primary') primaryState.value = 'loaded'\n  else fallbackState.value = 'loaded'\n}\n</script>\n\n<template>\n  <span\n    data-gr-avatar\n    :style=\"style\"\n    :class=\"rootClass\"\n    :role=\"rootIsImage ? 'img' : undefined\"\n    :aria-label=\"rootIsImage ? accessibleName : undefined\"\n  >\n    <span :class=\"[mediaClass, status ? [mediaClipClass, grAvatarClass(resolvedShape)] : '']\">\n      <GrSkeleton\n        v-if=\"showSkeleton\"\n        data-gr-avatar-skeleton\n        width=\"100%\"\n        height=\"100%\"\n        :rounded=\"resolvedShape === 'circle' ? 'var(--gr-radius-full)' : 'var(--gr-avatar-square-radius, 10px)'\"\n      />\n\n      <img\n        v-if=\"activeSrc\"\n        :key=\"activeSrc\"\n        data-gr-avatar-image\n        :src=\"activeSrc\"\n        :alt=\"accessibleName\"\n        class=\"h-full w-full object-cover\"\n        :class=\"showSkeleton ? 'invisible absolute' : ''\"\n        @error=\"onError(isFallbackActive ? 'fallback' : 'primary')\"\n        @load=\"onLoad(isFallbackActive ? 'fallback' : 'primary')\"\n      >\n\n      <span v-else-if=\"showInitials\" data-gr-avatar-initials>{{ initials }}</span>\n\n      <slot v-else />\n    </span>\n\n    <template v-if=\"status\">\n      <span\n        data-gr-avatar-status\n        :class=\"[statusDotClass, statusToneClass[status]]\"\n        aria-hidden=\"true\"\n      />\n      <!-- Цвет точки смысл не передаёт: статус объявляется словом (WCAG 1.4.1). -->\n      <span data-gr-avatar-status-label class=\"sr-only\">{{ statusLabel }}</span>\n    </template>\n  </span>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject, ref, watch } from 'vue'\n\nimport GrSkeleton from '../GrSkeleton/GrSkeleton.vue'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { GrSizeWithPx } from '../shared/sizes'\n\nimport { GR_AVATAR_GROUP_KEY } from './avatarContext'\nimport {\n  avatarFontSizePx,\n  grAvatarClass,\n  initialsFrom,\n  mediaClass,\n  mediaClipClass,\n  rootBaseClass,\n  rootStatusClass,\n  statusDotClass,\n  statusToneClass,\n  type GrAvatarShape,\n  type GrAvatarStatus,\n} from './grAvatarStyles'\n\nexport type { GrAvatarShape, GrAvatarStatus } from './grAvatarStyles'\n\n/** Диаметр аватара для каждой ступени канонической шкалы. */\nconst GR_AVATAR_SIZE_PX = {\n  xs: 24,\n  sm: 32,\n  md: 40,\n  lg: 56,\n} as const\n\nexport interface GrAvatarProps {\n  /**\n   * Размер по канонической шкале (`xs|sm|md|lg`) — тогда работает\n   * `GrConfigProvider`. Число — escape-hatch: аватар нужен произвольного\n   * диаметра (24px в строке списка, 96px в профиле), и четыре ступени шкалы\n   * этого не закрывают.\n   */\n  size?: GrSizeWithPx\n  src?: string\n  /** Резервная картинка: показывается, когда `src` не загрузился. */\n  fallbackSrc?: string\n  alt?: string\n  /** Имя участника: даёт инициалы и доступное имя аватара. */\n  name?: string\n  shape?: GrAvatarShape\n  /** Статус участника. Точка декоративна — рядом идёт скрытая подпись. */\n  status?: GrAvatarStatus\n}\n\nconst props = withDefaults(defineProps<GrAvatarProps>(), {\n  size: undefined,\n  src: undefined,\n  fallbackSrc: undefined,\n  alt: undefined,\n  name: undefined,\n  // Дефолт живёт в резолвере: Vue подставил бы свой раньше, чем компонент\n  // заглянет в `GrConfigProvider`.\n  shape: undefined,\n  status: undefined,\n})\n\nconst slots = defineSlots<{\n  /** Содержимое вместо картинки и инициалов. */\n  default?: () => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\nconst group = inject(GR_AVATAR_GROUP_KEY, null)\n\n// Размер и форма группы сильнее провайдера, но слабее собственного пропа.\nconst localSize = computed(() => props.size ?? group?.size)\n\nconst resolvedScaleSize = useGrComponentSize(\n  () => (typeof localSize.value === 'number' ? undefined : localSize.value),\n  { component: 'GrAvatar' },\n)\n\nconst resolvedShape = useGrComponentProp(\n  'GrAvatar',\n  'shape',\n  () => props.shape ?? group?.shape,\n  'circle',\n)\n\nconst sizePx = computed(() => (\n  typeof localSize.value === 'number' ? localSize.value : GR_AVATAR_SIZE_PX[resolvedScaleSize.value]\n))\n\nconst style = computed(() => {\n  const px = `${sizePx.value}px`\n  // Кегль на корне, а не на span инициалов: так он достаётся и слотовому тексту.\n  return { width: px, height: px, fontSize: `${avatarFontSizePx(sizePx.value)}px` }\n})\n\n/**\n * Состояние картинки. Без него битая ссылка оставляла `v-if=\"src\"` истинным:\n * браузер рисовал сломанное изображение, а запасной вариант не показывался\n * никогда.\n */\ntype ImageState = 'loading' | 'loaded' | 'error'\n\nconst primaryState = ref<ImageState>('loading')\nconst fallbackState = ref<ImageState>('loading')\n\n// Новая ссылка не должна наследовать ошибку прошлой.\nwatch(() => props.src, () => { primaryState.value = 'loading' })\nwatch(() => props.fallbackSrc, () => { fallbackState.value = 'loading' })\n\nconst activeSrc = computed(() => {\n  if (props.src && primaryState.value !== 'error') return props.src\n  if (props.fallbackSrc && fallbackState.value !== 'error') return props.fallbackSrc\n  return undefined\n})\n\nconst isFallbackActive = computed(() => Boolean(activeSrc.value) && activeSrc.value !== props.src)\n\n// Скелет держит место, пока картинка едет: иначе ряд аватаров мигает пустотой.\nconst showSkeleton = computed(() => {\n  if (!activeSrc.value) return false\n  return (isFallbackActive.value ? fallbackState.value : primaryState.value) === 'loading'\n})\n\nconst initials = computed(() => (props.name ? initialsFrom(props.name) : ''))\n\n// Пусто — когда нет ни картинки, ни слота, ни имени.\nconst showInitials = computed(() => !activeSrc.value && !slots.default && Boolean(initials.value))\n\nconst statusLabel = computed(() => (props.status\n  ? t(`gr.avatar.status.${props.status}`, props.status)\n  : undefined))\n\n/**\n * Доступное имя: `alt` сильнее всего, иначе имя участника.\n *\n * Когда есть картинка, имя несёт её `alt` — так привычнее потребителю и не\n * возникает двойного объявления. Без картинки роль и имя берёт на себя корень:\n * иначе аватар с инициалами остался бы для диктора пустым.\n */\nconst accessibleName = computed(() => props.alt ?? props.name ?? '')\n\nconst rootIsImage = computed(() => !activeSrc.value && accessibleName.value !== '')\n\nconst rootClass = computed(() => [\n  rootBaseClass,\n  grAvatarClass(resolvedShape.value),\n  props.status ? rootStatusClass : '',\n])\n\nfunction onError(kind: 'primary' | 'fallback'): void {\n  if (kind === 'primary') primaryState.value = 'error'\n  else fallbackState.value = 'error'\n}\n\nfunction onLoad(kind: 'primary' | 'fallback'): void {\n  if (kind === 'primary') primaryState.value = 'loaded'\n  else fallbackState.value = 'loaded'\n}\n</script>\n\n<template>\n  <span\n    data-gr-avatar\n    :style=\"style\"\n    :class=\"rootClass\"\n    :role=\"rootIsImage ? 'img' : undefined\"\n    :aria-label=\"rootIsImage ? accessibleName : undefined\"\n  >\n    <span :class=\"[mediaClass, status ? [mediaClipClass, grAvatarClass(resolvedShape)] : '']\">\n      <GrSkeleton\n        v-if=\"showSkeleton\"\n        data-gr-avatar-skeleton\n        width=\"100%\"\n        height=\"100%\"\n        :rounded=\"resolvedShape === 'circle' ? 'var(--gr-radius-full)' : 'var(--gr-avatar-square-radius, 10px)'\"\n      />\n\n      <img\n        v-if=\"activeSrc\"\n        :key=\"activeSrc\"\n        data-gr-avatar-image\n        :src=\"activeSrc\"\n        :alt=\"accessibleName\"\n        class=\"h-full w-full object-cover\"\n        :class=\"showSkeleton ? 'invisible absolute' : ''\"\n        @error=\"onError(isFallbackActive ? 'fallback' : 'primary')\"\n        @load=\"onLoad(isFallbackActive ? 'fallback' : 'primary')\"\n      >\n\n      <span v-else-if=\"showInitials\" data-gr-avatar-initials>{{ initials }}</span>\n\n      <slot v-else />\n    </span>\n\n    <template v-if=\"status\">\n      <span\n        data-gr-avatar-status\n        :class=\"[statusDotClass, statusToneClass[status]]\"\n        aria-hidden=\"true\"\n      />\n      <!-- Цвет точки смысл не передаёт: статус объявляется словом (WCAG 1.4.1). -->\n      <span data-gr-avatar-status-label class=\"sr-only\">{{ statusLabel }}</span>\n    </template>\n  </span>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrAvatarGroup — ряд аватаров со стекингом и счётчиком скрытых.\n *\n * Группа объявлена `role=\"group\"` с именем и числом участников: без этого\n * скринридер читает набор безымянных картинок и не понимает, что их больше,\n * чем видно.\n */\nimport { computed, provide, type VNode } from 'vue'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { GrSizeWithPx } from '../shared/sizes'\n\nimport { GR_AVATAR_GROUP_KEY } from './avatarContext'\nimport {\n  avatarFontSizePx,\n  grAvatarClass,\n  groupBaseClass,\n  groupItemClass,\n  groupOverflowClass,\n  rootBaseClass,\n  type GrAvatarShape,\n} from './grAvatarStyles'\n\nconst GR_AVATAR_GROUP_SIZE_PX = {\n  xs: 24,\n  sm: 32,\n  md: 40,\n  lg: 56,\n} as const\n\nexport interface GrAvatarGroupProps {\n  /** Размер и форма ряда: дети берут их из контекста. */\n  size?: GrSizeWithPx\n  shape?: GrAvatarShape\n  /** Сколько аватаров показывать; остальные сворачиваются в «+N». */\n  max?: number\n  /** Сколько участников всего, если в слоте лежит лишь часть. */\n  total?: number\n  /** Имя группы. Не задано — берётся из локали. */\n  ariaLabel?: string\n}\n\nconst props = withDefaults(defineProps<GrAvatarGroupProps>(), {\n  size: undefined,\n  shape: undefined,\n  max: undefined,\n  total: undefined,\n  ariaLabel: undefined,\n})\n\nconst slots = defineSlots<{\n  /** Аватары ряда. */\n  default?: () => VNode[]\n}>()\n\nconst { t } = useGranularityTranslations()\n\nprovide(GR_AVATAR_GROUP_KEY, {\n  get size() {\n    return props.size\n  },\n  get shape() {\n    return props.shape\n  },\n})\n\nconst children = computed(() => slots.default?.() ?? [])\n\n// `v-for` внутри слота приходит фрагментом — считаем его детей, иначе весь\n// список выглядел бы одним аватаром.\nconst items = computed<VNode[]>(() => children.value.flatMap((node) => {\n  const nested = node.children\n  return Array.isArray(nested) && typeof node.type === 'symbol' ? (nested as VNode[]) : [node]\n}))\n\nconst visible = computed(() => (props.max === undefined ? items.value : items.value.slice(0, Math.max(0, props.max))))\n\nconst hiddenCount = computed(() => {\n  const total = props.total ?? items.value.length\n  return Math.max(0, total - visible.value.length)\n})\n\nconst overflowSizePx = computed(() => (\n  typeof props.size === 'number' ? props.size : GR_AVATAR_GROUP_SIZE_PX[props.size ?? 'md']\n))\n\nconst overflowStyle = computed(() => {\n  const px = `${overflowSizePx.value}px`\n  return { width: px, height: px, fontSize: `${avatarFontSizePx(overflowSizePx.value)}px` }\n})\n\nconst groupLabel = computed(() => props.ariaLabel ?? t('gr.avatar.group', 'People'))\n\nconst accessibleLabel = computed(() => (hiddenCount.value > 0\n  ? `${groupLabel.value}, ${t('gr.avatar.groupOverflow', 'and {count} more', { count: hiddenCount.value, n: hiddenCount.value })}`\n  : groupLabel.value))\n</script>\n\n<template>\n  <div\n    data-gr-avatar-group\n    role=\"group\"\n    :aria-label=\"accessibleLabel\"\n    :class=\"groupBaseClass\"\n  >\n    <component\n      :is=\"node\"\n      v-for=\"(node, index) in visible\"\n      :key=\"index\"\n      :class=\"groupItemClass\"\n    />\n\n    <span\n      v-if=\"hiddenCount > 0\"\n      data-gr-avatar-group-overflow\n      aria-hidden=\"true\"\n      :class=\"[rootBaseClass, groupOverflowClass, groupItemClass, grAvatarClass(shape ?? 'circle')]\"\n      :style=\"overflowStyle\"\n    >+{{ hiddenCount }}</span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrAvatarGroup — ряд аватаров со стекингом и счётчиком скрытых.\n *\n * Группа объявлена `role=\"group\"` с именем и числом участников: без этого\n * скринридер читает набор безымянных картинок и не понимает, что их больше,\n * чем видно.\n */\nimport { computed, provide, type VNode } from 'vue'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { GrSizeWithPx } from '../shared/sizes'\n\nimport { GR_AVATAR_GROUP_KEY } from './avatarContext'\nimport {\n  avatarFontSizePx,\n  grAvatarClass,\n  groupBaseClass,\n  groupItemClass,\n  groupOverflowClass,\n  rootBaseClass,\n  type GrAvatarShape,\n} from './grAvatarStyles'\n\nconst GR_AVATAR_GROUP_SIZE_PX = {\n  xs: 24,\n  sm: 32,\n  md: 40,\n  lg: 56,\n} as const\n\nexport interface GrAvatarGroupProps {\n  /** Размер и форма ряда: дети берут их из контекста. */\n  size?: GrSizeWithPx\n  shape?: GrAvatarShape\n  /** Сколько аватаров показывать; остальные сворачиваются в «+N». */\n  max?: number\n  /** Сколько участников всего, если в слоте лежит лишь часть. */\n  total?: number\n  /** Имя группы. Не задано — берётся из локали. */\n  ariaLabel?: string\n}\n\nconst props = withDefaults(defineProps<GrAvatarGroupProps>(), {\n  size: undefined,\n  shape: undefined,\n  max: undefined,\n  total: undefined,\n  ariaLabel: undefined,\n})\n\nconst slots = defineSlots<{\n  /** Аватары ряда. */\n  default?: () => VNode[]\n}>()\n\nconst { t } = useGranularityTranslations()\n\nprovide(GR_AVATAR_GROUP_KEY, {\n  get size() {\n    return props.size\n  },\n  get shape() {\n    return props.shape\n  },\n})\n\nconst children = computed(() => slots.default?.() ?? [])\n\n// `v-for` внутри слота приходит фрагментом — считаем его детей, иначе весь\n// список выглядел бы одним аватаром.\nconst items = computed<VNode[]>(() => children.value.flatMap((node) => {\n  const nested = node.children\n  return Array.isArray(nested) && typeof node.type === 'symbol' ? (nested as VNode[]) : [node]\n}))\n\nconst visible = computed(() => (props.max === undefined ? items.value : items.value.slice(0, Math.max(0, props.max))))\n\nconst hiddenCount = computed(() => {\n  const total = props.total ?? items.value.length\n  return Math.max(0, total - visible.value.length)\n})\n\nconst overflowSizePx = computed(() => (\n  typeof props.size === 'number' ? props.size : GR_AVATAR_GROUP_SIZE_PX[props.size ?? 'md']\n))\n\nconst overflowStyle = computed(() => {\n  const px = `${overflowSizePx.value}px`\n  return { width: px, height: px, fontSize: `${avatarFontSizePx(overflowSizePx.value)}px` }\n})\n\nconst groupLabel = computed(() => props.ariaLabel ?? t('gr.avatar.group', 'People'))\n\nconst accessibleLabel = computed(() => (hiddenCount.value > 0\n  ? `${groupLabel.value}, ${t('gr.avatar.groupOverflow', 'and {count} more', { count: hiddenCount.value, n: hiddenCount.value })}`\n  : groupLabel.value))\n</script>\n\n<template>\n  <div\n    data-gr-avatar-group\n    role=\"group\"\n    :aria-label=\"accessibleLabel\"\n    :class=\"groupBaseClass\"\n  >\n    <component\n      :is=\"node\"\n      v-for=\"(node, index) in visible\"\n      :key=\"index\"\n      :class=\"groupItemClass\"\n    />\n\n    <span\n      v-if=\"hiddenCount > 0\"\n      data-gr-avatar-group-overflow\n      aria-hidden=\"true\"\n      :class=\"[rootBaseClass, groupOverflowClass, groupItemClass, grAvatarClass(shape ?? 'circle')]\"\n      :style=\"overflowStyle\"\n    >+{{ hiddenCount }}</span>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"GrAvatar-CNmLmgcr.js","names":[],"sources":["../../../../src/components/GrAvatar/avatarContext.ts","../../../../src/components/GrAvatar/GrAvatar.vue","../../../../src/components/GrAvatar/GrAvatar.vue","../../../../src/components/GrAvatar/GrAvatarGroup.vue","../../../../src/components/GrAvatar/GrAvatarGroup.vue"],"sourcesContent":["import type { InjectionKey } from 'vue'\n\nimport type { GrAvatarShape } from './grAvatarStyles'\nimport type { GrSizeWithPx } from '../shared/sizes'\n\n/**\n * Контекст `GrAvatarGroup`: размер и форма задаются на группе, чтобы ряд\n * аватаров не расползался, когда потребитель забыл повторить пропы у каждого.\n */\nexport interface GrAvatarGroupContext {\n  size?: GrSizeWithPx\n  shape?: GrAvatarShape\n}\n\nexport const GR_AVATAR_GROUP_KEY: InjectionKey<GrAvatarGroupContext> = Symbol.for('@feugene/granularity/avatar-group')\n","<script setup lang=\"ts\">\nimport { computed, inject, ref, watch } from 'vue'\n\nimport GrSkeleton from '../GrSkeleton/GrSkeleton.vue'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { GrSizeWithPx } from '../shared/sizes'\n\nimport { GR_AVATAR_GROUP_KEY } from './avatarContext'\nimport {\n  avatarFontSizePx,\n  grAvatarClass,\n  initialsFrom,\n  mediaClass,\n  mediaClipClass,\n  rootBaseClass,\n  rootStatusClass,\n  statusDotClass,\n  statusToneClass,\n  type GrAvatarShape,\n  type GrAvatarStatus,\n} from './grAvatarStyles'\n\nexport type { GrAvatarShape, GrAvatarStatus } from './grAvatarStyles'\n\n/** Диаметр аватара для каждой ступени канонической шкалы. */\nconst GR_AVATAR_SIZE_PX = {\n  xs: 24,\n  sm: 32,\n  md: 40,\n  lg: 56,\n} as const\n\nexport interface GrAvatarProps {\n  /**\n   * Размер по канонической шкале (`xs|sm|md|lg`) — тогда работает\n   * `GrConfigProvider`. Число — escape-hatch: аватар нужен произвольного\n   * диаметра (24px в строке списка, 96px в профиле), и четыре ступени шкалы\n   * этого не закрывают.\n   */\n  size?: GrSizeWithPx\n  src?: string\n  /** Резервная картинка: показывается, когда `src` не загрузился. */\n  fallbackSrc?: string\n  alt?: string\n  /** Имя участника: даёт инициалы и доступное имя аватара. */\n  name?: string\n  shape?: GrAvatarShape\n  /** Статус участника. Точка декоративна — рядом идёт скрытая подпись. */\n  status?: GrAvatarStatus\n}\n\nconst props = withDefaults(defineProps<GrAvatarProps>(), {\n  size: undefined,\n  src: undefined,\n  fallbackSrc: undefined,\n  alt: undefined,\n  name: undefined,\n  // Дефолт живёт в резолвере: Vue подставил бы свой раньше, чем компонент\n  // заглянет в `GrConfigProvider`.\n  shape: undefined,\n  status: undefined,\n})\n\nconst slots = defineSlots<{\n  /** Содержимое вместо картинки и инициалов. */\n  default?: () => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\nconst group = inject(GR_AVATAR_GROUP_KEY, null)\n\n// Размер и форма группы сильнее провайдера, но слабее собственного пропа.\nconst localSize = computed(() => props.size ?? group?.size)\n\nconst resolvedScaleSize = useGrComponentSize(\n  () => (typeof localSize.value === 'number' ? undefined : localSize.value),\n  { component: 'GrAvatar' },\n)\n\nconst resolvedShape = useGrComponentProp(\n  'GrAvatar',\n  'shape',\n  () => props.shape ?? group?.shape,\n  'circle',\n)\n\nconst sizePx = computed(() => (\n  typeof localSize.value === 'number' ? localSize.value : GR_AVATAR_SIZE_PX[resolvedScaleSize.value]\n))\n\nconst style = computed(() => {\n  const px = `${sizePx.value}px`\n  // Кегль на корне, а не на span инициалов: так он достаётся и слотовому тексту.\n  return { width: px, height: px, fontSize: `${avatarFontSizePx(sizePx.value)}px` }\n})\n\n/**\n * Состояние картинки. Без него битая ссылка оставляла `v-if=\"src\"` истинным:\n * браузер рисовал сломанное изображение, а запасной вариант не показывался\n * никогда.\n */\ntype ImageState = 'loading' | 'loaded' | 'error'\n\nconst primaryState = ref<ImageState>('loading')\nconst fallbackState = ref<ImageState>('loading')\n\n// Новая ссылка не должна наследовать ошибку прошлой.\nwatch(() => props.src, () => {\n  primaryState.value = 'loading'\n})\nwatch(() => props.fallbackSrc, () => {\n  fallbackState.value = 'loading'\n})\n\nconst activeSrc = computed(() => {\n  if (props.src && primaryState.value !== 'error')\n    return props.src\n  if (props.fallbackSrc && fallbackState.value !== 'error')\n    return props.fallbackSrc\n  return undefined\n})\n\nconst isFallbackActive = computed(() => Boolean(activeSrc.value) && activeSrc.value !== props.src)\n\n// Скелет держит место, пока картинка едет: иначе ряд аватаров мигает пустотой.\nconst showSkeleton = computed(() => {\n  if (!activeSrc.value)\n    return false\n  return (isFallbackActive.value ? fallbackState.value : primaryState.value) === 'loading'\n})\n\nconst initials = computed(() => (props.name ? initialsFrom(props.name) : ''))\n\n// Пусто — когда нет ни картинки, ни слота, ни имени.\nconst showInitials = computed(() => !activeSrc.value && !slots.default && Boolean(initials.value))\n\nconst statusLabel = computed(() => (props.status\n  ? t(`gr.avatar.status.${props.status}`, props.status)\n  : undefined))\n\n/**\n * Доступное имя: `alt` сильнее всего, иначе имя участника.\n *\n * Когда есть картинка, имя несёт её `alt` — так привычнее потребителю и не\n * возникает двойного объявления. Без картинки роль и имя берёт на себя корень:\n * иначе аватар с инициалами остался бы для диктора пустым.\n */\nconst accessibleName = computed(() => props.alt ?? props.name ?? '')\n\nconst rootIsImage = computed(() => !activeSrc.value && accessibleName.value !== '')\n\nconst rootClass = computed(() => [\n  rootBaseClass,\n  grAvatarClass(resolvedShape.value),\n  props.status ? rootStatusClass : '',\n])\n\nfunction onError(kind: 'primary' | 'fallback'): void {\n  if (kind === 'primary')\n    primaryState.value = 'error'\n  else fallbackState.value = 'error'\n}\n\nfunction onLoad(kind: 'primary' | 'fallback'): void {\n  if (kind === 'primary')\n    primaryState.value = 'loaded'\n  else fallbackState.value = 'loaded'\n}\n</script>\n\n<template>\n  <span\n    data-gr-avatar\n    :style=\"style\"\n    :class=\"rootClass\"\n    :role=\"rootIsImage ? 'img' : undefined\"\n    :aria-label=\"rootIsImage ? accessibleName : undefined\"\n  >\n    <span :class=\"[mediaClass, status ? [mediaClipClass, grAvatarClass(resolvedShape)] : '']\">\n      <GrSkeleton\n        v-if=\"showSkeleton\"\n        data-gr-avatar-skeleton\n        width=\"100%\"\n        height=\"100%\"\n        :rounded=\"resolvedShape === 'circle' ? 'var(--gr-radius-full)' : 'var(--gr-avatar-square-radius, 10px)'\"\n      />\n\n      <img\n        v-if=\"activeSrc\"\n        :key=\"activeSrc\"\n        data-gr-avatar-image\n        :src=\"activeSrc\"\n        :alt=\"accessibleName\"\n        class=\"h-full w-full object-cover\"\n        :class=\"showSkeleton ? 'invisible absolute' : ''\"\n        @error=\"onError(isFallbackActive ? 'fallback' : 'primary')\"\n        @load=\"onLoad(isFallbackActive ? 'fallback' : 'primary')\"\n      >\n\n      <span v-else-if=\"showInitials\" data-gr-avatar-initials>{{ initials }}</span>\n\n      <slot v-else />\n    </span>\n\n    <template v-if=\"status\">\n      <span\n        data-gr-avatar-status\n        :class=\"[statusDotClass, statusToneClass[status]]\"\n        aria-hidden=\"true\"\n      />\n      <!-- Цвет точки смысл не передаёт: статус объявляется словом (WCAG 1.4.1). -->\n      <span data-gr-avatar-status-label class=\"sr-only\">{{ statusLabel }}</span>\n    </template>\n  </span>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject, ref, watch } from 'vue'\n\nimport GrSkeleton from '../GrSkeleton/GrSkeleton.vue'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { GrSizeWithPx } from '../shared/sizes'\n\nimport { GR_AVATAR_GROUP_KEY } from './avatarContext'\nimport {\n  avatarFontSizePx,\n  grAvatarClass,\n  initialsFrom,\n  mediaClass,\n  mediaClipClass,\n  rootBaseClass,\n  rootStatusClass,\n  statusDotClass,\n  statusToneClass,\n  type GrAvatarShape,\n  type GrAvatarStatus,\n} from './grAvatarStyles'\n\nexport type { GrAvatarShape, GrAvatarStatus } from './grAvatarStyles'\n\n/** Диаметр аватара для каждой ступени канонической шкалы. */\nconst GR_AVATAR_SIZE_PX = {\n  xs: 24,\n  sm: 32,\n  md: 40,\n  lg: 56,\n} as const\n\nexport interface GrAvatarProps {\n  /**\n   * Размер по канонической шкале (`xs|sm|md|lg`) — тогда работает\n   * `GrConfigProvider`. Число — escape-hatch: аватар нужен произвольного\n   * диаметра (24px в строке списка, 96px в профиле), и четыре ступени шкалы\n   * этого не закрывают.\n   */\n  size?: GrSizeWithPx\n  src?: string\n  /** Резервная картинка: показывается, когда `src` не загрузился. */\n  fallbackSrc?: string\n  alt?: string\n  /** Имя участника: даёт инициалы и доступное имя аватара. */\n  name?: string\n  shape?: GrAvatarShape\n  /** Статус участника. Точка декоративна — рядом идёт скрытая подпись. */\n  status?: GrAvatarStatus\n}\n\nconst props = withDefaults(defineProps<GrAvatarProps>(), {\n  size: undefined,\n  src: undefined,\n  fallbackSrc: undefined,\n  alt: undefined,\n  name: undefined,\n  // Дефолт живёт в резолвере: Vue подставил бы свой раньше, чем компонент\n  // заглянет в `GrConfigProvider`.\n  shape: undefined,\n  status: undefined,\n})\n\nconst slots = defineSlots<{\n  /** Содержимое вместо картинки и инициалов. */\n  default?: () => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\nconst group = inject(GR_AVATAR_GROUP_KEY, null)\n\n// Размер и форма группы сильнее провайдера, но слабее собственного пропа.\nconst localSize = computed(() => props.size ?? group?.size)\n\nconst resolvedScaleSize = useGrComponentSize(\n  () => (typeof localSize.value === 'number' ? undefined : localSize.value),\n  { component: 'GrAvatar' },\n)\n\nconst resolvedShape = useGrComponentProp(\n  'GrAvatar',\n  'shape',\n  () => props.shape ?? group?.shape,\n  'circle',\n)\n\nconst sizePx = computed(() => (\n  typeof localSize.value === 'number' ? localSize.value : GR_AVATAR_SIZE_PX[resolvedScaleSize.value]\n))\n\nconst style = computed(() => {\n  const px = `${sizePx.value}px`\n  // Кегль на корне, а не на span инициалов: так он достаётся и слотовому тексту.\n  return { width: px, height: px, fontSize: `${avatarFontSizePx(sizePx.value)}px` }\n})\n\n/**\n * Состояние картинки. Без него битая ссылка оставляла `v-if=\"src\"` истинным:\n * браузер рисовал сломанное изображение, а запасной вариант не показывался\n * никогда.\n */\ntype ImageState = 'loading' | 'loaded' | 'error'\n\nconst primaryState = ref<ImageState>('loading')\nconst fallbackState = ref<ImageState>('loading')\n\n// Новая ссылка не должна наследовать ошибку прошлой.\nwatch(() => props.src, () => {\n  primaryState.value = 'loading'\n})\nwatch(() => props.fallbackSrc, () => {\n  fallbackState.value = 'loading'\n})\n\nconst activeSrc = computed(() => {\n  if (props.src && primaryState.value !== 'error')\n    return props.src\n  if (props.fallbackSrc && fallbackState.value !== 'error')\n    return props.fallbackSrc\n  return undefined\n})\n\nconst isFallbackActive = computed(() => Boolean(activeSrc.value) && activeSrc.value !== props.src)\n\n// Скелет держит место, пока картинка едет: иначе ряд аватаров мигает пустотой.\nconst showSkeleton = computed(() => {\n  if (!activeSrc.value)\n    return false\n  return (isFallbackActive.value ? fallbackState.value : primaryState.value) === 'loading'\n})\n\nconst initials = computed(() => (props.name ? initialsFrom(props.name) : ''))\n\n// Пусто — когда нет ни картинки, ни слота, ни имени.\nconst showInitials = computed(() => !activeSrc.value && !slots.default && Boolean(initials.value))\n\nconst statusLabel = computed(() => (props.status\n  ? t(`gr.avatar.status.${props.status}`, props.status)\n  : undefined))\n\n/**\n * Доступное имя: `alt` сильнее всего, иначе имя участника.\n *\n * Когда есть картинка, имя несёт её `alt` — так привычнее потребителю и не\n * возникает двойного объявления. Без картинки роль и имя берёт на себя корень:\n * иначе аватар с инициалами остался бы для диктора пустым.\n */\nconst accessibleName = computed(() => props.alt ?? props.name ?? '')\n\nconst rootIsImage = computed(() => !activeSrc.value && accessibleName.value !== '')\n\nconst rootClass = computed(() => [\n  rootBaseClass,\n  grAvatarClass(resolvedShape.value),\n  props.status ? rootStatusClass : '',\n])\n\nfunction onError(kind: 'primary' | 'fallback'): void {\n  if (kind === 'primary')\n    primaryState.value = 'error'\n  else fallbackState.value = 'error'\n}\n\nfunction onLoad(kind: 'primary' | 'fallback'): void {\n  if (kind === 'primary')\n    primaryState.value = 'loaded'\n  else fallbackState.value = 'loaded'\n}\n</script>\n\n<template>\n  <span\n    data-gr-avatar\n    :style=\"style\"\n    :class=\"rootClass\"\n    :role=\"rootIsImage ? 'img' : undefined\"\n    :aria-label=\"rootIsImage ? accessibleName : undefined\"\n  >\n    <span :class=\"[mediaClass, status ? [mediaClipClass, grAvatarClass(resolvedShape)] : '']\">\n      <GrSkeleton\n        v-if=\"showSkeleton\"\n        data-gr-avatar-skeleton\n        width=\"100%\"\n        height=\"100%\"\n        :rounded=\"resolvedShape === 'circle' ? 'var(--gr-radius-full)' : 'var(--gr-avatar-square-radius, 10px)'\"\n      />\n\n      <img\n        v-if=\"activeSrc\"\n        :key=\"activeSrc\"\n        data-gr-avatar-image\n        :src=\"activeSrc\"\n        :alt=\"accessibleName\"\n        class=\"h-full w-full object-cover\"\n        :class=\"showSkeleton ? 'invisible absolute' : ''\"\n        @error=\"onError(isFallbackActive ? 'fallback' : 'primary')\"\n        @load=\"onLoad(isFallbackActive ? 'fallback' : 'primary')\"\n      >\n\n      <span v-else-if=\"showInitials\" data-gr-avatar-initials>{{ initials }}</span>\n\n      <slot v-else />\n    </span>\n\n    <template v-if=\"status\">\n      <span\n        data-gr-avatar-status\n        :class=\"[statusDotClass, statusToneClass[status]]\"\n        aria-hidden=\"true\"\n      />\n      <!-- Цвет точки смысл не передаёт: статус объявляется словом (WCAG 1.4.1). -->\n      <span data-gr-avatar-status-label class=\"sr-only\">{{ statusLabel }}</span>\n    </template>\n  </span>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrAvatarGroup — ряд аватаров со стекингом и счётчиком скрытых.\n *\n * Группа объявлена `role=\"group\"` с именем и числом участников: без этого\n * скринридер читает набор безымянных картинок и не понимает, что их больше,\n * чем видно.\n */\nimport { computed, provide, type VNode } from 'vue'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { GrSizeWithPx } from '../shared/sizes'\n\nimport { GR_AVATAR_GROUP_KEY } from './avatarContext'\nimport {\n  avatarFontSizePx,\n  grAvatarClass,\n  groupBaseClass,\n  groupItemClass,\n  groupOverflowClass,\n  rootBaseClass,\n  type GrAvatarShape,\n} from './grAvatarStyles'\n\nconst GR_AVATAR_GROUP_SIZE_PX = {\n  xs: 24,\n  sm: 32,\n  md: 40,\n  lg: 56,\n} as const\n\nexport interface GrAvatarGroupProps {\n  /** Размер и форма ряда: дети берут их из контекста. */\n  size?: GrSizeWithPx\n  shape?: GrAvatarShape\n  /** Сколько аватаров показывать; остальные сворачиваются в «+N». */\n  max?: number\n  /** Сколько участников всего, если в слоте лежит лишь часть. */\n  total?: number\n  /** Имя группы. Не задано — берётся из локали. */\n  ariaLabel?: string\n}\n\nconst props = withDefaults(defineProps<GrAvatarGroupProps>(), {\n  size: undefined,\n  shape: undefined,\n  max: undefined,\n  total: undefined,\n  ariaLabel: undefined,\n})\n\nconst slots = defineSlots<{\n  /** Аватары ряда. */\n  default?: () => VNode[]\n}>()\n\nconst { t } = useGranularityTranslations()\n\nprovide(GR_AVATAR_GROUP_KEY, {\n  get size() {\n    return props.size\n  },\n  get shape() {\n    return props.shape\n  },\n})\n\nconst children = computed(() => slots.default?.() ?? [])\n\n// `v-for` внутри слота приходит фрагментом — считаем его детей, иначе весь\n// список выглядел бы одним аватаром.\nconst items = computed<VNode[]>(() => children.value.flatMap((node) => {\n  const nested = node.children\n  return Array.isArray(nested) && typeof node.type === 'symbol' ? (nested as VNode[]) : [node]\n}))\n\nconst visible = computed(() => (props.max === undefined ? items.value : items.value.slice(0, Math.max(0, props.max))))\n\nconst hiddenCount = computed(() => {\n  const total = props.total ?? items.value.length\n  return Math.max(0, total - visible.value.length)\n})\n\nconst overflowSizePx = computed(() => (\n  typeof props.size === 'number' ? props.size : GR_AVATAR_GROUP_SIZE_PX[props.size ?? 'md']\n))\n\nconst overflowStyle = computed(() => {\n  const px = `${overflowSizePx.value}px`\n  return { width: px, height: px, fontSize: `${avatarFontSizePx(overflowSizePx.value)}px` }\n})\n\nconst groupLabel = computed(() => props.ariaLabel ?? t('gr.avatar.group', 'People'))\n\nconst accessibleLabel = computed(() => (hiddenCount.value > 0\n  ? `${groupLabel.value}, ${t('gr.avatar.groupOverflow', 'and {count} more', { count: hiddenCount.value, n: hiddenCount.value })}`\n  : groupLabel.value))\n</script>\n\n<template>\n  <div\n    data-gr-avatar-group\n    role=\"group\"\n    :aria-label=\"accessibleLabel\"\n    :class=\"groupBaseClass\"\n  >\n    <component\n      :is=\"node\"\n      v-for=\"(node, index) in visible\"\n      :key=\"index\"\n      :class=\"groupItemClass\"\n    />\n\n    <span\n      v-if=\"hiddenCount > 0\"\n      data-gr-avatar-group-overflow\n      aria-hidden=\"true\"\n      :class=\"[rootBaseClass, groupOverflowClass, groupItemClass, grAvatarClass(shape ?? 'circle')]\"\n      :style=\"overflowStyle\"\n    >+{{ hiddenCount }}</span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrAvatarGroup — ряд аватаров со стекингом и счётчиком скрытых.\n *\n * Группа объявлена `role=\"group\"` с именем и числом участников: без этого\n * скринридер читает набор безымянных картинок и не понимает, что их больше,\n * чем видно.\n */\nimport { computed, provide, type VNode } from 'vue'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { GrSizeWithPx } from '../shared/sizes'\n\nimport { GR_AVATAR_GROUP_KEY } from './avatarContext'\nimport {\n  avatarFontSizePx,\n  grAvatarClass,\n  groupBaseClass,\n  groupItemClass,\n  groupOverflowClass,\n  rootBaseClass,\n  type GrAvatarShape,\n} from './grAvatarStyles'\n\nconst GR_AVATAR_GROUP_SIZE_PX = {\n  xs: 24,\n  sm: 32,\n  md: 40,\n  lg: 56,\n} as const\n\nexport interface GrAvatarGroupProps {\n  /** Размер и форма ряда: дети берут их из контекста. */\n  size?: GrSizeWithPx\n  shape?: GrAvatarShape\n  /** Сколько аватаров показывать; остальные сворачиваются в «+N». */\n  max?: number\n  /** Сколько участников всего, если в слоте лежит лишь часть. */\n  total?: number\n  /** Имя группы. Не задано — берётся из локали. */\n  ariaLabel?: string\n}\n\nconst props = withDefaults(defineProps<GrAvatarGroupProps>(), {\n  size: undefined,\n  shape: undefined,\n  max: undefined,\n  total: undefined,\n  ariaLabel: undefined,\n})\n\nconst slots = defineSlots<{\n  /** Аватары ряда. */\n  default?: () => VNode[]\n}>()\n\nconst { t } = useGranularityTranslations()\n\nprovide(GR_AVATAR_GROUP_KEY, {\n  get size() {\n    return props.size\n  },\n  get shape() {\n    return props.shape\n  },\n})\n\nconst children = computed(() => slots.default?.() ?? [])\n\n// `v-for` внутри слота приходит фрагментом — считаем его детей, иначе весь\n// список выглядел бы одним аватаром.\nconst items = computed<VNode[]>(() => children.value.flatMap((node) => {\n  const nested = node.children\n  return Array.isArray(nested) && typeof node.type === 'symbol' ? (nested as VNode[]) : [node]\n}))\n\nconst visible = computed(() => (props.max === undefined ? items.value : items.value.slice(0, Math.max(0, props.max))))\n\nconst hiddenCount = computed(() => {\n  const total = props.total ?? items.value.length\n  return Math.max(0, total - visible.value.length)\n})\n\nconst overflowSizePx = computed(() => (\n  typeof props.size === 'number' ? props.size : GR_AVATAR_GROUP_SIZE_PX[props.size ?? 'md']\n))\n\nconst overflowStyle = computed(() => {\n  const px = `${overflowSizePx.value}px`\n  return { width: px, height: px, fontSize: `${avatarFontSizePx(overflowSizePx.value)}px` }\n})\n\nconst groupLabel = computed(() => props.ariaLabel ?? t('gr.avatar.group', 'People'))\n\nconst accessibleLabel = computed(() => (hiddenCount.value > 0\n  ? `${groupLabel.value}, ${t('gr.avatar.groupOverflow', 'and {count} more', { count: hiddenCount.value, n: hiddenCount.value })}`\n  : groupLabel.value))\n</script>\n\n<template>\n  <div\n    data-gr-avatar-group\n    role=\"group\"\n    :aria-label=\"accessibleLabel\"\n    :class=\"groupBaseClass\"\n  >\n    <component\n      :is=\"node\"\n      v-for=\"(node, index) in visible\"\n      :key=\"index\"\n      :class=\"groupItemClass\"\n    />\n\n    <span\n      v-if=\"hiddenCount > 0\"\n      data-gr-avatar-group-overflow\n      aria-hidden=\"true\"\n      :class=\"[rootBaseClass, groupOverflowClass, groupItemClass, grAvatarClass(shape ?? 'circle')]\"\n      :style=\"overflowStyle\"\n    >+{{ hiddenCount }}</span>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/GrBadge/chunks/{GrBadge-BsoocpF-.js → GrBadge-D2MfThPz.js}

@@ -37,6 +37,6 @@ var GrBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			return openBlock(), createElementBlock("span", { class: normalizeClass(["gr-badge inline-block border whitespace-nowrap leading-none", className.value]) }, [createElementVNode("span", _hoisted_1, [createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])])], 2);
 		};
 	}
-}), [["__scopeId", "data-v-284fb1ee"]]);
+}), [["__scopeId", "data-v-bc95969b"]]);
 //#endregion
 export { GrBadge_default as t };

package/dist/components/GrBadge/chunks/GrBadge-D2MfThPz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrBadge-D2MfThPz.js","names":[],"sources":["../../../../src/components/GrBadge/GrBadge.vue","../../../../src/components/GrBadge/GrBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue'\n\nimport { useGrComponentProp } from '../GrConfigProvider/context'\n\nexport type { GrBadgeRadius, GrBadgeSize, GrBadgeTone } from './grBadgeStyles'\n\nimport { warnRenamedProp } from '../shared/renamedProp'\n\nimport {\n  grBadgeClass,\n  type GrBadgeRadius,\n  type GrBadgeSize,\n  type GrBadgeTone,\n} from './grBadgeStyles'\n\nexport interface GrBadgeProps {\n  tone?: GrBadgeTone\n  dark?: boolean\n  size?: GrBadgeSize\n  radius?: GrBadgeRadius\n}\n\nconst props = withDefaults(\n  defineProps<GrBadgeProps>(),\n  {\n    // `tone`/`size`/`radius` настраиваются через `GrConfigProvider`, поэтому\n    // их дефолты живут в резолверах ниже, а не в `withDefaults`.\n    tone: undefined,\n    dark: false,\n    size: undefined,\n    radius: undefined,\n  },\n)\n\n// Эффективные значения: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedTone = useGrComponentProp('GrBadge', 'tone', () => props.tone, 'neutral')\nconst resolvedSize = useGrComponentProp('GrBadge', 'size', () => props.size, 'sm')\nconst resolvedRadius = useGrComponentProp('GrBadge', 'radius', () => props.radius, 'round')\n\n// `variant` переименован в `tone`: незнакомый атрибут Vue сажает на корневой\n// узел, поэтому старое имя не роняет ни типы, ни рантайм — компонент молча\n// рисуется дефолтным тоном.\nwarnRenamedProp('GrBadge', useAttrs(), { variant: 'tone' })\n\nconst className = computed(() => {\n  return grBadgeClass({\n    tone: resolvedTone.value,\n    dark: props.dark,\n    size: resolvedSize.value,\n    radius: resolvedRadius.value,\n  })\n})\n\ndefineSlots<{\n  /** Содержимое метки. */\n  default?: () => any\n}>()\n</script>\n\n<template>\n  <span\n      class=\"gr-badge inline-block border whitespace-nowrap leading-none\"\n      :class=\"className\"\n  >\n    <span class=\"gr-badge__label\">\n      <span class=\"gr-badge__text\">\n        <slot />\n      </span>\n    </span>\n  </span>\n</template>\n\n<style scoped>\n/*\n * Оптически центрируем текст по вертикали независимо от регистра,\n * не уменьшая высоту самого бейджа.\n *\n * Высоту держит обёртка `.gr-badge__label` (`min-height: 1lh` — высота\n * line-box при `leading-none`), а текст (`.gr-badge__text`) обрезается до\n * cap-height и центрируется внутри этой высоты через flex.\n *\n * Обрезка обязана жить на вложенном узле, а не на самом тексте: `text-box-trim`\n * уменьшает line-box, и повесь его прямо на текст — вместе с ним просядет\n * высота контента, а за ней и весь бейдж.\n */\n.gr-badge__label {\n  display: flex;\n  align-items: center;\n  min-height: 1lh;\n}\n\n.gr-badge__text {\n  display: block;\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n  /* Шорткат для браузеров с поддержкой нового синтаксиса. */\n  text-box: trim-both cap alphabetic;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue'\n\nimport { useGrComponentProp } from '../GrConfigProvider/context'\n\nexport type { GrBadgeRadius, GrBadgeSize, GrBadgeTone } from './grBadgeStyles'\n\nimport { warnRenamedProp } from '../shared/renamedProp'\n\nimport {\n  grBadgeClass,\n  type GrBadgeRadius,\n  type GrBadgeSize,\n  type GrBadgeTone,\n} from './grBadgeStyles'\n\nexport interface GrBadgeProps {\n  tone?: GrBadgeTone\n  dark?: boolean\n  size?: GrBadgeSize\n  radius?: GrBadgeRadius\n}\n\nconst props = withDefaults(\n  defineProps<GrBadgeProps>(),\n  {\n    // `tone`/`size`/`radius` настраиваются через `GrConfigProvider`, поэтому\n    // их дефолты живут в резолверах ниже, а не в `withDefaults`.\n    tone: undefined,\n    dark: false,\n    size: undefined,\n    radius: undefined,\n  },\n)\n\n// Эффективные значения: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedTone = useGrComponentProp('GrBadge', 'tone', () => props.tone, 'neutral')\nconst resolvedSize = useGrComponentProp('GrBadge', 'size', () => props.size, 'sm')\nconst resolvedRadius = useGrComponentProp('GrBadge', 'radius', () => props.radius, 'round')\n\n// `variant` переименован в `tone`: незнакомый атрибут Vue сажает на корневой\n// узел, поэтому старое имя не роняет ни типы, ни рантайм — компонент молча\n// рисуется дефолтным тоном.\nwarnRenamedProp('GrBadge', useAttrs(), { variant: 'tone' })\n\nconst className = computed(() => {\n  return grBadgeClass({\n    tone: resolvedTone.value,\n    dark: props.dark,\n    size: resolvedSize.value,\n    radius: resolvedRadius.value,\n  })\n})\n\ndefineSlots<{\n  /** Содержимое метки. */\n  default?: () => any\n}>()\n</script>\n\n<template>\n  <span\n      class=\"gr-badge inline-block border whitespace-nowrap leading-none\"\n      :class=\"className\"\n  >\n    <span class=\"gr-badge__label\">\n      <span class=\"gr-badge__text\">\n        <slot />\n      </span>\n    </span>\n  </span>\n</template>\n\n<style scoped>\n/*\n * Оптически центрируем текст по вертикали независимо от регистра,\n * не уменьшая высоту самого бейджа.\n *\n * Высоту держит обёртка `.gr-badge__label` (`min-height: 1lh` — высота\n * line-box при `leading-none`), а текст (`.gr-badge__text`) обрезается до\n * cap-height и центрируется внутри этой высоты через flex.\n *\n * Обрезка обязана жить на вложенном узле, а не на самом тексте: `text-box-trim`\n * уменьшает line-box, и повесь его прямо на текст — вместе с ним просядет\n * высота контента, а за ней и весь бейдж.\n */\n.gr-badge__label {\n  display: flex;\n  align-items: center;\n  min-height: 1lh;\n}\n\n.gr-badge__text {\n  display: block;\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n  /* Шорткат для браузеров с поддержкой нового синтаксиса. */\n  text-box: trim-both cap alphabetic;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,QAAQ;EAad,MAAM,eAAe,mBAAmB,WAAW,cAAc,MAAM,MAAM,SAAS;EACtF,MAAM,eAAe,mBAAmB,WAAW,cAAc,MAAM,MAAM,IAAI;EACjF,MAAM,iBAAiB,mBAAmB,WAAW,gBAAgB,MAAM,QAAQ,OAAO;EAK1F,gBAAgB,WAAW,SAAS,GAAG,EAAE,SAAS,OAAO,CAAC;EAE1D,MAAM,YAAY,eAAe;GAC/B,OAAO,aAAa;IAClB,MAAM,aAAa;IACnB,MAAM,MAAM;IACZ,MAAM,aAAa;IACnB,QAAQ,eAAe;GACzB,CAAC;EACH,CAAC;;uBASC,mBASO,QAAA,EARH,OAAK,eAAA,CAAC,+DACE,UAAA,KAAS,CAAA,EAAA,GAAA,CAEnB,mBAIO,QAJP,YAIO,CAHL,mBAEO,QAFP,YAEO,CADL,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA"}

package/dist/components/GrBadge/index.js

@@ -1,4 +1,4 @@
-import { t as GrBadge_default } from "./chunks/GrBadge-BsoocpF-.js";
+import { t as GrBadge_default } from "./chunks/GrBadge-D2MfThPz.js";
 import { t as grBadgeSafelist } from "../../chunks/safelist-CtiHPgrj.js";
 import { t as grBadgeConfig } from "../../chunks/config-g8-JGZ_Y.js";
 export { GrBadge_default as GrBadge, GrBadge_default as default, grBadgeConfig, grBadgeSafelist };

package/dist/components/GrBadge/styles.css

@@ -1 +1 @@
-.gr-badge__label[data-v-284fb1ee]{align-items:center;min-height:1lh;display:flex}.gr-badge__text[data-v-284fb1ee]{text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;display:block}
+.gr-badge__label[data-v-bc95969b]{align-items:center;min-height:1lh;display:flex}.gr-badge__text[data-v-bc95969b]{text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;display:block}

package/dist/components/GrBadgeWrap/chunks/GrBadgeWrap-B-A3PRkE.js.map

@@ -1 +1 @@
-{"version":3,"file":"GrBadgeWrap-B-A3PRkE.js","names":[],"sources":["../../../../src/components/GrBadgeWrap/GrBadgeWrap.vue","../../../../src/components/GrBadgeWrap/GrBadgeWrap.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n  countBaseClass,\n  dotBaseClass,\n  dotPlacementClass,\n  formatBadgeValue,\n  isBadgeWrapPulse,\n  placementClass,\n  rootClass,\n  toneClass,\n  type GrBadgeWrapPlacement,\n  type GrBadgeWrapTone,\n} from './grBadgeWrapStyles'\n\nexport type { GrBadgeWrapPlacement, GrBadgeWrapTone } from './grBadgeWrapStyles'\n\n/**\n * GrBadgeWrap — обёртка, вешающая на потомка счётчик или точку-индикатор.\n *\n * Число объявляется скринридеру: «3» без единицы измерения ничего не значит,\n * поэтому рядом с бейджем идёт визуально скрытая подпись.\n */\nexport interface GrBadgeWrapProps {\n  value?: string | number\n  /** Точка вместо числа: чистая декорация, если не задан `ariaLabel`. */\n  dot?: boolean\n  /** Порог: значения больше него рисуются как «{max}+». */\n  max?: number\n  /** Показывать ли нулевое значение. По умолчанию ноль скрыт. */\n  showZero?: boolean\n  tone?: GrBadgeWrapTone\n  placement?: GrBadgeWrapPlacement\n  /** Подпись счётчика для скринридера. Не задана — берётся из локали. */\n  ariaLabel?: string\n  /** Отмечать ли появление и рост **счётчика** анимацией. Точке анимировать нечего. */\n  animate?: boolean\n}\n\nconst props = withDefaults(defineProps<GrBadgeWrapProps>(), {\n  value: undefined,\n  dot: false,\n  max: undefined,\n  showZero: false,\n  tone: 'danger',\n  placement: 'top-right',\n  ariaLabel: undefined,\n  animate: false,\n})\n\nconst { t } = useGranularityTranslations()\n\nconst showCount = computed(() => {\n  if (props.dot || props.value === undefined) return false\n  return props.value !== 0 || props.showZero\n})\n\n/** Видимый текст: «120» при `max=99` превращается в «99+». */\nconst displayValue = computed(() => formatBadgeValue(props.value ?? '', props.max))\n\n/**\n * Озвучивается настоящее значение, а не обрезанное: «99 плюс» пользователю\n * ничего не говорит, «120 непрочитанных» — говорит.\n */\nconst countLabel = computed(() => props.ariaLabel\n  ?? t('gr.badgeWrap.count', '{count} new', { count: props.value, n: props.value }))\n\nconst pulsing = ref(false)\n\n/** Значение на экране: скрытый счётчик — то же самое, что его отсутствие. */\nconst visibleValue = computed(() => showCount.value ? props.value : undefined)\n\n/**\n * Пока анимация играет, новое изменение её не перезапускает: счётчик меняется\n * пачкой (пять писем за секунду), и «поп» на каждое превратился бы в мельтешение.\n * Серия за время анимации даёт ровно один «поп».\n *\n * Флаг отпускает `animationend`, а не таймер: длительность живёт в CSS-токене,\n * и число в скрипте было бы вторым источником правды. Под\n * `prefers-reduced-motion` событие тоже приходит — глобальный кламп сжимает\n * анимацию до `0.01ms`, а не выключает её (`docs/motion.md`).\n */\nwatch(visibleValue, (next, prev) => {\n  if (!props.animate || pulsing.value) return\n  if (isBadgeWrapPulse(prev, next)) pulsing.value = true\n})\n\n// Ушедший с экрана счётчик `animationend` уже не пришлёт, и без сброса\n// следующее его появление осталось бы без анимации навсегда.\nwatch(showCount, (visible) => {\n  if (!visible) pulsing.value = false\n})\n\ndefineSlots<{\n  /** Элемент, к которому крепится метка. */\n  default?: () => any\n}>()\n\n</script>\n\n<template>\n  <span :class=\"rootClass\">\n    <slot />\n\n    <template v-if=\"dot\">\n      <span\n        data-gr-badge-wrap-dot\n        :class=\"[dotBaseClass, dotPlacementClass[placement], toneClass[tone]]\"\n        aria-hidden=\"true\"\n      />\n      <!-- Точка сама по себе смысла не несёт; подпись появляется только когда\n           потребитель объяснил, о чём она. -->\n      <span v-if=\"ariaLabel\" data-gr-badge-wrap-label class=\"sr-only\">{{ ariaLabel }}</span>\n    </template>\n\n    <template v-else-if=\"showCount\">\n      <span\n        data-gr-badge-wrap-count\n        :data-gr-badge-wrap-pop=\"pulsing || undefined\"\n        :class=\"[countBaseClass, placementClass[placement], toneClass[tone]]\"\n        aria-hidden=\"true\"\n        @animationend=\"pulsing = false\"\n      >{{ displayValue }}</span>\n      <span data-gr-badge-wrap-label class=\"sr-only\">{{ countLabel }}</span>\n    </template>\n  </span>\n</template>\n\n<style>\n@keyframes gr-badge-wrap-pop {\n  0% {\n    transform: scale(0.4);\n  }\n  60% {\n    transform: scale(1.12);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n/*\n * `animation-fill-mode` не задан намеренно: под `prefers-reduced-motion` анимация\n * доигрывает за `0.01ms` и возвращает элемент в исходный кадр — бейдж на месте\n * и в нужном размере. Именно поэтому компоненту хватает глобального клампа и не\n * нужен собственный reduce-блок (`docs/motion.md`).\n */\n[data-gr-badge-wrap-count][data-gr-badge-wrap-pop] {\n  animation: gr-badge-wrap-pop var(--gr-duration-base) var(--gr-ease-out);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n  countBaseClass,\n  dotBaseClass,\n  dotPlacementClass,\n  formatBadgeValue,\n  isBadgeWrapPulse,\n  placementClass,\n  rootClass,\n  toneClass,\n  type GrBadgeWrapPlacement,\n  type GrBadgeWrapTone,\n} from './grBadgeWrapStyles'\n\nexport type { GrBadgeWrapPlacement, GrBadgeWrapTone } from './grBadgeWrapStyles'\n\n/**\n * GrBadgeWrap — обёртка, вешающая на потомка счётчик или точку-индикатор.\n *\n * Число объявляется скринридеру: «3» без единицы измерения ничего не значит,\n * поэтому рядом с бейджем идёт визуально скрытая подпись.\n */\nexport interface GrBadgeWrapProps {\n  value?: string | number\n  /** Точка вместо числа: чистая декорация, если не задан `ariaLabel`. */\n  dot?: boolean\n  /** Порог: значения больше него рисуются как «{max}+». */\n  max?: number\n  /** Показывать ли нулевое значение. По умолчанию ноль скрыт. */\n  showZero?: boolean\n  tone?: GrBadgeWrapTone\n  placement?: GrBadgeWrapPlacement\n  /** Подпись счётчика для скринридера. Не задана — берётся из локали. */\n  ariaLabel?: string\n  /** Отмечать ли появление и рост **счётчика** анимацией. Точке анимировать нечего. */\n  animate?: boolean\n}\n\nconst props = withDefaults(defineProps<GrBadgeWrapProps>(), {\n  value: undefined,\n  dot: false,\n  max: undefined,\n  showZero: false,\n  tone: 'danger',\n  placement: 'top-right',\n  ariaLabel: undefined,\n  animate: false,\n})\n\nconst { t } = useGranularityTranslations()\n\nconst showCount = computed(() => {\n  if (props.dot || props.value === undefined) return false\n  return props.value !== 0 || props.showZero\n})\n\n/** Видимый текст: «120» при `max=99` превращается в «99+». */\nconst displayValue = computed(() => formatBadgeValue(props.value ?? '', props.max))\n\n/**\n * Озвучивается настоящее значение, а не обрезанное: «99 плюс» пользователю\n * ничего не говорит, «120 непрочитанных» — говорит.\n */\nconst countLabel = computed(() => props.ariaLabel\n  ?? t('gr.badgeWrap.count', '{count} new', { count: props.value, n: props.value }))\n\nconst pulsing = ref(false)\n\n/** Значение на экране: скрытый счётчик — то же самое, что его отсутствие. */\nconst visibleValue = computed(() => showCount.value ? props.value : undefined)\n\n/**\n * Пока анимация играет, новое изменение её не перезапускает: счётчик меняется\n * пачкой (пять писем за секунду), и «поп» на каждое превратился бы в мельтешение.\n * Серия за время анимации даёт ровно один «поп».\n *\n * Флаг отпускает `animationend`, а не таймер: длительность живёт в CSS-токене,\n * и число в скрипте было бы вторым источником правды. Под\n * `prefers-reduced-motion` событие тоже приходит — глобальный кламп сжимает\n * анимацию до `0.01ms`, а не выключает её (`docs/motion.md`).\n */\nwatch(visibleValue, (next, prev) => {\n  if (!props.animate || pulsing.value) return\n  if (isBadgeWrapPulse(prev, next)) pulsing.value = true\n})\n\n// Ушедший с экрана счётчик `animationend` уже не пришлёт, и без сброса\n// следующее его появление осталось бы без анимации навсегда.\nwatch(showCount, (visible) => {\n  if (!visible) pulsing.value = false\n})\n\ndefineSlots<{\n  /** Элемент, к которому крепится метка. */\n  default?: () => any\n}>()\n\n</script>\n\n<template>\n  <span :class=\"rootClass\">\n    <slot />\n\n    <template v-if=\"dot\">\n      <span\n        data-gr-badge-wrap-dot\n        :class=\"[dotBaseClass, dotPlacementClass[placement], toneClass[tone]]\"\n        aria-hidden=\"true\"\n      />\n      <!-- Точка сама по себе смысла не несёт; подпись появляется только когда\n           потребитель объяснил, о чём она. -->\n      <span v-if=\"ariaLabel\" data-gr-badge-wrap-label class=\"sr-only\">{{ ariaLabel }}</span>\n    </template>\n\n    <template v-else-if=\"showCount\">\n      <span\n        data-gr-badge-wrap-count\n        :data-gr-badge-wrap-pop=\"pulsing || undefined\"\n        :class=\"[countBaseClass, placementClass[placement], toneClass[tone]]\"\n        aria-hidden=\"true\"\n        @animationend=\"pulsing = false\"\n      >{{ displayValue }}</span>\n      <span data-gr-badge-wrap-label class=\"sr-only\">{{ countLabel }}</span>\n    </template>\n  </span>\n</template>\n\n<style>\n@keyframes gr-badge-wrap-pop {\n  0% {\n    transform: scale(0.4);\n  }\n  60% {\n    transform: scale(1.12);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n/*\n * `animation-fill-mode` не задан намеренно: под `prefers-reduced-motion` анимация\n * доигрывает за `0.01ms` и возвращает элемент в исходный кадр — бейдж на месте\n * и в нужном размере. Именно поэтому компоненту хватает глобального клампа и не\n * нужен собственный reduce-блок (`docs/motion.md`).\n */\n[data-gr-badge-wrap-count][data-gr-badge-wrap-pop] {\n  animation: gr-badge-wrap-pop var(--gr-duration-base) var(--gr-ease-out);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CA,MAAM,QAAQ;EAWd,MAAM,EAAE,MAAM,2BAA2B;EAEzC,MAAM,YAAY,eAAe;GAC/B,IAAI,MAAM,OAAO,MAAM,UAAU,KAAA,GAAW,OAAO;GACnD,OAAO,MAAM,UAAU,KAAK,MAAM;EACpC,CAAC;;EAGD,MAAM,eAAe,eAAe,iBAAiB,MAAM,SAAS,IAAI,MAAM,GAAG,CAAC;;;;;EAMlF,MAAM,aAAa,eAAe,MAAM,aACnC,EAAE,sBAAsB,eAAe;GAAE,OAAO,MAAM;GAAO,GAAG,MAAM;EAAM,CAAC,CAAC;EAEnF,MAAM,UAAU,IAAI,KAAK;;;;;;;;;;;EAezB,MAZqB,eAAe,UAAU,QAAQ,MAAM,QAAQ,KAAA,CAY9D,IAAe,MAAM,SAAS;GAClC,IAAI,CAAC,MAAM,WAAW,QAAQ,OAAO;GACrC,IAAI,iBAAiB,MAAM,IAAI,GAAG,QAAQ,QAAQ;EACpD,CAAC;EAID,MAAM,YAAY,YAAY;GAC5B,IAAI,CAAC,SAAS,QAAQ,QAAQ;EAChC,CAAC;;uBAUC,mBAwBO,QAAA,EAxBA,OAAK,eAAE,MAAA,SAAA,CAAS,EAAA,GAAA,CACrB,WAAQ,KAAA,QAAA,SAAA,GAEQ,QAAA,OAAA,UAAA,GAAhB,mBASW,UAAA,EAAA,KAAA,EAAA,GAAA,CART,mBAIE,QAAA;IAHA,0BAAA;IACC,OAAK,eAAA;KAAG,MAAA,YAAA;KAAc,MAAA,iBAAA,CAAiB,CAAC,QAAA;KAAY,MAAA,SAAA,CAAS,CAAC,QAAA;IAAI,CAAA;IACnE,eAAY;gBAIF,QAAA,aAAA,UAAA,GAAZ,mBAAsF,QAAtF,YAAsF,gBAAnB,QAAA,SAAS,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,EAAA,KAGzD,UAAA,SAAA,UAAA,GAArB,mBASW,UAAA,EAAA,KAAA,EAAA,GAAA,CART,mBAM0B,QAAA;IALxB,4BAAA;IACC,0BAAwB,QAAA,SAAW,KAAA;IACnC,OAAK,eAAA;KAAG,MAAA,cAAA;KAAgB,MAAA,cAAA,CAAc,CAAC,QAAA;KAAY,MAAA,SAAA,CAAS,CAAC,QAAA;IAAI,CAAA;IAClE,eAAY;IACX,gBAAY,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,QAAO;sBACpB,aAAA,KAAY,GAAA,IAAA,UAAA,GAChB,mBAAsE,QAAtE,YAAsE,gBAApB,WAAA,KAAU,GAAA,CAAA,CAAA,GAAA,EAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"GrBadgeWrap-B-A3PRkE.js","names":[],"sources":["../../../../src/components/GrBadgeWrap/GrBadgeWrap.vue","../../../../src/components/GrBadgeWrap/GrBadgeWrap.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n  countBaseClass,\n  dotBaseClass,\n  dotPlacementClass,\n  formatBadgeValue,\n  isBadgeWrapPulse,\n  placementClass,\n  rootClass,\n  toneClass,\n  type GrBadgeWrapPlacement,\n  type GrBadgeWrapTone,\n} from './grBadgeWrapStyles'\n\nexport type { GrBadgeWrapPlacement, GrBadgeWrapTone } from './grBadgeWrapStyles'\n\n/**\n * GrBadgeWrap — обёртка, вешающая на потомка счётчик или точку-индикатор.\n *\n * Число объявляется скринридеру: «3» без единицы измерения ничего не значит,\n * поэтому рядом с бейджем идёт визуально скрытая подпись.\n */\nexport interface GrBadgeWrapProps {\n  value?: string | number\n  /** Точка вместо числа: чистая декорация, если не задан `ariaLabel`. */\n  dot?: boolean\n  /** Порог: значения больше него рисуются как «{max}+». */\n  max?: number\n  /** Показывать ли нулевое значение. По умолчанию ноль скрыт. */\n  showZero?: boolean\n  tone?: GrBadgeWrapTone\n  placement?: GrBadgeWrapPlacement\n  /** Подпись счётчика для скринридера. Не задана — берётся из локали. */\n  ariaLabel?: string\n  /** Отмечать ли появление и рост **счётчика** анимацией. Точке анимировать нечего. */\n  animate?: boolean\n}\n\nconst props = withDefaults(defineProps<GrBadgeWrapProps>(), {\n  value: undefined,\n  dot: false,\n  max: undefined,\n  showZero: false,\n  tone: 'danger',\n  placement: 'top-right',\n  ariaLabel: undefined,\n  animate: false,\n})\n\nconst { t } = useGranularityTranslations()\n\nconst showCount = computed(() => {\n  if (props.dot || props.value === undefined)\n    return false\n  return props.value !== 0 || props.showZero\n})\n\n/** Видимый текст: «120» при `max=99` превращается в «99+». */\nconst displayValue = computed(() => formatBadgeValue(props.value ?? '', props.max))\n\n/**\n * Озвучивается настоящее значение, а не обрезанное: «99 плюс» пользователю\n * ничего не говорит, «120 непрочитанных» — говорит.\n */\nconst countLabel = computed(() => props.ariaLabel\n  ?? t('gr.badgeWrap.count', '{count} new', { count: props.value, n: props.value }))\n\nconst pulsing = ref(false)\n\n/** Значение на экране: скрытый счётчик — то же самое, что его отсутствие. */\nconst visibleValue = computed(() => showCount.value ? props.value : undefined)\n\n/**\n * Пока анимация играет, новое изменение её не перезапускает: счётчик меняется\n * пачкой (пять писем за секунду), и «поп» на каждое превратился бы в мельтешение.\n * Серия за время анимации даёт ровно один «поп».\n *\n * Флаг отпускает `animationend`, а не таймер: длительность живёт в CSS-токене,\n * и число в скрипте было бы вторым источником правды. Под\n * `prefers-reduced-motion` событие тоже приходит — глобальный кламп сжимает\n * анимацию до `0.01ms`, а не выключает её (`docs/motion.md`).\n */\nwatch(visibleValue, (next, prev) => {\n  if (!props.animate || pulsing.value)\n    return\n  if (isBadgeWrapPulse(prev, next))\n    pulsing.value = true\n})\n\n// Ушедший с экрана счётчик `animationend` уже не пришлёт, и без сброса\n// следующее его появление осталось бы без анимации навсегда.\nwatch(showCount, (visible) => {\n  if (!visible)\n    pulsing.value = false\n})\n\ndefineSlots<{\n  /** Элемент, к которому крепится метка. */\n  default?: () => any\n}>()\n</script>\n\n<template>\n  <span :class=\"rootClass\">\n    <slot />\n\n    <template v-if=\"dot\">\n      <span\n        data-gr-badge-wrap-dot\n        :class=\"[dotBaseClass, dotPlacementClass[placement], toneClass[tone]]\"\n        aria-hidden=\"true\"\n      />\n      <!-- Точка сама по себе смысла не несёт; подпись появляется только когда\n           потребитель объяснил, о чём она. -->\n      <span v-if=\"ariaLabel\" data-gr-badge-wrap-label class=\"sr-only\">{{ ariaLabel }}</span>\n    </template>\n\n    <template v-else-if=\"showCount\">\n      <span\n        data-gr-badge-wrap-count\n        :data-gr-badge-wrap-pop=\"pulsing || undefined\"\n        :class=\"[countBaseClass, placementClass[placement], toneClass[tone]]\"\n        aria-hidden=\"true\"\n        @animationend=\"pulsing = false\"\n      >{{ displayValue }}</span>\n      <span data-gr-badge-wrap-label class=\"sr-only\">{{ countLabel }}</span>\n    </template>\n  </span>\n</template>\n\n<style>\n@keyframes gr-badge-wrap-pop {\n  0% {\n    transform: scale(0.4);\n  }\n  60% {\n    transform: scale(1.12);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n/*\n * `animation-fill-mode` не задан намеренно: под `prefers-reduced-motion` анимация\n * доигрывает за `0.01ms` и возвращает элемент в исходный кадр — бейдж на месте\n * и в нужном размере. Именно поэтому компоненту хватает глобального клампа и не\n * нужен собственный reduce-блок (`docs/motion.md`).\n */\n[data-gr-badge-wrap-count][data-gr-badge-wrap-pop] {\n  animation: gr-badge-wrap-pop var(--gr-duration-base) var(--gr-ease-out);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n  countBaseClass,\n  dotBaseClass,\n  dotPlacementClass,\n  formatBadgeValue,\n  isBadgeWrapPulse,\n  placementClass,\n  rootClass,\n  toneClass,\n  type GrBadgeWrapPlacement,\n  type GrBadgeWrapTone,\n} from './grBadgeWrapStyles'\n\nexport type { GrBadgeWrapPlacement, GrBadgeWrapTone } from './grBadgeWrapStyles'\n\n/**\n * GrBadgeWrap — обёртка, вешающая на потомка счётчик или точку-индикатор.\n *\n * Число объявляется скринридеру: «3» без единицы измерения ничего не значит,\n * поэтому рядом с бейджем идёт визуально скрытая подпись.\n */\nexport interface GrBadgeWrapProps {\n  value?: string | number\n  /** Точка вместо числа: чистая декорация, если не задан `ariaLabel`. */\n  dot?: boolean\n  /** Порог: значения больше него рисуются как «{max}+». */\n  max?: number\n  /** Показывать ли нулевое значение. По умолчанию ноль скрыт. */\n  showZero?: boolean\n  tone?: GrBadgeWrapTone\n  placement?: GrBadgeWrapPlacement\n  /** Подпись счётчика для скринридера. Не задана — берётся из локали. */\n  ariaLabel?: string\n  /** Отмечать ли появление и рост **счётчика** анимацией. Точке анимировать нечего. */\n  animate?: boolean\n}\n\nconst props = withDefaults(defineProps<GrBadgeWrapProps>(), {\n  value: undefined,\n  dot: false,\n  max: undefined,\n  showZero: false,\n  tone: 'danger',\n  placement: 'top-right',\n  ariaLabel: undefined,\n  animate: false,\n})\n\nconst { t } = useGranularityTranslations()\n\nconst showCount = computed(() => {\n  if (props.dot || props.value === undefined)\n    return false\n  return props.value !== 0 || props.showZero\n})\n\n/** Видимый текст: «120» при `max=99` превращается в «99+». */\nconst displayValue = computed(() => formatBadgeValue(props.value ?? '', props.max))\n\n/**\n * Озвучивается настоящее значение, а не обрезанное: «99 плюс» пользователю\n * ничего не говорит, «120 непрочитанных» — говорит.\n */\nconst countLabel = computed(() => props.ariaLabel\n  ?? t('gr.badgeWrap.count', '{count} new', { count: props.value, n: props.value }))\n\nconst pulsing = ref(false)\n\n/** Значение на экране: скрытый счётчик — то же самое, что его отсутствие. */\nconst visibleValue = computed(() => showCount.value ? props.value : undefined)\n\n/**\n * Пока анимация играет, новое изменение её не перезапускает: счётчик меняется\n * пачкой (пять писем за секунду), и «поп» на каждое превратился бы в мельтешение.\n * Серия за время анимации даёт ровно один «поп».\n *\n * Флаг отпускает `animationend`, а не таймер: длительность живёт в CSS-токене,\n * и число в скрипте было бы вторым источником правды. Под\n * `prefers-reduced-motion` событие тоже приходит — глобальный кламп сжимает\n * анимацию до `0.01ms`, а не выключает её (`docs/motion.md`).\n */\nwatch(visibleValue, (next, prev) => {\n  if (!props.animate || pulsing.value)\n    return\n  if (isBadgeWrapPulse(prev, next))\n    pulsing.value = true\n})\n\n// Ушедший с экрана счётчик `animationend` уже не пришлёт, и без сброса\n// следующее его появление осталось бы без анимации навсегда.\nwatch(showCount, (visible) => {\n  if (!visible)\n    pulsing.value = false\n})\n\ndefineSlots<{\n  /** Элемент, к которому крепится метка. */\n  default?: () => any\n}>()\n</script>\n\n<template>\n  <span :class=\"rootClass\">\n    <slot />\n\n    <template v-if=\"dot\">\n      <span\n        data-gr-badge-wrap-dot\n        :class=\"[dotBaseClass, dotPlacementClass[placement], toneClass[tone]]\"\n        aria-hidden=\"true\"\n      />\n      <!-- Точка сама по себе смысла не несёт; подпись появляется только когда\n           потребитель объяснил, о чём она. -->\n      <span v-if=\"ariaLabel\" data-gr-badge-wrap-label class=\"sr-only\">{{ ariaLabel }}</span>\n    </template>\n\n    <template v-else-if=\"showCount\">\n      <span\n        data-gr-badge-wrap-count\n        :data-gr-badge-wrap-pop=\"pulsing || undefined\"\n        :class=\"[countBaseClass, placementClass[placement], toneClass[tone]]\"\n        aria-hidden=\"true\"\n        @animationend=\"pulsing = false\"\n      >{{ displayValue }}</span>\n      <span data-gr-badge-wrap-label class=\"sr-only\">{{ countLabel }}</span>\n    </template>\n  </span>\n</template>\n\n<style>\n@keyframes gr-badge-wrap-pop {\n  0% {\n    transform: scale(0.4);\n  }\n  60% {\n    transform: scale(1.12);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n/*\n * `animation-fill-mode` не задан намеренно: под `prefers-reduced-motion` анимация\n * доигрывает за `0.01ms` и возвращает элемент в исходный кадр — бейдж на месте\n * и в нужном размере. Именно поэтому компоненту хватает глобального клампа и не\n * нужен собственный reduce-блок (`docs/motion.md`).\n */\n[data-gr-badge-wrap-count][data-gr-badge-wrap-pop] {\n  animation: gr-badge-wrap-pop var(--gr-duration-base) var(--gr-ease-out);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CA,MAAM,QAAQ;EAWd,MAAM,EAAE,MAAM,2BAA2B;EAEzC,MAAM,YAAY,eAAe;GAC/B,IAAI,MAAM,OAAO,MAAM,UAAU,KAAA,GAC/B,OAAO;GACT,OAAO,MAAM,UAAU,KAAK,MAAM;EACpC,CAAC;;EAGD,MAAM,eAAe,eAAe,iBAAiB,MAAM,SAAS,IAAI,MAAM,GAAG,CAAC;;;;;EAMlF,MAAM,aAAa,eAAe,MAAM,aACnC,EAAE,sBAAsB,eAAe;GAAE,OAAO,MAAM;GAAO,GAAG,MAAM;EAAM,CAAC,CAAC;EAEnF,MAAM,UAAU,IAAI,KAAK;;;;;;;;;;;EAezB,MAZqB,eAAe,UAAU,QAAQ,MAAM,QAAQ,KAAA,CAY9D,IAAe,MAAM,SAAS;GAClC,IAAI,CAAC,MAAM,WAAW,QAAQ,OAC5B;GACF,IAAI,iBAAiB,MAAM,IAAI,GAC7B,QAAQ,QAAQ;EACpB,CAAC;EAID,MAAM,YAAY,YAAY;GAC5B,IAAI,CAAC,SACH,QAAQ,QAAQ;EACpB,CAAC;;uBASC,mBAwBO,QAAA,EAxBA,OAAK,eAAE,MAAA,SAAA,CAAS,EAAA,GAAA,CACrB,WAAQ,KAAA,QAAA,SAAA,GAEQ,QAAA,OAAA,UAAA,GAAhB,mBASW,UAAA,EAAA,KAAA,EAAA,GAAA,CART,mBAIE,QAAA;IAHA,0BAAA;IACC,OAAK,eAAA;KAAG,MAAA,YAAA;KAAc,MAAA,iBAAA,CAAiB,CAAC,QAAA;KAAY,MAAA,SAAA,CAAS,CAAC,QAAA;IAAI,CAAA;IACnE,eAAY;gBAIF,QAAA,aAAA,UAAA,GAAZ,mBAAsF,QAAtF,YAAsF,gBAAnB,QAAA,SAAS,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,EAAA,KAGzD,UAAA,SAAA,UAAA,GAArB,mBASW,UAAA,EAAA,KAAA,EAAA,GAAA,CART,mBAM0B,QAAA;IALxB,4BAAA;IACC,0BAAwB,QAAA,SAAW,KAAA;IACnC,OAAK,eAAA;KAAG,MAAA,cAAA;KAAgB,MAAA,cAAA,CAAc,CAAC,QAAA;KAAY,MAAA,SAAA,CAAS,CAAC,QAAA;IAAI,CAAA;IAClE,eAAY;IACX,gBAAY,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,QAAO;sBACpB,aAAA,KAAY,GAAA,IAAA,UAAA,GAChB,mBAAsE,QAAtE,YAAsE,gBAApB,WAAA,KAAU,GAAA,CAAA,CAAA,GAAA,EAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA"}

package/dist/components/GrBottomNav/chunks/GrBottomNav-wtFatLjB.js.map

@@ -1 +1 @@
-{"version":3,"file":"GrBottomNav-wtFatLjB.js","names":[],"sources":["../../../../src/components/GrBottomNav/GrBottomNav.vue","../../../../src/components/GrBottomNav/GrBottomNav.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, markRaw, type Component } from 'vue'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n  grBottomNavIconClass,\n  grBottomNavItemClass,\n  grBottomNavListClass,\n  grBottomNavRootClass,\n  itemBadgeClass,\n  itemLabelClass,\n  type GrBottomNavHideAbove,\n  type GrBottomNavPosition,\n} from './grBottomNavStyles'\n\nimport './defaults'\n\nexport type { GrBottomNavHideAbove, GrBottomNavPosition } from './grBottomNavStyles'\n\n/** Пункт нижней навигации. Кроме подписи и значения всё опционально. */\nexport type GrBottomNavItem = {\n  label: string\n  value: string\n  /** Иконка: класс UnoCSS-иконки (`'i-lucide-home'`) или Vue-компонент. Декоративна. */\n  icon?: string | Component\n  /** Счётчик поверх пункта. Число озвучивается словами, строка — как есть. */\n  badge?: string | number\n  /** Подпись счётчика для скринридера, сильнее локали. */\n  badgeLabel?: string\n  disabled?: boolean\n  href?: string\n  /** Цель роутерной ссылки: уезжает в компонент из `as`. */\n  to?: unknown\n  /** Доступное имя пункта, когда подписи недостаточно. */\n  ariaLabel?: string\n}\n\n/**\n * GrBottomNav — нижняя навигация приложения: ряд разделов, прижатый к нижней\n * кромке экрана.\n *\n * Активный пункт объявлен `aria-current=\"page\"` и отличается не только цветом:\n * подложкой и весом подписи тоже.\n */\nexport interface GrBottomNavProps {\n  modelValue: string\n  items: GrBottomNavItem[]\n  /** Компонент ссылки для пунктов с `to`: `RouterLink`, `NuxtLink`, `Link` Inertia. */\n  as?: string | Component\n  /** Брейкпоинт, начиная с которого панель скрывается. `none` — видна всегда. */\n  hideAbove?: GrBottomNavHideAbove\n  /** `static` вынимает панель из фиксированного слоя — для встраивания в макет. */\n  position?: GrBottomNavPosition\n  /** Имя лендмарка. Не задано — берётся из локали. */\n  ariaLabel?: string\n  /**\n   * Ступень размера: высота полосы, глиф и кегль подписи. Тач-таргет пункта\n   * остаётся 44×44 на любой ступени.\n   */\n  size?: GrComponentSize\n}\n\nexport interface GrBottomNavEmits {\n  (e: 'update:modelValue', value: string): void\n}\n\nconst props = withDefaults(defineProps<GrBottomNavProps>(), {\n  as: undefined,\n  hideAbove: 'sm',\n  position: 'fixed',\n  ariaLabel: undefined,\n  // `undefined`: «настоящий» дефолт живёт в `useGrComponentSize`, иначе\n  // `GrConfigProvider` не отличит заданное значение от подставленного Vue.\n  size: undefined,\n})\n\nconst emit = defineEmits<GrBottomNavEmits>()\n\ndefineSlots<{\n  /**\n   * Содержимое пункта вместо иконки, подписи и счётчика. Корень пункта —\n   * тег, `aria-current`, `aria-disabled` и клик — остаётся за компонентом.\n   */\n  item?: (props: {\n    item: GrBottomNavItem\n    active: boolean\n    disabled: boolean\n    badgeLabel: string | undefined\n  }) => any\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedAriaLabel = computed(() => props.ariaLabel ?? t('gr.bottomNav.label', 'Bottom navigation'))\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrBottomNav' })\n\nconst rootClass = computed(() => grBottomNavRootClass({\n  position: props.position,\n  hideAbove: props.hideAbove,\n}))\n\nconst linkComponent = computed(() => (props.as && typeof props.as !== 'string' ? markRaw(props.as) : props.as))\n\nfunction itemTag(item: GrBottomNavItem): string | Component {\n  if (item.disabled) return 'span'\n  if (item.to !== undefined && linkComponent.value) return linkComponent.value\n  return item.href ? 'a' : 'button'\n}\n\n/**\n * Счётчик рисуется декоративно, а рядом идёт скрытая подпись: голое «3» без\n * единицы измерения диктору ничего не сообщает.\n */\nfunction badgeLabel(item: GrBottomNavItem): string | undefined {\n  if (item.badge == null || item.badge === '') return undefined\n  if (item.badgeLabel) return item.badgeLabel\n  if (typeof item.badge === 'number') {\n    return t('gr.bottomNav.badge', '{count} new', { count: item.badge, n: item.badge })\n  }\n  return String(item.badge)\n}\n\nfunction select(item: GrBottomNavItem): void {\n  if (item.disabled) return\n  emit('update:modelValue', item.value)\n}\n</script>\n\n<template>\n  <nav :class=\"rootClass\" :aria-label=\"resolvedAriaLabel\">\n    <div :class=\"grBottomNavListClass(resolvedSize)\">\n      <component\n        :is=\"itemTag(item)\"\n        v-for=\"item in items\"\n        :key=\"item.value\"\n        data-gr-bottom-nav-item\n        :type=\"itemTag(item) === 'button' ? 'button' : undefined\"\n        :href=\"itemTag(item) === 'a' ? item.href : undefined\"\n        :to=\"item.to !== undefined && linkComponent ? item.to : undefined\"\n        :aria-current=\"item.value === modelValue ? 'page' : undefined\"\n        :aria-disabled=\"item.disabled ? 'true' : undefined\"\n        :aria-label=\"item.ariaLabel\"\n        :class=\"grBottomNavItemClass({ active: item.value === modelValue, disabled: item.disabled ?? false, size: resolvedSize })\"\n        @click=\"select(item)\"\n      >\n        <slot\n          name=\"item\"\n          :item=\"item\"\n          :active=\"item.value === modelValue\"\n          :disabled=\"item.disabled ?? false\"\n          :badge-label=\"badgeLabel(item)\"\n        >\n          <component :is=\"item.icon\" v-if=\"item.icon && typeof item.icon !== 'string'\" :class=\"grBottomNavIconClass(resolvedSize)\" aria-hidden=\"true\" />\n          <span v-else-if=\"item.icon\" :class=\"[item.icon, grBottomNavIconClass(resolvedSize)]\" aria-hidden=\"true\" />\n\n          <span :class=\"itemLabelClass\">{{ item.label }}</span>\n\n          <template v-if=\"item.badge != null && item.badge !== ''\">\n            <span data-gr-bottom-nav-badge :class=\"itemBadgeClass\" aria-hidden=\"true\">{{ item.badge }}</span>\n            <span data-gr-bottom-nav-badge-label class=\"sr-only\">{{ badgeLabel(item) }}</span>\n          </template>\n        </slot>\n      </component>\n    </div>\n  </nav>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, markRaw, type Component } from 'vue'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n  grBottomNavIconClass,\n  grBottomNavItemClass,\n  grBottomNavListClass,\n  grBottomNavRootClass,\n  itemBadgeClass,\n  itemLabelClass,\n  type GrBottomNavHideAbove,\n  type GrBottomNavPosition,\n} from './grBottomNavStyles'\n\nimport './defaults'\n\nexport type { GrBottomNavHideAbove, GrBottomNavPosition } from './grBottomNavStyles'\n\n/** Пункт нижней навигации. Кроме подписи и значения всё опционально. */\nexport type GrBottomNavItem = {\n  label: string\n  value: string\n  /** Иконка: класс UnoCSS-иконки (`'i-lucide-home'`) или Vue-компонент. Декоративна. */\n  icon?: string | Component\n  /** Счётчик поверх пункта. Число озвучивается словами, строка — как есть. */\n  badge?: string | number\n  /** Подпись счётчика для скринридера, сильнее локали. */\n  badgeLabel?: string\n  disabled?: boolean\n  href?: string\n  /** Цель роутерной ссылки: уезжает в компонент из `as`. */\n  to?: unknown\n  /** Доступное имя пункта, когда подписи недостаточно. */\n  ariaLabel?: string\n}\n\n/**\n * GrBottomNav — нижняя навигация приложения: ряд разделов, прижатый к нижней\n * кромке экрана.\n *\n * Активный пункт объявлен `aria-current=\"page\"` и отличается не только цветом:\n * подложкой и весом подписи тоже.\n */\nexport interface GrBottomNavProps {\n  modelValue: string\n  items: GrBottomNavItem[]\n  /** Компонент ссылки для пунктов с `to`: `RouterLink`, `NuxtLink`, `Link` Inertia. */\n  as?: string | Component\n  /** Брейкпоинт, начиная с которого панель скрывается. `none` — видна всегда. */\n  hideAbove?: GrBottomNavHideAbove\n  /** `static` вынимает панель из фиксированного слоя — для встраивания в макет. */\n  position?: GrBottomNavPosition\n  /** Имя лендмарка. Не задано — берётся из локали. */\n  ariaLabel?: string\n  /**\n   * Ступень размера: высота полосы, глиф и кегль подписи. Тач-таргет пункта\n   * остаётся 44×44 на любой ступени.\n   */\n  size?: GrComponentSize\n}\n\nexport interface GrBottomNavEmits {\n  (e: 'update:modelValue', value: string): void\n}\n\nconst props = withDefaults(defineProps<GrBottomNavProps>(), {\n  as: undefined,\n  hideAbove: 'sm',\n  position: 'fixed',\n  ariaLabel: undefined,\n  // `undefined`: «настоящий» дефолт живёт в `useGrComponentSize`, иначе\n  // `GrConfigProvider` не отличит заданное значение от подставленного Vue.\n  size: undefined,\n})\n\nconst emit = defineEmits<GrBottomNavEmits>()\n\ndefineSlots<{\n  /**\n   * Содержимое пункта вместо иконки, подписи и счётчика. Корень пункта —\n   * тег, `aria-current`, `aria-disabled` и клик — остаётся за компонентом.\n   */\n  item?: (props: {\n    item: GrBottomNavItem\n    active: boolean\n    disabled: boolean\n    badgeLabel: string | undefined\n  }) => any\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedAriaLabel = computed(() => props.ariaLabel ?? t('gr.bottomNav.label', 'Bottom navigation'))\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrBottomNav' })\n\nconst rootClass = computed(() => grBottomNavRootClass({\n  position: props.position,\n  hideAbove: props.hideAbove,\n}))\n\nconst linkComponent = computed(() => (props.as && typeof props.as !== 'string' ? markRaw(props.as) : props.as))\n\nfunction itemTag(item: GrBottomNavItem): string | Component {\n  if (item.disabled) return 'span'\n  if (item.to !== undefined && linkComponent.value) return linkComponent.value\n  return item.href ? 'a' : 'button'\n}\n\n/**\n * Счётчик рисуется декоративно, а рядом идёт скрытая подпись: голое «3» без\n * единицы измерения диктору ничего не сообщает.\n */\nfunction badgeLabel(item: GrBottomNavItem): string | undefined {\n  if (item.badge == null || item.badge === '') return undefined\n  if (item.badgeLabel) return item.badgeLabel\n  if (typeof item.badge === 'number') {\n    return t('gr.bottomNav.badge', '{count} new', { count: item.badge, n: item.badge })\n  }\n  return String(item.badge)\n}\n\nfunction select(item: GrBottomNavItem): void {\n  if (item.disabled) return\n  emit('update:modelValue', item.value)\n}\n</script>\n\n<template>\n  <nav :class=\"rootClass\" :aria-label=\"resolvedAriaLabel\">\n    <div :class=\"grBottomNavListClass(resolvedSize)\">\n      <component\n        :is=\"itemTag(item)\"\n        v-for=\"item in items\"\n        :key=\"item.value\"\n        data-gr-bottom-nav-item\n        :type=\"itemTag(item) === 'button' ? 'button' : undefined\"\n        :href=\"itemTag(item) === 'a' ? item.href : undefined\"\n        :to=\"item.to !== undefined && linkComponent ? item.to : undefined\"\n        :aria-current=\"item.value === modelValue ? 'page' : undefined\"\n        :aria-disabled=\"item.disabled ? 'true' : undefined\"\n        :aria-label=\"item.ariaLabel\"\n        :class=\"grBottomNavItemClass({ active: item.value === modelValue, disabled: item.disabled ?? false, size: resolvedSize })\"\n        @click=\"select(item)\"\n      >\n        <slot\n          name=\"item\"\n          :item=\"item\"\n          :active=\"item.value === modelValue\"\n          :disabled=\"item.disabled ?? false\"\n          :badge-label=\"badgeLabel(item)\"\n        >\n          <component :is=\"item.icon\" v-if=\"item.icon && typeof item.icon !== 'string'\" :class=\"grBottomNavIconClass(resolvedSize)\" aria-hidden=\"true\" />\n          <span v-else-if=\"item.icon\" :class=\"[item.icon, grBottomNavIconClass(resolvedSize)]\" aria-hidden=\"true\" />\n\n          <span :class=\"itemLabelClass\">{{ item.label }}</span>\n\n          <template v-if=\"item.badge != null && item.badge !== ''\">\n            <span data-gr-bottom-nav-badge :class=\"itemBadgeClass\" aria-hidden=\"true\">{{ item.badge }}</span>\n            <span data-gr-bottom-nav-badge-label class=\"sr-only\">{{ badgeLabel(item) }}</span>\n          </template>\n        </slot>\n      </component>\n    </div>\n  </nav>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"GrBottomNav-wtFatLjB.js","names":[],"sources":["../../../../src/components/GrBottomNav/GrBottomNav.vue","../../../../src/components/GrBottomNav/GrBottomNav.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, markRaw, type Component } from 'vue'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n  grBottomNavIconClass,\n  grBottomNavItemClass,\n  grBottomNavListClass,\n  grBottomNavRootClass,\n  itemBadgeClass,\n  itemLabelClass,\n  type GrBottomNavHideAbove,\n  type GrBottomNavPosition,\n} from './grBottomNavStyles'\n\nimport './defaults'\n\nexport type { GrBottomNavHideAbove, GrBottomNavPosition } from './grBottomNavStyles'\n\n/** Пункт нижней навигации. Кроме подписи и значения всё опционально. */\nexport type GrBottomNavItem = {\n  label: string\n  value: string\n  /** Иконка: класс UnoCSS-иконки (`'i-lucide-home'`) или Vue-компонент. Декоративна. */\n  icon?: string | Component\n  /** Счётчик поверх пункта. Число озвучивается словами, строка — как есть. */\n  badge?: string | number\n  /** Подпись счётчика для скринридера, сильнее локали. */\n  badgeLabel?: string\n  disabled?: boolean\n  href?: string\n  /** Цель роутерной ссылки: уезжает в компонент из `as`. */\n  to?: unknown\n  /** Доступное имя пункта, когда подписи недостаточно. */\n  ariaLabel?: string\n}\n\n/**\n * GrBottomNav — нижняя навигация приложения: ряд разделов, прижатый к нижней\n * кромке экрана.\n *\n * Активный пункт объявлен `aria-current=\"page\"` и отличается не только цветом:\n * подложкой и весом подписи тоже.\n */\nexport interface GrBottomNavProps {\n  modelValue: string\n  items: GrBottomNavItem[]\n  /** Компонент ссылки для пунктов с `to`: `RouterLink`, `NuxtLink`, `Link` Inertia. */\n  as?: string | Component\n  /** Брейкпоинт, начиная с которого панель скрывается. `none` — видна всегда. */\n  hideAbove?: GrBottomNavHideAbove\n  /** `static` вынимает панель из фиксированного слоя — для встраивания в макет. */\n  position?: GrBottomNavPosition\n  /** Имя лендмарка. Не задано — берётся из локали. */\n  ariaLabel?: string\n  /**\n   * Ступень размера: высота полосы, глиф и кегль подписи. Тач-таргет пункта\n   * остаётся 44×44 на любой ступени.\n   */\n  size?: GrComponentSize\n}\n\nexport interface GrBottomNavEmits {\n  (e: 'update:modelValue', value: string): void\n}\n\nconst props = withDefaults(defineProps<GrBottomNavProps>(), {\n  as: undefined,\n  hideAbove: 'sm',\n  position: 'fixed',\n  ariaLabel: undefined,\n  // `undefined`: «настоящий» дефолт живёт в `useGrComponentSize`, иначе\n  // `GrConfigProvider` не отличит заданное значение от подставленного Vue.\n  size: undefined,\n})\n\nconst emit = defineEmits<GrBottomNavEmits>()\n\ndefineSlots<{\n  /**\n   * Содержимое пункта вместо иконки, подписи и счётчика. Корень пункта —\n   * тег, `aria-current`, `aria-disabled` и клик — остаётся за компонентом.\n   */\n  item?: (props: {\n    item: GrBottomNavItem\n    active: boolean\n    disabled: boolean\n    badgeLabel: string | undefined\n  }) => any\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedAriaLabel = computed(() => props.ariaLabel ?? t('gr.bottomNav.label', 'Bottom navigation'))\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrBottomNav' })\n\nconst rootClass = computed(() => grBottomNavRootClass({\n  position: props.position,\n  hideAbove: props.hideAbove,\n}))\n\nconst linkComponent = computed(() => (props.as && typeof props.as !== 'string' ? markRaw(props.as) : props.as))\n\nfunction itemTag(item: GrBottomNavItem): string | Component {\n  if (item.disabled)\n    return 'span'\n  if (item.to !== undefined && linkComponent.value)\n    return linkComponent.value\n  return item.href ? 'a' : 'button'\n}\n\n/**\n * Счётчик рисуется декоративно, а рядом идёт скрытая подпись: голое «3» без\n * единицы измерения диктору ничего не сообщает.\n */\nfunction badgeLabel(item: GrBottomNavItem): string | undefined {\n  if (item.badge == null || item.badge === '')\n    return undefined\n  if (item.badgeLabel)\n    return item.badgeLabel\n  if (typeof item.badge === 'number') {\n    return t('gr.bottomNav.badge', '{count} new', { count: item.badge, n: item.badge })\n  }\n  return String(item.badge)\n}\n\nfunction select(item: GrBottomNavItem): void {\n  if (item.disabled)\n    return\n  emit('update:modelValue', item.value)\n}\n</script>\n\n<template>\n  <nav :class=\"rootClass\" :aria-label=\"resolvedAriaLabel\">\n    <div :class=\"grBottomNavListClass(resolvedSize)\">\n      <component\n        :is=\"itemTag(item)\"\n        v-for=\"item in items\"\n        :key=\"item.value\"\n        data-gr-bottom-nav-item\n        :type=\"itemTag(item) === 'button' ? 'button' : undefined\"\n        :href=\"itemTag(item) === 'a' ? item.href : undefined\"\n        :to=\"item.to !== undefined && linkComponent ? item.to : undefined\"\n        :aria-current=\"item.value === modelValue ? 'page' : undefined\"\n        :aria-disabled=\"item.disabled ? 'true' : undefined\"\n        :aria-label=\"item.ariaLabel\"\n        :class=\"grBottomNavItemClass({ active: item.value === modelValue, disabled: item.disabled ?? false, size: resolvedSize })\"\n        @click=\"select(item)\"\n      >\n        <slot\n          name=\"item\"\n          :item=\"item\"\n          :active=\"item.value === modelValue\"\n          :disabled=\"item.disabled ?? false\"\n          :badge-label=\"badgeLabel(item)\"\n        >\n          <component :is=\"item.icon\" v-if=\"item.icon && typeof item.icon !== 'string'\" :class=\"grBottomNavIconClass(resolvedSize)\" aria-hidden=\"true\" />\n          <span v-else-if=\"item.icon\" :class=\"[item.icon, grBottomNavIconClass(resolvedSize)]\" aria-hidden=\"true\" />\n\n          <span :class=\"itemLabelClass\">{{ item.label }}</span>\n\n          <template v-if=\"item.badge != null && item.badge !== ''\">\n            <span data-gr-bottom-nav-badge :class=\"itemBadgeClass\" aria-hidden=\"true\">{{ item.badge }}</span>\n            <span data-gr-bottom-nav-badge-label class=\"sr-only\">{{ badgeLabel(item) }}</span>\n          </template>\n        </slot>\n      </component>\n    </div>\n  </nav>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, markRaw, type Component } from 'vue'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n  grBottomNavIconClass,\n  grBottomNavItemClass,\n  grBottomNavListClass,\n  grBottomNavRootClass,\n  itemBadgeClass,\n  itemLabelClass,\n  type GrBottomNavHideAbove,\n  type GrBottomNavPosition,\n} from './grBottomNavStyles'\n\nimport './defaults'\n\nexport type { GrBottomNavHideAbove, GrBottomNavPosition } from './grBottomNavStyles'\n\n/** Пункт нижней навигации. Кроме подписи и значения всё опционально. */\nexport type GrBottomNavItem = {\n  label: string\n  value: string\n  /** Иконка: класс UnoCSS-иконки (`'i-lucide-home'`) или Vue-компонент. Декоративна. */\n  icon?: string | Component\n  /** Счётчик поверх пункта. Число озвучивается словами, строка — как есть. */\n  badge?: string | number\n  /** Подпись счётчика для скринридера, сильнее локали. */\n  badgeLabel?: string\n  disabled?: boolean\n  href?: string\n  /** Цель роутерной ссылки: уезжает в компонент из `as`. */\n  to?: unknown\n  /** Доступное имя пункта, когда подписи недостаточно. */\n  ariaLabel?: string\n}\n\n/**\n * GrBottomNav — нижняя навигация приложения: ряд разделов, прижатый к нижней\n * кромке экрана.\n *\n * Активный пункт объявлен `aria-current=\"page\"` и отличается не только цветом:\n * подложкой и весом подписи тоже.\n */\nexport interface GrBottomNavProps {\n  modelValue: string\n  items: GrBottomNavItem[]\n  /** Компонент ссылки для пунктов с `to`: `RouterLink`, `NuxtLink`, `Link` Inertia. */\n  as?: string | Component\n  /** Брейкпоинт, начиная с которого панель скрывается. `none` — видна всегда. */\n  hideAbove?: GrBottomNavHideAbove\n  /** `static` вынимает панель из фиксированного слоя — для встраивания в макет. */\n  position?: GrBottomNavPosition\n  /** Имя лендмарка. Не задано — берётся из локали. */\n  ariaLabel?: string\n  /**\n   * Ступень размера: высота полосы, глиф и кегль подписи. Тач-таргет пункта\n   * остаётся 44×44 на любой ступени.\n   */\n  size?: GrComponentSize\n}\n\nexport interface GrBottomNavEmits {\n  (e: 'update:modelValue', value: string): void\n}\n\nconst props = withDefaults(defineProps<GrBottomNavProps>(), {\n  as: undefined,\n  hideAbove: 'sm',\n  position: 'fixed',\n  ariaLabel: undefined,\n  // `undefined`: «настоящий» дефолт живёт в `useGrComponentSize`, иначе\n  // `GrConfigProvider` не отличит заданное значение от подставленного Vue.\n  size: undefined,\n})\n\nconst emit = defineEmits<GrBottomNavEmits>()\n\ndefineSlots<{\n  /**\n   * Содержимое пункта вместо иконки, подписи и счётчика. Корень пункта —\n   * тег, `aria-current`, `aria-disabled` и клик — остаётся за компонентом.\n   */\n  item?: (props: {\n    item: GrBottomNavItem\n    active: boolean\n    disabled: boolean\n    badgeLabel: string | undefined\n  }) => any\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedAriaLabel = computed(() => props.ariaLabel ?? t('gr.bottomNav.label', 'Bottom navigation'))\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrBottomNav' })\n\nconst rootClass = computed(() => grBottomNavRootClass({\n  position: props.position,\n  hideAbove: props.hideAbove,\n}))\n\nconst linkComponent = computed(() => (props.as && typeof props.as !== 'string' ? markRaw(props.as) : props.as))\n\nfunction itemTag(item: GrBottomNavItem): string | Component {\n  if (item.disabled)\n    return 'span'\n  if (item.to !== undefined && linkComponent.value)\n    return linkComponent.value\n  return item.href ? 'a' : 'button'\n}\n\n/**\n * Счётчик рисуется декоративно, а рядом идёт скрытая подпись: голое «3» без\n * единицы измерения диктору ничего не сообщает.\n */\nfunction badgeLabel(item: GrBottomNavItem): string | undefined {\n  if (item.badge == null || item.badge === '')\n    return undefined\n  if (item.badgeLabel)\n    return item.badgeLabel\n  if (typeof item.badge === 'number') {\n    return t('gr.bottomNav.badge', '{count} new', { count: item.badge, n: item.badge })\n  }\n  return String(item.badge)\n}\n\nfunction select(item: GrBottomNavItem): void {\n  if (item.disabled)\n    return\n  emit('update:modelValue', item.value)\n}\n</script>\n\n<template>\n  <nav :class=\"rootClass\" :aria-label=\"resolvedAriaLabel\">\n    <div :class=\"grBottomNavListClass(resolvedSize)\">\n      <component\n        :is=\"itemTag(item)\"\n        v-for=\"item in items\"\n        :key=\"item.value\"\n        data-gr-bottom-nav-item\n        :type=\"itemTag(item) === 'button' ? 'button' : undefined\"\n        :href=\"itemTag(item) === 'a' ? item.href : undefined\"\n        :to=\"item.to !== undefined && linkComponent ? item.to : undefined\"\n        :aria-current=\"item.value === modelValue ? 'page' : undefined\"\n        :aria-disabled=\"item.disabled ? 'true' : undefined\"\n        :aria-label=\"item.ariaLabel\"\n        :class=\"grBottomNavItemClass({ active: item.value === modelValue, disabled: item.disabled ?? false, size: resolvedSize })\"\n        @click=\"select(item)\"\n      >\n        <slot\n          name=\"item\"\n          :item=\"item\"\n          :active=\"item.value === modelValue\"\n          :disabled=\"item.disabled ?? false\"\n          :badge-label=\"badgeLabel(item)\"\n        >\n          <component :is=\"item.icon\" v-if=\"item.icon && typeof item.icon !== 'string'\" :class=\"grBottomNavIconClass(resolvedSize)\" aria-hidden=\"true\" />\n          <span v-else-if=\"item.icon\" :class=\"[item.icon, grBottomNavIconClass(resolvedSize)]\" aria-hidden=\"true\" />\n\n          <span :class=\"itemLabelClass\">{{ item.label }}</span>\n\n          <template v-if=\"item.badge != null && item.badge !== ''\">\n            <span data-gr-bottom-nav-badge :class=\"itemBadgeClass\" aria-hidden=\"true\">{{ item.badge }}</span>\n            <span data-gr-bottom-nav-badge-label class=\"sr-only\">{{ badgeLabel(item) }}</span>\n          </template>\n        </slot>\n      </component>\n    </div>\n  </nav>\n</template>\n"],"mappings":"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"}

package/dist/components/GrBreadcrumbs/chunks/GrBreadcrumbs-DRDNan_n.js.map

@@ -1 +1 @@
-{"version":3,"file":"GrBreadcrumbs-DRDNan_n.js","names":[],"sources":["../../../../src/components/GrBreadcrumbs/GrBreadcrumbs.vue","../../../../src/components/GrBreadcrumbs/GrBreadcrumbs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport GrLink from '../GrLink/GrLink.vue'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { iconClass, iconTag } from '../shared/icon'\n\nimport {\n  breadcrumbsCurrentClass,\n  breadcrumbsEllipsisClass,\n  breadcrumbsItemIconClass,\n  breadcrumbsItemWrapClass,\n  breadcrumbsLabelClass,\n  breadcrumbsLabelHiddenClass,\n  breadcrumbsListClass,\n  breadcrumbsListNowrapClass,\n  breadcrumbsListWrapClass,\n  breadcrumbsRootClass,\n  breadcrumbsSeparatorClass,\n  breadcrumbsSizeClassBySize,\n  type GrBreadcrumbItem,\n  type GrBreadcrumbsLinkComponent,\n  type GrBreadcrumbsSize,\n  resolveBreadcrumbsFit,\n  resolveBreadcrumbsLayout,\n} from './grBreadcrumbsStyles'\n\nexport type { GrBreadcrumbItem, GrBreadcrumbsSize } from './grBreadcrumbsStyles'\n\n/**\n * Путь до текущей страницы (WAI-ARIA breadcrumb): `<nav>` с именем, внутри\n * упорядоченный список ссылок, последний пункт — текущая страница.\n *\n * Ссылки рисует `GrLink`, поэтому роутер подключается тем же способом, что и\n * везде в пакете: `as` + `to`.\n */\nexport interface GrBreadcrumbsProps {\n  /** Путь от корня к текущей странице. Последний пункт — текущая страница. */\n  items: GrBreadcrumbItem[]\n  /** Компонент ссылки для всех пунктов: `RouterLink`, `NuxtLink`, `Link` Inertia. */\n  as?: GrBreadcrumbsLinkComponent\n  /** Разделитель между пунктами. Декоративен: диктору не читается. */\n  separator?: string\n  size?: GrBreadcrumbsSize\n  /**\n   * С какого числа пунктов схлопывать середину в «…». `0`/не задано — показывать\n   * путь целиком.\n   */\n  maxItems?: number\n  /** Сколько пунктов оставить в начале при схлопывании. */\n  itemsBeforeCollapse?: number\n  /** Сколько пунктов оставить в конце при схлопывании. */\n  itemsAfterCollapse?: number\n  /** Имя лендмарка. Не задано — берётся из локали. */\n  ariaLabel?: string\n  /** Последний пункт остаётся ссылкой (текущая страница кликабельна). */\n  linkCurrent?: boolean\n  /**\n   * Какой пункт — текущая страница. Не задан — последний.\n   *\n   * `-1` означает, что текущей страницы в пути нет: её имя стоит в `h1`, а\n   * путь показывает только родителей. Тогда `aria-current` не получает никто,\n   * и последний пункт остаётся обычной ссылкой.\n   */\n  currentIndex?: number\n  /** i18n-метка кнопки раскрытия схлопнутого пути. */\n  expandLabel?: string\n  /**\n   * Схлопывать по доступной ширине, а не по числу пунктов. Путь становится\n   * однострочным, середина уходит под «…» ровно настолько, насколько не влезает.\n   *\n   * Без пропа поведение прежнее: список переносится на вторую строку, а порог\n   * задаёт `maxItems`. Вместе пропы совместимы — `maxItems` остаётся жёстким\n   * потолком, ширина ужимает дальше.\n   */\n  autoCollapse?: boolean\n}\n\nconst props = withDefaults(defineProps<GrBreadcrumbsProps>(), {\n  as: undefined,\n  separator: undefined,\n  size: undefined,\n  maxItems: undefined,\n  itemsBeforeCollapse: 1,\n  itemsAfterCollapse: 1,\n  ariaLabel: undefined,\n  linkCurrent: false,\n  currentIndex: undefined,\n  expandLabel: undefined,\n  autoCollapse: false,\n})\n\ndefineSlots<{\n  /** Содержимое пункта целиком (иконка и подпись). */\n  item?: (props: { item: GrBreadcrumbItem, index: number, isCurrent: boolean }) => unknown\n  /** Разделитель между пунктами. */\n  separator?: () => unknown\n  /** Кнопка раскрытия схлопнутой середины. */\n  ellipsis?: (props: { hiddenCount: number, expand: () => void }) => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrBreadcrumbs' })\nconst resolvedSeparator = useGrComponentProp('GrBreadcrumbs', 'separator', () => props.separator, '/')\n\nconst resolvedAriaLabel = computed(() => props.ariaLabel ?? t('gr.breadcrumbs.label', 'Breadcrumb'))\nconst resolvedExpandLabel = computed(() => props.expandLabel ?? t('gr.breadcrumbs.expand', 'Show hidden path'))\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst listEl = ref<HTMLElement | null>(null)\nconst expanded = ref(false)\n\n/**\n * Схлопывание по ширине: сколько пунктов хвоста влезает.\n *\n * `undefined` — ещё не мерили, показываем путь целиком. Первый кадр в режиме\n * `autoCollapse` намеренно полный: ширины снимаются с него, а посчитать их до\n * рендера неоткуда.\n */\nconst fitAfter = ref<number | undefined>(undefined)\n\n/** Ширины не зависят от контейнера, поэтому живут до смены самого пути. */\nlet measured: { items: number[], separator: number } | null = null\n/**\n * Ширина кнопки «…» узнаётся только когда она отрисована, то есть уже после\n * первого схлопывания. До этого считаем её нулевой: поправка может лишь\n * ужать хвост ещё на пункт, а не вернуть спрятанное, поэтому качелей не будет.\n */\nlet ellipsisWidth = 0\n/** Ширина, на которой считали в прошлый раз: по её смене раскрытый путь сворачивается. */\nlet lastAvailable = 0\n\n// Новый путь — новая страница: раскрытая середина прошлого пути к ней отношения\n// не имеет, а измеренные ширины относятся к прошлым подписям.\nwatch(() => props.items, () => {\n  expanded.value = false\n  measured = null\n  ellipsisWidth = 0\n  fitAfter.value = undefined\n  void nextTick(measure)\n})\n\nconst lastIndex = computed(() => props.items.length - 1)\n\n/**\n * Схлопывание по ширине выражается через тот же `maxItems`: раскладку считает\n * одна функция, а режимы отличаются только тем, откуда взялось число.\n */\nconst autoMaxItems = computed(() => {\n  if (!props.autoCollapse || fitAfter.value === undefined) return undefined\n  if (fitAfter.value >= props.items.length) return undefined\n\n  return props.items.length - 1\n})\n\nconst effectiveMaxItems = computed(() => {\n  const limits = [props.maxItems, autoMaxItems.value].filter((value): value is number => typeof value === 'number' && value > 0)\n\n  return limits.length > 0 ? Math.min(...limits) : undefined\n})\n\nconst effectiveAfter = computed(() => (\n  props.autoCollapse && fitAfter.value !== undefined ? fitAfter.value : props.itemsAfterCollapse\n))\n\nconst entries = computed(() => resolveBreadcrumbsLayout({\n  items: props.items,\n  maxItems: effectiveMaxItems.value,\n  itemsBeforeCollapse: props.itemsBeforeCollapse,\n  itemsAfterCollapse: effectiveAfter.value,\n  expanded: expanded.value,\n}))\n\nconst resolvedCurrentIndex = computed(() => props.currentIndex ?? lastIndex.value)\n\nfunction isCurrent(index: number): boolean {\n  return index === resolvedCurrentIndex.value\n}\n\n/**\n * Класс подписи: у пункта-иконки она прячется визуально, но остаётся в\n * разметке — путь читают и поиском, и диктором.\n *\n * Без иконки поле игнорируется: спрятать подпись, не показав ничего взамен,\n * значит стереть пункт. Молчать тут нельзя — в разметке всё на месте, и\n * пропажу видно только глазами.\n */\nfunction labelClassFor(item: GrBreadcrumbItem): string {\n  if (!item.iconOnly) return breadcrumbsLabelClass\n\n  if (!item.icon) {\n    if (__GR_DEV__) {\n      console.warn(\n        `[granularity] GrBreadcrumbs: у пункта «${item.label}» стоит \\`iconOnly\\` без \\`icon\\`. `\n        + 'Подпись осталась видимой: прятать её, не показав иконку, значит стереть пункт.',\n      )\n    }\n\n    return breadcrumbsLabelClass\n  }\n\n  return breadcrumbsLabelHiddenClass\n}\n\n/**\n * Ссылкой пункт становится, только если ведёт куда-то и не выключен.\n */\nfunction isLink(item: GrBreadcrumbItem, index: number): boolean {\n  if (item.disabled) return false\n  if (isCurrent(index) && !props.linkCurrent) return false\n  return item.href !== undefined || item.to !== undefined\n}\n\nfunction widthOf(el: Element | null | undefined): number {\n  // `scrollWidth`, а не прямоугольник: у подписи стоит `truncate`, и в узком\n  // контейнере прямоугольник вернул бы уже ужатую ширину, а не собственную.\n  return el ? (el as HTMLElement).scrollWidth : 0\n}\n\n/**\n * Снять ширины с полного пути и пересчитать, сколько пунктов хвоста влезает.\n *\n * Замер делается один раз на путь: подписи от ширины контейнера не зависят,\n * поэтому `resize` пересчитывает только арифметику.\n */\nfunction measure(): void {\n  if (!props.autoCollapse) return\n\n  const list = listEl.value\n  if (!list) return\n\n  const ellipsis = list.querySelector('[data-gr-breadcrumbs-ellipsis-item]')\n  if (ellipsis) ellipsisWidth = widthOf(ellipsis)\n\n  if (!measured) {\n    // Ширины снимаем только с полного пути: спрятанных пунктов в DOM нет.\n    if (fitAfter.value !== undefined) return\n\n    const wraps = [...list.querySelectorAll('[data-gr-breadcrumbs-item-wrap]')]\n    if (wraps.length !== props.items.length) return\n\n    measured = {\n      items: wraps.map(widthOf),\n      separator: widthOf(list.querySelector('[data-gr-breadcrumbs-separator]')),\n    }\n  }\n\n  const available = list.clientWidth\n  // jsdom и скрытый контейнер отдают 0 — решать по такой ширине нечего.\n  if (available <= 0) return\n\n  lastAvailable = available\n\n  fitAfter.value = resolveBreadcrumbsFit({\n    itemWidths: measured.items,\n    separatorWidth: measured.separator,\n    ellipsisWidth,\n    available,\n    itemsBeforeCollapse: props.itemsBeforeCollapse,\n    gapWidth: listGap(list),\n  })\n}\n\n/** Зазор списка в пикселях: он задан классом, а не пропом, поэтому спрашиваем стиль. */\nfunction listGap(list: HTMLElement): number {\n  if (typeof getComputedStyle !== 'function') return 0\n\n  return Number.parseFloat(getComputedStyle(list).columnGap) || 0\n}\n\n/**\n * Ширина кнопки «…» известна только после того, как она отрисована, то есть\n * после первого схлопывания. Поэтому решение пересчитывается ещё раз: поправка\n * либо ничего не меняет, либо ужимает хвост на пункт. Цикла нет — второй проход\n * оставляет `fitAfter` прежним, и наблюдатель больше не срабатывает.\n */\nwatch(fitAfter, () => void nextTick(measure))\n\nlet observer: ResizeObserver | null = null\n\nwatch(() => props.autoCollapse, (enabled) => {\n  if (enabled) {\n    void nextTick(measure)\n    return\n  }\n\n  measured = null\n  ellipsisWidth = 0\n  fitAfter.value = undefined\n})\n\nonMounted(() => {\n  void nextTick(measure)\n\n  // На сервере и в jsdom `ResizeObserver` отсутствует — измерять там нечего.\n  if (typeof ResizeObserver === 'undefined') return\n\n  observer = new ResizeObserver(() => {\n    // Смена ширины — новая раскладка, и раскрытая руками середина относилась к\n    // прежней. Свернуть её иначе нечем: в раскрытом пути кнопки «…» нет, то есть\n    // поворот телефона оставлял бы путь развёрнутым навсегда. Высота меняется от\n    // самого раскрытия (путь переносится на вторую строку) — на неё не реагируем.\n    if (expanded.value && listEl.value && listEl.value.clientWidth !== lastAvailable)\n      expanded.value = false\n\n    measure()\n  })\n  if (listEl.value) observer.observe(listEl.value)\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n\nasync function expand(): Promise<void> {\n  expanded.value = true\n\n  // Кнопка исчезает вместе со схлопыванием, и фокус ушёл бы на `<body>`.\n  // Переводим его на первый раскрытый пункт — там, где кнопка и стояла. Пункты\n  // без ссылки держат `tabindex=\"-1\"` именно ради этого случая.\n  await nextTick()\n  const before = Math.max(0, Math.min(props.itemsBeforeCollapse, props.items.length))\n  const revealed = rootEl.value?.querySelectorAll<HTMLElement>('[data-gr-breadcrumbs-item]')\n  revealed?.[before]?.focus()\n}\n</script>\n\n<template>\n  <nav\n    ref=\"rootEl\"\n    data-gr-breadcrumbs\n    :class=\"[breadcrumbsRootClass, breadcrumbsSizeClassBySize[resolvedSize]]\"\n    :aria-label=\"resolvedAriaLabel\"\n  >\n    <ol\n      ref=\"listEl\"\n      data-gr-breadcrumbs-list\n      :class=\"[breadcrumbsListClass, autoCollapse && !expanded ? breadcrumbsListNowrapClass : breadcrumbsListWrapClass]\"\n    >\n      <template v-for=\"(entry, position) in entries\" :key=\"entry.kind === 'item' ? `item-${entry.index}` : 'ellipsis'\">\n        <!--\n          Разделитель — отдельный элемент списка и помечен `aria-hidden`:\n          структуру пути диктору сообщает сам список, а «/» он бы читал вслух.\n        -->\n        <li\n          v-if=\"position > 0\"\n          data-gr-breadcrumbs-separator\n          :class=\"breadcrumbsSeparatorClass\"\n          aria-hidden=\"true\"\n        >\n          <slot name=\"separator\">\n            {{ resolvedSeparator }}\n          </slot>\n        </li>\n\n        <li v-if=\"entry.kind === 'ellipsis'\" data-gr-breadcrumbs-ellipsis-item class=\"min-w-0\">\n          <slot name=\"ellipsis\" :hidden-count=\"entry.hiddenCount\" :expand=\"expand\">\n            <button\n              type=\"button\"\n              data-gr-breadcrumbs-ellipsis\n              data-testid=\"gr-breadcrumbs-ellipsis\"\n              :class=\"breadcrumbsEllipsisClass\"\n              :aria-label=\"resolvedExpandLabel\"\n              @click=\"expand\"\n            >\n              …\n            </button>\n          </slot>\n        </li>\n\n        <li v-else data-gr-breadcrumbs-item-wrap :class=\"breadcrumbsItemWrapClass\">\n          <GrLink\n            v-if=\"isLink(entry.item, entry.index)\"\n            :key=\"`link-${entry.index}`\"\n            data-gr-breadcrumbs-item\n            :as=\"as\"\n            :href=\"entry.item.href\"\n            :to=\"entry.item.to\"\n            :size=\"resolvedSize\"\n            :variant=\"isCurrent(entry.index) ? 'default' : 'muted'\"\n            :aria-label=\"entry.item.ariaLabel\"\n            :aria-current=\"isCurrent(entry.index) ? 'page' : undefined\"\n          >\n            <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" :is-current=\"isCurrent(entry.index)\">\n              <component\n                :is=\"iconTag(entry.item.icon)\"\n                v-if=\"entry.item.icon\"\n                :class=\"[breadcrumbsItemIconClass, iconClass(entry.item.icon)]\"\n                aria-hidden=\"true\"\n              />\n              <span :class=\"labelClassFor(entry.item)\">{{ entry.item.label }}</span>\n            </slot>\n          </GrLink>\n\n          <!--\n            Текущая страница и выключенный пункт — не ссылки. `aria-current`\n            остаётся на текущем: именно он отвечает на вопрос «где я».\n          -->\n          <span\n            v-else\n            data-gr-breadcrumbs-item\n            :class=\"breadcrumbsCurrentClass\"\n            :aria-label=\"entry.item.ariaLabel\"\n            :aria-current=\"isCurrent(entry.index) ? 'page' : undefined\"\n            :aria-disabled=\"entry.item.disabled ? 'true' : undefined\"\n            tabindex=\"-1\"\n          >\n            <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" :is-current=\"isCurrent(entry.index)\">\n              <component\n                :is=\"iconTag(entry.item.icon)\"\n                v-if=\"entry.item.icon\"\n                :class=\"[breadcrumbsItemIconClass, iconClass(entry.item.icon)]\"\n                aria-hidden=\"true\"\n              />\n              <span :class=\"labelClassFor(entry.item)\">{{ entry.item.label }}</span>\n            </slot>\n          </span>\n        </li>\n      </template>\n    </ol>\n  </nav>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport GrLink from '../GrLink/GrLink.vue'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { iconClass, iconTag } from '../shared/icon'\n\nimport {\n  breadcrumbsCurrentClass,\n  breadcrumbsEllipsisClass,\n  breadcrumbsItemIconClass,\n  breadcrumbsItemWrapClass,\n  breadcrumbsLabelClass,\n  breadcrumbsLabelHiddenClass,\n  breadcrumbsListClass,\n  breadcrumbsListNowrapClass,\n  breadcrumbsListWrapClass,\n  breadcrumbsRootClass,\n  breadcrumbsSeparatorClass,\n  breadcrumbsSizeClassBySize,\n  type GrBreadcrumbItem,\n  type GrBreadcrumbsLinkComponent,\n  type GrBreadcrumbsSize,\n  resolveBreadcrumbsFit,\n  resolveBreadcrumbsLayout,\n} from './grBreadcrumbsStyles'\n\nexport type { GrBreadcrumbItem, GrBreadcrumbsSize } from './grBreadcrumbsStyles'\n\n/**\n * Путь до текущей страницы (WAI-ARIA breadcrumb): `<nav>` с именем, внутри\n * упорядоченный список ссылок, последний пункт — текущая страница.\n *\n * Ссылки рисует `GrLink`, поэтому роутер подключается тем же способом, что и\n * везде в пакете: `as` + `to`.\n */\nexport interface GrBreadcrumbsProps {\n  /** Путь от корня к текущей странице. Последний пункт — текущая страница. */\n  items: GrBreadcrumbItem[]\n  /** Компонент ссылки для всех пунктов: `RouterLink`, `NuxtLink`, `Link` Inertia. */\n  as?: GrBreadcrumbsLinkComponent\n  /** Разделитель между пунктами. Декоративен: диктору не читается. */\n  separator?: string\n  size?: GrBreadcrumbsSize\n  /**\n   * С какого числа пунктов схлопывать середину в «…». `0`/не задано — показывать\n   * путь целиком.\n   */\n  maxItems?: number\n  /** Сколько пунктов оставить в начале при схлопывании. */\n  itemsBeforeCollapse?: number\n  /** Сколько пунктов оставить в конце при схлопывании. */\n  itemsAfterCollapse?: number\n  /** Имя лендмарка. Не задано — берётся из локали. */\n  ariaLabel?: string\n  /** Последний пункт остаётся ссылкой (текущая страница кликабельна). */\n  linkCurrent?: boolean\n  /**\n   * Какой пункт — текущая страница. Не задан — последний.\n   *\n   * `-1` означает, что текущей страницы в пути нет: её имя стоит в `h1`, а\n   * путь показывает только родителей. Тогда `aria-current` не получает никто,\n   * и последний пункт остаётся обычной ссылкой.\n   */\n  currentIndex?: number\n  /** i18n-метка кнопки раскрытия схлопнутого пути. */\n  expandLabel?: string\n  /**\n   * Схлопывать по доступной ширине, а не по числу пунктов. Путь становится\n   * однострочным, середина уходит под «…» ровно настолько, насколько не влезает.\n   *\n   * Без пропа поведение прежнее: список переносится на вторую строку, а порог\n   * задаёт `maxItems`. Вместе пропы совместимы — `maxItems` остаётся жёстким\n   * потолком, ширина ужимает дальше.\n   */\n  autoCollapse?: boolean\n}\n\nconst props = withDefaults(defineProps<GrBreadcrumbsProps>(), {\n  as: undefined,\n  separator: undefined,\n  size: undefined,\n  maxItems: undefined,\n  itemsBeforeCollapse: 1,\n  itemsAfterCollapse: 1,\n  ariaLabel: undefined,\n  linkCurrent: false,\n  currentIndex: undefined,\n  expandLabel: undefined,\n  autoCollapse: false,\n})\n\ndefineSlots<{\n  /** Содержимое пункта целиком (иконка и подпись). */\n  item?: (props: { item: GrBreadcrumbItem, index: number, isCurrent: boolean }) => unknown\n  /** Разделитель между пунктами. */\n  separator?: () => unknown\n  /** Кнопка раскрытия схлопнутой середины. */\n  ellipsis?: (props: { hiddenCount: number, expand: () => void }) => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrBreadcrumbs' })\nconst resolvedSeparator = useGrComponentProp('GrBreadcrumbs', 'separator', () => props.separator, '/')\n\nconst resolvedAriaLabel = computed(() => props.ariaLabel ?? t('gr.breadcrumbs.label', 'Breadcrumb'))\nconst resolvedExpandLabel = computed(() => props.expandLabel ?? t('gr.breadcrumbs.expand', 'Show hidden path'))\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst listEl = ref<HTMLElement | null>(null)\nconst expanded = ref(false)\n\n/**\n * Схлопывание по ширине: сколько пунктов хвоста влезает.\n *\n * `undefined` — ещё не мерили, показываем путь целиком. Первый кадр в режиме\n * `autoCollapse` намеренно полный: ширины снимаются с него, а посчитать их до\n * рендера неоткуда.\n */\nconst fitAfter = ref<number | undefined>(undefined)\n\n/** Ширины не зависят от контейнера, поэтому живут до смены самого пути. */\nlet measured: { items: number[], separator: number } | null = null\n/**\n * Ширина кнопки «…» узнаётся только когда она отрисована, то есть уже после\n * первого схлопывания. До этого считаем её нулевой: поправка может лишь\n * ужать хвост ещё на пункт, а не вернуть спрятанное, поэтому качелей не будет.\n */\nlet ellipsisWidth = 0\n/** Ширина, на которой считали в прошлый раз: по её смене раскрытый путь сворачивается. */\nlet lastAvailable = 0\n\n// Новый путь — новая страница: раскрытая середина прошлого пути к ней отношения\n// не имеет, а измеренные ширины относятся к прошлым подписям.\nwatch(() => props.items, () => {\n  expanded.value = false\n  measured = null\n  ellipsisWidth = 0\n  fitAfter.value = undefined\n  void nextTick(measure)\n})\n\nconst lastIndex = computed(() => props.items.length - 1)\n\n/**\n * Схлопывание по ширине выражается через тот же `maxItems`: раскладку считает\n * одна функция, а режимы отличаются только тем, откуда взялось число.\n */\nconst autoMaxItems = computed(() => {\n  if (!props.autoCollapse || fitAfter.value === undefined) return undefined\n  if (fitAfter.value >= props.items.length) return undefined\n\n  return props.items.length - 1\n})\n\nconst effectiveMaxItems = computed(() => {\n  const limits = [props.maxItems, autoMaxItems.value].filter((value): value is number => typeof value === 'number' && value > 0)\n\n  return limits.length > 0 ? Math.min(...limits) : undefined\n})\n\nconst effectiveAfter = computed(() => (\n  props.autoCollapse && fitAfter.value !== undefined ? fitAfter.value : props.itemsAfterCollapse\n))\n\nconst entries = computed(() => resolveBreadcrumbsLayout({\n  items: props.items,\n  maxItems: effectiveMaxItems.value,\n  itemsBeforeCollapse: props.itemsBeforeCollapse,\n  itemsAfterCollapse: effectiveAfter.value,\n  expanded: expanded.value,\n}))\n\nconst resolvedCurrentIndex = computed(() => props.currentIndex ?? lastIndex.value)\n\nfunction isCurrent(index: number): boolean {\n  return index === resolvedCurrentIndex.value\n}\n\n/**\n * Класс подписи: у пункта-иконки она прячется визуально, но остаётся в\n * разметке — путь читают и поиском, и диктором.\n *\n * Без иконки поле игнорируется: спрятать подпись, не показав ничего взамен,\n * значит стереть пункт. Молчать тут нельзя — в разметке всё на месте, и\n * пропажу видно только глазами.\n */\nfunction labelClassFor(item: GrBreadcrumbItem): string {\n  if (!item.iconOnly) return breadcrumbsLabelClass\n\n  if (!item.icon) {\n    if (__GR_DEV__) {\n      console.warn(\n        `[granularity] GrBreadcrumbs: у пункта «${item.label}» стоит \\`iconOnly\\` без \\`icon\\`. `\n        + 'Подпись осталась видимой: прятать её, не показав иконку, значит стереть пункт.',\n      )\n    }\n\n    return breadcrumbsLabelClass\n  }\n\n  return breadcrumbsLabelHiddenClass\n}\n\n/**\n * Ссылкой пункт становится, только если ведёт куда-то и не выключен.\n */\nfunction isLink(item: GrBreadcrumbItem, index: number): boolean {\n  if (item.disabled) return false\n  if (isCurrent(index) && !props.linkCurrent) return false\n  return item.href !== undefined || item.to !== undefined\n}\n\nfunction widthOf(el: Element | null | undefined): number {\n  // `scrollWidth`, а не прямоугольник: у подписи стоит `truncate`, и в узком\n  // контейнере прямоугольник вернул бы уже ужатую ширину, а не собственную.\n  return el ? (el as HTMLElement).scrollWidth : 0\n}\n\n/**\n * Снять ширины с полного пути и пересчитать, сколько пунктов хвоста влезает.\n *\n * Замер делается один раз на путь: подписи от ширины контейнера не зависят,\n * поэтому `resize` пересчитывает только арифметику.\n */\nfunction measure(): void {\n  if (!props.autoCollapse) return\n\n  const list = listEl.value\n  if (!list) return\n\n  const ellipsis = list.querySelector('[data-gr-breadcrumbs-ellipsis-item]')\n  if (ellipsis) ellipsisWidth = widthOf(ellipsis)\n\n  if (!measured) {\n    // Ширины снимаем только с полного пути: спрятанных пунктов в DOM нет.\n    if (fitAfter.value !== undefined) return\n\n    const wraps = [...list.querySelectorAll('[data-gr-breadcrumbs-item-wrap]')]\n    if (wraps.length !== props.items.length) return\n\n    measured = {\n      items: wraps.map(widthOf),\n      separator: widthOf(list.querySelector('[data-gr-breadcrumbs-separator]')),\n    }\n  }\n\n  const available = list.clientWidth\n  // jsdom и скрытый контейнер отдают 0 — решать по такой ширине нечего.\n  if (available <= 0) return\n\n  lastAvailable = available\n\n  fitAfter.value = resolveBreadcrumbsFit({\n    itemWidths: measured.items,\n    separatorWidth: measured.separator,\n    ellipsisWidth,\n    available,\n    itemsBeforeCollapse: props.itemsBeforeCollapse,\n    gapWidth: listGap(list),\n  })\n}\n\n/** Зазор списка в пикселях: он задан классом, а не пропом, поэтому спрашиваем стиль. */\nfunction listGap(list: HTMLElement): number {\n  if (typeof getComputedStyle !== 'function') return 0\n\n  return Number.parseFloat(getComputedStyle(list).columnGap) || 0\n}\n\n/**\n * Ширина кнопки «…» известна только после того, как она отрисована, то есть\n * после первого схлопывания. Поэтому решение пересчитывается ещё раз: поправка\n * либо ничего не меняет, либо ужимает хвост на пункт. Цикла нет — второй проход\n * оставляет `fitAfter` прежним, и наблюдатель больше не срабатывает.\n */\nwatch(fitAfter, () => void nextTick(measure))\n\nlet observer: ResizeObserver | null = null\n\nwatch(() => props.autoCollapse, (enabled) => {\n  if (enabled) {\n    void nextTick(measure)\n    return\n  }\n\n  measured = null\n  ellipsisWidth = 0\n  fitAfter.value = undefined\n})\n\nonMounted(() => {\n  void nextTick(measure)\n\n  // На сервере и в jsdom `ResizeObserver` отсутствует — измерять там нечего.\n  if (typeof ResizeObserver === 'undefined') return\n\n  observer = new ResizeObserver(() => {\n    // Смена ширины — новая раскладка, и раскрытая руками середина относилась к\n    // прежней. Свернуть её иначе нечем: в раскрытом пути кнопки «…» нет, то есть\n    // поворот телефона оставлял бы путь развёрнутым навсегда. Высота меняется от\n    // самого раскрытия (путь переносится на вторую строку) — на неё не реагируем.\n    if (expanded.value && listEl.value && listEl.value.clientWidth !== lastAvailable)\n      expanded.value = false\n\n    measure()\n  })\n  if (listEl.value) observer.observe(listEl.value)\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n\nasync function expand(): Promise<void> {\n  expanded.value = true\n\n  // Кнопка исчезает вместе со схлопыванием, и фокус ушёл бы на `<body>`.\n  // Переводим его на первый раскрытый пункт — там, где кнопка и стояла. Пункты\n  // без ссылки держат `tabindex=\"-1\"` именно ради этого случая.\n  await nextTick()\n  const before = Math.max(0, Math.min(props.itemsBeforeCollapse, props.items.length))\n  const revealed = rootEl.value?.querySelectorAll<HTMLElement>('[data-gr-breadcrumbs-item]')\n  revealed?.[before]?.focus()\n}\n</script>\n\n<template>\n  <nav\n    ref=\"rootEl\"\n    data-gr-breadcrumbs\n    :class=\"[breadcrumbsRootClass, breadcrumbsSizeClassBySize[resolvedSize]]\"\n    :aria-label=\"resolvedAriaLabel\"\n  >\n    <ol\n      ref=\"listEl\"\n      data-gr-breadcrumbs-list\n      :class=\"[breadcrumbsListClass, autoCollapse && !expanded ? breadcrumbsListNowrapClass : breadcrumbsListWrapClass]\"\n    >\n      <template v-for=\"(entry, position) in entries\" :key=\"entry.kind === 'item' ? `item-${entry.index}` : 'ellipsis'\">\n        <!--\n          Разделитель — отдельный элемент списка и помечен `aria-hidden`:\n          структуру пути диктору сообщает сам список, а «/» он бы читал вслух.\n        -->\n        <li\n          v-if=\"position > 0\"\n          data-gr-breadcrumbs-separator\n          :class=\"breadcrumbsSeparatorClass\"\n          aria-hidden=\"true\"\n        >\n          <slot name=\"separator\">\n            {{ resolvedSeparator }}\n          </slot>\n        </li>\n\n        <li v-if=\"entry.kind === 'ellipsis'\" data-gr-breadcrumbs-ellipsis-item class=\"min-w-0\">\n          <slot name=\"ellipsis\" :hidden-count=\"entry.hiddenCount\" :expand=\"expand\">\n            <button\n              type=\"button\"\n              data-gr-breadcrumbs-ellipsis\n              data-testid=\"gr-breadcrumbs-ellipsis\"\n              :class=\"breadcrumbsEllipsisClass\"\n              :aria-label=\"resolvedExpandLabel\"\n              @click=\"expand\"\n            >\n              …\n            </button>\n          </slot>\n        </li>\n\n        <li v-else data-gr-breadcrumbs-item-wrap :class=\"breadcrumbsItemWrapClass\">\n          <GrLink\n            v-if=\"isLink(entry.item, entry.index)\"\n            :key=\"`link-${entry.index}`\"\n            data-gr-breadcrumbs-item\n            :as=\"as\"\n            :href=\"entry.item.href\"\n            :to=\"entry.item.to\"\n            :size=\"resolvedSize\"\n            :variant=\"isCurrent(entry.index) ? 'default' : 'muted'\"\n            :aria-label=\"entry.item.ariaLabel\"\n            :aria-current=\"isCurrent(entry.index) ? 'page' : undefined\"\n          >\n            <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" :is-current=\"isCurrent(entry.index)\">\n              <component\n                :is=\"iconTag(entry.item.icon)\"\n                v-if=\"entry.item.icon\"\n                :class=\"[breadcrumbsItemIconClass, iconClass(entry.item.icon)]\"\n                aria-hidden=\"true\"\n              />\n              <span :class=\"labelClassFor(entry.item)\">{{ entry.item.label }}</span>\n            </slot>\n          </GrLink>\n\n          <!--\n            Текущая страница и выключенный пункт — не ссылки. `aria-current`\n            остаётся на текущем: именно он отвечает на вопрос «где я».\n          -->\n          <span\n            v-else\n            data-gr-breadcrumbs-item\n            :class=\"breadcrumbsCurrentClass\"\n            :aria-label=\"entry.item.ariaLabel\"\n            :aria-current=\"isCurrent(entry.index) ? 'page' : undefined\"\n            :aria-disabled=\"entry.item.disabled ? 'true' : undefined\"\n            tabindex=\"-1\"\n          >\n            <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" :is-current=\"isCurrent(entry.index)\">\n              <component\n                :is=\"iconTag(entry.item.icon)\"\n                v-if=\"entry.item.icon\"\n                :class=\"[breadcrumbsItemIconClass, iconClass(entry.item.icon)]\"\n                aria-hidden=\"true\"\n              />\n              <span :class=\"labelClassFor(entry.item)\">{{ entry.item.label }}</span>\n            </slot>\n          </span>\n        </li>\n      </template>\n    </ol>\n  </nav>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"GrBreadcrumbs-DRDNan_n.js","names":[],"sources":["../../../../src/components/GrBreadcrumbs/GrBreadcrumbs.vue","../../../../src/components/GrBreadcrumbs/GrBreadcrumbs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport GrLink from '../GrLink/GrLink.vue'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { iconClass, iconTag } from '../shared/icon'\n\nimport {\n  breadcrumbsCurrentClass,\n  breadcrumbsEllipsisClass,\n  breadcrumbsItemIconClass,\n  breadcrumbsItemWrapClass,\n  breadcrumbsLabelClass,\n  breadcrumbsLabelHiddenClass,\n  breadcrumbsListClass,\n  breadcrumbsListNowrapClass,\n  breadcrumbsListWrapClass,\n  breadcrumbsRootClass,\n  breadcrumbsSeparatorClass,\n  breadcrumbsSizeClassBySize,\n  type GrBreadcrumbItem,\n  type GrBreadcrumbsLinkComponent,\n  type GrBreadcrumbsSize,\n  resolveBreadcrumbsFit,\n  resolveBreadcrumbsLayout,\n} from './grBreadcrumbsStyles'\n\nexport type { GrBreadcrumbItem, GrBreadcrumbsSize } from './grBreadcrumbsStyles'\n\n/**\n * Путь до текущей страницы (WAI-ARIA breadcrumb): `<nav>` с именем, внутри\n * упорядоченный список ссылок, последний пункт — текущая страница.\n *\n * Ссылки рисует `GrLink`, поэтому роутер подключается тем же способом, что и\n * везде в пакете: `as` + `to`.\n */\nexport interface GrBreadcrumbsProps {\n  /** Путь от корня к текущей странице. Последний пункт — текущая страница. */\n  items: GrBreadcrumbItem[]\n  /** Компонент ссылки для всех пунктов: `RouterLink`, `NuxtLink`, `Link` Inertia. */\n  as?: GrBreadcrumbsLinkComponent\n  /** Разделитель между пунктами. Декоративен: диктору не читается. */\n  separator?: string\n  size?: GrBreadcrumbsSize\n  /**\n   * С какого числа пунктов схлопывать середину в «…». `0`/не задано — показывать\n   * путь целиком.\n   */\n  maxItems?: number\n  /** Сколько пунктов оставить в начале при схлопывании. */\n  itemsBeforeCollapse?: number\n  /** Сколько пунктов оставить в конце при схлопывании. */\n  itemsAfterCollapse?: number\n  /** Имя лендмарка. Не задано — берётся из локали. */\n  ariaLabel?: string\n  /** Последний пункт остаётся ссылкой (текущая страница кликабельна). */\n  linkCurrent?: boolean\n  /**\n   * Какой пункт — текущая страница. Не задан — последний.\n   *\n   * `-1` означает, что текущей страницы в пути нет: её имя стоит в `h1`, а\n   * путь показывает только родителей. Тогда `aria-current` не получает никто,\n   * и последний пункт остаётся обычной ссылкой.\n   */\n  currentIndex?: number\n  /** i18n-метка кнопки раскрытия схлопнутого пути. */\n  expandLabel?: string\n  /**\n   * Схлопывать по доступной ширине, а не по числу пунктов. Путь становится\n   * однострочным, середина уходит под «…» ровно настолько, насколько не влезает.\n   *\n   * Без пропа поведение прежнее: список переносится на вторую строку, а порог\n   * задаёт `maxItems`. Вместе пропы совместимы — `maxItems` остаётся жёстким\n   * потолком, ширина ужимает дальше.\n   */\n  autoCollapse?: boolean\n}\n\nconst props = withDefaults(defineProps<GrBreadcrumbsProps>(), {\n  as: undefined,\n  separator: undefined,\n  size: undefined,\n  maxItems: undefined,\n  itemsBeforeCollapse: 1,\n  itemsAfterCollapse: 1,\n  ariaLabel: undefined,\n  linkCurrent: false,\n  currentIndex: undefined,\n  expandLabel: undefined,\n  autoCollapse: false,\n})\n\ndefineSlots<{\n  /** Содержимое пункта целиком (иконка и подпись). */\n  item?: (props: { item: GrBreadcrumbItem, index: number, isCurrent: boolean }) => unknown\n  /** Разделитель между пунктами. */\n  separator?: () => unknown\n  /** Кнопка раскрытия схлопнутой середины. */\n  ellipsis?: (props: { hiddenCount: number, expand: () => void }) => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrBreadcrumbs' })\nconst resolvedSeparator = useGrComponentProp('GrBreadcrumbs', 'separator', () => props.separator, '/')\n\nconst resolvedAriaLabel = computed(() => props.ariaLabel ?? t('gr.breadcrumbs.label', 'Breadcrumb'))\nconst resolvedExpandLabel = computed(() => props.expandLabel ?? t('gr.breadcrumbs.expand', 'Show hidden path'))\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst listEl = ref<HTMLElement | null>(null)\nconst expanded = ref(false)\n\n/**\n * Схлопывание по ширине: сколько пунктов хвоста влезает.\n *\n * `undefined` — ещё не мерили, показываем путь целиком. Первый кадр в режиме\n * `autoCollapse` намеренно полный: ширины снимаются с него, а посчитать их до\n * рендера неоткуда.\n */\nconst fitAfter = ref<number | undefined>(undefined)\n\n/** Ширины не зависят от контейнера, поэтому живут до смены самого пути. */\nlet measured: { items: number[], separator: number } | null = null\n/**\n * Ширина кнопки «…» узнаётся только когда она отрисована, то есть уже после\n * первого схлопывания. До этого считаем её нулевой: поправка может лишь\n * ужать хвост ещё на пункт, а не вернуть спрятанное, поэтому качелей не будет.\n */\nlet ellipsisWidth = 0\n/** Ширина, на которой считали в прошлый раз: по её смене раскрытый путь сворачивается. */\nlet lastAvailable = 0\n\n// Новый путь — новая страница: раскрытая середина прошлого пути к ней отношения\n// не имеет, а измеренные ширины относятся к прошлым подписям.\nwatch(() => props.items, () => {\n  expanded.value = false\n  measured = null\n  ellipsisWidth = 0\n  fitAfter.value = undefined\n  void nextTick(measure)\n})\n\nconst lastIndex = computed(() => props.items.length - 1)\n\n/**\n * Схлопывание по ширине выражается через тот же `maxItems`: раскладку считает\n * одна функция, а режимы отличаются только тем, откуда взялось число.\n */\nconst autoMaxItems = computed(() => {\n  if (!props.autoCollapse || fitAfter.value === undefined)\n    return undefined\n  if (fitAfter.value >= props.items.length)\n    return undefined\n\n  return props.items.length - 1\n})\n\nconst effectiveMaxItems = computed(() => {\n  const limits = [props.maxItems, autoMaxItems.value].filter((value): value is number => typeof value === 'number' && value > 0)\n\n  return limits.length > 0 ? Math.min(...limits) : undefined\n})\n\nconst effectiveAfter = computed(() => (\n  props.autoCollapse && fitAfter.value !== undefined ? fitAfter.value : props.itemsAfterCollapse\n))\n\nconst entries = computed(() => resolveBreadcrumbsLayout({\n  items: props.items,\n  maxItems: effectiveMaxItems.value,\n  itemsBeforeCollapse: props.itemsBeforeCollapse,\n  itemsAfterCollapse: effectiveAfter.value,\n  expanded: expanded.value,\n}))\n\nconst resolvedCurrentIndex = computed(() => props.currentIndex ?? lastIndex.value)\n\nfunction isCurrent(index: number): boolean {\n  return index === resolvedCurrentIndex.value\n}\n\n/**\n * Класс подписи: у пункта-иконки она прячется визуально, но остаётся в\n * разметке — путь читают и поиском, и диктором.\n *\n * Без иконки поле игнорируется: спрятать подпись, не показав ничего взамен,\n * значит стереть пункт. Молчать тут нельзя — в разметке всё на месте, и\n * пропажу видно только глазами.\n */\nfunction labelClassFor(item: GrBreadcrumbItem): string {\n  if (!item.iconOnly)\n    return breadcrumbsLabelClass\n\n  if (!item.icon) {\n    if (__GR_DEV__) {\n      console.warn(\n        `[granularity] GrBreadcrumbs: у пункта «${item.label}» стоит \\`iconOnly\\` без \\`icon\\`. `\n        + 'Подпись осталась видимой: прятать её, не показав иконку, значит стереть пункт.',\n      )\n    }\n\n    return breadcrumbsLabelClass\n  }\n\n  return breadcrumbsLabelHiddenClass\n}\n\n/**\n * Ссылкой пункт становится, только если ведёт куда-то и не выключен.\n */\nfunction isLink(item: GrBreadcrumbItem, index: number): boolean {\n  if (item.disabled)\n    return false\n  if (isCurrent(index) && !props.linkCurrent)\n    return false\n  return item.href !== undefined || item.to !== undefined\n}\n\nfunction widthOf(el: Element | null | undefined): number {\n  // `scrollWidth`, а не прямоугольник: у подписи стоит `truncate`, и в узком\n  // контейнере прямоугольник вернул бы уже ужатую ширину, а не собственную.\n  return el ? (el as HTMLElement).scrollWidth : 0\n}\n\n/**\n * Снять ширины с полного пути и пересчитать, сколько пунктов хвоста влезает.\n *\n * Замер делается один раз на путь: подписи от ширины контейнера не зависят,\n * поэтому `resize` пересчитывает только арифметику.\n */\nfunction measure(): void {\n  if (!props.autoCollapse)\n    return\n\n  const list = listEl.value\n  if (!list)\n    return\n\n  const ellipsis = list.querySelector('[data-gr-breadcrumbs-ellipsis-item]')\n  if (ellipsis)\n    ellipsisWidth = widthOf(ellipsis)\n\n  if (!measured) {\n    // Ширины снимаем только с полного пути: спрятанных пунктов в DOM нет.\n    if (fitAfter.value !== undefined)\n      return\n\n    const wraps = [...list.querySelectorAll('[data-gr-breadcrumbs-item-wrap]')]\n    if (wraps.length !== props.items.length)\n      return\n\n    measured = {\n      items: wraps.map(widthOf),\n      separator: widthOf(list.querySelector('[data-gr-breadcrumbs-separator]')),\n    }\n  }\n\n  const available = list.clientWidth\n  // jsdom и скрытый контейнер отдают 0 — решать по такой ширине нечего.\n  if (available <= 0)\n    return\n\n  lastAvailable = available\n\n  fitAfter.value = resolveBreadcrumbsFit({\n    itemWidths: measured.items,\n    separatorWidth: measured.separator,\n    ellipsisWidth,\n    available,\n    itemsBeforeCollapse: props.itemsBeforeCollapse,\n    gapWidth: listGap(list),\n  })\n}\n\n/** Зазор списка в пикселях: он задан классом, а не пропом, поэтому спрашиваем стиль. */\nfunction listGap(list: HTMLElement): number {\n  if (typeof getComputedStyle !== 'function')\n    return 0\n\n  return Number.parseFloat(getComputedStyle(list).columnGap) || 0\n}\n\n/**\n * Ширина кнопки «…» известна только после того, как она отрисована, то есть\n * после первого схлопывания. Поэтому решение пересчитывается ещё раз: поправка\n * либо ничего не меняет, либо ужимает хвост на пункт. Цикла нет — второй проход\n * оставляет `fitAfter` прежним, и наблюдатель больше не срабатывает.\n */\nwatch(fitAfter, () => void nextTick(measure))\n\nlet observer: ResizeObserver | null = null\n\nwatch(() => props.autoCollapse, (enabled) => {\n  if (enabled) {\n    void nextTick(measure)\n    return\n  }\n\n  measured = null\n  ellipsisWidth = 0\n  fitAfter.value = undefined\n})\n\nonMounted(() => {\n  void nextTick(measure)\n\n  // На сервере и в jsdom `ResizeObserver` отсутствует — измерять там нечего.\n  if (typeof ResizeObserver === 'undefined')\n    return\n\n  observer = new ResizeObserver(() => {\n    // Смена ширины — новая раскладка, и раскрытая руками середина относилась к\n    // прежней. Свернуть её иначе нечем: в раскрытом пути кнопки «…» нет, то есть\n    // поворот телефона оставлял бы путь развёрнутым навсегда. Высота меняется от\n    // самого раскрытия (путь переносится на вторую строку) — на неё не реагируем.\n    if (expanded.value && listEl.value && listEl.value.clientWidth !== lastAvailable)\n      expanded.value = false\n\n    measure()\n  })\n  if (listEl.value)\n    observer.observe(listEl.value)\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n\nasync function expand(): Promise<void> {\n  expanded.value = true\n\n  // Кнопка исчезает вместе со схлопыванием, и фокус ушёл бы на `<body>`.\n  // Переводим его на первый раскрытый пункт — там, где кнопка и стояла. Пункты\n  // без ссылки держат `tabindex=\"-1\"` именно ради этого случая.\n  await nextTick()\n  const before = Math.max(0, Math.min(props.itemsBeforeCollapse, props.items.length))\n  const revealed = rootEl.value?.querySelectorAll<HTMLElement>('[data-gr-breadcrumbs-item]')\n  revealed?.[before]?.focus()\n}\n</script>\n\n<template>\n  <nav\n    ref=\"rootEl\"\n    data-gr-breadcrumbs\n    :class=\"[breadcrumbsRootClass, breadcrumbsSizeClassBySize[resolvedSize]]\"\n    :aria-label=\"resolvedAriaLabel\"\n  >\n    <ol\n      ref=\"listEl\"\n      data-gr-breadcrumbs-list\n      :class=\"[breadcrumbsListClass, autoCollapse && !expanded ? breadcrumbsListNowrapClass : breadcrumbsListWrapClass]\"\n    >\n      <template v-for=\"(entry, position) in entries\" :key=\"entry.kind === 'item' ? `item-${entry.index}` : 'ellipsis'\">\n        <!--\n          Разделитель — отдельный элемент списка и помечен `aria-hidden`:\n          структуру пути диктору сообщает сам список, а «/» он бы читал вслух.\n        -->\n        <li\n          v-if=\"position > 0\"\n          data-gr-breadcrumbs-separator\n          :class=\"breadcrumbsSeparatorClass\"\n          aria-hidden=\"true\"\n        >\n          <slot name=\"separator\">\n            {{ resolvedSeparator }}\n          </slot>\n        </li>\n\n        <li v-if=\"entry.kind === 'ellipsis'\" data-gr-breadcrumbs-ellipsis-item class=\"min-w-0\">\n          <slot name=\"ellipsis\" :hidden-count=\"entry.hiddenCount\" :expand=\"expand\">\n            <button\n              type=\"button\"\n              data-gr-breadcrumbs-ellipsis\n              data-testid=\"gr-breadcrumbs-ellipsis\"\n              :class=\"breadcrumbsEllipsisClass\"\n              :aria-label=\"resolvedExpandLabel\"\n              @click=\"expand\"\n            >\n              …\n            </button>\n          </slot>\n        </li>\n\n        <li v-else data-gr-breadcrumbs-item-wrap :class=\"breadcrumbsItemWrapClass\">\n          <GrLink\n            v-if=\"isLink(entry.item, entry.index)\"\n            :key=\"`link-${entry.index}`\"\n            data-gr-breadcrumbs-item\n            :as=\"as\"\n            :href=\"entry.item.href\"\n            :to=\"entry.item.to\"\n            :size=\"resolvedSize\"\n            :variant=\"isCurrent(entry.index) ? 'default' : 'muted'\"\n            :aria-label=\"entry.item.ariaLabel\"\n            :aria-current=\"isCurrent(entry.index) ? 'page' : undefined\"\n          >\n            <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" :is-current=\"isCurrent(entry.index)\">\n              <component\n                :is=\"iconTag(entry.item.icon)\"\n                v-if=\"entry.item.icon\"\n                :class=\"[breadcrumbsItemIconClass, iconClass(entry.item.icon)]\"\n                aria-hidden=\"true\"\n              />\n              <span :class=\"labelClassFor(entry.item)\">{{ entry.item.label }}</span>\n            </slot>\n          </GrLink>\n\n          <!--\n            Текущая страница и выключенный пункт — не ссылки. `aria-current`\n            остаётся на текущем: именно он отвечает на вопрос «где я».\n          -->\n          <span\n            v-else\n            data-gr-breadcrumbs-item\n            :class=\"breadcrumbsCurrentClass\"\n            :aria-label=\"entry.item.ariaLabel\"\n            :aria-current=\"isCurrent(entry.index) ? 'page' : undefined\"\n            :aria-disabled=\"entry.item.disabled ? 'true' : undefined\"\n            tabindex=\"-1\"\n          >\n            <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" :is-current=\"isCurrent(entry.index)\">\n              <component\n                :is=\"iconTag(entry.item.icon)\"\n                v-if=\"entry.item.icon\"\n                :class=\"[breadcrumbsItemIconClass, iconClass(entry.item.icon)]\"\n                aria-hidden=\"true\"\n              />\n              <span :class=\"labelClassFor(entry.item)\">{{ entry.item.label }}</span>\n            </slot>\n          </span>\n        </li>\n      </template>\n    </ol>\n  </nav>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport GrLink from '../GrLink/GrLink.vue'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { iconClass, iconTag } from '../shared/icon'\n\nimport {\n  breadcrumbsCurrentClass,\n  breadcrumbsEllipsisClass,\n  breadcrumbsItemIconClass,\n  breadcrumbsItemWrapClass,\n  breadcrumbsLabelClass,\n  breadcrumbsLabelHiddenClass,\n  breadcrumbsListClass,\n  breadcrumbsListNowrapClass,\n  breadcrumbsListWrapClass,\n  breadcrumbsRootClass,\n  breadcrumbsSeparatorClass,\n  breadcrumbsSizeClassBySize,\n  type GrBreadcrumbItem,\n  type GrBreadcrumbsLinkComponent,\n  type GrBreadcrumbsSize,\n  resolveBreadcrumbsFit,\n  resolveBreadcrumbsLayout,\n} from './grBreadcrumbsStyles'\n\nexport type { GrBreadcrumbItem, GrBreadcrumbsSize } from './grBreadcrumbsStyles'\n\n/**\n * Путь до текущей страницы (WAI-ARIA breadcrumb): `<nav>` с именем, внутри\n * упорядоченный список ссылок, последний пункт — текущая страница.\n *\n * Ссылки рисует `GrLink`, поэтому роутер подключается тем же способом, что и\n * везде в пакете: `as` + `to`.\n */\nexport interface GrBreadcrumbsProps {\n  /** Путь от корня к текущей странице. Последний пункт — текущая страница. */\n  items: GrBreadcrumbItem[]\n  /** Компонент ссылки для всех пунктов: `RouterLink`, `NuxtLink`, `Link` Inertia. */\n  as?: GrBreadcrumbsLinkComponent\n  /** Разделитель между пунктами. Декоративен: диктору не читается. */\n  separator?: string\n  size?: GrBreadcrumbsSize\n  /**\n   * С какого числа пунктов схлопывать середину в «…». `0`/не задано — показывать\n   * путь целиком.\n   */\n  maxItems?: number\n  /** Сколько пунктов оставить в начале при схлопывании. */\n  itemsBeforeCollapse?: number\n  /** Сколько пунктов оставить в конце при схлопывании. */\n  itemsAfterCollapse?: number\n  /** Имя лендмарка. Не задано — берётся из локали. */\n  ariaLabel?: string\n  /** Последний пункт остаётся ссылкой (текущая страница кликабельна). */\n  linkCurrent?: boolean\n  /**\n   * Какой пункт — текущая страница. Не задан — последний.\n   *\n   * `-1` означает, что текущей страницы в пути нет: её имя стоит в `h1`, а\n   * путь показывает только родителей. Тогда `aria-current` не получает никто,\n   * и последний пункт остаётся обычной ссылкой.\n   */\n  currentIndex?: number\n  /** i18n-метка кнопки раскрытия схлопнутого пути. */\n  expandLabel?: string\n  /**\n   * Схлопывать по доступной ширине, а не по числу пунктов. Путь становится\n   * однострочным, середина уходит под «…» ровно настолько, насколько не влезает.\n   *\n   * Без пропа поведение прежнее: список переносится на вторую строку, а порог\n   * задаёт `maxItems`. Вместе пропы совместимы — `maxItems` остаётся жёстким\n   * потолком, ширина ужимает дальше.\n   */\n  autoCollapse?: boolean\n}\n\nconst props = withDefaults(defineProps<GrBreadcrumbsProps>(), {\n  as: undefined,\n  separator: undefined,\n  size: undefined,\n  maxItems: undefined,\n  itemsBeforeCollapse: 1,\n  itemsAfterCollapse: 1,\n  ariaLabel: undefined,\n  linkCurrent: false,\n  currentIndex: undefined,\n  expandLabel: undefined,\n  autoCollapse: false,\n})\n\ndefineSlots<{\n  /** Содержимое пункта целиком (иконка и подпись). */\n  item?: (props: { item: GrBreadcrumbItem, index: number, isCurrent: boolean }) => unknown\n  /** Разделитель между пунктами. */\n  separator?: () => unknown\n  /** Кнопка раскрытия схлопнутой середины. */\n  ellipsis?: (props: { hiddenCount: number, expand: () => void }) => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrBreadcrumbs' })\nconst resolvedSeparator = useGrComponentProp('GrBreadcrumbs', 'separator', () => props.separator, '/')\n\nconst resolvedAriaLabel = computed(() => props.ariaLabel ?? t('gr.breadcrumbs.label', 'Breadcrumb'))\nconst resolvedExpandLabel = computed(() => props.expandLabel ?? t('gr.breadcrumbs.expand', 'Show hidden path'))\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst listEl = ref<HTMLElement | null>(null)\nconst expanded = ref(false)\n\n/**\n * Схлопывание по ширине: сколько пунктов хвоста влезает.\n *\n * `undefined` — ещё не мерили, показываем путь целиком. Первый кадр в режиме\n * `autoCollapse` намеренно полный: ширины снимаются с него, а посчитать их до\n * рендера неоткуда.\n */\nconst fitAfter = ref<number | undefined>(undefined)\n\n/** Ширины не зависят от контейнера, поэтому живут до смены самого пути. */\nlet measured: { items: number[], separator: number } | null = null\n/**\n * Ширина кнопки «…» узнаётся только когда она отрисована, то есть уже после\n * первого схлопывания. До этого считаем её нулевой: поправка может лишь\n * ужать хвост ещё на пункт, а не вернуть спрятанное, поэтому качелей не будет.\n */\nlet ellipsisWidth = 0\n/** Ширина, на которой считали в прошлый раз: по её смене раскрытый путь сворачивается. */\nlet lastAvailable = 0\n\n// Новый путь — новая страница: раскрытая середина прошлого пути к ней отношения\n// не имеет, а измеренные ширины относятся к прошлым подписям.\nwatch(() => props.items, () => {\n  expanded.value = false\n  measured = null\n  ellipsisWidth = 0\n  fitAfter.value = undefined\n  void nextTick(measure)\n})\n\nconst lastIndex = computed(() => props.items.length - 1)\n\n/**\n * Схлопывание по ширине выражается через тот же `maxItems`: раскладку считает\n * одна функция, а режимы отличаются только тем, откуда взялось число.\n */\nconst autoMaxItems = computed(() => {\n  if (!props.autoCollapse || fitAfter.value === undefined)\n    return undefined\n  if (fitAfter.value >= props.items.length)\n    return undefined\n\n  return props.items.length - 1\n})\n\nconst effectiveMaxItems = computed(() => {\n  const limits = [props.maxItems, autoMaxItems.value].filter((value): value is number => typeof value === 'number' && value > 0)\n\n  return limits.length > 0 ? Math.min(...limits) : undefined\n})\n\nconst effectiveAfter = computed(() => (\n  props.autoCollapse && fitAfter.value !== undefined ? fitAfter.value : props.itemsAfterCollapse\n))\n\nconst entries = computed(() => resolveBreadcrumbsLayout({\n  items: props.items,\n  maxItems: effectiveMaxItems.value,\n  itemsBeforeCollapse: props.itemsBeforeCollapse,\n  itemsAfterCollapse: effectiveAfter.value,\n  expanded: expanded.value,\n}))\n\nconst resolvedCurrentIndex = computed(() => props.currentIndex ?? lastIndex.value)\n\nfunction isCurrent(index: number): boolean {\n  return index === resolvedCurrentIndex.value\n}\n\n/**\n * Класс подписи: у пункта-иконки она прячется визуально, но остаётся в\n * разметке — путь читают и поиском, и диктором.\n *\n * Без иконки поле игнорируется: спрятать подпись, не показав ничего взамен,\n * значит стереть пункт. Молчать тут нельзя — в разметке всё на месте, и\n * пропажу видно только глазами.\n */\nfunction labelClassFor(item: GrBreadcrumbItem): string {\n  if (!item.iconOnly)\n    return breadcrumbsLabelClass\n\n  if (!item.icon) {\n    if (__GR_DEV__) {\n      console.warn(\n        `[granularity] GrBreadcrumbs: у пункта «${item.label}» стоит \\`iconOnly\\` без \\`icon\\`. `\n        + 'Подпись осталась видимой: прятать её, не показав иконку, значит стереть пункт.',\n      )\n    }\n\n    return breadcrumbsLabelClass\n  }\n\n  return breadcrumbsLabelHiddenClass\n}\n\n/**\n * Ссылкой пункт становится, только если ведёт куда-то и не выключен.\n */\nfunction isLink(item: GrBreadcrumbItem, index: number): boolean {\n  if (item.disabled)\n    return false\n  if (isCurrent(index) && !props.linkCurrent)\n    return false\n  return item.href !== undefined || item.to !== undefined\n}\n\nfunction widthOf(el: Element | null | undefined): number {\n  // `scrollWidth`, а не прямоугольник: у подписи стоит `truncate`, и в узком\n  // контейнере прямоугольник вернул бы уже ужатую ширину, а не собственную.\n  return el ? (el as HTMLElement).scrollWidth : 0\n}\n\n/**\n * Снять ширины с полного пути и пересчитать, сколько пунктов хвоста влезает.\n *\n * Замер делается один раз на путь: подписи от ширины контейнера не зависят,\n * поэтому `resize` пересчитывает только арифметику.\n */\nfunction measure(): void {\n  if (!props.autoCollapse)\n    return\n\n  const list = listEl.value\n  if (!list)\n    return\n\n  const ellipsis = list.querySelector('[data-gr-breadcrumbs-ellipsis-item]')\n  if (ellipsis)\n    ellipsisWidth = widthOf(ellipsis)\n\n  if (!measured) {\n    // Ширины снимаем только с полного пути: спрятанных пунктов в DOM нет.\n    if (fitAfter.value !== undefined)\n      return\n\n    const wraps = [...list.querySelectorAll('[data-gr-breadcrumbs-item-wrap]')]\n    if (wraps.length !== props.items.length)\n      return\n\n    measured = {\n      items: wraps.map(widthOf),\n      separator: widthOf(list.querySelector('[data-gr-breadcrumbs-separator]')),\n    }\n  }\n\n  const available = list.clientWidth\n  // jsdom и скрытый контейнер отдают 0 — решать по такой ширине нечего.\n  if (available <= 0)\n    return\n\n  lastAvailable = available\n\n  fitAfter.value = resolveBreadcrumbsFit({\n    itemWidths: measured.items,\n    separatorWidth: measured.separator,\n    ellipsisWidth,\n    available,\n    itemsBeforeCollapse: props.itemsBeforeCollapse,\n    gapWidth: listGap(list),\n  })\n}\n\n/** Зазор списка в пикселях: он задан классом, а не пропом, поэтому спрашиваем стиль. */\nfunction listGap(list: HTMLElement): number {\n  if (typeof getComputedStyle !== 'function')\n    return 0\n\n  return Number.parseFloat(getComputedStyle(list).columnGap) || 0\n}\n\n/**\n * Ширина кнопки «…» известна только после того, как она отрисована, то есть\n * после первого схлопывания. Поэтому решение пересчитывается ещё раз: поправка\n * либо ничего не меняет, либо ужимает хвост на пункт. Цикла нет — второй проход\n * оставляет `fitAfter` прежним, и наблюдатель больше не срабатывает.\n */\nwatch(fitAfter, () => void nextTick(measure))\n\nlet observer: ResizeObserver | null = null\n\nwatch(() => props.autoCollapse, (enabled) => {\n  if (enabled) {\n    void nextTick(measure)\n    return\n  }\n\n  measured = null\n  ellipsisWidth = 0\n  fitAfter.value = undefined\n})\n\nonMounted(() => {\n  void nextTick(measure)\n\n  // На сервере и в jsdom `ResizeObserver` отсутствует — измерять там нечего.\n  if (typeof ResizeObserver === 'undefined')\n    return\n\n  observer = new ResizeObserver(() => {\n    // Смена ширины — новая раскладка, и раскрытая руками середина относилась к\n    // прежней. Свернуть её иначе нечем: в раскрытом пути кнопки «…» нет, то есть\n    // поворот телефона оставлял бы путь развёрнутым навсегда. Высота меняется от\n    // самого раскрытия (путь переносится на вторую строку) — на неё не реагируем.\n    if (expanded.value && listEl.value && listEl.value.clientWidth !== lastAvailable)\n      expanded.value = false\n\n    measure()\n  })\n  if (listEl.value)\n    observer.observe(listEl.value)\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n\nasync function expand(): Promise<void> {\n  expanded.value = true\n\n  // Кнопка исчезает вместе со схлопыванием, и фокус ушёл бы на `<body>`.\n  // Переводим его на первый раскрытый пункт — там, где кнопка и стояла. Пункты\n  // без ссылки держат `tabindex=\"-1\"` именно ради этого случая.\n  await nextTick()\n  const before = Math.max(0, Math.min(props.itemsBeforeCollapse, props.items.length))\n  const revealed = rootEl.value?.querySelectorAll<HTMLElement>('[data-gr-breadcrumbs-item]')\n  revealed?.[before]?.focus()\n}\n</script>\n\n<template>\n  <nav\n    ref=\"rootEl\"\n    data-gr-breadcrumbs\n    :class=\"[breadcrumbsRootClass, breadcrumbsSizeClassBySize[resolvedSize]]\"\n    :aria-label=\"resolvedAriaLabel\"\n  >\n    <ol\n      ref=\"listEl\"\n      data-gr-breadcrumbs-list\n      :class=\"[breadcrumbsListClass, autoCollapse && !expanded ? breadcrumbsListNowrapClass : breadcrumbsListWrapClass]\"\n    >\n      <template v-for=\"(entry, position) in entries\" :key=\"entry.kind === 'item' ? `item-${entry.index}` : 'ellipsis'\">\n        <!--\n          Разделитель — отдельный элемент списка и помечен `aria-hidden`:\n          структуру пути диктору сообщает сам список, а «/» он бы читал вслух.\n        -->\n        <li\n          v-if=\"position > 0\"\n          data-gr-breadcrumbs-separator\n          :class=\"breadcrumbsSeparatorClass\"\n          aria-hidden=\"true\"\n        >\n          <slot name=\"separator\">\n            {{ resolvedSeparator }}\n          </slot>\n        </li>\n\n        <li v-if=\"entry.kind === 'ellipsis'\" data-gr-breadcrumbs-ellipsis-item class=\"min-w-0\">\n          <slot name=\"ellipsis\" :hidden-count=\"entry.hiddenCount\" :expand=\"expand\">\n            <button\n              type=\"button\"\n              data-gr-breadcrumbs-ellipsis\n              data-testid=\"gr-breadcrumbs-ellipsis\"\n              :class=\"breadcrumbsEllipsisClass\"\n              :aria-label=\"resolvedExpandLabel\"\n              @click=\"expand\"\n            >\n              …\n            </button>\n          </slot>\n        </li>\n\n        <li v-else data-gr-breadcrumbs-item-wrap :class=\"breadcrumbsItemWrapClass\">\n          <GrLink\n            v-if=\"isLink(entry.item, entry.index)\"\n            :key=\"`link-${entry.index}`\"\n            data-gr-breadcrumbs-item\n            :as=\"as\"\n            :href=\"entry.item.href\"\n            :to=\"entry.item.to\"\n            :size=\"resolvedSize\"\n            :variant=\"isCurrent(entry.index) ? 'default' : 'muted'\"\n            :aria-label=\"entry.item.ariaLabel\"\n            :aria-current=\"isCurrent(entry.index) ? 'page' : undefined\"\n          >\n            <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" :is-current=\"isCurrent(entry.index)\">\n              <component\n                :is=\"iconTag(entry.item.icon)\"\n                v-if=\"entry.item.icon\"\n                :class=\"[breadcrumbsItemIconClass, iconClass(entry.item.icon)]\"\n                aria-hidden=\"true\"\n              />\n              <span :class=\"labelClassFor(entry.item)\">{{ entry.item.label }}</span>\n            </slot>\n          </GrLink>\n\n          <!--\n            Текущая страница и выключенный пункт — не ссылки. `aria-current`\n            остаётся на текущем: именно он отвечает на вопрос «где я».\n          -->\n          <span\n            v-else\n            data-gr-breadcrumbs-item\n            :class=\"breadcrumbsCurrentClass\"\n            :aria-label=\"entry.item.ariaLabel\"\n            :aria-current=\"isCurrent(entry.index) ? 'page' : undefined\"\n            :aria-disabled=\"entry.item.disabled ? 'true' : undefined\"\n            tabindex=\"-1\"\n          >\n            <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" :is-current=\"isCurrent(entry.index)\">\n              <component\n                :is=\"iconTag(entry.item.icon)\"\n                v-if=\"entry.item.icon\"\n                :class=\"[breadcrumbsItemIconClass, iconClass(entry.item.icon)]\"\n                aria-hidden=\"true\"\n              />\n              <span :class=\"labelClassFor(entry.item)\">{{ entry.item.label }}</span>\n            </slot>\n          </span>\n        </li>\n      </template>\n    </ol>\n  </nav>\n</template>\n"],"mappings":"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"}

package/dist/components/GrButton/chunks/{GrButton-Bw2AH4uX.js → GrButton-7GP0zObj.js}

@@ -2,7 +2,7 @@ import { a as useGrComponentSize, i as useGrComponentProp } from "../../../chunk
 import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
 import { t as loader_circle_default } from "../../../chunks/loader-circle-CfVLz7lb.js";
 import { n as useGrButtonGroup } from "../../../chunks/context-BfIQv7m1.js";
-import { a as grButtonClass, i as grButtonBaseClass } from "../../../chunks/grButtonStyles-B_-YRE__.js";
+import { a as grButtonClass, i as grButtonBaseClass } from "../../../chunks/grButtonStyles-B3wRWW_i.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, markRaw, normalizeClass, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
 //#region src/components/GrButton/GrButton.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {