@feugene/granularity 0.29.0 → 0.30.0

package/dist/components/GrBreadcrumbs/chunks/{GrBreadcrumbs-BKOvl8W1.js.map → GrBreadcrumbs-DRDNan_n.js.map}

@@ -1 +1 @@
-{"version":3,"file":"GrBreadcrumbs-BKOvl8W1.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) 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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"}

package/dist/components/GrBreadcrumbs/index.js

@@ -1,3 +1,3 @@
 import { g as resolveBreadcrumbsLayout, h as resolveBreadcrumbsFit, n as grBreadcrumbsSafelist, t as grBreadcrumbsConfig } from "../../chunks/config-C0Eu8jpG.js";
-import { t as GrBreadcrumbs_default } from "./chunks/GrBreadcrumbs-BKOvl8W1.js";
+import { t as GrBreadcrumbs_default } from "./chunks/GrBreadcrumbs-DRDNan_n.js";
 export { GrBreadcrumbs_default as GrBreadcrumbs, GrBreadcrumbs_default as default, grBreadcrumbsConfig, grBreadcrumbsSafelist, resolveBreadcrumbsFit, resolveBreadcrumbsLayout };

package/dist/components/GrCard/chunks/{GrCard-DR3ehBt8.js → GrCard-BttXz1pQ.js}

@@ -1,8 +1,9 @@
 import { i as useGrComponentProp } from "../../../chunks/context-CTbuwcYs.js";
-import { a as grCardRootClass, c as sectionDividerBottomClass, i as cardTitleClass, l as sectionDividerTopClass, o as ownHeaderPaddingClass, r as cardDescriptionClass, s as paddingClass } from "../../../chunks/config-Dpk-eVkS.js";
+import { a as grCardRootClass, c as ownHeaderPaddingClass, d as sectionDividerTopClass, i as cardTitleClass, l as paddingClass, o as headerActionsClass, r as cardDescriptionClass, s as headerRowClass, u as sectionDividerBottomClass } from "../../../chunks/config-DUbbGcfw.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, markRaw, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, withCtx } from "vue";
 //#region src/components/GrCard/GrCard.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["id"];
