{
  "format": "42-examples/1",
  "components": [
    {
      "id": "button",
      "name": "Button",
      "examples": [
        {
          "id": "Types",
          "name": "Варианты и тон",
          "description": "`variant` задаёт иерархию, `tone` — смысл; `danger` сочетается с каждым уровнем.",
          "language": "svelte",
          "source": "<script>\nimport Button from \"$lib/ui/Button.svelte\";\nimport Pulse from \"phosphor-svelte/lib/Pulse\";\n</script>\n\n<Button variant=\"default\">\n  {#snippet leadingIcon()}<Pulse aria-hidden=\"true\" />{/snippet}\n  Button\n</Button>\n\n<Button variant=\"accent\">\n  {#snippet leadingIcon()}<Pulse aria-hidden=\"true\" />{/snippet}\n  Button\n</Button>\n\n<Button variant=\"ghost\">\n  {#snippet leadingIcon()}<Pulse aria-hidden=\"true\" />{/snippet}\n  Button\n</Button>\n\n<Button variant=\"default\" tone=\"danger\">Удалить файл</Button>\n<Button variant=\"accent\" tone=\"danger\">Удалить файл</Button>\n<Button variant=\"ghost\" tone=\"danger\">Удалить файл</Button>\n"
        },
        {
          "id": "Sizes",
          "name": "Размеры",
          "description": "`md` — основной, `sm` — компактный; точные метрики задаёт productScope.",
          "language": "svelte",
          "source": "<script>\nimport Button from \"$lib/ui/Button.svelte\";\n</script>\n\n<Button variant=\"default\" size=\"md\">Medium</Button>\n<Button variant=\"default\" size=\"sm\">Small</Button>\n<Button variant=\"accent\" size=\"md\">Medium</Button>\n<Button variant=\"accent\" size=\"sm\">Small</Button>\n"
        },
        {
          "id": "Icons",
          "name": "Иконки",
          "description": "Ведущая, хвостовая или обе — иконка `activity` 20px.",
          "language": "svelte",
          "source": "<script>\nimport Button from \"$lib/ui/Button.svelte\";\nimport Pulse from \"phosphor-svelte/lib/Pulse\";\n</script>\n\n<Button variant=\"default\">\n  {#snippet leadingIcon()}<Pulse aria-hidden=\"true\" />{/snippet}\n  Leading\n</Button>\n\n<Button variant=\"default\">\n  Trailing\n  {#snippet trailingIcon()}<Pulse aria-hidden=\"true\" />{/snippet}\n</Button>\n\n<Button variant=\"default\">\n  {#snippet leadingIcon()}<Pulse aria-hidden=\"true\" />{/snippet}\n  Both\n  {#snippet trailingIcon()}<Pulse aria-hidden=\"true\" />{/snippet}\n</Button>\n"
        },
        {
          "id": "Short",
          "name": "Короткая",
          "description": "Только иконка, без текста — обязателен `aria-label`.",
          "language": "svelte",
          "source": "<script>\nimport Button from \"$lib/ui/Button.svelte\";\nimport Pulse from \"phosphor-svelte/lib/Pulse\";\n</script>\n\n<Button variant=\"default\" short aria-label=\"Активность\">\n  {#snippet leadingIcon()}<Pulse aria-hidden=\"true\" />{/snippet}\n</Button>\n\n<Button variant=\"accent\" short aria-label=\"Активность\">\n  {#snippet leadingIcon()}<Pulse aria-hidden=\"true\" />{/snippet}\n</Button>\n\n<Button variant=\"default\" size=\"sm\" short aria-label=\"Активность\">\n  {#snippet leadingIcon()}<Pulse aria-hidden=\"true\" />{/snippet}\n</Button>\n"
        },
        {
          "id": "Indicator",
          "name": "Индикатор",
          "description": "Точка-нотификатор в углу. С `variant=\"ghost\"` несовместима — не рендерится.",
          "language": "svelte",
          "source": "<script>\nimport Button from \"$lib/ui/Button.svelte\";\nimport Pulse from \"phosphor-svelte/lib/Pulse\";\n</script>\n\n<Button variant=\"default\" indicator>\n  {#snippet leadingIcon()}<Pulse aria-hidden=\"true\" />{/snippet}\n  Button\n</Button>\n\n<Button variant=\"accent\" indicator>Button</Button>\n\n<Button variant=\"default\" size=\"sm\" short indicator aria-label=\"Активность\">\n  {#snippet leadingIcon()}<Pulse aria-hidden=\"true\" />{/snippet}\n</Button>\n"
        }
      ]
    },
    {
      "id": "input",
      "name": "Input",
      "examples": [
        {
          "id": "Basic",
          "name": "Базовый",
          "description": "Подпись плавает: в покое — на месте плейсхолдера, в фокусе/со значением — наверх.",
          "language": "svelte",
          "source": "<script>\nimport Input from \"$lib/ui/Input.svelte\";\nimport LockSimple from \"phosphor-svelte/lib/LockSimple\";\n\nlet email = $state(\"\");\nlet password = $state(\"\");\n</script>\n\n<div style=\"display: grid; gap: var(--sp-3); width: var(--control-field-min);\">\n  <Input placeholder=\"Без подписи\" aria-label=\"Поле без видимой подписи\" />\n  <Input label=\"Email\" bind:value={email} />\n  <Input label=\"Пароль\" type=\"password\" bind:value={password}>\n    {#snippet leading()}<LockSimple aria-hidden=\"true\" />{/snippet}\n  </Input>\n</div>\n"
        },
        {
          "id": "Sizes",
          "name": "Размеры",
          "description": "Канонические `sm / md`; точные метрики задаёт productScope.",
          "language": "svelte",
          "source": "<script>\nimport Input from \"$lib/ui/Input.svelte\";\n</script>\n\n<div style=\"display: grid; gap: var(--sp-3); width: var(--control-field-min);\">\n  <Input size=\"sm\" label=\"Small\" />\n  <Input size=\"md\" label=\"Medium\" />\n</div>\n"
        },
        {
          "id": "Icons",
          "name": "Иконки и очистка",
          "description": "Ведущая/хвостовая иконки и кнопка очистки (clearable).",
          "language": "svelte",
          "source": "<script>\nimport Input from \"$lib/ui/Input.svelte\";\nimport EnvelopeSimple from \"phosphor-svelte/lib/EnvelopeSimple\";\nimport MagnifyingGlass from \"phosphor-svelte/lib/MagnifyingGlass\";\n\nlet search = $state(\"\");\n</script>\n\n<div style=\"display: grid; gap: var(--sp-3); width: var(--control-field-min);\">\n  <Input label=\"Поиск\" bind:value={search} clearable>\n    {#snippet leading()}<MagnifyingGlass aria-hidden=\"true\" />{/snippet}\n  </Input>\n  <Input label=\"Email\">\n    {#snippet trailing()}<EnvelopeSimple aria-hidden=\"true\" />{/snippet}\n  </Input>\n</div>\n"
        },
        {
          "id": "Affixes",
          "name": "Аффиксы, счётчик и выравнивание",
          "description": "Prefix/suffix живут внутри поля; счётчик — в подвале рядом с описанием или ошибкой.",
          "language": "svelte",
          "source": "<script>\nimport Input from \"$lib/ui/Input.svelte\";\n\nlet budget = $state(\"1200\");\nlet title = $state(\"Value\");\n</script>\n\n<div style=\"display: grid; gap: var(--sp-3); width: var(--control-field-min);\">\n  <Input label=\"Бюджет\" bind:value={budget} prefix=\"$\" suffix=\"₽\" />\n  <Input label=\"Заголовок\" bind:value={title} characterCounter={10} description=\"До 10 символов.\" />\n  <Input label=\"По центру\" value=\"Value\" textAlign=\"center\" />\n  <Input label=\"Справа\" value=\"Value\" textAlign=\"right\" />\n</div>\n"
        },
        {
          "id": "Field",
          "name": "Поле",
          "description": "Подсказка, описание, ошибка, обязательность, только чтение.",
          "language": "svelte",
          "source": "<script>\nimport Input from \"$lib/ui/Input.svelte\";\n\nlet invalid = $state(\"неверно\");\n</script>\n\n<div style=\"display: grid; gap: var(--sp-3); width: var(--control-field-min);\">\n  <Input label=\"С подсказкой\" hint=\"Короткое пояснение к полю\" />\n  <Input label=\"Обязательное\" required />\n  <Input label=\"С описанием\" description=\"Поясняющий текст под полем.\" />\n  <Input label=\"Email\" bind:value={invalid} error=\"Введите адрес в формате name@domain\" />\n  <Input label=\"Только чтение\" readonly clearable value=\"Значение\" />\n</div>\n"
        }
      ]
    },
    {
      "id": "select",
      "name": "Select",
      "examples": [
        {
          "id": "Basic",
          "name": "Базовый",
          "description": "Подпись плавает; в меню — подсветка и галочка выбранного.",
          "language": "svelte",
          "source": "<script>\nimport Select from \"$lib/ui/Select.svelte\";\n\nlet city = $state(\"msk\");\nlet role = $state(\"\");\n\nconst cities = [\n  { value: \"msk\", label: \"Москва\" },\n  { value: \"spb\", label: \"Санкт-Петербург\" },\n  { value: \"nsk\", label: \"Новосибирск\" },\n  { value: \"ekb\", label: \"Екатеринбург\" },\n];\n\nconst roles = [\"Дизайнер\", \"Разработчик\", \"Менеджер\"];\n</script>\n\n<div style=\"display: grid; gap: var(--sp-3); width: var(--control-field-min);\">\n  <Select label=\"Город\" options={cities} bind:value={city} />\n  <Select label=\"Роль\" options={roles} bind:value={role} />\n</div>\n"
        },
        {
          "id": "Sizes",
          "name": "Размеры",
          "description": "Канонические `sm / md`; точные метрики задаёт productScope.",
          "language": "svelte",
          "source": "<script>\nimport Select from \"$lib/ui/Select.svelte\";\n\nconst cities = [\n  { value: \"msk\", label: \"Москва\" },\n  { value: \"spb\", label: \"Санкт-Петербург\" },\n  { value: \"nsk\", label: \"Новосибирск\" },\n  { value: \"ekb\", label: \"Екатеринбург\" },\n];\n</script>\n\n<div style=\"display: grid; gap: var(--sp-3); width: var(--control-field-min);\">\n  <Select size=\"sm\" label=\"Small\" options={cities} value=\"msk\" />\n  <Select size=\"md\" label=\"Medium\" options={cities} value=\"msk\" />\n</div>\n"
        },
        {
          "id": "Field",
          "name": "Поле",
          "description": "Подсказка, описание, ошибка, обязательность.",
          "language": "svelte",
          "source": "<script>\nimport Select from \"$lib/ui/Select.svelte\";\n\nlet invalid = $state(\"\");\n\nconst cities = [\n  { value: \"msk\", label: \"Москва\" },\n  { value: \"spb\", label: \"Санкт-Петербург\" },\n  { value: \"nsk\", label: \"Новосибирск\" },\n  { value: \"ekb\", label: \"Екатеринбург\" },\n];\n</script>\n\n<div style=\"display: grid; gap: var(--sp-3); width: var(--control-field-min);\">\n  <Select label=\"С подсказкой\" options={cities} hint=\"Выберите из списка\" />\n  <Select label=\"Обязательное\" options={cities} name=\"city\" required />\n  <Select label=\"С описанием\" options={cities} description=\"Поясняющий текст под полем.\" />\n  <Select label=\"Город\" options={cities} bind:value={invalid} error=\"Выберите город\" />\n</div>\n"
        }
      ]
    },
    {
      "id": "textarea",
      "name": "Textarea",
      "examples": [
        {
          "id": "Basic",
          "name": "Базовый",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport Textarea from \"$lib/ui/Textarea.svelte\";\n\nlet note = $state(\"Value\");\nlet bio = $state(\"\");\nlet comment = $state(\"\");\n</script>\n\n<div style=\"display: grid; gap: var(--sp-3); width: 100%;\">\n  <Textarea placeholder=\"Без подписи\" bind:value={note} />\n  <Textarea label=\"О себе\" placeholder=\"Несколько фраз\" bind:value={bio} hint=\"Расскажите кратко.\" />\n  <Textarea label=\"Комментарий\" bind:value={comment} autoresize hint=\"Растягивается под объём текста.\" />\n</div>\n"
        },
        {
          "id": "SizesClear",
          "name": "Размеры и очистка",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport Textarea from \"$lib/ui/Textarea.svelte\";\n\nlet note = $state(\"Value\");\n</script>\n\n<div style=\"display: grid; gap: var(--sp-3); width: 100%;\">\n  <Textarea size=\"sm\" label=\"Small\" value=\"Короткое поле\" />\n  <Textarea size=\"md\" label=\"Medium\" value=\"Базовая высота\" />\n  <Textarea size=\"lg\" label=\"Large\" value=\"Длинный ответ\" />\n  <Textarea label=\"Очищаемое поле\" bind:value={note} clearable />\n</div>\n"
        },
        {
          "id": "CounterError",
          "name": "Счётчик и ошибка",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport Textarea from \"$lib/ui/Textarea.svelte\";\n\nlet limited = $state(\"\");\n</script>\n\n<div style=\"display: grid; gap: var(--sp-3); width: 100%;\">\n  <Textarea label=\"Описание\" bind:value={limited} characterCounter={120} hint=\"До 120 символов.\" />\n  <Textarea label=\"Причина возврата\" error=\"Поле обязательно.\" placeholder=\"Опишите проблему\" />\n</div>\n"
        }
      ]
    },
    {
      "id": "color-input",
      "name": "Color Input",
      "examples": [
        {
          "id": "Basic",
          "name": "Базовый",
          "description": "Подпись плавает наверху, пока в поле есть значение цвета. Свотч открывает нативный пикер.",
          "language": "svelte",
          "source": "<script>\nimport ColorInput from \"$lib/ui/ColorInput.svelte\";\n\nlet brand = $state(\"#ed7f6e\");\nlet surface = $state(\"#444545\");\n</script>\n\n<div style=\"display: grid; gap: var(--sp-3); width: var(--control-field-min);\">\n  <ColorInput label=\"Color\" bind:value={brand} />\n  <ColorInput label=\"Поверхность\" bind:value={surface} />\n</div>\n"
        },
        {
          "id": "NoLabel",
          "name": "Без подписи",
          "description": "Без label свотч и hex выровнены по центру строки.",
          "language": "svelte",
          "source": "<script>\nimport ColorInput from \"$lib/ui/ColorInput.svelte\";\n\nlet accent = $state(\"#2196f3\");\n</script>\n\n<div style=\"display: grid; width: var(--control-field-min);\">\n  <ColorInput bind:value={accent} />\n</div>\n"
        },
        {
          "id": "Field",
          "name": "Поле",
          "description": "Наследует от Input: подсказку, описание, ошибку, обязательность, только чтение.",
          "language": "svelte",
          "source": "<script>\nimport ColorInput from \"$lib/ui/ColorInput.svelte\";\n\nlet brand = $state(\"#ed7f6e\");\nlet required = $state(\"#000000\");\n</script>\n\n<div style=\"display: grid; gap: var(--sp-3); width: var(--control-field-min);\">\n  <ColorInput label=\"Бренд\" bind:value={brand} hint=\"Основной цвет акцента\" />\n  <ColorInput label=\"Фон\" value=\"#444545\" description=\"Используется для тёмных поверхностей.\" />\n  <ColorInput label=\"Обязательный\" bind:value={required} required />\n  <ColorInput label=\"Только чтение\" value=\"#95e29f\" readonly />\n</div>\n"
        }
      ]
    },
    {
      "id": "input-date",
      "name": "InputDate",
      "examples": [
        {
          "id": "Basic",
          "name": "Базовый",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport InputDate from \"$lib/ui/InputDate.svelte\";\n\nlet value = $state(\"1984-01-01\");\n</script>\n\n<div style=\"display: grid; gap: var(--sp-1); width: 320px;\">\n  <InputDate label=\"Date\" required bind:value />\n  <p style=\"margin: 0; font-size: var(--fs-sm);\">value: <code>{value || \"—\"}</code></p>\n</div>\n"
        },
        {
          "id": "States",
          "name": "Пустое и со значением",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport InputDate from \"$lib/ui/InputDate.svelte\";\n</script>\n\n<div style=\"width: 280px;\">\n  <InputDate label=\"Date\" />\n</div>\n\n<div style=\"width: 280px;\">\n  <InputDate label=\"Date\" value=\"2024-03-15\" />\n</div>\n"
        },
        {
          "id": "SizeSm",
          "name": "Размер sm",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport InputDate from \"$lib/ui/InputDate.svelte\";\n</script>\n\n<div style=\"width: 280px;\">\n  <InputDate label=\"Date\" size=\"sm\" value=\"2024-03-15\" />\n</div>\n"
        }
      ]
    },
    {
      "id": "input-date-range",
      "name": "InputDateRange",
      "examples": [
        {
          "id": "Basic",
          "name": "Базовый",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport InputDateRange from \"$lib/ui/InputDateRange.svelte\";\n\nlet start = $state(\"2024-01-01\");\nlet end = $state(\"2024-04-12\");\n</script>\n\n<div style=\"display: grid; gap: var(--sp-1); width: 360px;\">\n  <InputDateRange label=\"Date\" required bind:start bind:end />\n  <p style=\"margin: 0; font-size: var(--fs-sm);\">range: <code>{start || \"—\"} … {end || \"—\"}</code></p>\n</div>\n"
        },
        {
          "id": "Empty",
          "name": "Пустой",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport InputDateRange from \"$lib/ui/InputDateRange.svelte\";\n</script>\n\n<div style=\"width: 360px;\">\n  <InputDateRange label=\"Date\" />\n</div>\n"
        }
      ]
    },
    {
      "id": "checkbox",
      "name": "Checkbox",
      "examples": [
        {
          "id": "Basic",
          "name": "Базовый",
          "description": "Независимое решение с обязательной видимой подписью.",
          "language": "svelte",
          "source": "<script>\nimport Checkbox from \"$lib/ui/Checkbox.svelte\";\n\nlet agree = $state(false);\n</script>\n\n<Checkbox label=\"Согласен с условиями\" bind:checked={agree} />\n"
        },
        {
          "id": "States",
          "name": "Состояния выбора",
          "description": "Unchecked, checked и производное indeterminate без противоречащих флагов.",
          "language": "svelte",
          "source": "<script>\nimport Checkbox from \"$lib/ui/Checkbox.svelte\";\n</script>\n\n<div style=\"display: grid; gap: var(--sp-1-5);\">\n  <Checkbox label=\"Пусто\" required description=\"Описание под чекбоксом.\" />\n  <Checkbox label=\"Выбрано\" checked required description=\"Описание под чекбоксом.\" />\n  <Checkbox label=\"Indeterminate\" indeterminate required description=\"Описание под чекбоксом.\" />\n</div>\n"
        },
        {
          "id": "Field",
          "name": "Поле",
          "description": "Required с name, подсказка, description и приоритетный error.",
          "language": "svelte",
          "source": "<script>\nimport Checkbox from \"$lib/ui/Checkbox.svelte\";\n</script>\n\n<div style=\"display: grid; gap: var(--sp-1-5);\">\n  <Checkbox label=\"С подсказкой\" hint=\"Короткое пояснение к полю\" />\n  <Checkbox label=\"Обязательный\" name=\"agreement\" required />\n  <Checkbox label=\"С описанием\" description=\"Поясняющий текст под чекбоксом.\" />\n  <Checkbox label=\"С ошибкой\" error=\"Это поле обязательно к заполнению.\" />\n</div>\n"
        },
        {
          "id": "Indeterminate",
          "name": "Выбрать всё",
          "description": "Родитель вычисляет checked и indeterminate из дочерних значений.",
          "language": "svelte",
          "source": "<script>\nimport Checkbox from \"$lib/ui/Checkbox.svelte\";\n\nlet opts = $state({ a: true, b: false, c: false });\nlet all = $derived(opts.a && opts.b && opts.c);\nlet some = $derived((opts.a || opts.b || opts.c) && !all);\n\nfunction toggleAll(v) {\n  opts = { a: v, b: v, c: v };\n}\n</script>\n\n<div style=\"display: grid; gap: var(--sp-1-5);\">\n  <Checkbox label=\"Выбрать всё\" checked={all} indeterminate={some} onCheckedChange={toggleAll} />\n  <div style=\"display: grid; gap: var(--sp-1); padding-left: var(--sp-3);\">\n    <Checkbox label=\"Аналитика\" bind:checked={opts.a} />\n    <Checkbox label=\"Маркетинг\" bind:checked={opts.b} />\n    <Checkbox label=\"Персонализация\" bind:checked={opts.c} />\n  </div>\n</div>\n"
        }
      ]
    },
    {
      "id": "checkbox-group",
      "name": "Checkbox Group",
      "examples": [
        {
          "id": "Basic",
          "name": "Базовая группа",
          "description": "Общая подпись через `legend`, выбор нескольких пунктов.",
          "language": "svelte",
          "source": "<script>\nimport CheckboxGroup from \"$lib/ui/CheckboxGroup.svelte\";\n\nlet value = $state([\"email\"]);\n\nconst items = [\n  { value: \"email\", label: \"E-mail\" },\n  { value: \"sms\", label: \"SMS\" },\n  { value: \"push\", label: \"Push-уведомления\" },\n  { value: \"telegram\", label: \"Telegram\" },\n];\n</script>\n\n<div style=\"display: grid; gap: var(--sp-2);\">\n  <CheckboxGroup legend=\"Каналы уведомлений\" name=\"channels\" {items} bind:value />\n  <p style=\"color: var(--c-text-muted); font-size: var(--fs-sm);\">\n    Выбрано: {value.join(\", \") || \"—\"}\n  </p>\n</div>\n"
        }
      ]
    },
    {
      "id": "radio",
      "name": "Radio",
      "examples": [
        {
          "id": "Vertical",
          "name": "Вертикально",
          "description": "Видимый вопрос, text-items и циклический выбор стрелками; рядом — hint группы.",
          "language": "svelte",
          "source": "<script>\nimport RadioGroup from \"$lib/ui/RadioGroup.svelte\";\n\nlet value = $state(\"\");\n\nconst items = [\n  { value: \"week\", label: \"Неделя\" },\n  { value: \"month\", label: \"Месяц\" },\n  { value: \"year\", label: \"Год\" },\n];\n</script>\n\n<RadioGroup\n  label=\"Период тарификации\"\n  name=\"plan\"\n  {items}\n  bind:value\n  hint=\"Период применяется при следующем продлении\"\n/>\n"
        },
        {
          "id": "ItemField",
          "name": "Пояснения и ошибка",
          "description": "Описание принадлежит item, required и error — группе целиком.",
          "language": "svelte",
          "source": "<script>\nimport RadioGroup from \"$lib/ui/RadioGroup.svelte\";\n\nlet delivery = $state(\"courier\");\nlet validation = $state(\"strict\");\n\nconst deliveryItems = [\n  { value: \"courier\", label: \"Курьер\", description: \"До двери в выбранный интервал.\" },\n  { value: \"pickup\", label: \"Самовывоз\", description: \"Из ближайшего пункта выдачи.\" },\n];\n\nconst validationItems = [\n  { value: \"normal\", label: \"Обычная\" },\n  { value: \"strict\", label: \"Строгая\" },\n];\n</script>\n\n<div style=\"display: grid; gap: var(--sp-3);\">\n  <RadioGroup\n    label=\"Способ получения\"\n    name=\"delivery\"\n    items={deliveryItems}\n    bind:value={delivery}\n    required\n  />\n  <RadioGroup\n    label=\"Проверка\"\n    name=\"validation\"\n    items={validationItems}\n    bind:value={validation}\n    error=\"Строгая проверка не поддерживает текущий формат.\"\n  />\n</div>\n"
        },
        {
          "id": "Horizontal",
          "name": "Горизонтально",
          "description": "Короткие подписи text-варианта переносятся по строкам.",
          "language": "svelte",
          "source": "<script>\nimport RadioGroup from \"$lib/ui/RadioGroup.svelte\";\n\nlet value = $state(\"left\");\n\nconst items = [\n  { value: \"left\", label: \"Слева\" },\n  { value: \"center\", label: \"По центру\" },\n  { value: \"right\", label: \"Справа\" },\n];\n</script>\n\n<RadioGroup label=\"Выравнивание\" name=\"align\" {items} bind:value orientation=\"horizontal\" />\n"
        },
        {
          "id": "Images",
          "name": "Плитки",
          "description": "Изображение помогает сравнить варианты, но видимая подпись остаётся доступным именем.",
          "language": "svelte",
          "source": "<script>\nimport calmImage from \"$lib/assets/radio/calm.svg\";\nimport coolImage from \"$lib/assets/radio/cool.svg\";\nimport warmImage from \"$lib/assets/radio/warm.svg\";\nimport RadioGroup from \"$lib/ui/RadioGroup.svelte\";\n\nlet value = $state(\"calm\");\n\nconst items = [\n  { value: \"calm\", label: \"Спокойный\", image: calmImage },\n  { value: \"warm\", label: \"Тёплый\", image: warmImage },\n  { value: \"cool\", label: \"Холодный\", image: coolImage },\n];\n</script>\n\n<RadioGroup label=\"Настроение\" name=\"mood\" {items} bind:value variant=\"images\" />\n"
        }
      ]
    },
    {
      "id": "switch",
      "name": "Switch",
      "examples": [
        {
          "id": "Basic",
          "name": "Базовый",
          "description": "Применяется сразу — без кнопки «Сохранить».",
          "language": "svelte",
          "source": "<script>\nimport Switch from \"$lib/ui/Switch.svelte\";\n\nlet notify = $state(true);\nlet dark = $state(false);\n</script>\n\n<div style=\"display: grid; gap: var(--sp-1-5); justify-items: start;\">\n  <Switch label=\"Уведомления\" bind:checked={notify} />\n  <Switch label=\"Тёмная тема\" bind:checked={dark} />\n</div>\n"
        },
        {
          "id": "Field",
          "name": "Поле",
          "description": "Подпись, звёздочка обязательности, подсказка, описание и ошибка.",
          "language": "svelte",
          "source": "<script>\nimport Switch from \"$lib/ui/Switch.svelte\";\n</script>\n\n<div style=\"display: grid; gap: var(--sp-1-5); justify-items: start;\">\n  <Switch label=\"С подсказкой\" hint=\"Короткое пояснение к переключателю\" />\n  <Switch label=\"Обязательный\" required />\n  <Switch label=\"С описанием\" description=\"Поясняющий текст под переключателем.\" />\n  <Switch label=\"С ошибкой\" error=\"Нужно включить, чтобы продолжить.\" />\n</div>\n"
        },
        {
          "id": "States",
          "name": "Состояния",
          "description": "Выключено и включено; фокус — кольцо акцента.",
          "language": "svelte",
          "source": "<script>\nimport Switch from \"$lib/ui/Switch.svelte\";\n</script>\n\n<Switch label=\"Выключено\" />\n<Switch label=\"Включено\" checked />\n"
        }
      ]
    },
    {
      "id": "segmented-control",
      "name": "Segmented Control",
      "examples": [
        {
          "id": "Basic",
          "name": "Базовый",
          "description": "Сегменты с иконкой-обрамлением; всегда один активен.",
          "language": "svelte",
          "source": "<script>\nimport SegmentedControl from \"$lib/ui/SegmentedControl.svelte\";\nimport Pulse from \"phosphor-svelte/lib/Pulse\";\n\nlet value = $state(\"none\");\n\nconst items = [\n  { value: \"none\", label: \"None\" },\n  { value: \"one\", label: \"One\" },\n  { value: \"two\", label: \"Two\" },\n  { value: \"three\", label: \"Three\" },\n];\n</script>\n\n<div style=\"display: grid; gap: var(--sp-2); justify-items: start;\">\n  <SegmentedControl {items} icon={Pulse} bind:value />\n  <p style=\"margin: 0; font-size: var(--fs-sm);\">Выбрано: <code>{value}</code></p>\n</div>\n"
        },
        {
          "id": "TogglePasser",
          "name": "Toggle-passer",
          "description": "Без сегмента NONE: повторный клик по активному снимает выбор — бегунок гаснет (`deselectable`).",
          "language": "svelte",
          "source": "<script>\nimport SegmentedControl from \"$lib/ui/SegmentedControl.svelte\";\nimport Pulse from \"phosphor-svelte/lib/Pulse\";\n\nlet value = $state(\"\");\n\nconst items = [\n  { value: \"include\", label: \"Include\", tone: \"include\" },\n  { value: \"exclude\", label: \"Exclude\", tone: \"exclude\" },\n];\n</script>\n\n<div style=\"display: grid; gap: var(--sp-2); justify-items: start;\">\n  <SegmentedControl {items} icon={Pulse} deselectable bind:value />\n  <p style=\"margin: 0; font-size: var(--fs-sm);\">Выбрано: <code>{value || \"—\"}</code></p>\n</div>\n"
        },
        {
          "id": "NoIcons",
          "name": "Без иконок",
          "description": "Иконка-обрамление опциональна — без неё остаётся только подпись.",
          "language": "svelte",
          "source": "<script>\nimport SegmentedControl from \"$lib/ui/SegmentedControl.svelte\";\n\nlet value = $state(\"week\");\n\nconst items = [\n  { value: \"day\", label: \"День\" },\n  { value: \"week\", label: \"Неделя\" },\n  { value: \"month\", label: \"Месяц\" },\n];\n</script>\n\n<div style=\"display: grid; gap: var(--sp-2); justify-items: start;\">\n  <SegmentedControl {items} bind:value />\n  <p style=\"margin: 0; font-size: var(--fs-sm);\">Выбрано: <code>{value}</code></p>\n</div>\n"
        }
      ]
    },
    {
      "id": "accordion",
      "name": "Accordion",
      "examples": [
        {
          "id": "Single",
          "name": "Один открытый блок",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport Accordion from \"$lib/ui/Accordion.svelte\";\n\nlet value = $state(\"overview\");\n\nconst items = [\n  {\n    value: \"overview\",\n    title: \"Что это\",\n    content: \"Список раскрывающихся секций для справки, настроек и длинных описаний.\",\n  },\n  {\n    value: \"usage\",\n    title: \"Когда использовать\",\n    content: \"Когда нужно показать несколько независимых блоков и оставить экран спокойным.\",\n  },\n  {\n    value: \"states\",\n    title: \"Состояния\",\n    content: \"Открыто, закрыто, disabled, пустой список и управляемое значение.\",\n  },\n];\n</script>\n\n<Accordion {items} bind:value />\n"
        },
        {
          "id": "Multiple",
          "name": "Несколько открытых блоков",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport Accordion from \"$lib/ui/Accordion.svelte\";\n\nlet value = $state([\"usage\", \"states\"]);\n\nconst items = [\n  {\n    value: \"overview\",\n    title: \"Что это\",\n    content: \"Список раскрывающихся секций для справки, настроек и длинных описаний.\",\n  },\n  {\n    value: \"usage\",\n    title: \"Когда использовать\",\n    content: \"Когда нужно показать несколько независимых блоков и оставить экран спокойным.\",\n  },\n  {\n    value: \"states\",\n    title: \"Состояния\",\n    content: \"Открыто, закрыто, disabled, пустой список и управляемое значение.\",\n  },\n];\n</script>\n\n<Accordion {items} type=\"multiple\" bind:value />\n"
        },
        {
          "id": "DisabledEmpty",
          "name": "Disabled и empty",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport Accordion from \"$lib/ui/Accordion.svelte\";\n\nconst items = [\n  {\n    value: \"overview\",\n    title: \"Что это\",\n    content: \"Список раскрывающихся секций для справки, настроек и длинных описаний.\",\n  },\n  {\n    value: \"usage\",\n    title: \"Когда использовать\",\n    content: \"Когда нужно показать несколько независимых блоков и оставить экран спокойным.\",\n  },\n  {\n    value: \"states\",\n    title: \"Состояния\",\n    content: \"Открыто, закрыто, disabled, пустой список и управляемое значение.\",\n  },\n  {\n    value: \"locked\",\n    title: \"Недоступная секция\",\n    content: \"Этот блок не раскрывается.\",\n    disabled: true,\n  },\n];\n</script>\n\n<Accordion {items} value=\"overview\" />\n\n<Accordion items={[]} emptyMessage=\"Разделы появятся после выбора сценария.\" />\n"
        }
      ]
    },
    {
      "id": "alert",
      "name": "Alert",
      "examples": [
        {
          "id": "Tones",
          "name": "Тона",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport Alert from \"$lib/ui/Alert.svelte\";\n</script>\n\n<Alert>Проверьте настройки перед сохранением.</Alert>\n<Alert tone=\"success\">Изменения сохранены.</Alert>\n<Alert tone=\"error\">Не удалось применить выбранное действие.</Alert>\n<Alert tone=\"info\">Данные обновятся после следующей синхронизации.</Alert>\n"
        },
        {
          "id": "Flat",
          "name": "Плоский",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport Alert from \"$lib/ui/Alert.svelte\";\n</script>\n\n<Alert flat>Сообщение без контейнера, когда рамка уже есть у родительского блока.</Alert>\n"
        },
        {
          "id": "Closeable",
          "name": "Закрываемый",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport Alert from \"$lib/ui/Alert.svelte\";\n</script>\n\n<Alert tone=\"success\" closeable>\n  Это уведомление можно скрыть крестиком справа.\n</Alert>\n"
        }
      ]
    },
    {
      "id": "avatar",
      "name": "Avatar",
      "examples": [
        {
          "id": "Sizes",
          "name": "Размеры",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport Avatar from \"$lib/ui/Avatar.svelte\";\n</script>\n\n<Avatar size=\"xs\" id={0} />\n<Avatar size=\"sm\" id={0} />\n<Avatar size=\"md\" id={0} />\n<Avatar size=\"lg\" id={0} />\n<Avatar size=\"xl\" id={0} />\n"
        },
        {
          "id": "Badges",
          "name": "Бейдж уровня",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport Avatar from \"$lib/ui/Avatar.svelte\";\n</script>\n\n<Avatar size=\"sm\" id={7} levelId={1} />\n<Avatar size=\"md\" id={8} levelId={2} />\n<Avatar size=\"lg\" id={9} levelId={3} />\n<Avatar size=\"lg\" id={10} levelId={4} />\n"
        }
      ]
    },
    {
      "id": "divider",
      "name": "Divider",
      "examples": [
        {
          "id": "Horizontal",
          "name": "Горизонтальный",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport Divider from \"$lib/ui/Divider.svelte\";\n</script>\n\n<div style=\"display: grid; gap: var(--sp-1-5); width: 100%; font-size: var(--fs-sm);\">\n  <span>Блок контента над разделителем.</span>\n  <Divider />\n  <span>Блок контента под разделителем.</span>\n</div>\n"
        },
        {
          "id": "Vertical",
          "name": "Вертикальный",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport Divider from \"$lib/ui/Divider.svelte\";\n</script>\n\n<div style=\"display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm);\">\n  <span>Профиль</span>\n  <Divider orientation=\"vertical\" />\n  <span>Настройки</span>\n  <Divider orientation=\"vertical\" />\n  <span>Выход</span>\n</div>\n"
        }
      ]
    },
    {
      "id": "dualist",
      "name": "Dualist",
      "examples": [
        {
          "id": "Basic",
          "name": "Базовый",
          "description": "Поиск без подписи и Select All. Выбранные элементы можно редактировать и удалять; счётчик показывает выбор относительно списка.",
          "language": "svelte",
          "source": "<script>\nimport Dualist from \"$lib/ui/Dualist.svelte\";\n\nconst NUMBERS = [\n  \"one\", \"two\", \"three\", \"four\", \"five\", \"six\", \"seven\", \"eight\", \"nine\", \"ten\",\n  \"eleven\", \"twelve\", \"thirteen\", \"fourteen\", \"fifteen\", \"sixteen\", \"seventeen\",\n  \"eighteen\", \"nineteen\", \"twenty\",\n];\nconst items = NUMBERS.map((w, i) => ({ value: `item-${i + 1}`, label: `Item ${w}`, editable: true }));\n\nlet value = $state([\"item-8\"]);\n</script>\n\n<Dualist {items} bind:value />\n"
        },
        {
          "id": "SearchSelectAll",
          "name": "Поиск с подписью и Select All",
          "description": "Поиск с подписью и Select All. Запрос «R» переводит счётчик из режима «выбрано / всего» в «выбрано / найдено».",
          "language": "svelte",
          "source": "<script>\nimport Dualist from \"$lib/ui/Dualist.svelte\";\n\nconst items = [\n  { value: \"regalith\", label: \"Regalith\" },\n  { value: \"russia\", label: \"Russia\", editable: true },\n  { value: \"object-one\", label: \"Object one\", warning: true },\n  { value: \"rochelia\", label: \"Rochelia\" },\n  { value: \"ruloria\", label: \"Ruloria\" },\n  { value: \"rivermore\", label: \"Rivermore\" },\n  { value: \"romania\", label: \"Romania\" },\n  { value: \"rwanda\", label: \"Rwanda\" },\n  { value: \"rdplaa\", label: \"Rdplaa\" },\n  { value: \"reserved\", label: \"Reserved\" },\n  { value: \"really\", label: \"Really\" },\n  { value: \"long\", label: \"Very-very long item name\" },\n];\n\nlet value = $state([\"regalith\", \"russia\", \"object-one\"]);\n</script>\n\n<Dualist {items} bind:value searchLabel=\"Search\" searchRequired selectAll />\n"
        },
        {
          "id": "Empty",
          "name": "Пустой менеджер",
          "description": "Пока ничего не выбрано — правая панель пуста, остаётся только «Clear All».",
          "language": "svelte",
          "source": "<script>\nimport Dualist from \"$lib/ui/Dualist.svelte\";\n\nconst NUMBERS = [\"one\", \"two\", \"three\", \"four\", \"five\", \"six\", \"seven\", \"eight\"];\nconst items = NUMBERS.map((w, i) => ({ value: `item-${i + 1}`, label: `Item ${w}`, editable: true }));\n</script>\n\n<Dualist {items} value={[]} />\n"
        }
      ]
    },
    {
      "id": "extra-group",
      "name": "Extra Group",
      "examples": [
        {
          "id": "Basic",
          "name": "Базовый",
          "description": "Без явного цвета значения приглушены; слеш — префикс перед всеми, кроме первого.",
          "language": "svelte",
          "source": "<script>\nimport ExtraGroup from \"$lib/ui/ExtraGroup.svelte\";\n\nconst items = [\n  { value: 0, label: \"Moderated\" },\n  { value: 1, label: \"Approved\" },\n  { value: 2, label: \"Blocked\" },\n];\n</script>\n\n<ExtraGroup {items} fontSize={32} />\n"
        },
        {
          "id": "Tokens",
          "name": "Цвета по токенам",
          "description": "В `color` передаётся имя CSS-переменной — значение красится напрямую.",
          "language": "svelte",
          "source": "<script>\nimport ExtraGroup from \"$lib/ui/ExtraGroup.svelte\";\n\nconst items = [\n  { value: 128, label: \"На модерации\", color: \"--c-status-moderated\" },\n  { value: 542, label: \"Одобрено\", color: \"--c-status-approved\" },\n  { value: 17, label: \"Заблокировано\", color: \"--c-status-blocked\" },\n];\n</script>\n\n<ExtraGroup {items} fontSize={32} />\n"
        },
        {
          "id": "Range",
          "name": "Режим range",
          "description": "При `color: \"range\"` цвет выбирается по числу: пороги 50 / 70 / 100.",
          "language": "svelte",
          "source": "<script>\nimport ExtraGroup from \"$lib/ui/ExtraGroup.svelte\";\n\nconst items = [\n  { value: 32, label: \"Низкий\", color: \"range\" },\n  { value: 64, label: \"Средний\", color: \"range\" },\n  { value: 88, label: \"Хороший\", color: \"range\" },\n  { value: 100, label: \"Полный\", color: \"range\" },\n];\n</script>\n\n<ExtraGroup {items} fontSize={32} />\n"
        },
        {
          "id": "Sizes",
          "name": "Размер",
          "description": "Размер задаётся пропом `fontSize` (px); по умолчанию — 11px.",
          "language": "svelte",
          "source": "<script>\nimport ExtraGroup from \"$lib/ui/ExtraGroup.svelte\";\n\nconst items = [\n  { value: 128, label: \"На модерации\", color: \"--c-status-moderated\" },\n  { value: 542, label: \"Одобрено\", color: \"--c-status-approved\" },\n  { value: 17, label: \"Заблокировано\", color: \"--c-status-blocked\" },\n];\n</script>\n\n<div style=\"display: flex; align-items: baseline; gap: var(--sp-3);\">\n  <ExtraGroup {items} />\n  <ExtraGroup {items} fontSize={16} />\n  <ExtraGroup {items} fontSize={24} />\n</div>\n"
        }
      ]
    },
    {
      "id": "input-select",
      "name": "Input Select",
      "examples": [
        {
          "id": "RuleBuilder",
          "name": "Правило фильтра",
          "description": "Четыре сегмента и удаление строки. Кнопка добавляет новое правило.",
          "language": "svelte",
          "source": "<script>\nimport Button from \"$lib/ui/Button.svelte\";\nimport InputSelect from \"$lib/ui/InputSelect.svelte\";\n\nconst MESSENGERS = [\n  { value: \"telegram\", label: \"Telegram\" },\n  { value: \"whatsapp\", label: \"WhatsApp\" },\n  { value: \"viber\", label: \"Viber\" },\n];\nconst SYSTEMS = [\n  { value: \"android\", label: \"Android\" },\n  { value: \"ios\", label: \"iOS\" },\n  { value: \"windows\", label: \"Windows\" },\n];\nconst CONDITIONS = [\"*\", \"=\", \"≠\", \">\", \"<\"];\nconst VERSIONS = [\"104\", \"105\", \"106\"];\n\nlet nextId = 3;\nfunction makeRule() {\n  return {\n    id: nextId++,\n    segments: [\n      { label: \"Messenger\", value: \"telegram\", required: true, options: MESSENGERS },\n      { label: \"Operating system\", value: \"android\", required: true, options: SYSTEMS },\n      { label: \"Condition\", value: \"*\", required: true, options: CONDITIONS },\n      { label: \"Version\", value: \"105\", required: true, options: VERSIONS },\n    ],\n  };\n}\n\nlet rows = $state([makeRule(), makeRule()]);\nfunction removeRule(id) {\n  rows = rows.filter((r) => r.id !== id);\n}\nfunction addRule() {\n  rows = [...rows, makeRule()];\n}\n</script>\n\n<div style=\"display: grid; gap: var(--sp-2); justify-items: start;\">\n  {#each rows as r (r.id)}\n    <InputSelect segments={r.segments} deletable ondelete={() => removeRule(r.id)} />\n  {/each}\n  {#if rows.length === 0}\n    <p style=\"margin: 0; color: var(--c-control-desc); font-size: var(--control-fs-aux);\">\n      Все правила удалены.\n    </p>\n  {/if}\n  <Button variant=\"ghost\" onclick={addRule}>Добавить правило</Button>\n</div>\n"
        },
        {
          "id": "Pair",
          "name": "Без удаления",
          "description": "Число сегментов произвольно; кнопка удаления опциональна.",
          "language": "svelte",
          "source": "<script>\nimport InputSelect from \"$lib/ui/InputSelect.svelte\";\n\nconst SYSTEMS = [\n  { value: \"android\", label: \"Android\" },\n  { value: \"ios\", label: \"iOS\" },\n  { value: \"windows\", label: \"Windows\" },\n];\nconst VERSIONS = [\"104\", \"105\", \"106\"];\n\nlet segments = $state([\n  { label: \"Operating system\", value: \"android\", required: true, options: SYSTEMS },\n  { label: \"Version\", value: \"105\", required: true, options: VERSIONS },\n]);\n</script>\n\n<InputSelect {segments} />\n"
        }
      ]
    },
    {
      "id": "status",
      "name": "Status",
      "examples": [
        {
          "id": "Basic",
          "name": "Базовый",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport Status from \"$lib/ui/Status.svelte\";\n\nconst items = [\n  { value: 0, text: \"Moderated\", key: \"moderated\", icon: \"moderated\", order: 0, color: \"var(--c-status-moderated)\" },\n  { value: 1, text: \"Approved\", key: \"approved\", icon: \"approved\", order: 1, color: \"var(--c-status-approved)\" },\n  { value: 2, text: \"Blocked\", key: \"blocked\", icon: \"blocked\", order: 2, color: \"var(--c-status-blocked)\" },\n];\n</script>\n\n<Status value={0} {items} />\n<Status value={1} {items} />\n<Status value={2} {items} />\n"
        },
        {
          "id": "Editable",
          "name": "Редактируемый",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport Status from \"$lib/ui/Status.svelte\";\n\nlet value = $state(0);\n\nconst items = [\n  { value: 0, text: \"Moderated\", key: \"moderated\", icon: \"moderated\", order: 0, color: \"var(--c-status-moderated)\" },\n  { value: 1, text: \"Approved\", key: \"approved\", icon: \"approved\", order: 1, color: \"var(--c-status-approved)\" },\n  { value: 2, text: \"Blocked\", key: \"blocked\", icon: \"blocked\", order: 2, color: \"var(--c-status-blocked)\" },\n];\n</script>\n\n<div style=\"display: grid; gap: var(--sp-2); justify-items: start;\">\n  <Status bind:value {items} editable />\n  <p style=\"margin: 0; font-size: var(--fs-sm);\">\n    Текущее значение: {items.find((item) => item.value === value)?.text}\n  </p>\n</div>\n"
        },
        {
          "id": "Icons",
          "name": "Иконка",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport Status from \"$lib/ui/Status.svelte\";\n\nconst items = [\n  { value: 0, text: \"Moderated\", key: \"moderated\", icon: \"moderated\", order: 0, color: \"var(--c-status-moderated)\" },\n  { value: 1, text: \"Approved\", key: \"approved\", icon: \"approved\", order: 1, color: \"var(--c-status-approved)\" },\n  { value: 2, text: \"Blocked\", key: \"blocked\", icon: \"blocked\", order: 2, color: \"var(--c-status-blocked)\" },\n];\n</script>\n\n<Status value={1} {items} minimal />\n<Status value={2} {items} icon />\n"
        }
      ]
    },
    {
      "id": "tag",
      "name": "Tag",
      "examples": [
        {
          "id": "Sizes",
          "name": "Размеры",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport Tag from \"$lib/ui/Tag.svelte\";\n</script>\n\n<Tag size=\"sm\">small</Tag>\n<Tag>medium</Tag>\n<Tag size=\"lg\">large</Tag>\n"
        },
        {
          "id": "Prefix",
          "name": "С префиксом",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport TagGlyph from \"phosphor-svelte/lib/Tag\";\nimport Tag from \"$lib/ui/Tag.svelte\";\n</script>\n\n<Tag>\n  CPI\n  {#snippet additional()}metric{/snippet}\n</Tag>\n\n<Tag>\n  Campaign\n  {#snippet leading()}<TagGlyph />{/snippet}\n</Tag>\n\n<Tag>\n  Retention\n  {#snippet additional()}cohort{/snippet}\n  {#snippet leading()}<TagGlyph />{/snippet}\n</Tag>\n"
        },
        {
          "id": "Removable",
          "name": "Удаляемые",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport Tag from \"$lib/ui/Tag.svelte\";\n\nlet tags = $state([\"retargeting\", \"lookalike\", \"brand\"]);\n\nfunction removeTag(tag) {\n  tags = tags.filter((item) => item !== tag);\n}\n</script>\n\n{#each tags as tag (tag)}\n  <Tag clearable onremove={() => removeTag(tag)}>{tag}</Tag>\n{/each}\n"
        },
        {
          "id": "Select",
          "name": "Выбор",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport Tag from \"$lib/ui/Tag.svelte\";\n\nlet selected = $state(\"growth\");\n</script>\n\n{#each [\"growth\", \"retention\", \"revenue\"] as tag}\n  <Tag selectable selected={selected === tag} onclick={() => (selected = tag)}>\n    {tag}\n  </Tag>\n{/each}\n"
        },
        {
          "id": "Mark",
          "name": "Mark",
          "description": "",
          "language": "svelte",
          "source": "<script>\nimport Tag from \"$lib/ui/Tag.svelte\";\n</script>\n\n<Tag mark>frozen</Tag>\n\n<Tag mark>\n  rule\n  {#snippet additional()}id{/snippet}\n</Tag>\n"
        }
      ]
    }
  ]
}