@feugene/granularity 0.18.0 → 0.20.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"GrBreadcrumbs-CQ44iU2o.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  breadcrumbsLabelClass,\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  /** 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  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\nfunction isCurrent(index: number): boolean {\n  return index === lastIndex.value\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 || props.as !== 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=\"min-w-0\">\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=\"breadcrumbsLabelClass\">{{ 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=\"breadcrumbsLabelClass\">{{ 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  breadcrumbsLabelClass,\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  /** 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  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\nfunction isCurrent(index: number): boolean {\n  return index === lastIndex.value\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 || props.as !== 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=\"min-w-0\">\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=\"breadcrumbsLabelClass\">{{ 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=\"breadcrumbsLabelClass\">{{ 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/GrBreadcrumbs/index.js

@@ -1,3 +1,3 @@
 import { m as resolveBreadcrumbsLayout, n as grBreadcrumbsSafelist, p as resolveBreadcrumbsFit, t as grBreadcrumbsConfig } from "../../chunks/config-DKdlqXiY.js";
-import { t as GrBreadcrumbs_default } from "./chunks/GrBreadcrumbs-BCNGDS6k.js";
+import { t as GrBreadcrumbs_default } from "./chunks/GrBreadcrumbs-CQ44iU2o.js";
 export { GrBreadcrumbs_default as GrBreadcrumbs, GrBreadcrumbs_default as default, grBreadcrumbsConfig, grBreadcrumbsSafelist, resolveBreadcrumbsFit, resolveBreadcrumbsLayout };

package/dist/components/GrButton/chunks/GrButton-Bw2AH4uX.js