+var _hoisted_1 = { class: "min-w-0" };
+var _hoisted_2 = ["id"];
 //#endregion
 //#region src/components/GrCard/GrCard.vue
 var GrCard_default = /* @__PURE__ */ defineComponent({
@@ -64,13 +65,21 @@ var GrCard_default = /* @__PURE__ */ defineComponent({
 		const hasOwnHeader = computed(() => Boolean(slots.header));
 		const hasTitle = computed(() => !hasOwnHeader.value && Boolean(props.title));
 		const hasDescription = computed(() => !hasOwnHeader.value && Boolean(props.description));
-		const hasHeadingBlock = computed(() => hasTitle.value || hasDescription.value);
+		/**
+		* Действия рисуются в **собственной** шапке карточки и включают её наравне с
+		* заголовком. Без этого слота карточке с кнопкой приходилось забирать `#header`
+		* целиком — а вместе с ним заново писать заголовок, его уровень и отступы. К
+		* этому обходу независимо пришли `GrDashboardItem` в этом же кольце и обёртки
+		* потребителей; оба теряли настоящий `h2…h6` и шкалу отступов.
+		*/
+		const hasActions = computed(() => !hasOwnHeader.value && Boolean(slots.actions));
+		const hasHeadingBlock = computed(() => hasTitle.value || hasDescription.value || hasActions.value);
 		/**
 		* Обёртки появляются, только когда их попросили: карточка без секций остаётся
 		* одним `<div>` со слотом внутри — ровно тем, что рендерили `GrCollapse` и
 		* `GrList` до появления пропов.
 		*/
-		const hasSections = computed(() => Boolean(slots.header || slots.footer || props.bodyClass || hasHeadingBlock.value));
+		const hasSections = computed(() => Boolean(slots.header || slots.footer || slots.actions || props.bodyClass || hasHeadingBlock.value));
 		/**
 		* Имя карточки-ссылки. Без него доступным именем становится всё содержимое
 		* подряд — заголовок, описание и тело одной строкой.
@@ -111,7 +120,7 @@ var GrCard_default = /* @__PURE__ */ defineComponent({
 						key: 0,
 						"data-gr-card-header": "",
 						class: normalizeClass(headerClass.value)
-					}, [renderSlot(_ctx.$slots, "header", {}, () => [hasTitle.value ? (openBlock(), createBlock(resolveDynamicComponent(headingTag.value), {
+					}, [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("div", { class: normalizeClass(hasActions.value ? unref(headerRowClass) : void 0) }, [createElementVNode("div", _hoisted_1, [hasTitle.value ? (openBlock(), createBlock(resolveDynamicComponent(headingTag.value), {
 						key: 0,
 						id: unref(titleId),
 						"data-gr-card-title": "",
@@ -124,7 +133,11 @@ var GrCard_default = /* @__PURE__ */ defineComponent({
 						id: unref(descriptionId),
 						"data-gr-card-description": "",
 						class: normalizeClass(unref(cardDescriptionClass))
-					}, toDisplayString(__props.description), 11, _hoisted_1)) : createCommentVNode("", true)])], 2)) : createCommentVNode("", true),
+					}, toDisplayString(__props.description), 11, _hoisted_2)) : createCommentVNode("", true)]), hasActions.value ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						"data-gr-card-actions": "",
+						class: normalizeClass(unref(headerActionsClass))
+					}, [renderSlot(_ctx.$slots, "actions")], 2)) : createCommentVNode("", true)], 2)])], 2)) : createCommentVNode("", true),
 					createElementVNode("div", {
 						"data-gr-card-body": "",
 						class: normalizeClass(bodySectionClass.value)

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

@@ -0,0 +1 @@
+{"version":3,"file":"GrCard-BttXz1pQ.js","names":["$slots"],"sources":["../../../../src/components/GrCard/GrCard.vue","../../../../src/components/GrCard/GrCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, markRaw, useId, useSlots, type Component } from 'vue'\n\nimport { useGrComponentProp } from '../GrConfigProvider/context'\n\nimport {\n  headerActionsClass,\n  headerRowClass,\n  cardDescriptionClass,\n  cardTitleClass,\n  grCardRootClass,\n  ownHeaderPaddingClass,\n  paddingClass,\n  sectionDividerBottomClass,\n  sectionDividerTopClass,\n  type GrCardHeadingLevel,\n  type GrCardPadding,\n  type GrCardVariant,\n} from './grCardStyles'\n\nexport type { GrCardHeadingLevel, 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   * Заголовок карточки — настоящий `h2`…`h6`, а не жирная строка: отчёт из\n   * шести карточек иначе не обойти по структуре, после `h1` страницы в нём\n   * нет ни одного заголовка.\n   */\n  title?: string\n  /** Пояснение под заголовком. */\n  description?: string\n  /** Уровень заголовка под структуру страницы. Не задан — из `GrConfigProvider`, иначе `3`. */\n  headingLevel?: GrCardHeadingLevel\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  title: undefined,\n  description: undefined,\n  headingLevel: 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 * Компонент-ссылка (`Link` от Inertia, `RouterLink`) рендерит `<a>` сам, и без\n * `href` он ведёт в никуда. Строковый тег, кроме `a`, атрибут не понимает —\n * там он и гасится.\n */\nconst rootHref = computed(() => (\n  typeof rootTag.value === 'string' && rootTag.value !== 'a' ? undefined : props.href\n))\n\nconst headingLevel = useGrComponentProp('GrCard', 'headingLevel', () => props.headingLevel, 3)\n\n/**\n * Заголовок внутри `<button>` невалиден: контент-модель кнопки — phrasing\n * content. Кликабельная карточка печатает подпись `<span>`, а структура\n * страницы в этом случае собирается ссылкой в заголовке рядом с `hoverable`.\n */\nlet headingInButtonWarned = false\n\nconst headingTag = computed(() => {\n  if (rootTag.value !== 'button') return `h${headingLevel.value}`\n\n  if (!headingInButtonWarned && __GR_DEV__) {\n    headingInButtonWarned = true\n    console.warn(\n      '[GrCard] `title` внутри `clickable` печатается `<span>`: заголовок в '\n      + '`<button>` невалиден по HTML. Нужен заголовок в структуре страницы — '\n      + 'замените `clickable` на `hoverable` и поставьте ссылку в сам заголовок.',\n    )\n  }\n\n  return 'span'\n})\n\nconst titleId = useId()\nconst descriptionId = useId()\n\n// `#header` сильнее пропов: нестандартная шапка не обязана объяснять, почему\n// она не `title`.\nconst hasOwnHeader = computed(() => Boolean(slots.header))\nconst hasTitle = computed(() => !hasOwnHeader.value && Boolean(props.title))\nconst hasDescription = computed(() => !hasOwnHeader.value && Boolean(props.description))\n/**\n * Действия рисуются в **собственной** шапке карточки и включают её наравне с\n * заголовком. Без этого слота карточке с кнопкой приходилось забирать `#header`\n * целиком — а вместе с ним заново писать заголовок, его уровень и отступы. К\n * этому обходу независимо пришли `GrDashboardItem` в этом же кольце и обёртки\n * потребителей; оба теряли настоящий `h2…h6` и шкалу отступов.\n */\nconst hasActions = computed(() => !hasOwnHeader.value && Boolean(slots.actions))\nconst hasHeadingBlock = computed(() => hasTitle.value || hasDescription.value || hasActions.value)\n\n/**\n * Обёртки появляются, только когда их попросили: карточка без секций остаётся\n * одним `<div>` со слотом внутри — ровно тем, что рендерили `GrCollapse` и\n * `GrList` до появления пропов.\n */\nconst hasSections = computed(() => Boolean(\n  slots.header || slots.footer || slots.actions || props.bodyClass || hasHeadingBlock.value,\n))\n\n/**\n * Имя карточки-ссылки. Без него доступным именем становится всё содержимое\n * подряд — заголовок, описание и тело одной строкой.\n */\nconst rootLabelledBy = computed(() => (isInteractive.value && hasTitle.value ? titleId : undefined))\nconst rootDescribedBy = computed(() => (isInteractive.value && hasDescription.value ? descriptionId : undefined))\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\n/**\n * Карточка отбивает то, что рисует сама. Шапка из `title` — её собственная, и\n * отступ ей полагается независимо от `padding`. Слот `#header` сильнее пропов и\n * заменяет шапку целиком: там отступы принадлежат тому, кто её наполнил, —\n * иначе потребитель со своими отступами внутри слота получил бы двойные.\n */\nconst headerClass = computed(() => [\n  hasOwnHeader.value ? sectionPaddingClass.value : ownHeaderPaddingClass,\n  sectionDividerBottomClass,\n].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\ndefineSlots<{\n  /** Содержимое карточки. */\n  default?: () => any\n  /** Шапка вместо пропов `title` и `description`. */\n  header?: () => any\n  /**\n   * Действия справа в собственной шапке карточки: «⋯», «Обновить»,\n   * переключатель периода. Включают шапку так же, как `title`.\n   *\n   * Со слотом `#header` не сочетается: тот заменяет шапку целиком, и всё, что в\n   * ней есть, рисует потребитель.\n   */\n  actions?: () => any\n  /** Подвал: действия, сводка, пагинация. */\n  footer?: () => any\n}>()\n\n</script>\n\n<template>\n  <component\n    :is=\"rootTag\"\n    data-gr-card\n    :type=\"rootTag === 'button' ? 'button' : undefined\"\n    :href=\"rootHref\"\n    :class=\"rootClass\"\n    :aria-labelledby=\"rootLabelledBy\"\n    :aria-describedby=\"rootDescribedBy\"\n    @click=\"onClick\"\n  >\n    <template v-if=\"hasSections\">\n      <div v-if=\"hasOwnHeader || hasHeadingBlock\" data-gr-card-header :class=\"headerClass\">\n        <slot name=\"header\">\n          <div :class=\"hasActions ? headerRowClass : undefined\">\n            <div class=\"min-w-0\">\n              <component\n                :is=\"headingTag\"\n                v-if=\"hasTitle\"\n                :id=\"titleId\"\n                data-gr-card-title\n                :class=\"cardTitleClass\"\n              >\n                {{ title }}\n              </component>\n\n              <p\n                v-if=\"hasDescription\"\n                :id=\"descriptionId\"\n                data-gr-card-description\n                :class=\"cardDescriptionClass\"\n              >\n                {{ description }}\n              </p>\n            </div>\n\n            <div v-if=\"hasActions\" data-gr-card-actions :class=\"headerActionsClass\">\n              <slot name=\"actions\" />\n            </div>\n          </div>\n        </slot>\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, useId, useSlots, type Component } from 'vue'\n\nimport { useGrComponentProp } from '../GrConfigProvider/context'\n\nimport {\n  headerActionsClass,\n  headerRowClass,\n  cardDescriptionClass,\n  cardTitleClass,\n  grCardRootClass,\n  ownHeaderPaddingClass,\n  paddingClass,\n  sectionDividerBottomClass,\n  sectionDividerTopClass,\n  type GrCardHeadingLevel,\n  type GrCardPadding,\n  type GrCardVariant,\n} from './grCardStyles'\n\nexport type { GrCardHeadingLevel, 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   * Заголовок карточки — настоящий `h2`…`h6`, а не жирная строка: отчёт из\n   * шести карточек иначе не обойти по структуре, после `h1` страницы в нём\n   * нет ни одного заголовка.\n   */\n  title?: string\n  /** Пояснение под заголовком. */\n  description?: string\n  /** Уровень заголовка под структуру страницы. Не задан — из `GrConfigProvider`, иначе `3`. */\n  headingLevel?: GrCardHeadingLevel\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  title: undefined,\n  description: undefined,\n  headingLevel: 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 * Компонент-ссылка (`Link` от Inertia, `RouterLink`) рендерит `<a>` сам, и без\n * `href` он ведёт в никуда. Строковый тег, кроме `a`, атрибут не понимает —\n * там он и гасится.\n */\nconst rootHref = computed(() => (\n  typeof rootTag.value === 'string' && rootTag.value !== 'a' ? undefined : props.href\n))\n\nconst headingLevel = useGrComponentProp('GrCard', 'headingLevel', () => props.headingLevel, 3)\n\n/**\n * Заголовок внутри `<button>` невалиден: контент-модель кнопки — phrasing\n * content. Кликабельная карточка печатает подпись `<span>`, а структура\n * страницы в этом случае собирается ссылкой в заголовке рядом с `hoverable`.\n */\nlet headingInButtonWarned = false\n\nconst headingTag = computed(() => {\n  if (rootTag.value !== 'button') return `h${headingLevel.value}`\n\n  if (!headingInButtonWarned && __GR_DEV__) {\n    headingInButtonWarned = true\n    console.warn(\n      '[GrCard] `title` внутри `clickable` печатается `<span>`: заголовок в '\n      + '`<button>` невалиден по HTML. Нужен заголовок в структуре страницы — '\n      + 'замените `clickable` на `hoverable` и поставьте ссылку в сам заголовок.',\n    )\n  }\n\n  return 'span'\n})\n\nconst titleId = useId()\nconst descriptionId = useId()\n\n// `#header` сильнее пропов: нестандартная шапка не обязана объяснять, почему\n// она не `title`.\nconst hasOwnHeader = computed(() => Boolean(slots.header))\nconst hasTitle = computed(() => !hasOwnHeader.value && Boolean(props.title))\nconst hasDescription = computed(() => !hasOwnHeader.value && Boolean(props.description))\n/**\n * Действия рисуются в **собственной** шапке карточки и включают её наравне с\n * заголовком. Без этого слота карточке с кнопкой приходилось забирать `#header`\n * целиком — а вместе с ним заново писать заголовок, его уровень и отступы. К\n * этому обходу независимо пришли `GrDashboardItem` в этом же кольце и обёртки\n * потребителей; оба теряли настоящий `h2…h6` и шкалу отступов.\n */\nconst hasActions = computed(() => !hasOwnHeader.value && Boolean(slots.actions))\nconst hasHeadingBlock = computed(() => hasTitle.value || hasDescription.value || hasActions.value)\n\n/**\n * Обёртки появляются, только когда их попросили: карточка без секций остаётся\n * одним `<div>` со слотом внутри — ровно тем, что рендерили `GrCollapse` и\n * `GrList` до появления пропов.\n */\nconst hasSections = computed(() => Boolean(\n  slots.header || slots.footer || slots.actions || props.bodyClass || hasHeadingBlock.value,\n))\n\n/**\n * Имя карточки-ссылки. Без него доступным именем становится всё содержимое\n * подряд — заголовок, описание и тело одной строкой.\n */\nconst rootLabelledBy = computed(() => (isInteractive.value && hasTitle.value ? titleId : undefined))\nconst rootDescribedBy = computed(() => (isInteractive.value && hasDescription.value ? descriptionId : undefined))\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\n/**\n * Карточка отбивает то, что рисует сама. Шапка из `title` — её собственная, и\n * отступ ей полагается независимо от `padding`. Слот `#header` сильнее пропов и\n * заменяет шапку целиком: там отступы принадлежат тому, кто её наполнил, —\n * иначе потребитель со своими отступами внутри слота получил бы двойные.\n */\nconst headerClass = computed(() => [\n  hasOwnHeader.value ? sectionPaddingClass.value : ownHeaderPaddingClass,\n  sectionDividerBottomClass,\n].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\ndefineSlots<{\n  /** Содержимое карточки. */\n  default?: () => any\n  /** Шапка вместо пропов `title` и `description`. */\n  header?: () => any\n  /**\n   * Действия справа в собственной шапке карточки: «⋯», «Обновить»,\n   * переключатель периода. Включают шапку так же, как `title`.\n   *\n   * Со слотом `#header` не сочетается: тот заменяет шапку целиком, и всё, что в\n   * ней есть, рисует потребитель.\n   */\n  actions?: () => any\n  /** Подвал: действия, сводка, пагинация. */\n  footer?: () => any\n}>()\n\n</script>\n\n<template>\n  <component\n    :is=\"rootTag\"\n    data-gr-card\n    :type=\"rootTag === 'button' ? 'button' : undefined\"\n    :href=\"rootHref\"\n    :class=\"rootClass\"\n    :aria-labelledby=\"rootLabelledBy\"\n    :aria-describedby=\"rootDescribedBy\"\n    @click=\"onClick\"\n  >\n    <template v-if=\"hasSections\">\n      <div v-if=\"hasOwnHeader || hasHeadingBlock\" data-gr-card-header :class=\"headerClass\">\n        <slot name=\"header\">\n          <div :class=\"hasActions ? headerRowClass : undefined\">\n            <div class=\"min-w-0\">\n              <component\n                :is=\"headingTag\"\n                v-if=\"hasTitle\"\n                :id=\"titleId\"\n                data-gr-card-title\n                :class=\"cardTitleClass\"\n              >\n                {{ title }}\n              </component>\n\n              <p\n                v-if=\"hasDescription\"\n                :id=\"descriptionId\"\n                data-gr-card-description\n                :class=\"cardDescriptionClass\"\n              >\n                {{ description }}\n              </p>\n            </div>\n\n            <div v-if=\"hasActions\" data-gr-card-actions :class=\"headerActionsClass\">\n              <slot name=\"actions\" />\n            </div>\n          </div>\n        </slot>\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":"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"}

package/dist/components/GrCard/index.js

@@ -1,3 +1,3 @@
-import { n as grCardSafelist, t as grCardConfig } from "../../chunks/config-Dpk-eVkS.js";
-import { t as GrCard_default } from "./chunks/GrCard-DR3ehBt8.js";
+import { n as grCardSafelist, t as grCardConfig } from "../../chunks/config-DUbbGcfw.js";
+import { t as GrCard_default } from "./chunks/GrCard-BttXz1pQ.js";
 export { GrCard_default as GrCard, GrCard_default as default, grCardConfig, grCardSafelist };

package/dist/components/GrChip/chunks/{GrChip-Df4orxRH.js → GrChip-C0vU69tf.js}

@@ -1,9 +1,10 @@
 import { t as x_default } from "../../../chunks/x-2KXnqxiD.js";
 import { a as useGrComponentSize, i as useGrComponentProp } from "../../../chunks/context-CTbuwcYs.js";
 import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { t as warnRenamedProp } from "../../../chunks/renamedProp-BwcN-SJg.js";
 import { t as GR_CHIP_GROUP_CONTEXT } from "../../../chunks/grChipGroupContext-DZXkACap.js";
 import { a as chipIconSizeClassBySize, f as grChipClass, i as chipIconClass, n as chipCloseClass, s as chipLabelClass, t as chipCloseButtonClass } from "../../../chunks/grChipStyles-3JZApw03.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, normalizeClass, onBeforeUnmount, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx, withModifiers } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, normalizeClass, onBeforeUnmount, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, withCtx, withModifiers } from "vue";
 //#region src/components/GrChip/GrChip.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["title"];
 var _hoisted_2 = ["aria-label", "tabindex"];
@@ -52,6 +53,7 @@ var GrChip_default = /* @__PURE__ */ defineComponent({
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		warnRenamedProp("GrChip", useAttrs(), { variant: "tone" });
 		const { t } = useGranularityTranslations();
 		const group = inject(GR_CHIP_GROUP_CONTEXT, null);
 		const rootEl = ref(null);

package/dist/components/GrChip/chunks/GrChip-C0vU69tf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrChip-C0vU69tf.js","names":["$slots"],"sources":["../../../../src/components/GrChip/GrChip.vue","../../../../src/components/GrChip/GrChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onBeforeUnmount, ref, useAttrs } from 'vue'\n\nimport IconClose from '~icons/lucide/x'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\n\nimport type { GrChipValue } from './grChipGroupContext'\n\nimport { warnRenamedProp } from '../shared/renamedProp'\nimport { GR_CHIP_GROUP_CONTEXT } from './grChipGroupContext'\nimport type { GrChipRadius, GrChipSize, GrChipTone } from './grChipStyles'\nimport {\n  chipCloseButtonClass,\n  chipCloseClass,\n  chipIconClass,\n  chipIconSizeClassBySize,\n  chipLabelClass,\n  grChipClass,\n} from './grChipStyles'\n\n/**\n * Интерактивный тег: снимаемый, выбираемый, с иконкой.\n *\n * От `GrBadge` отличается не видом, а природой: бейдж — метка, чип — виджет.\n * Поэтому цвета и радиусы взяты у бейджа как есть (в одном ряду они обязаны\n * совпадать), а роль, клавиатура и размеры — свои.\n */\nexport interface GrChipProps {\n  /** Значение чипа в группе. Вне `GrChipGroup` не используется. */\n  value?: GrChipValue\n  /**\n   * Подпись. Нужна отдельно от слота: из неё собирается имя кнопки снятия —\n   * «Убрать» на двадцати кнопках подряд не даёт выбрать нужную.\n   */\n  label?: string\n  tone?: GrChipTone\n  dark?: boolean\n  size?: GrChipSize\n  radius?: GrChipRadius\n  /** Чип становится переключателем: `aria-pressed`, `Enter`/`Space`. */\n  selectable?: boolean\n  /** Состояние переключателя вне группы. Внутри группы значение ведёт группа. */\n  selected?: boolean\n  /** Крестик. Внутри виджета он не кнопка — см. блок про роли ниже. */\n  closable?: boolean\n  disabled?: boolean\n  /** Доступное имя, когда подпись не объясняет назначения. */\n  ariaLabel?: string\n  /** Имя кнопки снятия целиком. Перебивает собранное из `label`. */\n  removeLabel?: string\n  /**\n   * `tabindex` кнопки снятия — для чипа внутри поля ввода.\n   *\n   * Там таб-стоп принадлежит `<input>`, а ряд чипов ходит стрелками: у\n   * `GrInputTag` кольцо оставляет ровно один `0`, у `GrAutocomplete` их нет\n   * вовсе. Проп нужен потому, что кольцом управляет родитель — он знает и\n   * порядок чипов, и что стоит за краем ряда.\n   */\n  removeTabindex?: number\n}\n\nexport interface GrChipEmits {\n  (e: 'update:selected', value: boolean): void\n  (e: 'remove'): void\n}\n\nconst props = withDefaults(defineProps<GrChipProps>(), {\n  value: undefined,\n  label: undefined,\n  // Дефолты живут в резолверах ниже: Vue подставил бы свой раньше, чем\n  // компонент заглянет в `GrConfigProvider`.\n  tone: undefined,\n  dark: undefined,\n  size: undefined,\n  radius: undefined,\n  selectable: false,\n  selected: false,\n  closable: false,\n  disabled: false,\n  ariaLabel: undefined,\n  removeLabel: undefined,\n  removeTabindex: undefined,\n})\n\nconst emit = defineEmits<GrChipEmits>()\n\n// `variant` переименован в `tone`: незнакомый атрибут Vue сажает на корневой\n// узел, поэтому старое имя не роняет ни типы, ни рантайм — компонент молча\n// рисуется дефолтным тоном.\nwarnRenamedProp('GrChip', useAttrs(), { variant: 'tone' })\n\ndefineSlots<{\n  /** Подпись чипа. Внутри выбираемого чипа — только фразовое содержимое. */\n  default?: () => unknown\n  /** Иконка перед подписью. */\n  icon?: () => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst group = inject(GR_CHIP_GROUP_CONTEXT, null)\nconst rootEl = ref<HTMLElement | null>(null)\n\nconst inGroup = computed(() => group !== null && props.value !== undefined)\n\nconst isDisabled = computed(() => props.disabled || (group?.disabled.value ?? false))\nconst isReadonly = computed(() => group?.readonly.value ?? false)\n\n/**\n * Чип — виджет ровно тогда, когда по нему кликают.\n *\n * От этого зависит вся разметка: у виджета роль, `tabindex` и клавиатура, а\n * крестик внутри него перестаёт быть кнопкой.\n */\nconst isInteractive = computed(() => inGroup.value || props.selectable)\n\nconst isSelected = computed(() => {\n  if (inGroup.value && props.value !== undefined) return group!.isSelected(props.value)\n  return props.selected\n})\n\nconst isClosable = computed(() => {\n  if (isReadonly.value || isDisabled.value) return false\n  return props.closable || (inGroup.value ? group!.closable.value : false)\n})\n\n// Приоритет: локальный проп → значение группы → `GrConfigProvider` → дефолт.\n// Группа специфичнее конфига, поэтому её значение подаётся как «локальное».\nconst resolvedSize = useGrComponentSize<GrChipSize>(\n  () => props.size ?? (inGroup.value ? group!.size.value : undefined),\n  { component: 'GrChip' },\n)\nconst resolvedTone = useGrComponentProp(\n  'GrChip',\n  'tone',\n  () => props.tone ?? (inGroup.value ? group!.tone.value : undefined),\n  'neutral',\n)\nconst resolvedRadius = useGrComponentProp(\n  'GrChip',\n  'radius',\n  () => props.radius ?? (inGroup.value ? group!.radius.value : undefined),\n  'round',\n)\nconst resolvedDark = useGrComponentProp(\n  'GrChip',\n  'dark',\n  () => props.dark ?? (inGroup.value ? group!.dark.value : undefined),\n  false,\n)\n\nconst rootClass = computed(() => grChipClass({\n  tone: resolvedTone.value,\n  dark: resolvedDark.value,\n  size: resolvedSize.value,\n  radius: resolvedRadius.value,\n  interactive: isInteractive.value && !isReadonly.value,\n  selected: isSelected.value,\n  disabled: isDisabled.value,\n}))\n\nconst iconSizeClass = computed(() => chipIconSizeClassBySize[resolvedSize.value])\n\nconst removeTitle = computed(() => {\n  if (props.removeLabel) return props.removeLabel\n  if (props.label) return t('gr.chip.removeNamed', 'Remove {label}', { label: props.label })\n  return t('gr.chip.remove', 'Remove')\n})\n\n/**\n * Роль чипа задаёт группа, а не потребитель.\n *\n * Одиночный переключатель — кнопка с `aria-pressed`; в группе роль зависит от\n * множественности выбора: `radio` в одиночной (образец — `GrSegmented`),\n * `option` во множественной, где контейнер объявлен `listbox` c\n * `aria-multiselectable`.\n */\nconst chipRole = computed(() => {\n  if (!inGroup.value) return undefined\n  return group!.selection.value === 'single' ? 'radio' : 'option'\n})\n\nconst tabindex = computed(() => {\n  if (!isInteractive.value) return undefined\n  if (isDisabled.value) return -1\n  if (!inGroup.value || props.value === undefined) return 0\n  return group!.rovingValue.value === props.value ? 0 : -1\n})\n\nfunction toggle(): void {\n  if (isDisabled.value || isReadonly.value) return\n\n  if (inGroup.value && props.value !== undefined) {\n    group!.toggle(props.value)\n    return\n  }\n\n  if (props.selectable) emit('update:selected', !props.selected)\n}\n\nfunction requestRemove(): void {\n  if (!isClosable.value) return\n\n  emit('remove')\n  if (inGroup.value && props.value !== undefined) group!.requestRemove(props.value)\n}\n\n/**\n * Крестик внутри виджета — не кнопка, поэтому его клик приходит сюда же и\n * разбирается по цели. Тот же приём у `GrTabs`: внутрь роли-виджета вложенная\n * кнопка запрещена (axe: `nested-interactive`), а `<button>` внутри `<button>`\n * невалиден и по контент-модели HTML.\n */\nfunction onRootClick(event: MouseEvent): void {\n  if (isDisabled.value) return\n\n  if (event.target instanceof Element && event.target.closest('[data-gr-chip-close]')) {\n    requestRemove()\n    return\n  }\n\n  toggle()\n}\n\nfunction onRootKeydown(event: KeyboardEvent): void {\n  if (isDisabled.value) return\n\n  // Навигация принадлежит группе: состав знает только она.\n  if (inGroup.value && group!.handleNavigationKeys(event)) return\n\n  if (event.key === 'Delete' || event.key === 'Backspace') {\n    if (!isClosable.value) return\n    event.preventDefault()\n    requestRemove()\n  }\n}\n\nif (group) {\n  const unregister = group.register({\n    value: () => props.value as GrChipValue,\n    disabled: () => isDisabled.value,\n    el: () => rootEl.value,\n  })\n  onBeforeUnmount(unregister)\n}\n\nconst removeEl = ref<HTMLButtonElement | null>(null)\n\ndefineExpose({\n  focus: () => rootEl.value?.focus(),\n  blur: () => rootEl.value?.blur(),\n  /**\n   * Кнопка снятия — цель roving-фокуса у родителя. Отдаётся элементом, а не\n   * методом `focusRemove`: кольцу нужен сам узел, оно само решает, когда и\n   * куда переносить фокус.\n   */\n  removeEl,\n})\n</script>\n\n<template>\n  <component\n    :is=\"isInteractive ? 'button' : 'span'\"\n    ref=\"rootEl\"\n    data-gr-chip\n    :type=\"isInteractive ? 'button' : undefined\"\n    :class=\"rootClass\"\n    :role=\"chipRole\"\n    :data-value=\"value\"\n    :aria-label=\"ariaLabel\"\n    :aria-checked=\"chipRole === 'radio' ? (isSelected ? 'true' : 'false') : undefined\"\n    :aria-selected=\"chipRole === 'option' ? (isSelected ? 'true' : 'false') : undefined\"\n    :aria-pressed=\"isInteractive && !chipRole ? (isSelected ? 'true' : 'false') : undefined\"\n    :aria-disabled=\"isDisabled ? 'true' : undefined\"\n    :disabled=\"isInteractive && isDisabled ? true : undefined\"\n    :aria-keyshortcuts=\"isInteractive && isClosable ? 'Delete' : undefined\"\n    :tabindex=\"tabindex\"\n    @click=\"isInteractive ? onRootClick($event) : undefined\"\n    @keydown=\"isInteractive ? onRootKeydown($event) : undefined\"\n  >\n    <span v-if=\"$slots.icon\" data-gr-chip-icon :class=\"[chipIconClass, iconSizeClass]\">\n      <slot name=\"icon\" />\n    </span>\n\n    <span data-gr-chip-label :class=\"chipLabelClass\">\n      <slot>{{ label }}</slot>\n    </span>\n\n    <!--\n      Крестик существует в двух видах, и различитель — роль самого чипа.\n      Виджет: `<span aria-hidden>` вне таб-порядка, снятие идёт `Delete`/`Backspace`.\n      Не виджет: настоящая кнопка со своей остановкой `Tab` и своим именем.\n    -->\n    <span\n      v-if=\"isClosable && isInteractive\"\n      data-gr-chip-close\n      :class=\"[chipCloseClass, iconSizeClass]\"\n      :title=\"removeTitle\"\n      aria-hidden=\"true\"\n    >\n      <IconClose class=\"h-full w-full\" />\n    </span>\n\n    <button\n      v-else-if=\"isClosable\"\n      ref=\"removeEl\"\n      data-gr-chip-close\n      type=\"button\"\n      :class=\"[chipCloseButtonClass, iconSizeClass]\"\n      :aria-label=\"removeTitle\"\n      :tabindex=\"removeTabindex\"\n      @mousedown.prevent.stop\n      @click.stop=\"requestRemove()\"\n    >\n      <IconClose class=\"h-full w-full\" />\n    </button>\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject, onBeforeUnmount, ref, useAttrs } from 'vue'\n\nimport IconClose from '~icons/lucide/x'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\n\nimport type { GrChipValue } from './grChipGroupContext'\n\nimport { warnRenamedProp } from '../shared/renamedProp'\nimport { GR_CHIP_GROUP_CONTEXT } from './grChipGroupContext'\nimport type { GrChipRadius, GrChipSize, GrChipTone } from './grChipStyles'\nimport {\n  chipCloseButtonClass,\n  chipCloseClass,\n  chipIconClass,\n  chipIconSizeClassBySize,\n  chipLabelClass,\n  grChipClass,\n} from './grChipStyles'\n\n/**\n * Интерактивный тег: снимаемый, выбираемый, с иконкой.\n *\n * От `GrBadge` отличается не видом, а природой: бейдж — метка, чип — виджет.\n * Поэтому цвета и радиусы взяты у бейджа как есть (в одном ряду они обязаны\n * совпадать), а роль, клавиатура и размеры — свои.\n */\nexport interface GrChipProps {\n  /** Значение чипа в группе. Вне `GrChipGroup` не используется. */\n  value?: GrChipValue\n  /**\n   * Подпись. Нужна отдельно от слота: из неё собирается имя кнопки снятия —\n   * «Убрать» на двадцати кнопках подряд не даёт выбрать нужную.\n   */\n  label?: string\n  tone?: GrChipTone\n  dark?: boolean\n  size?: GrChipSize\n  radius?: GrChipRadius\n  /** Чип становится переключателем: `aria-pressed`, `Enter`/`Space`. */\n  selectable?: boolean\n  /** Состояние переключателя вне группы. Внутри группы значение ведёт группа. */\n  selected?: boolean\n  /** Крестик. Внутри виджета он не кнопка — см. блок про роли ниже. */\n  closable?: boolean\n  disabled?: boolean\n  /** Доступное имя, когда подпись не объясняет назначения. */\n  ariaLabel?: string\n  /** Имя кнопки снятия целиком. Перебивает собранное из `label`. */\n  removeLabel?: string\n  /**\n   * `tabindex` кнопки снятия — для чипа внутри поля ввода.\n   *\n   * Там таб-стоп принадлежит `<input>`, а ряд чипов ходит стрелками: у\n   * `GrInputTag` кольцо оставляет ровно один `0`, у `GrAutocomplete` их нет\n   * вовсе. Проп нужен потому, что кольцом управляет родитель — он знает и\n   * порядок чипов, и что стоит за краем ряда.\n   */\n  removeTabindex?: number\n}\n\nexport interface GrChipEmits {\n  (e: 'update:selected', value: boolean): void\n  (e: 'remove'): void\n}\n\nconst props = withDefaults(defineProps<GrChipProps>(), {\n  value: undefined,\n  label: undefined,\n  // Дефолты живут в резолверах ниже: Vue подставил бы свой раньше, чем\n  // компонент заглянет в `GrConfigProvider`.\n  tone: undefined,\n  dark: undefined,\n  size: undefined,\n  radius: undefined,\n  selectable: false,\n  selected: false,\n  closable: false,\n  disabled: false,\n  ariaLabel: undefined,\n  removeLabel: undefined,\n  removeTabindex: undefined,\n})\n\nconst emit = defineEmits<GrChipEmits>()\n\n// `variant` переименован в `tone`: незнакомый атрибут Vue сажает на корневой\n// узел, поэтому старое имя не роняет ни типы, ни рантайм — компонент молча\n// рисуется дефолтным тоном.\nwarnRenamedProp('GrChip', useAttrs(), { variant: 'tone' })\n\ndefineSlots<{\n  /** Подпись чипа. Внутри выбираемого чипа — только фразовое содержимое. */\n  default?: () => unknown\n  /** Иконка перед подписью. */\n  icon?: () => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst group = inject(GR_CHIP_GROUP_CONTEXT, null)\nconst rootEl = ref<HTMLElement | null>(null)\n\nconst inGroup = computed(() => group !== null && props.value !== undefined)\n\nconst isDisabled = computed(() => props.disabled || (group?.disabled.value ?? false))\nconst isReadonly = computed(() => group?.readonly.value ?? false)\n\n/**\n * Чип — виджет ровно тогда, когда по нему кликают.\n *\n * От этого зависит вся разметка: у виджета роль, `tabindex` и клавиатура, а\n * крестик внутри него перестаёт быть кнопкой.\n */\nconst isInteractive = computed(() => inGroup.value || props.selectable)\n\nconst isSelected = computed(() => {\n  if (inGroup.value && props.value !== undefined) return group!.isSelected(props.value)\n  return props.selected\n})\n\nconst isClosable = computed(() => {\n  if (isReadonly.value || isDisabled.value) return false\n  return props.closable || (inGroup.value ? group!.closable.value : false)\n})\n\n// Приоритет: локальный проп → значение группы → `GrConfigProvider` → дефолт.\n// Группа специфичнее конфига, поэтому её значение подаётся как «локальное».\nconst resolvedSize = useGrComponentSize<GrChipSize>(\n  () => props.size ?? (inGroup.value ? group!.size.value : undefined),\n  { component: 'GrChip' },\n)\nconst resolvedTone = useGrComponentProp(\n  'GrChip',\n  'tone',\n  () => props.tone ?? (inGroup.value ? group!.tone.value : undefined),\n  'neutral',\n)\nconst resolvedRadius = useGrComponentProp(\n  'GrChip',\n  'radius',\n  () => props.radius ?? (inGroup.value ? group!.radius.value : undefined),\n  'round',\n)\nconst resolvedDark = useGrComponentProp(\n  'GrChip',\n  'dark',\n  () => props.dark ?? (inGroup.value ? group!.dark.value : undefined),\n  false,\n)\n\nconst rootClass = computed(() => grChipClass({\n  tone: resolvedTone.value,\n  dark: resolvedDark.value,\n  size: resolvedSize.value,\n  radius: resolvedRadius.value,\n  interactive: isInteractive.value && !isReadonly.value,\n  selected: isSelected.value,\n  disabled: isDisabled.value,\n}))\n\nconst iconSizeClass = computed(() => chipIconSizeClassBySize[resolvedSize.value])\n\nconst removeTitle = computed(() => {\n  if (props.removeLabel) return props.removeLabel\n  if (props.label) return t('gr.chip.removeNamed', 'Remove {label}', { label: props.label })\n  return t('gr.chip.remove', 'Remove')\n})\n\n/**\n * Роль чипа задаёт группа, а не потребитель.\n *\n * Одиночный переключатель — кнопка с `aria-pressed`; в группе роль зависит от\n * множественности выбора: `radio` в одиночной (образец — `GrSegmented`),\n * `option` во множественной, где контейнер объявлен `listbox` c\n * `aria-multiselectable`.\n */\nconst chipRole = computed(() => {\n  if (!inGroup.value) return undefined\n  return group!.selection.value === 'single' ? 'radio' : 'option'\n})\n\nconst tabindex = computed(() => {\n  if (!isInteractive.value) return undefined\n  if (isDisabled.value) return -1\n  if (!inGroup.value || props.value === undefined) return 0\n  return group!.rovingValue.value === props.value ? 0 : -1\n})\n\nfunction toggle(): void {\n  if (isDisabled.value || isReadonly.value) return\n\n  if (inGroup.value && props.value !== undefined) {\n    group!.toggle(props.value)\n    return\n  }\n\n  if (props.selectable) emit('update:selected', !props.selected)\n}\n\nfunction requestRemove(): void {\n  if (!isClosable.value) return\n\n  emit('remove')\n  if (inGroup.value && props.value !== undefined) group!.requestRemove(props.value)\n}\n\n/**\n * Крестик внутри виджета — не кнопка, поэтому его клик приходит сюда же и\n * разбирается по цели. Тот же приём у `GrTabs`: внутрь роли-виджета вложенная\n * кнопка запрещена (axe: `nested-interactive`), а `<button>` внутри `<button>`\n * невалиден и по контент-модели HTML.\n */\nfunction onRootClick(event: MouseEvent): void {\n  if (isDisabled.value) return\n\n  if (event.target instanceof Element && event.target.closest('[data-gr-chip-close]')) {\n    requestRemove()\n    return\n  }\n\n  toggle()\n}\n\nfunction onRootKeydown(event: KeyboardEvent): void {\n  if (isDisabled.value) return\n\n  // Навигация принадлежит группе: состав знает только она.\n  if (inGroup.value && group!.handleNavigationKeys(event)) return\n\n  if (event.key === 'Delete' || event.key === 'Backspace') {\n    if (!isClosable.value) return\n    event.preventDefault()\n    requestRemove()\n  }\n}\n\nif (group) {\n  const unregister = group.register({\n    value: () => props.value as GrChipValue,\n    disabled: () => isDisabled.value,\n    el: () => rootEl.value,\n  })\n  onBeforeUnmount(unregister)\n}\n\nconst removeEl = ref<HTMLButtonElement | null>(null)\n\ndefineExpose({\n  focus: () => rootEl.value?.focus(),\n  blur: () => rootEl.value?.blur(),\n  /**\n   * Кнопка снятия — цель roving-фокуса у родителя. Отдаётся элементом, а не\n   * методом `focusRemove`: кольцу нужен сам узел, оно само решает, когда и\n   * куда переносить фокус.\n   */\n  removeEl,\n})\n</script>\n\n<template>\n  <component\n    :is=\"isInteractive ? 'button' : 'span'\"\n    ref=\"rootEl\"\n    data-gr-chip\n    :type=\"isInteractive ? 'button' : undefined\"\n    :class=\"rootClass\"\n    :role=\"chipRole\"\n    :data-value=\"value\"\n    :aria-label=\"ariaLabel\"\n    :aria-checked=\"chipRole === 'radio' ? (isSelected ? 'true' : 'false') : undefined\"\n    :aria-selected=\"chipRole === 'option' ? (isSelected ? 'true' : 'false') : undefined\"\n    :aria-pressed=\"isInteractive && !chipRole ? (isSelected ? 'true' : 'false') : undefined\"\n    :aria-disabled=\"isDisabled ? 'true' : undefined\"\n    :disabled=\"isInteractive && isDisabled ? true : undefined\"\n    :aria-keyshortcuts=\"isInteractive && isClosable ? 'Delete' : undefined\"\n    :tabindex=\"tabindex\"\n    @click=\"isInteractive ? onRootClick($event) : undefined\"\n    @keydown=\"isInteractive ? onRootKeydown($event) : undefined\"\n  >\n    <span v-if=\"$slots.icon\" data-gr-chip-icon :class=\"[chipIconClass, iconSizeClass]\">\n      <slot name=\"icon\" />\n    </span>\n\n    <span data-gr-chip-label :class=\"chipLabelClass\">\n      <slot>{{ label }}</slot>\n    </span>\n\n    <!--\n      Крестик существует в двух видах, и различитель — роль самого чипа.\n      Виджет: `<span aria-hidden>` вне таб-порядка, снятие идёт `Delete`/`Backspace`.\n      Не виджет: настоящая кнопка со своей остановкой `Tab` и своим именем.\n    -->\n    <span\n      v-if=\"isClosable && isInteractive\"\n      data-gr-chip-close\n      :class=\"[chipCloseClass, iconSizeClass]\"\n      :title=\"removeTitle\"\n      aria-hidden=\"true\"\n    >\n      <IconClose class=\"h-full w-full\" />\n    </span>\n\n    <button\n      v-else-if=\"isClosable\"\n      ref=\"removeEl\"\n      data-gr-chip-close\n      type=\"button\"\n      :class=\"[chipCloseButtonClass, iconSizeClass]\"\n      :aria-label=\"removeTitle\"\n      :tabindex=\"removeTabindex\"\n      @mousedown.prevent.stop\n      @click.stop=\"requestRemove()\"\n    >\n      <IconClose class=\"h-full w-full\" />\n    </button>\n  </component>\n</template>\n"],"mappings":"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"}

package/dist/components/GrChip/index.js

@@ -1,3 +1,3 @@
-import { t as GrChip_default } from "./chunks/GrChip-Df4orxRH.js";
+import { t as GrChip_default } from "./chunks/GrChip-C0vU69tf.js";
 import { n as grChipSafelist, t as grChipConfig } from "../../chunks/config-Dv_r92GL.js";
 export { GrChip_default as GrChip, GrChip_default as default, grChipConfig, grChipSafelist };

package/dist/components/GrCollapse/chunks/{GrCollapse-CytiA2Sx.js → GrCollapse-BlW6ybdL.js}

@@ -1,8 +1,8 @@
 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 GrIcon_default } from "../../GrIcon/chunks/GrIcon-Bn1XEriL.js";
+import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-Dmf0c9ba.js";
 import { t as chevron_down_default } from "../../../chunks/chevron-down-CQS2OG_s.js";
-import { t as GrCard_default } from "../../GrCard/chunks/GrCard-DR3ehBt8.js";
+import { t as GrCard_default } from "../../GrCard/chunks/GrCard-BttXz1pQ.js";
 import { n as hasMeaningfulSlotContent } from "../../../chunks/slotNodes-DxNXpC7v.js";
 import { a as grCollapseBodyClass, c as grCollapseHeaderClass, i as collapseExtraPaddings, l as grCollapseRowClass, o as grCollapseChevronClass, r as collapseChevronSizes, s as grCollapseEmptyClass, u as grCollapseTitleClass } from "../../../chunks/config-BoUI0t-t.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, normalizeClass, openBlock, provide, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, withCtx } from "vue";