@feugene/granularity 0.29.1 → 0.30.0

package/dist/components/GrSortableList/chunks/{GrSortableList-DGs3Pi2J.js.map → GrSortableList-HyKX--rO.js.map}

@@ -1 +1 @@
-{"version":3,"file":"GrSortableList-DGs3Pi2J.js","names":[],"sources":["../../../../src/components/GrSortableList/GrSortableList.vue","../../../../src/components/GrSortableList/GrSortableList.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, nextTick, ref } from 'vue'\n\nimport GrCard, { type GrCardVariant } from '../GrCard'\nimport { useAnnouncer } from '../../composables/useAnnouncer'\nimport { useDragSort } from '../../composables/useDragSort'\nimport { useRovingFocus } from '../../composables/useRovingFocus'\nimport { insertionIndex, moveItem } from '../../composables/internal/dragSortGeometry'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport type { GrSortableOrientation } from './grSortableListStyles'\nimport {\n  contentClass,\n  dividedClass,\n  emptyClass,\n  handleClass,\n  handleDisabledClass,\n  indicatorAfterClass,\n  indicatorBeforeClass,\n  listClass,\n  rowDisabledClass,\n  rowDraggingClass,\n  rowFocusClass,\n  rowGrabbedClass,\n  rowLayoutClass,\n} from './grSortableListStyles'\n\nimport IconGripVertical from '~icons/lucide/grip-vertical'\n\nexport interface GrSortableListProps<TItem = unknown> {\n  /** Набор в текущем порядке. `v-model`: наружу уходит новый массив, вход не мутируется. */\n  modelValue: TItem[]\n  /** Ключ элемента: имя поля или функция. Без него — индекс. */\n  itemKey?: string | ((item: TItem, index: number) => string | number)\n  /** Список только для чтения: ни указателем, ни с клавиатуры. */\n  disabled?: boolean\n  /** Ось переноса. `horizontal` — ряд с переносом по ширине. */\n  orientation?: GrSortableOrientation\n  /** Поверхность под списком — вариант карточки. */\n  variant?: GrCardVariant\n  /** Разделители между строками. */\n  divided?: boolean\n  /** Тянуть можно только за ручку. Выключено — тянется вся строка. */\n  handleOnly?: boolean\n  /** Высота видимой части: список становится скроллером с автопрокруткой при переносе. */\n  maxHeight?: number | string\n  /** Текст пустого состояния. Слот `#empty` сильнее. */\n  emptyText?: string\n  /** Имя списка для скринридера. Не задано — берётся из локали. */\n  ariaLabel?: string\n}\n\nexport interface GrSortableListEmits<TItem = unknown> {\n  (e: 'update:modelValue', value: TItem[]): void\n  (e: 'move', from: number, to: number): void\n  (e: 'change', value: TItem[]): void\n}\n\nconst props = withDefaults(defineProps<GrSortableListProps<T>>(), {\n  itemKey: undefined,\n  disabled: false,\n  orientation: 'vertical',\n  variant: undefined,\n  divided: true,\n  handleOnly: true,\n  maxHeight: undefined,\n  emptyText: undefined,\n  ariaLabel: undefined,\n})\n\nconst emit = defineEmits<GrSortableListEmits<T>>()\n\ndefineSlots<{\n  item?: (props: { item: T, index: number, dragging: boolean, grabbed: boolean }) => any\n  handle?: (props: { item: T, index: number, disabled: boolean }) => any\n  empty?: () => any\n}>()\n\nconst { t } = useGranularityTranslations()\nconst { announce } = useAnnouncer()\n\nconst listEl = ref<HTMLElement | null>(null)\nconst rowEls = new Map<string, HTMLElement>()\n\nconst count = computed(() => props.modelValue.length)\nconst isEmpty = computed(() => count.value === 0)\nconst isVertical = computed(() => props.orientation === 'vertical')\n\nfunction keyOf(item: T, index: number): string {\n  if (typeof props.itemKey === 'function') return String(props.itemKey(item, index))\n  if (typeof props.itemKey === 'string') return String((item as Record<string, unknown>)[props.itemKey])\n\n  return String(index)\n}\n\nconst keys = computed(() => props.modelValue.map((item, index) => keyOf(item, index)))\n\nfunction indexOfKey(key: string): number {\n  return keys.value.indexOf(key)\n}\n\nfunction registerRow(key: string, el: unknown): void {\n  if (el instanceof HTMLElement) {\n    rowEls.set(key, el)\n    return\n  }\n\n  // Перестановка размонтирует старый узел уже после того, как встал новый:\n  // снимаем запись, только если она протухла (приём из `GrTree`).\n  const previous = rowEls.get(key)\n  if (previous && !previous.isConnected) rowEls.delete(key)\n}\n\nconst roving = useRovingFocus<string>({\n  items: () => keys.value,\n  elementFor: key => rowEls.get(key) ?? null,\n  orientation: () => (isVertical.value ? 'vertical' : 'horizontal'),\n  wrap: () => false,\n})\n\nfunction applyMove(from: number, to: number): void {\n  if (from < 0 || to < 0 || from === to) return\n\n  const next = moveItem(props.modelValue, from, to)\n  emit('update:modelValue', next)\n  emit('move', from, to)\n  emit('change', next)\n}\n\nconst sort = useDragSort<string, number>({\n  items: () => keys.value,\n  elementFor: key => rowEls.get(key) ?? null,\n  orientation: () => props.orientation,\n  scroller: () => (props.maxHeight === undefined ? null : listEl.value),\n  disabled: () => props.disabled,\n  resolveTarget: (hit, source) => insertionIndex(hit, indexOfKey(source), count.value),\n  onDrop: (source, to) => applyMove(indexOfKey(source), to),\n  onUpdate: (source, target, mode) => {\n    // Объявляется только клавиатурный перенос: у мыши всё видно на экране, а\n    // поток объявлений на каждом движении указателя делает диктор бесполезным.\n    if (mode !== 'keyboard' || source === null) return\n\n    const position = (target ?? indexOfKey(source)) + 1\n    announce(t('gr.sortable.moved', 'Position {position} of {count}', { position, count: count.value }))\n  },\n})\n\nconst activeIndex = computed(() => (sort.source.value === null ? -1 : indexOfKey(sort.source.value)))\n\n/** Куда встанет строка: индикатор рисуется на строке-соседе, а не отдельным узлом. */\nfunction indicatorFor(index: number): 'before' | 'after' | null {\n  const target = sort.target.value\n  if (target === null || !sort.isActive.value || index === activeIndex.value) return null\n\n  if (target === index) return target < activeIndex.value || activeIndex.value === -1 ? 'before' : 'after'\n\n  return null\n}\n\nfunction rowClass(index: number, key: string): string[] {\n  const grabbed = sort.mode.value === 'keyboard' && sort.source.value === key\n  const dragging = sort.mode.value === 'pointer' && sort.source.value === key\n  const indicator = indicatorFor(index)\n\n  return [\n    rowLayoutClass,\n    rowFocusClass,\n    props.disabled ? rowDisabledClass : '',\n    grabbed ? rowGrabbedClass : '',\n    dragging ? rowDraggingClass : '',\n    indicator === 'before' ? indicatorBeforeClass : '',\n    indicator === 'after' ? indicatorAfterClass : '',\n  ]\n}\n\nfunction startPointer(key: string, event: PointerEvent): void {\n  if (props.disabled) return\n\n  sort.startFrom(key)(event)\n}\n\nfunction grab(key: string): void {\n  sort.grab(key)\n  if (sort.mode.value !== 'keyboard') return\n\n  // Цель ставится до объявления: `setTarget` сам объявляет позицию, и обратный\n  // порядок стёр бы более полное сообщение о захвате.\n  sort.setTarget(indexOfKey(key))\n  announce(t('gr.sortable.grabbed', 'Grabbed. Position {position} of {count}', {\n    position: indexOfKey(key) + 1,\n    count: count.value,\n  }))\n}\n\nasync function drop(key: string): Promise<void> {\n  const target = sort.target.value\n  sort.drop()\n\n  announce(t('gr.sortable.dropped', 'Dropped at position {position} of {count}', {\n    position: (target ?? 0) + 1,\n    count: count.value,\n  }))\n\n  // Фокус остаётся на перенесённой строке: иначе после переноса он падает на\n  // тело документа и клавиатурный сценарий обрывается на первом же шаге.\n  await nextTick()\n  await roving.focusKey(key)\n}\n\nfunction cancel(): void {\n  if (!sort.isActive.value) return\n\n  sort.cancel()\n  announce(t('gr.sortable.cancelled', 'Move cancelled'))\n}\n\nfunction moveTargetBy(delta: number): void {\n  const current = sort.target.value ?? activeIndex.value\n  const next = Math.min(count.value - 1, Math.max(0, current + delta))\n\n  if (next !== current) sort.setTarget(next)\n}\n\nfunction onRowKeydown(event: KeyboardEvent, key: string): void {\n  if (props.disabled) return\n\n  const forward = isVertical.value ? 'ArrowDown' : 'ArrowRight'\n  const backward = isVertical.value ? 'ArrowUp' : 'ArrowLeft'\n  const grabbed = sort.mode.value === 'keyboard'\n\n  if (event.key === 'Escape') {\n    if (!grabbed) return\n\n    event.preventDefault()\n    cancel()\n    return\n  }\n\n  if (event.key === ' ' || event.key === 'Enter') {\n    event.preventDefault()\n    if (grabbed) void drop(key)\n    else grab(key)\n    return\n  }\n\n  if (grabbed) {\n    // Взятая строка забирает стрелки себе: двигается она, а не фокус.\n    if (event.key === forward || event.key === backward) {\n      event.preventDefault()\n      moveTargetBy(event.key === forward ? 1 : -1)\n    }\n    return\n  }\n\n  roving.handleNavigationKeys(event)\n}\n\n/** Фокус ушёл из списка — взятая строка не может остаться взятой навсегда. */\nfunction onFocusout(event: FocusEvent): void {\n  if (sort.mode.value !== 'keyboard') return\n\n  const next = event.relatedTarget as Node | null\n  if (next && listEl.value?.contains(next)) return\n\n  cancel()\n}\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.sortable.empty', 'Nothing to sort yet'))\nconst resolvedLabel = computed(() => props.ariaLabel ?? t('gr.sortable.label', 'Sortable list'))\nconst handleLabel = computed(() => t('gr.sortable.handle', 'Reorder'))\n\nconst listStyle = computed(() => (props.maxHeight === undefined\n  ? undefined\n  : { maxHeight: typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight, overflow: 'auto' }))\n\ndefineExpose({\n  /** Программная перестановка — та же, что делает перенос. */\n  move: (from: number, to: number) => applyMove(from, to),\n  focusItem: (index: number) => roving.focusKey(keys.value[index]),\n})\n</script>\n\n<template>\n  <GrCard :variant=\"variant\">\n    <div\n      ref=\"listEl\"\n      role=\"list\"\n      data-gr-sortable\n      :aria-label=\"resolvedLabel\"\n      :aria-disabled=\"disabled ? 'true' : undefined\"\n      :class=\"[listClass[orientation], divided ? dividedClass : '']\"\n      :style=\"listStyle\"\n      @focusout=\"onFocusout\"\n    >\n      <div\n        v-if=\"isEmpty\"\n        data-gr-sortable-empty\n        :class=\"emptyClass\"\n      >\n        <slot name=\"empty\">\n          {{ resolvedEmptyText }}\n        </slot>\n      </div>\n\n      <div\n        v-for=\"(item, index) in modelValue\"\n        v-else\n        :key=\"keys[index]\"\n        :ref=\"el => registerRow(keys[index], el)\"\n        role=\"listitem\"\n        data-gr-sortable-item\n        :tabindex=\"disabled ? -1 : roving.tabindexFor(keys[index])\"\n        :aria-roledescription=\"handleLabel\"\n        :aria-posinset=\"index + 1\"\n        :aria-setsize=\"count\"\n        :aria-grabbed=\"sort.mode.value === 'keyboard' && sort.source.value === keys[index] ? 'true' : undefined\"\n        :class=\"rowClass(index, keys[index])\"\n        @keydown=\"onRowKeydown($event, keys[index])\"\n        @focus=\"roving.setActive(keys[index])\"\n        @pointerdown=\"handleOnly ? undefined : startPointer(keys[index], $event)\"\n      >\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          data-gr-sortable-handle\n          :class=\"[handleClass, disabled ? handleDisabledClass : '']\"\n          :aria-label=\"handleLabel\"\n          :disabled=\"disabled\"\n          @pointerdown=\"startPointer(keys[index], $event)\"\n          @click.stop\n        >\n          <slot\n            name=\"handle\"\n            :item=\"item\"\n            :index=\"index\"\n            :disabled=\"disabled\"\n          >\n            <IconGripVertical class=\"block\" aria-hidden=\"true\" />\n          </slot>\n        </button>\n\n        <div :class=\"contentClass\">\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :index=\"index\"\n            :dragging=\"sort.mode.value === 'pointer' && sort.source.value === keys[index]\"\n            :grabbed=\"sort.mode.value === 'keyboard' && sort.source.value === keys[index]\"\n          >\n            {{ item }}\n          </slot>\n        </div>\n      </div>\n    </div>\n  </GrCard>\n</template>\n","<script setup lang=\"ts\" generic=\"T\">\nimport { computed, nextTick, ref } from 'vue'\n\nimport GrCard, { type GrCardVariant } from '../GrCard'\nimport { useAnnouncer } from '../../composables/useAnnouncer'\nimport { useDragSort } from '../../composables/useDragSort'\nimport { useRovingFocus } from '../../composables/useRovingFocus'\nimport { insertionIndex, moveItem } from '../../composables/internal/dragSortGeometry'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport type { GrSortableOrientation } from './grSortableListStyles'\nimport {\n  contentClass,\n  dividedClass,\n  emptyClass,\n  handleClass,\n  handleDisabledClass,\n  indicatorAfterClass,\n  indicatorBeforeClass,\n  listClass,\n  rowDisabledClass,\n  rowDraggingClass,\n  rowFocusClass,\n  rowGrabbedClass,\n  rowLayoutClass,\n} from './grSortableListStyles'\n\nimport IconGripVertical from '~icons/lucide/grip-vertical'\n\nexport interface GrSortableListProps<TItem = unknown> {\n  /** Набор в текущем порядке. `v-model`: наружу уходит новый массив, вход не мутируется. */\n  modelValue: TItem[]\n  /** Ключ элемента: имя поля или функция. Без него — индекс. */\n  itemKey?: string | ((item: TItem, index: number) => string | number)\n  /** Список только для чтения: ни указателем, ни с клавиатуры. */\n  disabled?: boolean\n  /** Ось переноса. `horizontal` — ряд с переносом по ширине. */\n  orientation?: GrSortableOrientation\n  /** Поверхность под списком — вариант карточки. */\n  variant?: GrCardVariant\n  /** Разделители между строками. */\n  divided?: boolean\n  /** Тянуть можно только за ручку. Выключено — тянется вся строка. */\n  handleOnly?: boolean\n  /** Высота видимой части: список становится скроллером с автопрокруткой при переносе. */\n  maxHeight?: number | string\n  /** Текст пустого состояния. Слот `#empty` сильнее. */\n  emptyText?: string\n  /** Имя списка для скринридера. Не задано — берётся из локали. */\n  ariaLabel?: string\n}\n\nexport interface GrSortableListEmits<TItem = unknown> {\n  (e: 'update:modelValue', value: TItem[]): void\n  (e: 'move', from: number, to: number): void\n  (e: 'change', value: TItem[]): void\n}\n\nconst props = withDefaults(defineProps<GrSortableListProps<T>>(), {\n  itemKey: undefined,\n  disabled: false,\n  orientation: 'vertical',\n  variant: undefined,\n  divided: true,\n  handleOnly: true,\n  maxHeight: undefined,\n  emptyText: undefined,\n  ariaLabel: undefined,\n})\n\nconst emit = defineEmits<GrSortableListEmits<T>>()\n\ndefineSlots<{\n  item?: (props: { item: T, index: number, dragging: boolean, grabbed: boolean }) => any\n  handle?: (props: { item: T, index: number, disabled: boolean }) => any\n  empty?: () => any\n}>()\n\nconst { t } = useGranularityTranslations()\nconst { announce } = useAnnouncer()\n\nconst listEl = ref<HTMLElement | null>(null)\nconst rowEls = new Map<string, HTMLElement>()\n\nconst count = computed(() => props.modelValue.length)\nconst isEmpty = computed(() => count.value === 0)\nconst isVertical = computed(() => props.orientation === 'vertical')\n\nfunction keyOf(item: T, index: number): string {\n  if (typeof props.itemKey === 'function') return String(props.itemKey(item, index))\n  if (typeof props.itemKey === 'string') return String((item as Record<string, unknown>)[props.itemKey])\n\n  return String(index)\n}\n\nconst keys = computed(() => props.modelValue.map((item, index) => keyOf(item, index)))\n\nfunction indexOfKey(key: string): number {\n  return keys.value.indexOf(key)\n}\n\nfunction registerRow(key: string, el: unknown): void {\n  if (el instanceof HTMLElement) {\n    rowEls.set(key, el)\n    return\n  }\n\n  // Перестановка размонтирует старый узел уже после того, как встал новый:\n  // снимаем запись, только если она протухла (приём из `GrTree`).\n  const previous = rowEls.get(key)\n  if (previous && !previous.isConnected) rowEls.delete(key)\n}\n\nconst roving = useRovingFocus<string>({\n  items: () => keys.value,\n  elementFor: key => rowEls.get(key) ?? null,\n  orientation: () => (isVertical.value ? 'vertical' : 'horizontal'),\n  wrap: () => false,\n})\n\nfunction applyMove(from: number, to: number): void {\n  if (from < 0 || to < 0 || from === to) return\n\n  const next = moveItem(props.modelValue, from, to)\n  emit('update:modelValue', next)\n  emit('move', from, to)\n  emit('change', next)\n}\n\nconst sort = useDragSort<string, number>({\n  items: () => keys.value,\n  elementFor: key => rowEls.get(key) ?? null,\n  orientation: () => props.orientation,\n  scroller: () => (props.maxHeight === undefined ? null : listEl.value),\n  disabled: () => props.disabled,\n  resolveTarget: (hit, source) => insertionIndex(hit, indexOfKey(source), count.value),\n  onDrop: (source, to) => applyMove(indexOfKey(source), to),\n  onUpdate: (source, target, mode) => {\n    // Объявляется только клавиатурный перенос: у мыши всё видно на экране, а\n    // поток объявлений на каждом движении указателя делает диктор бесполезным.\n    if (mode !== 'keyboard' || source === null) return\n\n    const position = (target ?? indexOfKey(source)) + 1\n    announce(t('gr.sortable.moved', 'Position {position} of {count}', { position, count: count.value }))\n  },\n})\n\nconst activeIndex = computed(() => (sort.source.value === null ? -1 : indexOfKey(sort.source.value)))\n\n/** Куда встанет строка: индикатор рисуется на строке-соседе, а не отдельным узлом. */\nfunction indicatorFor(index: number): 'before' | 'after' | null {\n  const target = sort.target.value\n  if (target === null || !sort.isActive.value || index === activeIndex.value) return null\n\n  if (target === index) return target < activeIndex.value || activeIndex.value === -1 ? 'before' : 'after'\n\n  return null\n}\n\nfunction rowClass(index: number, key: string): string[] {\n  const grabbed = sort.mode.value === 'keyboard' && sort.source.value === key\n  const dragging = sort.mode.value === 'pointer' && sort.source.value === key\n  const indicator = indicatorFor(index)\n\n  return [\n    rowLayoutClass,\n    rowFocusClass,\n    props.disabled ? rowDisabledClass : '',\n    grabbed ? rowGrabbedClass : '',\n    dragging ? rowDraggingClass : '',\n    indicator === 'before' ? indicatorBeforeClass : '',\n    indicator === 'after' ? indicatorAfterClass : '',\n  ]\n}\n\nfunction startPointer(key: string, event: PointerEvent): void {\n  if (props.disabled) return\n\n  sort.startFrom(key)(event)\n}\n\nfunction grab(key: string): void {\n  sort.grab(key)\n  if (sort.mode.value !== 'keyboard') return\n\n  // Цель ставится до объявления: `setTarget` сам объявляет позицию, и обратный\n  // порядок стёр бы более полное сообщение о захвате.\n  sort.setTarget(indexOfKey(key))\n  announce(t('gr.sortable.grabbed', 'Grabbed. Position {position} of {count}', {\n    position: indexOfKey(key) + 1,\n    count: count.value,\n  }))\n}\n\nasync function drop(key: string): Promise<void> {\n  const target = sort.target.value\n  sort.drop()\n\n  announce(t('gr.sortable.dropped', 'Dropped at position {position} of {count}', {\n    position: (target ?? 0) + 1,\n    count: count.value,\n  }))\n\n  // Фокус остаётся на перенесённой строке: иначе после переноса он падает на\n  // тело документа и клавиатурный сценарий обрывается на первом же шаге.\n  await nextTick()\n  await roving.focusKey(key)\n}\n\nfunction cancel(): void {\n  if (!sort.isActive.value) return\n\n  sort.cancel()\n  announce(t('gr.sortable.cancelled', 'Move cancelled'))\n}\n\nfunction moveTargetBy(delta: number): void {\n  const current = sort.target.value ?? activeIndex.value\n  const next = Math.min(count.value - 1, Math.max(0, current + delta))\n\n  if (next !== current) sort.setTarget(next)\n}\n\nfunction onRowKeydown(event: KeyboardEvent, key: string): void {\n  if (props.disabled) return\n\n  const forward = isVertical.value ? 'ArrowDown' : 'ArrowRight'\n  const backward = isVertical.value ? 'ArrowUp' : 'ArrowLeft'\n  const grabbed = sort.mode.value === 'keyboard'\n\n  if (event.key === 'Escape') {\n    if (!grabbed) return\n\n    event.preventDefault()\n    cancel()\n    return\n  }\n\n  if (event.key === ' ' || event.key === 'Enter') {\n    event.preventDefault()\n    if (grabbed) void drop(key)\n    else grab(key)\n    return\n  }\n\n  if (grabbed) {\n    // Взятая строка забирает стрелки себе: двигается она, а не фокус.\n    if (event.key === forward || event.key === backward) {\n      event.preventDefault()\n      moveTargetBy(event.key === forward ? 1 : -1)\n    }\n    return\n  }\n\n  roving.handleNavigationKeys(event)\n}\n\n/** Фокус ушёл из списка — взятая строка не может остаться взятой навсегда. */\nfunction onFocusout(event: FocusEvent): void {\n  if (sort.mode.value !== 'keyboard') return\n\n  const next = event.relatedTarget as Node | null\n  if (next && listEl.value?.contains(next)) return\n\n  cancel()\n}\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.sortable.empty', 'Nothing to sort yet'))\nconst resolvedLabel = computed(() => props.ariaLabel ?? t('gr.sortable.label', 'Sortable list'))\nconst handleLabel = computed(() => t('gr.sortable.handle', 'Reorder'))\n\nconst listStyle = computed(() => (props.maxHeight === undefined\n  ? undefined\n  : { maxHeight: typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight, overflow: 'auto' }))\n\ndefineExpose({\n  /** Программная перестановка — та же, что делает перенос. */\n  move: (from: number, to: number) => applyMove(from, to),\n  focusItem: (index: number) => roving.focusKey(keys.value[index]),\n})\n</script>\n\n<template>\n  <GrCard :variant=\"variant\">\n    <div\n      ref=\"listEl\"\n      role=\"list\"\n      data-gr-sortable\n      :aria-label=\"resolvedLabel\"\n      :aria-disabled=\"disabled ? 'true' : undefined\"\n      :class=\"[listClass[orientation], divided ? dividedClass : '']\"\n      :style=\"listStyle\"\n      @focusout=\"onFocusout\"\n    >\n      <div\n        v-if=\"isEmpty\"\n        data-gr-sortable-empty\n        :class=\"emptyClass\"\n      >\n        <slot name=\"empty\">\n          {{ resolvedEmptyText }}\n        </slot>\n      </div>\n\n      <div\n        v-for=\"(item, index) in modelValue\"\n        v-else\n        :key=\"keys[index]\"\n        :ref=\"el => registerRow(keys[index], el)\"\n        role=\"listitem\"\n        data-gr-sortable-item\n        :tabindex=\"disabled ? -1 : roving.tabindexFor(keys[index])\"\n        :aria-roledescription=\"handleLabel\"\n        :aria-posinset=\"index + 1\"\n        :aria-setsize=\"count\"\n        :aria-grabbed=\"sort.mode.value === 'keyboard' && sort.source.value === keys[index] ? 'true' : undefined\"\n        :class=\"rowClass(index, keys[index])\"\n        @keydown=\"onRowKeydown($event, keys[index])\"\n        @focus=\"roving.setActive(keys[index])\"\n        @pointerdown=\"handleOnly ? undefined : startPointer(keys[index], $event)\"\n      >\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          data-gr-sortable-handle\n          :class=\"[handleClass, disabled ? handleDisabledClass : '']\"\n          :aria-label=\"handleLabel\"\n          :disabled=\"disabled\"\n          @pointerdown=\"startPointer(keys[index], $event)\"\n          @click.stop\n        >\n          <slot\n            name=\"handle\"\n            :item=\"item\"\n            :index=\"index\"\n            :disabled=\"disabled\"\n          >\n            <IconGripVertical class=\"block\" aria-hidden=\"true\" />\n          </slot>\n        </button>\n\n        <div :class=\"contentClass\">\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :index=\"index\"\n            :dragging=\"sort.mode.value === 'pointer' && sort.source.value === keys[index]\"\n            :grabbed=\"sort.mode.value === 'keyboard' && sort.source.value === keys[index]\"\n          >\n            {{ item }}\n          </slot>\n        </div>\n      </div>\n    </div>\n  </GrCard>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"GrSortableList-HyKX--rO.js","names":[],"sources":["../../../../src/components/GrSortableList/GrSortableList.vue","../../../../src/components/GrSortableList/GrSortableList.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, nextTick, ref } from 'vue'\n\nimport GrCard, { type GrCardVariant } from '../GrCard'\nimport { useAnnouncer } from '../../composables/useAnnouncer'\nimport { useDragSort } from '../../composables/useDragSort'\nimport { useRovingFocus } from '../../composables/useRovingFocus'\nimport { insertionIndex, moveItem } from '../../composables/internal/dragSortGeometry'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport type { GrSortableOrientation } from './grSortableListStyles'\nimport {\n  contentClass,\n  dividedClass,\n  emptyClass,\n  handleClass,\n  handleDisabledClass,\n  indicatorAfterClass,\n  indicatorBeforeClass,\n  listClass,\n  rowDisabledClass,\n  rowDraggingClass,\n  rowFocusClass,\n  rowGrabbedClass,\n  rowLayoutClass,\n} from './grSortableListStyles'\n\nimport IconGripVertical from '~icons/lucide/grip-vertical'\n\nexport interface GrSortableListProps<TItem = unknown> {\n  /** Набор в текущем порядке. `v-model`: наружу уходит новый массив, вход не мутируется. */\n  modelValue: TItem[]\n  /** Ключ элемента: имя поля или функция. Без него — индекс. */\n  itemKey?: string | ((item: TItem, index: number) => string | number)\n  /** Список только для чтения: ни указателем, ни с клавиатуры. */\n  disabled?: boolean\n  /** Ось переноса. `horizontal` — ряд с переносом по ширине. */\n  orientation?: GrSortableOrientation\n  /** Поверхность под списком — вариант карточки. */\n  variant?: GrCardVariant\n  /** Разделители между строками. */\n  divided?: boolean\n  /** Тянуть можно только за ручку. Выключено — тянется вся строка. */\n  handleOnly?: boolean\n  /** Высота видимой части: список становится скроллером с автопрокруткой при переносе. */\n  maxHeight?: number | string\n  /** Текст пустого состояния. Слот `#empty` сильнее. */\n  emptyText?: string\n  /** Имя списка для скринридера. Не задано — берётся из локали. */\n  ariaLabel?: string\n}\n\nexport interface GrSortableListEmits<TItem = unknown> {\n  (e: 'update:modelValue', value: TItem[]): void\n  (e: 'move', from: number, to: number): void\n  (e: 'change', value: TItem[]): void\n}\n\nconst props = withDefaults(defineProps<GrSortableListProps<T>>(), {\n  itemKey: undefined,\n  disabled: false,\n  orientation: 'vertical',\n  variant: undefined,\n  divided: true,\n  handleOnly: true,\n  maxHeight: undefined,\n  emptyText: undefined,\n  ariaLabel: undefined,\n})\n\nconst emit = defineEmits<GrSortableListEmits<T>>()\n\ndefineSlots<{\n  item?: (props: { item: T, index: number, dragging: boolean, grabbed: boolean }) => any\n  handle?: (props: { item: T, index: number, disabled: boolean }) => any\n  empty?: () => any\n}>()\n\nconst { t } = useGranularityTranslations()\nconst { announce } = useAnnouncer()\n\nconst listEl = ref<HTMLElement | null>(null)\nconst rowEls = new Map<string, HTMLElement>()\n\nconst count = computed(() => props.modelValue.length)\nconst isEmpty = computed(() => count.value === 0)\nconst isVertical = computed(() => props.orientation === 'vertical')\n\nfunction keyOf(item: T, index: number): string {\n  if (typeof props.itemKey === 'function') return String(props.itemKey(item, index))\n  if (typeof props.itemKey === 'string') return String((item as Record<string, unknown>)[props.itemKey])\n\n  return String(index)\n}\n\nconst keys = computed(() => props.modelValue.map((item, index) => keyOf(item, index)))\n\nfunction indexOfKey(key: string): number {\n  return keys.value.indexOf(key)\n}\n\nfunction registerRow(key: string, el: unknown): void {\n  if (el instanceof HTMLElement) {\n    rowEls.set(key, el)\n    return\n  }\n\n  // Перестановка размонтирует старый узел уже после того, как встал новый:\n  // снимаем запись, только если она протухла (приём из `GrTree`).\n  const previous = rowEls.get(key)\n  if (previous && !previous.isConnected) rowEls.delete(key)\n}\n\nconst roving = useRovingFocus<string>({\n  items: () => keys.value,\n  elementFor: key => rowEls.get(key) ?? null,\n  orientation: () => (isVertical.value ? 'vertical' : 'horizontal'),\n  wrap: () => false,\n})\n\nfunction applyMove(from: number, to: number): void {\n  if (from < 0 || to < 0 || from === to) return\n\n  const next = moveItem(props.modelValue, from, to)\n  emit('update:modelValue', next)\n  emit('move', from, to)\n  emit('change', next)\n}\n\nconst sort = useDragSort<string, number>({\n  items: () => keys.value,\n  elementFor: key => rowEls.get(key) ?? null,\n  orientation: () => props.orientation,\n  scroller: () => (props.maxHeight === undefined ? null : listEl.value),\n  disabled: () => props.disabled,\n  resolveTarget: (hit, source) => insertionIndex(hit, indexOfKey(source), count.value),\n  onDrop: (source, to) => applyMove(indexOfKey(source), to),\n  onUpdate: (source, target, mode) => {\n    // Объявляется только клавиатурный перенос: у мыши всё видно на экране, а\n    // поток объявлений на каждом движении указателя делает диктор бесполезным.\n    if (mode !== 'keyboard' || source === null) return\n\n    const position = (target ?? indexOfKey(source)) + 1\n    announce(t('gr.sortable.moved', 'Position {position} of {count}', { position, count: count.value }))\n  },\n})\n\nconst activeIndex = computed(() => (sort.source.value === null ? -1 : indexOfKey(sort.source.value)))\n\n/** Куда встанет строка: индикатор рисуется на строке-соседе, а не отдельным узлом. */\nfunction indicatorFor(index: number): 'before' | 'after' | null {\n  const target = sort.target.value\n  if (target === null || !sort.isActive.value || index === activeIndex.value) return null\n\n  if (target === index) return target < activeIndex.value || activeIndex.value === -1 ? 'before' : 'after'\n\n  return null\n}\n\nfunction rowClass(index: number, key: string): string[] {\n  const grabbed = sort.mode.value === 'keyboard' && sort.source.value === key\n  const dragging = sort.mode.value === 'pointer' && sort.source.value === key\n  const indicator = indicatorFor(index)\n\n  return [\n    rowLayoutClass,\n    rowFocusClass,\n    props.disabled ? rowDisabledClass : '',\n    grabbed ? rowGrabbedClass : '',\n    dragging ? rowDraggingClass : '',\n    indicator === 'before' ? indicatorBeforeClass : '',\n    indicator === 'after' ? indicatorAfterClass : '',\n  ]\n}\n\nfunction startPointer(key: string, event: PointerEvent): void {\n  if (props.disabled) return\n\n  sort.startFrom(key)(event)\n}\n\nfunction grab(key: string): void {\n  sort.grab(key)\n  if (sort.mode.value !== 'keyboard') return\n\n  // Цель ставится до объявления: `setTarget` сам объявляет позицию, и обратный\n  // порядок стёр бы более полное сообщение о захвате.\n  sort.setTarget(indexOfKey(key))\n  announce(t('gr.sortable.grabbed', 'Grabbed. Position {position} of {count}', {\n    position: indexOfKey(key) + 1,\n    count: count.value,\n  }))\n}\n\nasync function drop(key: string): Promise<void> {\n  const target = sort.target.value\n  sort.drop()\n\n  announce(t('gr.sortable.dropped', 'Dropped at position {position} of {count}', {\n    position: (target ?? 0) + 1,\n    count: count.value,\n  }))\n\n  // Фокус остаётся на перенесённой строке: иначе после переноса он падает на\n  // тело документа и клавиатурный сценарий обрывается на первом же шаге.\n  await nextTick()\n  await roving.focusKey(key)\n}\n\nfunction cancel(): void {\n  if (!sort.isActive.value) return\n\n  sort.cancel()\n  announce(t('gr.sortable.cancelled', 'Move cancelled'))\n}\n\nfunction moveTargetBy(delta: number): void {\n  const current = sort.target.value ?? activeIndex.value\n  const next = Math.min(count.value - 1, Math.max(0, current + delta))\n\n  if (next !== current) sort.setTarget(next)\n}\n\nfunction onRowKeydown(event: KeyboardEvent, key: string): void {\n  if (props.disabled) return\n\n  const forward = isVertical.value ? 'ArrowDown' : 'ArrowRight'\n  const backward = isVertical.value ? 'ArrowUp' : 'ArrowLeft'\n  const grabbed = sort.mode.value === 'keyboard'\n\n  if (event.key === 'Escape') {\n    if (!grabbed) return\n\n    event.preventDefault()\n    cancel()\n    return\n  }\n\n  if (event.key === ' ' || event.key === 'Enter') {\n    event.preventDefault()\n    if (grabbed) void drop(key)\n    else grab(key)\n    return\n  }\n\n  if (grabbed) {\n    // Взятая строка забирает стрелки себе: двигается она, а не фокус.\n    if (event.key === forward || event.key === backward) {\n      event.preventDefault()\n      moveTargetBy(event.key === forward ? 1 : -1)\n    }\n    return\n  }\n\n  roving.handleNavigationKeys(event)\n}\n\n/** Фокус ушёл из списка — взятая строка не может остаться взятой навсегда. */\nfunction onFocusout(event: FocusEvent): void {\n  if (sort.mode.value !== 'keyboard') return\n\n  const next = event.relatedTarget as Node | null\n  if (next && listEl.value?.contains(next)) return\n\n  cancel()\n}\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.sortable.empty', 'Nothing to sort yet'))\nconst resolvedLabel = computed(() => props.ariaLabel ?? t('gr.sortable.label', 'Sortable list'))\nconst handleLabel = computed(() => t('gr.sortable.handle', 'Reorder'))\n\nconst listStyle = computed(() => (props.maxHeight === undefined\n  ? undefined\n  : { maxHeight: typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight, overflow: 'auto' }))\n\ndefineExpose({\n  /** Программная перестановка — та же, что делает перенос. */\n  move: (from: number, to: number) => applyMove(from, to),\n  focusItem: (index: number) => roving.focusKey(keys.value[index]),\n})\n</script>\n\n<template>\n  <GrCard :variant=\"variant\">\n    <div\n      ref=\"listEl\"\n      role=\"list\"\n      data-gr-sortable\n      :aria-label=\"resolvedLabel\"\n      :aria-disabled=\"disabled ? 'true' : undefined\"\n      :class=\"[listClass[orientation], divided ? dividedClass : '']\"\n      :style=\"listStyle\"\n      @focusout=\"onFocusout\"\n    >\n      <div\n        v-if=\"isEmpty\"\n        data-gr-sortable-empty\n        :class=\"emptyClass\"\n      >\n        <slot name=\"empty\">\n          {{ resolvedEmptyText }}\n        </slot>\n      </div>\n\n      <div\n        v-for=\"(item, index) in modelValue\"\n        v-else\n        :key=\"keys[index]\"\n        :ref=\"el => registerRow(keys[index], el)\"\n        role=\"listitem\"\n        data-gr-sortable-item\n        :tabindex=\"disabled ? -1 : roving.tabindexFor(keys[index])\"\n        :aria-roledescription=\"handleLabel\"\n        :aria-posinset=\"index + 1\"\n        :aria-setsize=\"count\"\n        :aria-grabbed=\"sort.mode.value === 'keyboard' && sort.source.value === keys[index] ? 'true' : undefined\"\n        :class=\"rowClass(index, keys[index])\"\n        @keydown=\"onRowKeydown($event, keys[index])\"\n        @focus=\"roving.setActive(keys[index])\"\n        @pointerdown=\"handleOnly ? undefined : startPointer(keys[index], $event)\"\n      >\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          data-gr-sortable-handle\n          :class=\"[handleClass, disabled ? handleDisabledClass : '']\"\n          :aria-label=\"handleLabel\"\n          :disabled=\"disabled\"\n          @pointerdown=\"startPointer(keys[index], $event)\"\n          @click.stop\n        >\n          <slot\n            name=\"handle\"\n            :item=\"item\"\n            :index=\"index\"\n            :disabled=\"disabled\"\n          >\n            <IconGripVertical class=\"block\" aria-hidden=\"true\" />\n          </slot>\n        </button>\n\n        <div :class=\"contentClass\">\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :index=\"index\"\n            :dragging=\"sort.mode.value === 'pointer' && sort.source.value === keys[index]\"\n            :grabbed=\"sort.mode.value === 'keyboard' && sort.source.value === keys[index]\"\n          >\n            {{ item }}\n          </slot>\n        </div>\n      </div>\n    </div>\n  </GrCard>\n</template>\n","<script setup lang=\"ts\" generic=\"T\">\nimport { computed, nextTick, ref } from 'vue'\n\nimport GrCard, { type GrCardVariant } from '../GrCard'\nimport { useAnnouncer } from '../../composables/useAnnouncer'\nimport { useDragSort } from '../../composables/useDragSort'\nimport { useRovingFocus } from '../../composables/useRovingFocus'\nimport { insertionIndex, moveItem } from '../../composables/internal/dragSortGeometry'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport type { GrSortableOrientation } from './grSortableListStyles'\nimport {\n  contentClass,\n  dividedClass,\n  emptyClass,\n  handleClass,\n  handleDisabledClass,\n  indicatorAfterClass,\n  indicatorBeforeClass,\n  listClass,\n  rowDisabledClass,\n  rowDraggingClass,\n  rowFocusClass,\n  rowGrabbedClass,\n  rowLayoutClass,\n} from './grSortableListStyles'\n\nimport IconGripVertical from '~icons/lucide/grip-vertical'\n\nexport interface GrSortableListProps<TItem = unknown> {\n  /** Набор в текущем порядке. `v-model`: наружу уходит новый массив, вход не мутируется. */\n  modelValue: TItem[]\n  /** Ключ элемента: имя поля или функция. Без него — индекс. */\n  itemKey?: string | ((item: TItem, index: number) => string | number)\n  /** Список только для чтения: ни указателем, ни с клавиатуры. */\n  disabled?: boolean\n  /** Ось переноса. `horizontal` — ряд с переносом по ширине. */\n  orientation?: GrSortableOrientation\n  /** Поверхность под списком — вариант карточки. */\n  variant?: GrCardVariant\n  /** Разделители между строками. */\n  divided?: boolean\n  /** Тянуть можно только за ручку. Выключено — тянется вся строка. */\n  handleOnly?: boolean\n  /** Высота видимой части: список становится скроллером с автопрокруткой при переносе. */\n  maxHeight?: number | string\n  /** Текст пустого состояния. Слот `#empty` сильнее. */\n  emptyText?: string\n  /** Имя списка для скринридера. Не задано — берётся из локали. */\n  ariaLabel?: string\n}\n\nexport interface GrSortableListEmits<TItem = unknown> {\n  (e: 'update:modelValue', value: TItem[]): void\n  (e: 'move', from: number, to: number): void\n  (e: 'change', value: TItem[]): void\n}\n\nconst props = withDefaults(defineProps<GrSortableListProps<T>>(), {\n  itemKey: undefined,\n  disabled: false,\n  orientation: 'vertical',\n  variant: undefined,\n  divided: true,\n  handleOnly: true,\n  maxHeight: undefined,\n  emptyText: undefined,\n  ariaLabel: undefined,\n})\n\nconst emit = defineEmits<GrSortableListEmits<T>>()\n\ndefineSlots<{\n  item?: (props: { item: T, index: number, dragging: boolean, grabbed: boolean }) => any\n  handle?: (props: { item: T, index: number, disabled: boolean }) => any\n  empty?: () => any\n}>()\n\nconst { t } = useGranularityTranslations()\nconst { announce } = useAnnouncer()\n\nconst listEl = ref<HTMLElement | null>(null)\nconst rowEls = new Map<string, HTMLElement>()\n\nconst count = computed(() => props.modelValue.length)\nconst isEmpty = computed(() => count.value === 0)\nconst isVertical = computed(() => props.orientation === 'vertical')\n\nfunction keyOf(item: T, index: number): string {\n  if (typeof props.itemKey === 'function') return String(props.itemKey(item, index))\n  if (typeof props.itemKey === 'string') return String((item as Record<string, unknown>)[props.itemKey])\n\n  return String(index)\n}\n\nconst keys = computed(() => props.modelValue.map((item, index) => keyOf(item, index)))\n\nfunction indexOfKey(key: string): number {\n  return keys.value.indexOf(key)\n}\n\nfunction registerRow(key: string, el: unknown): void {\n  if (el instanceof HTMLElement) {\n    rowEls.set(key, el)\n    return\n  }\n\n  // Перестановка размонтирует старый узел уже после того, как встал новый:\n  // снимаем запись, только если она протухла (приём из `GrTree`).\n  const previous = rowEls.get(key)\n  if (previous && !previous.isConnected) rowEls.delete(key)\n}\n\nconst roving = useRovingFocus<string>({\n  items: () => keys.value,\n  elementFor: key => rowEls.get(key) ?? null,\n  orientation: () => (isVertical.value ? 'vertical' : 'horizontal'),\n  wrap: () => false,\n})\n\nfunction applyMove(from: number, to: number): void {\n  if (from < 0 || to < 0 || from === to) return\n\n  const next = moveItem(props.modelValue, from, to)\n  emit('update:modelValue', next)\n  emit('move', from, to)\n  emit('change', next)\n}\n\nconst sort = useDragSort<string, number>({\n  items: () => keys.value,\n  elementFor: key => rowEls.get(key) ?? null,\n  orientation: () => props.orientation,\n  scroller: () => (props.maxHeight === undefined ? null : listEl.value),\n  disabled: () => props.disabled,\n  resolveTarget: (hit, source) => insertionIndex(hit, indexOfKey(source), count.value),\n  onDrop: (source, to) => applyMove(indexOfKey(source), to),\n  onUpdate: (source, target, mode) => {\n    // Объявляется только клавиатурный перенос: у мыши всё видно на экране, а\n    // поток объявлений на каждом движении указателя делает диктор бесполезным.\n    if (mode !== 'keyboard' || source === null) return\n\n    const position = (target ?? indexOfKey(source)) + 1\n    announce(t('gr.sortable.moved', 'Position {position} of {count}', { position, count: count.value }))\n  },\n})\n\nconst activeIndex = computed(() => (sort.source.value === null ? -1 : indexOfKey(sort.source.value)))\n\n/** Куда встанет строка: индикатор рисуется на строке-соседе, а не отдельным узлом. */\nfunction indicatorFor(index: number): 'before' | 'after' | null {\n  const target = sort.target.value\n  if (target === null || !sort.isActive.value || index === activeIndex.value) return null\n\n  if (target === index) return target < activeIndex.value || activeIndex.value === -1 ? 'before' : 'after'\n\n  return null\n}\n\nfunction rowClass(index: number, key: string): string[] {\n  const grabbed = sort.mode.value === 'keyboard' && sort.source.value === key\n  const dragging = sort.mode.value === 'pointer' && sort.source.value === key\n  const indicator = indicatorFor(index)\n\n  return [\n    rowLayoutClass,\n    rowFocusClass,\n    props.disabled ? rowDisabledClass : '',\n    grabbed ? rowGrabbedClass : '',\n    dragging ? rowDraggingClass : '',\n    indicator === 'before' ? indicatorBeforeClass : '',\n    indicator === 'after' ? indicatorAfterClass : '',\n  ]\n}\n\nfunction startPointer(key: string, event: PointerEvent): void {\n  if (props.disabled) return\n\n  sort.startFrom(key)(event)\n}\n\nfunction grab(key: string): void {\n  sort.grab(key)\n  if (sort.mode.value !== 'keyboard') return\n\n  // Цель ставится до объявления: `setTarget` сам объявляет позицию, и обратный\n  // порядок стёр бы более полное сообщение о захвате.\n  sort.setTarget(indexOfKey(key))\n  announce(t('gr.sortable.grabbed', 'Grabbed. Position {position} of {count}', {\n    position: indexOfKey(key) + 1,\n    count: count.value,\n  }))\n}\n\nasync function drop(key: string): Promise<void> {\n  const target = sort.target.value\n  sort.drop()\n\n  announce(t('gr.sortable.dropped', 'Dropped at position {position} of {count}', {\n    position: (target ?? 0) + 1,\n    count: count.value,\n  }))\n\n  // Фокус остаётся на перенесённой строке: иначе после переноса он падает на\n  // тело документа и клавиатурный сценарий обрывается на первом же шаге.\n  await nextTick()\n  await roving.focusKey(key)\n}\n\nfunction cancel(): void {\n  if (!sort.isActive.value) return\n\n  sort.cancel()\n  announce(t('gr.sortable.cancelled', 'Move cancelled'))\n}\n\nfunction moveTargetBy(delta: number): void {\n  const current = sort.target.value ?? activeIndex.value\n  const next = Math.min(count.value - 1, Math.max(0, current + delta))\n\n  if (next !== current) sort.setTarget(next)\n}\n\nfunction onRowKeydown(event: KeyboardEvent, key: string): void {\n  if (props.disabled) return\n\n  const forward = isVertical.value ? 'ArrowDown' : 'ArrowRight'\n  const backward = isVertical.value ? 'ArrowUp' : 'ArrowLeft'\n  const grabbed = sort.mode.value === 'keyboard'\n\n  if (event.key === 'Escape') {\n    if (!grabbed) return\n\n    event.preventDefault()\n    cancel()\n    return\n  }\n\n  if (event.key === ' ' || event.key === 'Enter') {\n    event.preventDefault()\n    if (grabbed) void drop(key)\n    else grab(key)\n    return\n  }\n\n  if (grabbed) {\n    // Взятая строка забирает стрелки себе: двигается она, а не фокус.\n    if (event.key === forward || event.key === backward) {\n      event.preventDefault()\n      moveTargetBy(event.key === forward ? 1 : -1)\n    }\n    return\n  }\n\n  roving.handleNavigationKeys(event)\n}\n\n/** Фокус ушёл из списка — взятая строка не может остаться взятой навсегда. */\nfunction onFocusout(event: FocusEvent): void {\n  if (sort.mode.value !== 'keyboard') return\n\n  const next = event.relatedTarget as Node | null\n  if (next && listEl.value?.contains(next)) return\n\n  cancel()\n}\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.sortable.empty', 'Nothing to sort yet'))\nconst resolvedLabel = computed(() => props.ariaLabel ?? t('gr.sortable.label', 'Sortable list'))\nconst handleLabel = computed(() => t('gr.sortable.handle', 'Reorder'))\n\nconst listStyle = computed(() => (props.maxHeight === undefined\n  ? undefined\n  : { maxHeight: typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight, overflow: 'auto' }))\n\ndefineExpose({\n  /** Программная перестановка — та же, что делает перенос. */\n  move: (from: number, to: number) => applyMove(from, to),\n  focusItem: (index: number) => roving.focusKey(keys.value[index]),\n})\n</script>\n\n<template>\n  <GrCard :variant=\"variant\">\n    <div\n      ref=\"listEl\"\n      role=\"list\"\n      data-gr-sortable\n      :aria-label=\"resolvedLabel\"\n      :aria-disabled=\"disabled ? 'true' : undefined\"\n      :class=\"[listClass[orientation], divided ? dividedClass : '']\"\n      :style=\"listStyle\"\n      @focusout=\"onFocusout\"\n    >\n      <div\n        v-if=\"isEmpty\"\n        data-gr-sortable-empty\n        :class=\"emptyClass\"\n      >\n        <slot name=\"empty\">\n          {{ resolvedEmptyText }}\n        </slot>\n      </div>\n\n      <div\n        v-for=\"(item, index) in modelValue\"\n        v-else\n        :key=\"keys[index]\"\n        :ref=\"el => registerRow(keys[index], el)\"\n        role=\"listitem\"\n        data-gr-sortable-item\n        :tabindex=\"disabled ? -1 : roving.tabindexFor(keys[index])\"\n        :aria-roledescription=\"handleLabel\"\n        :aria-posinset=\"index + 1\"\n        :aria-setsize=\"count\"\n        :aria-grabbed=\"sort.mode.value === 'keyboard' && sort.source.value === keys[index] ? 'true' : undefined\"\n        :class=\"rowClass(index, keys[index])\"\n        @keydown=\"onRowKeydown($event, keys[index])\"\n        @focus=\"roving.setActive(keys[index])\"\n        @pointerdown=\"handleOnly ? undefined : startPointer(keys[index], $event)\"\n      >\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          data-gr-sortable-handle\n          :class=\"[handleClass, disabled ? handleDisabledClass : '']\"\n          :aria-label=\"handleLabel\"\n          :disabled=\"disabled\"\n          @pointerdown=\"startPointer(keys[index], $event)\"\n          @click.stop\n        >\n          <slot\n            name=\"handle\"\n            :item=\"item\"\n            :index=\"index\"\n            :disabled=\"disabled\"\n          >\n            <IconGripVertical class=\"block\" aria-hidden=\"true\" />\n          </slot>\n        </button>\n\n        <div :class=\"contentClass\">\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :index=\"index\"\n            :dragging=\"sort.mode.value === 'pointer' && sort.source.value === keys[index]\"\n            :grabbed=\"sort.mode.value === 'keyboard' && sort.source.value === keys[index]\"\n          >\n            {{ item }}\n          </slot>\n        </div>\n      </div>\n    </div>\n  </GrCard>\n</template>\n"],"mappings":"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"}

package/dist/components/GrSortableList/index.js

@@ -1,3 +1,3 @@
 import { n as grSortableListSafelist, t as grSortableListConfig } from "../../chunks/config-CbEbLyDE.js";
-import { t as GrSortableList_default } from "./chunks/GrSortableList-DGs3Pi2J.js";
+import { t as GrSortableList_default } from "./chunks/GrSortableList-HyKX--rO.js";
 export { GrSortableList_default as GrSortableList, GrSortableList_default as default, grSortableListConfig, grSortableListSafelist };

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-NtErwzYB.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-CHFaw3wU.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-NtErwzYB.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-CHFaw3wU.js";
 export { GRANULARITY_PROVIDER_ID, createGranularityProvider, granularityProvider as default, granularityProvider, granularityComponentConfigs, granularityDefaultThemes, granularityThemeNames };

package/dist/index.js

@@ -21,13 +21,13 @@ import { n as useGrFormFieldContext } from "./chunks/context-DdNIxa1w.js";
 import { useGrFormControl } from "./composables/useGrFormControl.js";
 import { useComboboxNavigation } from "./composables/useComboboxNavigation.js";
 import { useRovingFocus } from "./composables/useRovingFocus.js";
-import { t as GrChip_default } from "./components/GrChip/chunks/GrChip-Df4orxRH.js";
+import { t as GrChip_default } from "./components/GrChip/chunks/GrChip-C0vU69tf.js";
 import { n as grAutocompleteSafelist, t as grAutocompleteConfig } from "./chunks/config-vYMJ3Cr1.js";
-import { t as GrAutocomplete_default } from "./components/GrAutocomplete/chunks/GrAutocomplete-CaHys_A_.js";
+import { t as GrAutocomplete_default } from "./components/GrAutocomplete/chunks/GrAutocomplete-X6RlmiJQ.js";
 import { t as GrSkeleton_default } from "./components/GrSkeleton/chunks/GrSkeleton-CgfXxPQ2.js";
 import { n as GrAvatar_default, t as GrAvatarGroup_default } from "./components/GrAvatar/chunks/GrAvatar-CNmLmgcr.js";
 import { c as initialsFrom, n as grAvatarSafelist, t as grAvatarConfig } from "./chunks/config-B3J0alyY.js";
-import { t as GrBadge_default } from "./components/GrBadge/chunks/GrBadge-BM3f9PME.js";
+import { t as GrBadge_default } from "./components/GrBadge/chunks/GrBadge-BsoocpF-.js";
 import { t as grBadgeSafelist } from "./chunks/safelist-CtiHPgrj.js";
 import { t as grBadgeConfig } from "./chunks/config-g8-JGZ_Y.js";
 import { n as grBadgeWrapSafelist, o as formatBadgeValue, t as grBadgeWrapConfig } from "./chunks/config-DwABJHEo.js";
@@ -44,8 +44,8 @@ import { t as grButtonConfig } from "./chunks/config-BHcS5Cwm.js";
 import { t as GrButtonGroup_default } from "./components/GrButtonGroup/chunks/GrButtonGroup-CKyiAV8K.js";
 import { t as grButtonGroupConfig } from "./chunks/config-DBmdgoVf2.js";
 import "./components/GrButtonGroup/index.js";
-import { n as grCardSafelist, t as grCardConfig } from "./chunks/config-Dpk-eVkS.js";
-import { t as GrCard_default } from "./components/GrCard/chunks/GrCard-DR3ehBt8.js";
+import { n as grCardSafelist, t as grCardConfig } from "./chunks/config-DUbbGcfw.js";
+import { t as GrCard_default } from "./components/GrCard/chunks/GrCard-BttXz1pQ.js";
 import { t as GrCheckbox_default } from "./components/GrCheckbox/chunks/GrCheckbox-CEcHIsXM.js";
 import { n as grCheckboxSafelist, t as grCheckboxConfig } from "./chunks/config-DZCUPHPU.js";
 import "./components/GrCheckbox/index.js";
@@ -59,7 +59,7 @@ import { useAnnouncer } from "./composables/useAnnouncer.js";
 import { t as GrCodeBlock_default } from "./components/GrCodeBlock/chunks/GrCodeBlock-Dkvkr91t.js";
 import { n as grCodeBlockSafelist, t as grCodeBlockConfig } from "./chunks/config-DolULhjJ.js";
 import { n as grCollapseSafelist, t as grCollapseConfig } from "./chunks/config-BoUI0t-t.js";
-import { n as GrCollapse_default, t as GrCollapseItem_default } from "./components/GrCollapse/chunks/GrCollapse-Bw9_JatF.js";
+import { n as GrCollapse_default, t as GrCollapseItem_default } from "./components/GrCollapse/chunks/GrCollapse-BlW6ybdL.js";
 import { n as grIconSafelist, t as grIconConfig } from "./chunks/config-3bQeQvqd.js";
 import { t as GrInput_default } from "./components/GrInput/chunks/GrInput-BqqoEl1b.js";
 import { useFocusTrap } from "./composables/useFocusTrap.js";
@@ -79,8 +79,8 @@ import { a as extendDefaultParsers, n as coreResponseErrorParsers, r as createRe
 import { t as GrConfirmDialog_default } from "./components/GrConfirmDialog/chunks/GrConfirmDialog-B9mIU78E.js";
 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-RW5IBvmu.js";
-import { t as GrContextMenu_default } from "./components/GrContextMenu/chunks/GrContextMenu-BNQDbAsY.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-_FKwQvuQ.js";
 import { t as grContextMenuConfig } from "./chunks/config-CPSxM7XE.js";
 import { t as GrTable_default } from "./components/GrTable/chunks/GrTable-Zcdz2St_.js";
 import { t as useDragSort } from "./chunks/useDragSort-0l47h4yb.js";
@@ -109,7 +109,7 @@ import { t as GrDrawer_default } from "./components/GrDrawer/chunks/GrDrawer-B7P
 import { t as GrDropdown_default } from "./components/GrDropdown/chunks/GrDropdown-13Wt9eB_.js";
 import { n as grDropdownSafelist, t as grDropdownConfig } from "./chunks/config-uzUuosv7.js";
 import "./components/GrDropdown/index.js";
-import { n as GrDropdownMenuColumn_default, r as GrDropdownMenu_default, t as GrDropdownMenuColumns_default } from "./components/GrDropdownMenu/chunks/GrDropdownMenu-Cg7qHV9J.js";
+import { n as GrDropdownMenuColumn_default, r as GrDropdownMenu_default, t as GrDropdownMenuColumns_default } from "./components/GrDropdownMenu/chunks/GrDropdownMenu-GOzuAXsi.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";
@@ -131,7 +131,7 @@ import { n as grImageViewerSafelist, t as grImageViewerConfig } from "./chunks/c
 import { n as grInputSafelist, t as grInputConfig } from "./chunks/config-DO8mjeIo.js";
 import "./components/GrInput/index.js";
 import { n as grInputTagSafelist, t as grInputTagConfig } from "./chunks/config-BqT6PMzO.js";
-import { t as GrInputTag_default } from "./components/GrInputTag/chunks/GrInputTag-5wVcB0zG.js";
+import { t as GrInputTag_default } from "./components/GrInputTag/chunks/GrInputTag-Cj4A9Xgs.js";
 import { t as GrTree_default } from "./components/GrTree/chunks/GrTree-DC89I4AP.js";
 import { t as GrJsonViewer_default } from "./components/GrJsonViewer/chunks/GrJsonViewer-CgwjoUJt.js";
 import { n as grJsonViewerSafelist, t as grJsonViewerConfig } from "./chunks/config-DpAYidyY2.js";
@@ -140,7 +140,7 @@ import "./components/GrKbd/index.js";
 import { n as grLinkSafelist, t as grLinkConfig } from "./chunks/config-CQLNjc9X2.js";
 import "./components/GrLink/index.js";
 import { n as grListSafelist, t as grListConfig } from "./chunks/config-D0W8mGFD.js";
-import { n as GrList_default, t as GrListItem_default } from "./components/GrList/chunks/GrList-DrXrKU37.js";
+import { n as GrList_default, t as GrListItem_default } from "./components/GrList/chunks/GrList-DmT4qzLO.js";
 import { n as grLoadingSafelist, t as grLoadingConfig } from "./chunks/config-Bjn30smH.js";
 import "./components/GrLoading/index.js";
 import { n as grModalSafelist, t as grModalConfig } from "./chunks/config-mlheIMtV.js";
@@ -149,9 +149,9 @@ import { t as GrNavbar_default } from "./components/GrNavbar/chunks/GrNavbar-C5E
 import { n as grNavbarSafelist, t as grNavbarConfig } from "./chunks/config-2ZHRsdOc.js";
 import { n as grNumberInputSafelist, t as grNumberInputConfig } from "./chunks/config-MmPym-Z72.js";
 import { t as GrNumberInput_default } from "./components/GrNumberInput/chunks/GrNumberInput-DQ59YICu.js";
-import { t as GrSelect_default } from "./components/GrSelect/chunks/GrSelect-DKoQu3w9.js";
+import { t as GrSelect_default } from "./components/GrSelect/chunks/GrSelect-CBp0twbF.js";
 import { n as grPaginationSafelist, t as grPaginationConfig } from "./chunks/config-CjKpUcmy.js";
-import { t as GrPagination_default } from "./components/GrPagination/chunks/GrPagination-CX9ZV8mR.js";
+import { t as GrPagination_default } from "./components/GrPagination/chunks/GrPagination-kYCx6PAS.js";
 import { n as grPopoverSafelist, t as grPopoverConfig } from "./chunks/config-BTwYMQaz2.js";
 import "./components/GrPopover/index.js";
 import { n as grProgressBarSafelist, r as GR_TONES, t as grProgressBarConfig } from "./chunks/config-DWL81-aM.js";
@@ -179,7 +179,7 @@ import "./components/GrSkeleton/index.js";
 import { n as grSliderSafelist, t as grSliderConfig } from "./chunks/config-tiUtEn4Q.js";
 import "./components/GrSlider/index.js";
 import { n as grSortableListSafelist, t as grSortableListConfig } from "./chunks/config-CbEbLyDE.js";
-import { t as GrSortableList_default } from "./components/GrSortableList/chunks/GrSortableList-DGs3Pi2J.js";
+import { t as GrSortableList_default } from "./components/GrSortableList/chunks/GrSortableList-HyKX--rO.js";
 import { n as grSplitterSafelist, t as grSplitterConfig } from "./chunks/config-CvbVM4ep.js";
 import { n as sizeFromPointer, t as GrSplitter_default } from "./components/GrSplitter/chunks/GrSplitter-MltjaADn.js";
 import { n as formatStatisticValue, t as GrStatistic_default } from "./components/GrStatistic/chunks/GrStatistic-qHVasK37.js";

package/dist/types/components/GrCard/GrCard.vue.d.ts

@@ -38,6 +38,14 @@ type __VLS_Slots = {
     default?: () => any;
     /** Шапка вместо пропов `title` и `description`. */
     header?: () => any;
+    /**
+     * Действия справа в собственной шапке карточки: «⋯», «Обновить»,
+     * переключатель периода. Включают шапку так же, как `title`.
+     *
+     * Со слотом `#header` не сочетается: тот заменяет шапку целиком, и всё, что в
+     * ней есть, рисует потребитель.
+     */
+    actions?: () => any;
     /** Подвал: действия, сводка, пагинация. */
     footer?: () => any;
 };

package/dist/types/components/GrCard/grCardStyles.d.ts

@@ -10,6 +10,15 @@ export type GrCardVariant = 'elevated' | 'outlined' | 'ghost';
 export declare const surfaceBaseClass = "rounded-[var(--gr-radius-lg)] bg-[var(--gr-card)] text-[var(--gr-card-fg)]";
 export declare const variantClass: Record<GrCardVariant, string>;
 export declare const paddingClass: Record<GrCardPadding, string>;
+/**
+ * Строка шапки: заголовок с описанием слева, действия справа.
+ *
+ * `items-start`, а не `center`: у карточки с описанием шапка выше одной строки,
+ * и кнопка, выровненная по центру блока, уезжала бы к описанию, а не к
+ * заголовку.
+ */
+export declare const headerRowClass = "flex items-start justify-between gap-3";
+export declare const headerActionsClass = "flex shrink-0 items-center gap-1";
 export declare const sectionDividerTopClass = "border-t border-[var(--gr-brd)]";
 export declare const sectionDividerBottomClass = "border-b border-[var(--gr-brd)]";
 /**

package/dist/types/components/GrDropdownMenu/menuModel.d.ts

@@ -1,6 +1,6 @@
 import type { Component } from 'vue';
-import type { GrDropdownMenuItemRole } from './GrDropdownMenuItem.vue';
-import type { GrDropdownMenuItemVariant } from './grDropdownMenuStyles';
+import type { GrDropdownMenuItemAlign, GrDropdownMenuItemRole } from './GrDropdownMenuItem.vue';
+import type { GrDropdownMenuHeaderAlign, GrDropdownMenuItemVariant } from './grDropdownMenuStyles';
 /**
  * Декларативная модель меню.
  *
@@ -26,6 +26,18 @@ export interface GrDropdownMenuAction {
     rel?: string;
     /** Шорткат для `target="_blank"` + `rel="noopener noreferrer"`. */
     external?: boolean;
+    /**
+     * Чем рендерить пункт: тег или компонент роутера.
+     *
+     * Без него пункт-ссылка из `items` остаётся обычным `<a>`, то есть в
+     * SPA переход идёт перезагрузкой страницы — а обойти это в модели нечем:
+     * `itemProps` внутренняя, слота на пункт нет. Проп есть у самого
+     * `GrDropdownMenuItem` и у соседей по кольцу (`GrLink`, `GrBreadcrumbs`,
+     * `GrSidebarItem`), из этого ряда выпадала только модель меню.
+     */
+    as?: string | Component;
+    /** Выравнивание содержимого пункта. */
+    align?: GrDropdownMenuItemAlign;
 }
 export interface GrDropdownMenuSeparator {
     type: 'divider';
@@ -34,6 +46,12 @@ export interface GrDropdownMenuSeparator {
 export interface GrDropdownMenuSection {
     type: 'group';
     title?: string;
+    /** Выравнивание заголовка группы. */
+    titleAlign?: GrDropdownMenuHeaderAlign;
+    /** Разделители между пунктами группы. */
+    dividers?: boolean;
+    /** Заголовок капсом. */
+    uppercase?: boolean;
     items: GrDropdownMenuAction[];
 }
 export type GrDropdownMenuEntry = GrDropdownMenuAction | GrDropdownMenuSeparator | GrDropdownMenuSection;

package/dist/types/components/GrSelect/grSelectStyles.d.ts

@@ -3,6 +3,7 @@ export type GrSelectView = 'default' | 'link';
 export type GrSelectSize = GrComponentSize;
 export type GrSelectVariant = 'primary' | 'default' | 'muted' | 'danger';
 export type GrSelectUnderline = 'auto' | 'always' | 'none';
+import type { GrChipTone } from '../GrChip/grChipStyles';
 export type GrSelectOptionsView = 'native' | 'panel';
 /**
  * Тип значения опции. Ограничен примитивами, которые переживают путь через DOM:
@@ -20,6 +21,17 @@ export type GrSelectOption<TValue extends GrSelectValue = string> = {
     value: TValue;
     label: string;
     disabled?: boolean;
+    /**
+     * Тон чипа в режиме `tags` — перекрывает `tagTone` для этой опции.
+     *
+     * Цвет у каждого тега свой — обычная модель (метки, категории, статусы), и
+     * без неё потребитель уходил в слот `#value` рисовать выбранное сам, теряя
+     * ровно то, что в `tags` сделано правильно: чипы снаружи `role="combobox"`,
+     * снятие крестиком, сворачивание в «+N» и клавиатуру.
+     */
+    tone?: GrChipTone;
+    /** Плотная заливка чипа этой опции — перекрывает `tagDark`. */
+    dark?: boolean;
 };
 /** Группа опций: заголовок `label` + вложенные опции `options`. */
 export type GrSelectOptionGroup<TValue extends GrSelectValue = string> = {

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

@@ -0,0 +1,19 @@
+/**
+ * Предупреждение о пропе, который переименовали.
+ *
+ * Незнакомый атрибут Vue не отвергает: он уходит в `$attrs` и садится на
+ * корневой узел. Значит переименование пропа проходит у потребителя **молча** —
+ * не падают ни типы (`vue-tsc` не проверяет лишние атрибуты: принимать их
+ * вправе любой компонент), ни рантайм. Компонент просто рисуется дефолтом, и
+ * найти это можно только сверкой шаблона со списком пропов.
+ *
+ * Так и случилось со сменой `variant` на `tone` у `GrBadge` и `GrChip`: у
+ * стороннего пакета тихо разъехались десять мест в шести файлах. Причём
+ * `variant` в кольце остаётся законным именем у `GrButton`, `GrCard`, `GrAlert`
+ * и десятка других — то есть по аналогии не угадать.
+ *
+ * Предупреждение живёт только в разработке и ничего не чинит за потребителя:
+ * подставлять снятое имя значило бы завести алиас, который после 1.0 останется
+ * навсегда.
+ */
+export declare function warnRenamedProp(component: string, attrs: Record<string, unknown>, renames: Readonly<Record<string, string>>): void;

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@feugene/granularity",
-  "version": "0.29.1",
+  "version": "0.30.0",
   "framework": "vue",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
@@ -1235,6 +1235,10 @@
               "name": "header",
               "description": "Шапка вместо пропов `title` и `description`."
             },
+            {
+              "name": "actions",
+              "description": "Действия справа в собственной шапке карточки: «⋯», «Обновить», переключатель периода. Включают шапку так же, как `title`. Со слотом `#header` не сочетается: тот заменяет шапку целиком, и всё, что в ней есть, рисует потребитель."
+            },
             {
               "name": "footer",
               "description": "Подвал: действия, сводка, пагинация."

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@feugene/granularity",
   "description": "Granularity design system package with Vue 3 components, consumed via the `@feugene/unocss-preset-granular` preset.",
-  "version": "0.29.1",
+  "version": "0.30.0",
   "license": "SEE LICENSE IN LICENSE",
   "author": {
     "name": "Evgeniy Fureev",
@@ -607,7 +607,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^9.1.0",
     "@feugene/fint-i18n": "^0.6.0",
-    "@feugene/granularity-test-kit": "^0.6.0",
+    "@feugene/granularity-test-kit": "^0.7.0",
     "@feugene/unocss-preset-granular": "^0.10.1",
     "@floating-ui/dom": "^1.8.0",
     "@iconify-json/lucide": "^1.2.117",

package/dist/chunks/config-Dpk-eVkS.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"config-Dpk-eVkS.js","names":[],"sources":["../../src/components/GrCard/grCardStyles.ts","../../src/components/GrCard/safelist.ts","../../src/components/GrCard/config.ts"],"sourcesContent":["export type GrCardPadding = 'none' | 'sm' | 'md' | 'lg'\nexport type GrCardVariant = 'elevated' | 'outlined' | 'ghost'\n\n/**\n * Классы `GrCard`.\n *\n * `elevated` — дефолт и ровно тот вид, что был у карточки до появления пропов:\n * `GrCollapse` и `GrList` рендерят содержимое внутрь `GrCard`, и любое смещение\n * дефолта поехало бы у них.\n */\n\nexport const surfaceBaseClass = 'rounded-[var(--gr-radius-lg)] bg-[var(--gr-card)] text-[var(--gr-card-fg)]'\n\nexport const variantClass: Record<GrCardVariant, string> = {\n  // Тень — токеном, а не утилитой uno-шкалы: у той зашит свой полупрозрачный\n  // цвет, темой он не настраивается, и на тёмном фоне тени не получалось вовсе\n  // — карточка теряла подъём и держалась на одной рамке. Токен темозависим.\n  // Имя утилиты здесь не пишется намеренно: UnoCSS сканирует текст файла и\n  // сгенерировал бы класс прямо из комментария.\n  elevated: 'border border-[var(--gr-brd)] shadow-[var(--gr-shadow-1)]',\n  outlined: 'border border-[var(--gr-brd)]',\n  // Карточка внутри карточки: вторая рамка только шумит.\n  ghost: '',\n}\n\nexport const paddingClass: Record<GrCardPadding, string> = {\n  none: '',\n  sm: 'p-3',\n  md: 'p-4',\n  lg: 'p-6',\n}\n\nexport const sectionDividerTopClass = 'border-t border-[var(--gr-brd)]'\nexport const sectionDividerBottomClass = 'border-b border-[var(--gr-brd)]'\n\n/**\n * Отступ шапки, которую карточка рисует сама из `title`.\n *\n * Не берётся из `padding`: тот описывает **содержимое**, и дефолт `none` у него\n * осмыслен — на `GrCard` стоят `GrCollapse` и `GrList`, а карточка с таблицей\n * хочет её край в край. Заголовок же принадлежит самой карточке, и прижатым к\n * рамке вместе с разделителем он выглядеть не должен ни при каком `padding`.\n *\n * По вертикали отступ меньше горизонтального: шапка — строка, а не блок.\n */\nexport const ownHeaderPaddingClass = 'px-4 py-3'\n\n/**\n * Уровень заголовка карточки. `h1` намеренно нет: его задаёт страница, а\n * карточка — блок внутри уже существующей структуры.\n */\nexport const GR_CARD_HEADING_LEVELS = [2, 3, 4, 5, 6] as const\n\nexport type GrCardHeadingLevel = typeof GR_CARD_HEADING_LEVELS[number]\n\n// `m-0` — у нативного заголовка есть браузерные отступы, и без сброса шапка\n// разъезжается по вертикали.\nexport const cardTitleClass = 'm-0 text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)] font-600'\n\nexport const cardDescriptionClass = 'mt-1 text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-xs)] text-[var(--gr-muted-fg)]'\n\n/** Интерактивная карточка целиком: ссылка или кнопка во всю поверхность. */\nexport const interactiveClass = 'block w-full text-left transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]'\n\nexport const hoverClass = 'cursor-pointer hover:bg-[var(--gr-muted)]'\n\nexport function grCardRootClass(options: {\n  variant: GrCardVariant\n  /** Падинг едет на корень, только пока нет секций — иначе лишняя обёртка. */\n  padding: GrCardPadding\n  interactive: boolean\n  hoverable: boolean\n}): string {\n  return [\n    surfaceBaseClass,\n    variantClass[options.variant],\n    paddingClass[options.padding],\n    options.interactive ? interactiveClass : '',\n    options.interactive || options.hoverable ? hoverClass : '',\n  ].filter(Boolean).join(' ')\n}\n","import { splitClassTokens } from '../shared/classTokens'\nimport {\n  cardDescriptionClass,\n  cardTitleClass,\n  hoverClass,\n  interactiveClass,\n  ownHeaderPaddingClass,\n  paddingClass,\n  sectionDividerBottomClass,\n  sectionDividerTopClass,\n  surfaceBaseClass,\n  variantClass,\n} from './grCardStyles'\n\nexport const grCardSafelist = [...new Set([\n  ...splitClassTokens(surfaceBaseClass),\n  ...Object.values(variantClass).flatMap(splitClassTokens),\n  ...Object.values(paddingClass).flatMap(splitClassTokens),\n  ...splitClassTokens(ownHeaderPaddingClass),\n  ...splitClassTokens(sectionDividerTopClass),\n  ...splitClassTokens(sectionDividerBottomClass),\n  ...splitClassTokens(interactiveClass),\n  ...splitClassTokens(hoverClass),\n  ...splitClassTokens(cardTitleClass),\n  ...splitClassTokens(cardDescriptionClass),\n])]\n","import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nimport { grCardSafelist } from './safelist'\n\nexport const grCardConfig = defineGranularComponent(import.meta.url, {\n  name: 'GrCard',\n  safelist: grCardSafelist,\n})\n"],"mappings":";;;;;;;;;;AAWA,IAAa,mBAAmB;AAEhC,IAAa,eAA8C;CAMzD,UAAU;CACV,UAAU;CAEV,OAAO;AACT;AAEA,IAAa,eAA8C;CACzD,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,yBAAyB;AACtC,IAAa,4BAA4B;;;;;;;;;;;AAYzC,IAAa,wBAAwB;AAYrC,IAAa,iBAAiB;AAE9B,IAAa,uBAAuB;;AAGpC,IAAa,mBAAmB;AAEhC,IAAa,aAAa;AAE1B,SAAgB,gBAAgB,SAMrB;CACT,OAAO;EACL;EACA,aAAa,QAAQ;EACrB,aAAa,QAAQ;EACrB,QAAQ,cAAc,mBAAmB;EACzC,QAAQ,eAAe,QAAQ,YAAY,aAAa;CAC1D,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AAC5B;;;AClEA,IAAa,iBAAiB,CAAC,mBAAG,IAAI,IAAI;CACxC,GAAG,iBAAiB,gBAAgB;CACpC,GAAG,OAAO,OAAO,YAAY,CAAC,CAAC,QAAQ,gBAAgB;CACvD,GAAG,OAAO,OAAO,YAAY,CAAC,CAAC,QAAQ,gBAAgB;CACvD,GAAG,iBAAiB,qBAAqB;CACzC,GAAG,iBAAiB,sBAAsB;CAC1C,GAAG,iBAAiB,yBAAyB;CAC7C,GAAG,iBAAiB,gBAAgB;CACpC,GAAG,iBAAiB,UAAU;CAC9B,GAAG,iBAAiB,cAAc;CAClC,GAAG,iBAAiB,oBAAoB;AAC1C,CAAC,CAAC;;;ACrBF,IAAa,eAAe,wBAAwB,OAAO,KAAK,KAAK;CACnE,MAAM;CACN,UAAU;AACZ,CAAC"}

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

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

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

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