GrCard

<GrCard> без пропов рендерит один <div> со слотом внутри: ни обёрток, ни отступов. Это не осторожность ради осторожности — на GrCard стоят GrCollapse и GrList, и сдвинутый дефолт поехал бы у них. Отсюда padding="none" по умолчанию.

<GrCard padding="md">
…
</GrCard>

none (по умолчанию), sm (12px), md (16px), lg (24px). Пока секций нет, отступ живёт на самой поверхности — лишней обёртки не появляется.

padding и variant читаются из GrConfigProvider:

<GrConfigProvider :component-defaults="{ GrCard: { padding: 'md', variant: 'outlined' } }">

<GrCard padding="md">
  <template #header>
    <h3>Релиз 0.15</h3>
  </template>

  Тело карточки.

  <template #footer>
    <GrButton size="sm">Опубликовать</GrButton>
  </template>
</GrCard>

Шапка отбивается border-b, подвал — border-t. Как только появляется хотя бы одна секция (или bodyClass), отступ переезжает с поверхности на секции — иначе он сложился бы вдвое.

Карточка отбивает то, что рисует сама. Шапка из title — её собственная, и отступ ей полагается независимо от padding, включая дефолтный none: иначе заголовок и разделитель под ним оказываются прижаты к рамке. Это и есть типовая карточка отчёта — заголовок с отступом, таблица край в край:

<GrCard title="Документы" variant="outlined">
  <GrDataTable :rows="rows" :columns="columns" />
</GrCard>

Слоты #header и #footer наполняет потребитель — их отступы идут из padding и остаются его заботой. Правило то же, что и у приоритета: #header сильнее пропов и заменяет шапку целиком, а вместе с ней и ответственность за отступы. Иначе потребитель, у которого внутри слота свои отступы, получил бы двойные.

bodyClass кладёт классы на обёртку тела — там же, где обычно нужен grid gap-*.

<GrCard title="Выручка за месяц" description="Без учёта возвратов" padding="md">
  <RevenueChart />
</GrCard>

title печатается тегом h2…h6 (headingLevel, по умолчанию h3), а не <span class="font-semibold">. Разница не косметическая: страница из шести карточек, где после h1 нет ни одного заголовка, обходится скринридером только подряд — прыгать между блоками нечем.

#header сильнее пропов: слот занят — title и description не рендерятся вовсе. Нестандартная шапка не обязана объяснять, почему она не title.

Действие рядом с заголовком — слот #actions, и шапка при этом остаётся своей: заголовок печатается тем же h2…h6, отступы берутся из шкалы карточки.

<GrCard title="Продажи за неделю" :heading-level="3">
  <template #actions>
    <GrButton size="xs" variant="ghost">Обновить</GrButton>
  </template>
</GrCard>

Слот появился не ради удобства: третьего случая не было — либо заголовок из пропов, либо #header целиком, — и любая кнопка в шапке заставляла забрать слот и переписать заголовок вручную. К этому обходу независимо пришли GrDashboardItem в кольце и обёртки потребителей, и все теряли одно и то же: настоящий уровень заголовка и шкалу отступов.

С #header слот не сочетается: тот заменяет шапку целиком, включая место, куда действия встали бы. GrDashboardItem по-прежнему пользуется #header — у него левее заголовка живёт ручка перетаскивания, а её #actions не выражает.

Карточка-ссылка берёт доступное имя из заголовка (aria-labelledby), а не из всего содержимого подряд.

У кликабельной карточки заголовка не будет. Корень там — <button>, а его контент-модель это phrasing content: <h3> внутри невалиден. title печатается <span>, и в dev компонент об этом предупреждает. Нужен и заголовок, и переход — hoverable плюс ссылка в самом заголовке; это тот же приём, что и с действиями внутри (ниже).

<GrCard href="/reports/42" padding="md">
…
</GrCard>

<GrCard clickable padding="md" @click="open">
…
</GrCard>

<GrCard :as="RouterLink" :to="{ name: 'report' }" padding="md">
…
</GrCard>

Порядок выбора тега — as → <a href> → <button clickable> → <div>, как у GrLink и GrListItem. Интерактивная карточка получает кольцо фокуса и подсветку при наведении.

Интерактивность даёт разрешённый тег, а не сам факт as. Кольцо фокуса достаётся тому, кто умеет фокус: <button>, <a> со ссылкой и компоненту роутера, про который до рендера известно только то, что он рендерит <a>. as="section" не делает карточку интерактивной — см. ниже.

Ограничение: внутрь кликабельной карточки нельзя класть кнопки и ссылки — интерактив внутри интерактива ломает и клавиатуру, и скринридер (axe: nested-interactive). Карточке с действиями внутри нужен hoverable плюс ссылка в заголовке — визуально это то же самое, семантически — правильно.

hoverable подсвечивает карточку, не делая её интерактивной.

Страница, у которой блок обязан быть <section> или <article> по разметке документа, берёт as со строковым тегом:

<GrCard as="section" title="Продажи" padding="md">
…
</GrCard>

Меняется только тег. Классы, отступы, заголовок и слоты — те же, что у <div>: неинтерактивный тег не получает ни подсветки под курсором, ни кольца фокуса, ни aria-labelledby. Карточка остаётся поверхностью, а разметка страницы становится честной.

<div> остаётся дефолтом намеренно. HTML-спека не советует section там, где элемент нужен ради оформления, а карточка чаще всего именно поверхность — GrCollapse, GrList и GrSortableList стоят на ней как раз в этом качестве. Тег выбирает страница, которая знает свою структуру, а не компонент.

Обратная сторона правила: clickable или href вместе с тегом, который не попадает в таб-порядок, — ошибка вёрстки. Карточка будет кликаться мышью и останется недостижимой с клавиатуры, и в dev компонент об этом предупреждает.

Безымянная <section> для скринридера — обычный контейнер, и это норма. Имя превращает её в лендмарк, а именованных областей на страницу нужно немного: десяток карточек-регионов делает их обзор бесполезным. Поэтому имя даётся по явной просьбе — regionLabel:

<GrCard as="section" region-label="Продажи за август" title="Продажи" padding="md">
…
</GrCard>

Проп ставит role="region" и aria-label — тот же приём, что у GrTable и GrFormSection. Интерактивной карточке он не даётся и в dev предупреждает: role="region" поверх <button> невалиден, а имя ссылке уже дал заголовок.