@@ -0,0 +1,153 @@
+import { a as useGrComponentSize, i as useGrComponentProp } from "../../../chunks/context-CTbuwcYs.js";
+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 { 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 = {
+	key: 2,
+	class: "sr-only"
+};
+//#endregion
+//#region src/components/GrButton/GrButton.vue
+var GrButton_default = /* @__PURE__ */ defineComponent({
+	__name: "GrButton",
+	props: {
+		variant: { default: void 0 },
+		tone: { default: void 0 },
+		size: { default: void 0 },
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		loadingText: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		square: {
+			type: Boolean,
+			default: void 0
+		},
+		block: {
+			type: Boolean,
+			default: false
+		},
+		type: { default: "button" },
+		ariaLabel: { default: void 0 },
+		as: { default: void 0 },
+		href: { default: void 0 },
+		target: { default: void 0 },
+		rel: { default: void 0 },
+		external: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const group = useGrButtonGroup();
+		const resolvedSize = useGrComponentSize(() => props.size ?? group?.size.value, { component: "GrButton" });
+		const resolvedVariant = useGrComponentProp("GrButton", "variant", () => props.variant ?? group?.variant.value, "primary");
+		const resolvedTone = useGrComponentProp("GrButton", "tone", () => props.tone ?? group?.tone.value, "primary");
+		const isSquare = useGrComponentProp("GrButton", "square", () => props.square, false);
+		const { t } = useGranularityTranslations();
+		const resolvedLoadingText = computed(() => props.loadingText ?? t("gr.button.loading", "Loading…"));
+		const isLink = computed(() => Boolean(props.as || props.href));
+		const renderAs = computed(() => {
+			if (props.as) return typeof props.as === "string" ? props.as : markRaw(props.as);
+			return props.href ? "a" : "button";
+		});
+		const blocked = computed(() => props.disabled || props.loading);
+		const nativeDisabled = computed(() => renderAs.value === "button" && props.disabled ? true : void 0);
+		const ariaDisabled = computed(() => props.loading || isLink.value && props.disabled ? "true" : void 0);
+		const resolvedTarget = computed(() => props.target ?? (props.external ? "_blank" : void 0));
+		const resolvedRel = computed(() => props.rel ?? (resolvedTarget.value === "_blank" ? "noopener noreferrer" : void 0));
+		function onClickCapture(e) {
+			if (blocked.value) {
+				e.preventDefault();
+				e.stopImmediatePropagation();
+			}
+		}
+		const rootEl = ref(null);
+		/**
+		* Фокус на кнопку из кода. Нужен там, где окно обязано открываться с фокусом
+		* на конкретном действии (`GrConfirmDialog`), и потребителю не должно быть
+		* важно, тегом или компонентом отрисован корень.
+		*/
+		function focus() {
+			const root = rootEl.value;
+			(root instanceof HTMLElement ? root : root?.$el)?.focus?.();
+		}
+		function blur() {
+			const root = rootEl.value;
+			(root instanceof HTMLElement ? root : root?.$el)?.blur?.();
+		}
+		__expose({
+			focus,
+			blur
+		});
+		const className = computed(() => {
+			return grButtonClass({
+				variant: resolvedVariant.value,
+				tone: resolvedTone.value,
+				size: resolvedSize.value,
+				square: isSquare.value,
+				disabled: props.disabled,
+				block: props.block
+			});
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(renderAs.value), {
+				ref_key: "rootEl",
+				ref: rootEl,
+				"data-gr-button": "",
+				"data-gr-variant": unref(resolvedVariant),
+				"data-gr-tone": unref(resolvedTone),
+				type: renderAs.value === "button" ? props.type : void 0,
+				disabled: nativeDisabled.value,
+				href: isLink.value && !props.disabled ? props.href : void 0,
+				target: isLink.value && !props.disabled ? resolvedTarget.value : void 0,
+				rel: isLink.value && !props.disabled ? resolvedRel.value : void 0,
+				"aria-busy": props.loading ? "true" : void 0,
+				"aria-disabled": ariaDisabled.value,
+				"aria-label": props.ariaLabel,
+				tabindex: isLink.value && props.disabled ? -1 : void 0,
+				class: normalizeClass([
+					unref(grButtonBaseClass),
+					className.value,
+					blocked.value ? "cursor-not-allowed" : ""
+				]),
+				onClickCapture
+			}, {
+				default: withCtx(() => [
+					props.loading ? (openBlock(), createBlock(unref(loader_circle_default), {
+						key: 0,
+						class: "h-4 w-4 animate-spin",
+						"aria-hidden": "true"
+					})) : renderSlot(_ctx.$slots, "prefix", {}, void 0, void 0, 1),
+					renderSlot(_ctx.$slots, "default"),
+					renderSlot(_ctx.$slots, "suffix"),
+					props.loading ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(resolvedLoadingText.value), 1)) : createCommentVNode("", true)
+				]),
+				_: 3
+			}, 40, [
+				"data-gr-variant",
+				"data-gr-tone",
+				"type",
+				"disabled",
+				"href",
+				"target",
+				"rel",
+				"aria-busy",
+				"aria-disabled",
+				"aria-label",
+				"tabindex",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { GrButton_default as t };

package/dist/components/GrButton/chunks/GrButton-Bw2AH4uX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrButton-Bw2AH4uX.js","names":[],"sources":["../../../../src/components/GrButton/GrButton.vue","../../../../src/components/GrButton/GrButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, markRaw, ref, type Component } from 'vue'\n\nimport IconLoader from '~icons/lucide/loader-circle'\n\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrButtonGroup } from '../GrButtonGroup/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nexport type { GrButtonSize, GrButtonTone, GrButtonVariant } from './grButtonStyles'\n\nimport {\n  grButtonBaseClass,\n  grButtonClass,\n  type GrButtonSize,\n  type GrButtonTone,\n  type GrButtonVariant,\n} from './grButtonStyles'\n\nexport interface GrButtonProps {\n  variant?: GrButtonVariant\n  tone?: GrButtonTone\n  size?: GrButtonSize\n  loading?: boolean\n  /** i18n: что именно грузится. `aria-busy` сам по себе часть AT не объявляет. */\n  loadingText?: string\n  disabled?: boolean\n  square?: boolean\n  /** Кнопка на всю ширину контейнера. */\n  block?: boolean\n  type?: 'button' | 'submit' | 'reset'\n  ariaLabel?: string\n  /** Полиморфизм: кастомный корневой тег/компонент (например, RouterLink). */\n  as?: string | Component\n  /** Рендерит кнопку как `<a href>` (если не задан `as`). */\n  href?: string\n  target?: string\n  rel?: string\n  external?: boolean\n}\n\nconst props = withDefaults(\n  defineProps<GrButtonProps>(),\n  {\n    // `variant`/`tone`/`size`/`square` настраиваются через `GrConfigProvider`,\n    // поэтому их дефолты живут в резолверах ниже, а не здесь: Vue подставил бы\n    // дефолт до того, как компонент успеет заглянуть в конфиг.\n    variant: undefined,\n    tone: undefined,\n    size: undefined,\n    loading: false,\n    loadingText: undefined,\n    disabled: false,\n    square: undefined,\n    block: false,\n    type: 'button',\n    ariaLabel: undefined,\n    as: undefined,\n    href: undefined,\n    target: undefined,\n    rel: undefined,\n    external: false,\n  },\n)\n\n// Эффективные значения: проп кнопки → группа → `GrConfigProvider` → дефолт.\n// Группа ближе к кнопке, чем глобальный провайдер, поэтому она подставляется\n// как «локальное» значение — и побеждает конфиг, но не собственный проп.\nconst group = useGrButtonGroup()\n\nconst resolvedSize = useGrComponentSize(() => props.size ?? group?.size.value, { component: 'GrButton' })\nconst resolvedVariant = useGrComponentProp('GrButton', 'variant', () => props.variant ?? group?.variant.value, 'primary')\nconst resolvedTone = useGrComponentProp('GrButton', 'tone', () => props.tone ?? group?.tone.value, 'primary')\nconst isSquare = useGrComponentProp('GrButton', 'square', () => props.square, false)\n\nconst { t } = useGranularityTranslations()\nconst resolvedLoadingText = computed(() => props.loadingText ?? t('gr.button.loading', 'Loading…'))\n\n// Полиморфный корень: `as` → `<a href>` → `<button>`.\nconst isLink = computed(() => Boolean(props.as || props.href))\nconst renderAs = computed<string | Component>(() => {\n  if (props.as) return typeof props.as === 'string' ? props.as : markRaw(props.as)\n  return props.href ? 'a' : 'button'\n})\n\n// Неинтерактивно при явном `disabled` ИЛИ во время `loading`.\nconst blocked = computed(() => props.disabled || props.loading)\n\n// Ключевое: `loading` НЕ ставит нативный `disabled` (элемент бы выпал из фокуса и\n// скринридер потерял бы контекст) — вместо этого `aria-disabled` + перехват клика.\n// Нативный `disabled` (только у `<button>`) оставляем лишь для явного `disabled`.\nconst nativeDisabled = computed(() => (renderAs.value === 'button' && props.disabled) ? true : undefined)\nconst ariaDisabled = computed(() => (props.loading || (isLink.value && props.disabled)) ? 'true' : undefined)\n\nconst resolvedTarget = computed(() => props.target ?? (props.external ? '_blank' : undefined))\nconst resolvedRel = computed(() => props.rel ?? (resolvedTarget.value === '_blank' ? 'noopener noreferrer' : undefined))\n\nfunction onClickCapture(e: MouseEvent): void {\n  // Блокируем и дефолт (submit/навигация), и внешние обработчики (в т.ч. по Enter/Space),\n  // сохраняя фокус на элементе.\n  if (blocked.value) {\n    e.preventDefault()\n    e.stopImmediatePropagation()\n  }\n}\n\n// Корень динамический (`as` принимает и тег, и компонент), поэтому ref может\n// оказаться как элементом, так и инстансом — например роутерной ссылкой.\nconst rootEl = ref<HTMLElement | { $el?: HTMLElement } | null>(null)\n\n/**\n * Фокус на кнопку из кода. Нужен там, где окно обязано открываться с фокусом\n * на конкретном действии (`GrConfirmDialog`), и потребителю не должно быть\n * важно, тегом или компонентом отрисован корень.\n */\nfunction focus(): void {\n  const root = rootEl.value\n  const el = root instanceof HTMLElement ? root : root?.$el\n  el?.focus?.()\n}\n\nfunction blur(): void {\n  const root = rootEl.value\n  const el = root instanceof HTMLElement ? root : root?.$el\n  el?.blur?.()\n}\n\ndefineExpose({ focus, blur })\n\nconst className = computed(() => {\n  return grButtonClass({\n    variant: resolvedVariant.value,\n    tone: resolvedTone.value,\n    size: resolvedSize.value,\n    square: isSquare.value,\n    disabled: props.disabled,\n    block: props.block,\n  })\n})\n</script>\n\n<template>\n  <component\n    :is=\"renderAs\"\n    ref=\"rootEl\"\n    data-gr-button\n    :data-gr-variant=\"resolvedVariant\"\n    :data-gr-tone=\"resolvedTone\"\n    :type=\"renderAs === 'button' ? props.type : undefined\"\n    :disabled=\"nativeDisabled\"\n    :href=\"isLink && !props.disabled ? props.href : undefined\"\n    :target=\"isLink && !props.disabled ? resolvedTarget : undefined\"\n    :rel=\"isLink && !props.disabled ? resolvedRel : undefined\"\n    :aria-busy=\"props.loading ? 'true' : undefined\"\n    :aria-disabled=\"ariaDisabled\"\n    :aria-label=\"props.ariaLabel\"\n    :tabindex=\"isLink && props.disabled ? -1 : undefined\"\n    :class=\"[grButtonBaseClass, className, blocked ? 'cursor-not-allowed' : '']\"\n    @click.capture=\"onClickCapture\"\n  >\n    <!-- Спиннер занимает место префикса: две иконки рядом читались бы как ошибка. -->\n    <IconLoader v-if=\"props.loading\" class=\"h-4 w-4 animate-spin\" aria-hidden=\"true\" />\n    <slot v-else name=\"prefix\" />\n\n    <slot />\n\n    <slot name=\"suffix\" />\n\n    <span v-if=\"props.loading\" class=\"sr-only\">{{ resolvedLoadingText }}</span>\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, markRaw, ref, type Component } from 'vue'\n\nimport IconLoader from '~icons/lucide/loader-circle'\n\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrButtonGroup } from '../GrButtonGroup/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nexport type { GrButtonSize, GrButtonTone, GrButtonVariant } from './grButtonStyles'\n\nimport {\n  grButtonBaseClass,\n  grButtonClass,\n  type GrButtonSize,\n  type GrButtonTone,\n  type GrButtonVariant,\n} from './grButtonStyles'\n\nexport interface GrButtonProps {\n  variant?: GrButtonVariant\n  tone?: GrButtonTone\n  size?: GrButtonSize\n  loading?: boolean\n  /** i18n: что именно грузится. `aria-busy` сам по себе часть AT не объявляет. */\n  loadingText?: string\n  disabled?: boolean\n  square?: boolean\n  /** Кнопка на всю ширину контейнера. */\n  block?: boolean\n  type?: 'button' | 'submit' | 'reset'\n  ariaLabel?: string\n  /** Полиморфизм: кастомный корневой тег/компонент (например, RouterLink). */\n  as?: string | Component\n  /** Рендерит кнопку как `<a href>` (если не задан `as`). */\n  href?: string\n  target?: string\n  rel?: string\n  external?: boolean\n}\n\nconst props = withDefaults(\n  defineProps<GrButtonProps>(),\n  {\n    // `variant`/`tone`/`size`/`square` настраиваются через `GrConfigProvider`,\n    // поэтому их дефолты живут в резолверах ниже, а не здесь: Vue подставил бы\n    // дефолт до того, как компонент успеет заглянуть в конфиг.\n    variant: undefined,\n    tone: undefined,\n    size: undefined,\n    loading: false,\n    loadingText: undefined,\n    disabled: false,\n    square: undefined,\n    block: false,\n    type: 'button',\n    ariaLabel: undefined,\n    as: undefined,\n    href: undefined,\n    target: undefined,\n    rel: undefined,\n    external: false,\n  },\n)\n\n// Эффективные значения: проп кнопки → группа → `GrConfigProvider` → дефолт.\n// Группа ближе к кнопке, чем глобальный провайдер, поэтому она подставляется\n// как «локальное» значение — и побеждает конфиг, но не собственный проп.\nconst group = useGrButtonGroup()\n\nconst resolvedSize = useGrComponentSize(() => props.size ?? group?.size.value, { component: 'GrButton' })\nconst resolvedVariant = useGrComponentProp('GrButton', 'variant', () => props.variant ?? group?.variant.value, 'primary')\nconst resolvedTone = useGrComponentProp('GrButton', 'tone', () => props.tone ?? group?.tone.value, 'primary')\nconst isSquare = useGrComponentProp('GrButton', 'square', () => props.square, false)\n\nconst { t } = useGranularityTranslations()\nconst resolvedLoadingText = computed(() => props.loadingText ?? t('gr.button.loading', 'Loading…'))\n\n// Полиморфный корень: `as` → `<a href>` → `<button>`.\nconst isLink = computed(() => Boolean(props.as || props.href))\nconst renderAs = computed<string | Component>(() => {\n  if (props.as) return typeof props.as === 'string' ? props.as : markRaw(props.as)\n  return props.href ? 'a' : 'button'\n})\n\n// Неинтерактивно при явном `disabled` ИЛИ во время `loading`.\nconst blocked = computed(() => props.disabled || props.loading)\n\n// Ключевое: `loading` НЕ ставит нативный `disabled` (элемент бы выпал из фокуса и\n// скринридер потерял бы контекст) — вместо этого `aria-disabled` + перехват клика.\n// Нативный `disabled` (только у `<button>`) оставляем лишь для явного `disabled`.\nconst nativeDisabled = computed(() => (renderAs.value === 'button' && props.disabled) ? true : undefined)\nconst ariaDisabled = computed(() => (props.loading || (isLink.value && props.disabled)) ? 'true' : undefined)\n\nconst resolvedTarget = computed(() => props.target ?? (props.external ? '_blank' : undefined))\nconst resolvedRel = computed(() => props.rel ?? (resolvedTarget.value === '_blank' ? 'noopener noreferrer' : undefined))\n\nfunction onClickCapture(e: MouseEvent): void {\n  // Блокируем и дефолт (submit/навигация), и внешние обработчики (в т.ч. по Enter/Space),\n  // сохраняя фокус на элементе.\n  if (blocked.value) {\n    e.preventDefault()\n    e.stopImmediatePropagation()\n  }\n}\n\n// Корень динамический (`as` принимает и тег, и компонент), поэтому ref может\n// оказаться как элементом, так и инстансом — например роутерной ссылкой.\nconst rootEl = ref<HTMLElement | { $el?: HTMLElement } | null>(null)\n\n/**\n * Фокус на кнопку из кода. Нужен там, где окно обязано открываться с фокусом\n * на конкретном действии (`GrConfirmDialog`), и потребителю не должно быть\n * важно, тегом или компонентом отрисован корень.\n */\nfunction focus(): void {\n  const root = rootEl.value\n  const el = root instanceof HTMLElement ? root : root?.$el\n  el?.focus?.()\n}\n\nfunction blur(): void {\n  const root = rootEl.value\n  const el = root instanceof HTMLElement ? root : root?.$el\n  el?.blur?.()\n}\n\ndefineExpose({ focus, blur })\n\nconst className = computed(() => {\n  return grButtonClass({\n    variant: resolvedVariant.value,\n    tone: resolvedTone.value,\n    size: resolvedSize.value,\n    square: isSquare.value,\n    disabled: props.disabled,\n    block: props.block,\n  })\n})\n</script>\n\n<template>\n  <component\n    :is=\"renderAs\"\n    ref=\"rootEl\"\n    data-gr-button\n    :data-gr-variant=\"resolvedVariant\"\n    :data-gr-tone=\"resolvedTone\"\n    :type=\"renderAs === 'button' ? props.type : undefined\"\n    :disabled=\"nativeDisabled\"\n    :href=\"isLink && !props.disabled ? props.href : undefined\"\n    :target=\"isLink && !props.disabled ? resolvedTarget : undefined\"\n    :rel=\"isLink && !props.disabled ? resolvedRel : undefined\"\n    :aria-busy=\"props.loading ? 'true' : undefined\"\n    :aria-disabled=\"ariaDisabled\"\n    :aria-label=\"props.ariaLabel\"\n    :tabindex=\"isLink && props.disabled ? -1 : undefined\"\n    :class=\"[grButtonBaseClass, className, blocked ? 'cursor-not-allowed' : '']\"\n    @click.capture=\"onClickCapture\"\n  >\n    <!-- Спиннер занимает место префикса: две иконки рядом читались бы как ошибка. -->\n    <IconLoader v-if=\"props.loading\" class=\"h-4 w-4 animate-spin\" aria-hidden=\"true\" />\n    <slot v-else name=\"prefix\" />\n\n    <slot />\n\n    <slot name=\"suffix\" />\n\n    <span v-if=\"props.loading\" class=\"sr-only\">{{ resolvedLoadingText }}</span>\n  </component>\n</template>\n"],"mappings":"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"}

package/dist/components/GrButton/index.js

@@ -1,5 +1,4 @@
-import { a as grButtonClass } from "../../chunks/grButtonStyles-B_-YRE__.js";
-import { t as GrButton_default } from "./chunks/GrButton-D0m_z0XW.js";
+import { t as GrButton_default } from "./chunks/GrButton-Bw2AH4uX.js";
 import { t as grButtonSafelist } from "../../chunks/safelist-CudBLyAD.js";
 import { t as grButtonConfig } from "../../chunks/config-B84z1aos.js";
-export { GrButton_default as GrButton, GrButton_default as default, grButtonClass, grButtonConfig, grButtonSafelist };
+export { GrButton_default as GrButton, GrButton_default as default, grButtonConfig, grButtonSafelist };

package/dist/components/GrCard/chunks/GrCard-DfIZOP5N.js

@@ -0,0 +1,89 @@
+import { i as useGrComponentProp } from "../../../chunks/context-CTbuwcYs.js";
+import { a as sectionDividerBottomClass, i as paddingClass, o as sectionDividerTopClass, r as grCardRootClass } from "../../../chunks/config-gwro_7yn.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, markRaw, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, useSlots, withCtx } from "vue";
+//#endregion
+//#region src/components/GrCard/GrCard.vue
+var GrCard_default = /* @__PURE__ */ defineComponent({
+	__name: "GrCard",
+	props: {
+		padding: { default: void 0 },
+		variant: { default: void 0 },
+		as: { default: void 0 },
+		href: { default: void 0 },
+		clickable: {
+			type: Boolean,
+			default: false
+		},
+		hoverable: {
+			type: Boolean,
+			default: false
+		},
+		bodyClass: { default: void 0 }
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const resolvedPadding = useGrComponentProp("GrCard", "padding", () => props.padding, "none");
+		const resolvedVariant = useGrComponentProp("GrCard", "variant", () => props.variant, "elevated");
+		const isInteractive = computed(() => !!props.as || !!props.href || props.clickable);
+		const rootTag = computed(() => {
+			if (props.as) return typeof props.as === "string" ? props.as : markRaw(props.as);
+			if (props.href) return "a";
+			return props.clickable ? "button" : "div";
+		});
+		/**
+		* Обёртки появляются, только когда их попросили: карточка без секций остаётся
+		* одним `<div>` со слотом внутри — ровно тем, что рендерили `GrCollapse` и
+		* `GrList` до появления пропов.
+		*/
+		const hasSections = computed(() => Boolean(slots.header || slots.footer || props.bodyClass));
+		const rootClass = computed(() => grCardRootClass({
+			variant: resolvedVariant.value,
+			padding: hasSections.value ? "none" : resolvedPadding.value,
+			interactive: isInteractive.value,
+			hoverable: props.hoverable
+		}));
+		const sectionPaddingClass = computed(() => paddingClass[resolvedPadding.value]);
+		const headerClass = computed(() => [sectionPaddingClass.value, sectionDividerBottomClass].filter(Boolean).join(" "));
+		const footerClass = computed(() => [sectionPaddingClass.value, sectionDividerTopClass].filter(Boolean).join(" "));
+		const bodySectionClass = computed(() => [sectionPaddingClass.value, props.bodyClass].filter(Boolean).join(" "));
+		function onClick(event) {
+			emit("click", event);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(rootTag.value), {
+				"data-gr-card": "",
+				type: rootTag.value === "button" ? "button" : void 0,
+				href: rootTag.value === "a" ? __props.href : void 0,
+				class: normalizeClass(rootClass.value),
+				onClick
+			}, {
+				default: withCtx(() => [hasSections.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+					_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						"data-gr-card-header": "",
+						class: normalizeClass(headerClass.value)
+					}, [renderSlot(_ctx.$slots, "header")], 2)) : createCommentVNode("", true),
+					createElementVNode("div", {
+						"data-gr-card-body": "",
+						class: normalizeClass(bodySectionClass.value)
+					}, [renderSlot(_ctx.$slots, "default")], 2),
+					_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						"data-gr-card-footer": "",
+						class: normalizeClass(footerClass.value)
+					}, [renderSlot(_ctx.$slots, "footer")], 2)) : createCommentVNode("", true)
+				], 64)) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)]),
+				_: 3
+			}, 8, [
+				"type",
+				"href",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { GrCard_default as t };

package/dist/components/GrCard/chunks/GrCard-DfIZOP5N.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrCard-DfIZOP5N.js","names":["$slots"],"sources":["../../../../src/components/GrCard/GrCard.vue","../../../../src/components/GrCard/GrCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, markRaw, useSlots, type Component } from 'vue'\n\nimport { useGrComponentProp } from '../GrConfigProvider/context'\n\nimport {\n  grCardRootClass,\n  paddingClass,\n  sectionDividerBottomClass,\n  sectionDividerTopClass,\n  type GrCardPadding,\n  type GrCardVariant,\n} from './grCardStyles'\n\nexport type { GrCardPadding, GrCardVariant } from './grCardStyles'\n\nexport interface GrCardProps {\n  /**\n   * Внутренние отступы. По умолчанию `none`: карточка — поверхность, а её\n   * содержимое (`GrCollapse`, `GrList`) само знает про свои отступы.\n   */\n  padding?: GrCardPadding\n  /** `elevated` — рамка, фон и тень; `outlined` — без тени; `ghost` — без рамки. */\n  variant?: GrCardVariant\n  /** Свой корневой тег (`RouterLink`, `Link` от Inertia). Сильнее `href`. */\n  as?: string | Component\n  /** Карточка-ссылка. */\n  href?: string\n  /** Карточка-кнопка: интерактивна вся поверхность. */\n  clickable?: boolean\n  /** Подсветка при наведении без интерактивности. */\n  hoverable?: boolean\n  /** Классы обёртки тела — она появляется вместе с секциями. */\n  bodyClass?: string\n}\n\nexport interface GrCardEmits {\n  (e: 'click', event: MouseEvent): void\n}\n\nconst props = withDefaults(defineProps<GrCardProps>(), {\n  // Настраивается через `GrConfigProvider`; дефолты — в резолверах ниже.\n  padding: undefined,\n  variant: undefined,\n  as: undefined,\n  href: undefined,\n  clickable: false,\n  hoverable: false,\n  bodyClass: undefined,\n})\n\nconst emit = defineEmits<GrCardEmits>()\n\nconst slots = useSlots()\n\nconst resolvedPadding = useGrComponentProp('GrCard', 'padding', () => props.padding, 'none')\nconst resolvedVariant = useGrComponentProp('GrCard', 'variant', () => props.variant, 'elevated')\n\nconst isInteractive = computed(() => !!props.as || !!props.href || props.clickable)\n\nconst rootTag = computed<string | Component>(() => {\n  if (props.as)\n    return typeof props.as === 'string' ? props.as : markRaw(props.as)\n\n  if (props.href)\n    return 'a'\n\n  return props.clickable ? 'button' : 'div'\n})\n\n/**\n * Обёртки появляются, только когда их попросили: карточка без секций остаётся\n * одним `<div>` со слотом внутри — ровно тем, что рендерили `GrCollapse` и\n * `GrList` до появления пропов.\n */\nconst hasSections = computed(() => Boolean(slots.header || slots.footer || props.bodyClass))\n\nconst rootClass = computed(() => grCardRootClass({\n  variant: resolvedVariant.value,\n  // С секциями отступ принадлежит каждой из них, а не поверхности целиком.\n  padding: hasSections.value ? 'none' : resolvedPadding.value,\n  interactive: isInteractive.value,\n  hoverable: props.hoverable,\n}))\n\nconst sectionPaddingClass = computed(() => paddingClass[resolvedPadding.value])\n\nconst headerClass = computed(() => [sectionPaddingClass.value, sectionDividerBottomClass].filter(Boolean).join(' '))\nconst footerClass = computed(() => [sectionPaddingClass.value, sectionDividerTopClass].filter(Boolean).join(' '))\nconst bodySectionClass = computed(() => [sectionPaddingClass.value, props.bodyClass].filter(Boolean).join(' '))\n\nfunction onClick(event: MouseEvent): void {\n  emit('click', event)\n}\n</script>\n\n<template>\n  <component\n    :is=\"rootTag\"\n    data-gr-card\n    :type=\"rootTag === 'button' ? 'button' : undefined\"\n    :href=\"rootTag === 'a' ? href : undefined\"\n    :class=\"rootClass\"\n    @click=\"onClick\"\n  >\n    <template v-if=\"hasSections\">\n      <div v-if=\"$slots.header\" data-gr-card-header :class=\"headerClass\">\n        <slot name=\"header\" />\n      </div>\n\n      <div data-gr-card-body :class=\"bodySectionClass\">\n        <slot />\n      </div>\n\n      <div v-if=\"$slots.footer\" data-gr-card-footer :class=\"footerClass\">\n        <slot name=\"footer\" />\n      </div>\n    </template>\n\n    <slot v-else />\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, markRaw, useSlots, type Component } from 'vue'\n\nimport { useGrComponentProp } from '../GrConfigProvider/context'\n\nimport {\n  grCardRootClass,\n  paddingClass,\n  sectionDividerBottomClass,\n  sectionDividerTopClass,\n  type GrCardPadding,\n  type GrCardVariant,\n} from './grCardStyles'\n\nexport type { GrCardPadding, GrCardVariant } from './grCardStyles'\n\nexport interface GrCardProps {\n  /**\n   * Внутренние отступы. По умолчанию `none`: карточка — поверхность, а её\n   * содержимое (`GrCollapse`, `GrList`) само знает про свои отступы.\n   */\n  padding?: GrCardPadding\n  /** `elevated` — рамка, фон и тень; `outlined` — без тени; `ghost` — без рамки. */\n  variant?: GrCardVariant\n  /** Свой корневой тег (`RouterLink`, `Link` от Inertia). Сильнее `href`. */\n  as?: string | Component\n  /** Карточка-ссылка. */\n  href?: string\n  /** Карточка-кнопка: интерактивна вся поверхность. */\n  clickable?: boolean\n  /** Подсветка при наведении без интерактивности. */\n  hoverable?: boolean\n  /** Классы обёртки тела — она появляется вместе с секциями. */\n  bodyClass?: string\n}\n\nexport interface GrCardEmits {\n  (e: 'click', event: MouseEvent): void\n}\n\nconst props = withDefaults(defineProps<GrCardProps>(), {\n  // Настраивается через `GrConfigProvider`; дефолты — в резолверах ниже.\n  padding: undefined,\n  variant: undefined,\n  as: undefined,\n  href: undefined,\n  clickable: false,\n  hoverable: false,\n  bodyClass: undefined,\n})\n\nconst emit = defineEmits<GrCardEmits>()\n\nconst slots = useSlots()\n\nconst resolvedPadding = useGrComponentProp('GrCard', 'padding', () => props.padding, 'none')\nconst resolvedVariant = useGrComponentProp('GrCard', 'variant', () => props.variant, 'elevated')\n\nconst isInteractive = computed(() => !!props.as || !!props.href || props.clickable)\n\nconst rootTag = computed<string | Component>(() => {\n  if (props.as)\n    return typeof props.as === 'string' ? props.as : markRaw(props.as)\n\n  if (props.href)\n    return 'a'\n\n  return props.clickable ? 'button' : 'div'\n})\n\n/**\n * Обёртки появляются, только когда их попросили: карточка без секций остаётся\n * одним `<div>` со слотом внутри — ровно тем, что рендерили `GrCollapse` и\n * `GrList` до появления пропов.\n */\nconst hasSections = computed(() => Boolean(slots.header || slots.footer || props.bodyClass))\n\nconst rootClass = computed(() => grCardRootClass({\n  variant: resolvedVariant.value,\n  // С секциями отступ принадлежит каждой из них, а не поверхности целиком.\n  padding: hasSections.value ? 'none' : resolvedPadding.value,\n  interactive: isInteractive.value,\n  hoverable: props.hoverable,\n}))\n\nconst sectionPaddingClass = computed(() => paddingClass[resolvedPadding.value])\n\nconst headerClass = computed(() => [sectionPaddingClass.value, sectionDividerBottomClass].filter(Boolean).join(' '))\nconst footerClass = computed(() => [sectionPaddingClass.value, sectionDividerTopClass].filter(Boolean).join(' '))\nconst bodySectionClass = computed(() => [sectionPaddingClass.value, props.bodyClass].filter(Boolean).join(' '))\n\nfunction onClick(event: MouseEvent): void {\n  emit('click', event)\n}\n</script>\n\n<template>\n  <component\n    :is=\"rootTag\"\n    data-gr-card\n    :type=\"rootTag === 'button' ? 'button' : undefined\"\n    :href=\"rootTag === 'a' ? href : undefined\"\n    :class=\"rootClass\"\n    @click=\"onClick\"\n  >\n    <template v-if=\"hasSections\">\n      <div v-if=\"$slots.header\" data-gr-card-header :class=\"headerClass\">\n        <slot name=\"header\" />\n      </div>\n\n      <div data-gr-card-body :class=\"bodySectionClass\">\n        <slot />\n      </div>\n\n      <div v-if=\"$slots.footer\" data-gr-card-footer :class=\"footerClass\">\n        <slot name=\"footer\" />\n      </div>\n    </template>\n\n    <slot v-else />\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAwCA,MAAM,QAAQ;EAWd,MAAM,OAAO;EAEb,MAAM,QAAQ,SAAS;EAEvB,MAAM,kBAAkB,mBAAmB,UAAU,iBAAiB,MAAM,SAAS,MAAM;EAC3F,MAAM,kBAAkB,mBAAmB,UAAU,iBAAiB,MAAM,SAAS,UAAU;EAE/F,MAAM,gBAAgB,eAAe,CAAC,CAAC,MAAM,MAAM,CAAC,CAAC,MAAM,QAAQ,MAAM,SAAS;EAElF,MAAM,UAAU,eAAmC;GACjD,IAAI,MAAM,IACR,OAAO,OAAO,MAAM,OAAO,WAAW,MAAM,KAAK,QAAQ,MAAM,EAAE;GAEnE,IAAI,MAAM,MACR,OAAO;GAET,OAAO,MAAM,YAAY,WAAW;EACtC,CAAC;;;;;;EAOD,MAAM,cAAc,eAAe,QAAQ,MAAM,UAAU,MAAM,UAAU,MAAM,SAAS,CAAC;EAE3F,MAAM,YAAY,eAAe,gBAAgB;GAC/C,SAAS,gBAAgB;GAEzB,SAAS,YAAY,QAAQ,SAAS,gBAAgB;GACtD,aAAa,cAAc;GAC3B,WAAW,MAAM;EACnB,CAAC,CAAC;EAEF,MAAM,sBAAsB,eAAe,aAAa,gBAAgB,MAAM;EAE9E,MAAM,cAAc,eAAe,CAAC,oBAAoB,OAAO,yBAAyB,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,CAAC;EACnH,MAAM,cAAc,eAAe,CAAC,oBAAoB,OAAO,sBAAsB,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,CAAC;EAChH,MAAM,mBAAmB,eAAe,CAAC,oBAAoB,OAAO,MAAM,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,CAAC;EAE9G,SAAS,QAAQ,OAAyB;GACxC,KAAK,SAAS,KAAK;EACrB;;uBAIE,YAuBY,wBAtBL,QAAA,KAAO,GAAA;IACZ,gBAAA;IACC,MAAM,QAAA,UAAO,WAAA,WAA2B,KAAA;IACxC,MAAM,QAAA,UAAO,MAAW,QAAA,OAAO,KAAA;IAC/B,OAAK,eAAE,UAAA,KAAS;IACT;;2BAcG,CAZK,YAAA,SAAA,UAAA,GAAhB,mBAYW,UAAA,EAAA,KAAA,EAAA,GAAA;KAXEA,KAAAA,OAAO,UAAA,UAAA,GAAlB,mBAEM,OAAA;;MAFoB,uBAAA;MAAqB,OAAK,eAAE,YAAA,KAAW;SAC/D,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAGxB,mBAEM,OAAA;MAFD,qBAAA;MAAmB,OAAK,eAAE,iBAAA,KAAgB;SAC7C,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA;KAGCA,KAAAA,OAAO,UAAA,UAAA,GAAlB,mBAEM,OAAA;;MAFoB,uBAAA;MAAqB,OAAK,eAAE,YAAA,KAAW;SAC/D,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;cAI1B,WAAe,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/components/GrCard/index.js

@@ -1,3 +1,3 @@
 import { n as grCardSafelist, t as grCardConfig } from "../../chunks/config-gwro_7yn.js";
-import { t as GrCard_default } from "./chunks/GrCard-DOrGHf2x.js";
+import { t as GrCard_default } from "./chunks/GrCard-DfIZOP5N.js";
 export { GrCard_default as GrCard, GrCard_default as default, grCardConfig, grCardSafelist };