Extra Group

Extra Group показывает связанные числа в одной строке. Цвет и подпись поясняют значение каждого числа.

Статус: experimental · в системе с 2026-06 · интерактивность: none (нет)

Когда использовать

Сводные счётчики одной сущности в строку: статусы модерации, метрики.
Проценты с порогами «плохо → хорошо» — режим range.

Не использовать:

Разнородные числа без общего смысла — это просто текст.
Интерактив — компонент не фокусируется, это вывод.

Альтернативы:

status — одно состояние с подписью и сменой значения

Базовый

Без явного цвета значения приглушены; слеш — префикс перед всеми, кроме первого.

0/1/2

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import ExtraGroup from "$lib/ui/ExtraGroup.svelte";

const items = [
  { value: 0, label: t("Moderated") },
  { value: 1, label: "Approved" },
  { value: 2, label: t("Blocked") },
];
</script>

<ExtraGroup {items} fontSize={32} />

Цвета по токенам

В color передаётся имя CSS-переменной — значение красится напрямую.

128/542/17

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import ExtraGroup from "$lib/ui/ExtraGroup.svelte";

const items = [
  { value: 128, label: t("На модерации"), color: "--c-status-moderated" },
  { value: 542, label: t("Одобрено"), color: "--c-status-approved" },
  { value: 17, label: t("Заблокировано"), color: "--c-status-blocked" },
];
</script>

<ExtraGroup {items} fontSize={32} />

Режим range

При color: "range" цвет выбирается по числу: пороги 50 / 70 / 100.

32/64/88/100

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import ExtraGroup from "$lib/ui/ExtraGroup.svelte";

const items = [
  { value: 32, label: t("Низкий"), color: "range" },
  { value: 64, label: t("Средний"), color: "range" },
  { value: 88, label: t("Хороший"), color: "range" },
  { value: 100, label: t("Полный"), color: "range" },
];
</script>

<ExtraGroup {items} fontSize={32} />

Размер

Размер задаётся пропом fontSize (px); по умолчанию — 11px.

128/542/17

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import ExtraGroup from "$lib/ui/ExtraGroup.svelte";

const items = [
  { value: 128, label: t("На модерации"), color: "--c-status-moderated" },
  { value: 542, label: t("Одобрено"), color: "--c-status-approved" },
  { value: 17, label: t("Заблокировано"), color: "--c-status-blocked" },
];
</script>

<div style="display: flex; align-items: baseline; gap: var(--sp-3);">
  <ExtraGroup {items} />
  <ExtraGroup {items} fontSize={16} />
  <ExtraGroup {items} fontSize={24} />
</div>