@feugene/granularity 0.34.0 → 0.34.2

package/dist/components/GrTimeline/chunks/GrTimeline-BiHpArsg.js.map

@@ -1 +1 @@
-{"version":3,"file":"GrTimeline-BiHpArsg.js","names":["$slots"],"sources":["../../../../src/components/GrTimeline/grTimelineContext.ts","../../../../src/components/GrTimeline/timelineGroups.ts","../../../../src/components/GrTimeline/GrTimeline.vue","../../../../src/components/GrTimeline/GrTimeline.vue","../../../../src/components/GrTimeline/GrTimelineItem.vue","../../../../src/components/GrTimeline/GrTimelineItem.vue"],"sourcesContent":["import type { ComputedRef, InjectionKey } from 'vue'\n\nimport type { GrTimelineDensity, GrTimelineLayout, GrTimelineOrientation } from './grTimelineStyles'\n\n/**\n * Уровень заголовка группы. Тот же довод, что у `GrCollapse`: лента в разделе\n * `<h4>` с захардкоженным `<h3>` рвёт навигацию по заголовкам.\n */\nexport const GR_TIMELINE_HEADING_LEVELS = [2, 3, 4, 5, 6] as const\n\nexport type GrTimelineHeadingLevel = typeof GR_TIMELINE_HEADING_LEVELS[number]\n\n/**\n * Пункт читает раскладку из контейнера, а не получает её пропом: иначе\n * `layout` пришлось бы дублировать на каждом `GrTimelineItem`.\n */\nexport interface GrTimelineContext {\n  layout: ComputedRef<GrTimelineLayout>\n  orientation: ComputedRef<GrTimelineOrientation>\n  density: ComputedRef<GrTimelineDensity>\n}\n\nexport const GR_TIMELINE_CONTEXT: InjectionKey<GrTimelineContext> = Symbol('GR_TIMELINE_CONTEXT')\n","/**\n * Группировка ленты событий. Без Vue — чтобы проверялась без монтирования.\n */\n\nexport type GrTimelineGroupBy<T> = string | ((item: T, index: number) => string)\n\n/** Пункт вместе с его позицией в исходном наборе: ключи `v-for` считаются от неё. */\nexport interface GrTimelineEntry<T> {\n  item: T\n  index: number\n}\n\nexport interface GrTimelineGroup<T> {\n  /** Ключ группы. Пустая строка — заголовка у группы нет. */\n  key: string\n  entries: GrTimelineEntry<T>[]\n}\n\nfunction keyOf<T>(item: T, index: number, groupBy: GrTimelineGroupBy<T>): string {\n  if (typeof groupBy === 'function')\n    return String(groupBy(item, index) ?? '')\n\n  const value = (item as Record<string, unknown> | null | undefined)?.[groupBy]\n\n  // `undefined` в поле — это «группы нет», а не группа с надписью «undefined».\n  return value == null ? '' : String(value)\n}\n\n/**\n * Режет набор на группы, **не меняя порядок**: лента хронологична, и\n * пересортировать её компонент не вправе. Порядок групп — порядок первого\n * вхождения ключа; разорванная группа (`A B A`) собирается в одну.\n *\n * Без `groupBy` — одна безымянная группа: плоская лента остаётся частным\n * случаем, и второй ветки рендера у компонента не появляется.\n */\nexport function groupTimelineItems<T>(\n  items: readonly T[],\n  groupBy?: GrTimelineGroupBy<T>,\n): GrTimelineGroup<T>[] {\n  const entries = items.map((item, index) => ({ item, index }))\n\n  if (groupBy === undefined)\n    return entries.length === 0 ? [] : [{ key: '', entries }]\n\n  const byKey = new Map<string, GrTimelineGroup<T>>()\n\n  for (const entry of entries) {\n    const key = keyOf(entry.item, entry.index, groupBy)\n    const group = byKey.get(key)\n\n    if (group)\n      group.entries.push(entry)\n    else\n      byKey.set(key, { key, entries: [entry] })\n  }\n\n  return [...byKey.values()]\n}\n","<script setup lang=\"ts\" generic=\"T = unknown\">\nimport { computed, provide, useSlots, watch } from 'vue'\n\nimport GrSkeleton from '../GrSkeleton/GrSkeleton.vue'\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { hasMeaningfulSlotContent } from '../shared/slotNodes'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport { GR_TIMELINE_CONTEXT, type GrTimelineHeadingLevel } from './grTimelineContext'\nimport {\n  emptyClass,\n  groupTitleClass,\n  loadingRowClass,\n  type GrTimelineDensity,\n  type GrTimelineLayout,\n  type GrTimelineOrientation,\n} from './grTimelineStyles'\nimport { groupTimelineItems, type GrTimelineGroupBy } from './timelineGroups'\n\nexport type {\n  GrTimelineDensity,\n  GrTimelineLayout,\n  GrTimelineOrientation,\n} from './grTimelineStyles'\nexport type { GrTimelineGroupBy } from './timelineGroups'\n\nexport interface GrTimelineProps<TItem = unknown> {\n  /**\n   * Данные ленты. С ними пункты рисует слот `#item` — и только так лента знает\n   * состав набора, то есть может его группировать.\n   */\n  items?: TItem[]\n  /** Ключ пункта для `v-for`: имя поля или функция. Без него — индекс. */\n  itemKey?: string | ((item: TItem, index: number) => string | number)\n  /** Группировка: имя поля или функция от пункта. Заголовок группы — слот `#group`. */\n  groupBy?: GrTimelineGroupBy<TItem>\n  /** Уровень заголовка группы: лента обязана вписаться в структуру заголовков страницы. */\n  groupHeadingLevel?: GrTimelineHeadingLevel\n  /** Раскладка: одна ось, колонка времени слева или чередование сторон. */\n  layout?: GrTimelineLayout\n  /** Направление оси. Горизонтальная лента — скроллер. */\n  orientation?: GrTimelineOrientation\n  /** Плотность вертикальных отступов пункта. */\n  density?: GrTimelineDensity\n  /** Идёт загрузка: вместо пунктов — заглушки, контейнер помечен `aria-busy`. */\n  loading?: boolean\n  /** Сколько строк-заглушек показать при `loading`. */\n  loadingRows?: number\n  /**\n   * Лента пуста. По умолчанию определяется сама — по данным или по слоту; проп\n   * нужен там, где потребитель знает лучше.\n   */\n  empty?: boolean\n  /** Текст пустого состояния. Слот `#empty` сильнее. */\n  emptyText?: string\n}\n\nconst props = withDefaults(defineProps<GrTimelineProps<T>>(), {\n  items: undefined,\n  itemKey: undefined,\n  groupBy: undefined,\n  // Настоящие дефолты живут в резолверах `useGrComponentProp`: объявленный здесь\n  // дефолт неотличим от значения, переданного потребителем, и перебивал бы конфиг.\n  groupHeadingLevel: undefined,\n  layout: undefined,\n  orientation: undefined,\n  density: undefined,\n  loading: false,\n  loadingRows: 3,\n  empty: undefined,\n  emptyText: undefined,\n})\n\ndefineSlots<{\n  /** Пункты ленты (`GrTimelineItem`), когда данные не переданы пропом. */\n  default?: () => any\n  /** Пункт в data-режиме. */\n  item?: (props: { item: T, index: number }) => any\n  /** Заголовок группы. По умолчанию — сам ключ. */\n  group?: (props: { group: string, items: T[] }) => any\n  /** Содержимое пустого состояния вместо текста по умолчанию. */\n  empty?: () => any\n  /** Заглушки загрузки вместо строк по умолчанию. */\n  loading?: () => any\n}>()\n\nconst slots = useSlots()\nconst { t } = useGranularityTranslations()\n\nconst density = useGrComponentProp('GrTimeline', 'density', () => props.density, 'regular')\nconst orientation = useGrComponentProp('GrTimeline', 'orientation', () => props.orientation, 'vertical')\nconst headingLevel = useGrComponentProp('GrTimeline', 'groupHeadingLevel', () => props.groupHeadingLevel, 3)\nconst requestedLayout = useGrComponentProp('GrTimeline', 'layout', () => props.layout, 'stacked')\n\n/**\n * Горизонтальная лента знает одну раскладку: колонка времени и чередование\n * сторон — это вертикальные приёмы, у горизонтальной оси сторон нет.\n */\nconst layout = computed<GrTimelineLayout>(() => (\n  orientation.value === 'horizontal' ? 'stacked' : requestedLayout.value\n))\n\nconst headingTag = computed(() => `h${headingLevel.value}`)\n\nconst dataMode = computed(() => props.items !== undefined)\n\nconst grouped = computed(() => dataMode.value && props.groupBy !== undefined)\n\nconst groups = computed(() => groupTimelineItems(props.items ?? [], props.groupBy))\n\n/** Единственная группа плоской ленты: тот же набор, что и в data-режиме без группировки. */\nconst entries = computed(() => groups.value[0]?.entries ?? [])\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.timeline.empty', 'Nothing here yet'))\n\nconst isEmpty = computed(() => {\n  if (props.empty !== undefined)\n    return props.empty\n\n  if (dataMode.value)\n    return props.items!.length === 0\n\n  // `v-for` по пустому массиву оставляет фрагмент без узлов, `v-if` — комментарий,\n  // и ни то ни другое пунктом ленты не является.\n  return !hasMeaningfulSlotContent(slots.default?.() ?? [])\n})\n\nconst loadingRowCount = computed(() => Math.max(1, Math.trunc(props.loadingRows)))\n\nfunction keyOf(item: T, index: number): string | number {\n  const key = props.itemKey\n  if (typeof key === 'function')\n    return key(item, index)\n  if (typeof key === 'string')\n    return (item as Record<string, unknown>)[key] as string | number\n\n  return index\n}\n\nfunction itemsOf(group: { entries: { item: T }[] }): T[] {\n  return group.entries.map(entry => entry.item)\n}\n\nprovide(GR_TIMELINE_CONTEXT, { layout, orientation, density })\n\nif (__GR_DEV__) {\n  watch(\n    () => [dataMode.value, Boolean(slots.item)] as const,\n    ([hasItems, hasSlot]) => {\n      if (hasItems && !hasSlot) {\n        console.warn(\n          '[granularity] GrTimeline: с `items` пункты рисует слот `#item` — без него лента пуста.',\n        )\n      }\n    },\n    { immediate: true },\n  )\n\n  watch(\n    () => [dataMode.value, props.groupBy !== undefined] as const,\n    ([hasItems, hasGroupBy]) => {\n      if (hasGroupBy && !hasItems) {\n        console.warn(\n          '[granularity] GrTimeline: `groupBy` работает только с `items` — пункты из слота по '\n          + 'умолчанию лента не разбирает и сгруппировать их ей не из чего.',\n        )\n      }\n    },\n    { immediate: true },\n  )\n\n  watch(\n    () => [orientation.value, requestedLayout.value] as const,\n    ([axis, requested]) => {\n      if (axis === 'horizontal' && requested !== 'stacked') {\n        console.warn(\n          `[granularity] GrTimeline: layout=\"${requested}\" — вертикальная раскладка, `\n          + 'в горизонтальной ленте она игнорируется.',\n        )\n      }\n    },\n    { immediate: true },\n  )\n}\n</script>\n\n<template>\n  <div\n    data-gr-timeline\n    :data-layout=\"layout\"\n    :data-orientation=\"orientation\"\n    :aria-busy=\"loading ? 'true' : undefined\"\n  >\n    <template v-if=\"loading\">\n      <slot name=\"loading\">\n        <div\n          v-for=\"row in loadingRowCount\"\n          :key=\"row\"\n          data-gr-timeline-loading-row\n          :class=\"loadingRowClass\"\n        >\n          <GrSkeleton variant=\"circle\" width=\"var(--gr-timeline-marker-size, 10px)\" />\n          <GrSkeleton />\n        </div>\n      </slot>\n    </template>\n\n    <div\n      v-else-if=\"isEmpty\"\n      data-gr-timeline-empty\n      :class=\"emptyClass\"\n    >\n      <slot name=\"empty\">\n        {{ resolvedEmptyText }}\n      </slot>\n    </div>\n\n    <template v-else-if=\"grouped\">\n      <!--\n        Группа — секция с заголовком, а не пункт-заголовок внутри списка:\n        `<li>` с датой попал бы в набор событий и был бы объявлен как одно из них.\n      -->\n      <section\n        v-for=\"group in groups\"\n        :key=\"group.key\"\n        data-gr-timeline-group\n      >\n        <div\n          v-if=\"group.key\"\n          data-gr-timeline-group-header\n        >\n          <div data-gr-timeline-rail aria-hidden=\"true\">\n            <span data-gr-timeline-line />\n          </div>\n\n          <component\n            :is=\"headingTag\"\n            data-gr-timeline-group-title\n            :class=\"groupTitleClass\"\n          >\n            <slot name=\"group\" :group=\"group.key\" :items=\"itemsOf(group)\">\n              {{ group.key }}\n            </slot>\n          </component>\n        </div>\n\n        <ol\n          data-gr-timeline-list\n          :tabindex=\"orientation === 'horizontal' ? 0 : undefined\"\n        >\n          <template\n            v-for=\"entry in group.entries\"\n            :key=\"keyOf(entry.item, entry.index)\"\n          >\n            <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" />\n          </template>\n        </ol>\n      </section>\n    </template>\n\n    <ol\n      v-else\n      data-gr-timeline-list\n      :tabindex=\"orientation === 'horizontal' ? 0 : undefined\"\n    >\n      <template v-if=\"dataMode\">\n        <template\n          v-for=\"entry in entries\"\n          :key=\"keyOf(entry.item, entry.index)\"\n        >\n          <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" />\n        </template>\n      </template>\n\n      <slot v-else />\n    </ol>\n  </div>\n</template>\n\n<style>\n/*\n * Геометрия ленты живёт здесь, а не в утилитах, по одной причине: сторона\n * пункта в `alternate` — это `nth-child`, а обрыв оси — `last-child`, и оба\n * вопроса утилитами не выражаются. Альтернатива — регистрация пунктов в\n * контексте на `onMounted` — дала бы порядок, зависящий от порядка монтирования,\n * и разъезжалась бы на `v-if` посреди ленты.\n */\n\n[data-gr-timeline] {\n  --gr-timeline-columns: auto 1fr;\n}\n\n[data-gr-timeline][data-layout='time'] {\n  --gr-timeline-columns: var(--gr-timeline-time-width, 5.5rem) auto 1fr;\n}\n\n[data-gr-timeline][data-layout='alternate'] {\n  --gr-timeline-columns: 1fr auto 1fr;\n}\n\n[data-gr-timeline-list] {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n[data-gr-timeline-item],\n[data-gr-timeline-group-header] {\n  display: grid;\n  grid-template-columns: var(--gr-timeline-columns);\n  column-gap: var(--gr-timeline-gap, 0.75rem);\n  align-items: start;\n}\n\n[data-gr-timeline-aside] {\n  text-align: end;\n}\n\n/*\n * Ось — отрезок у каждого пункта, а не одна длинная линия: соседние отрезки\n * смыкаются сами, и мерить высоту списка не приходится.\n */\n[data-gr-timeline-rail] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  align-self: stretch;\n  padding-top: var(--gr-timeline-marker-top, 0.35rem);\n  min-width: var(--gr-timeline-marker-size, 10px);\n}\n\n[data-gr-timeline-rail] > :not([data-gr-timeline-line]) {\n  flex: none;\n}\n\n[data-gr-timeline-marker] {\n  box-sizing: border-box;\n  width: var(--gr-timeline-marker-size, 10px);\n  height: var(--gr-timeline-marker-size, 10px);\n  border-width: var(--gr-timeline-marker-ring, 2px);\n  border-style: solid;\n  border-color: transparent;\n}\n\n[data-gr-timeline-line] {\n  flex: 1 1 auto;\n  width: var(--gr-timeline-axis-width, 2px);\n  min-height: var(--gr-timeline-line-min, 0.75rem);\n  margin-top: 0.25rem;\n  /* Ровно на столько следующая точка отступает от верха своей строки: без этого\n     отрезок не доходит до неё, и ось выглядит пунктиром из длинных штрихов. */\n  margin-bottom: calc(-1 * var(--gr-timeline-marker-top, 0.35rem));\n  background-color: var(--gr-timeline-axis-color, var(--gr-brd));\n}\n\n/*\n * Пунктиром идёт участок, ведущий **к** незавершённому событию, и всё, что за\n * ним: непройденный путь. Отрезок после точки для этого не годится — обычно\n * незавершённое событие последнее, и его отрезка не видно вовсе.\n */\n[data-gr-timeline-item]:has(+ [data-gr-timeline-item][data-pending]) [data-gr-timeline-line],\n[data-gr-timeline-item][data-pending] [data-gr-timeline-line] {\n  background-color: transparent;\n  background-image: repeating-linear-gradient(\n    to bottom,\n    var(--gr-timeline-axis-color, var(--gr-brd)) 0 var(--gr-timeline-dash, 4px),\n    transparent var(--gr-timeline-dash, 4px) calc(var(--gr-timeline-dash, 4px) * 2)\n  );\n}\n\n/* Хвост после последнего события — линия в никуда. */\n[data-gr-timeline-item]:last-child [data-gr-timeline-line] {\n  visibility: hidden;\n}\n\n/* Между группами ось не рвётся: разрыв читался бы как две разные ленты. */\n[data-gr-timeline-group]:not(:last-of-type) [data-gr-timeline-item]:last-child [data-gr-timeline-line] {\n  visibility: visible;\n}\n\n[data-gr-timeline-group-header] [data-gr-timeline-rail] {\n  padding-top: 0;\n}\n\n[data-gr-timeline-group] + [data-gr-timeline-group] [data-gr-timeline-group-title] {\n  padding-top: 0.5rem;\n}\n\n[data-gr-timeline-group-header] [data-gr-timeline-line] {\n  margin-top: 0;\n}\n\n/* Над первым заголовком оси ещё нет — линия висела бы в воздухе. */\n[data-gr-timeline-group]:first-of-type [data-gr-timeline-group-header] [data-gr-timeline-line] {\n  visibility: hidden;\n}\n\n[data-gr-timeline][data-layout='time'] [data-gr-timeline-group-header] [data-gr-timeline-rail],\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-header] [data-gr-timeline-rail] {\n  grid-column: 2;\n}\n\n[data-gr-timeline][data-layout='time'] [data-gr-timeline-group-title],\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-title] {\n  grid-column: 3;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-rail] {\n  grid-column: 2;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-content] {\n  grid-column: 3;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-item]:nth-child(even) [data-gr-timeline-content] {\n  grid-column: 1;\n  grid-row: 1;\n  text-align: end;\n}\n\n/* Двухсторонняя лента в узкой колонке нечитаема — там она односторонняя. */\n@media (max-width: 640px) {\n  [data-gr-timeline][data-layout='alternate'] {\n    --gr-timeline-columns: auto 1fr;\n  }\n\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-rail],\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-header] [data-gr-timeline-rail] {\n    grid-column: 1;\n  }\n\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-content],\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-item]:nth-child(even) [data-gr-timeline-content],\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-title] {\n    grid-column: 2;\n    text-align: start;\n  }\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-list] {\n  display: flex;\n  flex-direction: row;\n  overflow-x: auto;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item] {\n  grid-template-columns: 1fr;\n  min-width: var(--gr-timeline-item-min-width, 12rem);\n  padding-inline-end: var(--gr-timeline-gap, 0.75rem);\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-content] {\n  padding-bottom: 0;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-rail] {\n  flex-direction: row;\n  align-items: center;\n  align-self: auto;\n  padding-top: 0;\n  padding-bottom: 0.25rem;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-line] {\n  width: auto;\n  height: var(--gr-timeline-axis-width, 2px);\n  min-width: var(--gr-timeline-line-min, 0.75rem);\n  min-height: 0;\n  margin-top: 0;\n  margin-inline-start: 0.25rem;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item]:has(+ [data-gr-timeline-item][data-pending]) [data-gr-timeline-line],\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item][data-pending] [data-gr-timeline-line] {\n  background-image: repeating-linear-gradient(\n    to right,\n    var(--gr-timeline-axis-color, var(--gr-brd)) 0 var(--gr-timeline-dash, 4px),\n    transparent var(--gr-timeline-dash, 4px) calc(var(--gr-timeline-dash, 4px) * 2)\n  );\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T = unknown\">\nimport { computed, provide, useSlots, watch } from 'vue'\n\nimport GrSkeleton from '../GrSkeleton/GrSkeleton.vue'\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { hasMeaningfulSlotContent } from '../shared/slotNodes'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport { GR_TIMELINE_CONTEXT, type GrTimelineHeadingLevel } from './grTimelineContext'\nimport {\n  emptyClass,\n  groupTitleClass,\n  loadingRowClass,\n  type GrTimelineDensity,\n  type GrTimelineLayout,\n  type GrTimelineOrientation,\n} from './grTimelineStyles'\nimport { groupTimelineItems, type GrTimelineGroupBy } from './timelineGroups'\n\nexport type {\n  GrTimelineDensity,\n  GrTimelineLayout,\n  GrTimelineOrientation,\n} from './grTimelineStyles'\nexport type { GrTimelineGroupBy } from './timelineGroups'\n\nexport interface GrTimelineProps<TItem = unknown> {\n  /**\n   * Данные ленты. С ними пункты рисует слот `#item` — и только так лента знает\n   * состав набора, то есть может его группировать.\n   */\n  items?: TItem[]\n  /** Ключ пункта для `v-for`: имя поля или функция. Без него — индекс. */\n  itemKey?: string | ((item: TItem, index: number) => string | number)\n  /** Группировка: имя поля или функция от пункта. Заголовок группы — слот `#group`. */\n  groupBy?: GrTimelineGroupBy<TItem>\n  /** Уровень заголовка группы: лента обязана вписаться в структуру заголовков страницы. */\n  groupHeadingLevel?: GrTimelineHeadingLevel\n  /** Раскладка: одна ось, колонка времени слева или чередование сторон. */\n  layout?: GrTimelineLayout\n  /** Направление оси. Горизонтальная лента — скроллер. */\n  orientation?: GrTimelineOrientation\n  /** Плотность вертикальных отступов пункта. */\n  density?: GrTimelineDensity\n  /** Идёт загрузка: вместо пунктов — заглушки, контейнер помечен `aria-busy`. */\n  loading?: boolean\n  /** Сколько строк-заглушек показать при `loading`. */\n  loadingRows?: number\n  /**\n   * Лента пуста. По умолчанию определяется сама — по данным или по слоту; проп\n   * нужен там, где потребитель знает лучше.\n   */\n  empty?: boolean\n  /** Текст пустого состояния. Слот `#empty` сильнее. */\n  emptyText?: string\n}\n\nconst props = withDefaults(defineProps<GrTimelineProps<T>>(), {\n  items: undefined,\n  itemKey: undefined,\n  groupBy: undefined,\n  // Настоящие дефолты живут в резолверах `useGrComponentProp`: объявленный здесь\n  // дефолт неотличим от значения, переданного потребителем, и перебивал бы конфиг.\n  groupHeadingLevel: undefined,\n  layout: undefined,\n  orientation: undefined,\n  density: undefined,\n  loading: false,\n  loadingRows: 3,\n  empty: undefined,\n  emptyText: undefined,\n})\n\ndefineSlots<{\n  /** Пункты ленты (`GrTimelineItem`), когда данные не переданы пропом. */\n  default?: () => any\n  /** Пункт в data-режиме. */\n  item?: (props: { item: T, index: number }) => any\n  /** Заголовок группы. По умолчанию — сам ключ. */\n  group?: (props: { group: string, items: T[] }) => any\n  /** Содержимое пустого состояния вместо текста по умолчанию. */\n  empty?: () => any\n  /** Заглушки загрузки вместо строк по умолчанию. */\n  loading?: () => any\n}>()\n\nconst slots = useSlots()\nconst { t } = useGranularityTranslations()\n\nconst density = useGrComponentProp('GrTimeline', 'density', () => props.density, 'regular')\nconst orientation = useGrComponentProp('GrTimeline', 'orientation', () => props.orientation, 'vertical')\nconst headingLevel = useGrComponentProp('GrTimeline', 'groupHeadingLevel', () => props.groupHeadingLevel, 3)\nconst requestedLayout = useGrComponentProp('GrTimeline', 'layout', () => props.layout, 'stacked')\n\n/**\n * Горизонтальная лента знает одну раскладку: колонка времени и чередование\n * сторон — это вертикальные приёмы, у горизонтальной оси сторон нет.\n */\nconst layout = computed<GrTimelineLayout>(() => (\n  orientation.value === 'horizontal' ? 'stacked' : requestedLayout.value\n))\n\nconst headingTag = computed(() => `h${headingLevel.value}`)\n\nconst dataMode = computed(() => props.items !== undefined)\n\nconst grouped = computed(() => dataMode.value && props.groupBy !== undefined)\n\nconst groups = computed(() => groupTimelineItems(props.items ?? [], props.groupBy))\n\n/** Единственная группа плоской ленты: тот же набор, что и в data-режиме без группировки. */\nconst entries = computed(() => groups.value[0]?.entries ?? [])\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.timeline.empty', 'Nothing here yet'))\n\nconst isEmpty = computed(() => {\n  if (props.empty !== undefined)\n    return props.empty\n\n  if (dataMode.value)\n    return props.items!.length === 0\n\n  // `v-for` по пустому массиву оставляет фрагмент без узлов, `v-if` — комментарий,\n  // и ни то ни другое пунктом ленты не является.\n  return !hasMeaningfulSlotContent(slots.default?.() ?? [])\n})\n\nconst loadingRowCount = computed(() => Math.max(1, Math.trunc(props.loadingRows)))\n\nfunction keyOf(item: T, index: number): string | number {\n  const key = props.itemKey\n  if (typeof key === 'function')\n    return key(item, index)\n  if (typeof key === 'string')\n    return (item as Record<string, unknown>)[key] as string | number\n\n  return index\n}\n\nfunction itemsOf(group: { entries: { item: T }[] }): T[] {\n  return group.entries.map(entry => entry.item)\n}\n\nprovide(GR_TIMELINE_CONTEXT, { layout, orientation, density })\n\nif (__GR_DEV__) {\n  watch(\n    () => [dataMode.value, Boolean(slots.item)] as const,\n    ([hasItems, hasSlot]) => {\n      if (hasItems && !hasSlot) {\n        console.warn(\n          '[granularity] GrTimeline: с `items` пункты рисует слот `#item` — без него лента пуста.',\n        )\n      }\n    },\n    { immediate: true },\n  )\n\n  watch(\n    () => [dataMode.value, props.groupBy !== undefined] as const,\n    ([hasItems, hasGroupBy]) => {\n      if (hasGroupBy && !hasItems) {\n        console.warn(\n          '[granularity] GrTimeline: `groupBy` работает только с `items` — пункты из слота по '\n          + 'умолчанию лента не разбирает и сгруппировать их ей не из чего.',\n        )\n      }\n    },\n    { immediate: true },\n  )\n\n  watch(\n    () => [orientation.value, requestedLayout.value] as const,\n    ([axis, requested]) => {\n      if (axis === 'horizontal' && requested !== 'stacked') {\n        console.warn(\n          `[granularity] GrTimeline: layout=\"${requested}\" — вертикальная раскладка, `\n          + 'в горизонтальной ленте она игнорируется.',\n        )\n      }\n    },\n    { immediate: true },\n  )\n}\n</script>\n\n<template>\n  <div\n    data-gr-timeline\n    :data-layout=\"layout\"\n    :data-orientation=\"orientation\"\n    :aria-busy=\"loading ? 'true' : undefined\"\n  >\n    <template v-if=\"loading\">\n      <slot name=\"loading\">\n        <div\n          v-for=\"row in loadingRowCount\"\n          :key=\"row\"\n          data-gr-timeline-loading-row\n          :class=\"loadingRowClass\"\n        >\n          <GrSkeleton variant=\"circle\" width=\"var(--gr-timeline-marker-size, 10px)\" />\n          <GrSkeleton />\n        </div>\n      </slot>\n    </template>\n\n    <div\n      v-else-if=\"isEmpty\"\n      data-gr-timeline-empty\n      :class=\"emptyClass\"\n    >\n      <slot name=\"empty\">\n        {{ resolvedEmptyText }}\n      </slot>\n    </div>\n\n    <template v-else-if=\"grouped\">\n      <!--\n        Группа — секция с заголовком, а не пункт-заголовок внутри списка:\n        `<li>` с датой попал бы в набор событий и был бы объявлен как одно из них.\n      -->\n      <section\n        v-for=\"group in groups\"\n        :key=\"group.key\"\n        data-gr-timeline-group\n      >\n        <div\n          v-if=\"group.key\"\n          data-gr-timeline-group-header\n        >\n          <div data-gr-timeline-rail aria-hidden=\"true\">\n            <span data-gr-timeline-line />\n          </div>\n\n          <component\n            :is=\"headingTag\"\n            data-gr-timeline-group-title\n            :class=\"groupTitleClass\"\n          >\n            <slot name=\"group\" :group=\"group.key\" :items=\"itemsOf(group)\">\n              {{ group.key }}\n            </slot>\n          </component>\n        </div>\n\n        <ol\n          data-gr-timeline-list\n          :tabindex=\"orientation === 'horizontal' ? 0 : undefined\"\n        >\n          <template\n            v-for=\"entry in group.entries\"\n            :key=\"keyOf(entry.item, entry.index)\"\n          >\n            <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" />\n          </template>\n        </ol>\n      </section>\n    </template>\n\n    <ol\n      v-else\n      data-gr-timeline-list\n      :tabindex=\"orientation === 'horizontal' ? 0 : undefined\"\n    >\n      <template v-if=\"dataMode\">\n        <template\n          v-for=\"entry in entries\"\n          :key=\"keyOf(entry.item, entry.index)\"\n        >\n          <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" />\n        </template>\n      </template>\n\n      <slot v-else />\n    </ol>\n  </div>\n</template>\n\n<style>\n/*\n * Геометрия ленты живёт здесь, а не в утилитах, по одной причине: сторона\n * пункта в `alternate` — это `nth-child`, а обрыв оси — `last-child`, и оба\n * вопроса утилитами не выражаются. Альтернатива — регистрация пунктов в\n * контексте на `onMounted` — дала бы порядок, зависящий от порядка монтирования,\n * и разъезжалась бы на `v-if` посреди ленты.\n */\n\n[data-gr-timeline] {\n  --gr-timeline-columns: auto 1fr;\n}\n\n[data-gr-timeline][data-layout='time'] {\n  --gr-timeline-columns: var(--gr-timeline-time-width, 5.5rem) auto 1fr;\n}\n\n[data-gr-timeline][data-layout='alternate'] {\n  --gr-timeline-columns: 1fr auto 1fr;\n}\n\n[data-gr-timeline-list] {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n[data-gr-timeline-item],\n[data-gr-timeline-group-header] {\n  display: grid;\n  grid-template-columns: var(--gr-timeline-columns);\n  column-gap: var(--gr-timeline-gap, 0.75rem);\n  align-items: start;\n}\n\n[data-gr-timeline-aside] {\n  text-align: end;\n}\n\n/*\n * Ось — отрезок у каждого пункта, а не одна длинная линия: соседние отрезки\n * смыкаются сами, и мерить высоту списка не приходится.\n */\n[data-gr-timeline-rail] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  align-self: stretch;\n  padding-top: var(--gr-timeline-marker-top, 0.35rem);\n  min-width: var(--gr-timeline-marker-size, 10px);\n}\n\n[data-gr-timeline-rail] > :not([data-gr-timeline-line]) {\n  flex: none;\n}\n\n[data-gr-timeline-marker] {\n  box-sizing: border-box;\n  width: var(--gr-timeline-marker-size, 10px);\n  height: var(--gr-timeline-marker-size, 10px);\n  border-width: var(--gr-timeline-marker-ring, 2px);\n  border-style: solid;\n  border-color: transparent;\n}\n\n[data-gr-timeline-line] {\n  flex: 1 1 auto;\n  width: var(--gr-timeline-axis-width, 2px);\n  min-height: var(--gr-timeline-line-min, 0.75rem);\n  margin-top: 0.25rem;\n  /* Ровно на столько следующая точка отступает от верха своей строки: без этого\n     отрезок не доходит до неё, и ось выглядит пунктиром из длинных штрихов. */\n  margin-bottom: calc(-1 * var(--gr-timeline-marker-top, 0.35rem));\n  background-color: var(--gr-timeline-axis-color, var(--gr-brd));\n}\n\n/*\n * Пунктиром идёт участок, ведущий **к** незавершённому событию, и всё, что за\n * ним: непройденный путь. Отрезок после точки для этого не годится — обычно\n * незавершённое событие последнее, и его отрезка не видно вовсе.\n */\n[data-gr-timeline-item]:has(+ [data-gr-timeline-item][data-pending]) [data-gr-timeline-line],\n[data-gr-timeline-item][data-pending] [data-gr-timeline-line] {\n  background-color: transparent;\n  background-image: repeating-linear-gradient(\n    to bottom,\n    var(--gr-timeline-axis-color, var(--gr-brd)) 0 var(--gr-timeline-dash, 4px),\n    transparent var(--gr-timeline-dash, 4px) calc(var(--gr-timeline-dash, 4px) * 2)\n  );\n}\n\n/* Хвост после последнего события — линия в никуда. */\n[data-gr-timeline-item]:last-child [data-gr-timeline-line] {\n  visibility: hidden;\n}\n\n/* Между группами ось не рвётся: разрыв читался бы как две разные ленты. */\n[data-gr-timeline-group]:not(:last-of-type) [data-gr-timeline-item]:last-child [data-gr-timeline-line] {\n  visibility: visible;\n}\n\n[data-gr-timeline-group-header] [data-gr-timeline-rail] {\n  padding-top: 0;\n}\n\n[data-gr-timeline-group] + [data-gr-timeline-group] [data-gr-timeline-group-title] {\n  padding-top: 0.5rem;\n}\n\n[data-gr-timeline-group-header] [data-gr-timeline-line] {\n  margin-top: 0;\n}\n\n/* Над первым заголовком оси ещё нет — линия висела бы в воздухе. */\n[data-gr-timeline-group]:first-of-type [data-gr-timeline-group-header] [data-gr-timeline-line] {\n  visibility: hidden;\n}\n\n[data-gr-timeline][data-layout='time'] [data-gr-timeline-group-header] [data-gr-timeline-rail],\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-header] [data-gr-timeline-rail] {\n  grid-column: 2;\n}\n\n[data-gr-timeline][data-layout='time'] [data-gr-timeline-group-title],\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-title] {\n  grid-column: 3;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-rail] {\n  grid-column: 2;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-content] {\n  grid-column: 3;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-item]:nth-child(even) [data-gr-timeline-content] {\n  grid-column: 1;\n  grid-row: 1;\n  text-align: end;\n}\n\n/* Двухсторонняя лента в узкой колонке нечитаема — там она односторонняя. */\n@media (max-width: 640px) {\n  [data-gr-timeline][data-layout='alternate'] {\n    --gr-timeline-columns: auto 1fr;\n  }\n\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-rail],\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-header] [data-gr-timeline-rail] {\n    grid-column: 1;\n  }\n\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-content],\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-item]:nth-child(even) [data-gr-timeline-content],\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-title] {\n    grid-column: 2;\n    text-align: start;\n  }\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-list] {\n  display: flex;\n  flex-direction: row;\n  overflow-x: auto;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item] {\n  grid-template-columns: 1fr;\n  min-width: var(--gr-timeline-item-min-width, 12rem);\n  padding-inline-end: var(--gr-timeline-gap, 0.75rem);\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-content] {\n  padding-bottom: 0;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-rail] {\n  flex-direction: row;\n  align-items: center;\n  align-self: auto;\n  padding-top: 0;\n  padding-bottom: 0.25rem;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-line] {\n  width: auto;\n  height: var(--gr-timeline-axis-width, 2px);\n  min-width: var(--gr-timeline-line-min, 0.75rem);\n  min-height: 0;\n  margin-top: 0;\n  margin-inline-start: 0.25rem;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item]:has(+ [data-gr-timeline-item][data-pending]) [data-gr-timeline-line],\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item][data-pending] [data-gr-timeline-line] {\n  background-image: repeating-linear-gradient(\n    to right,\n    var(--gr-timeline-axis-color, var(--gr-brd)) 0 var(--gr-timeline-dash, 4px),\n    transparent var(--gr-timeline-dash, 4px) calc(var(--gr-timeline-dash, 4px) * 2)\n  );\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, inject, useSlots } from 'vue'\n\nimport { GR_TIMELINE_CONTEXT } from './grTimelineContext'\nimport {\n  descriptionClass,\n  grTimelineDensityClass,\n  grTimelineMarkerClass,\n  timeClass,\n  titleClass,\n  type GrTimelineMarkerVariant,\n  type GrTimelineTone,\n} from './grTimelineStyles'\n\nexport type { GrTimelineMarkerVariant, GrTimelineTone } from './grTimelineStyles'\n\nexport interface GrTimelineItemProps {\n  /** Метка времени. Слот `#time` сильнее. */\n  time?: string\n  /** Машиночитаемое значение метки: попадает в `datetime` тега `<time>`. */\n  datetime?: string\n  /** Заголовок события. Слот `#title` сильнее. */\n  title?: string\n  /** Пояснение под заголовком. Слот `#description` сильнее. */\n  description?: string\n  /** Цвет маркера из палитры пакета. */\n  tone?: GrTimelineTone\n  /** Заполненная точка — событие случилось, полая — запланировано. */\n  variant?: GrTimelineMarkerVariant\n  /**\n   * Событие ещё не произошло: точка полая, а ось пунктирна начиная с участка,\n   * **ведущего** к нему, — непройденный путь. Перебивает `variant`.\n   */\n  pending?: boolean\n}\n\nconst props = withDefaults(defineProps<GrTimelineItemProps>(), {\n  time: undefined,\n  datetime: undefined,\n  title: undefined,\n  description: undefined,\n  tone: 'neutral',\n  variant: 'filled',\n  pending: false,\n})\n\ndefineSlots<{\n  /** Содержимое события под заголовком и описанием. */\n  default?: () => any\n  /** Маркер вместо точки: иконка статуса, аватар автора, номер шага. */\n  marker?: () => any\n  /** Метка времени. */\n  time?: () => any\n  /** Заголовок события. */\n  title?: () => any\n  /** Пояснение под заголовком. */\n  description?: () => any\n}>()\n\nconst slots = useSlots()\n\n/**\n * Раскладку пункт читает из контейнера. Вне `GrTimeline` — дефолты: пункт\n * остаётся рабочей строкой, а не падает.\n */\nconst timeline = inject(GR_TIMELINE_CONTEXT, null)\n\nconst layout = computed(() => timeline?.layout.value ?? 'stacked')\nconst density = computed(() => timeline?.density.value ?? 'regular')\n\nconst markerClass = computed(() => grTimelineMarkerClass(\n  props.tone,\n  props.pending ? 'outlined' : props.variant,\n))\n\nconst hasTime = computed(() => !!slots.time || !!props.time)\nconst hasTitle = computed(() => !!slots.title || !!props.title)\nconst hasDescription = computed(() => !!slots.description || !!props.description)\n\n/** В `layout=\"time\"` метка уезжает в свою колонку, во всех остальных — в содержимое. */\nconst timeInAside = computed(() => layout.value === 'time')\n</script>\n\n<template>\n  <li\n    data-gr-timeline-item\n    :data-tone=\"tone\"\n    :data-pending=\"pending ? '' : undefined\"\n  >\n    <div\n      v-if=\"timeInAside\"\n      data-gr-timeline-aside\n    >\n      <time\n        v-if=\"hasTime\"\n        :datetime=\"datetime\"\n        :class=\"timeClass\"\n      >\n        <slot name=\"time\">{{ time }}</slot>\n      </time>\n    </div>\n\n    <!-- Ось и точка декоративны: смысл события несёт текст рядом. -->\n    <div\n      data-gr-timeline-rail\n      aria-hidden=\"true\"\n    >\n      <slot name=\"marker\">\n        <span data-gr-timeline-marker :class=\"markerClass\" />\n      </slot>\n      <span data-gr-timeline-line />\n    </div>\n\n    <!--\n      Вертикальный отступ живёт на содержимом, а не на строке: ось растянута по\n      строке грид-ячейкой, и её поля в высоту ячейки не входят — линия обрывалась\n      бы, не доходя до следующей точки.\n    -->\n    <div data-gr-timeline-content :class=\"grTimelineDensityClass(density)\">\n      <time\n        v-if=\"hasTime && !timeInAside\"\n        data-gr-timeline-time\n        :datetime=\"datetime\"\n        :class=\"timeClass\"\n      >\n        <slot name=\"time\">{{ time }}</slot>\n      </time>\n\n      <div v-if=\"hasTitle\" data-gr-timeline-title :class=\"titleClass\">\n        <slot name=\"title\">\n{{ title }}\n</slot>\n      </div>\n\n      <div v-if=\"hasDescription\" :class=\"descriptionClass\">\n        <slot name=\"description\">\n{{ description }}\n</slot>\n      </div>\n\n      <div v-if=\"$slots.default\" data-gr-timeline-body>\n        <slot />\n      </div>\n    </div>\n  </li>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject, useSlots } from 'vue'\n\nimport { GR_TIMELINE_CONTEXT } from './grTimelineContext'\nimport {\n  descriptionClass,\n  grTimelineDensityClass,\n  grTimelineMarkerClass,\n  timeClass,\n  titleClass,\n  type GrTimelineMarkerVariant,\n  type GrTimelineTone,\n} from './grTimelineStyles'\n\nexport type { GrTimelineMarkerVariant, GrTimelineTone } from './grTimelineStyles'\n\nexport interface GrTimelineItemProps {\n  /** Метка времени. Слот `#time` сильнее. */\n  time?: string\n  /** Машиночитаемое значение метки: попадает в `datetime` тега `<time>`. */\n  datetime?: string\n  /** Заголовок события. Слот `#title` сильнее. */\n  title?: string\n  /** Пояснение под заголовком. Слот `#description` сильнее. */\n  description?: string\n  /** Цвет маркера из палитры пакета. */\n  tone?: GrTimelineTone\n  /** Заполненная точка — событие случилось, полая — запланировано. */\n  variant?: GrTimelineMarkerVariant\n  /**\n   * Событие ещё не произошло: точка полая, а ось пунктирна начиная с участка,\n   * **ведущего** к нему, — непройденный путь. Перебивает `variant`.\n   */\n  pending?: boolean\n}\n\nconst props = withDefaults(defineProps<GrTimelineItemProps>(), {\n  time: undefined,\n  datetime: undefined,\n  title: undefined,\n  description: undefined,\n  tone: 'neutral',\n  variant: 'filled',\n  pending: false,\n})\n\ndefineSlots<{\n  /** Содержимое события под заголовком и описанием. */\n  default?: () => any\n  /** Маркер вместо точки: иконка статуса, аватар автора, номер шага. */\n  marker?: () => any\n  /** Метка времени. */\n  time?: () => any\n  /** Заголовок события. */\n  title?: () => any\n  /** Пояснение под заголовком. */\n  description?: () => any\n}>()\n\nconst slots = useSlots()\n\n/**\n * Раскладку пункт читает из контейнера. Вне `GrTimeline` — дефолты: пункт\n * остаётся рабочей строкой, а не падает.\n */\nconst timeline = inject(GR_TIMELINE_CONTEXT, null)\n\nconst layout = computed(() => timeline?.layout.value ?? 'stacked')\nconst density = computed(() => timeline?.density.value ?? 'regular')\n\nconst markerClass = computed(() => grTimelineMarkerClass(\n  props.tone,\n  props.pending ? 'outlined' : props.variant,\n))\n\nconst hasTime = computed(() => !!slots.time || !!props.time)\nconst hasTitle = computed(() => !!slots.title || !!props.title)\nconst hasDescription = computed(() => !!slots.description || !!props.description)\n\n/** В `layout=\"time\"` метка уезжает в свою колонку, во всех остальных — в содержимое. */\nconst timeInAside = computed(() => layout.value === 'time')\n</script>\n\n<template>\n  <li\n    data-gr-timeline-item\n    :data-tone=\"tone\"\n    :data-pending=\"pending ? '' : undefined\"\n  >\n    <div\n      v-if=\"timeInAside\"\n      data-gr-timeline-aside\n    >\n      <time\n        v-if=\"hasTime\"\n        :datetime=\"datetime\"\n        :class=\"timeClass\"\n      >\n        <slot name=\"time\">{{ time }}</slot>\n      </time>\n    </div>\n\n    <!-- Ось и точка декоративны: смысл события несёт текст рядом. -->\n    <div\n      data-gr-timeline-rail\n      aria-hidden=\"true\"\n    >\n      <slot name=\"marker\">\n        <span data-gr-timeline-marker :class=\"markerClass\" />\n      </slot>\n      <span data-gr-timeline-line />\n    </div>\n\n    <!--\n      Вертикальный отступ живёт на содержимом, а не на строке: ось растянута по\n      строке грид-ячейкой, и её поля в высоту ячейки не входят — линия обрывалась\n      бы, не доходя до следующей точки.\n    -->\n    <div data-gr-timeline-content :class=\"grTimelineDensityClass(density)\">\n      <time\n        v-if=\"hasTime && !timeInAside\"\n        data-gr-timeline-time\n        :datetime=\"datetime\"\n        :class=\"timeClass\"\n      >\n        <slot name=\"time\">{{ time }}</slot>\n      </time>\n\n      <div v-if=\"hasTitle\" data-gr-timeline-title :class=\"titleClass\">\n        <slot name=\"title\">\n{{ title }}\n</slot>\n      </div>\n\n      <div v-if=\"hasDescription\" :class=\"descriptionClass\">\n        <slot name=\"description\">\n{{ description }}\n</slot>\n      </div>\n\n      <div v-if=\"$slots.default\" data-gr-timeline-body>\n        <slot />\n      </div>\n    </div>\n  </li>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"GrTimeline-BiHpArsg.js","names":["$slots"],"sources":["../../../../src/components/GrTimeline/grTimelineContext.ts","../../../../src/components/GrTimeline/timelineGroups.ts","../../../../src/components/GrTimeline/GrTimeline.vue","../../../../src/components/GrTimeline/GrTimeline.vue","../../../../src/components/GrTimeline/GrTimelineItem.vue","../../../../src/components/GrTimeline/GrTimelineItem.vue"],"sourcesContent":["import type { ComputedRef, InjectionKey } from 'vue'\n\nimport type { GrTimelineDensity, GrTimelineLayout, GrTimelineOrientation } from './grTimelineStyles'\n\n/**\n * Уровень заголовка группы. Тот же довод, что у `GrCollapse`: лента в разделе\n * `<h4>` с захардкоженным `<h3>` рвёт навигацию по заголовкам.\n */\nexport const GR_TIMELINE_HEADING_LEVELS = [2, 3, 4, 5, 6] as const\n\nexport type GrTimelineHeadingLevel = typeof GR_TIMELINE_HEADING_LEVELS[number]\n\n/**\n * Пункт читает раскладку из контейнера, а не получает её пропом: иначе\n * `layout` пришлось бы дублировать на каждом `GrTimelineItem`.\n */\nexport interface GrTimelineContext {\n  layout: ComputedRef<GrTimelineLayout>\n  orientation: ComputedRef<GrTimelineOrientation>\n  density: ComputedRef<GrTimelineDensity>\n}\n\nexport const GR_TIMELINE_CONTEXT: InjectionKey<GrTimelineContext> = Symbol('GR_TIMELINE_CONTEXT')\n","/**\n * Группировка ленты событий. Без Vue — чтобы проверялась без монтирования.\n */\n\nexport type GrTimelineGroupBy<T> = string | ((item: T, index: number) => string)\n\n/** Пункт вместе с его позицией в исходном наборе: ключи `v-for` считаются от неё. */\nexport interface GrTimelineEntry<T> {\n  item: T\n  index: number\n}\n\nexport interface GrTimelineGroup<T> {\n  /** Ключ группы. Пустая строка — заголовка у группы нет. */\n  key: string\n  entries: GrTimelineEntry<T>[]\n}\n\nfunction keyOf<T>(item: T, index: number, groupBy: GrTimelineGroupBy<T>): string {\n  if (typeof groupBy === 'function')\n    return String(groupBy(item, index) ?? '')\n\n  const value = (item as Record<string, unknown> | null | undefined)?.[groupBy]\n\n  // `undefined` в поле — это «группы нет», а не группа с надписью «undefined».\n  return value == null ? '' : String(value)\n}\n\n/**\n * Режет набор на группы, **не меняя порядок**: лента хронологична, и\n * пересортировать её компонент не вправе. Порядок групп — порядок первого\n * вхождения ключа; разорванная группа (`A B A`) собирается в одну.\n *\n * Без `groupBy` — одна безымянная группа: плоская лента остаётся частным\n * случаем, и второй ветки рендера у компонента не появляется.\n */\nexport function groupTimelineItems<T>(\n  items: readonly T[],\n  groupBy?: GrTimelineGroupBy<T>,\n): GrTimelineGroup<T>[] {\n  const entries = items.map((item, index) => ({ item, index }))\n\n  if (groupBy === undefined)\n    return entries.length === 0 ? [] : [{ key: '', entries }]\n\n  const byKey = new Map<string, GrTimelineGroup<T>>()\n\n  for (const entry of entries) {\n    const key = keyOf(entry.item, entry.index, groupBy)\n    const group = byKey.get(key)\n\n    if (group)\n      group.entries.push(entry)\n    else\n      byKey.set(key, { key, entries: [entry] })\n  }\n\n  return [...byKey.values()]\n}\n","<script setup lang=\"ts\" generic=\"T = unknown\">\nimport { computed, provide, useSlots, watch } from 'vue'\n\nimport GrSkeleton from '../GrSkeleton/GrSkeleton.vue'\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { hasMeaningfulSlotContent } from '../shared/slotNodes'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport { GR_TIMELINE_CONTEXT, type GrTimelineHeadingLevel } from './grTimelineContext'\nimport {\n  emptyClass,\n  groupTitleClass,\n  loadingRowClass,\n  type GrTimelineDensity,\n  type GrTimelineLayout,\n  type GrTimelineOrientation,\n} from './grTimelineStyles'\nimport { groupTimelineItems, type GrTimelineGroupBy } from './timelineGroups'\n\nexport type {\n  GrTimelineDensity,\n  GrTimelineLayout,\n  GrTimelineOrientation,\n} from './grTimelineStyles'\nexport type { GrTimelineGroupBy } from './timelineGroups'\n\nexport interface GrTimelineProps<TItem = unknown> {\n  /**\n   * Данные ленты. С ними пункты рисует слот `#item` — и только так лента знает\n   * состав набора, то есть может его группировать.\n   */\n  items?: TItem[]\n  /** Ключ пункта для `v-for`: имя поля или функция. Без него — индекс. */\n  itemKey?: string | ((item: TItem, index: number) => string | number)\n  /** Группировка: имя поля или функция от пункта. Заголовок группы — слот `#group`. */\n  groupBy?: GrTimelineGroupBy<TItem>\n  /** Уровень заголовка группы: лента обязана вписаться в структуру заголовков страницы. */\n  groupHeadingLevel?: GrTimelineHeadingLevel\n  /** Раскладка: одна ось, колонка времени слева или чередование сторон. */\n  layout?: GrTimelineLayout\n  /** Направление оси. Горизонтальная лента — скроллер. */\n  orientation?: GrTimelineOrientation\n  /** Плотность вертикальных отступов пункта. */\n  density?: GrTimelineDensity\n  /** Идёт загрузка: вместо пунктов — заглушки, контейнер помечен `aria-busy`. */\n  loading?: boolean\n  /** Сколько строк-заглушек показать при `loading`. */\n  loadingRows?: number\n  /**\n   * Лента пуста. По умолчанию определяется сама — по данным или по слоту; проп\n   * нужен там, где потребитель знает лучше.\n   */\n  empty?: boolean\n  /** Текст пустого состояния. Слот `#empty` сильнее. */\n  emptyText?: string\n}\n\nconst props = withDefaults(defineProps<GrTimelineProps<T>>(), {\n  items: undefined,\n  itemKey: undefined,\n  groupBy: undefined,\n  // Настоящие дефолты живут в резолверах `useGrComponentProp`: объявленный здесь\n  // дефолт неотличим от значения, переданного потребителем, и перебивал бы конфиг.\n  groupHeadingLevel: undefined,\n  layout: undefined,\n  orientation: undefined,\n  density: undefined,\n  loading: false,\n  loadingRows: 3,\n  empty: undefined,\n  emptyText: undefined,\n})\n\ndefineSlots<{\n  /** Пункты ленты (`GrTimelineItem`), когда данные не переданы пропом. */\n  default?: () => any\n  /** Пункт в data-режиме. */\n  item?: (props: { item: T, index: number }) => any\n  /** Заголовок группы. По умолчанию — сам ключ. */\n  group?: (props: { group: string, items: T[] }) => any\n  /** Содержимое пустого состояния вместо текста по умолчанию. */\n  empty?: () => any\n  /** Заглушки загрузки вместо строк по умолчанию. */\n  loading?: () => any\n}>()\n\nconst slots = useSlots()\nconst { t } = useGranularityTranslations()\n\nconst density = useGrComponentProp('GrTimeline', 'density', () => props.density, 'regular')\nconst orientation = useGrComponentProp('GrTimeline', 'orientation', () => props.orientation, 'vertical')\nconst headingLevel = useGrComponentProp('GrTimeline', 'groupHeadingLevel', () => props.groupHeadingLevel, 3)\nconst requestedLayout = useGrComponentProp('GrTimeline', 'layout', () => props.layout, 'stacked')\n\n/**\n * Горизонтальная лента знает одну раскладку: колонка времени и чередование\n * сторон — это вертикальные приёмы, у горизонтальной оси сторон нет.\n */\nconst layout = computed<GrTimelineLayout>(() => (\n  orientation.value === 'horizontal' ? 'stacked' : requestedLayout.value\n))\n\nconst headingTag = computed(() => `h${headingLevel.value}`)\n\nconst dataMode = computed(() => props.items !== undefined)\n\nconst grouped = computed(() => dataMode.value && props.groupBy !== undefined)\n\nconst groups = computed(() => groupTimelineItems(props.items ?? [], props.groupBy))\n\n/** Единственная группа плоской ленты: тот же набор, что и в data-режиме без группировки. */\nconst entries = computed(() => groups.value[0]?.entries ?? [])\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.timeline.empty', 'Nothing here yet'))\n\nconst isEmpty = computed(() => {\n  if (props.empty !== undefined)\n    return props.empty\n\n  if (dataMode.value)\n    return props.items!.length === 0\n\n  // `v-for` по пустому массиву оставляет фрагмент без узлов, `v-if` — комментарий,\n  // и ни то ни другое пунктом ленты не является.\n  return !hasMeaningfulSlotContent(slots.default?.() ?? [])\n})\n\nconst loadingRowCount = computed(() => Math.max(1, Math.trunc(props.loadingRows)))\n\nfunction keyOf(item: T, index: number): string | number {\n  const key = props.itemKey\n  if (typeof key === 'function')\n    return key(item, index)\n  if (typeof key === 'string')\n    return (item as Record<string, unknown>)[key] as string | number\n\n  return index\n}\n\nfunction itemsOf(group: { entries: { item: T }[] }): T[] {\n  return group.entries.map(entry => entry.item)\n}\n\nprovide(GR_TIMELINE_CONTEXT, { layout, orientation, density })\n\nif (__GR_DEV__) {\n  watch(\n    () => [dataMode.value, Boolean(slots.item)] as const,\n    ([hasItems, hasSlot]) => {\n      if (hasItems && !hasSlot) {\n        console.warn(\n          '[granularity] GrTimeline: с `items` пункты рисует слот `#item` — без него лента пуста.',\n        )\n      }\n    },\n    { immediate: true },\n  )\n\n  watch(\n    () => [dataMode.value, props.groupBy !== undefined] as const,\n    ([hasItems, hasGroupBy]) => {\n      if (hasGroupBy && !hasItems) {\n        console.warn(\n          '[granularity] GrTimeline: `groupBy` работает только с `items` — пункты из слота по '\n          + 'умолчанию лента не разбирает и сгруппировать их ей не из чего.',\n        )\n      }\n    },\n    { immediate: true },\n  )\n\n  watch(\n    () => [orientation.value, requestedLayout.value] as const,\n    ([axis, requested]) => {\n      if (axis === 'horizontal' && requested !== 'stacked') {\n        console.warn(\n          `[granularity] GrTimeline: layout=\"${requested}\" — вертикальная раскладка, `\n          + 'в горизонтальной ленте она игнорируется.',\n        )\n      }\n    },\n    { immediate: true },\n  )\n}\n</script>\n\n<template>\n  <div\n    data-gr-timeline\n    :data-layout=\"layout\"\n    :data-orientation=\"orientation\"\n    :aria-busy=\"loading ? 'true' : undefined\"\n  >\n    <template v-if=\"loading\">\n      <slot name=\"loading\">\n        <div\n          v-for=\"row in loadingRowCount\"\n          :key=\"row\"\n          data-gr-timeline-loading-row\n          :class=\"loadingRowClass\"\n        >\n          <GrSkeleton variant=\"circle\" width=\"var(--gr-timeline-marker-size, 10px)\" />\n          <GrSkeleton />\n        </div>\n      </slot>\n    </template>\n\n    <div\n      v-else-if=\"isEmpty\"\n      data-gr-timeline-empty\n      :class=\"emptyClass\"\n    >\n      <slot name=\"empty\">\n        {{ resolvedEmptyText }}\n      </slot>\n    </div>\n\n    <template v-else-if=\"grouped\">\n      <!--\n        Группа — секция с заголовком, а не пункт-заголовок внутри списка:\n        `<li>` с датой попал бы в набор событий и был бы объявлен как одно из них.\n      -->\n      <section\n        v-for=\"group in groups\"\n        :key=\"group.key\"\n        data-gr-timeline-group\n      >\n        <div\n          v-if=\"group.key\"\n          data-gr-timeline-group-header\n        >\n          <div data-gr-timeline-rail aria-hidden=\"true\">\n            <span data-gr-timeline-line />\n          </div>\n\n          <component\n            :is=\"headingTag\"\n            data-gr-timeline-group-title\n            :class=\"groupTitleClass\"\n          >\n            <slot name=\"group\" :group=\"group.key\" :items=\"itemsOf(group)\">\n              {{ group.key }}\n            </slot>\n          </component>\n        </div>\n\n        <ol\n          data-gr-timeline-list\n          :tabindex=\"orientation === 'horizontal' ? 0 : undefined\"\n        >\n          <template\n            v-for=\"entry in group.entries\"\n            :key=\"keyOf(entry.item, entry.index)\"\n          >\n            <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" />\n          </template>\n        </ol>\n      </section>\n    </template>\n\n    <ol\n      v-else\n      data-gr-timeline-list\n      :tabindex=\"orientation === 'horizontal' ? 0 : undefined\"\n    >\n      <template v-if=\"dataMode\">\n        <template\n          v-for=\"entry in entries\"\n          :key=\"keyOf(entry.item, entry.index)\"\n        >\n          <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" />\n        </template>\n      </template>\n\n      <slot v-else />\n    </ol>\n  </div>\n</template>\n\n<style>\n/*\n * Геометрия ленты живёт здесь, а не в утилитах, по одной причине: сторона\n * пункта в `alternate` — это `nth-child`, а обрыв оси — `last-child`, и оба\n * вопроса утилитами не выражаются. Альтернатива — регистрация пунктов в\n * контексте на `onMounted` — дала бы порядок, зависящий от порядка монтирования,\n * и разъезжалась бы на `v-if` посреди ленты.\n */\n\n[data-gr-timeline] {\n  --gr-timeline-columns: auto minmax(0, 1fr);\n}\n\n[data-gr-timeline][data-layout='time'] {\n  --gr-timeline-columns: var(--gr-timeline-time-width, 5.5rem) auto minmax(0, 1fr);\n}\n\n[data-gr-timeline][data-layout='alternate'] {\n  --gr-timeline-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n}\n\n[data-gr-timeline-list] {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n[data-gr-timeline-item],\n[data-gr-timeline-group-header] {\n  display: grid;\n  grid-template-columns: var(--gr-timeline-columns);\n  column-gap: var(--gr-timeline-gap, 0.75rem);\n  align-items: start;\n}\n\n/*\n * Сжатие строки.\n *\n * Трек `1fr` — это `minmax(auto, 1fr)`, а его минимум равен наибольшему\n * минимальному вкладу элементов. У грид-элемента с `overflow: visible` этот\n * вклад равен min-content, то есть для строки с `white-space: nowrap` — её\n * полной ширине. Поэтому лента не сжималась, а `truncate` потребителя не\n * срабатывал: усекать было нечего, трек раздавался под текст. Явные\n * `minmax(0, …)` у треков и `min-width: 0` у элементов снимают оба минимума.\n *\n * Метка времени стоит в треке фиксированной длины, и её трек от этого не\n * меняется — но без `min-width: 0` длинная метка из слота `#time` раздаёт\n * min-content всей строки.\n */\n\n[data-gr-timeline-aside],\n[data-gr-timeline-content],\n[data-gr-timeline-group-title] {\n  min-width: 0;\n}\n\n[data-gr-timeline-aside] {\n  text-align: end;\n}\n\n/*\n * Ось — отрезок у каждого пункта, а не одна длинная линия: соседние отрезки\n * смыкаются сами, и мерить высоту списка не приходится.\n */\n[data-gr-timeline-rail] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  align-self: stretch;\n  padding-top: var(--gr-timeline-marker-top, 0.35rem);\n  min-width: var(--gr-timeline-marker-size, 10px);\n}\n\n[data-gr-timeline-rail] > :not([data-gr-timeline-line]) {\n  flex: none;\n}\n\n[data-gr-timeline-marker] {\n  box-sizing: border-box;\n  width: var(--gr-timeline-marker-size, 10px);\n  height: var(--gr-timeline-marker-size, 10px);\n  border-width: var(--gr-timeline-marker-ring, 2px);\n  border-style: solid;\n  border-color: transparent;\n}\n\n[data-gr-timeline-line] {\n  flex: 1 1 auto;\n  width: var(--gr-timeline-axis-width, 2px);\n  min-height: var(--gr-timeline-line-min, 0.75rem);\n  margin-top: 0.25rem;\n  /* Ровно на столько следующая точка отступает от верха своей строки: без этого\n     отрезок не доходит до неё, и ось выглядит пунктиром из длинных штрихов. */\n  margin-bottom: calc(-1 * var(--gr-timeline-marker-top, 0.35rem));\n  background-color: var(--gr-timeline-axis-color, var(--gr-brd));\n}\n\n/*\n * Пунктиром идёт участок, ведущий **к** незавершённому событию, и всё, что за\n * ним: непройденный путь. Отрезок после точки для этого не годится — обычно\n * незавершённое событие последнее, и его отрезка не видно вовсе.\n */\n[data-gr-timeline-item]:has(+ [data-gr-timeline-item][data-pending]) [data-gr-timeline-line],\n[data-gr-timeline-item][data-pending] [data-gr-timeline-line] {\n  background-color: transparent;\n  background-image: repeating-linear-gradient(\n    to bottom,\n    var(--gr-timeline-axis-color, var(--gr-brd)) 0 var(--gr-timeline-dash, 4px),\n    transparent var(--gr-timeline-dash, 4px) calc(var(--gr-timeline-dash, 4px) * 2)\n  );\n}\n\n/* Хвост после последнего события — линия в никуда. */\n[data-gr-timeline-item]:last-child [data-gr-timeline-line] {\n  visibility: hidden;\n}\n\n/* Между группами ось не рвётся: разрыв читался бы как две разные ленты. */\n[data-gr-timeline-group]:not(:last-of-type) [data-gr-timeline-item]:last-child [data-gr-timeline-line] {\n  visibility: visible;\n}\n\n[data-gr-timeline-group-header] [data-gr-timeline-rail] {\n  padding-top: 0;\n}\n\n[data-gr-timeline-group] + [data-gr-timeline-group] [data-gr-timeline-group-title] {\n  padding-top: 0.5rem;\n}\n\n[data-gr-timeline-group-header] [data-gr-timeline-line] {\n  margin-top: 0;\n}\n\n/* Над первым заголовком оси ещё нет — линия висела бы в воздухе. */\n[data-gr-timeline-group]:first-of-type [data-gr-timeline-group-header] [data-gr-timeline-line] {\n  visibility: hidden;\n}\n\n[data-gr-timeline][data-layout='time'] [data-gr-timeline-group-header] [data-gr-timeline-rail],\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-header] [data-gr-timeline-rail] {\n  grid-column: 2;\n}\n\n[data-gr-timeline][data-layout='time'] [data-gr-timeline-group-title],\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-title] {\n  grid-column: 3;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-rail] {\n  grid-column: 2;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-content] {\n  grid-column: 3;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-item]:nth-child(even) [data-gr-timeline-content] {\n  grid-column: 1;\n  grid-row: 1;\n  text-align: end;\n}\n\n/* Двухсторонняя лента в узкой колонке нечитаема — там она односторонняя. */\n@media (max-width: 640px) {\n  [data-gr-timeline][data-layout='alternate'] {\n    --gr-timeline-columns: auto minmax(0, 1fr);\n  }\n\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-rail],\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-header] [data-gr-timeline-rail] {\n    grid-column: 1;\n  }\n\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-content],\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-item]:nth-child(even) [data-gr-timeline-content],\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-title] {\n    grid-column: 2;\n    text-align: start;\n  }\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-list] {\n  display: flex;\n  flex-direction: row;\n  overflow-x: auto;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item] {\n  grid-template-columns: minmax(0, 1fr);\n  min-width: var(--gr-timeline-item-min-width, 12rem);\n  padding-inline-end: var(--gr-timeline-gap, 0.75rem);\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-content] {\n  padding-bottom: 0;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-rail] {\n  flex-direction: row;\n  align-items: center;\n  align-self: auto;\n  padding-top: 0;\n  padding-bottom: 0.25rem;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-line] {\n  width: auto;\n  height: var(--gr-timeline-axis-width, 2px);\n  min-width: var(--gr-timeline-line-min, 0.75rem);\n  min-height: 0;\n  margin-top: 0;\n  margin-inline-start: 0.25rem;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item]:has(+ [data-gr-timeline-item][data-pending]) [data-gr-timeline-line],\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item][data-pending] [data-gr-timeline-line] {\n  background-image: repeating-linear-gradient(\n    to right,\n    var(--gr-timeline-axis-color, var(--gr-brd)) 0 var(--gr-timeline-dash, 4px),\n    transparent var(--gr-timeline-dash, 4px) calc(var(--gr-timeline-dash, 4px) * 2)\n  );\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T = unknown\">\nimport { computed, provide, useSlots, watch } from 'vue'\n\nimport GrSkeleton from '../GrSkeleton/GrSkeleton.vue'\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { hasMeaningfulSlotContent } from '../shared/slotNodes'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport { GR_TIMELINE_CONTEXT, type GrTimelineHeadingLevel } from './grTimelineContext'\nimport {\n  emptyClass,\n  groupTitleClass,\n  loadingRowClass,\n  type GrTimelineDensity,\n  type GrTimelineLayout,\n  type GrTimelineOrientation,\n} from './grTimelineStyles'\nimport { groupTimelineItems, type GrTimelineGroupBy } from './timelineGroups'\n\nexport type {\n  GrTimelineDensity,\n  GrTimelineLayout,\n  GrTimelineOrientation,\n} from './grTimelineStyles'\nexport type { GrTimelineGroupBy } from './timelineGroups'\n\nexport interface GrTimelineProps<TItem = unknown> {\n  /**\n   * Данные ленты. С ними пункты рисует слот `#item` — и только так лента знает\n   * состав набора, то есть может его группировать.\n   */\n  items?: TItem[]\n  /** Ключ пункта для `v-for`: имя поля или функция. Без него — индекс. */\n  itemKey?: string | ((item: TItem, index: number) => string | number)\n  /** Группировка: имя поля или функция от пункта. Заголовок группы — слот `#group`. */\n  groupBy?: GrTimelineGroupBy<TItem>\n  /** Уровень заголовка группы: лента обязана вписаться в структуру заголовков страницы. */\n  groupHeadingLevel?: GrTimelineHeadingLevel\n  /** Раскладка: одна ось, колонка времени слева или чередование сторон. */\n  layout?: GrTimelineLayout\n  /** Направление оси. Горизонтальная лента — скроллер. */\n  orientation?: GrTimelineOrientation\n  /** Плотность вертикальных отступов пункта. */\n  density?: GrTimelineDensity\n  /** Идёт загрузка: вместо пунктов — заглушки, контейнер помечен `aria-busy`. */\n  loading?: boolean\n  /** Сколько строк-заглушек показать при `loading`. */\n  loadingRows?: number\n  /**\n   * Лента пуста. По умолчанию определяется сама — по данным или по слоту; проп\n   * нужен там, где потребитель знает лучше.\n   */\n  empty?: boolean\n  /** Текст пустого состояния. Слот `#empty` сильнее. */\n  emptyText?: string\n}\n\nconst props = withDefaults(defineProps<GrTimelineProps<T>>(), {\n  items: undefined,\n  itemKey: undefined,\n  groupBy: undefined,\n  // Настоящие дефолты живут в резолверах `useGrComponentProp`: объявленный здесь\n  // дефолт неотличим от значения, переданного потребителем, и перебивал бы конфиг.\n  groupHeadingLevel: undefined,\n  layout: undefined,\n  orientation: undefined,\n  density: undefined,\n  loading: false,\n  loadingRows: 3,\n  empty: undefined,\n  emptyText: undefined,\n})\n\ndefineSlots<{\n  /** Пункты ленты (`GrTimelineItem`), когда данные не переданы пропом. */\n  default?: () => any\n  /** Пункт в data-режиме. */\n  item?: (props: { item: T, index: number }) => any\n  /** Заголовок группы. По умолчанию — сам ключ. */\n  group?: (props: { group: string, items: T[] }) => any\n  /** Содержимое пустого состояния вместо текста по умолчанию. */\n  empty?: () => any\n  /** Заглушки загрузки вместо строк по умолчанию. */\n  loading?: () => any\n}>()\n\nconst slots = useSlots()\nconst { t } = useGranularityTranslations()\n\nconst density = useGrComponentProp('GrTimeline', 'density', () => props.density, 'regular')\nconst orientation = useGrComponentProp('GrTimeline', 'orientation', () => props.orientation, 'vertical')\nconst headingLevel = useGrComponentProp('GrTimeline', 'groupHeadingLevel', () => props.groupHeadingLevel, 3)\nconst requestedLayout = useGrComponentProp('GrTimeline', 'layout', () => props.layout, 'stacked')\n\n/**\n * Горизонтальная лента знает одну раскладку: колонка времени и чередование\n * сторон — это вертикальные приёмы, у горизонтальной оси сторон нет.\n */\nconst layout = computed<GrTimelineLayout>(() => (\n  orientation.value === 'horizontal' ? 'stacked' : requestedLayout.value\n))\n\nconst headingTag = computed(() => `h${headingLevel.value}`)\n\nconst dataMode = computed(() => props.items !== undefined)\n\nconst grouped = computed(() => dataMode.value && props.groupBy !== undefined)\n\nconst groups = computed(() => groupTimelineItems(props.items ?? [], props.groupBy))\n\n/** Единственная группа плоской ленты: тот же набор, что и в data-режиме без группировки. */\nconst entries = computed(() => groups.value[0]?.entries ?? [])\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.timeline.empty', 'Nothing here yet'))\n\nconst isEmpty = computed(() => {\n  if (props.empty !== undefined)\n    return props.empty\n\n  if (dataMode.value)\n    return props.items!.length === 0\n\n  // `v-for` по пустому массиву оставляет фрагмент без узлов, `v-if` — комментарий,\n  // и ни то ни другое пунктом ленты не является.\n  return !hasMeaningfulSlotContent(slots.default?.() ?? [])\n})\n\nconst loadingRowCount = computed(() => Math.max(1, Math.trunc(props.loadingRows)))\n\nfunction keyOf(item: T, index: number): string | number {\n  const key = props.itemKey\n  if (typeof key === 'function')\n    return key(item, index)\n  if (typeof key === 'string')\n    return (item as Record<string, unknown>)[key] as string | number\n\n  return index\n}\n\nfunction itemsOf(group: { entries: { item: T }[] }): T[] {\n  return group.entries.map(entry => entry.item)\n}\n\nprovide(GR_TIMELINE_CONTEXT, { layout, orientation, density })\n\nif (__GR_DEV__) {\n  watch(\n    () => [dataMode.value, Boolean(slots.item)] as const,\n    ([hasItems, hasSlot]) => {\n      if (hasItems && !hasSlot) {\n        console.warn(\n          '[granularity] GrTimeline: с `items` пункты рисует слот `#item` — без него лента пуста.',\n        )\n      }\n    },\n    { immediate: true },\n  )\n\n  watch(\n    () => [dataMode.value, props.groupBy !== undefined] as const,\n    ([hasItems, hasGroupBy]) => {\n      if (hasGroupBy && !hasItems) {\n        console.warn(\n          '[granularity] GrTimeline: `groupBy` работает только с `items` — пункты из слота по '\n          + 'умолчанию лента не разбирает и сгруппировать их ей не из чего.',\n        )\n      }\n    },\n    { immediate: true },\n  )\n\n  watch(\n    () => [orientation.value, requestedLayout.value] as const,\n    ([axis, requested]) => {\n      if (axis === 'horizontal' && requested !== 'stacked') {\n        console.warn(\n          `[granularity] GrTimeline: layout=\"${requested}\" — вертикальная раскладка, `\n          + 'в горизонтальной ленте она игнорируется.',\n        )\n      }\n    },\n    { immediate: true },\n  )\n}\n</script>\n\n<template>\n  <div\n    data-gr-timeline\n    :data-layout=\"layout\"\n    :data-orientation=\"orientation\"\n    :aria-busy=\"loading ? 'true' : undefined\"\n  >\n    <template v-if=\"loading\">\n      <slot name=\"loading\">\n        <div\n          v-for=\"row in loadingRowCount\"\n          :key=\"row\"\n          data-gr-timeline-loading-row\n          :class=\"loadingRowClass\"\n        >\n          <GrSkeleton variant=\"circle\" width=\"var(--gr-timeline-marker-size, 10px)\" />\n          <GrSkeleton />\n        </div>\n      </slot>\n    </template>\n\n    <div\n      v-else-if=\"isEmpty\"\n      data-gr-timeline-empty\n      :class=\"emptyClass\"\n    >\n      <slot name=\"empty\">\n        {{ resolvedEmptyText }}\n      </slot>\n    </div>\n\n    <template v-else-if=\"grouped\">\n      <!--\n        Группа — секция с заголовком, а не пункт-заголовок внутри списка:\n        `<li>` с датой попал бы в набор событий и был бы объявлен как одно из них.\n      -->\n      <section\n        v-for=\"group in groups\"\n        :key=\"group.key\"\n        data-gr-timeline-group\n      >\n        <div\n          v-if=\"group.key\"\n          data-gr-timeline-group-header\n        >\n          <div data-gr-timeline-rail aria-hidden=\"true\">\n            <span data-gr-timeline-line />\n          </div>\n\n          <component\n            :is=\"headingTag\"\n            data-gr-timeline-group-title\n            :class=\"groupTitleClass\"\n          >\n            <slot name=\"group\" :group=\"group.key\" :items=\"itemsOf(group)\">\n              {{ group.key }}\n            </slot>\n          </component>\n        </div>\n\n        <ol\n          data-gr-timeline-list\n          :tabindex=\"orientation === 'horizontal' ? 0 : undefined\"\n        >\n          <template\n            v-for=\"entry in group.entries\"\n            :key=\"keyOf(entry.item, entry.index)\"\n          >\n            <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" />\n          </template>\n        </ol>\n      </section>\n    </template>\n\n    <ol\n      v-else\n      data-gr-timeline-list\n      :tabindex=\"orientation === 'horizontal' ? 0 : undefined\"\n    >\n      <template v-if=\"dataMode\">\n        <template\n          v-for=\"entry in entries\"\n          :key=\"keyOf(entry.item, entry.index)\"\n        >\n          <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" />\n        </template>\n      </template>\n\n      <slot v-else />\n    </ol>\n  </div>\n</template>\n\n<style>\n/*\n * Геометрия ленты живёт здесь, а не в утилитах, по одной причине: сторона\n * пункта в `alternate` — это `nth-child`, а обрыв оси — `last-child`, и оба\n * вопроса утилитами не выражаются. Альтернатива — регистрация пунктов в\n * контексте на `onMounted` — дала бы порядок, зависящий от порядка монтирования,\n * и разъезжалась бы на `v-if` посреди ленты.\n */\n\n[data-gr-timeline] {\n  --gr-timeline-columns: auto minmax(0, 1fr);\n}\n\n[data-gr-timeline][data-layout='time'] {\n  --gr-timeline-columns: var(--gr-timeline-time-width, 5.5rem) auto minmax(0, 1fr);\n}\n\n[data-gr-timeline][data-layout='alternate'] {\n  --gr-timeline-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n}\n\n[data-gr-timeline-list] {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n[data-gr-timeline-item],\n[data-gr-timeline-group-header] {\n  display: grid;\n  grid-template-columns: var(--gr-timeline-columns);\n  column-gap: var(--gr-timeline-gap, 0.75rem);\n  align-items: start;\n}\n\n/*\n * Сжатие строки.\n *\n * Трек `1fr` — это `minmax(auto, 1fr)`, а его минимум равен наибольшему\n * минимальному вкладу элементов. У грид-элемента с `overflow: visible` этот\n * вклад равен min-content, то есть для строки с `white-space: nowrap` — её\n * полной ширине. Поэтому лента не сжималась, а `truncate` потребителя не\n * срабатывал: усекать было нечего, трек раздавался под текст. Явные\n * `minmax(0, …)` у треков и `min-width: 0` у элементов снимают оба минимума.\n *\n * Метка времени стоит в треке фиксированной длины, и её трек от этого не\n * меняется — но без `min-width: 0` длинная метка из слота `#time` раздаёт\n * min-content всей строки.\n */\n\n[data-gr-timeline-aside],\n[data-gr-timeline-content],\n[data-gr-timeline-group-title] {\n  min-width: 0;\n}\n\n[data-gr-timeline-aside] {\n  text-align: end;\n}\n\n/*\n * Ось — отрезок у каждого пункта, а не одна длинная линия: соседние отрезки\n * смыкаются сами, и мерить высоту списка не приходится.\n */\n[data-gr-timeline-rail] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  align-self: stretch;\n  padding-top: var(--gr-timeline-marker-top, 0.35rem);\n  min-width: var(--gr-timeline-marker-size, 10px);\n}\n\n[data-gr-timeline-rail] > :not([data-gr-timeline-line]) {\n  flex: none;\n}\n\n[data-gr-timeline-marker] {\n  box-sizing: border-box;\n  width: var(--gr-timeline-marker-size, 10px);\n  height: var(--gr-timeline-marker-size, 10px);\n  border-width: var(--gr-timeline-marker-ring, 2px);\n  border-style: solid;\n  border-color: transparent;\n}\n\n[data-gr-timeline-line] {\n  flex: 1 1 auto;\n  width: var(--gr-timeline-axis-width, 2px);\n  min-height: var(--gr-timeline-line-min, 0.75rem);\n  margin-top: 0.25rem;\n  /* Ровно на столько следующая точка отступает от верха своей строки: без этого\n     отрезок не доходит до неё, и ось выглядит пунктиром из длинных штрихов. */\n  margin-bottom: calc(-1 * var(--gr-timeline-marker-top, 0.35rem));\n  background-color: var(--gr-timeline-axis-color, var(--gr-brd));\n}\n\n/*\n * Пунктиром идёт участок, ведущий **к** незавершённому событию, и всё, что за\n * ним: непройденный путь. Отрезок после точки для этого не годится — обычно\n * незавершённое событие последнее, и его отрезка не видно вовсе.\n */\n[data-gr-timeline-item]:has(+ [data-gr-timeline-item][data-pending]) [data-gr-timeline-line],\n[data-gr-timeline-item][data-pending] [data-gr-timeline-line] {\n  background-color: transparent;\n  background-image: repeating-linear-gradient(\n    to bottom,\n    var(--gr-timeline-axis-color, var(--gr-brd)) 0 var(--gr-timeline-dash, 4px),\n    transparent var(--gr-timeline-dash, 4px) calc(var(--gr-timeline-dash, 4px) * 2)\n  );\n}\n\n/* Хвост после последнего события — линия в никуда. */\n[data-gr-timeline-item]:last-child [data-gr-timeline-line] {\n  visibility: hidden;\n}\n\n/* Между группами ось не рвётся: разрыв читался бы как две разные ленты. */\n[data-gr-timeline-group]:not(:last-of-type) [data-gr-timeline-item]:last-child [data-gr-timeline-line] {\n  visibility: visible;\n}\n\n[data-gr-timeline-group-header] [data-gr-timeline-rail] {\n  padding-top: 0;\n}\n\n[data-gr-timeline-group] + [data-gr-timeline-group] [data-gr-timeline-group-title] {\n  padding-top: 0.5rem;\n}\n\n[data-gr-timeline-group-header] [data-gr-timeline-line] {\n  margin-top: 0;\n}\n\n/* Над первым заголовком оси ещё нет — линия висела бы в воздухе. */\n[data-gr-timeline-group]:first-of-type [data-gr-timeline-group-header] [data-gr-timeline-line] {\n  visibility: hidden;\n}\n\n[data-gr-timeline][data-layout='time'] [data-gr-timeline-group-header] [data-gr-timeline-rail],\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-header] [data-gr-timeline-rail] {\n  grid-column: 2;\n}\n\n[data-gr-timeline][data-layout='time'] [data-gr-timeline-group-title],\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-title] {\n  grid-column: 3;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-rail] {\n  grid-column: 2;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-content] {\n  grid-column: 3;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-item]:nth-child(even) [data-gr-timeline-content] {\n  grid-column: 1;\n  grid-row: 1;\n  text-align: end;\n}\n\n/* Двухсторонняя лента в узкой колонке нечитаема — там она односторонняя. */\n@media (max-width: 640px) {\n  [data-gr-timeline][data-layout='alternate'] {\n    --gr-timeline-columns: auto minmax(0, 1fr);\n  }\n\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-rail],\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-header] [data-gr-timeline-rail] {\n    grid-column: 1;\n  }\n\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-content],\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-item]:nth-child(even) [data-gr-timeline-content],\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-title] {\n    grid-column: 2;\n    text-align: start;\n  }\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-list] {\n  display: flex;\n  flex-direction: row;\n  overflow-x: auto;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item] {\n  grid-template-columns: minmax(0, 1fr);\n  min-width: var(--gr-timeline-item-min-width, 12rem);\n  padding-inline-end: var(--gr-timeline-gap, 0.75rem);\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-content] {\n  padding-bottom: 0;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-rail] {\n  flex-direction: row;\n  align-items: center;\n  align-self: auto;\n  padding-top: 0;\n  padding-bottom: 0.25rem;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-line] {\n  width: auto;\n  height: var(--gr-timeline-axis-width, 2px);\n  min-width: var(--gr-timeline-line-min, 0.75rem);\n  min-height: 0;\n  margin-top: 0;\n  margin-inline-start: 0.25rem;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item]:has(+ [data-gr-timeline-item][data-pending]) [data-gr-timeline-line],\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item][data-pending] [data-gr-timeline-line] {\n  background-image: repeating-linear-gradient(\n    to right,\n    var(--gr-timeline-axis-color, var(--gr-brd)) 0 var(--gr-timeline-dash, 4px),\n    transparent var(--gr-timeline-dash, 4px) calc(var(--gr-timeline-dash, 4px) * 2)\n  );\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, inject, useSlots } from 'vue'\n\nimport { GR_TIMELINE_CONTEXT } from './grTimelineContext'\nimport {\n  descriptionClass,\n  grTimelineDensityClass,\n  grTimelineMarkerClass,\n  timeClass,\n  titleClass,\n  type GrTimelineMarkerVariant,\n  type GrTimelineTone,\n} from './grTimelineStyles'\n\nexport type { GrTimelineMarkerVariant, GrTimelineTone } from './grTimelineStyles'\n\nexport interface GrTimelineItemProps {\n  /** Метка времени. Слот `#time` сильнее. */\n  time?: string\n  /** Машиночитаемое значение метки: попадает в `datetime` тега `<time>`. */\n  datetime?: string\n  /** Заголовок события. Слот `#title` сильнее. */\n  title?: string\n  /** Пояснение под заголовком. Слот `#description` сильнее. */\n  description?: string\n  /** Цвет маркера из палитры пакета. */\n  tone?: GrTimelineTone\n  /** Заполненная точка — событие случилось, полая — запланировано. */\n  variant?: GrTimelineMarkerVariant\n  /**\n   * Событие ещё не произошло: точка полая, а ось пунктирна начиная с участка,\n   * **ведущего** к нему, — непройденный путь. Перебивает `variant`.\n   */\n  pending?: boolean\n}\n\nconst props = withDefaults(defineProps<GrTimelineItemProps>(), {\n  time: undefined,\n  datetime: undefined,\n  title: undefined,\n  description: undefined,\n  tone: 'neutral',\n  variant: 'filled',\n  pending: false,\n})\n\ndefineSlots<{\n  /** Содержимое события под заголовком и описанием. */\n  default?: () => any\n  /** Маркер вместо точки: иконка статуса, аватар автора, номер шага. */\n  marker?: () => any\n  /** Метка времени. */\n  time?: () => any\n  /** Заголовок события. */\n  title?: () => any\n  /** Пояснение под заголовком. */\n  description?: () => any\n}>()\n\nconst slots = useSlots()\n\n/**\n * Раскладку пункт читает из контейнера. Вне `GrTimeline` — дефолты: пункт\n * остаётся рабочей строкой, а не падает.\n */\nconst timeline = inject(GR_TIMELINE_CONTEXT, null)\n\nconst layout = computed(() => timeline?.layout.value ?? 'stacked')\nconst density = computed(() => timeline?.density.value ?? 'regular')\n\nconst markerClass = computed(() => grTimelineMarkerClass(\n  props.tone,\n  props.pending ? 'outlined' : props.variant,\n))\n\nconst hasTime = computed(() => !!slots.time || !!props.time)\nconst hasTitle = computed(() => !!slots.title || !!props.title)\nconst hasDescription = computed(() => !!slots.description || !!props.description)\n\n/** В `layout=\"time\"` метка уезжает в свою колонку, во всех остальных — в содержимое. */\nconst timeInAside = computed(() => layout.value === 'time')\n</script>\n\n<template>\n  <li\n    data-gr-timeline-item\n    :data-tone=\"tone\"\n    :data-pending=\"pending ? '' : undefined\"\n  >\n    <div\n      v-if=\"timeInAside\"\n      data-gr-timeline-aside\n    >\n      <time\n        v-if=\"hasTime\"\n        :datetime=\"datetime\"\n        :class=\"timeClass\"\n      >\n        <slot name=\"time\">{{ time }}</slot>\n      </time>\n    </div>\n\n    <!-- Ось и точка декоративны: смысл события несёт текст рядом. -->\n    <div\n      data-gr-timeline-rail\n      aria-hidden=\"true\"\n    >\n      <slot name=\"marker\">\n        <span data-gr-timeline-marker :class=\"markerClass\" />\n      </slot>\n      <span data-gr-timeline-line />\n    </div>\n\n    <!--\n      Вертикальный отступ живёт на содержимом, а не на строке: ось растянута по\n      строке грид-ячейкой, и её поля в высоту ячейки не входят — линия обрывалась\n      бы, не доходя до следующей точки.\n    -->\n    <div data-gr-timeline-content :class=\"grTimelineDensityClass(density)\">\n      <time\n        v-if=\"hasTime && !timeInAside\"\n        data-gr-timeline-time\n        :datetime=\"datetime\"\n        :class=\"timeClass\"\n      >\n        <slot name=\"time\">{{ time }}</slot>\n      </time>\n\n      <div v-if=\"hasTitle\" data-gr-timeline-title :class=\"titleClass\">\n        <slot name=\"title\">\n{{ title }}\n</slot>\n      </div>\n\n      <div v-if=\"hasDescription\" :class=\"descriptionClass\">\n        <slot name=\"description\">\n{{ description }}\n</slot>\n      </div>\n\n      <div v-if=\"$slots.default\" data-gr-timeline-body>\n        <slot />\n      </div>\n    </div>\n  </li>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject, useSlots } from 'vue'\n\nimport { GR_TIMELINE_CONTEXT } from './grTimelineContext'\nimport {\n  descriptionClass,\n  grTimelineDensityClass,\n  grTimelineMarkerClass,\n  timeClass,\n  titleClass,\n  type GrTimelineMarkerVariant,\n  type GrTimelineTone,\n} from './grTimelineStyles'\n\nexport type { GrTimelineMarkerVariant, GrTimelineTone } from './grTimelineStyles'\n\nexport interface GrTimelineItemProps {\n  /** Метка времени. Слот `#time` сильнее. */\n  time?: string\n  /** Машиночитаемое значение метки: попадает в `datetime` тега `<time>`. */\n  datetime?: string\n  /** Заголовок события. Слот `#title` сильнее. */\n  title?: string\n  /** Пояснение под заголовком. Слот `#description` сильнее. */\n  description?: string\n  /** Цвет маркера из палитры пакета. */\n  tone?: GrTimelineTone\n  /** Заполненная точка — событие случилось, полая — запланировано. */\n  variant?: GrTimelineMarkerVariant\n  /**\n   * Событие ещё не произошло: точка полая, а ось пунктирна начиная с участка,\n   * **ведущего** к нему, — непройденный путь. Перебивает `variant`.\n   */\n  pending?: boolean\n}\n\nconst props = withDefaults(defineProps<GrTimelineItemProps>(), {\n  time: undefined,\n  datetime: undefined,\n  title: undefined,\n  description: undefined,\n  tone: 'neutral',\n  variant: 'filled',\n  pending: false,\n})\n\ndefineSlots<{\n  /** Содержимое события под заголовком и описанием. */\n  default?: () => any\n  /** Маркер вместо точки: иконка статуса, аватар автора, номер шага. */\n  marker?: () => any\n  /** Метка времени. */\n  time?: () => any\n  /** Заголовок события. */\n  title?: () => any\n  /** Пояснение под заголовком. */\n  description?: () => any\n}>()\n\nconst slots = useSlots()\n\n/**\n * Раскладку пункт читает из контейнера. Вне `GrTimeline` — дефолты: пункт\n * остаётся рабочей строкой, а не падает.\n */\nconst timeline = inject(GR_TIMELINE_CONTEXT, null)\n\nconst layout = computed(() => timeline?.layout.value ?? 'stacked')\nconst density = computed(() => timeline?.density.value ?? 'regular')\n\nconst markerClass = computed(() => grTimelineMarkerClass(\n  props.tone,\n  props.pending ? 'outlined' : props.variant,\n))\n\nconst hasTime = computed(() => !!slots.time || !!props.time)\nconst hasTitle = computed(() => !!slots.title || !!props.title)\nconst hasDescription = computed(() => !!slots.description || !!props.description)\n\n/** В `layout=\"time\"` метка уезжает в свою колонку, во всех остальных — в содержимое. */\nconst timeInAside = computed(() => layout.value === 'time')\n</script>\n\n<template>\n  <li\n    data-gr-timeline-item\n    :data-tone=\"tone\"\n    :data-pending=\"pending ? '' : undefined\"\n  >\n    <div\n      v-if=\"timeInAside\"\n      data-gr-timeline-aside\n    >\n      <time\n        v-if=\"hasTime\"\n        :datetime=\"datetime\"\n        :class=\"timeClass\"\n      >\n        <slot name=\"time\">{{ time }}</slot>\n      </time>\n    </div>\n\n    <!-- Ось и точка декоративны: смысл события несёт текст рядом. -->\n    <div\n      data-gr-timeline-rail\n      aria-hidden=\"true\"\n    >\n      <slot name=\"marker\">\n        <span data-gr-timeline-marker :class=\"markerClass\" />\n      </slot>\n      <span data-gr-timeline-line />\n    </div>\n\n    <!--\n      Вертикальный отступ живёт на содержимом, а не на строке: ось растянута по\n      строке грид-ячейкой, и её поля в высоту ячейки не входят — линия обрывалась\n      бы, не доходя до следующей точки.\n    -->\n    <div data-gr-timeline-content :class=\"grTimelineDensityClass(density)\">\n      <time\n        v-if=\"hasTime && !timeInAside\"\n        data-gr-timeline-time\n        :datetime=\"datetime\"\n        :class=\"timeClass\"\n      >\n        <slot name=\"time\">{{ time }}</slot>\n      </time>\n\n      <div v-if=\"hasTitle\" data-gr-timeline-title :class=\"titleClass\">\n        <slot name=\"title\">\n{{ title }}\n</slot>\n      </div>\n\n      <div v-if=\"hasDescription\" :class=\"descriptionClass\">\n        <slot name=\"description\">\n{{ description }}\n</slot>\n      </div>\n\n      <div v-if=\"$slots.default\" data-gr-timeline-body>\n        <slot />\n      </div>\n    </div>\n  </li>\n</template>\n"],"mappings":";;;;;;;AAsBA,IAAa,sBAAuD,OAAO,qBAAqB;;;ACJhG,SAAS,MAAS,MAAS,OAAe,SAAuC;CAC/E,IAAI,OAAO,YAAY,YACrB,OAAO,OAAO,QAAQ,MAAM,KAAK,KAAK,EAAE;CAE1C,MAAM,QAAS,OAAsD;CAGrE,OAAO,SAAS,OAAO,KAAK,OAAO,KAAK;AAC1C;;;;;;;;;AAUA,SAAgB,mBACd,OACA,SACsB;CACtB,MAAM,UAAU,MAAM,KAAK,MAAM,WAAW;EAAE;EAAM;CAAM,EAAE;CAE5D,IAAI,YAAY,KAAA,GACd,OAAO,QAAQ,WAAW,IAAI,CAAC,IAAI,CAAC;EAAE,KAAK;EAAI;CAAQ,CAAC;CAE1D,MAAM,wBAAQ,IAAI,IAAgC;CAElD,KAAK,MAAM,SAAS,SAAS;EAC3B,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM,OAAO,OAAO;EAClD,MAAM,QAAQ,MAAM,IAAI,GAAG;EAE3B,IAAI,OACF,MAAM,QAAQ,KAAK,KAAK;OAExB,MAAM,IAAI,KAAK;GAAE;GAAK,SAAS,CAAC,KAAK;EAAE,CAAC;CAC5C;CAEA,OAAO,CAAC,GAAG,MAAM,OAAO,CAAC;AAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECDA,MAAM,QAAQ;EA6Bd,MAAM,QAAQ,SAAS;EACvB,MAAM,EAAE,MAAM,2BAA2B;EAEzC,MAAM,UAAU,mBAAmB,cAAc,iBAAiB,MAAM,SAAS,SAAS;EAC1F,MAAM,cAAc,mBAAmB,cAAc,qBAAqB,MAAM,aAAa,UAAU;EACvG,MAAM,eAAe,mBAAmB,cAAc,2BAA2B,MAAM,mBAAmB,CAAC;EAC3G,MAAM,kBAAkB,mBAAmB,cAAc,gBAAgB,MAAM,QAAQ,SAAS;;;;;EAMhG,MAAM,SAAS,eACb,YAAY,UAAU,eAAe,YAAY,gBAAgB,KAClE;EAED,MAAM,aAAa,eAAe,IAAI,aAAa,OAAO;EAE1D,MAAM,WAAW,eAAe,MAAM,UAAU,KAAA,CAAS;EAEzD,MAAM,UAAU,eAAe,SAAS,SAAS,MAAM,YAAY,KAAA,CAAS;EAE5E,MAAM,SAAS,eAAe,mBAAmB,MAAM,SAAS,CAAC,GAAG,MAAM,OAAO,CAAC;;EAGlF,MAAM,UAAU,eAAe,OAAO,MAAM,EAAE,EAAE,WAAW,CAAC,CAAC;EAE7D,MAAM,oBAAoB,eAAe,MAAM,aAAa,EAAE,qBAAqB,kBAAkB,CAAC;EAEtG,MAAM,UAAU,eAAe;GAC7B,IAAI,MAAM,UAAU,KAAA,GAClB,OAAO,MAAM;GAEf,IAAI,SAAS,OACX,OAAO,MAAM,MAAO,WAAW;GAIjC,OAAO,CAAC,yBAAyB,MAAM,UAAU,KAAK,CAAC,CAAC;EAC1D,CAAC;EAED,MAAM,kBAAkB,eAAe,KAAK,IAAI,GAAG,KAAK,MAAM,MAAM,WAAW,CAAC,CAAC;EAEjF,SAAS,MAAM,MAAS,OAAgC;GACtD,MAAM,MAAM,MAAM;GAClB,IAAI,OAAO,QAAQ,YACjB,OAAO,IAAI,MAAM,KAAK;GACxB,IAAI,OAAO,QAAQ,UACjB,OAAQ,KAAiC;GAE3C,OAAO;EACT;EAEA,SAAS,QAAQ,OAAwC;GACvD,OAAO,MAAM,QAAQ,KAAI,UAAS,MAAM,IAAI;EAC9C;EAEA,QAAQ,qBAAqB;GAAE;GAAQ;GAAa;EAAQ,CAAC;EAE7D,IAAA,OAAA,YAAA,eAAA,QAAA,IAAA,aAAA,cAAgB;GACd,YACQ,CAAC,SAAS,OAAO,QAAQ,MAAM,IAAI,CAAC,IACzC,CAAC,UAAU,aAAa;IACvB,IAAI,YAAY,CAAC,SACf,QAAQ,KACN,wFACF;GAEJ,GACA,EAAE,WAAW,KAAK,CACpB;GAEA,YACQ,CAAC,SAAS,OAAO,MAAM,YAAY,KAAA,CAAS,IACjD,CAAC,UAAU,gBAAgB;IAC1B,IAAI,cAAc,CAAC,UACjB,QAAQ,KACN,mJAEF;GAEJ,GACA,EAAE,WAAW,KAAK,CACpB;GAEA,YACQ,CAAC,YAAY,OAAO,gBAAgB,KAAK,IAC9C,CAAC,MAAM,eAAe;IACrB,IAAI,SAAS,gBAAgB,cAAc,WACzC,QAAQ,KACN,qCAAqC,UAAU,qEAEjD;GAEJ,GACA,EAAE,WAAW,KAAK,CACpB;EACF;;uBAIE,mBAyFM,OAAA;IAxFJ,oBAAA;IACC,eAAa,OAAA;IACb,oBAAkB,MAAA,WAAA;IAClB,aAAW,QAAA,UAAO,SAAY,KAAA;OAEf,QAAA,UACd,WAUO,KAAA,QAAA,WAAA,CAAA,SAAA,EAAA,UAAA,IAAA,GATL,mBAQM,UAAA,MAAA,WAPU,gBAAA,QAAP,QAAG;wBADZ,mBAQM,OAAA;KANH,KAAK;KACN,gCAAA;KACC,OAAK,eAAE,MAAA,eAAA,CAAe;QAEvB,YAA4E,oBAAA;KAAhE,SAAQ;KAAS,OAAM;QACnC,YAAc,kBAAA,CAAA,GAAA,CAAA;4BAMP,QAAA,SAAA,UAAA,GADb,mBAQM,OAAA;;IANJ,0BAAA;IACC,OAAK,eAAE,MAAA,UAAA,CAAU;OAElB,WAEO,KAAA,QAAA,SAAA,CAAA,SAAA,CAAA,gBAAA,gBADF,kBAAA,KAAiB,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAIH,QAAA,SAAA,UAAA,IAAA,GAKnB,mBAmCU,UAAA,EAAA,KAAA,EAAA,GAAA,WAlCQ,OAAA,QAAT,UAAK;wBADd,mBAmCU,WAAA;KAjCP,KAAK,MAAM;KACZ,0BAAA;QAGQ,MAAM,OAAA,UAAA,GADd,mBAiBM,OAjBN,cAiBM,CAAA,OAAA,OAAA,OAAA,KAbJ,mBAEM,OAAA;KAFD,yBAAA;KAAsB,eAAY;QACrC,mBAA8B,QAAA,EAAxB,yBAAA,GAAqB,CAAA,CAAA,GAAA,EAAA,KAAA,UAAA,GAG7B,YAQY,wBAPL,WAAA,KAAU,GAAA;KACf,gCAAA;KACC,OAAK,eAAE,MAAA,eAAA,CAAe;;4BAIhB,CAFP,WAEO,KAAA,QAAA,SAAA;MAFa,OAAO,MAAM;MAAM,OAAO,QAAQ,KAAK;cAEpD,CAAA,gBAAA,gBADF,MAAM,GAAG,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;4DAKlB,mBAUK,MAAA;KATH,yBAAA;KACC,UAAU,MAAA,WAAA,MAAW,eAAA,IAAwB,KAAA;0BAE9C,mBAKW,UAAA,MAAA,WAJO,MAAM,UAAf,UAAK;YAGZ,WAA4D,KAAA,QAAA,QAAA;MAAzC,MAAM,MAAM;MAAO,OAAO,MAAM;wBAF7C,MAAM,MAAM,MAAM,MAAM,KAAK,CAAA;;6BAQ3C,mBAeK,MAAA;;IAbH,yBAAA;IACC,UAAU,MAAA,WAAA,MAAW,eAAA,IAAwB,KAAA;OAE9B,SAAA,SAAA,UAAA,IAAA,GACd,mBAKW,UAAA,EAAA,KAAA,EAAA,GAAA,WAJO,QAAA,QAAT,UAAK;WAGZ,WAA4D,KAAA,QAAA,QAAA;KAAzC,MAAM,MAAM;KAAO,OAAO,MAAM;uBAF7C,MAAM,MAAM,MAAM,MAAM,KAAK,CAAA;eAMvC,WAAe,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,CAAA,GAAA,GAAA,YAAA,EAAA,GAAA,GAAA,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EE9OrB,MAAM,QAAQ;EAuBd,MAAM,QAAQ,SAAS;;;;;EAMvB,MAAM,WAAW,OAAO,qBAAqB,IAAI;EAEjD,MAAM,SAAS,eAAe,UAAU,OAAO,SAAS,SAAS;EACjE,MAAM,UAAU,eAAe,UAAU,QAAQ,SAAS,SAAS;EAEnE,MAAM,cAAc,eAAe,sBACjC,MAAM,MACN,MAAM,UAAU,aAAa,MAAM,OACrC,CAAC;EAED,MAAM,UAAU,eAAe,CAAC,CAAC,MAAM,QAAQ,CAAC,CAAC,MAAM,IAAI;EAC3D,MAAM,WAAW,eAAe,CAAC,CAAC,MAAM,SAAS,CAAC,CAAC,MAAM,KAAK;EAC9D,MAAM,iBAAiB,eAAe,CAAC,CAAC,MAAM,eAAe,CAAC,CAAC,MAAM,WAAW;;EAGhF,MAAM,cAAc,eAAe,OAAO,UAAU,MAAM;;uBAIxD,mBA4DK,MAAA;IA3DH,yBAAA;IACC,aAAW,QAAA;IACX,gBAAc,QAAA,UAAO,KAAQ,KAAA;;IAGtB,YAAA,SAAA,UAAA,GADR,mBAWM,OAXN,YAWM,CANI,QAAA,SAAA,UAAA,GADR,mBAMO,QAAA;;KAJJ,UAAU,QAAA;KACV,OAAK,eAAE,MAAA,SAAA,CAAS;QAEjB,WAAmC,KAAA,QAAA,QAAA,CAAA,SAAA,CAAA,gBAAA,gBAAd,QAAA,IAAI,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAK7B,mBAQM,OARN,YAQM,CAJJ,WAEO,KAAA,QAAA,UAAA,CAAA,SAAA,CADL,mBAAqD,QAAA;KAA/C,2BAAA;KAAyB,OAAK,eAAE,YAAA,KAAW;6CAEnD,mBAA8B,QAAA,EAAxB,yBAAA,GAAqB,GAAA,MAAA,EAAA,EAAA,CAAA;IAQ7B,mBAyBM,OAAA;KAzBD,4BAAA;KAA0B,OAAK,eAAE,MAAA,sBAAA,CAAsB,CAAC,QAAA,KAAO,CAAA;;KAE1D,QAAA,SAAO,CAAK,YAAA,SAAA,UAAA,GADpB,mBAOO,QAAA;;MALL,yBAAA;MACC,UAAU,QAAA;MACV,OAAK,eAAE,MAAA,SAAA,CAAS;SAEjB,WAAmC,KAAA,QAAA,QAAA,CAAA,SAAA,CAAA,gBAAA,gBAAd,QAAA,IAAI,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA;KAGhB,SAAA,SAAA,UAAA,GAAX,mBAIM,OAAA;;MAJe,0BAAA;MAAwB,OAAK,eAAE,MAAA,UAAA,CAAU;SAC5D,WAED,KAAA,QAAA,SAAA,CAAA,SAAA,CAAA,gBAAA,gBADJ,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAIS,eAAA,SAAA,UAAA,GAAX,mBAIM,OAAA;;MAJsB,OAAK,eAAE,MAAA,gBAAA,CAAgB;SACjD,WAED,KAAA,QAAA,eAAA,CAAA,SAAA,CAAA,gBAAA,gBADJ,QAAA,WAAW,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAIGA,KAAAA,OAAO,WAAA,UAAA,GAAlB,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

package/dist/components/GrTimeline/styles.css

@@ -1 +1 @@
-[data-gr-timeline]{--gr-timeline-columns:auto 1fr}[data-gr-timeline][data-layout=time]{--gr-timeline-columns:var(--gr-timeline-time-width,5.5rem) auto 1fr}[data-gr-timeline][data-layout=alternate]{--gr-timeline-columns:1fr auto 1fr}[data-gr-timeline-list]{margin:0;padding:0;list-style:none}[data-gr-timeline-item],[data-gr-timeline-group-header]{grid-template-columns:var(--gr-timeline-columns);column-gap:var(--gr-timeline-gap,.75rem);align-items:start;display:grid}[data-gr-timeline-aside]{text-align:end}[data-gr-timeline-rail]{padding-top:var(--gr-timeline-marker-top,.35rem);min-width:var(--gr-timeline-marker-size,10px);flex-direction:column;align-self:stretch;align-items:center;display:flex}[data-gr-timeline-rail]>:not([data-gr-timeline-line]){flex:none}[data-gr-timeline-marker]{box-sizing:border-box;width:var(--gr-timeline-marker-size,10px);height:var(--gr-timeline-marker-size,10px);border-width:var(--gr-timeline-marker-ring,2px);border-style:solid;border-color:#0000}[data-gr-timeline-line]{width:var(--gr-timeline-axis-width,2px);min-height:var(--gr-timeline-line-min,.75rem);margin-top:.25rem;margin-bottom:calc(-1 * var(--gr-timeline-marker-top,.35rem));background-color:var(--gr-timeline-axis-color,var(--gr-brd));flex:auto}[data-gr-timeline-item]:has(+[data-gr-timeline-item][data-pending]) [data-gr-timeline-line],[data-gr-timeline-item][data-pending] [data-gr-timeline-line]{background-color:#0000;background-image:repeating-linear-gradient(to bottom, var(--gr-timeline-axis-color,var(--gr-brd)) 0 var(--gr-timeline-dash,4px), transparent var(--gr-timeline-dash,4px) calc(var(--gr-timeline-dash,4px) * 2))}[data-gr-timeline-item]:last-child [data-gr-timeline-line]{visibility:hidden}[data-gr-timeline-group]:not(:last-of-type) [data-gr-timeline-item]:last-child [data-gr-timeline-line]{visibility:visible}[data-gr-timeline-group-header] [data-gr-timeline-rail]{padding-top:0}[data-gr-timeline-group]+[data-gr-timeline-group] [data-gr-timeline-group-title]{padding-top:.5rem}[data-gr-timeline-group-header] [data-gr-timeline-line]{margin-top:0}[data-gr-timeline-group]:first-of-type [data-gr-timeline-group-header] [data-gr-timeline-line]{visibility:hidden}[data-gr-timeline][data-layout=time] [data-gr-timeline-group-header] [data-gr-timeline-rail],[data-gr-timeline][data-layout=alternate] [data-gr-timeline-group-header] [data-gr-timeline-rail]{grid-column:2}[data-gr-timeline][data-layout=time] [data-gr-timeline-group-title],[data-gr-timeline][data-layout=alternate] [data-gr-timeline-group-title]{grid-column:3}[data-gr-timeline][data-layout=alternate] [data-gr-timeline-rail]{grid-column:2}[data-gr-timeline][data-layout=alternate] [data-gr-timeline-content]{grid-column:3}[data-gr-timeline][data-layout=alternate] [data-gr-timeline-item]:nth-child(2n) [data-gr-timeline-content]{text-align:end;grid-area:1/1}@media (width<=640px){[data-gr-timeline][data-layout=alternate]{--gr-timeline-columns:auto 1fr}[data-gr-timeline][data-layout=alternate] [data-gr-timeline-rail],[data-gr-timeline][data-layout=alternate] [data-gr-timeline-group-header] [data-gr-timeline-rail]{grid-column:1}[data-gr-timeline][data-layout=alternate] [data-gr-timeline-content],[data-gr-timeline][data-layout=alternate] [data-gr-timeline-item]:nth-child(2n) [data-gr-timeline-content],[data-gr-timeline][data-layout=alternate] [data-gr-timeline-group-title]{text-align:start;grid-column:2}}[data-gr-timeline][data-orientation=horizontal] [data-gr-timeline-list]{flex-direction:row;display:flex;overflow-x:auto}[data-gr-timeline][data-orientation=horizontal] [data-gr-timeline-item]{min-width:var(--gr-timeline-item-min-width,12rem);grid-template-columns:1fr;padding-inline-end:var(--gr-timeline-gap,.75rem)}[data-gr-timeline][data-orientation=horizontal] [data-gr-timeline-content]{padding-bottom:0}[data-gr-timeline][data-orientation=horizontal] [data-gr-timeline-rail]{flex-direction:row;align-self:auto;align-items:center;padding-top:0;padding-bottom:.25rem}[data-gr-timeline][data-orientation=horizontal] [data-gr-timeline-line]{width:auto;height:var(--gr-timeline-axis-width,2px);min-width:var(--gr-timeline-line-min,.75rem);margin-top:0;min-height:0;margin-inline-start:.25rem}[data-gr-timeline][data-orientation=horizontal] [data-gr-timeline-item]:has(+[data-gr-timeline-item][data-pending]) [data-gr-timeline-line],[data-gr-timeline][data-orientation=horizontal] [data-gr-timeline-item][data-pending] [data-gr-timeline-line]{background-image:repeating-linear-gradient(to right, var(--gr-timeline-axis-color,var(--gr-brd)) 0 var(--gr-timeline-dash,4px), transparent var(--gr-timeline-dash,4px) calc(var(--gr-timeline-dash,4px) * 2))}
+[data-gr-timeline]{--gr-timeline-columns:auto minmax(0, 1fr)}[data-gr-timeline][data-layout=time]{--gr-timeline-columns:var(--gr-timeline-time-width,5.5rem) auto minmax(0, 1fr)}[data-gr-timeline][data-layout=alternate]{--gr-timeline-columns:minmax(0, 1fr) auto minmax(0, 1fr)}[data-gr-timeline-list]{margin:0;padding:0;list-style:none}[data-gr-timeline-item],[data-gr-timeline-group-header]{grid-template-columns:var(--gr-timeline-columns);column-gap:var(--gr-timeline-gap,.75rem);align-items:start;display:grid}[data-gr-timeline-aside],[data-gr-timeline-content],[data-gr-timeline-group-title]{min-width:0}[data-gr-timeline-aside]{text-align:end}[data-gr-timeline-rail]{padding-top:var(--gr-timeline-marker-top,.35rem);min-width:var(--gr-timeline-marker-size,10px);flex-direction:column;align-self:stretch;align-items:center;display:flex}[data-gr-timeline-rail]>:not([data-gr-timeline-line]){flex:none}[data-gr-timeline-marker]{box-sizing:border-box;width:var(--gr-timeline-marker-size,10px);height:var(--gr-timeline-marker-size,10px);border-width:var(--gr-timeline-marker-ring,2px);border-style:solid;border-color:#0000}[data-gr-timeline-line]{width:var(--gr-timeline-axis-width,2px);min-height:var(--gr-timeline-line-min,.75rem);margin-top:.25rem;margin-bottom:calc(-1 * var(--gr-timeline-marker-top,.35rem));background-color:var(--gr-timeline-axis-color,var(--gr-brd));flex:auto}[data-gr-timeline-item]:has(+[data-gr-timeline-item][data-pending]) [data-gr-timeline-line],[data-gr-timeline-item][data-pending] [data-gr-timeline-line]{background-color:#0000;background-image:repeating-linear-gradient(to bottom, var(--gr-timeline-axis-color,var(--gr-brd)) 0 var(--gr-timeline-dash,4px), transparent var(--gr-timeline-dash,4px) calc(var(--gr-timeline-dash,4px) * 2))}[data-gr-timeline-item]:last-child [data-gr-timeline-line]{visibility:hidden}[data-gr-timeline-group]:not(:last-of-type) [data-gr-timeline-item]:last-child [data-gr-timeline-line]{visibility:visible}[data-gr-timeline-group-header] [data-gr-timeline-rail]{padding-top:0}[data-gr-timeline-group]+[data-gr-timeline-group] [data-gr-timeline-group-title]{padding-top:.5rem}[data-gr-timeline-group-header] [data-gr-timeline-line]{margin-top:0}[data-gr-timeline-group]:first-of-type [data-gr-timeline-group-header] [data-gr-timeline-line]{visibility:hidden}[data-gr-timeline][data-layout=time] [data-gr-timeline-group-header] [data-gr-timeline-rail],[data-gr-timeline][data-layout=alternate] [data-gr-timeline-group-header] [data-gr-timeline-rail]{grid-column:2}[data-gr-timeline][data-layout=time] [data-gr-timeline-group-title],[data-gr-timeline][data-layout=alternate] [data-gr-timeline-group-title]{grid-column:3}[data-gr-timeline][data-layout=alternate] [data-gr-timeline-rail]{grid-column:2}[data-gr-timeline][data-layout=alternate] [data-gr-timeline-content]{grid-column:3}[data-gr-timeline][data-layout=alternate] [data-gr-timeline-item]:nth-child(2n) [data-gr-timeline-content]{text-align:end;grid-area:1/1}@media (width<=640px){[data-gr-timeline][data-layout=alternate]{--gr-timeline-columns:auto minmax(0, 1fr)}[data-gr-timeline][data-layout=alternate] [data-gr-timeline-rail],[data-gr-timeline][data-layout=alternate] [data-gr-timeline-group-header] [data-gr-timeline-rail]{grid-column:1}[data-gr-timeline][data-layout=alternate] [data-gr-timeline-content],[data-gr-timeline][data-layout=alternate] [data-gr-timeline-item]:nth-child(2n) [data-gr-timeline-content],[data-gr-timeline][data-layout=alternate] [data-gr-timeline-group-title]{text-align:start;grid-column:2}}[data-gr-timeline][data-orientation=horizontal] [data-gr-timeline-list]{flex-direction:row;display:flex;overflow-x:auto}[data-gr-timeline][data-orientation=horizontal] [data-gr-timeline-item]{min-width:var(--gr-timeline-item-min-width,12rem);grid-template-columns:minmax(0,1fr);padding-inline-end:var(--gr-timeline-gap,.75rem)}[data-gr-timeline][data-orientation=horizontal] [data-gr-timeline-content]{padding-bottom:0}[data-gr-timeline][data-orientation=horizontal] [data-gr-timeline-rail]{flex-direction:row;align-self:auto;align-items:center;padding-top:0;padding-bottom:.25rem}[data-gr-timeline][data-orientation=horizontal] [data-gr-timeline-line]{width:auto;height:var(--gr-timeline-axis-width,2px);min-width:var(--gr-timeline-line-min,.75rem);margin-top:0;min-height:0;margin-inline-start:.25rem}[data-gr-timeline][data-orientation=horizontal] [data-gr-timeline-item]:has(+[data-gr-timeline-item][data-pending]) [data-gr-timeline-line],[data-gr-timeline][data-orientation=horizontal] [data-gr-timeline-item][data-pending] [data-gr-timeline-line]{background-image:repeating-linear-gradient(to right, var(--gr-timeline-axis-color,var(--gr-brd)) 0 var(--gr-timeline-dash,4px), transparent var(--gr-timeline-dash,4px) calc(var(--gr-timeline-dash,4px) * 2))}

package/dist/composables/useFloating.js

@@ -3,6 +3,21 @@ import { nextTick, onBeforeUnmount, ref, watch } from "vue";
 import { autoUpdate, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
 //#region src/composables/useFloating.ts
 /**
+* Кастомное свойство, в которое слой пишет доступное место по вертикали —
+* расстояние от панели до края вьюпорта на той стороне, куда её в итоге
+* поставило.
+*
+* Свойство ставится на сам плавающий элемент при каждом пересчёте позиции, в
+* том числе на скролле и ресайзе. Слой **сообщает замер, а не применяет его**:
+* ограничивать ли себя этим числом и что при этом скроллить — решает панель,
+* потому что скролл принадлежит её содержимому.
+*
+* Ширину так публиковать незачем: её потолок статичен (`calc(100vw - 1rem)`) и
+* замера не требует. Высота статичной быть не может — доступное место зависит
+* от того, где стоит триггер.
+*/
+var floatingAvailableHeightVar = "--gr-floating-available-height";
+/**
 * Device pixel ratio плавающего элемента. Нужен, чтобы округлять координаты к сетке
 * физических пикселей (см. `roundByDPR`) — иначе субпиксельные `left/top` дают размытый
 * текст/границы панели на не-целочисленных позициях и HiDPI-экранах. Подход перенят у
@@ -90,19 +105,24 @@ function useFloating(reference, floatingEl, open, options = {}) {
 			shift({ padding: options.boundaryPadding ?? 8 })
 		];
 		const matchWidth = resolveMatchWidth();
-		if (matchWidth) middleware.push(size({ apply({ rects, elements }) {
-			if (matchWidth === "min") {
+		middleware.push(size({
+			padding: options.boundaryPadding ?? 8,
+			apply({ rects, elements, availableHeight }) {
+				elements.floating.style.setProperty(floatingAvailableHeightVar, `${Math.max(0, Math.round(availableHeight))}px`);
+				if (!matchWidth) return;
+				if (matchWidth === "min") {
+					Object.assign(elements.floating.style, {
+						width: "max-content",
+						minWidth: `${rects.reference.width}px`
+					});
+					return;
+				}
 				Object.assign(elements.floating.style, {
-					width: "max-content",
-					minWidth: `${rects.reference.width}px`
+					width: `${rects.reference.width}px`,
+					minWidth: ""
 				});
-				return;
 			}
-			Object.assign(elements.floating.style, {
-				width: `${rects.reference.width}px`,
-				minWidth: ""
-			});
-		} }));
+		}));
 		const { x, y, placement } = await computePosition(reference, floating, {
 			placement: resolveRequestedPlacement(),
 			strategy: "fixed",
@@ -150,4 +170,4 @@ function useFloating(reference, floatingEl, open, options = {}) {
 	};
 }
 //#endregion
-export { createFloatingAnchor, useFloating };
+export { createFloatingAnchor, floatingAvailableHeightVar, useFloating };

package/dist/composables/useFloating.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFloating.js","names":[],"sources":["../../src/composables/useFloating.ts"],"sourcesContent":["import type { CSSProperties, Ref } from 'vue'\nimport type { Middleware, Placement, VirtualElement } from '@floating-ui/dom'\nimport { autoUpdate, computePosition, flip, offset as offsetMiddleware, shift, size as sizeMiddleware } from '@floating-ui/dom'\nimport { nextTick, onBeforeUnmount, ref, watch } from 'vue'\n\nimport { floatingLayerZIndex } from './internal/overlayStack'\n\nexport type UseFloatingPlacement = Placement\n\n/**\n * Device pixel ratio плавающего элемента. Нужен, чтобы округлять координаты к сетке\n * физических пикселей (см. `roundByDPR`) — иначе субпиксельные `left/top` дают размытый\n * текст/границы панели на не-целочисленных позициях и HiDPI-экранах. Подход перенят у\n * официального `@floating-ui/vue` (`useFloating` → `roundByDPR`), чтобы не тянуть весь\n * пакет ради одной утилиты.\n */\nfunction getDpr(element: HTMLElement): number {\n  if (typeof window === 'undefined')\n    return 1\n\n  const win = element.ownerDocument?.defaultView ?? window\n  return win.devicePixelRatio || 1\n}\n\nfunction roundByDpr(element: HTMLElement, value: number): number {\n  const dpr = getDpr(element)\n  return Math.round(value * dpr) / dpr\n}\n\n/**\n * Прямоугольник в координатах вьюпорта — якорь, которого нет в DOM.\n *\n * Точка курсора описывается прямоугольником `0×0`. Размеры необязательны именно\n * поэтому: контекстное меню, открытое с клавиатуры, встаёт у **прямоугольника**\n * сфокусированной строки, а не у её угла, и переворачивается вместе с ней.\n */\nexport interface GrFloatingAnchorRect {\n  x: number\n  y: number\n  /** По умолчанию 0. */\n  width?: number\n  /** По умолчанию 0. */\n  height?: number\n}\n\n/** Ссылка позиционирования: элемент, виртуальный якорь или ничего. */\nexport type UseFloatingReference = HTMLElement | VirtualElement | null\n\n/**\n * Виртуальный якорь: объект создаётся один раз, координаты читает геттер на\n * каждом измерении.\n *\n * Стабильность объекта здесь не стилистика, а условие работы: `useFloating`\n * пересоздаёт подписку `autoUpdate` при смене самой ссылки, поэтому новый объект\n * на каждое движение курсора рвал бы и заводил её заново. С одним объектом смена\n * точки — это просто `update()`.\n */\nexport function createFloatingAnchor(\n  get: () => GrFloatingAnchorRect | null | undefined,\n  options: { contextElement?: () => Element | null | undefined } = {},\n): VirtualElement {\n  return {\n    getBoundingClientRect() {\n      const rect = get() ?? { x: 0, y: 0 }\n      const width = rect.width ?? 0\n      const height = rect.height ?? 0\n\n      return {\n        x: rect.x,\n        y: rect.y,\n        width,\n        height,\n        top: rect.y,\n        left: rect.x,\n        right: rect.x + width,\n        bottom: rect.y + height,\n      }\n    },\n    get contextElement() {\n      return options.contextElement?.() ?? undefined\n    },\n  }\n}\n\nexport interface UseFloatingOptions {\n  /**\n   * Предпочитаемое место панели относительно триггера. По умолчанию `bottom-start`.\n   * Можно передать функцию-геттер, если место зависит от реактивного пропа\n   * (например, `align`) — она вызывается заново при каждом пересчёте позиции.\n   */\n  placement?: UseFloatingPlacement | (() => UseFloatingPlacement)\n  /** Зазор между триггером и панелью, px. По умолчанию `8`. */\n  offsetPx?: number\n  /** Минимальный отступ от края viewport при flip/shift, px. По умолчанию `8`. */\n  boundaryPadding?: number\n  /**\n   * Согласовать ширину панели с шириной триггера (актуально для Select/TreeSelect).\n   * Не годится для Dropdown/Tooltip, где ширина панели определяется контентом.\n   * - `true` — точная ширина (`width = ширина триггера`);\n   * - `'min'` — панель растёт по контенту (`width: max-content`), но не уже триггера\n   *   (`min-width = ширина триггера`) — режим `GrSelect view=\"link\"`;\n   * - функция-геттер — как и `placement`, для реактивной зависимости от пропа.\n   *\n   * С виртуальным якорем не работает: ширина точки равна нулю.\n   */\n  matchWidth?: boolean | 'min' | (() => boolean | 'min')\n  /**\n   * CSS-переменная шкалы слоёв (см. `styles/tokens.css`). По умолчанию\n   * `--gr-z-dropdown`. Действует, пока панель открыта вне модального окна: над\n   * окном высоту задаёт стек слоёв (см. {@link floatingZIndex}).\n   */\n  zIndexVar?: string\n}\n\nexport interface UseFloatingReturn {\n  /** Готовый объект для `:style` на плавающем элементе. */\n  floatingStyle: Ref<CSSProperties>\n  /**\n   * Итоговое место панели ПОСЛЕ применения `flip` — может отличаться от запрошенного\n   * `placement`, если места не хватило и панель перевернуло на противоположную сторону.\n   * Полезно для выбора `transform-origin`/направления transition в потребителе.\n   */\n  resolvedPlacement: Ref<Placement>\n  /** Принудительный пересчёт позиции (например, после изменения контента панели). */\n  update: () => void\n}\n\n/**\n * Единый движок позиционирования floating-панелей (Dropdown/Select/TreeSelect/Tooltip)\n * поверх `@floating-ui/dom`: flip (переворот при нехватке места), shift (клэмп к границам\n * viewport), опциональный `size`-мидлвар для растягивания по ширине триггера.\n *\n * Пересчёт положения при скролле/ресайзе делает `autoUpdate` из `@floating-ui/dom` —\n * он сам использует `ResizeObserver`/`IntersectionObserver` и пассивные слушатели вместо\n * наивного враппера на каждый `scroll`/`resize`, поэтому отдельный rAF-throttling здесь\n * не нужен (в отличие от прежней ручной реализации в `GrSelect`/`GrDropdown`).\n *\n * Требует, чтобы `floatingEl` был примонтирован в DOM на момент открытия (обычно —\n * `<teleport to=\"body\">` + `v-show`, а не `v-if`): позиционирование не может измерить\n * элемент, которого нет в дереве.\n */\nexport function useFloating(\n  // Объединение, а не `Ref<HTMLElement | VirtualElement | null>`: аксессорный\n  // `Ref` проверяется контравариантно по записи, и расширение элементного типа\n  // отняло бы у шести нынешних потребителей право передавать свой `Ref` как есть.\n  reference: Ref<HTMLElement | null> | (() => UseFloatingReference),\n  floatingEl: Ref<HTMLElement | null>,\n  open: Ref<boolean>,\n  options: UseFloatingOptions = {},\n): UseFloatingReturn {\n  const readReference: () => UseFloatingReference\n    = typeof reference === 'function' ? reference : () => reference.value\n\n  const floatingStyle = ref<CSSProperties>({\n    position: 'fixed',\n    top: '0px',\n    left: '0px',\n  })\n  function resolveRequestedPlacement(): Placement {\n    return typeof options.placement === 'function' ? options.placement() : options.placement ?? 'bottom-start'\n  }\n\n  function resolveMatchWidth(): boolean | 'min' {\n    return typeof options.matchWidth === 'function' ? options.matchWidth() : options.matchWidth ?? false\n  }\n\n  const resolvedPlacement = ref<Placement>(resolveRequestedPlacement())\n\n  let stopAutoUpdate: (() => void) | null = null\n\n  async function update(): Promise<void> {\n    const reference = readReference()\n    const floating = floatingEl.value\n    if (!reference || !floating)\n      return\n\n    const middleware: Middleware[] = [\n      offsetMiddleware(options.offsetPx ?? 8),\n      flip({ padding: options.boundaryPadding ?? 8 }),\n      shift({ padding: options.boundaryPadding ?? 8 }),\n    ]\n\n    const matchWidth = resolveMatchWidth()\n    if (matchWidth) {\n      middleware.push(\n        sizeMiddleware({\n          apply({ rects, elements }) {\n            if (matchWidth === 'min') {\n              Object.assign(elements.floating.style, {\n                width: 'max-content',\n                minWidth: `${rects.reference.width}px`,\n              })\n              return\n            }\n\n            Object.assign(elements.floating.style, {\n              width: `${rects.reference.width}px`,\n              minWidth: '',\n            })\n          },\n        }),\n      )\n    }\n\n    const { x, y, placement } = await computePosition(reference, floating, {\n      placement: resolveRequestedPlacement(),\n      strategy: 'fixed',\n      middleware,\n    })\n\n    resolvedPlacement.value = placement\n    floatingStyle.value = {\n      position: 'fixed',\n      left: `${roundByDpr(floating, x)}px`,\n      top: `${roundByDpr(floating, y)}px`,\n      zIndex: floatingLayerZIndex(options.zIndexVar ?? '--gr-z-dropdown'),\n    }\n  }\n\n  function stop(): void {\n    stopAutoUpdate?.()\n    stopAutoUpdate = null\n  }\n\n  function start(): void {\n    stop()\n    const reference = readReference()\n    const floating = floatingEl.value\n    if (!reference || !floating)\n      return\n\n    // `autoUpdate` подписывается на `ResizeObserver`/`IntersectionObserver` для\n    // последующих пересчётов, но не гарантирует немедленный вызов `update` —\n    // особенно в средах без этих API (например, jsdom в тестах). Считаем позицию\n    // сразу, чтобы панель не «мигала» в 0,0 до первого scroll/resize.\n    void update()\n    stopAutoUpdate = autoUpdate(reference, floating, () => void update())\n  }\n\n  // На какую ссылку подписан текущий `autoUpdate`. Отличает смену самого якоря\n  // (подписку пересоздать) от смены его координат (достаточно `update()`): у\n  // виртуального якоря объект один на всё время жизни.\n  let subscribedTo: UseFloatingReference = null\n\n  watch(\n    [open, () => readReference()],\n    ([isOpen, nextReference]) => {\n      if (!isOpen || !nextReference) {\n        stop()\n        subscribedTo = null\n        return\n      }\n\n      if (nextReference === subscribedTo && stopAutoUpdate)\n        return\n\n      // `floatingEl` монтируется в том же тике, что и `open` переключается\n      // (v-show уже в DOM, но teleport/переход могут ещё не отработать) —\n      // ждём тик, чтобы `getBoundingClientRect` не читал нулевые размеры.\n      // Перепроверка `open`: панель могли закрыть, пока `start()` ждал в\n      // очереди, — `stop()` уже отработал, и снимать подписку было бы некому.\n      void nextTick(() => {\n        if (!open.value)\n          return\n        subscribedTo = readReference()\n        start()\n      })\n    },\n    { immediate: true },\n  )\n\n  onBeforeUnmount(stop)\n\n  return {\n    floatingStyle,\n    resolvedPlacement,\n    update: () => void update(),\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"useFloating.js","names":[],"sources":["../../src/composables/useFloating.ts"],"sourcesContent":["import type { CSSProperties, Ref } from 'vue'\nimport type { Middleware, Placement, VirtualElement } from '@floating-ui/dom'\nimport { autoUpdate, computePosition, flip, offset as offsetMiddleware, shift, size as sizeMiddleware } from '@floating-ui/dom'\nimport { nextTick, onBeforeUnmount, ref, watch } from 'vue'\n\nimport { floatingLayerZIndex } from './internal/overlayStack'\n\nexport type UseFloatingPlacement = Placement\n\n/**\n * Кастомное свойство, в которое слой пишет доступное место по вертикали —\n * расстояние от панели до края вьюпорта на той стороне, куда её в итоге\n * поставило.\n *\n * Свойство ставится на сам плавающий элемент при каждом пересчёте позиции, в\n * том числе на скролле и ресайзе. Слой **сообщает замер, а не применяет его**:\n * ограничивать ли себя этим числом и что при этом скроллить — решает панель,\n * потому что скролл принадлежит её содержимому.\n *\n * Ширину так публиковать незачем: её потолок статичен (`calc(100vw - 1rem)`) и\n * замера не требует. Высота статичной быть не может — доступное место зависит\n * от того, где стоит триггер.\n */\nexport const floatingAvailableHeightVar = '--gr-floating-available-height'\n\n/**\n * Device pixel ratio плавающего элемента. Нужен, чтобы округлять координаты к сетке\n * физических пикселей (см. `roundByDPR`) — иначе субпиксельные `left/top` дают размытый\n * текст/границы панели на не-целочисленных позициях и HiDPI-экранах. Подход перенят у\n * официального `@floating-ui/vue` (`useFloating` → `roundByDPR`), чтобы не тянуть весь\n * пакет ради одной утилиты.\n */\nfunction getDpr(element: HTMLElement): number {\n  if (typeof window === 'undefined')\n    return 1\n\n  const win = element.ownerDocument?.defaultView ?? window\n  return win.devicePixelRatio || 1\n}\n\nfunction roundByDpr(element: HTMLElement, value: number): number {\n  const dpr = getDpr(element)\n  return Math.round(value * dpr) / dpr\n}\n\n/**\n * Прямоугольник в координатах вьюпорта — якорь, которого нет в DOM.\n *\n * Точка курсора описывается прямоугольником `0×0`. Размеры необязательны именно\n * поэтому: контекстное меню, открытое с клавиатуры, встаёт у **прямоугольника**\n * сфокусированной строки, а не у её угла, и переворачивается вместе с ней.\n */\nexport interface GrFloatingAnchorRect {\n  x: number\n  y: number\n  /** По умолчанию 0. */\n  width?: number\n  /** По умолчанию 0. */\n  height?: number\n}\n\n/** Ссылка позиционирования: элемент, виртуальный якорь или ничего. */\nexport type UseFloatingReference = HTMLElement | VirtualElement | null\n\n/**\n * Виртуальный якорь: объект создаётся один раз, координаты читает геттер на\n * каждом измерении.\n *\n * Стабильность объекта здесь не стилистика, а условие работы: `useFloating`\n * пересоздаёт подписку `autoUpdate` при смене самой ссылки, поэтому новый объект\n * на каждое движение курсора рвал бы и заводил её заново. С одним объектом смена\n * точки — это просто `update()`.\n */\nexport function createFloatingAnchor(\n  get: () => GrFloatingAnchorRect | null | undefined,\n  options: { contextElement?: () => Element | null | undefined } = {},\n): VirtualElement {\n  return {\n    getBoundingClientRect() {\n      const rect = get() ?? { x: 0, y: 0 }\n      const width = rect.width ?? 0\n      const height = rect.height ?? 0\n\n      return {\n        x: rect.x,\n        y: rect.y,\n        width,\n        height,\n        top: rect.y,\n        left: rect.x,\n        right: rect.x + width,\n        bottom: rect.y + height,\n      }\n    },\n    get contextElement() {\n      return options.contextElement?.() ?? undefined\n    },\n  }\n}\n\nexport interface UseFloatingOptions {\n  /**\n   * Предпочитаемое место панели относительно триггера. По умолчанию `bottom-start`.\n   * Можно передать функцию-геттер, если место зависит от реактивного пропа\n   * (например, `align`) — она вызывается заново при каждом пересчёте позиции.\n   */\n  placement?: UseFloatingPlacement | (() => UseFloatingPlacement)\n  /** Зазор между триггером и панелью, px. По умолчанию `8`. */\n  offsetPx?: number\n  /** Минимальный отступ от края viewport при flip/shift, px. По умолчанию `8`. */\n  boundaryPadding?: number\n  /**\n   * Согласовать ширину панели с шириной триггера (актуально для Select/TreeSelect).\n   * Не годится для Dropdown/Tooltip, где ширина панели определяется контентом.\n   * - `true` — точная ширина (`width = ширина триггера`);\n   * - `'min'` — панель растёт по контенту (`width: max-content`), но не уже триггера\n   *   (`min-width = ширина триггера`) — режим `GrSelect view=\"link\"`;\n   * - функция-геттер — как и `placement`, для реактивной зависимости от пропа.\n   *\n   * С виртуальным якорем не работает: ширина точки равна нулю.\n   */\n  matchWidth?: boolean | 'min' | (() => boolean | 'min')\n  /**\n   * CSS-переменная шкалы слоёв (см. `styles/tokens.css`). По умолчанию\n   * `--gr-z-dropdown`. Действует, пока панель открыта вне модального окна: над\n   * окном высоту задаёт стек слоёв (см. {@link floatingZIndex}).\n   */\n  zIndexVar?: string\n}\n\nexport interface UseFloatingReturn {\n  /** Готовый объект для `:style` на плавающем элементе. */\n  floatingStyle: Ref<CSSProperties>\n  /**\n   * Итоговое место панели ПОСЛЕ применения `flip` — может отличаться от запрошенного\n   * `placement`, если места не хватило и панель перевернуло на противоположную сторону.\n   * Полезно для выбора `transform-origin`/направления transition в потребителе.\n   */\n  resolvedPlacement: Ref<Placement>\n  /** Принудительный пересчёт позиции (например, после изменения контента панели). */\n  update: () => void\n}\n\n/**\n * Единый движок позиционирования floating-панелей (Dropdown/Select/TreeSelect/Tooltip)\n * поверх `@floating-ui/dom`: flip (переворот при нехватке места), shift (клэмп к границам\n * viewport), опциональный `size`-мидлвар для растягивания по ширине триггера.\n *\n * Пересчёт положения при скролле/ресайзе делает `autoUpdate` из `@floating-ui/dom` —\n * он сам использует `ResizeObserver`/`IntersectionObserver` и пассивные слушатели вместо\n * наивного враппера на каждый `scroll`/`resize`, поэтому отдельный rAF-throttling здесь\n * не нужен (в отличие от прежней ручной реализации в `GrSelect`/`GrDropdown`).\n *\n * Требует, чтобы `floatingEl` был примонтирован в DOM на момент открытия (обычно —\n * `<teleport to=\"body\">` + `v-show`, а не `v-if`): позиционирование не может измерить\n * элемент, которого нет в дереве.\n */\nexport function useFloating(\n  // Объединение, а не `Ref<HTMLElement | VirtualElement | null>`: аксессорный\n  // `Ref` проверяется контравариантно по записи, и расширение элементного типа\n  // отняло бы у шести нынешних потребителей право передавать свой `Ref` как есть.\n  reference: Ref<HTMLElement | null> | (() => UseFloatingReference),\n  floatingEl: Ref<HTMLElement | null>,\n  open: Ref<boolean>,\n  options: UseFloatingOptions = {},\n): UseFloatingReturn {\n  const readReference: () => UseFloatingReference\n    = typeof reference === 'function' ? reference : () => reference.value\n\n  const floatingStyle = ref<CSSProperties>({\n    position: 'fixed',\n    top: '0px',\n    left: '0px',\n  })\n  function resolveRequestedPlacement(): Placement {\n    return typeof options.placement === 'function' ? options.placement() : options.placement ?? 'bottom-start'\n  }\n\n  function resolveMatchWidth(): boolean | 'min' {\n    return typeof options.matchWidth === 'function' ? options.matchWidth() : options.matchWidth ?? false\n  }\n\n  const resolvedPlacement = ref<Placement>(resolveRequestedPlacement())\n\n  let stopAutoUpdate: (() => void) | null = null\n\n  async function update(): Promise<void> {\n    const reference = readReference()\n    const floating = floatingEl.value\n    if (!reference || !floating)\n      return\n\n    const middleware: Middleware[] = [\n      offsetMiddleware(options.offsetPx ?? 8),\n      flip({ padding: options.boundaryPadding ?? 8 }),\n      shift({ padding: options.boundaryPadding ?? 8 }),\n    ]\n\n    const matchWidth = resolveMatchWidth()\n    middleware.push(\n      sizeMiddleware({\n        padding: options.boundaryPadding ?? 8,\n        apply({ rects, elements, availableHeight }) {\n          // Сколько места осталось до края вьюпорта на той стороне, куда панель\n          // в итоге встала. Считается после `flip`, поэтому сторона уже\n          // окончательная. Слой только сообщает замер — решает панель.\n          elements.floating.style.setProperty(\n            floatingAvailableHeightVar,\n            `${Math.max(0, Math.round(availableHeight))}px`,\n          )\n\n          if (!matchWidth)\n            return\n\n          if (matchWidth === 'min') {\n            Object.assign(elements.floating.style, {\n              width: 'max-content',\n              minWidth: `${rects.reference.width}px`,\n            })\n            return\n          }\n\n          Object.assign(elements.floating.style, {\n            width: `${rects.reference.width}px`,\n            minWidth: '',\n          })\n        },\n      }),\n    )\n\n    const { x, y, placement } = await computePosition(reference, floating, {\n      placement: resolveRequestedPlacement(),\n      strategy: 'fixed',\n      middleware,\n    })\n\n    resolvedPlacement.value = placement\n    floatingStyle.value = {\n      position: 'fixed',\n      left: `${roundByDpr(floating, x)}px`,\n      top: `${roundByDpr(floating, y)}px`,\n      zIndex: floatingLayerZIndex(options.zIndexVar ?? '--gr-z-dropdown'),\n    }\n  }\n\n  function stop(): void {\n    stopAutoUpdate?.()\n    stopAutoUpdate = null\n  }\n\n  function start(): void {\n    stop()\n    const reference = readReference()\n    const floating = floatingEl.value\n    if (!reference || !floating)\n      return\n\n    // `autoUpdate` подписывается на `ResizeObserver`/`IntersectionObserver` для\n    // последующих пересчётов, но не гарантирует немедленный вызов `update` —\n    // особенно в средах без этих API (например, jsdom в тестах). Считаем позицию\n    // сразу, чтобы панель не «мигала» в 0,0 до первого scroll/resize.\n    void update()\n    stopAutoUpdate = autoUpdate(reference, floating, () => void update())\n  }\n\n  // На какую ссылку подписан текущий `autoUpdate`. Отличает смену самого якоря\n  // (подписку пересоздать) от смены его координат (достаточно `update()`): у\n  // виртуального якоря объект один на всё время жизни.\n  let subscribedTo: UseFloatingReference = null\n\n  watch(\n    [open, () => readReference()],\n    ([isOpen, nextReference]) => {\n      if (!isOpen || !nextReference) {\n        stop()\n        subscribedTo = null\n        return\n      }\n\n      if (nextReference === subscribedTo && stopAutoUpdate)\n        return\n\n      // `floatingEl` монтируется в том же тике, что и `open` переключается\n      // (v-show уже в DOM, но teleport/переход могут ещё не отработать) —\n      // ждём тик, чтобы `getBoundingClientRect` не читал нулевые размеры.\n      // Перепроверка `open`: панель могли закрыть, пока `start()` ждал в\n      // очереди, — `stop()` уже отработал, и снимать подписку было бы некому.\n      void nextTick(() => {\n        if (!open.value)\n          return\n        subscribedTo = readReference()\n        start()\n      })\n    },\n    { immediate: true },\n  )\n\n  onBeforeUnmount(stop)\n\n  return {\n    floatingStyle,\n    resolvedPlacement,\n    update: () => void update(),\n  }\n}\n"],"mappings":"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"}

package/dist/granular-provider-node.js

@@ -1,2 +1,2 @@
-import { a as granularityDefaultThemes, i as granularityComponentConfigs, n as GRANULARITY_PROVIDER_ID, o as granularityThemeNames, r as createGranularityProvider, t as granularityProvider } from "./chunks/granular-provider-3LUawDPh.js";
+import { a as granularityDefaultThemes, i as granularityComponentConfigs, n as GRANULARITY_PROVIDER_ID, o as granularityThemeNames, r as createGranularityProvider, t as granularityProvider } from "./chunks/granular-provider-BAy4APOX.js";
 export { GRANULARITY_PROVIDER_ID, createGranularityProvider, granularityProvider as default, granularityProvider, granularityComponentConfigs, granularityDefaultThemes, granularityThemeNames };

package/dist/granular-provider.js

@@ -1,2 +1,2 @@
-import { a as granularityDefaultThemes, i as granularityComponentConfigs, n as GRANULARITY_PROVIDER_ID, o as granularityThemeNames, r as createGranularityProvider, t as granularityProvider } from "./chunks/granular-provider-3LUawDPh.js";
+import { a as granularityDefaultThemes, i as granularityComponentConfigs, n as GRANULARITY_PROVIDER_ID, o as granularityThemeNames, r as createGranularityProvider, t as granularityProvider } from "./chunks/granular-provider-BAy4APOX.js";
 export { GRANULARITY_PROVIDER_ID, createGranularityProvider, granularityProvider as default, granularityProvider, granularityComponentConfigs, granularityDefaultThemes, granularityThemeNames };

package/dist/index.js

@@ -63,10 +63,10 @@ import { n as GrCollapse_default, t as GrCollapseItem_default } from "./componen
 import { n as grIconSafelist, t as grIconConfig } from "./chunks/config-3bQeQvqd.js";
 import { t as GrInput_default } from "./components/GrInput/chunks/GrInput-BLywRZUN.js";
 import { t as useFocusTrap } from "./chunks/useFocusTrap-D9bIPNF6.js";
-import { t as GrPopover_default } from "./components/GrPopover/chunks/GrPopover-CzeXMcvh.js";
+import { t as GrPopover_default } from "./components/GrPopover/chunks/GrPopover-DEFxDffj.js";
 import { useDragGesture } from "./composables/useDragGesture.js";
 import { t as GrSlider_default } from "./components/GrSlider/chunks/GrSlider-DTTrZTHK.js";
-import { t as GrColorPicker_default } from "./components/GrColorPicker/chunks/GrColorPicker-D1Iis7jf.js";
+import { t as GrColorPicker_default } from "./components/GrColorPicker/chunks/GrColorPicker-CIgdPXHn.js";
 import { n as grColorPickerSafelist, t as grColorPickerConfig } from "./chunks/config-DIDz_E5m.js";
 import { a as GR_KBD_TOKENS, o as findKbdToken, t as GrKbd_default } from "./components/GrKbd/chunks/GrKbd-D2ga1H9i.js";
 import { t as GrModal_default } from "./components/GrModal/chunks/GrModal-_JrDhon-.js";
@@ -80,7 +80,7 @@ import { t as GrConfirmDialog_default } from "./components/GrConfirmDialog/chunk
 import { t as grConfirmDialogConfig } from "./chunks/config-A-bBiotF.js";
 import "./components/GrConfirmDialog/index.js";
 import { a as GrDropdownMenuItem_default, c as GrDropdownMenuDivider_default, o as GrDropdownMenuGroup_default, s as GrDropdownMenuHeader_default, t as GrDropdownMenuList_default } from "./components/GrDropdownMenu/chunks/GrDropdownMenuList-B33ZzwfB.js";
-import { t as GrContextMenu_default } from "./components/GrContextMenu/chunks/GrContextMenu-CWmgrzpi.js";
+import { t as GrContextMenu_default } from "./components/GrContextMenu/chunks/GrContextMenu-DlFWm0eW.js";
 import { t as grContextMenuConfig } from "./chunks/config-CsCUuukB.js";
 import { t as GrTable_default } from "./components/GrTable/chunks/GrTable-jhUTczjv.js";
 import { t as useDragSort } from "./chunks/useDragSort-0l47h4yb.js";
@@ -106,10 +106,10 @@ import { n as grDividerSafelist, t as grDividerConfig } from "./chunks/config-D8
 import { t as GrDivider_default } from "./components/GrDivider/chunks/GrDivider-BXavGcMX.js";
 import { n as grDrawerSafelist, t as grDrawerConfig } from "./chunks/config-ChPg-BQv.js";
 import { t as GrDrawer_default } from "./components/GrDrawer/chunks/GrDrawer-xfoy-MCj.js";
-import { t as GrDropdown_default } from "./components/GrDropdown/chunks/GrDropdown-CDkPkvIJ.js";
-import { n as grDropdownSafelist, t as grDropdownConfig } from "./chunks/config-DGGaKf4R.js";
+import { t as GrDropdown_default } from "./components/GrDropdown/chunks/GrDropdown-7r772-Cq.js";
+import { n as grDropdownSafelist, t as grDropdownConfig } from "./chunks/config-CT4lP6S4.js";
 import "./components/GrDropdown/index.js";
-import { n as GrDropdownMenuColumn_default, r as GrDropdownMenu_default, t as GrDropdownMenuColumns_default } from "./components/GrDropdownMenu/chunks/GrDropdownMenu-DQrZ_yPV.js";
+import { n as GrDropdownMenuColumn_default, r as GrDropdownMenu_default, t as GrDropdownMenuColumns_default } from "./components/GrDropdownMenu/chunks/GrDropdownMenu-DNurbsWc.js";
 import { n as grDropdownMenuSafelist, t as grDropdownMenuConfig } from "./chunks/config-_jbgsFpw.js";
 import { t as GrEmptyState_default } from "./components/GrEmptyState/chunks/GrEmptyState-RqsWvgI9.js";
 import { n as grEmptyStateSafelist, t as grEmptyStateConfig } from "./chunks/config-CWtfxkM9.js";
@@ -152,7 +152,7 @@ import { t as GrNumberInput_default } from "./components/GrNumberInput/chunks/Gr
 import { t as GrSelect_default } from "./components/GrSelect/chunks/GrSelect-CZqV1Eg4.js";
 import { n as grPaginationSafelist, t as grPaginationConfig } from "./chunks/config-CjKpUcmy.js";
 import { t as GrPagination_default } from "./components/GrPagination/chunks/GrPagination-gBoWVHk6.js";
-import { n as grPopoverSafelist, t as grPopoverConfig } from "./chunks/config-DBXCIb6r2.js";
+import { n as grPopoverSafelist, t as grPopoverConfig } from "./chunks/config-DVCNvhIG2.js";
 import "./components/GrPopover/index.js";
 import { n as grProgressBarSafelist, r as GR_TONES, t as grProgressBarConfig } from "./chunks/config-DWL81-aM.js";
 import "./components/GrProgressBar/index.js";
@@ -192,8 +192,8 @@ import { n as grTableSafelist, t as grTableConfig } from "./chunks/config-DCq4Jy
 import "./components/GrTable/index.js";
 import { n as GrTabPanels_default, t as GrTabPanel_default } from "./components/GrTabPanels/chunks/GrTabPanels-BZQS8-JM.js";
 import { t as grTabPanelsConfig } from "./chunks/config-eXB87DOi.js";
+import { t as GrTabs_default } from "./components/GrTabs/chunks/GrTabs-CEKT5tXv.js";
 import { n as grTabsSafelist, t as grTabsConfig } from "./chunks/config-_QF0O1vq.js";
-import { t as GrTabs_default } from "./components/GrTabs/chunks/GrTabs-UsO4j8zv.js";
 import { n as grTextareaSafelist, t as grTextareaConfig } from "./chunks/config-BhfNgyWL.js";
 import "./components/GrTextarea/index.js";
 import { n as GrTimeline_default, t as GrTimelineItem_default } from "./components/GrTimeline/chunks/GrTimeline-BiHpArsg.js";

package/dist/theme.js

@@ -1,4 +1,4 @@
-import { a as grThemeTokens, n as grDerivedTokens, t as grComponentTokens } from "./chunks/generated-Buw6W7Te.js";
+import { a as grThemeTokens, n as grDerivedTokens, t as grComponentTokens } from "./chunks/generated-BcfXQY4j.js";
 //#region src/theme/color.ts
 function parseHex(value) {
 	const match = value.trim().match(/^#([\da-f]{3}|[\da-f]{6})$/i);

package/dist/tokens.js

@@ -1,2 +1,2 @@
-import { a as grThemeTokens, i as grThemeNames, n as grDerivedTokens, r as grFoundationTokens, t as grComponentTokens } from "./chunks/generated-Buw6W7Te.js";
+import { a as grThemeTokens, i as grThemeNames, n as grDerivedTokens, r as grFoundationTokens, t as grComponentTokens } from "./chunks/generated-BcfXQY4j.js";
 export { grComponentTokens, grDerivedTokens, grFoundationTokens, grThemeNames, grThemeTokens };

package/dist/types/components/GrPopover/grPopoverStyles.d.ts

@@ -42,5 +42,24 @@ export declare const panelSizes: Record<GrPopoverSize, string>;
  * сгенерированном CSS. Меню внутри поповера с `p-3` — визуально не меню.
  */
 export declare const panelSizesFlush: Record<GrPopoverSize, string>;
-export declare const popoverPanelBaseClass = "rounded-[var(--gr-radius-xl)] border border-[var(--gr-brd)] bg-[var(--gr-popover)] text-[var(--gr-popover-fg)] shadow-[var(--gr-shadow-2)] max-w-[min(var(--gr-popover-max-width,22rem),calc(100vw-1rem))] focus:outline-none";
+/**
+ * Высота — тоже `min()` из двух пределов, но устроена иначе, чем ширина.
+ *
+ * Потолок ширины статичен: `calc(100vw-1rem)` не зависит от того, где стоит
+ * триггер. Потолок высоты статичным быть не может — доступное место есть
+ * расстояние до края вьюпорта на той стороне, куда панель встала, и меняется
+ * оно на каждом скролле. Поэтому второй операнд здесь — не константа, а замер
+ * слоя (`--gr-floating-available-height`, см. `useFloating`), и он пересчитан
+ * уже **после** `flip`: сторона окончательная.
+ *
+ * `overflow-y: auto` идёт с потолком одной строкой намеренно. Потолок без
+ * скролла не ограничивает, а обрезает: содержимое молча уходит под нижний край
+ * панели, и добраться до него нельзя ничем. Пока потолок не упёрся, полоса не
+ * рисуется, так что для коротких панелей не меняется ничего.
+ *
+ * Хук `--gr-popover-max-height` по умолчанию `100vh` — то есть «мнения нет»,
+ * и высоту диктует замер. Он же служит фолбэком, пока позиция не посчитана
+ * (первый кадр, SSR): панель не схлопывается в ноль, а просто не ограничена.
+ */
+export declare const popoverPanelBaseClass = "rounded-[var(--gr-radius-xl)] border border-[var(--gr-brd)] bg-[var(--gr-popover)] text-[var(--gr-popover-fg)] shadow-[var(--gr-shadow-2)] max-w-[min(var(--gr-popover-max-width,22rem),calc(100vw-1rem))] max-h-[min(var(--gr-popover-max-height,100vh),var(--gr-floating-available-height,100vh))] overflow-y-auto focus:outline-none";
 export declare function grPopoverPanelClass(size: GrPopoverSize, placement: Placement, extra?: string, padding?: GrPopoverPadding): string;

package/dist/types/components/shared/scrollOverflow.d.ts

@@ -0,0 +1,20 @@
+/** С какой стороны у скроллера осталось невидимое содержимое. */
+export type GrScrollOverflow = 'none' | 'start' | 'end' | 'both';
+/**
+ * Состояние переполнения скроллера — по трём числам, без DOM.
+ *
+ * Отдельным модулем, потому что в jsdom раскладки нет: `scrollWidth` и
+ * `clientWidth` там нули, и через смонтированный компонент ни одна ветка не
+ * проверяется. Здесь она проверяется вся.
+ *
+ * `scrollStart` — расстояние от начала ряда, а не `scrollLeft`. Это не
+ * педантизм: в RTL современные браузеры отсчитывают `scrollLeft` от правого
+ * края и уводят его в минус, поэтому физическое «слева» и логическое «в начале»
+ * там не совпадают. Модуль знает только про начало и конец, а какой это край
+ * экрана — дело CSS.
+ *
+ * Запас в пиксель — как в {@link titleWhenTruncated}: браузеры округляют
+ * размеры вверх, и у ряда, влезающего целиком, разница бывает единичной.
+ * Без запаса затухание висело бы на ровном месте.
+ */
+export declare function resolveScrollOverflow(scrollStart: number, scrollSize: number, clientSize: number): GrScrollOverflow;