Сообщения

Сообщение о статусе

<div class="gr-alert gr-alert-danger" role="alert">
  <span class="gr-alert-icon" aria-hidden="true">✕</span>
  <div class="gr-alert-body">
    <strong class="gr-alert-title">Ошибка</strong>
    Форму не удалось отправить.
  </div>
</div>

Роль объявляется разметкой

Иконка

Своих иконок библиотека не везёт — слот принимает что угодно: символ, эмодзи или <svg>. Размер и выравнивание задаёт слот, цвет наследуется от статуса.

Закрытие

.gr-alert-dismissible оставляет место под кнопку закрытия в конце строки. Сама кнопка — обычная .gr-btn-icon.gr-btn-ghost, а закрывает её делегированный обработчик [data-gr-dismiss] из griffincss-ui.js. Крестик в примере ниже — рабочий: скрипт подключён на этой странице.

Полоса выполнения

<label>
  Загрузка файла — 40 %
  <progress class="gr-progress" value="40" max="100">40 %</progress>
</label>

<progress class="gr-progress gr-progress-indeterminate">Выполняется</progress>

Шкала

Рейтинг

<span class="gr-rating" style="--gr-rating: 4.5" role="img" aria-label="4,5 из 5"></span>
<span class="gr-text-sm gr-text-ink-secondary">4,5 — 128 отзывов</span>

<!-- свой знак и свой цвет — переопределением токенов, не правилами -->
<span class="gr-rating gr-text-2xl"
      style="--gr-rating: 4; --gr-rating-symbol: '♥'; --gr-rating-color: var(--gr-color-danger)"
      role="img" aria-label="4 из 5"></span>

Кольцо занятости

<span class="gr-spinner" role="status" aria-label="Загрузка"></span>

<button class="gr-btn gr-btn-primary" disabled>
  <span class="gr-spinner gr-spinner-sm gr-spinner-current" aria-hidden="true"></span>
  Сохраняем…
</button>

Всплывающие уведомления

Griffincss.ui.toast('Черновик сохранён', {
  status: 'success',   // info | success | warning | danger
  title: 'Готово',     // слово статуса — цвет один его не сообщает
  timeout: 5000,       // 0 — без таймера, только крестик
  position: 'bottom-end'
});

<div class="gr-toast-region gr-toast-region-bottom-end"
     role="status" aria-live="polite"></div>

Появление объявлено начальным состоянием

Тост вставляют в документ уже нарисованным в конечном виде, поэтому обычный переход ничего бы не показал: анимировать нечего, начального кадра нет. Его задаёт @starting-style:

@starting-style {
  .gr-toast {
    opacity: 0;
    translate: 0 var(--gr-toast-slide, -0.75rem);
  }
}

Так рантайму не нужны ни второй кадр, ни пара «добавил класс — снял класс»: он просто кладёт узел в регион. Направление въезда берётся у региона — у верхних углов тост приезжает сверху, у нижних снизу.

Примеры использования

У обратной связи два вопроса: «каким компонентом сказать» и «на сколько оставить». Два рецепта ниже отвечают на оба: выбор между алертом и тостом и живая полоса загрузки с отменой.

Алерт или тост: правило выбора

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

<!-- осталась на странице: к ней вернутся -->
<div class="gr-alert gr-alert-danger" role="alert">
  <div class="gr-alert-title">Форма не отправлена</div>
  <div class="gr-alert-body">Заполните почту и телефон.</div>
</div>

// мимолётное подтверждение
Griffincss.ui.toast('Черновик сохранён', { status: 'success', title: 'Готово' });

Загрузка файла: полоса, процент, отмена

Строка загрузки — медиа-объект: имя файла с .gr-truncate (длинные имена не распирают строку), процент .gr-text-ink-secondary напротив через .gr-flex-between, под ними — <progress class="gr-progress"> на всю ширину и рядом кнопка-крестик. Пока доля неизвестна, полоса живёт в .gr-progress-indeterminate; проценты появляются вместе с первыми байтами.

<div class="gr-flex gr-flex-col gr-gap-sm" style="max-width: 26rem">
  <div class="gr-flex gr-flex-between gr-gap-sm gr-text-sm">
    <span class="gr-truncate">annual-report-2026-final-v3.pdf</span>
    <span class="gr-text-ink-secondary">64 %</span>
  </div>
  <div class="gr-flex gr-flex-items-center gr-gap-sm">
    <progress class="gr-progress gr-flex-1" value="64" max="100">64 %</progress>
    <button class="gr-btn gr-btn-icon gr-btn-ghost gr-btn-sm">✕<span class="gr-sr-only">Отменить загрузку</span></button>
  </div>
</div>