diff --git a/.gitignore b/.gitignore
index e535eb88..1f6be103 100644
--- a/.gitignore
+++ b/.gitignore
@@ -59,3 +59,4 @@ src/assets/components/themes
 .playwright-mcp/*
 
 .claude/*
+.worktrees/
diff --git a/docs/superpowers/plans/2026-04-16-inputnumber.md b/docs/superpowers/plans/2026-04-16-inputnumber.md
deleted file mode 100644
index ab3591e0..00000000
--- a/docs/superpowers/plans/2026-04-16-inputnumber.md
+++ /dev/null
@@ -1,808 +0,0 @@
-# InputNumber Component — Implementation Plan
-
-> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
-
-**Goal:** Создать Angular wrapper-компонент InputNumber с CSS-переопределениями и Storybook-сториями.
-
-**Architecture:** Standalone CVA-компонент `InputNumberComponent`, оборачивающий PrimeNG `p-inputnumber`. CSS-оверрайды в `src/prime-preset/tokens/components/inputnumber.ts`, подключаются через `map-tokens.ts`. Четыре стории: Default (динамический template из args), FloatLabel (нативный `p-inputnumber` внутри `p-floatlabel`), Currency, MinMax.
-
-**Tech Stack:** Angular 20, PrimeNG 20, Storybook 8, Tailwind, `dt()` токены, Tabler Icons.
-
----
-
-## File Map
-
-| Действие | Путь |
-|---|---|
-| Создать | `src/lib/components/inputnumber/inputnumber.component.ts` |
-| Создать | `src/prime-preset/tokens/components/inputnumber.ts` |
-| Изменить | `src/prime-preset/map-tokens.ts` |
-| Создать | `src/stories/components/inputnumber/inputnumber.stories.ts` |
-| Создать | `src/stories/components/inputnumber/examples/inputnumber-float-label.component.ts` |
-| Создать | `src/stories/components/inputnumber/examples/inputnumber-currency.component.ts` |
-| Создать | `src/stories/components/inputnumber/examples/inputnumber-minmax.component.ts` |
-
----
-
-### Task 1: CSS-переопределения InputNumber
-
-**Files:**
-- Create: `src/prime-preset/tokens/components/inputnumber.ts`
-- Modify: `src/prime-preset/map-tokens.ts`
-
-- [ ] **Step 1: Создать файл CSS-токенов**
-
-Создать `src/prime-preset/tokens/components/inputnumber.ts`:
-
-```typescript
-export const inputnumberCss = ({ dt }: { dt: (token: string) => string }): string => `
-
-/* ─── Кнопки +/− ─── */
-.p-inputnumber-button {
-  border-width: ${dt('inputnumber.extend.borderWidth')};
-}
-
-.p-inputnumber-horizontal .p-inputnumber-button {
-  min-height: ${dt('inputnumber.extend.extButton.height')};
-}
-
-/* ─── Disabled состояние кнопок ─── */
-.p-inputnumber-horizontal:has(.p-inputnumber-input:disabled) .p-inputnumber-button {
-  background: ${dt('inputtext.root.disabledBackground')};
-  color: ${dt('inputtext.root.disabledColor')};
-}
-
-/* ─── Extra Large ─── */
-.p-inputnumber.p-inputnumber-xlg .p-inputnumber-input {
-  font-size: ${dt('inputtext.extend.extXlg.fontSize')};
-  padding: ${dt('inputtext.extend.extXlg.paddingY')} ${dt('inputtext.extend.extXlg.paddingX')};
-}
-`;
-```
-
-- [ ] **Step 2: Зарегистрировать CSS в map-tokens.ts**
-
-Открыть `src/prime-preset/map-tokens.ts`. Добавить импорт после строки с `inputtextCss`:
-
-```typescript
-import { inputnumberCss } from './tokens/components/inputnumber';
-```
-
-Добавить запись в объект `components` после блока `inputtext`:
-
-```typescript
-inputnumber: {
-  ...(tokens.components.inputnumber as unknown as ComponentsDesignTokens['inputnumber']),
-  css: inputnumberCss,
-},
-```
-
-- [ ] **Step 3: Проверить компиляцию**
-
-```bash
-cd /Users/d.khaliulin/Downloads/angular-ui-kit-feature-styles-debug
-npx tsc --noEmit
-```
-
-Ожидается: нет ошибок.
-
-- [ ] **Step 4: Коммит**
-
-```bash
-git add src/prime-preset/tokens/components/inputnumber.ts src/prime-preset/map-tokens.ts
-git commit -m "feat(inputnumber): добавить CSS-переопределения токенов"
-```
-
----
-
-### Task 2: InputNumberComponent
-
-**Files:**
-- Create: `src/lib/components/inputnumber/inputnumber.component.ts`
-
-- [ ] **Step 1: Создать компонент**
-
-Создать `src/lib/components/inputnumber/inputnumber.component.ts`:
-
-```typescript
-import { Component, Input, forwardRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { NgClass } from '@angular/common';
-import { InputNumber } from 'primeng/inputnumber';
-
-export type InputNumberSize = 'small' | 'base' | 'large' | 'xlarge';
-export type InputNumberButtonLayout = 'horizontal' | 'vertical' | 'stacked';
-export type InputNumberMode = 'decimal' | 'currency';
-
-@Component({
-  selector: 'input-number',
-  standalone: true,
-  imports: [InputNumber, NgClass, FormsModule],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => InputNumberComponent),
-      multi: true,
-    },
-  ],
-  template: `
-    <p-inputnumber
-      [ngClass]="sizeClass"
-      [size]="primeSize"
-      [disabled]="disabled"
-      [readonly]="readonly"
-      [invalid]="invalid"
-      [placeholder]="placeholder"
-      [fluid]="fluid"
-      [showButtons]="showButtons"
-      [buttonLayout]="buttonLayout"
-      [mode]="mode"
-      [currency]="mode === 'currency' ? currency : undefined"
-      [locale]="locale"
-      [prefix]="prefix"
-      [suffix]="suffix"
-      [min]="min"
-      [max]="max"
-      [step]="step"
-      [minFractionDigits]="minFractionDigits"
-      [maxFractionDigits]="maxFractionDigits"
-      incrementButtonIcon="ti ti-plus"
-      decrementButtonIcon="ti ti-minus"
-      [(ngModel)]="modelValue"
-      (onInput)="onInputChange($event)"
-      (onBlur)="onTouched()"
-    ></p-inputnumber>
-  `,
-})
-export class InputNumberComponent implements ControlValueAccessor {
-  @Input() size: InputNumberSize = 'base';
-  @Input() placeholder = '';
-  @Input() disabled = false;
-  @Input() readonly = false;
-  @Input() invalid = false;
-  @Input() showButtons = true;
-  @Input() buttonLayout: InputNumberButtonLayout = 'horizontal';
-  @Input() mode: InputNumberMode = 'decimal';
-  @Input() currency = 'RUB';
-  @Input() locale = 'ru-RU';
-  @Input() prefix: string | undefined = undefined;
-  @Input() suffix: string | undefined = undefined;
-  @Input() min: number | undefined = undefined;
-  @Input() max: number | undefined = undefined;
-  @Input() step = 1;
-  @Input() minFractionDigits = 0;
-  @Input() maxFractionDigits = 20;
-  @Input() fluid = false;
-
-  modelValue: number | null = null;
-
-  private _onChange: (value: number | null) => void = () => {};
-  onTouched: () => void = () => {};
-
-  get primeSize(): 'small' | 'large' | undefined {
-    if (this.size === 'small') return 'small';
-    if (this.size === 'large' || this.size === 'xlarge') return 'large';
-    return undefined;
-  }
-
-  get sizeClass(): Record<string, boolean> {
-    return { 'p-inputnumber-xlg': this.size === 'xlarge' };
-  }
-
-  onInputChange(event: { value: number | null | undefined }): void {
-    const value = event.value ?? null;
-    this.modelValue = value;
-    this._onChange(value);
-  }
-
-  writeValue(value: number | null): void {
-    this.modelValue = value ?? null;
-  }
-
-  registerOnChange(fn: (value: number | null) => void): void {
-    this._onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-}
-```
-
-- [ ] **Step 2: Проверить компиляцию**
-
-```bash
-npx tsc --noEmit
-```
-
-Ожидается: нет ошибок.
-
-- [ ] **Step 3: Коммит**
-
-```bash
-git add src/lib/components/inputnumber/inputnumber.component.ts
-git commit -m "feat(inputnumber): добавить компонент InputNumberComponent"
-```
-
----
-
-### Task 3: FloatLabel story
-
-**Files:**
-- Create: `src/stories/components/inputnumber/examples/inputnumber-float-label.component.ts`
-
-- [ ] **Step 1: Создать файл**
-
-Создать `src/stories/components/inputnumber/examples/inputnumber-float-label.component.ts`:
-
-```typescript
-import { Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { StoryObj } from '@storybook/angular';
-import { InputNumber } from 'primeng/inputnumber';
-import { FloatLabel } from 'primeng/floatlabel';
-
-const template = `
-<div class="pt-6 w-64">
-  <p-floatlabel variant="in">
-    <p-inputnumber
-      id="fl-number"
-      [(ngModel)]="value"
-      [showButtons]="true"
-      buttonLayout="horizontal"
-      incrementButtonIcon="ti ti-plus"
-      decrementButtonIcon="ti ti-minus"
-    ></p-inputnumber>
-    <label for="fl-number">Число</label>
-  </p-floatlabel>
-</div>
-`;
-const styles = '';
-
-@Component({
-  selector: 'app-inputnumber-float-label',
-  standalone: true,
-  imports: [InputNumber, FloatLabel, FormsModule],
-  template,
-  styles,
-})
-export class InputNumberFloatLabelComponent {
-  value: number | null = null;
-}
-
-export const FloatLabelStory: StoryObj = {
-  name: 'FloatLabel',
-  render: () => ({
-    template: `<app-inputnumber-float-label></app-inputnumber-float-label>`,
-  }),
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          'Интеграция с `p-floatlabel` — плавающая метка внутри поля. Требует нативный `p-inputnumber` как прямой дочерний элемент `p-floatlabel`.',
-      },
-      source: {
-        language: 'ts',
-        code: `
-import { Component } from '@angular/core';
-import { InputNumber } from 'primeng/inputnumber';
-import { FloatLabel } from 'primeng/floatlabel';
-import { FormsModule } from '@angular/forms';
-
-@Component({
-  selector: 'app-inputnumber-float-label',
-  standalone: true,
-  imports: [InputNumber, FloatLabel, FormsModule],
-  template: \`
-    <p-floatlabel variant="in">
-      <p-inputnumber
-        id="fl-number"
-        [(ngModel)]="value"
-        [showButtons]="true"
-        buttonLayout="horizontal"
-        incrementButtonIcon="ti ti-plus"
-        decrementButtonIcon="ti ti-minus"
-      ></p-inputnumber>
-      <label for="fl-number">Число</label>
-    </p-floatlabel>
-  \`,
-})
-export class InputNumberFloatLabelComponent {
-  value: number | null = null;
-}
-        `,
-      },
-    },
-  },
-};
-```
-
-- [ ] **Step 2: Проверить компиляцию**
-
-```bash
-npx tsc --noEmit
-```
-
-Ожидается: нет ошибок.
-
----
-
-### Task 4: Currency story
-
-**Files:**
-- Create: `src/stories/components/inputnumber/examples/inputnumber-currency.component.ts`
-
-- [ ] **Step 1: Создать файл**
-
-Создать `src/stories/components/inputnumber/examples/inputnumber-currency.component.ts`:
-
-```typescript
-import { StoryObj } from '@storybook/angular';
-import { InputNumberComponent } from '../../../../lib/components/inputnumber/inputnumber.component';
-
-type Story = StoryObj<InputNumberComponent>;
-
-export const Currency: Story = {
-  name: 'Currency',
-  render: (args) => ({
-    props: { ...args, value: null },
-    template: `
-      <input-number
-        [size]="size"
-        [disabled]="disabled"
-        [readonly]="readonly"
-        [invalid]="invalid"
-        [fluid]="fluid"
-        [placeholder]="placeholder"
-        [showButtons]="showButtons"
-        [buttonLayout]="buttonLayout"
-        [mode]="mode"
-        [currency]="currency"
-        [locale]="locale"
-        [step]="step"
-        [minFractionDigits]="minFractionDigits"
-        [maxFractionDigits]="maxFractionDigits"
-        [(ngModel)]="value"
-      ></input-number>
-    `,
-  }),
-  args: {
-    mode: 'currency',
-    currency: 'RUB',
-    locale: 'ru-RU',
-    minFractionDigits: 2,
-    maxFractionDigits: 2,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Режим валюты — форматирует значение с символом валюты по заданной локали.',
-      },
-      source: {
-        language: 'ts',
-        code: `
-import { InputNumberComponent } from '@cdek-it/angular-ui-kit';
-import { FormsModule } from '@angular/forms';
-
-// template:
-// <input-number mode="currency" currency="RUB" locale="ru-RU" [(ngModel)]="value"></input-number>
-        `,
-      },
-    },
-  },
-};
-```
-
----
-
-### Task 5: MinMax story
-
-**Files:**
-- Create: `src/stories/components/inputnumber/examples/inputnumber-minmax.component.ts`
-
-- [ ] **Step 1: Создать файл**
-
-Создать `src/stories/components/inputnumber/examples/inputnumber-minmax.component.ts`:
-
-```typescript
-import { StoryObj } from '@storybook/angular';
-import { InputNumberComponent } from '../../../../lib/components/inputnumber/inputnumber.component';
-
-type Story = StoryObj<InputNumberComponent>;
-
-export const MinMax: Story = {
-  name: 'Min / Max / Step',
-  render: (args) => ({
-    props: { ...args, value: null },
-    template: `
-      <input-number
-        [size]="size"
-        [disabled]="disabled"
-        [readonly]="readonly"
-        [invalid]="invalid"
-        [fluid]="fluid"
-        [placeholder]="placeholder"
-        [showButtons]="showButtons"
-        [buttonLayout]="buttonLayout"
-        [min]="min"
-        [max]="max"
-        [step]="step"
-        [(ngModel)]="value"
-      ></input-number>
-    `,
-  }),
-  args: {
-    min: 0,
-    max: 100,
-    step: 1,
-    placeholder: '0–100',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Ограничения min/max и шаг изменения через кнопки и клавиатуру.',
-      },
-      source: {
-        language: 'ts',
-        code: `
-import { InputNumberComponent } from '@cdek-it/angular-ui-kit';
-import { FormsModule } from '@angular/forms';
-
-// template:
-// <input-number [min]="0" [max]="100" [step]="1" [(ngModel)]="value"></input-number>
-        `,
-      },
-    },
-  },
-};
-```
-
----
-
-### Task 6: Main stories file
-
-**Files:**
-- Create: `src/stories/components/inputnumber/inputnumber.stories.ts`
-
-- [ ] **Step 1: Создать файл**
-
-Создать `src/stories/components/inputnumber/inputnumber.stories.ts`:
-
-```typescript
-import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
-import { FormsModule } from '@angular/forms';
-import { InputNumberComponent } from '../../../lib/components/inputnumber/inputnumber.component';
-import { InputNumberFloatLabelComponent, FloatLabelStory } from './examples/inputnumber-float-label.component';
-import { Currency } from './examples/inputnumber-currency.component';
-import { MinMax } from './examples/inputnumber-minmax.component';
-
-type InputNumberArgs = InputNumberComponent;
-
-const meta: Meta<InputNumberArgs> = {
-  title: 'Components/Form/InputNumber',
-  component: InputNumberComponent,
-  tags: ['autodocs'],
-  decorators: [
-    moduleMetadata({
-      imports: [
-        InputNumberComponent,
-        FormsModule,
-        InputNumberFloatLabelComponent,
-      ],
-    }),
-  ],
-  parameters: {
-    designTokens: { prefix: '--p-inputnumber' },
-    docs: {
-      description: {
-        component: `Числовое поле ввода с поддержкой форматирования и кнопок +/−.
-
-\`\`\`typescript
-import { InputNumberComponent } from '@cdek-it/angular-ui-kit';
-\`\`\``,
-      },
-    },
-  },
-  argTypes: {
-    // ── Props ────────────────────────────────────────────────
-    size: {
-      control: 'select',
-      options: ['small', 'base', 'large', 'xlarge'],
-      description: 'Размер поля',
-      table: {
-        category: 'Props',
-        defaultValue: { summary: "'base'" },
-        type: { summary: "'small' | 'base' | 'large' | 'xlarge'" },
-      },
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Подсказка при пустом поле',
-      table: {
-        category: 'Props',
-        defaultValue: { summary: "''" },
-        type: { summary: 'string' },
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Отключает взаимодействие',
-      table: {
-        category: 'Props',
-        defaultValue: { summary: 'false' },
-        type: { summary: 'boolean' },
-      },
-    },
-    readonly: {
-      control: 'boolean',
-      description: 'Только для чтения',
-      table: {
-        category: 'Props',
-        defaultValue: { summary: 'false' },
-        type: { summary: 'boolean' },
-      },
-    },
-    invalid: {
-      control: 'boolean',
-      description: 'Невалидное состояние',
-      table: {
-        category: 'Props',
-        defaultValue: { summary: 'false' },
-        type: { summary: 'boolean' },
-      },
-    },
-    showButtons: {
-      control: 'boolean',
-      description: 'Показывать кнопки +/−',
-      table: {
-        category: 'Props',
-        defaultValue: { summary: 'true' },
-        type: { summary: 'boolean' },
-      },
-    },
-    buttonLayout: {
-      control: 'select',
-      options: ['horizontal', 'vertical', 'stacked'],
-      description: 'Расположение кнопок',
-      table: {
-        category: 'Props',
-        defaultValue: { summary: "'horizontal'" },
-        type: { summary: "'horizontal' | 'vertical' | 'stacked'" },
-      },
-    },
-    mode: {
-      control: 'select',
-      options: ['decimal', 'currency'],
-      description: 'Режим отображения значения',
-      table: {
-        category: 'Props',
-        defaultValue: { summary: "'decimal'" },
-        type: { summary: "'decimal' | 'currency'" },
-      },
-    },
-    currency: {
-      control: 'text',
-      description: 'Код валюты ISO 4217, используется при mode="currency"',
-      table: {
-        category: 'Props',
-        defaultValue: { summary: "'RUB'" },
-        type: { summary: 'string' },
-      },
-    },
-    locale: {
-      control: 'text',
-      description: 'Локаль для форматирования числа',
-      table: {
-        category: 'Props',
-        defaultValue: { summary: "'ru-RU'" },
-        type: { summary: 'string' },
-      },
-    },
-    prefix: {
-      control: 'text',
-      description: 'Префикс перед значением',
-      table: {
-        category: 'Props',
-        type: { summary: 'string' },
-      },
-    },
-    suffix: {
-      control: 'text',
-      description: 'Суффикс после значения (например, "%")',
-      table: {
-        category: 'Props',
-        type: { summary: 'string' },
-      },
-    },
-    min: {
-      control: 'number',
-      description: 'Минимально допустимое значение',
-      table: {
-        category: 'Props',
-        type: { summary: 'number' },
-      },
-    },
-    max: {
-      control: 'number',
-      description: 'Максимально допустимое значение',
-      table: {
-        category: 'Props',
-        type: { summary: 'number' },
-      },
-    },
-    step: {
-      control: 'number',
-      description: 'Шаг изменения значения',
-      table: {
-        category: 'Props',
-        defaultValue: { summary: '1' },
-        type: { summary: 'number' },
-      },
-    },
-    minFractionDigits: {
-      control: { type: 'number', min: 0, max: 20 },
-      description: 'Минимальное количество знаков после запятой',
-      table: {
-        category: 'Props',
-        defaultValue: { summary: '0' },
-        type: { summary: 'number' },
-      },
-    },
-    maxFractionDigits: {
-      control: { type: 'number', min: 0, max: 20 },
-      description: 'Максимальное количество знаков после запятой',
-      table: {
-        category: 'Props',
-        defaultValue: { summary: '20' },
-        type: { summary: 'number' },
-      },
-    },
-    fluid: {
-      control: 'boolean',
-      description: 'Растягивает поле на всю ширину контейнера',
-      table: {
-        category: 'Props',
-        defaultValue: { summary: 'false' },
-        type: { summary: 'boolean' },
-      },
-    },
-    // Hidden computed props
-    modelValue: { table: { disable: true } },
-    primeSize: { table: { disable: true } },
-    sizeClass: { table: { disable: true } },
-  },
-  args: {
-    size: 'base',
-    placeholder: '0',
-    disabled: false,
-    readonly: false,
-    invalid: false,
-    showButtons: true,
-    buttonLayout: 'horizontal',
-    mode: 'decimal',
-    currency: 'RUB',
-    locale: 'ru-RU',
-    step: 1,
-    minFractionDigits: 0,
-    maxFractionDigits: 20,
-    fluid: false,
-  },
-};
-
-export default meta;
-type Story = StoryObj<InputNumberArgs>;
-
-// ── Default ──────────────────────────────────────────────────────────────────
-export const Default: Story = {
-  name: 'Default',
-  render: (args) => {
-    const parts: string[] = [];
-
-    if (args.size && args.size !== 'base') parts.push(`size="${args.size}"`);
-    if (args.placeholder) parts.push(`placeholder="${args.placeholder}"`);
-    if (args.disabled) parts.push(`[disabled]="true"`);
-    if (args.readonly) parts.push(`[readonly]="true"`);
-    if (args.invalid) parts.push(`[invalid]="true"`);
-    if (!args.showButtons) parts.push(`[showButtons]="false"`);
-    if (args.buttonLayout && args.buttonLayout !== 'horizontal') parts.push(`buttonLayout="${args.buttonLayout}"`);
-    if (args.mode && args.mode !== 'decimal') parts.push(`mode="${args.mode}"`);
-    if (args.mode === 'currency' && args.currency) parts.push(`currency="${args.currency}"`);
-    if (args.locale && args.locale !== 'ru-RU') parts.push(`locale="${args.locale}"`);
-    if (args.prefix) parts.push(`prefix="${args.prefix}"`);
-    if (args.suffix) parts.push(`suffix="${args.suffix}"`);
-    if (args.min !== undefined) parts.push(`[min]="${args.min}"`);
-    if (args.max !== undefined) parts.push(`[max]="${args.max}"`);
-    if (args.step && args.step !== 1) parts.push(`[step]="${args.step}"`);
-    if (args.minFractionDigits) parts.push(`[minFractionDigits]="${args.minFractionDigits}"`);
-    if (args.maxFractionDigits && args.maxFractionDigits !== 20) parts.push(`[maxFractionDigits]="${args.maxFractionDigits}"`);
-    if (args.fluid) parts.push(`[fluid]="true"`);
-    parts.push(`[(ngModel)]="value"`);
-
-    const template = `<input-number\n  ${parts.join('\n  ')}\n></input-number>`;
-
-    return { props: { ...args, value: null }, template };
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Базовый пример компонента. Используйте Controls для интерактивного изменения пропсов.',
-      },
-    },
-  },
-};
-
-// ── Re-exports from example components ────────────────────────────────────
-export { FloatLabelStory as FloatLabel, Currency, MinMax };
-```
-
-- [ ] **Step 2: Проверить компиляцию**
-
-```bash
-npx tsc --noEmit
-```
-
-Ожидается: нет ошибок.
-
-- [ ] **Step 3: Коммит**
-
-```bash
-git add src/stories/components/inputnumber/
-git commit -m "feat(inputnumber): добавить Storybook-стории"
-```
-
----
-
-### Task 7: Финальная проверка
-
-- [ ] **Step 1: Полная проверка TypeScript**
-
-```bash
-npx tsc --noEmit
-```
-
-Ожидается: нет ошибок.
-
-- [ ] **Step 2: Запустить Storybook и проверить визуально**
-
-```bash
-npm run storybook
-```
-
-Открыть `http://localhost:6006` и проверить:
-- `Components/Form/InputNumber` → Default: Controls меняют пропсы, code-snippet обновляется
-- FloatLabel: метка анимируется при фокусе/вводе
-- Currency: значение форматируется с символом ₽
-- Min/Max: кнопки не выходят за диапазон 0–100
-
-- [ ] **Step 3: Финальный коммит**
-
-```bash
-git add -A
-git commit -m "feat(inputnumber): компонент InputNumber готов"
-```
-
----
-
-## Self-Review
-
-**Spec coverage:**
-- ✅ Компонент с CVA — Task 2
-- ✅ Все 18 пропсов — Task 2 (InputNumberComponent)
-- ✅ Size mapping (primeSize + p-inputnumber-xlg) — Task 2
-- ✅ Tabler Icons через `incrementButtonIcon` / `decrementButtonIcon` — Task 2
-- ✅ CSS overrides (border, height, disabled, xlarge) — Task 1
-- ✅ map-tokens регистрация — Task 1
-- ✅ Default story с динамическим template — Task 6
-- ✅ FloatLabel story (нативный p-inputnumber) — Task 3
-- ✅ Currency story — Task 4
-- ✅ MinMax story — Task 5
-- ✅ modelValue / primeSize / sizeClass скрыты в argTypes — Task 6
-
-**Placeholder scan:** нет TBD/TODO.
-
-**Type consistency:** `InputNumberSize`, `InputNumberButtonLayout`, `InputNumberMode` определены в Task 2 и используются в `argTypes` Task 6 через строковые литералы — согласованы.
diff --git a/docs/superpowers/plans/2026-06-22-figma-code-connect-static.md b/docs/superpowers/plans/2026-06-22-figma-code-connect-static.md
new file mode 100644
index 00000000..f15edce2
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-22-figma-code-connect-static.md
@@ -0,0 +1,370 @@
+# Static Figma Code Connect — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Создать статический файловый аналог Figma Code Connect для `@cdek-it/angular-ui-kit`, дающий LLM контракт Figma↔код без рантайма CLI.
+
+**Architecture:** Колокация `<name>.figma.md` рядом с каждым компонентом + глобальные артефакты в `src/lib/figma-code-connect/`. Формат — Markdown с YAML frontmatter и жёстким порядком секций. Lookup по Figma `nodeId` через `grep` без отдельного индекса. Валидация структуры — Node-скриптом перед коммитом.
+
+**Tech Stack:** Angular 20, PrimeNG, Markdown, YAML, Node ≥18 (для validator), `js-yaml` (единственная новая dev-зависимость).
+
+## Global Constraints
+
+- Все пути относительно корня проекта.
+- Один кодовый компонент = ровно один `<name>.figma.md` файл; варианты — секциями внутри.
+- Глобалы лежат в `src/lib/figma-code-connect/`; индивидуальные `.figma.md` ссылаются на них через относительные ссылки.
+- Frontmatter — YAML; обязательные поля: `component`, `selector`, `import.symbol`, `import.from`, `figma.fileKey`, `figma.nodeId`, `figma.componentKey`, `figma.name`, `status`, `updated`.
+- Жёсткий порядок секций тела: `## Overview` → `## Props mapping` → `## Variants` → `## Slots` → `## Related` → `## Do / Don't`.
+- Все code-fence обязаны иметь язык (`html`, `ts`, `scss`).
+- Никаких inline-значений токенов/иконок — только ссылки на `tokens.md` / `icons.md`.
+- Figma fileKey — per-component: берётся из Figma MCP для каждого компонента и может различаться (linked libraries). Базовый файл-точка-входа: `Khh7arsuXss3ncqy1Dz3OZ` (UI Kit v2.0); компоненты могут жить в связанных файлах библиотек. nodeId/componentKey пилотов вытаскивать через Figma MCP. Если MCP недоступен — `fileKey/nodeId/componentKey: null`, `status: orphan-code`.
+- Дата `updated:` во всех файлах = `2026-06-22`.
+- Никаких рантайм-зависимостей. validator — devDependency `js-yaml`.
+- Не модифицировать `.env`, `angular.json`, существующие `*.component.ts`. Создаём только новые файлы.
+
+---
+
+### Task 1: Validator-скрипт (контракт формата)
+
+**Files:**
+- Create: `scripts/figma-code-connect/validate.mjs`
+- Create: `scripts/figma-code-connect/__fixtures__/valid.figma.md`
+- Create: `scripts/figma-code-connect/__fixtures__/invalid-missing-frontmatter.figma.md`
+- Create: `scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md`
+- Create: `scripts/figma-code-connect/validate.test.mjs`
+- Modify: `package.json` — добавить script `"validate:figma-cc": "node scripts/figma-code-connect/validate.mjs"` и devDependency `"js-yaml": "^4.1.0"`.
+
+**Interfaces:**
+- Consumes: ничего.
+- Produces: CLI `node scripts/figma-code-connect/validate.mjs [path...]` — без аргументов сканирует `src/lib/**/*.figma.md`; с аргументами валидирует переданные файлы. Exit 0 = OK, 1 = errors; ошибки в stderr строкой `<file>: <message>`. Экспорт `validateFile(path): Promise<string[]>`.
+
+**Steps:**
+
+- [ ] **Step 1: Создать fixture валидного файла** `scripts/figma-code-connect/__fixtures__/valid.figma.md`:
+
+```
+---
+component: extra-fixture
+selector: extra-fixture
+import:
+  symbol: ExtraFixtureComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: TESTKEY
+  nodeId: '1:2'
+  componentKey: stable-key
+  name: 'Fixture'
+status: stable
+updated: 2026-06-22
+---
+
+## Overview
+Тестовый компонент.
+
+## Props mapping
+| Figma | Angular | Type | Notes |
+|-------|---------|------|-------|
+| Size  | size    | 'sm' | |
+
+## Variants
+### Default
+Figma nodeId: `1:3`
+
+```html
+<extra-fixture size="sm" />
+```
+
+## Slots
+Нет.
+
+## Related
+Нет.
+
+## Do / Don't
+- ✅ ОК.
+- ❌ Не ОК.
+```
+
+- [ ] **Step 2: Fixture с пропущенным frontmatter** `scripts/figma-code-connect/__fixtures__/invalid-missing-frontmatter.figma.md`:
+
+```
+## Overview
+Нет frontmatter.
+```
+
+- [ ] **Step 3: Fixture с нарушенным порядком секций** `scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md` — копия валидного, но `## Variants` стоит перед `## Props mapping`.
+
+- [ ] **Step 4: Тест `validate.test.mjs`** (запустить до реализации — должен упасть):
+
+```javascript
+import { strict as assert } from 'node:assert';
+import { test } from 'node:test';
+import { validateFile } from './validate.mjs';
+
+test('valid fixture passes', async () => {
+  const errors = await validateFile('scripts/figma-code-connect/__fixtures__/valid.figma.md');
+  assert.deepEqual(errors, []);
+});
+
+test('missing frontmatter fails', async () => {
+  const errors = await validateFile('scripts/figma-code-connect/__fixtures__/invalid-missing-frontmatter.figma.md');
+  assert.ok(errors.some(e => /frontmatter/i.test(e)));
+});
+
+test('wrong section order fails', async () => {
+  const errors = await validateFile('scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md');
+  assert.ok(errors.some(e => /order/i.test(e)));
+});
+```
+
+- [ ] **Step 5: Запустить тест — ожидать FAIL** `node --test scripts/figma-code-connect/validate.test.mjs` → fail (нет validate.mjs).
+
+- [ ] **Step 6: Реализовать `scripts/figma-code-connect/validate.mjs`**:
+
+```javascript
+import { readFile } from 'node:fs/promises';
+import yaml from 'js-yaml';
+
+const REQUIRED_FIELDS = ['component', 'selector', 'import', 'figma', 'status', 'updated'];
+const REQUIRED_FIGMA = ['fileKey', 'nodeId', 'componentKey', 'name'];
+const SECTION_ORDER = ['## Overview', '## Props mapping', '## Variants', '## Slots', '## Related', "## Do / Don't"];
+
+export async function validateFile(path) {
+  const errors = [];
+  const raw = await readFile(path, 'utf8');
+  const m = raw.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/);
+  if (!m) { errors.push(`${path}: missing frontmatter`); return errors; }
+  let fm;
+  try { fm = yaml.load(m[1]); }
+  catch (e) { errors.push(`${path}: invalid YAML: ${e.message}`); return errors; }
+  for (const f of REQUIRED_FIELDS) if (!(f in fm)) errors.push(`${path}: missing field ${f}`);
+  if (fm.figma) for (const f of REQUIRED_FIGMA) if (!(f in fm.figma)) errors.push(`${path}: missing figma.${f}`);
+  const body = m[2];
+  const positions = SECTION_ORDER.map(s => body.indexOf(`\n${s}`));
+  const present = positions.map((p, i) => [p, i]).filter(([p]) => p !== -1);
+  for (let i = 1; i < present.length; i++) {
+    if (present[i][0] < present[i-1][0]) {
+      errors.push(`${path}: section order violation near ${SECTION_ORDER[present[i][1]]}`);
+      break;
+    }
+  }
+  for (const f of [...body.matchAll(/^```(\w*)$/gm)])
+    if (!f[1]) errors.push(`${path}: code-fence without language`);
+  return errors;
+}
+
+if (import.meta.url === `file://${process.argv[1]}`) {
+  const args = process.argv.slice(2);
+  let files;
+  if (args.length) files = args;
+  else {
+    const { glob } = await import('node:fs/promises');
+    files = [];
+    for await (const p of glob('src/lib/**/*.figma.md')) files.push(p);
+  }
+  let total = 0;
+  for (const f of files) {
+    const errs = await validateFile(f);
+    for (const e of errs) console.error(e);
+    total += errs.length;
+  }
+  process.exit(total === 0 ? 0 : 1);
+}
+```
+
+- [ ] **Step 7: Запустить тест — PASS** `node --test scripts/figma-code-connect/validate.test.mjs`.
+
+- [ ] **Step 8: Обновить `package.json`** — добавить в `scripts`: `"validate:figma-cc": "node scripts/figma-code-connect/validate.mjs"`; в `devDependencies`: `"js-yaml": "^4.1.0"`; запустить `npm install`.
+
+- [ ] **Step 9: CLI smoke** — `node scripts/figma-code-connect/validate.mjs scripts/figma-code-connect/__fixtures__/valid.figma.md` → exit 0; на `invalid-missing-frontmatter.figma.md` → exit 1 + stderr.
+
+- [ ] **Step 10: Commit** `git add scripts/figma-code-connect/ package.json package-lock.json && git commit -m "feat(figma-cc): add validator and fixtures"`.
+
+---
+
+### Task 2: schema.md + README.md
+
+**Files:**
+- Create: `src/lib/figma-code-connect/schema.md`
+- Create: `src/lib/figma-code-connect/README.md`
+
+**Interfaces:**
+- Consumes: validator из Task 1.
+- Produces: ссылочные документы для Tasks 3–7.
+
+**Steps:**
+
+- [ ] **Step 1: Написать `schema.md`** с полной спецификацией:
+  - Перечень обязательных полей frontmatter (`component`, `selector`, `import.{symbol,from}`, `figma.{fileKey,nodeId,componentKey,name}`, `status`, `updated`).
+  - Опциональные: `deprecated.{replaceWith,since,reason}`.
+  - Фиксированный порядок секций тела (6 пунктов из Global Constraints).
+  - Правила: code-fence с языком; никаких inline-значений токенов/иконок; ссылки на `tokens.md` / `icons.md`.
+
+- [ ] **Step 2: Написать `README.md`** — точка входа: краткое описание, ссылки на schema/conventions/tokens/icons/missing, инструкция «как агент использует» (grep по nodeId), команда валидации `npm run validate:figma-cc`.
+
+- [ ] **Step 3: Прогнать validator** `npm run validate:figma-cc` → exit 0 (validator сканирует только `src/lib/**/*.figma.md`, глобалы в `src/lib/figma-code-connect/*.md` не валидируются).
+
+- [ ] **Step 4: Commit** `git add src/lib/figma-code-connect/schema.md src/lib/figma-code-connect/README.md && git commit -m "feat(figma-cc): add schema and README"`.
+
+---
+
+### Task 3: conventions.md
+
+**Files:**
+- Create: `src/lib/figma-code-connect/conventions.md`
+
+**Interfaces:**
+- Consumes: ничего.
+- Produces: справочник, на который ссылается README.md и индивидуальные `.figma.md`.
+
+**Steps:**
+
+- [ ] **Step 1: Написать `conventions.md`** с разделами:
+  - **Naming**: префикс селектора `extra-`, класс `Extra<Name>Component`, импорт из `@cdek-it/angular-ui-kit`.
+  - **Figma property → Angular @Input**: `Variant=primary` → `variant="primary"`, `State=Disabled` → `[disabled]="true"`, `Size=base` → `size="base"`, boolean Figma props → `[prop]="true|false"`.
+  - **Two-way binding**: `[(visible)]`, `[(ngModel)]`.
+  - **Slots / content projection**: структурные директивы `extra<Name>Header`/`extra<Name>Footer` либо `<ng-content>`.
+  - **Red lines**: не описывать приватные компоненты; не дублировать Storybook; не описывать runtime-логику; не инлайнить токены; не создавать файлы под отдельные варианты.
+
+- [ ] **Step 2: Validator** `npm run validate:figma-cc` → exit 0.
+
+- [ ] **Step 3: Commit** `git add src/lib/figma-code-connect/conventions.md && git commit -m "feat(figma-cc): add conventions"`.
+
+---
+
+### Task 4: tokens.md + icons.md + missing.md
+
+**Files:**
+- Create: `src/lib/figma-code-connect/tokens.md`
+- Create: `src/lib/figma-code-connect/icons.md`
+- Create: `src/lib/figma-code-connect/missing.md`
+
+**Interfaces:**
+- Consumes: `src/lib/providers/prime-preset/` (текущие токены), `src/styles.scss`, опционально Figma MCP variables.
+- Produces: anchor-ссылки для индивидуальных `.figma.md`.
+
+**Steps:**
+
+- [ ] **Step 1: Собрать актуальные токены** — `grep -r --include='*.ts' 'preset' src/lib/providers/prime-preset/ | head -50`, прочитать `src/styles.scss`. Если значения недоступны — отметить «pending» и сослаться на `missing.md`.
+
+- [ ] **Step 2: Написать `tokens.md`** — разделы Colors / Spacing / Radius / Typography. Каждый — таблица или подразделы с anchor-friendly заголовками (`### color-primary`, `### spacing-base`). Минимум 1 строка в каждой таблице. Inline-значения недопустимы в `.figma.md`, но в `tokens.md` сами значения и есть контент.
+
+- [ ] **Step 3: Написать `icons.md`** — источник иконок (`primeicons` через PrimeNG); таблица `Figma layer | код | пример использования`; правила (передача строкой `'pi pi-<name>'`, цвет наследуется).
+
+- [ ] **Step 4: Написать `missing.md`** — backlog таблица `Figma name | nodeId | componentKey | заметка | статус`, изначально пустая, с пояснением «не путать с `status: orphan-code`».
+
+- [ ] **Step 5: Validator** `npm run validate:figma-cc` → exit 0.
+
+- [ ] **Step 6: Commit** `git add src/lib/figma-code-connect/tokens.md src/lib/figma-code-connect/icons.md src/lib/figma-code-connect/missing.md && git commit -m "feat(figma-cc): add tokens, icons, missing globals"`.
+
+---
+
+### Task 5: button.figma.md (пилот 1)
+
+**Files:**
+- Create: `src/lib/components/button/button.figma.md`
+- Read: `src/lib/components/button/button.component.ts`, `src/lib/components/button/public_api.ts`, `src/stories/components/button/button.stories.ts`.
+
+**Interfaces:**
+- Consumes: schema (Task 2), conventions (Task 3), tokens/icons (Task 4).
+- Produces: эталон формата для Tasks 6–7.
+
+**Steps:**
+
+- [ ] **Step 1: Получить Figma данные.** Через Figma MCP (`figma fileKey Khh7arsuXss3ncqy1Dz3OZ`) найти компонент `Button`: nodeId componentSet, componentKey, nodeId каждого variant. Если MCP недоступен — `figma.nodeId: null`, `figma.componentKey: null`, `status: orphan-code`; в `## Overview` второе предложение «Маппинг Figma в процессе синхронизации.».
+
+- [ ] **Step 2: Написать `button.figma.md`** с frontmatter (component/selector/import/figma/status/updated) и телом по schema. Покрыть варианты: Primary/Base, Secondary/Base, Outlined/Large, Text/Base, Link/Base, With icon (prefix), Icon only, Loading, Danger. Props mapping должен покрывать все `@Input` из `button.component.ts` (variant, size, severity, disabled, loading, iconPos, iconOnly, showBadge, badge, badgeSeverity, rounded, fluid, label, icon, ariaLabel). Иконку передавать строкой `'pi pi-<name>'`. Ссылка на `icons.md` обязательна.
+
+- [ ] **Step 3: Validator** `npm run validate:figma-cc` → exit 0. При ошибке — поправить frontmatter/секции.
+
+- [ ] **Step 4: Smoke lookup** (только если nodeId заполнен): `grep -rl --include='*.figma.md' "nodeId: '<один_из_nodeId>'" src/lib/components` → одна строка `src/lib/components/button/button.figma.md`.
+
+- [ ] **Step 5: Commit** `git add src/lib/components/button/button.figma.md && git commit -m "feat(figma-cc): add button.figma.md pilot"`.
+
+---
+
+### Task 6: inputtext.figma.md (пилот 2)
+
+**Files:**
+- Create: `src/lib/components/inputtext/inputtext.figma.md`
+- Read: `src/lib/components/inputtext/inputtext.component.ts`, `src/stories/components/inputtext/*.stories.ts`.
+
+**Interfaces:**
+- Consumes: schema (Task 2), conventions (Task 3).
+- Produces: пример с ControlValueAccessor (FormControl/ngModel).
+
+**Steps:**
+
+- [ ] **Step 1: Figma данные** аналогично Task 5 Step 1, имя в Figma — `Input / Text` (либо `TextField`/`Input` — найти точное).
+
+- [ ] **Step 2: Написать `inputtext.figma.md`** с frontmatter и телом. Selector `extra-input-text`, symbol `ExtraInputTextComponent`. Props: `size`, `disabled`, `readonly`, `showClear`, `fluid`, `placeholder`, value через `[(ngModel)]` / `formControl`. Варианты: Default/Base, With clear, Disabled, Fluid/Large, With reactive form. В `## Related` — `inputgroup` и `form-field`. В `## Do/Don't` — обязательность использования `[(ngModel)]`/`formControl` (компонент реализует CVA).
+
+- [ ] **Step 3: Validator** `npm run validate:figma-cc` → exit 0.
+
+- [ ] **Step 4: Commit** `git add src/lib/components/inputtext/inputtext.figma.md && git commit -m "feat(figma-cc): add inputtext.figma.md pilot"`.
+
+---
+
+### Task 7: dialog.figma.md (пилот 3)
+
+**Files:**
+- Create: `src/lib/components/dialog/dialog.figma.md`
+- Read: `src/lib/components/dialog/dialog.component.ts`, `src/stories/components/dialog/*.stories.ts`.
+
+**Interfaces:**
+- Consumes: schema (Task 2), conventions (Task 3).
+- Produces: пример композиции (dialog с button в footer) — демонстрирует `## Related` в действии.
+
+**Steps:**
+
+- [ ] **Step 1: Figma данные** аналогично Task 5 Step 1, имя `Dialog`.
+
+- [ ] **Step 2: Написать `dialog.figma.md`** с frontmatter и телом. Selector `extra-dialog`, symbol `ExtraDialogComponent`. Props: `size` (`'sm' | 'default' | 'lg' | 'xlg'`), `modal`, `header`, `dismissableMask`, `closeOnEscape`, `showHeader`, `[(visible)]`. Варианты: Default/md, Large with custom header (через `*extraDialogHeader`), With actions in footer (через `*extraDialogFooter` с `extra-button`), Non-modal. В `## Slots`: `<ng-content>`, `*extraDialogHeader`, `*extraDialogFooter`. В `## Related` — `button`, `confirm-dialog`. В `## Do/Don't` — управлять через `[(visible)]`, не `*ngIf`; не более 2 кнопок в footer; не выключать `closeOnEscape` (a11y).
+
+- [ ] **Step 3: Validator** `npm run validate:figma-cc` → exit 0.
+
+- [ ] **Step 4: Commit** `git add src/lib/components/dialog/dialog.figma.md && git commit -m "feat(figma-cc): add dialog.figma.md pilot"`.
+
+---
+
+### Task 8: Acceptance — сквозная проверка
+
+**Files:**
+- Опционально modify: `package.json` — добавить `"prebuild": "npm run validate:figma-cc"`.
+- Read: `docs/superpowers/specs/2026-06-22-figma-code-connect-static-design.md` секция 9.
+
+**Interfaces:**
+- Consumes: всё из Tasks 1–7.
+- Produces: подтверждение MVP-критериев.
+
+**Steps:**
+
+- [ ] **Step 1: Полный прогон validator** `npm run validate:figma-cc` → exit 0, без stderr.
+
+- [ ] **Step 2: Lookup smoke по каждому пилоту**:
+  - `grep -rl --include='*.figma.md' "component: extra-button" src/lib/components` → `src/lib/components/button/button.figma.md`.
+  - Аналогично для `extra-input-text` и `extra-dialog`.
+
+- [ ] **Step 3: Сверка с spec § 9** — открыть spec, проверить 5 критериев приёмки; каждый — closed by соответствующая Task.
+
+- [ ] **Step 4: Опционально prebuild hook** — если согласовано, в `package.json` добавить `"prebuild": "npm run validate:figma-cc"`. Иначе пропустить.
+
+- [ ] **Step 5: Commit** (если prebuild добавлен) `git add package.json && git commit -m "chore(figma-cc): wire validator into prebuild"`.
+
+---
+
+## Self-Review
+
+**Spec coverage:**
+- § 1–2 → Architecture + Tasks 2–7.
+- § 3 → Tasks 5–7 (структура); Task 2 (формализация); Task 1 (валидация).
+- § 4 → Task 8 Step 2.
+- § 5 → Tasks 5–7 Step 1 (источники).
+- § 6 → fallback orphan-code в Global Constraints и Tasks 5–7.
+- § 7 → conventions.md (Task 3).
+- § 8 → план учитывает доступность/недоступность MCP.
+- § 9 → Task 8.
+
+**Type consistency:** `validateFile(path)` определён в Task 1, использован там же. Селекторы `extra-button`, `extra-input-text`, `extra-dialog` соответствуют реальным.
+
+**Placeholders:** нет TBD-плейсхолдеров. Метки получения Figma данных — рабочие инструкции с явным fallback на `orphan-code`.
diff --git a/docs/superpowers/specs/2026-06-22-figma-code-connect-static-design.md b/docs/superpowers/specs/2026-06-22-figma-code-connect-static-design.md
new file mode 100644
index 00000000..669b73c7
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-22-figma-code-connect-static-design.md
@@ -0,0 +1,181 @@
+# Статический Figma Code Connect — дизайн
+
+**Дата:** 2026-06-22
+**Проект:** `@cdek-it/angular-ui-kit` (Angular 20 + PrimeNG)
+**Тип:** design spec
+**Статус:** утверждён к реализации
+
+## 1. Постановка задачи
+
+Реализовать статический (file-based) аналог Figma Code Connect для Angular UI Kit.
+Цель — предоставить LLM-агенту тот же контекст связки «Figma-компонент ↔ кодовый компонент»,
+который даёт оригинальный Figma Code Connect, но без рантайма Figma CLI и без TypeScript-DSL.
+
+**Потребитель:** LLM/Claude при генерации Angular-кода (страниц, виджетов) по Figma-дизайну.
+**Триггер:** агент получает Figma `nodeId` / `componentKey` из MCP и ищет соответствующий файл контекста.
+**Не-цели:**
+- Не заменяет Storybook (это не интерактивная песочница).
+- Не описывает приватные компоненты.
+- Не отражает runtime-логику (animations, CDK overlay) — только props/template-API.
+
+## 2. Архитектура файлов
+
+### Расположение
+Колокация рядом с компонентом:
+
+```
+src/lib/components/<name>/<name>.figma.md
+```
+
+Один кодовый компонент → один `.figma.md`. Варианты компонента (`primary`, `secondary`,
+`outlined` и т.д.) — секциями внутри файла, отдельных файлов под варианты нет.
+
+### Глобальные артефакты
+```
+src/lib/figma-code-connect/
+  README.md          # точка входа: что это, как использовать
+  schema.md          # единственный источник правды о формате
+  conventions.md     # общие соглашения проекта (префиксы, naming)
+  tokens.md          # маппинг Figma variables → CSS-переменные / Tailwind
+  icons.md           # icon-set: имена в Figma → имена в коде
+  missing.md         # backlog: Figma-компоненты без реализации в коде
+```
+
+Индивидуальные `.figma.md` ссылаются на глобалы через относительные ссылки
+(`[token](../../figma-code-connect/tokens.md#color-primary)`). Значения не дублируются.
+
+## 3. Структура файла `<name>.figma.md`
+
+### Frontmatter (YAML)
+
+Обязательные поля:
+```yaml
+---
+component: extra-button                  # имя Angular-компонента (обратный поиск)
+selector: extra-button                   # Angular-селектор
+import:
+  symbol: ExtraButtonComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: <figma-file-key>                # per-component; берётся из Figma MCP для каждого компонента; может различаться при использовании linked libraries
+  nodeId: '123:456'                      # ID родительского componentSet (или массив)
+  componentKey: <stable-component-key>
+  name: 'Button'                         # имя в Figma (для отладки)
+status: stable | beta | deprecated | orphan-code
+updated: 2026-06-22
+---
+```
+
+Опциональные поля:
+```yaml
+deprecated:
+  replaceWith: extra-other
+  since: 2026-03-01
+  reason: 'Заменён на extra-other из-за изменения a11y-контракта'
+```
+
+Если `nodeId` — массив, в `Overview` обязана быть заметка о правилах выбора.
+
+### Тело — фиксированный порядок секций
+
+1. `## Overview` — 1–2 предложения о назначении, когда брать именно этот компонент.
+2. `## Props mapping` — таблица `Figma property | Angular @Input | Type / values | Notes`.
+3. `## Variants` — для каждого варианта `### <name>` + строка `Figma nodeId: \`<id>\`` + code-fence `html` со сниппетом.
+4. `## Slots` — описание `ng-content` / структурных директив; «Нет.» если отсутствуют.
+5. `## Related` — ссылки на смежные `.figma.md`; «Нет.» если отсутствуют.
+6. `## Do / Don't` — список `✅`/`❌`, ≤ 5 пунктов.
+
+### Правила тела
+- Жёсткий порядок секций (для детерминированного парсинга).
+- Все code-fence обязаны иметь язык (`html`, `ts`, `scss`).
+- Свободного текста между секциями нет — только содержимое самих секций.
+- Никаких inline-значений токенов или цветов — только ссылки на `tokens.md`.
+
+## 4. Поиск по `nodeId` (lookup)
+
+**MVP-стратегия:** без индекс-файла.
+
+```
+grep -rl "nodeId: '123:456'" src/lib/components --include='*.figma.md'
+```
+
+Работает потому что:
+- `.figma.md` ≤ количества компонентов (~40);
+- frontmatter содержит `nodeId` родителя, секции `## Variants` — `nodeId` каждого варианта;
+- grep по проекту такого размера < 100 мс.
+
+**Обратный lookup (по имени компонента):** соглашение пути
+`src/lib/components/<kebab-name>/<kebab-name>.figma.md` — агент строит путь напрямую.
+
+**Когда добавим индекс:** при превышении ~200 компонентов или времени grep > 500 мс.
+До тех пор — YAGNI.
+
+## 5. Источники данных и процесс генерации
+
+### Источники (в порядке приоритета при конфликте)
+
+1. **Figma MCP** — `componentKey`, `nodeId`, variants, Figma property panel.
+2. **`src/lib/components/<name>/<name>.component.ts`** — селектор, `@Input`/`@Output`,
+   типы (`ExtraButtonVariant = 'primary' | …`), дефолты.
+3. **`src/stories/components/<name>/*.stories.ts`** — канонические сниппеты для `## Variants`.
+4. **`public_api.ts`** — реальный import symbol и публичный путь.
+
+### Разрешение конфликтов
+- Тип в коде ≠ variant в Figma → побеждает код. Заметка в `## Do / Don't`.
+- Селектор не совпадает с шаблоном `extra-*` → фиксируется как есть, `status: beta`.
+
+### Генерация одного файла
+1. Прочитать `<name>.component.ts` → props, типы, селектор.
+2. Прочитать `public_api.ts` → import symbol.
+3. Figma MCP по имени → `nodeId`, `componentKey`, variants.
+4. Прочитать stories в `src/stories/components/<name>/` (если есть) → канонические сниппеты.
+5. Скомпоновать `.figma.md` строго по schema.
+6. Self-check: все обязательные поля frontmatter заполнены, все Figma-variants
+   представлены секциями `## Variants`.
+
+### Обновление существующего файла
+- Триггер: изменение `<name>.component.ts` или соответствующих stories.
+- Регенерация по тому же процессу, но `figma.fileKey/nodeId/componentKey` берутся
+  из старого frontmatter (Figma-ID стабильнее имени).
+- Поле `updated:` обновляется на текущую дату.
+
+## 6. Edge cases
+
+| Случай | Поведение |
+|--------|-----------|
+| Компонент в коде, нет в Figma | Файл создаётся, `figma.nodeId = null`, `status: orphan-code`. Агент не предлагает первым при генерации. |
+| Компонент в Figma, нет в коде | Файл НЕ создаётся. Запись в `figma-code-connect/missing.md`. |
+| Variant в Figma не покрыт типом в коде | Блок `### …` создаётся, в code-fence `<!-- not implemented -->` + сниппет ближайшего поддерживаемого. Запись в `## Do / Don't`. |
+| Несколько Figma-компонентов → один кодовый | `figma.nodeId` — массив, в `## Overview` правила выбора. |
+| Deprecated | `status: deprecated` + поле `deprecated: { replaceWith, since, reason }`. Агент только распознаёт, не предлагает. |
+| Composition (dialog→button) | В `## Related` — ссылка, в `## Variants` — пример композиции. Детали зависимого компонента не дублируются. |
+| Токены/иконки | Только ссылки на `tokens.md` / `icons.md`. Inline-значений нет. |
+
+## 7. Red lines
+
+- Не описывать приватные компоненты (которых нет в `public_api.ts`).
+- Не отражать runtime-логику (анимации, CDK overlay, router-выборы).
+- Не дублировать Storybook — это контракт, а не песочница.
+- Не инлайнить значения токенов/иконок — только ссылки на глобалы.
+- Не создавать отдельные файлы под варианты компонента.
+
+## 8. Что нужно от пользователя
+
+**Обязательно:**
+- URL Figma-файла UI Kit (для MCP).
+- Подтверждение прав на запись в `src/lib/`.
+- Решение по MVP-объёму: пилот на 3–5 компонентов или сразу все ~40.
+
+**Желательно:**
+- Существующий `figma.config.json` / Code Connect TS-файлы (если есть) — для переиспользования nodeId.
+- Канонические Storybook stories (`src/stories/`) как источник сниппетов.
+- Внутренние соглашения по a11y и именованию иконок.
+
+## 9. Критерии приёмки (MVP)
+
+1. Создан каркас `src/lib/figma-code-connect/` со всеми пятью глобальными файлами.
+2. Сгенерированы `.figma.md` для пилотных компонентов (`button`, `inputtext`, `dialog`).
+3. Каждый пилотный файл проходит self-check по `schema.md`.
+4. Lookup по `nodeId` через grep возвращает корректный файл.
+5. Агент по `.figma.md` пилотного компонента генерирует валидный Angular-код,
+   соответствующий контракту в коде (props, типы, селектор).
diff --git a/package-lock.json b/package-lock.json
index 5fe8bcf3..4cee0460 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "@angular/router": "20.3.15",
         "@compodoc/compodoc": "1.1.32",
         "@primeng/themes": "20.4.0",
+        "@primeuix/themes": "1.2.5",
         "@storybook/addon-a11y": "10.1.8",
         "@storybook/addon-docs": "10.1.8",
         "@storybook/addon-themes": "^10.1.8",
@@ -46,6 +47,7 @@
         "eslint-plugin-prefer-arrow": "1.2.3",
         "eslint-plugin-storybook": "10.1.8",
         "jasmine-core": "5.13.0",
+        "js-yaml": "^4.1.0",
         "karma": "6.4.4",
         "karma-chrome-launcher": "3.2.0",
         "karma-coverage": "2.2.1",
diff --git a/package.json b/package.json
index 8fa837c7..334eade9 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,8 @@
     "build:storybook": "ng run angular-ui-kit:build-storybook",
     "build:lib": "ng build angular-ui-kit-lib",
     "security:check": "npm audit --production --audit-level high",
-    "copy:dist": "cpx 'src/lib/providers/prime-preset/**/*.{json,ts}' dist/ && cpx 'src-tokens/theme.preset.ts' dist/"
+    "copy:dist": "cpx 'src/lib/providers/prime-preset/**/*.{json,ts}' dist/ && cpx 'src-tokens/theme.preset.ts' dist/",
+    "validate:figma-cc": "node scripts/figma-code-connect/validate.mjs"
   },
   "repository": "github:cdek-it/angular-ui-kit",
   "devDependencies": {
@@ -60,6 +61,7 @@
     "eslint-plugin-prefer-arrow": "1.2.3",
     "eslint-plugin-storybook": "10.1.8",
     "jasmine-core": "5.13.0",
+    "js-yaml": "^4.1.0",
     "karma": "6.4.4",
     "karma-chrome-launcher": "3.2.0",
     "karma-coverage": "2.2.1",
diff --git a/scripts/figma-code-connect/__fixtures__/invalid-bad-status.figma.md b/scripts/figma-code-connect/__fixtures__/invalid-bad-status.figma.md
new file mode 100644
index 00000000..b19e2d61
--- /dev/null
+++ b/scripts/figma-code-connect/__fixtures__/invalid-bad-status.figma.md
@@ -0,0 +1,40 @@
+---
+component: extra-fixture
+selector: extra-fixture
+import:
+  symbol: ExtraFixtureComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: TESTKEY
+  nodeId: '1:2'
+  componentKey: stable-key
+  name: 'Fixture'
+status: nonsense
+updated: '2026-06-22'
+---
+
+## Overview
+Тестовый компонент.
+
+## Props mapping
+| Figma | Angular | Type | Notes |
+|-------|---------|------|-------|
+| Size  | size    | 'sm' | |
+
+## Variants
+### Default
+Figma nodeId: `1:3`
+
+```html
+<extra-fixture size="sm" />
+```
+
+## Slots
+Нет.
+
+## Related
+Нет.
+
+## Do / Don't
+- ✅ ОК.
+- ❌ Не ОК.
diff --git a/scripts/figma-code-connect/__fixtures__/invalid-closing-fence-language.figma.md b/scripts/figma-code-connect/__fixtures__/invalid-closing-fence-language.figma.md
new file mode 100644
index 00000000..075c8978
--- /dev/null
+++ b/scripts/figma-code-connect/__fixtures__/invalid-closing-fence-language.figma.md
@@ -0,0 +1,40 @@
+---
+component: extra-fixture
+selector: extra-fixture
+import:
+  symbol: ExtraFixtureComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: TESTKEY
+  nodeId: '1:2'
+  componentKey: stable-key
+  name: 'Fixture'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+Тестовый компонент.
+
+## Props mapping
+| Figma | Angular | Type | Notes |
+|-------|---------|------|-------|
+| Size  | size    | 'sm' | |
+
+## Variants
+### Default
+Figma nodeId: `1:3`
+
+```html
+<extra-fixture size="sm" />
+```html
+
+## Slots
+Нет.
+
+## Related
+Нет.
+
+## Do / Don't
+- ✅ ОК.
+- ❌ Не ОК.
diff --git a/scripts/figma-code-connect/__fixtures__/invalid-dangling-cross-link.figma.md b/scripts/figma-code-connect/__fixtures__/invalid-dangling-cross-link.figma.md
new file mode 100644
index 00000000..3f1eb722
--- /dev/null
+++ b/scripts/figma-code-connect/__fixtures__/invalid-dangling-cross-link.figma.md
@@ -0,0 +1,40 @@
+---
+component: extra-fixture-link
+selector: extra-fixture-link
+import:
+  symbol: ExtraFixtureLinkComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: TESTKEY
+  nodeId: '1:9'
+  componentKey: link-key
+  name: 'FixtureLink'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+Фикстура со ссылкой на несуществующий контракт.
+
+## Props mapping
+| Figma | Angular | Type | Notes |
+|-------|---------|------|-------|
+| Size  | size    | 'sm' | |
+
+## Variants
+### Default
+Figma nodeId: `1:10`
+
+```html
+<extra-fixture-link size="sm" />
+```
+
+## Slots
+Нет.
+
+## Related
+- [Nonexistent](./does-not-exist.figma.md) — намеренно битая ссылка
+
+## Do / Don't
+- ✅ ОК.
+- ❌ Не ОК.
diff --git a/scripts/figma-code-connect/__fixtures__/invalid-dup-nodeid.figma.md b/scripts/figma-code-connect/__fixtures__/invalid-dup-nodeid.figma.md
new file mode 100644
index 00000000..2c998137
--- /dev/null
+++ b/scripts/figma-code-connect/__fixtures__/invalid-dup-nodeid.figma.md
@@ -0,0 +1,40 @@
+---
+component: extra-fixture-dup
+selector: extra-fixture-dup
+import:
+  symbol: ExtraFixtureDupComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: TESTKEY
+  nodeId: '1:2'
+  componentKey: dup-key
+  name: 'FixtureDup'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+Фикстура с тем же nodeId, что и valid.figma.md (1:2) — для проверки уникальности.
+
+## Props mapping
+| Figma | Angular | Type | Notes |
+|-------|---------|------|-------|
+| Size  | size    | 'sm' | |
+
+## Variants
+### Default
+Figma nodeId: `1:4`
+
+```html
+<extra-fixture-dup size="sm" />
+```
+
+## Slots
+Нет.
+
+## Related
+Нет.
+
+## Do / Don't
+- ✅ ОК.
+- ❌ Не ОК.
diff --git a/scripts/figma-code-connect/__fixtures__/invalid-missing-frontmatter.figma.md b/scripts/figma-code-connect/__fixtures__/invalid-missing-frontmatter.figma.md
new file mode 100644
index 00000000..b8345b33
--- /dev/null
+++ b/scripts/figma-code-connect/__fixtures__/invalid-missing-frontmatter.figma.md
@@ -0,0 +1,2 @@
+## Overview
+Нет frontmatter.
diff --git a/scripts/figma-code-connect/__fixtures__/invalid-missing-open-fence-language.figma.md b/scripts/figma-code-connect/__fixtures__/invalid-missing-open-fence-language.figma.md
new file mode 100644
index 00000000..304737f0
--- /dev/null
+++ b/scripts/figma-code-connect/__fixtures__/invalid-missing-open-fence-language.figma.md
@@ -0,0 +1,40 @@
+---
+component: extra-fixture
+selector: extra-fixture
+import:
+  symbol: ExtraFixtureComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: TESTKEY
+  nodeId: '1:2'
+  componentKey: stable-key
+  name: 'Fixture'
+status: stable
+updated: 2026-06-22
+---
+
+## Overview
+Тестовый компонент.
+
+## Props mapping
+| Figma | Angular | Type | Notes |
+|-------|---------|------|-------|
+| Size  | size    | 'sm' | |
+
+## Variants
+### Default
+Figma nodeId: `1:3`
+
+```
+<extra-fixture size="sm" />
+```
+
+## Slots
+Нет.
+
+## Related
+Нет.
+
+## Do / Don't
+- ✅ ОК.
+- ❌ Не ОК.
diff --git a/scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md b/scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md
new file mode 100644
index 00000000..e1958e95
--- /dev/null
+++ b/scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md
@@ -0,0 +1,40 @@
+---
+component: extra-fixture
+selector: extra-fixture
+import:
+  symbol: ExtraFixtureComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: TESTKEY
+  nodeId: '1:2'
+  componentKey: stable-key
+  name: 'Fixture'
+status: stable
+updated: 2026-06-22
+---
+
+## Overview
+Тестовый компонент.
+
+## Variants
+### Default
+Figma nodeId: `1:3`
+
+```html
+<extra-fixture size="sm" />
+```
+
+## Props mapping
+| Figma | Angular | Type | Notes |
+|-------|---------|------|-------|
+| Size  | size    | 'sm' | |
+
+## Slots
+Нет.
+
+## Related
+Нет.
+
+## Do / Don't
+- ✅ ОК.
+- ❌ Не ОК.
diff --git a/scripts/figma-code-connect/__fixtures__/valid.figma.md b/scripts/figma-code-connect/__fixtures__/valid.figma.md
new file mode 100644
index 00000000..26b549da
--- /dev/null
+++ b/scripts/figma-code-connect/__fixtures__/valid.figma.md
@@ -0,0 +1,40 @@
+---
+component: extra-fixture
+selector: extra-fixture
+import:
+  symbol: ExtraFixtureComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: TESTKEY
+  nodeId: '1:2'
+  componentKey: stable-key
+  name: 'Fixture'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+Тестовый компонент.
+
+## Props mapping
+| Figma | Angular | Type | Notes |
+|-------|---------|------|-------|
+| Size  | size    | 'sm' | |
+
+## Variants
+### Default
+Figma nodeId: `1:3`
+
+```html
+<extra-fixture size="sm" />
+```
+
+## Slots
+Нет.
+
+## Related
+Нет.
+
+## Do / Don't
+- ✅ ОК.
+- ❌ Не ОК.
diff --git a/scripts/figma-code-connect/validate.mjs b/scripts/figma-code-connect/validate.mjs
new file mode 100644
index 00000000..42cac1cb
--- /dev/null
+++ b/scripts/figma-code-connect/validate.mjs
@@ -0,0 +1,121 @@
+import { readFile, access } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+import yaml from 'js-yaml';
+
+const REQUIRED_FIELDS = ['component', 'selector', 'import', 'figma', 'status', 'updated'];
+const REQUIRED_FIGMA = ['fileKey', 'nodeId', 'componentKey', 'name'];
+const SECTION_ORDER = ['## Overview', '## Props mapping', '## Variants', '## Slots', '## Related', "## Do / Don't"];
+const ALLOWED_STATUSES = ['stable', 'beta', 'deprecated', 'orphan-code'];
+
+// Markdown links pointing at another component's contract, with optional #anchor.
+const CROSS_LINK_RE = /\]\(([^)\s#]+\.figma\.md)(#[^)]*)?\)/g;
+
+const FRONTMATTER_RE = /^---\n([\s\S]*?)\n---\n([\s\S]*)$/;
+
+function parseFrontmatter(raw) {
+  const m = raw.match(FRONTMATTER_RE);
+  if (!m) return null;
+  try { return { fm: yaml.load(m[1]), body: m[2] }; }
+  catch { return null; }
+}
+
+export async function validateFile(path) {
+  const errors = [];
+  const raw = await readFile(path, 'utf8');
+  const m = raw.match(FRONTMATTER_RE);
+  if (!m) { errors.push(`${path}: missing frontmatter`); return errors; }
+  let fm;
+  try { fm = yaml.load(m[1]); }
+  catch (e) { errors.push(`${path}: invalid YAML: ${e.message}`); return errors; }
+  for (const f of REQUIRED_FIELDS) if (!(f in fm)) errors.push(`${path}: missing field ${f}`);
+  if (fm.figma) for (const f of REQUIRED_FIGMA) if (!(f in fm.figma)) errors.push(`${path}: missing figma.${f}`);
+  if ('status' in fm && !ALLOWED_STATUSES.includes(fm.status)) {
+    errors.push(`${path}: unknown status "${fm.status}", expected one of: ${ALLOWED_STATUSES.join(' | ')}`);
+  }
+  const body = m[2];
+  const positions = SECTION_ORDER.map(s => body.indexOf(`\n${s}`));
+  const present = positions.map((p, i) => [p, i]).filter(([p]) => p !== -1);
+  for (let i = 1; i < present.length; i++) {
+    if (present[i][0] < present[i-1][0]) {
+      errors.push(`${path}: section order violation near ${SECTION_ORDER[present[i][1]]}`);
+      break;
+    }
+  }
+  const fences = [...body.matchAll(/^```(\w*)$/gm)];
+  for (let i = 0; i < fences.length; i++) {
+    // Only opening fences (even index: 0, 2, 4, …) must carry a language.
+    // Closing fences (odd index) are bare ``` per CommonMark spec.
+    if (i % 2 === 0 && !fences[i][1]) errors.push(`${path}: code-fence without language`);
+    if (i % 2 === 1 && fences[i][1]) errors.push(`${path}: closing fence has language "${fences[i][1]}", must be bare`);
+  }
+  return errors;
+}
+
+// Cross-links to sibling component contracts are reported as warnings, not errors:
+// a contract may legitimately reference a pilot that hasn't been written yet
+// (forward reference) without blocking the build.
+export async function crossLinkWarnings(path) {
+  const raw = await readFile(path, 'utf8');
+  const baseDir = dirname(path);
+  const seen = new Set();
+  const warnings = [];
+  for (const m of raw.matchAll(CROSS_LINK_RE)) {
+    const link = m[1];
+    const target = resolve(baseDir, link);
+    if (seen.has(target)) continue;
+    seen.add(target);
+    try {
+      await access(target);
+    } catch {
+      warnings.push(`${path}: dangling cross-link → ${link} (file not found)`);
+    }
+  }
+  return warnings;
+}
+
+// nodeId uniqueness is a cross-file invariant, so it can only be checked over the
+// whole set of contracts. A nodeId shared by two files breaks grep-based lookup.
+export async function duplicateNodeIdErrors(paths) {
+  const byNodeId = new Map();
+  for (const path of paths) {
+    const raw = await readFile(path, 'utf8');
+    const parsed = parseFrontmatter(raw);
+    const nodeId = parsed?.fm?.figma?.nodeId;
+    if (!nodeId) continue;
+    if (!byNodeId.has(nodeId)) byNodeId.set(nodeId, []);
+    byNodeId.get(nodeId).push(path);
+  }
+  const errors = [];
+  for (const [nodeId, files] of byNodeId) {
+    if (files.length > 1) {
+      errors.push(`nodeId '${nodeId}' is not unique — appears in: ${files.join(', ')}`);
+    }
+  }
+  return errors;
+}
+
+export async function validateAll(paths) {
+  const errors = [];
+  const warnings = [];
+  for (const path of paths) {
+    errors.push(...await validateFile(path));
+    warnings.push(...await crossLinkWarnings(path));
+  }
+  errors.push(...await duplicateNodeIdErrors(paths));
+  return { errors, warnings };
+}
+
+if (import.meta.url === `file://${process.argv[1]}`) {
+  const args = process.argv.slice(2);
+  let files;
+  if (args.length) files = args;
+  else {
+    const { glob } = await import('node:fs/promises');
+    files = [];
+    for await (const p of glob('src/lib/**/*.figma.md')) files.push(p);
+  }
+  const { errors, warnings } = await validateAll(files);
+  for (const w of warnings) console.error(`warning: ${w}`);
+  for (const e of errors) console.error(e);
+  process.exit(errors.length === 0 ? 0 : 1);
+}
diff --git a/scripts/figma-code-connect/validate.test.mjs b/scripts/figma-code-connect/validate.test.mjs
new file mode 100644
index 00000000..2d8f54f8
--- /dev/null
+++ b/scripts/figma-code-connect/validate.test.mjs
@@ -0,0 +1,68 @@
+import { strict as assert } from 'node:assert';
+import { test } from 'node:test';
+import { validateFile, crossLinkWarnings, duplicateNodeIdErrors, validateAll } from './validate.mjs';
+
+const FIX = 'scripts/figma-code-connect/__fixtures__';
+
+test('valid fixture passes', async () => {
+  const errors = await validateFile('scripts/figma-code-connect/__fixtures__/valid.figma.md');
+  assert.deepEqual(errors, []);
+});
+
+test('missing frontmatter fails', async () => {
+  const errors = await validateFile('scripts/figma-code-connect/__fixtures__/invalid-missing-frontmatter.figma.md');
+  assert.ok(errors.some(e => /frontmatter/i.test(e)));
+});
+
+test('wrong section order fails', async () => {
+  const errors = await validateFile('scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md');
+  assert.ok(errors.some(e => /order/i.test(e)));
+});
+
+test('missing open fence language fails', async () => {
+  const errors = await validateFile('scripts/figma-code-connect/__fixtures__/invalid-missing-open-fence-language.figma.md');
+  assert.ok(errors.some(e => /code-fence/i.test(e)));
+});
+
+test('unknown status value fails', async () => {
+  const errors = await validateFile('scripts/figma-code-connect/__fixtures__/invalid-bad-status.figma.md');
+  assert.ok(errors.some(e => /unknown status/i.test(e)));
+});
+
+test('closing fence with language fails', async () => {
+  const errors = await validateFile('scripts/figma-code-connect/__fixtures__/invalid-closing-fence-language.figma.md');
+  assert.ok(errors.some(e => /closing fence/i.test(e)));
+});
+
+test('dangling cross-link is a warning, not an error', async () => {
+  const path = `${FIX}/invalid-dangling-cross-link.figma.md`;
+  const warnings = await crossLinkWarnings(path);
+  assert.ok(warnings.some(w => /dangling cross-link/i.test(w) && /does-not-exist/.test(w)));
+  // It must NOT surface as a hard error — forward references are allowed.
+  const errors = await validateFile(path);
+  assert.deepEqual(errors, []);
+});
+
+test('valid fixture has no dangling cross-link warnings', async () => {
+  const warnings = await crossLinkWarnings(`${FIX}/valid.figma.md`);
+  assert.deepEqual(warnings, []);
+});
+
+test('duplicate nodeId across files is an error', async () => {
+  const errors = await duplicateNodeIdErrors([
+    `${FIX}/valid.figma.md`,
+    `${FIX}/invalid-dup-nodeid.figma.md`,
+  ]);
+  assert.ok(errors.some(e => /not unique/i.test(e) && /1:2/.test(e)));
+});
+
+test('unique nodeIds produce no duplicate error', async () => {
+  const errors = await duplicateNodeIdErrors([`${FIX}/valid.figma.md`]);
+  assert.deepEqual(errors, []);
+});
+
+test('validateAll separates errors from warnings', async () => {
+  const { errors, warnings } = await validateAll([`${FIX}/invalid-dangling-cross-link.figma.md`]);
+  assert.deepEqual(errors, []);
+  assert.ok(warnings.some(w => /dangling cross-link/i.test(w)));
+});
diff --git a/scripts/tokens/baseline.json b/scripts/tokens/baseline.json
new file mode 100644
index 00000000..869e9334
--- /dev/null
+++ b/scripts/tokens/baseline.json
@@ -0,0 +1,5072 @@
+{
+  "primitive": {
+    "colors": {
+      "alpha": {
+        "white": {
+          "100": "rgba(255, 255, 255, 0.1000)",
+          "200": "rgba(255, 255, 255, 0.2000)",
+          "300": "rgba(255, 255, 255, 0.3000)",
+          "400": "rgba(255, 255, 255, 0.4000)",
+          "500": "rgba(255, 255, 255, 0.5000)",
+          "600": "rgba(255, 255, 255, 0.6000)",
+          "700": "rgba(255, 255, 255, 0.7000)",
+          "800": "rgba(255, 255, 255, 0.8000)",
+          "900": "rgba(255, 255, 255, 0.9000)",
+          "1000": "#ffffff"
+        },
+        "black": {
+          "100": "rgba(0, 0, 0, 0.1000)",
+          "200": "rgba(0, 0, 0, 0.2000)",
+          "300": "rgba(0, 0, 0, 0.3000)",
+          "400": "rgba(0, 0, 0, 0.4000)",
+          "500": "rgba(0, 0, 0, 0.5000)",
+          "600": "rgba(0, 0, 0, 0.6000)",
+          "700": "rgba(0, 0, 0, 0.7000)",
+          "800": "rgba(0, 0, 0, 0.8000)",
+          "900": "rgba(0, 0, 0, 0.9000)",
+          "1000": "#000000"
+        }
+      },
+      "solid": {
+        "purple": {
+          "50": "#faf5ff",
+          "100": "#f3e8ff",
+          "200": "#e9d5ff",
+          "300": "#d8b4fe",
+          "400": "#c084fc",
+          "500": "#a855f7",
+          "600": "#9333ea",
+          "700": "#7e22ce",
+          "800": "#6b21a8",
+          "900": "#581c87",
+          "950": "#3b0764"
+        },
+        "fuchsia": {
+          "50": "#fdf4ff",
+          "100": "#fae8ff",
+          "200": "#f5d0fe",
+          "300": "#f0abfc",
+          "400": "#e879f9",
+          "500": "#d946ef",
+          "600": "#c026d3",
+          "700": "#a21caf",
+          "800": "#86198f",
+          "900": "#701a75",
+          "950": "#4a044e"
+        },
+        "pink": {
+          "50": "#fdf2f8",
+          "100": "#fce7f3",
+          "200": "#fbcfe8",
+          "300": "#f9a8d4",
+          "400": "#f472b6",
+          "500": "#ec4899",
+          "600": "#db2777",
+          "700": "#be185d",
+          "800": "#9d174d",
+          "900": "#831843",
+          "950": "#500724"
+        },
+        "rose": {
+          "50": "#fff1f2",
+          "100": "#ffe4e6",
+          "200": "#fecdd3",
+          "300": "#fda4af",
+          "400": "#fb7185",
+          "500": "#f43f5e",
+          "600": "#e11d48",
+          "700": "#be123c",
+          "800": "#9f1239",
+          "900": "#881337",
+          "950": "#4c0519"
+        },
+        "teal": {
+          "50": "#f0fdfa",
+          "100": "#ccfbf1",
+          "200": "#99f6e4",
+          "300": "#5eead4",
+          "400": "#2dd4bf",
+          "500": "#14b8a6",
+          "600": "#0d9488",
+          "700": "#0f766e",
+          "800": "#115e59",
+          "900": "#134e4a",
+          "950": "#042f2e"
+        },
+        "cyan": {
+          "50": "#ecfeff",
+          "100": "#cffafe",
+          "200": "#a5f3fc",
+          "300": "#67e8f9",
+          "400": "#22d3ee",
+          "500": "#06b6d4",
+          "600": "#0891b2",
+          "700": "#0e7490",
+          "800": "#155e75",
+          "900": "#164e63",
+          "950": "#013138"
+        },
+        "sky": {
+          "50": "#f0f9ff",
+          "100": "#e0f2fe",
+          "200": "#bae6fd",
+          "300": "#7dd3fc",
+          "400": "#38bdf8",
+          "500": "#0ea5e9",
+          "600": "#0284c7",
+          "700": "#0369a1",
+          "800": "#075985",
+          "900": "#0c4a6e",
+          "950": "#082f49"
+        },
+        "blue": {
+          "50": "#fafdff",
+          "100": "#f0f9ff",
+          "200": "#d4ecfe",
+          "300": "#aad7fb",
+          "400": "#77baf4",
+          "500": "#4496e8",
+          "600": "#1e76cd",
+          "700": "#18538d",
+          "800": "#123a61",
+          "900": "#0e2a45",
+          "950": "#0c243b"
+        },
+        "indigo": {
+          "50": "#eef2ff",
+          "100": "#e0e7ff",
+          "200": "#c7d2fe",
+          "300": "#a5b4fc",
+          "400": "#818cf8",
+          "500": "#6366f1",
+          "600": "#4f46e5",
+          "700": "#4338ca",
+          "800": "#3730a3",
+          "900": "#312e81",
+          "950": "#1e1b4b"
+        },
+        "violet": {
+          "50": "#fcfaff",
+          "100": "#f6f0ff",
+          "200": "#e5d4fe",
+          "300": "#cbaafb",
+          "400": "#b284f5",
+          "500": "#a265ec",
+          "600": "#9457ea",
+          "700": "#48188d",
+          "800": "#321261",
+          "900": "#240e45",
+          "950": "#1f0c3b"
+        },
+        "emerald": {
+          "50": "#ecfdf5",
+          "100": "#d1fae5",
+          "200": "#a7f3d0",
+          "300": "#6ee7b7",
+          "400": "#34d399",
+          "500": "#10b981",
+          "600": "#059669",
+          "700": "#047857",
+          "800": "#065f46",
+          "900": "#064e3b",
+          "950": "#022c22"
+        },
+        "green": {
+          "50": "#fafffb",
+          "100": "#f0fff3",
+          "200": "#d4fedc",
+          "300": "#aafbb7",
+          "400": "#77f48a",
+          "500": "#44e858",
+          "600": "#1dc831",
+          "700": "#168322",
+          "800": "#12611b",
+          "900": "#0e4514",
+          "950": "#0c3b11"
+        },
+        "lime": {
+          "50": "#f7fee7",
+          "100": "#ecfccb",
+          "200": "#d9f99d",
+          "300": "#bef264",
+          "400": "#a3e635",
+          "500": "#84cc16",
+          "600": "#65a30d",
+          "700": "#4d7c0f",
+          "800": "#3f6212",
+          "900": "#365314",
+          "950": "#1a2e05"
+        },
+        "red": {
+          "50": "#fffafa",
+          "100": "#fff0f0",
+          "200": "#fed4d4",
+          "300": "#fbacaa",
+          "400": "#f47f77",
+          "500": "#e85244",
+          "600": "#db3424",
+          "700": "#8d2218",
+          "800": "#611912",
+          "900": "#45120e",
+          "950": "#3b100c"
+        },
+        "orange": {
+          "50": "#fffbfa",
+          "100": "#fff3f0",
+          "200": "#ffddd5",
+          "300": "#ffbca9",
+          "400": "#ff9273",
+          "500": "#fe6434",
+          "600": "#d53f0b",
+          "700": "#a83107",
+          "800": "#752506",
+          "900": "#561c05",
+          "950": "#4b1905"
+        },
+        "amber": {
+          "50": "#fffbeb",
+          "100": "#fef3c7",
+          "200": "#fde68a",
+          "300": "#fcd34d",
+          "400": "#fbbf24",
+          "500": "#f59e0b",
+          "600": "#d97706",
+          "700": "#b45309",
+          "800": "#92400e",
+          "900": "#78350f",
+          "950": "#451a03"
+        },
+        "yellow": {
+          "50": "#fffdfa",
+          "100": "#fff9f0",
+          "200": "#ffeed4",
+          "300": "#fddeaa",
+          "400": "#facb75",
+          "500": "#f5b83d",
+          "600": "#dc9710",
+          "700": "#9d6d0e",
+          "800": "#6d4c0b",
+          "900": "#4f3709",
+          "950": "#453008"
+        },
+        "slate": {
+          "50": "#f8fafc",
+          "100": "#f1f5f9",
+          "200": "#e2e8f0",
+          "300": "#cbd5e1",
+          "400": "#94a3b8",
+          "500": "#64748b",
+          "600": "#475569",
+          "700": "#334155",
+          "800": "#1e293b",
+          "900": "#0f172a",
+          "950": "#020617"
+        },
+        "gray": {
+          "50": "#f9fafb",
+          "100": "#f3f4f6",
+          "200": "#e5e7eb",
+          "300": "#d1d5db",
+          "400": "#9ca3af",
+          "500": "#6b7280",
+          "600": "#4b5563",
+          "700": "#374151",
+          "800": "#1f2937",
+          "900": "#111827",
+          "950": "#030712"
+        },
+        "zinc": {
+          "50": "#fafafa",
+          "100": "#f0f0f1",
+          "200": "#e2e2e4",
+          "300": "#cecfd2",
+          "400": "#a2a5a9",
+          "500": "#85888e",
+          "600": "#6d7076",
+          "700": "#56595f",
+          "800": "#404348",
+          "900": "#2b2e33",
+          "950": "#181a1f"
+        },
+        "neutral": {
+          "50": "#fafafa",
+          "100": "#f5f5f5",
+          "200": "#e5e5e5",
+          "300": "#d4d4d4",
+          "400": "#a3a3a3",
+          "500": "#737373",
+          "600": "#525252",
+          "700": "#404040",
+          "800": "#262626",
+          "900": "#171717",
+          "950": "#0a0a0a"
+        },
+        "stone": {
+          "50": "#fafaf9",
+          "100": "#f5f5f4",
+          "200": "#e7e5e4",
+          "300": "#d6d3d1",
+          "400": "#a8a29e",
+          "500": "#78716c",
+          "600": "#57534e",
+          "700": "#44403c",
+          "800": "#292524",
+          "900": "#1c1917",
+          "950": "#0c0a09"
+        }
+      }
+    },
+    "borderRadius": {
+      "100": "0.25rem",
+      "200": "0.5rem",
+      "300": "0.75rem",
+      "400": "1rem",
+      "500": "1.5rem",
+      "none": "0rem",
+      "max": "71.3571rem"
+    },
+    "borderWidth": {
+      "100": "0.0714rem",
+      "200": "0.1429rem",
+      "300": "0.25rem",
+      "none": "0rem"
+    },
+    "fonts": {
+      "fontFamily": {
+        "heading": "TT Fellows",
+        "base": "PT Sans"
+      },
+      "fontWeight": {
+        "regular": "400",
+        "medium": "500",
+        "demibold": "600",
+        "bold": "700"
+      },
+      "fontSize": {
+        "100": "0.75rem",
+        "200": "0.875rem",
+        "300": "1rem",
+        "400": "1.125rem",
+        "500": "1.25rem",
+        "600": "1.5rem",
+        "650": "1.875rem",
+        "700": "2.25rem",
+        "750": "3rem",
+        "800": "3.75rem",
+        "900": "4.5rem",
+        "1000": "6rem"
+      },
+      "lineHeight": {
+        "100": "0.7857rem",
+        "150": "0.8571rem",
+        "200": "0.9286rem",
+        "250": "1rem",
+        "300": "1.0714rem",
+        "350": "1.1429rem",
+        "400": "1.2857rem",
+        "450": "1.4286rem",
+        "500": "1.5rem",
+        "550": "1.5714rem",
+        "600": "1.7143rem",
+        "700": "1.8571rem",
+        "800": "2.2857rem",
+        "850": "2.3571rem",
+        "900": "2.7857rem",
+        "1000": "3.3571rem",
+        "auto": "auto"
+      }
+    },
+    "spacing": {
+      "none": "0rem",
+      "1x": "0.25rem",
+      "2x": "0.5rem",
+      "3x": "0.75rem",
+      "4x": "1rem",
+      "5x": "1.25rem",
+      "6x": "1.5rem",
+      "7x": "1.75rem",
+      "8x": "2rem",
+      "9x": "2.25rem",
+      "10x": "2.5rem",
+      "11x": "2.75rem",
+      "12x": "3rem",
+      "14x": "3.5rem",
+      "16x": "4rem",
+      "20x": "5rem",
+      "24x": "6rem",
+      "28x": "7rem",
+      "32x": "8rem",
+      "36x": "9rem",
+      "40x": "10rem"
+    },
+    "sizing": {
+      "none": "0rem",
+      "min": "0.0714rem",
+      "1x": "0.25rem",
+      "2x": "0.5rem",
+      "3x": "0.75rem",
+      "4x": "1rem",
+      "5x": "1.25rem",
+      "6x": "1.5rem",
+      "7x": "1.75rem",
+      "8x": "2rem",
+      "9x": "2.25rem",
+      "10x": "2.5rem",
+      "11x": "2.75rem",
+      "12x": "3rem",
+      "14x": "3.5rem",
+      "16x": "4rem",
+      "20x": "5rem",
+      "24x": "6rem",
+      "28x": "7rem",
+      "32x": "8rem",
+      "36x": "9rem",
+      "40x": "10rem",
+      "44x": "11rem",
+      "48x": "12rem",
+      "52x": "13rem",
+      "56x": "14rem",
+      "60x": "15rem",
+      "64x": "16rem",
+      "68x": "17rem",
+      "72x": "18rem",
+      "76x": "19rem",
+      "80x": "20rem",
+      "84x": "21rem",
+      "88x": "22rem",
+      "92x": "23rem",
+      "96x": "24rem",
+      "100x": "25rem",
+      "104x": "26rem",
+      "108x": "27rem",
+      "112x": "28rem",
+      "116x": "29rem",
+      "120x": "30rem",
+      "124x": "34rem",
+      "128x": "45rem",
+      "132x": "50rem",
+      "136x": "54rem",
+      "140x": "58rem",
+      "144x": "60rem",
+      "max": "100%"
+    },
+    "shadows": {
+      "100": "0 0 0.1rem {colors.alpha.black.200}",
+      "200": "0 0 0.25rem {colors.alpha.black.200}",
+      "300": "0 0.1rem 0.25rem {colors.alpha.black.200}",
+      "400": "0 0.25rem 0.5rem {colors.alpha.black.200}",
+      "500": "0 0.5rem 1rem 0 {colors.alpha.black.200}",
+      "none": "none"
+    },
+    "transition": {
+      "easing": {
+        "linear": "linear",
+        "in": "cubic-bezier(0.55, 0.06, 0.7, 0.2)",
+        "out": "cubic-bezier(0.2, 0.6, 0.4, 1)",
+        "inOut": "cubic-bezier(0.65, 0.05, 0.35, 1)"
+      },
+      "duration": {
+        "100": "140ms",
+        "200": "180ms",
+        "300": "240ms",
+        "400": "320ms",
+        "500": "400ms"
+      }
+    },
+    "opacity": {
+      "250": "0.25",
+      "500": "0.5",
+      "1000": "1"
+    }
+  },
+  "semantic": {
+    "list": {
+      "padding": "{spacing.1x}",
+      "gap": {
+        "100": "{spacing.1x}",
+        "200": "{spacing.2x}"
+      },
+      "header": {
+        "padding": "{spacing.4x} {spacing.4x} 0 {spacing.4x}"
+      },
+      "option": {
+        "padding": "{spacing.2x} {spacing.3x}",
+        "borderRadius": "{borderRadius.200}"
+      },
+      "optionGroup": {
+        "padding": "{spacing.2x} {spacing.3x}",
+        "fontWeight": "{fonts.fontWeight.demibold}"
+      }
+    },
+    "focusRing": {
+      "width": "{borderWidth.300}",
+      "style": "none",
+      "color": "{focusRing.extend.success}",
+      "offset": "0rem"
+    },
+    "form": {
+      "padding": {
+        "100": "{spacing.1x}",
+        "200": "{spacing.2x}",
+        "300": "{spacing.3x}",
+        "400": "{spacing.4x}",
+        "500": "{spacing.5x}",
+        "600": "{spacing.6x}",
+        "700": "{spacing.7x}"
+      },
+      "borderRadius": {
+        "100": "{borderRadius.200}",
+        "200": "{borderRadius.300}",
+        "300": "{borderRadius.max}"
+      },
+      "borderWidth": "{borderWidth.100}",
+      "icon": {
+        "100": "{sizing.2x}",
+        "200": "{sizing.3x}",
+        "300": "{sizing.4x}",
+        "400": "{sizing.5x}",
+        "500": "{sizing.6x}"
+      },
+      "transitionDuration": "{transition.duration.200}",
+      "size": {
+        "100": "{sizing.min}",
+        "150": "{sizing.1x}",
+        "200": "{sizing.2x}",
+        "250": "{sizing.3x}",
+        "300": "{sizing.4x}",
+        "350": "{sizing.5x}",
+        "400": "{sizing.6x}",
+        "500": "{sizing.8x}",
+        "600": "{sizing.10x}",
+        "700": "{sizing.12x}",
+        "800": "{sizing.16x}",
+        "900": "{sizing.20x}"
+      },
+      "width": {
+        "100": "{sizing.6x}",
+        "200": "{sizing.8x}",
+        "300": "{sizing.10x}",
+        "350": "{sizing.11x}",
+        "400": "{sizing.12x}",
+        "500": "{sizing.60x}",
+        "full": "{sizing.max}"
+      },
+      "gap": {
+        "100": "{spacing.1x}",
+        "200": "{spacing.2x}",
+        "300": "{spacing.3x}",
+        "400": "{spacing.4x}"
+      },
+      "focusRing": {
+        "width": "{focusRing.width}",
+        "style": "{focusRing.style}",
+        "color": "{focusRing.color}",
+        "offset": "{focusRing.offset}"
+      },
+      "sm": {
+        "width": "{sizing.60x}",
+        "fontSize": "{fonts.fontSize.300}",
+        "paddingX": "{spacing.3x}",
+        "paddingY": "{spacing.3x}"
+      },
+      "fontSize": "{fonts.fontSize.300}",
+      "paddingX": "{spacing.4x}",
+      "paddingY": "{spacing.4x}",
+      "lg": {
+        "width": "{sizing.76x}",
+        "fontSize": "{fonts.fontSize.300}",
+        "paddingX": "{spacing.5x}",
+        "paddingY": "{spacing.5x}"
+      },
+      "xlg": {
+        "width": "{sizing.84x}",
+        "fontSize": "{fonts.fontSize.300}",
+        "paddingX": "{spacing.6x}",
+        "paddingY": "{spacing.6x}"
+      }
+    },
+    "content": {
+      "borderRadius": "{borderRadius.300}",
+      "padding": {
+        "100": "{spacing.1x}",
+        "200": "{spacing.2x}",
+        "300": "{spacing.4x}",
+        "400": "{spacing.6x}",
+        "500": "{spacing.7x}"
+      },
+      "borderWidth": "{sizing.min}",
+      "gap": {
+        "100": "{spacing.1x}",
+        "200": "{spacing.2x}",
+        "300": "{spacing.3x}",
+        "400": "{spacing.4x}"
+      }
+    },
+    "navigation": {
+      "width": {
+        "100": "{borderWidth.100}",
+        "200": "{borderWidth.300}"
+      },
+      "borderRadius": "{borderRadius.100}",
+      "padding": {
+        "100": "{spacing.1x}",
+        "200": "{spacing.3x}",
+        "300": "{spacing.4x}",
+        "400": "{spacing.6x}"
+      },
+      "size": {
+        "100": "{sizing.1x}",
+        "200": "{sizing.2x}",
+        "300": "{sizing.5x}",
+        "400": "{sizing.8x}",
+        "500": "{sizing.16x}"
+      },
+      "submenu": {
+        "padding": "{spacing.5x}"
+      },
+      "list": {
+        "padding": {
+          "100": "{spacing.1x}",
+          "200": "{spacing.2x}"
+        },
+        "gap": "{spacing.1x}"
+      },
+      "item": {
+        "padding": "{spacing.2x} {spacing.3x}",
+        "borderRadius": "{borderRadius.200}",
+        "gap": "{spacing.2x}"
+      },
+      "submenuLabel": {
+        "padding": "{spacing.2x} {spacing.3x}",
+        "fontWeight": "{fonts.fontWeight.regular}"
+      },
+      "submenuIcon": {
+        "size": "{fonts.fontSize.500}"
+      }
+    },
+    "overlay": {
+      "mask": {
+        "transitionDuration": "{transition.duration.200}"
+      },
+      "select": {
+        "borderRadius": "{borderRadius.300}",
+        "padding": "{spacing.1x}"
+      },
+      "borderWidth": "{borderWidth.100}",
+      "icon": {
+        "size": {
+          "100": "{sizing.4x}",
+          "200": "{sizing.6x}",
+          "300": "{sizing.7x}",
+          "400": "{sizing.8x}",
+          "500": "{sizing.9x}"
+        }
+      },
+      "popover": {
+        "borderRadius": "{borderRadius.200}",
+        "width": {
+          "100": "{sizing.2x}",
+          "200": "{sizing.3x}"
+        },
+        "padding": {
+          "100": "{spacing.3x}",
+          "200": "{spacing.5x}"
+        }
+      },
+      "modal": {
+        "borderRadius": "{borderRadius.500}",
+        "padding": {
+          "100": "{spacing.4x}",
+          "200": "{spacing.5x}",
+          "300": "{spacing.6x}"
+        }
+      },
+      "gap": {
+        "100": "{spacing.1x}",
+        "200": "{spacing.2x}",
+        "300": "{spacing.3x}",
+        "400": "{spacing.4x}"
+      },
+      "width": "{sizing.100x}",
+      "drawer": {
+        "padding": "{spacing.2x}"
+      },
+      "sm": {
+        "width": "{sizing.80x}"
+      },
+      "lg": {
+        "width": "{sizing.120x}"
+      },
+      "xlg": {
+        "width": "{sizing.128x}"
+      }
+    },
+    "feedback": {
+      "transitionDuration": "{transition.duration.200}",
+      "width": {
+        "100": "{sizing.min}",
+        "200": "{sizing.1x}",
+        "300": "{sizing.2x}",
+        "400": "{sizing.3x}",
+        "500": "{sizing.4x}",
+        "550": "{sizing.5x}",
+        "600": "{sizing.6x}",
+        "650": "{sizing.7x}",
+        "700": "{sizing.8x}",
+        "800": "{sizing.12x}",
+        "900": "{sizing.16x}"
+      },
+      "icon": {
+        "size": {
+          "100": "{sizing.2x}",
+          "200": "{sizing.4x}",
+          "300": "{sizing.6x}",
+          "350": "{sizing.7x}",
+          "400": "{sizing.8x}",
+          "500": "{sizing.9x}"
+        }
+      },
+      "padding": {
+        "100": "{spacing.2x}",
+        "200": "{spacing.4x}"
+      },
+      "height": {
+        "100": "{sizing.2x}",
+        "200": "{sizing.3x}",
+        "300": "{sizing.4x}",
+        "400": "{sizing.5x}",
+        "500": "{sizing.6x}",
+        "600": "{sizing.7x}",
+        "650": "{sizing.8x}",
+        "700": "{sizing.9x}",
+        "750": "{sizing.10x}",
+        "800": "{sizing.11x}",
+        "850": "{sizing.12x}",
+        "900": "{sizing.16x}"
+      },
+      "gap": {
+        "100": "{spacing.1x}",
+        "200": "{spacing.2x}",
+        "300": "{spacing.3x}",
+        "400": "{spacing.4x}"
+      }
+    },
+    "data": {
+      "padding": {
+        "100": "{spacing.1x}",
+        "200": "{spacing.2x}",
+        "300": "{spacing.3x}",
+        "400": "{spacing.4x}",
+        "500": "{spacing.5x}"
+      },
+      "icon": {
+        "size": {
+          "100": "{sizing.4x}",
+          "200": "{sizing.5x}",
+          "300": "{sizing.6x}",
+          "400": "{sizing.7x}",
+          "500": "{sizing.8x}",
+          "600": "{sizing.9x}",
+          "700": "{sizing.10x}"
+        }
+      },
+      "transitionDuration": "{transition.duration.200}",
+      "borderWidth": "{borderWidth.none}",
+      "borderRadius": "{borderRadius.100}",
+      "gap": {
+        "100": "{spacing.1x}",
+        "200": "{spacing.2x}",
+        "300": "{spacing.3x}"
+      },
+      "width": {
+        "100": "{sizing.min}",
+        "200": "{sizing.1x}",
+        "300": "{sizing.2x}",
+        "400": "{sizing.20x}"
+      }
+    },
+    "media": {
+      "size": {
+        "100": "{sizing.1x}",
+        "200": "{sizing.2x}",
+        "300": "{sizing.8x}",
+        "400": "{sizing.10x}",
+        "500": "{sizing.14x}",
+        "600": "{sizing.16x}"
+      },
+      "borderRadius": {
+        "100": "{borderRadius.200}",
+        "200": "{borderRadius.300}",
+        "300": "{borderRadius.400}",
+        "400": "{borderRadius.500}",
+        "max": "{borderRadius.max}"
+      },
+      "icon": {
+        "size": {
+          "100": "{sizing.4x}",
+          "200": "{sizing.6x}",
+          "300": "{sizing.8x}"
+        }
+      },
+      "transitionDuration": "{transition.duration.200}",
+      "padding": {
+        "100": "{spacing.1x}",
+        "200": "{spacing.2x}",
+        "300": "{spacing.3x}",
+        "400": "{spacing.4x}",
+        "500": "{spacing.5x}",
+        "600": "{spacing.6x}"
+      },
+      "gap": {
+        "100": "{spacing.1x}",
+        "200": "{spacing.2x}"
+      }
+    },
+    "controls": {
+      "iconOnly": {
+        "100": "{sizing.2x}",
+        "200": "{sizing.4x}",
+        "300": "{sizing.5x}",
+        "400": "{sizing.6x}",
+        "500": "{sizing.7x}",
+        "600": "{sizing.8x}",
+        "700": "{sizing.10x}",
+        "800": "{sizing.11x}",
+        "850": "{sizing.14x}",
+        "900": "{sizing.16x}"
+      },
+      "borderRadius": {
+        "100": "{borderRadius.300}",
+        "200": "{borderRadius.400}",
+        "max": "{borderRadius.max}"
+      },
+      "transitionDuration": "{transition.duration.200}",
+      "padding": {
+        "100": "{spacing.1x}",
+        "200": "{spacing.2x}",
+        "300": "{spacing.3x}",
+        "400": "{spacing.4x}",
+        "500": "{spacing.5x}",
+        "600": "{spacing.6x}"
+      },
+      "gap": {
+        "100": "{spacing.2x}",
+        "200": "{spacing.3x}",
+        "300": "{spacing.4x}"
+      },
+      "width": {
+        "100": "{sizing.min}"
+      }
+    },
+    "colorScheme": {
+      "light": {
+        "success": {
+          "50": "{colors.solid.green.50}",
+          "100": "{colors.solid.green.100}",
+          "200": "{colors.solid.green.200}",
+          "300": "{colors.solid.green.300}",
+          "400": "{colors.solid.green.400}",
+          "500": "{colors.solid.green.500}",
+          "600": "{colors.solid.green.600}",
+          "700": "{colors.solid.green.700}",
+          "800": "{colors.solid.green.800}",
+          "900": "{colors.solid.green.900}",
+          "950": "{colors.solid.green.950}"
+        },
+        "info": {
+          "50": "{colors.solid.blue.50}",
+          "100": "{colors.solid.blue.100}",
+          "200": "{colors.solid.blue.200}",
+          "300": "{colors.solid.blue.300}",
+          "400": "{colors.solid.blue.400}",
+          "500": "{colors.solid.blue.500}",
+          "600": "{colors.solid.blue.600}",
+          "700": "{colors.solid.blue.700}",
+          "800": "{colors.solid.blue.800}",
+          "900": "{colors.solid.blue.900}",
+          "950": "{colors.solid.blue.950}"
+        },
+        "warn": {
+          "50": "{colors.solid.yellow.50}",
+          "100": "{colors.solid.yellow.100}",
+          "200": "{colors.solid.yellow.200}",
+          "300": "{colors.solid.yellow.300}",
+          "400": "{colors.solid.yellow.400}",
+          "500": "{colors.solid.yellow.500}",
+          "600": "{colors.solid.yellow.600}",
+          "700": "{colors.solid.yellow.700}",
+          "800": "{colors.solid.yellow.800}",
+          "900": "{colors.solid.yellow.900}",
+          "950": "{colors.solid.yellow.950}"
+        },
+        "transparent": "rgba(255, 255, 255, 0.0001)",
+        "help": {
+          "50": "{colors.solid.purple.50}",
+          "100": "{colors.solid.purple.100}",
+          "200": "{colors.solid.purple.200}",
+          "300": "{colors.solid.purple.300}",
+          "400": "{colors.solid.purple.400}",
+          "500": "{colors.solid.purple.500}",
+          "600": "{colors.solid.purple.600}",
+          "700": "{colors.solid.purple.700}",
+          "800": "{colors.solid.purple.800}",
+          "900": "{colors.solid.purple.900}",
+          "950": "{colors.solid.purple.950}"
+        },
+        "error": {
+          "50": "{colors.solid.red.50}",
+          "100": "{colors.solid.red.100}",
+          "200": "{colors.solid.red.200}",
+          "300": "{colors.solid.red.300}",
+          "400": "{colors.solid.red.400}",
+          "500": "{colors.solid.red.500}",
+          "600": "{colors.solid.red.600}",
+          "700": "{colors.solid.red.700}",
+          "800": "{colors.solid.red.800}",
+          "900": "{colors.solid.red.900}",
+          "950": "{colors.solid.red.950}"
+        },
+        "surface": {
+          "0": "{colors.alpha.white.1000}",
+          "50": "{colors.solid.zinc.50}",
+          "100": "{colors.solid.zinc.100}",
+          "200": "{colors.solid.zinc.200}",
+          "300": "{colors.solid.zinc.300}",
+          "400": "{colors.solid.zinc.400}",
+          "500": "{colors.solid.zinc.500}",
+          "600": "{colors.solid.zinc.600}",
+          "700": "{colors.solid.zinc.700}",
+          "800": "{colors.solid.zinc.800}",
+          "900": "{colors.solid.zinc.900}",
+          "950": "{colors.solid.zinc.950}"
+        },
+        "primary": {
+          "color": "{colors.solid.green.500}",
+          "contrastColor": "{colors.alpha.white.1000}",
+          "hoverColor": "{colors.solid.green.600}",
+          "activeColor": "{colors.solid.green.700}",
+          "hoverBackground": "{colors.solid.green.50}",
+          "activeBackground": "{colors.solid.green.100}",
+          "borderColor": "{colors.solid.green.200}",
+          "selectedBackground": "{colors.solid.green.500}",
+          "selectedHoverBackground": "{colors.solid.green.600}"
+        },
+        "highlight": {
+          "background": "{colors.solid.zinc.900}",
+          "focusBackground": "{colors.solid.zinc.800}",
+          "color": "{colors.alpha.white.1000}",
+          "focusColor": "{colors.alpha.white.1000}"
+        },
+        "focusRing": {
+          "shadow": "{shadows.200}",
+          "extend": {
+            "invalid": "{colors.solid.red.200}",
+            "success": "{colors.solid.green.200}",
+            "warning": "{colors.solid.yellow.200}",
+            "info": "{colors.solid.blue.200}"
+          }
+        },
+        "mask": {
+          "background": "{colors.alpha.black.400}",
+          "color": "{surface.200}"
+        },
+        "form": {
+          "background": "{colors.alpha.white.1000}",
+          "disabledBackground": "{colors.solid.zinc.200}",
+          "readonlyBackground": "{colors.solid.zinc.100}",
+          "filledBackground": "{colors.alpha.white.1000}",
+          "filledHoverBackground": "{colors.alpha.white.1000}",
+          "filledFocusBackground": "{colors.alpha.white.1000}",
+          "borderColor": "{colors.solid.zinc.300}",
+          "hoverBorderPrimaryColor": "{colors.solid.zinc.900}",
+          "focusBorderPrimaryColor": "{colors.solid.zinc.900}",
+          "hoverBorderSecondaryColor": "{colors.solid.green.600}",
+          "focusBorderSecondaryColor": "{colors.solid.green.600}",
+          "invalidBorderColor": "{colors.solid.red.400}",
+          "color": "{colors.solid.zinc.950}",
+          "disabledColor": "{colors.solid.zinc.500}",
+          "placeholderColor": "{colors.solid.zinc.500}",
+          "invalidPlaceholderColor": "{colors.solid.red.600}",
+          "floatLabelColor": "{colors.solid.zinc.500}",
+          "floatLabelFocusColor": "{colors.solid.zinc.500}",
+          "floatLabelActiveColor": "{colors.solid.zinc.500}",
+          "floatLabelInvalidColor": "{form.invalidPlaceholderColor}",
+          "iconColor": "{colors.solid.zinc.950}",
+          "backgroundHandler": "{colors.alpha.white.1000}",
+          "shadow": "{shadows.200}"
+        },
+        "text": {
+          "color": "{colors.solid.zinc.900}",
+          "extend": {
+            "colorPrimaryStatic": "{colors.solid.zinc.900}",
+            "colorSecondaryStatic": "{colors.alpha.white.1000}",
+            "colorInverted": "{colors.alpha.white.1000}"
+          },
+          "hoverColor": "{colors.solid.zinc.700}",
+          "primaryColor": "{colors.solid.green.600}",
+          "hoverPrimaryColor": "{colors.solid.green.700}",
+          "secondaryColor": "{colors.solid.zinc.600}",
+          "hoverSecondaryColor": "{colors.solid.zinc.400}",
+          "mutedColor": "{colors.solid.zinc.500}",
+          "hoverMutedColor": "{colors.solid.zinc.300}",
+          "disabledColor": "{colors.solid.zinc.300}",
+          "infoColor": "{colors.solid.blue.600}",
+          "successColor": "{colors.solid.green.700}",
+          "dangerColor": "{colors.solid.red.600}",
+          "warningColor": "{colors.solid.yellow.600}",
+          "helpColor": "{colors.solid.purple.600}"
+        },
+        "content": {
+          "background": "{colors.alpha.white.1000}",
+          "hoverBackground": "{colors.solid.zinc.100}",
+          "borderColor": "{colors.solid.zinc.200}",
+          "activeBorderColor": "{colors.solid.zinc.800}",
+          "color": "{text.color}",
+          "hoverColor": "{text.hoverColor}",
+          "shadow": "{shadows.400}"
+        },
+        "list": {
+          "option": {
+            "background": "{colors.alpha.white.1000}",
+            "focusBackground": "{colors.solid.zinc.100}",
+            "selectedBackground": "{colors.solid.zinc.900}",
+            "selectedFocusBackground": "{colors.solid.zinc.700}",
+            "color": "{text.color}",
+            "focusColor": "{text.color}",
+            "selectedColor": "{text.extend.colorInverted}",
+            "selectedFocusColor": "{text.extend.colorInverted}",
+            "icon": {
+              "color": "{text.color}",
+              "focusColor": "{text.color}"
+            }
+          },
+          "optionGroup": {
+            "background": "{colors.alpha.white.1000}",
+            "color": "{text.mutedColor}"
+          }
+        },
+        "overlay": {
+          "select": {
+            "background": "{colors.alpha.white.1000}",
+            "borderColor": "{colors.solid.zinc.200}",
+            "color": "{text.color}",
+            "shadow": "0 0.25rem 0.5rem {colors.alpha.black.200}"
+          },
+          "popover": {
+            "background": "{colors.alpha.white.1000}",
+            "borderColor": "{form.borderColor}",
+            "color": "{text.color}",
+            "shadow": "{shadows.400}"
+          },
+          "modal": {
+            "background": "{colors.alpha.white.1000}",
+            "backdrop": "{colors.alpha.black.300}",
+            "borderColor": "{colors.solid.zinc.200}",
+            "color": "{text.color}",
+            "shadow": "{shadows.200}"
+          }
+        },
+        "navigation": {
+          "submenuLabel": {
+            "background": "rgba(255, 255, 255, 0.0000)",
+            "color": "{text.mutedColor}"
+          },
+          "submenuIcon": {
+            "color": "{colors.solid.zinc.900}",
+            "focusColor": "{colors.solid.zinc.900}",
+            "activeColor": "{colors.alpha.white.1000}"
+          },
+          "item": {
+            "focusBackground": "{colors.solid.zinc.100}",
+            "activeBackground": "{colors.solid.zinc.900}",
+            "color": "{colors.solid.zinc.900}",
+            "focusColor": "{colors.solid.zinc.900}",
+            "icon": {
+              "color": "{colors.solid.zinc.900}",
+              "focusColor": "{colors.solid.zinc.900}",
+              "activeColor": "{colors.alpha.white.1000}"
+            },
+            "activeColor": "{colors.alpha.white.1000}"
+          },
+          "shadow": "{shadows.400}"
+        }
+      },
+      "dark": {
+        "success": {
+          "50": "{colors.solid.green.950}",
+          "100": "{colors.solid.green.900}",
+          "200": "{colors.solid.green.800}",
+          "300": "{colors.solid.green.700}",
+          "400": "{colors.solid.green.600}",
+          "500": "{colors.solid.green.500}",
+          "600": "{colors.solid.green.400}",
+          "700": "{colors.solid.green.300}",
+          "800": "{colors.solid.green.200}",
+          "900": "{colors.solid.green.100}",
+          "950": "{colors.solid.green.50}"
+        },
+        "info": {
+          "50": "{colors.solid.blue.950}",
+          "100": "{colors.solid.blue.900}",
+          "200": "{colors.solid.blue.800}",
+          "300": "{colors.solid.blue.700}",
+          "400": "{colors.solid.blue.600}",
+          "500": "{colors.solid.blue.500}",
+          "600": "{colors.solid.blue.400}",
+          "700": "{colors.solid.blue.300}",
+          "800": "{colors.solid.blue.200}",
+          "900": "{colors.solid.blue.100}",
+          "950": "{colors.solid.blue.50}"
+        },
+        "warn": {
+          "50": "{colors.solid.yellow.950}",
+          "100": "{colors.solid.yellow.900}",
+          "200": "{colors.solid.yellow.800}",
+          "300": "{colors.solid.yellow.700}",
+          "400": "{colors.solid.yellow.600}",
+          "500": "{colors.solid.yellow.500}",
+          "600": "{colors.solid.yellow.400}",
+          "700": "{colors.solid.yellow.300}",
+          "800": "{colors.solid.yellow.200}",
+          "900": "{colors.solid.yellow.100}",
+          "950": "{colors.solid.yellow.50}"
+        },
+        "transparent": "rgba(0, 0, 0, 0.0001)",
+        "help": {
+          "50": "{colors.solid.purple.950}",
+          "100": "{colors.solid.purple.900}",
+          "200": "{colors.solid.purple.800}",
+          "300": "{colors.solid.purple.700}",
+          "400": "{colors.solid.purple.600}",
+          "500": "{colors.solid.purple.500}",
+          "600": "{colors.solid.purple.400}",
+          "700": "{colors.solid.purple.300}",
+          "800": "{colors.solid.purple.200}",
+          "900": "{colors.solid.purple.100}",
+          "950": "{colors.solid.purple.50}"
+        },
+        "error": {
+          "50": "{colors.solid.red.950}",
+          "100": "{colors.solid.red.900}",
+          "200": "{colors.solid.red.800}",
+          "300": "{colors.solid.red.700}",
+          "400": "{colors.solid.red.600}",
+          "500": "{colors.solid.red.500}",
+          "600": "{colors.solid.red.400}",
+          "700": "{colors.solid.red.300}",
+          "800": "{colors.solid.red.200}",
+          "900": "{colors.solid.red.100}",
+          "950": "{colors.solid.red.50}"
+        },
+        "surface": {
+          "0": "{colors.alpha.black.1000}",
+          "50": "{colors.solid.zinc.950}",
+          "100": "{colors.solid.zinc.900}",
+          "200": "{colors.solid.zinc.800}",
+          "300": "{colors.solid.zinc.700}",
+          "400": "{colors.solid.zinc.600}",
+          "500": "{colors.solid.zinc.500}",
+          "600": "{colors.solid.zinc.400}",
+          "700": "{colors.solid.zinc.300}",
+          "800": "{colors.solid.zinc.200}",
+          "900": "{colors.solid.zinc.100}",
+          "950": "{colors.solid.zinc.50}"
+        },
+        "primary": {
+          "color": "{colors.solid.green.500}",
+          "contrastColor": "{colors.solid.zinc.900}",
+          "hoverColor": "{colors.solid.green.400}",
+          "activeColor": "{colors.solid.green.300}",
+          "hoverBackground": "{colors.solid.green.950}",
+          "activeBackground": "{colors.solid.green.900}",
+          "borderColor": "{colors.solid.green.800}",
+          "selectedBackground": "{colors.solid.green.500}",
+          "selectedHoverBackground": "{colors.solid.green.600}"
+        },
+        "highlight": {
+          "background": "{colors.solid.zinc.100}",
+          "focusBackground": "{colors.solid.zinc.200}",
+          "color": "{colors.solid.zinc.900}",
+          "focusColor": "{colors.solid.zinc.900}"
+        },
+        "focusRing": {
+          "shadow": "{shadows.200}",
+          "extend": {
+            "invalid": "{colors.solid.red.800}",
+            "success": "{colors.solid.green.800}",
+            "warning": "{colors.solid.yellow.800}",
+            "info": "{colors.solid.blue.800}"
+          }
+        },
+        "mask": {
+          "background": "{colors.alpha.black.600}",
+          "color": "{surface.800}"
+        },
+        "form": {
+          "background": "{colors.solid.zinc.950}",
+          "disabledBackground": "{colors.solid.zinc.800}",
+          "readonlyBackground": "{colors.solid.zinc.900}",
+          "filledBackground": "{colors.solid.zinc.950}",
+          "filledHoverBackground": "{colors.solid.zinc.950}",
+          "filledFocusBackground": "{colors.solid.zinc.950}",
+          "borderColor": "{colors.solid.zinc.700}",
+          "hoverBorderPrimaryColor": "{colors.solid.zinc.100}",
+          "focusBorderPrimaryColor": "{colors.solid.zinc.100}",
+          "hoverBorderSecondaryColor": "{colors.solid.green.400}",
+          "focusBorderSecondaryColor": "{colors.solid.green.400}",
+          "invalidBorderColor": "{colors.solid.red.600}",
+          "color": "{colors.alpha.white.1000}",
+          "disabledColor": "{colors.solid.zinc.500}",
+          "placeholderColor": "{colors.solid.zinc.500}",
+          "invalidPlaceholderColor": "{colors.solid.red.400}",
+          "floatLabelColor": "{colors.solid.zinc.500}",
+          "floatLabelFocusColor": "{colors.solid.zinc.500}",
+          "floatLabelActiveColor": "{colors.solid.zinc.500}",
+          "floatLabelInvalidColor": "{form.invalidPlaceholderColor}",
+          "iconColor": "{colors.alpha.white.1000}",
+          "backgroundHandler": "{colors.alpha.white.1000}",
+          "shadow": "{shadows.200}"
+        },
+        "text": {
+          "color": "{colors.alpha.white.1000}",
+          "extend": {
+            "colorPrimaryStatic": "{colors.solid.zinc.900}",
+            "colorSecondaryStatic": "{colors.alpha.white.1000}",
+            "colorInverted": "{colors.solid.zinc.900}"
+          },
+          "hoverColor": "{colors.solid.zinc.300}",
+          "primaryColor": "{colors.solid.green.400}",
+          "hoverPrimaryColor": "{colors.solid.green.300}",
+          "secondaryColor": "{colors.solid.zinc.400}",
+          "hoverSecondaryColor": "{colors.solid.zinc.600}",
+          "mutedColor": "{colors.solid.zinc.500}",
+          "hoverMutedColor": "{colors.solid.zinc.700}",
+          "disabledColor": "{colors.solid.zinc.700}",
+          "infoColor": "{colors.solid.blue.400}",
+          "successColor": "{colors.solid.green.400}",
+          "dangerColor": "{colors.solid.red.400}",
+          "warningColor": "{colors.solid.yellow.400}",
+          "helpColor": "{colors.solid.purple.400}"
+        },
+        "content": {
+          "background": "{colors.solid.zinc.900}",
+          "hoverBackground": "{colors.solid.zinc.800}",
+          "borderColor": "{colors.solid.zinc.800}",
+          "activeBorderColor": "{colors.solid.zinc.200}",
+          "color": "{text.color}",
+          "hoverColor": "{text.hoverColor}",
+          "shadow": "{shadows.400}"
+        },
+        "list": {
+          "option": {
+            "background": "{colors.solid.zinc.900}",
+            "focusBackground": "{colors.solid.zinc.800}",
+            "selectedBackground": "{colors.solid.zinc.100}",
+            "selectedFocusBackground": "{colors.solid.zinc.300}",
+            "color": "{text.color}",
+            "focusColor": "{text.color}",
+            "selectedColor": "{text.extend.colorInverted}",
+            "selectedFocusColor": "{text.extend.colorInverted}",
+            "icon": {
+              "color": "{text.color}",
+              "focusColor": "{text.color}"
+            }
+          },
+          "optionGroup": {
+            "background": "{colors.solid.zinc.900}",
+            "color": "{text.mutedColor}"
+          }
+        },
+        "overlay": {
+          "select": {
+            "background": "{colors.solid.zinc.900}",
+            "borderColor": "{colors.solid.zinc.800}",
+            "color": "{text.color}",
+            "shadow": "{shadows.400}"
+          },
+          "popover": {
+            "background": "{colors.solid.zinc.900}",
+            "borderColor": "{form.borderColor}",
+            "color": "{text.color}",
+            "shadow": "{shadows.400}"
+          },
+          "modal": {
+            "background": "{colors.solid.zinc.900}",
+            "backdrop": "{colors.alpha.black.300}",
+            "borderColor": "{colors.solid.zinc.800}",
+            "color": "{text.color}",
+            "shadow": "{shadows.200}"
+          }
+        },
+        "navigation": {
+          "submenuLabel": {
+            "background": "rgba(255, 255, 255, 0.0000)",
+            "color": "{text.mutedColor}"
+          },
+          "submenuIcon": {
+            "color": "{colors.solid.zinc.100}",
+            "focusColor": "{colors.solid.zinc.100}",
+            "activeColor": "{colors.solid.zinc.900}"
+          },
+          "item": {
+            "focusBackground": "{colors.solid.zinc.900}",
+            "activeBackground": "{colors.solid.zinc.100}",
+            "color": "{colors.alpha.white.1000}",
+            "focusColor": "{colors.alpha.white.1000}",
+            "icon": {
+              "color": "{colors.alpha.white.1000}",
+              "focusColor": "{colors.alpha.white.1000}",
+              "activeColor": "{colors.solid.zinc.900}"
+            },
+            "activeColor": "{colors.solid.zinc.900}"
+          },
+          "shadow": "{shadows.400}"
+        }
+      }
+    }
+  },
+  "components": {
+    "accordion": {
+      "extend": {
+        "extHeader": {
+          "iconSize": "{controls.iconOnly.300}",
+          "gap": "{controls.gap.100}"
+        }
+      },
+      "colorScheme": {
+        "light": {
+          "header": {
+            "background": "{transparent}",
+            "hoverBackground": "{transparent}",
+            "activeBackground": "{transparent}",
+            "activeHoverBackground": "{transparent}"
+          }
+        }
+      },
+      "header": {
+        "color": "{text.color}",
+        "hoverColor": "{text.hoverColor}",
+        "activeColor": "{text.color}",
+        "activeHoverColor": "{text.hoverColor}",
+        "borderColor": "{transparent}",
+        "padding": "{navigation.padding.300} 0 {navigation.padding.300} 0",
+        "fontWeight": "{fonts.fontWeight.bold}",
+        "borderRadius": "{borderRadius.none}",
+        "borderWidth": "{borderWidth.none}",
+        "focusRing": {
+          "width": "{focusRing.width}",
+          "style": "{focusRing.style}",
+          "color": "{focusRing.color}",
+          "offset": "{focusRing.offset}",
+          "shadow": "inset {focus.ring.shadow}"
+        },
+        "toggleIcon": {
+          "color": "{text.color}",
+          "hoverColor": "{text.hoverColor}",
+          "activeColor": "{text.color}",
+          "activeHoverColor": "{text.hoverColor}"
+        },
+        "last": {
+          "bottomBorderRadius": "{borderRadius.none}",
+          "activeBottomBorderRadius": "{borderRadius.none}"
+        },
+        "first": {
+          "borderWidth": "{borderWidth.none}",
+          "topBorderRadius": "{borderRadius.none}"
+        }
+      },
+      "root": {
+        "transitionDuration": "{controls.transitionDuration}"
+      },
+      "panel": {
+        "borderWidth": "{borderWidth.none} {borderWidth.none} {navigation.width.100} {borderWidth.none}",
+        "borderColor": "{form.borderColor}"
+      },
+      "content": {
+        "borderWidth": "{content.borderWidth} {borderWidth.none} {borderWidth.none} {borderWidth.none}",
+        "borderColor": "{transparent}",
+        "background": "{transparent}",
+        "color": "{text.color}",
+        "padding": "0 {content.padding.400} {content.padding.300} {content.padding.400}"
+      }
+    },
+    "autocomplete": {
+      "extend": {
+        "extOption": {
+          "gap": "{form.gap.200}"
+        },
+        "extOptionGroup": {
+          "gap": "{form.gap.200}"
+        }
+      },
+      "colorScheme": {
+        "light": {
+          "chip": {
+            "focusBackground": "{chip.colorScheme.light.root.background}",
+            "focusColor": "{chip.colorScheme.light.root.color}"
+          },
+          "dropdown": {
+            "background": "{form.background}",
+            "hoverBackground": "{form.background}",
+            "activeBackground": "{form.background}",
+            "color": "{form.color}",
+            "hoverColor": "{form.color}",
+            "activeColor": "{form.color}"
+          }
+        }
+      },
+      "root": {
+        "background": "{form.background}",
+        "disabledBackground": "{form.disabledBackground}",
+        "filledBackground": "{form.filledBackground}",
+        "filledHoverBackground": "{form.filledHoverBackground}",
+        "filledFocusBackground": "{form.filledFocusBackground}",
+        "borderColor": "{form.borderColor}",
+        "hoverBorderColor": "{form.hoverBorderSecondaryColor}",
+        "focusBorderColor": "{form.focusBorderSecondaryColor}",
+        "invalidBorderColor": "{form.invalidBorderColor}",
+        "color": "{form.color}",
+        "disabledColor": "{form.disabledColor}",
+        "placeholderColor": "{form.placeholderColor}",
+        "invalidPlaceholderColor": "{form.invalidPlaceholderColor}",
+        "shadow": "0",
+        "paddingX": "{form.padding.300}",
+        "paddingY": "{form.padding.300}",
+        "borderRadius": "{form.borderRadius.200}",
+        "transitionDuration": "{form.transitionDuration}",
+        "focusRing": {
+          "width": "{focusRing.width}",
+          "style": "{form.focusRing.style}",
+          "color": "{form.focusRing.color}",
+          "offset": "{form.focusRing.offset}",
+          "shadow": "0"
+        }
+      },
+      "overlay": {
+        "background": "{overlay.select.background}",
+        "borderColor": "{overlay.select.borderColor}",
+        "borderRadius": "{overlay.select.borderRadius}",
+        "color": "{overlay.select.color}",
+        "shadow": "{form.shadow}"
+      },
+      "list": {
+        "padding": "{list.padding}",
+        "gap": "{list.gap.100}"
+      },
+      "option": {
+        "focusBackground": "{list.option.focusBackground}",
+        "selectedBackground": "{list.option.selectedBackground}",
+        "selectedFocusBackground": "{list.option.selectedFocusBackground}",
+        "color": "{list.option.color}",
+        "focusColor": "{list.option.focusColor}",
+        "selectedColor": "{list.option.selectedColor}",
+        "selectedFocusColor": "{list.option.selectedFocusColor}",
+        "padding": "{list.option.padding}",
+        "borderRadius": "{list.option.borderRadius}"
+      },
+      "optionGroup": {
+        "background": "{list.optionGroup.background}",
+        "color": "{list.optionGroup.color}",
+        "fontWeight": "{fonts.fontWeight.demibold}",
+        "padding": "{list.optionGroup.padding}"
+      },
+      "dropdown": {
+        "width": "{form.width.300}",
+        "borderColor": "{form.borderColor}",
+        "hoverBorderColor": "{form.hoverBorderSecondaryColor}",
+        "activeBorderColor": "{form.focusBorderSecondaryColor}",
+        "borderRadius": "{form.borderRadius.200}",
+        "focusRing": {
+          "width": "{focusRing.width}",
+          "style": "{form.focusRing.style}",
+          "color": "{form.focusRing.color}",
+          "offset": "{form.focusRing.offset}",
+          "shadow": "0"
+        },
+        "sm": {
+          "width": "{form.width.200}"
+        },
+        "lg": {
+          "width": "{form.width.400}"
+        }
+      },
+      "chip": {
+        "borderRadius": "{chip.root.borderRadius}"
+      },
+      "emptyMessage": {
+        "padding": "{list.option.padding}"
+      }
+    },
+    "avatar": {
+      "extend": {
+        "borderColor": "{form.borderColor}",
+        "circle": {
+          "borderRadius": "{media.borderRadius.max}"
+        }
+      },
+      "root": {
+        "width": "{media.size.300}",
+        "height": "{media.size.300}",
+        "fontSize": "{fonts.fontSize.200}",
+        "color": "{text.extend.colorPrimaryStatic}",
+        "background": "{primary.color}",
+        "borderRadius": "{media.borderRadius.200}"
+      },
+      "icon": {
+        "size": "{media.icon.size.100}"
+      },
+      "group": {
+        "borderColor": "{content.background}",
+        "offset": "-{media.padding.300}"
+      },
+      "lg": {
+        "width": "{media.size.400}",
+        "height": "{media.size.400}",
+        "fontSize": "{fonts.fontSize.300}",
+        "icon": {
+          "size": "{media.icon.size.100}"
+        },
+        "group": {
+          "offset": "-{media.padding.300}"
+        }
+      },
+      "xl": {
+        "width": "{media.size.500}",
+        "height": "{media.size.500}",
+        "icon": {
+          "size": "{media.icon.size.200}"
+        },
+        "group": {
+          "offset": "-{media.padding.600}"
+        },
+        "fontSize": "{fonts.fontSize.500}"
+      }
+    },
+    "badge": {
+      "extend": {
+        "extDot": {
+          "success": {
+            "background": "{colors.solid.green.400}"
+          },
+          "info": {
+            "background": "{info.400}"
+          },
+          "warn": {
+            "background": "{warn.400}"
+          },
+          "danger": {
+            "background": "{error.400}"
+          },
+          "lg": {
+            "size": "{feedback.width.400}"
+          },
+          "xlg": {
+            "size": "{feedback.width.500}"
+          }
+        },
+        "ext": {
+          "padding": "0rem"
+        }
+      },
+      "colorScheme": {
+        "light": {
+          "primary": {
+            "color": "{text.extend.colorPrimaryStatic}",
+            "background": "{primary.color}"
+          },
+          "secondary": {
+            "color": "{text.extend.colorInverted}",
+            "background": "{surface.900}"
+          },
+          "success": {
+            "color": "{success.900}",
+            "background": "{success.300}"
+          },
+          "info": {
+            "color": "{info.900}",
+            "background": "{info.300}"
+          },
+          "warn": {
+            "color": "{warn.900}",
+            "background": "{warn.300}"
+          },
+          "danger": {
+            "color": "{error.900}",
+            "background": "{error.300}"
+          }
+        }
+      },
+      "root": {
+        "borderRadius": "{feedback.width.300}",
+        "padding": "{feedback.padding.100}",
+        "fontSize": "{fonts.fontSize.100}",
+        "fontWeight": "{fonts.fontWeight.regular}",
+        "minWidth": "{feedback.width.600}",
+        "height": "{feedback.height.500}"
+      },
+      "dot": {
+        "size": "{feedback.width.300}"
+      },
+      "sm": {
+        "fontSize": "{fonts.fontSize.100}",
+        "minWidth": "0rem",
+        "height": "0rem"
+      },
+      "lg": {
+        "fontSize": "{fonts.fontSize.100}",
+        "minWidth": "{feedback.width.650}",
+        "height": "{feedback.height.600}"
+      },
+      "xl": {
+        "fontSize": "{fonts.fontSize.100}",
+        "minWidth": "{feedback.width.700}",
+        "height": "{feedback.height.650}"
+      }
+    },
+    "breadcrumb": {
+      "extend": {
+        "hoverBackground": "{surface.100}",
+        "iconSize": "{navigation.size.300}",
+        "extItem": {
+          "padding": "{navigation.padding.100}"
+        }
+      },
+      "root": {
+        "padding": "0rem",
+        "background": "{transparent}",
+        "gap": "0rem",
+        "transitionDuration": "{form.transitionDuration}"
+      },
+      "focusRing": {
+        "width": "{focusRing.width}",
+        "style": "{focusRing.style}",
+        "color": "{focusRing.color}",
+        "offset": "{focusRing.offset}",
+        "shadow": "{focusRing.shadow}"
+      },
+      "item": {
+        "color": "{text.color}",
+        "hoverColor": "{text.hoverColor}",
+        "borderRadius": "{navigation.borderRadius}",
+        "gap": "{navigation.item.gap}",
+        "icon": {
+          "color": "{text.color}",
+          "hoverColor": "{text.hoverColor}"
+        }
+      },
+      "separator": {
+        "color": "{text.color}"
+      }
+    },
+    "button": {
+      "extend": {
+        "disabledBackground": "{form.disabledBackground}",
+        "extOutlined": {
+          "danger": {
+            "focusBackground": "{transparent}"
+          },
+          "warn": {
+            "focusBackground": "{transparent}"
+          },
+          "info": {
+            "focusBackground": "{transparent}"
+          },
+          "help": {
+            "focusBackground": "{transparent}"
+          },
+          "success": {
+            "focusBackground": "{transparent}"
+          }
+        },
+        "disabledColor": "{form.disabledColor}",
+        "extText": {
+          "danger": {
+            "focusBackground": "{transparent}"
+          },
+          "warn": {
+            "focusBackground": "{transparent}"
+          },
+          "info": {
+            "focusBackground": "{transparent}"
+          },
+          "help": {
+            "focusBackground": "{transparent}"
+          },
+          "success": {
+            "focusBackground": "{transparent}"
+          }
+        },
+        "extLink": {
+          "background": "{transparent}",
+          "colorHover": "{text.hoverColor}",
+          "paddingX": "0rem",
+          "paddingY": "{controls.padding.100}",
+          "sm": {
+            "iconOnlyWidth": "{controls.iconOnly.200}"
+          },
+          "base": {
+            "iconOnlyWidth": "{controls.iconOnly.400}"
+          },
+          "lg": {
+            "iconOnlyWidth": "{controls.iconOnly.500}"
+          },
+          "xlg": {
+            "iconOnlyWidth": "{controls.iconOnly.600}"
+          }
+        },
+        "extSm": {
+          "borderRadius": "{controls.borderRadius.100}",
+          "gap": "{controls.gap.100}"
+        },
+        "extLg": {
+          "borderRadius": "{controls.borderRadius.200}",
+          "gap": "{controls.gap.200}",
+          "height": "{controls.iconOnly.850}"
+        },
+        "extXlg": {
+          "borderRadius": "{controls.borderRadius.200}",
+          "gap": "{controls.gap.200}",
+          "iconOnlyWidth": "{controls.iconOnly.900}",
+          "paddingX": "{controls.padding.600}",
+          "paddingY": "{controls.padding.500}",
+          "height": "{controls.iconOnly.900}"
+        },
+        "borderWidth": "{controls.width.100}",
+        "iconSize": {
+          "sm": "{controls.iconOnly.200}",
+          "md": "{controls.iconOnly.300}",
+          "lg": "{controls.iconOnly.400}"
+        }
+      },
+      "colorScheme": {
+        "light": {
+          "root": {
+            "primary": {
+              "background": "{primary.color}",
+              "hoverBackground": "{primary.hoverColor}",
+              "activeBackground": "{primary.activeColor}",
+              "borderColor": "{transparent}",
+              "hoverBorderColor": "{transparent}",
+              "activeBorderColor": "{transparent}",
+              "color": "{text.extend.colorPrimaryStatic}",
+              "hoverColor": "{text.extend.colorPrimaryStatic}",
+              "activeColor": "{text.extend.colorPrimaryStatic}",
+              "focusRing": {
+                "color": "{focusRing.color}",
+                "shadow": "{focusRing.shadow}"
+              }
+            },
+            "secondary": {
+              "background": "{surface.900}",
+              "hoverBackground": "{surface.800}",
+              "activeBackground": "{surface.700}",
+              "borderColor": "{transparent}",
+              "hoverBorderColor": "{transparent}",
+              "activeBorderColor": "{transparent}",
+              "color": "{text.extend.colorInverted}",
+              "hoverColor": "{text.extend.colorInverted}",
+              "activeColor": "{text.extend.colorInverted}",
+              "focusRing": {
+                "color": "{focusRing.color}",
+                "shadow": "{focusRing.shadow}"
+              }
+            },
+            "contrast": {
+              "background": "{surface.200}",
+              "hoverBackground": "{surface.300}",
+              "activeBackground": "{surface.400}",
+              "borderColor": "{transparent}",
+              "hoverBorderColor": "{transparent}",
+              "activeBorderColor": "{transparent}",
+              "color": "{text.color}",
+              "hoverColor": "{text.color}",
+              "activeColor": "{text.color}",
+              "focusRing": {
+                "color": "{focusRing.color}",
+                "shadow": "{focusRing.shadow}"
+              }
+            },
+            "info": {
+              "background": "{info.300}",
+              "hoverBackground": "{info.400}",
+              "activeBackground": "{info.500}",
+              "borderColor": "{transparent}",
+              "hoverBorderColor": "{transparent}",
+              "activeBorderColor": "{transparent}",
+              "color": "{info.900}",
+              "hoverColor": "{info.950}",
+              "activeColor": "{info.900}"
+            },
+            "success": {
+              "background": "{success.300}",
+              "hoverBackground": "{success.400}",
+              "activeBackground": "{success.500}",
+              "borderColor": "{transparent}",
+              "hoverBorderColor": "{transparent}",
+              "activeBorderColor": "{transparent}",
+              "color": "{success.900}",
+              "hoverColor": "{success.950}",
+              "activeColor": "{success.900}"
+            },
+            "warn": {
+              "background": "{warn.300}",
+              "hoverBackground": "{warn.400}",
+              "activeBackground": "{warn.500}",
+              "borderColor": "{transparent}",
+              "hoverBorderColor": "{transparent}",
+              "activeBorderColor": "{transparent}",
+              "color": "{warn.900}",
+              "hoverColor": "{warn.950}",
+              "activeColor": "{warn.900}"
+            },
+            "help": {
+              "background": "{help.300}",
+              "hoverBackground": "{help.400}",
+              "activeBackground": "{help.500}",
+              "borderColor": "{transparent}",
+              "hoverBorderColor": "{transparent}",
+              "activeBorderColor": "{transparent}",
+              "color": "{help.900}",
+              "hoverColor": "{help.950}",
+              "activeColor": "{help.900}"
+            },
+            "danger": {
+              "background": "{error.300}",
+              "hoverBackground": "{error.400}",
+              "activeBackground": "{error.500}",
+              "borderColor": "{transparent}",
+              "hoverBorderColor": "{transparent}",
+              "activeBorderColor": "{transparent}",
+              "color": "{error.900}",
+              "hoverColor": "{error.950}",
+              "activeColor": "{error.900}"
+            }
+          },
+          "outlined": {
+            "primary": {
+              "hoverBackground": "{primary.hoverBackground}",
+              "activeBackground": "{primary.activeBackground}",
+              "borderColor": "{primary.borderColor}",
+              "color": "{primary.color}"
+            },
+            "success": {
+              "hoverBackground": "{success.100}",
+              "activeBackground": "{success.200}",
+              "borderColor": "{success.600}",
+              "color": "{success.600}"
+            },
+            "info": {
+              "hoverBackground": "{info.100}",
+              "activeBackground": "{info.200}",
+              "borderColor": "{info.600}",
+              "color": "{info.600}"
+            },
+            "warn": {
+              "hoverBackground": "{warn.100}",
+              "activeBackground": "{warn.200}",
+              "borderColor": "{warn.600}",
+              "color": "{warn.600}"
+            },
+            "help": {
+              "hoverBackground": "{help.100}",
+              "activeBackground": "{help.200}",
+              "borderColor": "{help.600}",
+              "color": "{help.600}"
+            },
+            "danger": {
+              "hoverBackground": "{error.100}",
+              "activeBackground": "{error.200}",
+              "borderColor": "{error.600}",
+              "color": "{error.600}"
+            }
+          },
+          "text": {
+            "primary": {
+              "hoverBackground": "{surface.100}",
+              "activeBackground": "{surface.200}",
+              "color": "{text.color}"
+            },
+            "success": {
+              "hoverBackground": "{success.100}",
+              "activeBackground": "{success.200}",
+              "color": "{success.600}"
+            },
+            "info": {
+              "hoverBackground": "{info.100}",
+              "activeBackground": "{info.200}",
+              "color": "{info.600}"
+            },
+            "warn": {
+              "hoverBackground": "{warn.100}",
+              "activeBackground": "{warn.200}",
+              "color": "{warn.600}"
+            },
+            "help": {
+              "hoverBackground": "{help.100}",
+              "activeBackground": "{help.200}",
+              "color": "{help.600}"
+            },
+            "danger": {
+              "hoverBackground": "{error.100}",
+              "activeBackground": "{error.200}",
+              "color": "{error.600}"
+            }
+          },
+          "link": {
+            "color": "{text.color}",
+            "hoverColor": "{text.hoverColor}",
+            "activeColor": "{text.mutedColor}"
+          }
+        },
+        "dark": {
+          "root": {
+            "primary": {
+              "background": "{primary.color}",
+              "hoverBackground": "{primary.hoverColor}",
+              "activeBackground": "{primary.activeColor}",
+              "borderColor": "{transparent}",
+              "hoverBorderColor": "{transparent}",
+              "activeBorderColor": "{transparent}",
+              "color": "{text.extend.colorPrimaryStatic}",
+              "hoverColor": "{text.extend.colorPrimaryStatic}",
+              "activeColor": "{text.extend.colorPrimaryStatic}",
+              "focusRing": {
+                "color": "{focusRing.color}",
+                "shadow": "{focusRing.shadow}"
+              }
+            },
+            "secondary": {
+              "background": "{surface.200}",
+              "hoverBackground": "{surface.300}",
+              "activeBackground": "{surface.400}",
+              "borderColor": "{transparent}",
+              "hoverBorderColor": "{transparent}",
+              "activeBorderColor": "{transparent}",
+              "color": "{surface.950}",
+              "hoverColor": "{surface.950}",
+              "activeColor": "{surface.950}",
+              "focusRing": {
+                "color": "{focusRing.color}",
+                "shadow": "{focusRing.shadow}"
+              }
+            },
+            "contrast": {
+              "background": "{surface.950}",
+              "hoverBackground": "{surface.900}",
+              "activeBackground": "{surface.800}",
+              "borderColor": "{transparent}",
+              "hoverBorderColor": "{transparent}",
+              "activeBorderColor": "{transparent}",
+              "color": "{surface.0}",
+              "hoverColor": "{surface.0}",
+              "activeColor": "{surface.0}",
+              "focusRing": {
+                "color": "{focusRing.color}",
+                "shadow": "{focusRing.shadow}"
+              }
+            },
+            "info": {
+              "background": "{info.500}",
+              "hoverBackground": "{info.400}",
+              "activeBackground": "{info.300}",
+              "borderColor": "{transparent}",
+              "hoverBorderColor": "{transparent}",
+              "activeBorderColor": "{transparent}",
+              "color": "{text.extend.colorPrimaryStatic}",
+              "hoverColor": "{text.extend.colorPrimaryStatic}",
+              "activeColor": "{text.extend.colorPrimaryStatic}"
+            },
+            "success": {
+              "background": "{success.500}",
+              "hoverBackground": "{success.400}",
+              "activeBackground": "{success.300}",
+              "borderColor": "{transparent}",
+              "hoverBorderColor": "{transparent}",
+              "activeBorderColor": "{transparent}",
+              "color": "{text.extend.colorPrimaryStatic}",
+              "hoverColor": "{text.extend.colorPrimaryStatic}",
+              "activeColor": "{text.extend.colorPrimaryStatic}"
+            },
+            "warn": {
+              "background": "{warn.500}",
+              "hoverBackground": "{warn.400}",
+              "activeBackground": "{warn.300}",
+              "borderColor": "{transparent}",
+              "hoverBorderColor": "{transparent}",
+              "activeBorderColor": "{transparent}",
+              "color": "{text.extend.colorPrimaryStatic}",
+              "hoverColor": "{text.extend.colorPrimaryStatic}",
+              "activeColor": "{text.extend.colorPrimaryStatic}"
+            },
+            "help": {
+              "background": "{help.500}",
+              "hoverBackground": "{help.400}",
+              "activeBackground": "{help.300}",
+              "borderColor": "{transparent}",
+              "hoverBorderColor": "{transparent}",
+              "activeBorderColor": "{transparent}",
+              "color": "{text.extend.colorPrimaryStatic}",
+              "hoverColor": "{text.extend.colorPrimaryStatic}",
+              "activeColor": "{text.extend.colorPrimaryStatic}"
+            },
+            "danger": {
+              "background": "{error.500}",
+              "hoverBackground": "{error.400}",
+              "activeBackground": "{error.300}",
+              "borderColor": "{transparent}",
+              "hoverBorderColor": "{transparent}",
+              "activeBorderColor": "{transparent}",
+              "color": "{text.extend.colorPrimaryStatic}",
+              "hoverColor": "{text.extend.colorPrimaryStatic}",
+              "activeColor": "{text.extend.colorPrimaryStatic}"
+            }
+          },
+          "outlined": {
+            "primary": {
+              "hoverBackground": "{primary.hoverBackground}",
+              "activeBackground": "{primary.activeBackground}",
+              "borderColor": "{primary.borderColor}",
+              "color": "{primary.color}"
+            },
+            "success": {
+              "hoverBackground": "{success.950}",
+              "activeBackground": "{success.900}",
+              "borderColor": "{success.500}",
+              "color": "{success.500}"
+            },
+            "info": {
+              "hoverBackground": "{info.950}",
+              "activeBackground": "{info.900}",
+              "borderColor": "{info.500}",
+              "color": "{info.500}"
+            },
+            "warn": {
+              "hoverBackground": "{warn.950}",
+              "activeBackground": "{warn.900}",
+              "borderColor": "{warn.500}",
+              "color": "{warn.500}"
+            },
+            "help": {
+              "hoverBackground": "{help.950}",
+              "activeBackground": "{help.900}",
+              "borderColor": "{help.500}",
+              "color": "{help.500}"
+            },
+            "danger": {
+              "hoverBackground": "{error.950}",
+              "activeBackground": "{error.900}",
+              "borderColor": "{error.500}",
+              "color": "{error.500}"
+            }
+          },
+          "text": {
+            "primary": {
+              "hoverBackground": "{surface.800}",
+              "activeBackground": "{surface.700}",
+              "color": "{text.color}"
+            },
+            "success": {
+              "hoverBackground": "{success.950}",
+              "activeBackground": "{success.900}",
+              "color": "{success.500}"
+            },
+            "info": {
+              "hoverBackground": "{info.950}",
+              "activeBackground": "{info.900}",
+              "color": "{info.500}"
+            },
+            "warn": {
+              "hoverBackground": "{warn.950}",
+              "activeBackground": "{warn.900}",
+              "color": "{warn.500}"
+            },
+            "help": {
+              "hoverBackground": "{help.950}",
+              "activeBackground": "{help.900}",
+              "color": "{help.500}"
+            },
+            "danger": {
+              "hoverBackground": "{error.950}",
+              "activeBackground": "{error.900}",
+              "color": "{error.500}"
+            }
+          },
+          "link": {
+            "color": "{text.color}",
+            "hoverColor": "{text.hoverColor}",
+            "activeColor": "{text.mutedColor}"
+          }
+        }
+      },
+      "root": {
+        "borderRadius": "{controls.borderRadius.100}",
+        "roundedBorderRadius": "{controls.borderRadius.max}",
+        "gap": "{controls.gap.100}",
+        "fontSize": "{fonts.fontSize.200}",
+        "paddingX": "{controls.padding.400}",
+        "paddingY": "{controls.padding.200}",
+        "iconOnlyWidth": "{controls.iconOnly.700}",
+        "raisedShadow": "none",
+        "badgeSize": "{feedback.width.500}",
+        "transitionDuration": "{controls.transitionDuration}",
+        "focusRing": {
+          "width": "{focusRing.width}",
+          "style": "{focusRing.style}",
+          "offset": "{focusRing.offset}"
+        },
+        "sm": {
+          "fontSize": "{fonts.fontSize.200}",
+          "iconOnlyWidth": "{controls.iconOnly.600}",
+          "paddingX": "{controls.padding.300}",
+          "paddingY": "{controls.padding.200}"
+        },
+        "lg": {
+          "fontSize": "{fonts.fontSize.500}",
+          "iconOnlyWidth": "{controls.iconOnly.850}",
+          "paddingX": "{controls.padding.600}",
+          "paddingY": "{controls.padding.400}"
+        },
+        "label": {
+          "fontWeight": "{fonts.fontWeight.demibold}"
+        }
+      }
+    },
+    "card": {
+      "extend": {
+        "borderColor": "{content.borderColor}",
+        "borderWidth": "{content.borderWidth}"
+      },
+      "root": {
+        "background": "{content.background}",
+        "borderRadius": "{content.gap.400}",
+        "color": "{content.color}"
+      },
+      "body": {
+        "padding": "{content.padding.300}",
+        "gap": "{content.gap.400}"
+      },
+      "caption": {
+        "gap": "{content.gap.100}"
+      },
+      "title": {
+        "fontSize": "{fonts.fontSize.400}",
+        "fontWeight": "{fonts.fontWeight.demibold}"
+      },
+      "subtitle": {
+        "color": "{text.mutedColor}"
+      }
+    },
+    "carousel": {
+      "colorScheme": {
+        "light": {
+          "indicator": {
+            "background": "{surface.300}",
+            "hoverBackground": "{surface.400}",
+            "activeBackground": "{surface.900}"
+          }
+        }
+      },
+      "root": {
+        "transitionDuration": "{media.transitionDuration}"
+      },
+      "content": {
+        "gap": "{media.gap.200}"
+      },
+      "indicatorList": {
+        "padding": "{media.padding.400}",
+        "gap": "{media.gap.200}"
+      },
+      "indicator": {
+        "width": "{controls.iconOnly.100}",
+        "height": "{controls.iconOnly.100}",
+        "borderRadius": "{media.borderRadius.400}",
+        "focusRing": {
+          "width": "{focusRing.width}",
+          "style": "{focusRing.style}",
+          "color": "{focusRing.color}",
+          "offset": "{focusRing.offset}",
+          "shadow": "{focusRing.shadow}"
+        }
+      }
+    },
+    "checkbox": {
+      "root": {
+        "borderRadius": "{form.borderRadius.100}",
+        "extend": {
+          "borderWidth": "{form.borderWidth}"
+        },
+        "width": "{form.size.400}",
+        "height": "{form.size.400}",
+        "background": "{form.background}",
+        "checkedBackground": "{surface.900}",
+        "checkedHoverBackground": "{surface.800}",
+        "disabledBackground": "{form.disabledBackground}",
+        "filledBackground": "{form.filledBackground}",
+        "borderColor": "{form.borderColor}",
+        "hoverBorderColor": "{form.hoverBorderPrimaryColor}",
+        "focusBorderColor": "{form.focusBorderPrimaryColor}",
+        "checkedBorderColor": "{surface.900}",
+        "checkedHoverBorderColor": "{surface.800}",
+        "checkedFocusBorderColor": "{primary.color}",
+        "checkedDisabledBorderColor": "{form.borderColor}",
+        "invalidBorderColor": "{form.invalidBorderColor}",
+        "shadow": "0",
+        "focusRing": {
+          "focusRing": "{focusRing.width}",
+          "style": "{focusRing.style}",
+          "color": "{focusRing.color}",
+          "offset": "{focusRing.offset}",
+          "shadow": "{focusRing.shadow}"
+        },
+        "sm": {
+          "width": "{form.size.200}",
+          "height": "{form.size.200}"
+        },
+        "lg": {
+          "width": "{form.size.350}",
+          "height": "{form.size.350}"
+        },
+        "transitionDuration": "{form.transitionDuration}"
+      },
+      "icon": {
+        "size": "{form.icon.300}",
+        "color": "{form.color}",
+        "checkedColor": "{primary.contrastColor}",
+        "checkedHoverColor": "{primary.contrastColor}",
+        "disabledColor": "{form.disabledColor}",
+        "sm": {
+          "size": "{form.icon.200}"
+        },
+        "lg": {
+          "size": "{form.icon.400}"
+        }
+      }
+    },
+    "chip": {
+      "extend": {
+        "borderColor": "{transparent}",
+        "borderWidth": "{controls.width.100}"
+      },
+      "root": {
+        "borderRadius": "{media.borderRadius.100}",
+        "paddingX": "{media.padding.200}",
+        "paddingY": "{media.padding.100}",
+        "gap": "{media.gap.200}",
+        "transitionDuration": "{media.transitionDuration}"
+      },
+      "colorScheme": {
+        "light": {
+          "root": {
+            "background": "{surface.200}",
+            "color": "{text.color}"
+          },
+          "icon": {
+            "color": "{text.color}"
+          },
+          "removeIcon": {
+            "color": "{text.color}"
+          }
+        }
+      },
+      "image": {
+        "width": "0rem",
+        "height": "0rem"
+      },
+      "icon": {
+        "size": "{media.icon.size.100}"
+      },
+      "removeIcon": {
+        "size": "{media.icon.size.100}",
+        "focusRing": {
+          "width": "{form.focusRing.width}",
+          "style": "{form.focusRing.style}",
+          "color": "{focusRing.color}",
+          "offset": "{form.focusRing.offset}",
+          "shadow": "{focusRing.shadow}"
+        }
+      }
+    },
+    "confirmdialog": {
+      "extend": {
+        "extIcon": {
+          "success": "{success.500}",
+          "info": "{info.500}",
+          "help": "{help.500}",
+          "warn": "{warn.500}",
+          "danger": "{error.500}"
+        }
+      },
+      "icon": {
+        "size": "{overlay.icon.size.200}",
+        "color": "{overlay.modal.color}"
+      },
+      "content": {
+        "gap": "0rem"
+      }
+    },
+    "confirmpopup": {
+      "root": {
+        "background": "{overlay.popover.background}",
+        "color": "{overlay.popover.color}",
+        "shadow": "{overlay.popover.shadow}",
+        "gutter": "{overlay.gap.300}",
+        "arrowOffset": "{overlay.modal.padding.200}"
+      },
+      "content": {
+        "padding": "{overlay.popover.padding.100}",
+        "gap": "{overlay.gap.400}"
+      },
+      "icon": {
+        "size": "{overlay.icon.size.200}",
+        "color": "{overlay.popover.color}"
+      },
+      "footer": {
+        "gap": "{overlay.gap.200}",
+        "padding": "0 {overlay.popover.padding} {overlay.popover.padding} {overlay.popover.padding}"
+      }
+    },
+    "contextmenu": {
+      "root": {
+        "background": "{content.background}",
+        "color": "{content.color}",
+        "shadow": "{navigation.shadow}"
+      },
+      "list": {
+        "padding": "{navigation.list.padding.md} 0",
+        "gap": "{navigation.list.gap}"
+      },
+      "item": {
+        "padding": "{navigation.item.padding}",
+        "gap": "{navigation.item.gap}"
+      },
+      "submenu": {
+        "mobileIndent": "{navigation.submenu.padding}"
+      }
+    },
+    "datatable": {
+      "colorScheme": {
+        "light": {
+          "root": {
+            "color": "{text.color}",
+            "borderColor": "{content.borderColor}"
+          },
+          "header": {
+            "background": "{surface.50}",
+            "color": "{text.color}"
+          },
+          "headerCell": {
+            "background": "{surface.50}",
+            "hoverBackground": "{surface.100}",
+            "color": "{text.color}"
+          },
+          "footer": {
+            "background": "{surface.100}",
+            "color": "{text.color}"
+          },
+          "footerCell": {
+            "background": "{content.hoverBackground}",
+            "color": "{text.color}"
+          },
+          "row": {
+            "stripedBackground": "{content.hoverBackground}"
+          },
+          "bodyCell": {
+            "selectedBorderColor": "{content.borderColor}"
+          }
+        }
+      },
+      "extended": {
+        "extHeaderCell": {
+          "selectedHoverBackground": "{surface.800}"
+        },
+        "extRow": {
+          "selectedHoverBackground": "{surface.800}",
+          "stripedHoverBackground": "{surface.100}"
+        }
+      },
+      "root": {
+        "transitionDuration": "{data.transitionDuration}"
+      },
+      "header": {
+        "borderColor": "{content.borderColor}",
+        "borderWidth": "{data.width.100} 0 {data.width.100} 0",
+        "padding": "{data.padding.400}",
+        "sm": {
+          "padding": "{data.padding.200}"
+        },
+        "lg": {
+          "padding": "{data.padding.500}"
+        }
+      },
+      "headerCell": {
+        "selectedBackground": "{highlight.background}",
+        "borderColor": "{content.borderColor}",
+        "hoverColor": "{text.extend.colorInverted}",
+        "selectedColor": "{highlight.color}",
+        "gap": "{data.gap.200}",
+        "padding": "{data.padding.400}",
+        "focusRing": {
+          "width": "{focusRing.width}",
+          "style": "{focusRing.style}",
+          "color": "{focusRing.color}",
+          "offset": "{focusRing.offset}",
+          "shadow": "inset {focus.ring.shadow}"
+        },
+        "sm": {
+          "padding": "{data.padding.200}"
+        },
+        "lg": {
+          "padding": "{data.padding.500}"
+        }
+      },
+      "columnTitle": {
+        "fontWeight": "{fonts.fontWeight.bold}"
+      },
+      "row": {
+        "background": "{content.background}",
+        "hoverBackground": "{content.hoverBackground}",
+        "selectedBackground": "{highlight.background}",
+        "color": "{content.color}",
+        "hoverColor": "{content.hoverColor}",
+        "selectedColor": "{highlight.color}",
+        "focusRing": {
+          "width": "{focusRing.width}",
+          "style": "{focusRing.style}",
+          "color": "{focusRing.color}",
+          "offset": "{focusRing.offset}",
+          "shadow": "inset {focus.ring.shadow}"
+        }
+      },
+      "bodyCell": {
+        "borderColor": "{content.borderColor}",
+        "padding": "{data.padding.400}",
+        "sm": {
+          "padding": "{data.padding.200}"
+        },
+        "lg": {
+          "padding": "{data.padding.500}"
+        }
+      },
+      "footerCell": {
+        "borderColor": "{content.borderColor}",
+        "padding": "{data.padding.400}",
+        "sm": {
+          "padding": "{data.padding.200}"
+        },
+        "lg": {
+          "padding": "{data.padding.500}"
+        }
+      },
+      "columnFooter": {
+        "fontWeight": "{fonts.fontWeight.bold}"
+      },
+      "dropPoint": {
+        "color": "{highlight.background}"
+      },
+      "footer": {
+        "borderColor": "{content.borderColor}",
+        "borderWidth": "0 0 {data.width.100} 0",
+        "padding": "{data.padding.400}",
+        "sm": {
+          "padding": "{data.padding.200}"
+        },
+        "lg": {
+          "padding": "{data.padding.500}"
+        }
+      },
+      "columnResizer": {
+        "width": "{data.width.300}"
+      },
+      "resizeIndicator": {
+        "width": "{data.width.100}",
+        "color": "{highlight.background}"
+      },
+      "sortIcon": {
+        "color": "{text.color}",
+        "hoverColor": "{text.hoverColor}",
+        "size": "{data.icon.size.100}"
+      },
+      "loadingIcon": {
+        "size": "{data.icon.size.500}"
+      },
+      "rowToggleButton": {
+        "hoverBackground": "{content.hoverBackground}",
+        "selectedHoverBackground": "{content.hoverBackground}",
+        "color": "{text.color}",
+        "hoverColor": "{text.color}",
+        "selectedHoverColor": "{text.color}",
+        "size": "{data.icon.size.500}",
+        "borderRadius": "{content.borderRadius}",
+        "focusRing": {
+          "width": "{focusRing.width}",
+          "style": "{focusRing.style}",
+          "color": "{focusRing.color}",
+          "offset": "{focusRing.offset}",
+          "shadow": "{focusRing.shadow}"
+        }
+      },
+      "filter": {
+        "inlineGap": "{data.gap.200}",
+        "rule": {
+          "borderColor": "{content.borderColor}"
+        },
+        "constraintList": {
+          "padding": "{list.padding}",
+          "gap": "{list.gap.100}"
+        },
+        "constraint": {
+          "focusBackground": "{list.option.focusBackground}",
+          "selectedBackground": "{list.option.selectedBackground}",
+          "selectedFocusBackground": "{list.option.selectedFocusBackground}",
+          "color": "{list.option.color}",
+          "focusColor": "{list.option.focusColor}",
+          "selectedColor": "{list.option.selectedColor}",
+          "selectedFocusColor": "{list.option.selectedFocusColor}",
+          "padding": "{list.option.padding}",
+          "borderRadius": "{list.option.borderRadius}",
+          "separator": {
+            "borderColor": "{content.borderColor}"
+          }
+        },
+        "overlaySelect": {
+          "background": "{overlay.select.background}",
+          "color": "{overlay.select.color}",
+          "borderColor": "{overlay.select.borderColor}",
+          "borderRadius": "{overlay.select.borderRadius}",
+          "shadow": "{overlay.select.shadow}"
+        },
+        "overlayPopover": {
+          "background": "{overlay.popover.background}",
+          "color": "{overlay.popover.color}",
+          "borderColor": "{overlay.select.borderColor}",
+          "borderRadius": "{overlay.select.borderRadius}",
+          "shadow": "{overlay.popover.shadow}",
+          "padding": "{overlay.popover.padding.100}",
+          "gap": "{list.gap.100}"
+        }
+      },
+      "paginatorTop": {
+        "borderColor": "{form.borderColor}",
+        "borderWidth": "0 0 {data.width.100} 0"
+      },
+      "paginatorBottom": {
+        "borderWidth": "0 0 {data.width.100} 0",
+        "borderColor": "{content.borderColor}"
+      }
+    },
+    "dataview": {
+      "root": {
+        "borderWidth": "{data.width.100}",
+        "borderRadius": "{data.borderRadius}",
+        "padding": "0rem",
+        "borderColor": "{content.borderColor}"
+      },
+      "header": {
+        "borderWidth": "0 0 {data.width.100} 0",
+        "padding": "{data.padding.200} {data.padding.300}",
+        "borderRadius": "0 0 0 0",
+        "color": "{text.color}"
+      },
+      "content": {
+        "background": "{content.background}",
+        "color": "{content.color}",
+        "borderColor": "{content.borderColor}",
+        "borderWidth": "0rem",
+        "padding": "0rem",
+        "borderRadius": "0"
+      },
+      "footer": {
+        "background": "{surface.100}",
+        "color": "{text.color}",
+        "borderWidth": "{data.width.100} 0 0 0",
+        "padding": "{data.padding.200} {data.padding.300}",
+        "borderRadius": "0 0 0 0"
+      },
+      "paginatorTop": {
+        "borderWidth": "0 0 {data.width.100} 0"
+      },
+      "paginatorBottom": {
+        "borderWidth": "{data.width.100} 0 0 0"
+      }
+    },
+    "datepicker": {
+      "extend": {
+        "extDate": {
+          "selectedHoverBackground": "{surface.800}"
+        },
+        "extToday": {
+          "hoverBackground": "{content.hoverBackground}",
+          "borderColor": "{content.activeBorderColor}"
+        },
+        "extTitle": {
+          "width": "{form.width.500}"
+        },
+        "extTimePicker": {
+          "minWidth": "{form.width.400}",
+          "color": "{content.color}"
+        }
+      },
+      "colorScheme": {
+        "light": {
+          "dropdown": {
+            "background": "{content.background}",
+            "hoverBackground": "{navigation.item.focusBackground}",
+            "activeBackground": "{navigation.item.activeBackground}",
+            "color": "{navigation.item.color}",
+            "hoverColor": "{navigation.item.focusColor}",
+            "activeColor": "{navigation.item.activeColor}"
+          },
+          "today": {
+            "background": "{transparent}",
+            "color": "{text.extend.colorPrimaryStatic}"
+          }
+        }
+      },
+      "panel": {
+        "background": "{content.background}",
+        "borderColor": "{content.borderColor}",
+        "color": "{content.color}",
+        "borderRadius": "{content.borderRadius}",
+        "shadow": "{overlay.popover.shadow}",
+        "padding": "0rem"
+      },
+      "header": {
+        "background": "{content.background}",
+        "borderColor": "{content.borderColor}",
+        "color": "{content.color}",
+        "padding": "{overlay.popover.padding.100}"
+      },
+      "title": {
+        "gap": "{form.gap.200}",
+        "fontWeight": "{fonts.fontWeight.bold}"
+      },
+      "selectMonth": {
+        "hoverBackground": "{content.hoverBackground}",
+        "color": "{content.color}",
+        "hoverColor": "{content.hoverColor}",
+        "borderRadius": "{content.borderRadius}",
+        "padding": "{form.padding.200}"
+      },
+      "inputIcon": {
+        "color": "{form.floatLabelColor}"
+      },
+      "dropdown": {
+        "width": "{form.width.300}",
+        "borderColor": "{form.borderColor}",
+        "hoverBorderColor": "{form.borderColor}",
+        "activeBorderColor": "{form.borderColor}",
+        "borderRadius": "{form.borderRadius.200}",
+        "focusRing": {
+          "width": "{form.focusRing.width}",
+          "style": "{form.focusRing.style}",
+          "color": "{form.focusRing.color}",
+          "offset": "{form.focusRing.offset}",
+          "shadow": "{focusRing.shadow}"
+        },
+        "sm": {
+          "width": "0rem"
+        },
+        "lg": {
+          "width": "0rem"
+        }
+      },
+      "group": {
+        "borderColor": "{content.borderColor}",
+        "gap": "{overlay.popover.padding.100}"
+      },
+      "selectYear": {
+        "hoverBackground": "{content.hoverBackground}",
+        "color": "{content.color}",
+        "hoverColor": "{content.hoverColor}",
+        "borderRadius": "{content.borderRadius}",
+        "padding": "{overlay.select.padding}"
+      },
+      "dayView": {
+        "margin": "{overlay.popover.padding.100}"
+      },
+      "weekDay": {
+        "padding": "{form.padding.100}",
+        "fontWeight": "{fonts.fontWeight.bold}",
+        "color": "{content.color}"
+      },
+      "date": {
+        "hoverBackground": "{content.hoverBackground}",
+        "selectedBackground": "{highlight.background}",
+        "rangeSelectedBackground": "{list.option.focusBackground}",
+        "color": "{content.color}",
+        "hoverColor": "{content.color}",
+        "selectedColor": "{text.extend.colorInverted}",
+        "rangeSelectedColor": "{text.color}",
+        "width": "{form.size.500}",
+        "height": "{form.size.500}",
+        "borderRadius": "{form.borderRadius.100}",
+        "padding": "{form.padding.100}",
+        "focusRing": {
+          "width": "{form.focusRing.width}",
+          "style": "{form.focusRing.style}",
+          "color": "{form.focusRing.color}",
+          "offset": "{form.focusRing.offset}",
+          "shadow": "{focusRing.shadow}"
+        }
+      },
+      "monthView": {
+        "margin": "0 0 0 0"
+      },
+      "month": {
+        "padding": "0",
+        "borderRadius": "0rem"
+      },
+      "yearView": {
+        "margin": "0 0 0 0"
+      },
+      "year": {
+        "padding": "0",
+        "borderRadius": "0rem"
+      },
+      "buttonbar": {
+        "padding": "{overlay.popover.padding.100}",
+        "borderColor": "{content.borderColor}"
+      },
+      "timePicker": {
+        "padding": "{form.padding.300}",
+        "borderColor": "{content.borderColor}",
+        "gap": "{form.gap.200}",
+        "buttonGap": "{form.gap.100}"
+      },
+      "root": {
+        "transitionDuration": "{form.transitionDuration}"
+      }
+    },
+    "dialog": {
+      "extend": {
+        "borderWidth": "{overlay.borderWidth}",
+        "backdrop": "{overlay.modal.backdrop}"
+      },
+      "root": {
+        "background": "{overlay.modal.background}",
+        "borderColor": "{overlay.modal.borderColor}",
+        "color": "{overlay.modal.color}",
+        "borderRadius": "{overlay.modal.borderRadius}",
+        "shadow": "{overlay.popover.shadow}"
+      },
+      "header": {
+        "padding": "{overlay.modal.padding.300} {overlay.modal.padding.300} 1rem {overlay.modal.padding.300}",
+        "gap": "{overlay.gap.200}"
+      },
+      "title": {
+        "fontSize": "{fonts.fontSize.500}",
+        "fontWeight": "{fonts.fontWeight.demibold}"
+      },
+      "content": {
+        "padding": "{content.padding.400}"
+      },
+      "footer": {
+        "padding": "0 {overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.300}",
+        "gap": "{content.gap.200}"
+      }
+    },
+    "divider": {
+      "colorScheme": {
+        "light": {
+          "content": {
+            "background": "{content.background}",
+            "color": "{text.mutedColor}"
+          },
+          "borderColor": "{content.borderColor}"
+        }
+      },
+      "extend": {
+        "content": {
+          "gap": "{content.gap.200}"
+        },
+        "iconSize": "{media.icon.size.100}"
+      },
+      "horizontal": {
+        "margin": "{content.padding.300} 0",
+        "padding": "0 {content.padding.300}",
+        "content": {
+          "padding": "0 {content.padding.200}"
+        }
+      },
+      "vertical": {
+        "margin": "0 {content.padding.300}",
+        "padding": "{content.padding.300} 0",
+        "content": {
+          "padding": "{content.padding.200} 0"
+        }
+      }
+    },
+    "drawer": {
+      "extend": {
+        "borderRadius": "{overlay.popover.borderRadius}",
+        "borderWidth": "{overlay.borderWidth}",
+        "width": "{overlay.width}",
+        "extHeader": {
+          "gap": "{overlay.gap.200}",
+          "borderColor": "{drawer.root.borderColor}"
+        },
+        "padding": "{overlay.drawer.padding}",
+        "scale": "0.125rem",
+        "backdrop": "{overlay.modal.backdrop}"
+      },
+      "root": {
+        "background": "{overlay.modal.background}",
+        "borderColor": "{overlay.modal.borderColor}",
+        "color": "{overlay.modal.color}",
+        "shadow": "{overlay.modal.shadow}",
+        "width": "{overlay.width}"
+      },
+      "sm": {
+        "width": "{overlay.sm.width}"
+      },
+      "lg": {
+        "width": "{overlay.lg.width}"
+      },
+      "xlg": {
+        "width": "{overlay.xlg.width}"
+      },
+      "header": {
+        "padding": "{overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.200} {overlay.modal.padding.300} "
+      },
+      "title": {
+        "fontSize": "{fonts.fontSize.500}",
+        "fontWeight": "{fonts.fontWeight.demibold}"
+      },
+      "content": {
+        "padding": "{overlay.modal.padding.300}"
+      },
+      "footer": {
+        "padding": "0 {overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.300} "
+      }
+    },
+    "fileupload": {
+      "extend": {
+        "extDragNdrop": {
+          "background": "{surface.0}",
+          "borderRadius": "{form.borderRadius.200}",
+          "iconSize": "{form.size.500}",
+          "padding": "{form.padding.400}",
+          "info": {
+            "gap": "{form.gap.100}"
+          }
+        },
+        "extFile": {
+          "iconSize": "{form.size.350}"
+        },
+        "extContent": {
+          "borderRadius": "{content.borderRadius}",
+          "highlightBorderDefault": "{form.borderColor}"
+        }
+      },
+      "colorScheme": {
+        "light": {
+          "header": {
+            "background": "{surface.0}",
+            "color": "{text.color}"
+          }
+        }
+      },
+      "root": {
+        "background": "{content.background}",
+        "borderColor": "{content.borderColor}",
+        "color": "{content.color}",
+        "borderRadius": "{content.borderRadius}",
+        "transitionDuration": "{form.transitionDuration}"
+      },
+      "header": {
+        "borderColor": "{content.borderColor}",
+        "borderWidth": "0rem",
+        "padding": "0rem",
+        "borderRadius": "0rem",
+        "gap": "{content.gap.200}"
+      },
+      "content": {
+        "highlightBorderColor": "{surface.900}",
+        "padding": "0rem",
+        "gap": "{content.gap.200}"
+      },
+      "file": {
+        "padding": "{content.padding.200}",
+        "gap": "{content.gap.200}",
+        "borderColor": "{form.borderColor}",
+        "info": {
+          "gap": "{content.gap.100}"
+        }
+      },
+      "fileList": {
+        "gap": "{content.gap.200}"
+      },
+      "progressbar": {
+        "height": "{feedback.height.100}"
+      },
+      "basic": {
+        "gap": "{content.gap.200}"
+      }
+    },
+    "floatlabel": {
+      "extend": {
+        "height": "{form.size.800}",
+        "iconSize": "{form.icon.400}"
+      },
+      "root": {
+        "color": "{form.floatLabelColor}",
+        "focusColor": "{form.floatLabelFocusColor}",
+        "activeColor": "{form.floatLabelActiveColor}",
+        "invalidColor": "{form.floatLabelInvalidColor}",
+        "transitionDuration": "{form.transitionDuration}",
+        "positionX": "{form.padding.300}",
+        "positionY": "{form.padding.300}",
+        "fontWeight": "{fonts.fontWeight.regular}",
+        "active": {
+          "fontSize": "{fonts.fontSize.100}",
+          "fontWeight": "{fonts.fontWeight.regular}"
+        }
+      },
+      "over": {
+        "active": {
+          "top": "{form.padding.400}"
+        }
+      },
+      "in": {
+        "input": {
+          "paddingTop": "{form.padding.700}",
+          "paddingBottom": "{form.padding.300}"
+        },
+        "active": {
+          "top": "{form.padding.300}"
+        }
+      },
+      "on": {
+        "borderRadius": "0rem",
+        "active": {
+          "padding": "0 {form.padding.100}",
+          "background": "{form.background}"
+        }
+      }
+    },
+    "galleria": {
+      "extend": {
+        "backdrop": "{overlay.modal.backdrop}"
+      },
+      "colorScheme": {
+        "light": {
+          "thumbnailContent": {
+            "background": "{surface.100}"
+          },
+          "thumbnailNavButton": {
+            "hoverBackground": "{colors.alpha.white.200}",
+            "color": "{text.color}",
+            "hoverColor": "{text.hoverColor}"
+          },
+          "indicatorButton": {
+            "background": "{surface.300}",
+            "hoverBackground": "{surface.400}"
+          }
+        }
+      },
+      "root": {
+        "borderWidth": "{content.borderWidth}",
+        "borderColor": "{content.borderColor}",
+        "borderRadius": "{content.borderRadius}",
+        "transitionDuration": "{media.transitionDuration}"
+      },
+      "navButton": {
+        "background": "{transparent}",
+        "hoverBackground": "{colors.alpha.white.200}",
+        "color": "{text.extend.colorInverted}",
+        "hoverColor": "{text.extend.colorInverted}",
+        "size": "{media.size.600}",
+        "gutter": "{media.gap.200}",
+        "prev": {
+          "borderRadius": "{navigation.item.borderRadius}"
+        },
+        "next": {
+          "borderRadius": "{navigation.item.borderRadius}"
+        },
+        "focusRing": {
+          "width": "{focusRing.width}",
+          "style": "{focusRing.style}",
+          "color": "{focusRing.color}",
+          "offset": "{focusRing.offset}",
+          "shadow": "{focusRing.shadow}"
+        }
+      },
+      "navIcon": {
+        "size": "{media.icon.size.300}"
+      },
+      "thumbnailsContent": {
+        "padding": "{media.padding.100}"
+      },
+      "thumbnailNavButton": {
+        "size": "{media.size.300}",
+        "borderRadius": "{content.borderRadius}",
+        "gutter": "{media.gap.200}",
+        "focusRing": {
+          "width": "{focusRing.width}",
+          "style": "{focusRing.style}",
+          "color": "{focusRing.color}",
+          "offset": "{focusRing.offset}",
+          "shadow": "{focusRing.shadow}"
+        }
+      },
+      "thumbnailNavButtonIcon": {
+        "size": "{media.icon.size.100}"
+      },
+      "caption": {
+        "background": "{colors.alpha.white.500}",
+        "color": "{text.color}",
+        "padding": "{media.gap.200}"
+      },
+      "indicatorList": {
+        "gap": "{media.gap.200}",
+        "padding": "{media.padding.400}"
+      },
+      "indicatorButton": {
+        "width": "{media.size.200}",
+        "height": "{media.size.200}",
+        "activeBackground": "{surface.900}",
+        "borderRadius": "{content.borderRadius}",
+        "focusRing": {
+          "width": "{focusRing.width}",
+          "style": "{focusRing.style}",
+          "color": "{focusRing.color}",
+          "offset": "{focusRing.offset}",
+          "shadow": "{focusRing.shadow}"
+        }
+      },
+      "insetIndicatorList": {
+        "background": "{colors.alpha.black.500}"
+      },
+      "insetIndicatorButton": {
+        "background": "{colors.alpha.white.100}",
+        "hoverBackground": "{colors.alpha.white.200}",
+        "activeBackground": "{colors.alpha.white.500}"
+      },
+      "closeButton": {
+        "size": "{media.size.600}",
+        "gutter": "{media.gap.200}",
+        "background": "{colors.alpha.white.100}",
+        "hoverBackground": "{colors.alpha.white.200}",
+        "color": "{text.extend.colorInverted}",
+        "hoverColor": "{text.extend.colorInverted}",
+        "borderRadius": "{controls.borderRadius.200}",
+        "focusRing": {
+          "width": "{focusRing.width}",
+          "style": "{focusRing.style}",
+          "color": "{focusRing.color}",
+          "offset": "{focusRing.offset}",
+          "shadow": "{focusRing.shadow}"
+        }
+      },
+      "closeButtonIcon": {
+        "size": "{media.icon.size.300}"
+      }
+    },
+    "inputgroup": {
+      "extend": {
+        "borderWidth": "{form.borderWidth}",
+        "iconSize": "{form.icon.300}"
+      },
+      "colorScheme": {
+        "light": {
+          "addon": {
+            "background": "{form.background}",
+            "borderColor": "{form.borderColor}",
+            "color": "{text.mutedColor}"
+          }
+        }
+      },
+      "addon": {
+        "borderRadius": "{form.borderRadius.200}",
+        "padding": "{form.padding.300}",
+        "minWidth": "{form.width.300}"
+      }
+    },
+    "inputnumber": {
+      "extend": {
+        "borderWidth": "{form.borderWidth}",
+        "extButton": {
+          "height": "{form.size.600}",
+          "iconSize": "{form.icon.300}"
+        }
+      },
+      "colorScheme": {
+        "light": {
+          "button": {
+            "background": "{content.background}",
+            "hoverBackground": "{content.hoverBackground}",
+            "activeBackground": "{transparent}",
+            "borderColor": "{form.borderColor}",
+            "hoverBorderColor": "{form.borderColor}",
+            "activeBorderColor": "{form.borderColor}",
+            "color": "{text.color}",
+            "hoverColor": "{text.hoverColor}",
+            "activeColor": "{text.color}"
+          }
+        }
+      },
+      "transitionDuration": {
+        "transitionDuration": "{form.transitionDuration}"
+      },
+      "button": {
+        "width": "{form.size.600}",
+        "borderRadius": "{form.borderRadius.200}",
+        "verticalPadding": "{form.padding.300}"
+      }
+    },
+    "inputotp": {
+      "extend": {
+        "height": "{form.size.600}",
+        "borderWidth": "{form.borderWidth}"
+      },
+      "root": {
+        "gap": "{form.gap.200}"
+      },
+      "input": {
+        "width": "{form.width.400}"
+      },
+      "sm": {
+        "width": "0rem"
+      },
+      "lg": {
+        "width": "0rem"
+      }
+    },
+    "inputtext": {
+      "extend": {
+        "readonlyBackground": "{form.readonlyBackground}",
+        "iconSize": "{form.icon.300}",
+        "borderWidth": "{form.borderWidth}",
+        "extXlg": {
+          "fontSize": "{form.xlg.fontSize}",
+          "paddingX": "{form.padding.300}",
+          "paddingY": "{form.padding.600}"
+        }
+      },
+      "root": {
+        "background": "{form.background}",
+        "disabledBackground": "{form.disabledBackground}",
+        "filledBackground": "{form.filledBackground}",
+        "filledHoverBackground": "{form.filledHoverBackground}",
+        "filledFocusBackground": "{form.filledFocusBackground}",
+        "borderColor": "{form.borderColor}",
+        "hoverBorderColor": "{form.hoverBorderSecondaryColor}",
+        "focusBorderColor": "{form.focusBorderSecondaryColor}",
+        "invalidBorderColor": "{form.invalidBorderColor}",
+        "color": "{text.color}",
+        "disabledColor": "{form.disabledColor}",
+        "placeholderColor": "{form.placeholderColor}",
+        "invalidPlaceholderColor": "{form.invalidPlaceholderColor}",
+        "shadow": "0",
+        "paddingX": "{form.padding.300}",
+        "paddingY": "{form.padding.300}",
+        "borderRadius": "{form.borderRadius.200}",
+        "transitionDuration": "{form.transitionDuration}",
+        "sm": {
+          "fontSize": "{fonts.fontSize.300}",
+          "paddingX": "{form.padding.300}",
+          "paddingY": "{form.padding.200}"
+        },
+        "lg": {
+          "fontSize": "{fonts.fontSize.300}",
+          "paddingX": "{form.padding.300}",
+          "paddingY": "{form.padding.400}"
+        },
+        "focusRing": {
+          "width": "{form.focusRing.width}",
+          "style": "{form.focusRing.style}",
+          "color": "{form.focusRing.color}",
+          "offset": "{form.focusRing.offset}",
+          "shadow": "0"
+        }
+      }
+    },
+    "listbox": {
+      "extend": {
+        "extOption": {
+          "label": {
+            "gap": "{list.gap.100}"
+          },
+          "caption": {
+            "color": "{text.mutedColor}",
+            "stripedColor": "{text.mutedColor}"
+          },
+          "gap": "{list.gap.200}"
+        }
+      },
+      "colorScheme": {
+        "light": {
+          "option": {
+            "stripedBackground": "{surface.50}"
+          }
+        }
+      },
+      "root": {
+        "background": "{form.background}",
+        "disabledBackground": "{form.disabledBackground}",
+        "borderColor": "{form.borderColor}",
+        "invalidBorderColor": "{form.invalidBorderColor}",
+        "color": "{form.color}",
+        "disabledColor": "{form.disabledColor}",
+        "shadow": "0",
+        "borderRadius": "{form.borderRadius.200}",
+        "transitionDuration": "{form.transitionDuration}"
+      },
+      "list": {
+        "padding": "{list.padding}",
+        "gap": "{list.gap.100}",
+        "header": {
+          "padding": "{list.header.padding}"
+        }
+      },
+      "option": {
+        "focusBackground": "{list.option.focusBackground}",
+        "selectedBackground": "{list.option.selectedBackground}",
+        "selectedFocusBackground": "{list.option.selectedFocusBackground}",
+        "color": "{list.option.color}",
+        "focusColor": "{list.option.focusColor}",
+        "selectedColor": "{list.option.selectedColor}",
+        "selectedFocusColor": "{list.option.selectedFocusColor}",
+        "padding": "{list.option.padding}",
+        "borderRadius": "{list.option.borderRadius}"
+      },
+      "optionGroup": {
+        "background": "{list.optionGroup.background}",
+        "color": "{list.optionGroup.color}",
+        "fontWeight": "{fonts.fontWeight.regular}",
+        "padding": "{list.option.padding}"
+      },
+      "checkmark": {
+        "color": "{list.option.color}",
+        "gutterStart": "-{list.gap.200}",
+        "gutterEnd": "{list.gap.200}"
+      },
+      "emptyMessage": {
+        "padding": "{list.option.padding}"
+      }
+    },
+    "megamenu": {
+      "extend": {
+        "extItem": {
+          "caption": {
+            "color": "{text.mutedColor}",
+            "gap": "{content.gap.100}"
+          }
+        },
+        "iconSize": "{navigation.submenuIcon.size}"
+      },
+      "colorScheme": {
+        "light": {
+          "root": {
+            "background": "{transparent}"
+          }
+        }
+      },
+      "root": {
+        "borderColor": "{transparent}",
+        "borderRadius": "{content.borderRadius}",
+        "color": "{content.color}",
+        "gap": "{content.gap.100}",
+        "transitionDuration": "{form.transitionDuration}",
+        "verticalOrientation": {
+          "padding": "{navigation.list.padding.100}",
+          "gap": "{navigation.list.gap}"
+        },
+        "horizontalOrientation": {
+          "padding": "{navigation.list.padding.100}",
+          "gap": "{navigation.list.gap}"
+        }
+      },
+      "baseItem": {
+        "borderRadius": "{content.borderRadius}",
+        "padding": "{navigation.item.padding}"
+      },
+      "item": {
+        "focusBackground": "{navigation.item.focusBackground}",
+        "activeBackground": "{navigation.item.activeBackground}",
+        "color": "{navigation.item.color}",
+        "focusColor": "{navigation.item.focusColor}",
+        "activeColor": "{navigation.item.activeColor}",
+        "padding": "{navigation.item.padding}",
+        "borderRadius": "{navigation.item.borderRadius}",
+        "gap": "{navigation.item.gap}",
+        "icon": {
+          "color": "{navigation.item.icon.color}",
+          "focusColor": "{navigation.item.icon.focusColor}",
+          "activeColor": "{navigation.item.icon.activeColor}"
+        }
+      },
+      "overlay": {
+        "padding": "{content.padding.100}",
+        "background": "{content.background}",
+        "borderColor": "{content.borderColor}",
+        "borderRadius": "{content.borderRadius}",
+        "color": "{content.color}",
+        "shadow": "{navigation.shadow}",
+        "gap": "0rem"
+      },
+      "submenu": {
+        "padding": "{navigation.list.padding.100}",
+        "gap": "{navigation.list.gap}"
+      },
+      "submenuLabel": {
+        "fontWeight": "{navigation.submenuLabel.fontWeight}",
+        "padding": "{navigation.submenuLabel.padding}",
+        "background": "{navigation.submenuLabel.background}",
+        "color": "{navigation.submenuLabel.color}"
+      },
+      "submenuIcon": {
+        "size": "{navigation.submenuIcon.size}",
+        "color": "{navigation.submenuIcon.color}",
+        "focusColor": "{navigation.submenuIcon.focusColor}",
+        "activeColor": "{navigation.submenuIcon.activeColor}"
+      },
+      "separator": {
+        "borderColor": "{content.borderColor}"
+      },
+      "mobileButton": {
+        "borderRadius": "{navigation.item.borderRadius}",
+        "size": "{controls.iconOnly.600}",
+        "color": "{text.color}",
+        "hoverColor": "{text.hoverColor}",
+        "hoverBackground": "{content.hoverBackground}",
+        "focusRing": {
+          "width": "{focusRing.width}",
+          "style": "{focusRing.style}",
+          "color": "{focusRing.color}",
+          "offset": "{focusRing.offset}",
+          "shadow": "{focusRing.shadow}"
+        }
+      }
+    },
+    "menu": {
+      "extend": {
+        "paddingX": "0.25rem",
+        "iconSize": "{navigation.submenuIcon.size}",
+        "paddingY": "0.25rem",
+        "extItem": {
+          "caption": {
+            "gap": "{content.gap.100}"
+          },
+          "activeBackground": "{navigation.item.activeBackground}",
+          "activeColor": "{navigation.item.activeColor}"
+        }
+      },
+      "colorScheme": {
+        "light": {
+          "extend": {
+            "extItem": {
+              "caption": {
+                "color": "{text.mutedColor}"
+              },
+              "icon": {
+                "activeColor": "{navigation.item.icon.activeColor}"
+              }
+            }
+          },
+          "root": {
+            "background": "{content.background}",
+            "borderColor": "{content.borderColor}",
+            "color": "{content.color}"
+          },
+          "item": {
+            "focusBackground": "{navigation.item.focusBackground}",
+            "color": "{navigation.item.color}",
+            "focusColor": "{navigation.item.focusColor}",
+            "icon": {
+              "color": "{navigation.item.icon.color}",
+              "focusColor": "{navigation.item.icon.focusColor}"
+            }
+          }
+        }
+      },
+      "root": {
+        "borderRadius": "{content.borderRadius}",
+        "shadow": "{navigation.shadow}",
+        "transitionDuration": "{form.transitionDuration}"
+      },
+      "list": {
+        "padding": "{navigation.list.padding.100}",
+        "gap": "{navigation.list.gap}"
+      },
+      "submenuLabel": {
+        "padding": "{navigation.submenuLabel.padding}",
+        "fontWeight": "{fonts.fontWeight.regular}",
+        "background": "{navigation.submenuLabel.background}",
+        "color": "{navigation.submenuLabel.color}"
+      },
+      "separator": {
+        "borderColor": "{content.borderColor}"
+      },
+      "item": {
+        "padding": "{navigation.item.padding}",
+        "borderRadius": "{navigation.item.borderRadius}",
+        "gap": "{navigation.item.gap}"
+      }
+    },
+    "menubar": {
+      "extend": {
+        "iconSize": "{navigation.submenuIcon.size}",
+        "extItem": {
+          "caption": {
+            "color": "{text.mutedColor}",
+            "gap": "{content.padding.100}"
+          }
+        },
+        "extSubmenuLabel": {
+          "padding": "{navigation.submenuLabel.padding}",
+          "fontWeight": "{fonts.fontWeight.demibold}",
+          "background": "{navigation.submenuLabel.background}",
+          "color": "{navigation.submenuLabel.color}"
+        }
+      },
+      "colorScheme": {
+        "light": {
+          "root": {
+            "background": "{transparent}"
+          }
+        }
+      },
+      "root": {
+        "borderColor": "{transparent}",
+        "borderRadius": "{navigation.item.borderRadius}",
+        "color": "{content.color}",
+        "gap": "{content.padding.100}",
+        "padding": "{navigation.list.padding.100}",
+        "transitionDuration": "{form.transitionDuration}"
+      },
+      "baseItem": {
+        "borderRadius": "{navigation.item.borderRadius}",
+        "padding": "{navigation.item.padding}"
+      },
+      "item": {
+        "focusBackground": "{navigation.item.focusBackground}",
+        "activeBackground": "{navigation.item.activeBackground}",
+        "color": "{navigation.item.color}",
+        "focusColor": "{navigation.item.focusColor}",
+        "activeColor": "{navigation.item.activeColor}",
+        "padding": "{navigation.item.padding}",
+        "borderRadius": "{navigation.item.borderRadius}",
+        "gap": "{navigation.item.gap}",
+        "icon": {
+          "color": "{navigation.item.icon.color}",
+          "focusColor": "{navigation.item.icon.focusColor}",
+          "activeColor": "{navigation.item.icon.activeColor}"
+        }
+      },
+      "submenu": {
+        "padding": "{navigation.list.padding.100}",
+        "gap": "{navigation.list.gap}",
+        "background": "{content.background}",
+        "borderColor": "{content.borderColor}",
+        "borderRadius": "{content.borderRadius}",
+        "shadow": "{navigation.shadow}",
+        "mobileIndent": "{navigation.padding.200}",
+        "icon": {
+          "size": "{navigation.submenuIcon.size}",
+          "color": "{navigation.submenuIcon.color}",
+          "focusColor": "{navigation.submenuIcon.focusColor}",
+          "activeColor": "{navigation.submenuIcon.activeColor}"
+        }
+      },
+      "separator": {
+        "borderColor": "{content.borderColor}"
+      },
+      "mobileButton": {
+        "borderRadius": "{navigation.item.borderRadius}",
+        "size": "{controls.iconOnly.600}",
+        "color": "{text.color}",
+        "hoverColor": "{text.hoverColor}",
+        "hoverBackground": "{content.hoverBackground}",
+        "focusRing": {
+          "width": "{focusRing.width}",
+          "style": "{focusRing.style}",
+          "color": "{focusRing.color}",
+          "offset": "{focusRing.offset}",
+          "shadow": "{focusRing.shadow}"
+        }
+      }
+    },
+    "message": {
+      "extend": {
+        "width": "{messages.width}",
+        "extText": {
+          "gap": "{feedback.gap.100}"
+        },
+        "extInfo": {
+          "color": "{info.500}",
+          "closeButton": {
+            "color": "{info.500}",
+            "borderColor": "{info.500}"
+          },
+          "caption": {
+            "color": "{text.color}"
+          }
+        },
+        "extAccentLine": {
+          "width": "{feedback.width.200}"
+        },
+        "extCloseButton": {
+          "width": "{feedback.width.100}"
+        },
+        "extSuccess": {
+          "color": "{success.500}",
+          "closeButton": {
+            "color": "{success.500}",
+            "borderColor": "{success.500}"
+          },
+          "caption": {
+            "color": "{text.color}"
+          }
+        },
+        "extWarn": {
+          "color": "{warn.500}",
+          "closeButton": {
+            "color": "{warn.500}",
+            "borderColor": "{warn.500}"
+          },
+          "caption": {
+            "color": "{text.color}"
+          }
+        },
+        "extError": {
+          "color": "{error.500}",
+          "closeButton": {
+            "color": "{error.500}",
+            "borderColor": "{error.500}"
+          },
+          "caption": {
+            "color": "{text.color}"
+          }
+        }
+      },
+      "colorScheme": {
+        "light": {
+          "success": {
+            "background": "{success.50}",
+            "borderColor": "{success.500}",
+            "color": "{text.color}",
+            "shadow": "none",
+            "outlined": {
+              "color": "{text.color}",
+              "borderColor": "{success.500}"
+            },
+            "closeButton": {
+              "hoverBackground": "{success.200}",
+              "focusRing": {
+                "color": "{focusRing.color}",
+                "shadow": "{focusRing.shadow}"
+              }
+            },
+            "simple": {
+              "color": "{text.color}"
+            }
+          },
+          "outlined": {
+            "root": {
+              "borderWidth": "0rem"
+            },
+            "closeButton": {
+              "hoverBackground": "{transparent}",
+              "focusRing": {
+                "color": "{focusRing.color}",
+                "shadow": "{focusRing.shadow}"
+              }
+            },
+            "outlined": {
+              "color": "{transparent}",
+              "borderColor": "{transparent}"
+            },
+            "simple": {
+              "color": "{transparent}"
+            }
+          },
+          "simple": {
+            "content": {
+              "padding": "0rem"
+            }
+          },
+          "warn": {
+            "background": "{warn.50}",
+            "borderColor": "{warn.500}",
+            "color": "{text.color}",
+            "shadow": "none",
+            "outlined": {
+              "color": "{text.color}",
+              "borderColor": "{warn.500}"
+            },
+            "closeButton": {
+              "hoverBackground": "{warn.200}",
+              "focusRing": {
+                "color": "{focusRing.color}",
+                "shadow": "{focusRing.shadow}"
+              }
+            },
+            "simple": {
+              "color": "{text.color}"
+            }
+          },
+          "error": {
+            "background": "{error.50}",
+            "borderColor": "{error.500}",
+            "color": "{text.color}",
+            "shadow": "none",
+            "outlined": {
+              "color": "{text.color}",
+              "borderColor": "{error.500}"
+            },
+            "closeButton": {
+              "hoverBackground": "{error.200}",
+              "focusRing": {
+                "color": "{focusRing.color}",
+                "shadow": "{focusRing.shadow}"
+              }
+            },
+            "simple": {
+              "color": "{text.color}"
+            }
+          },
+          "secondary": {
+            "borderColor": "{transparent}",
+            "shadow": "none",
+            "closeButton": {
+              "hoverBackground": "{transparent}",
+              "focusRing": {
+                "color": "{focusRing.color}",
+                "shadow": "{focusRing.shadow}"
+              }
+            },
+            "simple": {
+              "color": "{transparent}"
+            },
+            "outlined": {
+              "color": "{transparent}",
+              "borderColor": "{transparent}"
+            }
+          },
+          "contrast": {
+            "borderColor": "{transparent}",
+            "shadow": "none",
+            "closeButton": {
+              "hoverBackground": "{transparent}",
+              "focusRing": {
+                "color": "{focusRing.color}",
+                "shadow": "{focusRing.shadow}"
+              }
+            },
+            "simple": {
+              "color": "{transparent}"
+            },
+            "outlined": {
+              "color": "{transparent}",
+              "borderColor": "{transparent}"
+            }
+          },
+          "info": {
+            "background": "{info.50}",
+            "borderColor": "{info.500}",
+            "color": "{text.color}",
+            "shadow": "none",
+            "closeButton": {
+              "hoverBackground": "{info.200}",
+              "focusRing": {
+                "color": "{focusRing.color}",
+                "shadow": "{focusRing.shadow}"
+              }
+            },
+            "outlined": {
+              "color": "{text.color}",
+              "borderColor": "{info.500}"
+            },
+            "simple": {
+              "color": "{text.color}"
+            }
+          }
+        }
+      },
+      "root": {
+        "borderRadius": "{content.borderRadius}",
+        "borderWidth": "{feedback.width.100}",
+        "transitionDuration": "{feedback.transitionDuration}"
+      },
+      "content": {
+        "padding": "{feedback.padding.200}",
+        "gap": "{feedback.gap.400}",
+        "sm": {
+          "padding": "{feedback.padding.200}"
+        },
+        "lg": {
+          "padding": "{feedback.padding.200}"
+        }
+      },
+      "text": {
+        "fontSize": "{fonts.fontSize.300}",
+        "fontWeight": "{fonts.fontWeight.bold}",
+        "sm": {
+          "fontSize": "{fonts.fontSize.300}"
+        },
+        "lg": {
+          "fontSize": "{fonts.fontSize.300}"
+        }
+      },
+      "icon": {
+        "size": "{feedback.icon.size.500}",
+        "sm": {
+          "size": "{feedback.icon.size.500}"
+        },
+        "lg": {
+          "size": "{feedback.icon.size.500}"
+        }
+      },
+      "closeButton": {
+        "width": "{controls.iconOnly.600}",
+        "height": "{controls.iconOnly.600}",
+        "borderRadius": "{controls.borderRadius.100}",
+        "focusRing": {
+          "width": "{focusRing.width}",
+          "style": "{focusRing.style}",
+          "offset": "{focusRing.offset}"
+        }
+      },
+      "closeIcon": {
+        "size": "{feedback.icon.size.200}",
+        "sm": {
+          "size": "{feedback.icon.size.200}"
+        },
+        "lg": {
+          "size": "{feedback.icon.size.200}"
+        }
+      }
+    },
+    "metergroup": {
+      "extend": {
+        "extLabel": {
+          "color": "{text.mutedColor}"
+        }
+      },
+      "root": {
+        "borderRadius": "{content.borderRadius}",
+        "gap": "{feedback.gap.300}"
+      },
+      "meters": {
+        "size": "{feedback.height.100}",
+        "background": "{content.borderColor}"
+      },
+      "label": {
+        "gap": "{feedback.gap.100}"
+      },
+      "labelMarker": {
+        "size": "{feedback.icon.size.100}"
+      },
+      "labelIcon": {
+        "size": "{feedback.icon.size.200}"
+      },
+      "labelList": {
+        "verticalGap": "{feedback.gap.200}",
+        "horizontalGap": "{feedback.gap.300}"
+      }
+    },
+    "multiselect": {
+      "colorScheme": {
+        "overlay": {
+          "background": "{overlay.select.background}",
+          "borderColor": "{overlay.select.borderColor}",
+          "color": "{overlay.select.color}"
+        },
+        "option": {
+          "focusBackground": "{list.option.focusBackground}",
+          "selectedBackground": "{list.option.selectedBackground}",
+          "selectedFocusBackground": "{list.option.selectedFocusBackground}",
+          "color": "{list.option.color}",
+          "focusColor": "{list.option.focusColor}",
+          "selectedColor": "{list.option.selectedColor}",
+          "selectedFocusColor": "{list.option.selectedFocusColor}"
+        },
+        "root": {
+          "background": "{form.background}",
+          "disabledBackground": "{form.disabledBackground}",
+          "filledBackground": "{form.filledBackground}",
+          "filledHoverBackground": "{form.filledHoverBackground}",
+          "filledFocusBackground": "{form.filledFocusBackground}",
+          "borderColor": "{form.borderColor}",
+          "hoverBorderColor": "{form.hoverBorderSecondaryColor}",
+          "focusBorderColor": "{form.focusBorderSecondaryColor}",
+          "invalidBorderColor": "{form.invalidBorderColor}",
+          "color": "{form.color}",
+          "disabledColor": "{form.disabledColor}",
+          "placeholderColor": "{form.placeholderColor}",
+          "invalidPlaceholderColor": "{form.invalidPlaceholderColor}",
+          "focusRing": {
+            "color": "{form.focusRing.color}"
+          }
+        },
+        "dropdown": {
+          "color": "{form.floatLabelColor}"
+        },
+        "optionGroup": {
+          "background": "{list.optionGroup.background}",
+          "color": "{list.optionGroup.color}"
+        },
+        "clearIcon": {
+          "color": "{form.floatLabelColor}"
+        }
+      },
+      "extend": {
+        "paddingX": "0.3571rem",
+        "paddingY": "0.3571rem",
+        "borderWidth": "{form.borderWidth}",
+        "iconSize": "{form.icon.300}",
+        "width": "{form.width}",
+        "readonlyBackground": "{form.readonlyBackground}"
+      },
+      "root": {
+        "shadow": "0",
+        "paddingX": "{form.paddingX}",
+        "paddingY": "{form.paddingY}",
+        "borderRadius": "{form.borderRadius.200}",
+        "transitionDuration": "{form.transitionDuration}",
+        "sm": {
+          "fontSize": "{fonts.fontSize.300}",
+          "paddingX": "{form.padding.200}",
+          "paddingY": "{form.padding.200}"
+        },
+        "lg": {
+          "fontSize": "{fonts.fontSize.300}",
+          "paddingX": "{form.padding.400}",
+          "paddingY": "{form.padding.400}"
+        },
+        "focusRing": {
+          "width": "{form.focusRing.width}",
+          "style": "{form.focusRing.style}",
+          "offset": "{form.focusRing.offset}",
+          "shadow": "0"
+        }
+      },
+      "dropdown": {
+        "width": "{form.width.300}"
+      },
+      "overlay": {
+        "borderRadius": "{overlay.select.borderRadius}",
+        "shadow": "{overlay.select.shadow}"
+      },
+      "list": {
+        "padding": "{list.padding}",
+        "header": {
+          "padding": "{list.header.padding}"
+        },
+        "gap": "{list.gap.100}"
+      },
+      "chip": {
+        "borderRadius": "{form.borderRadius.100}"
+      },
+      "option": {
+        "padding": "{list.option.padding}",
+        "borderRadius": "{list.option.borderRadius}",
+        "gap": "{list.gap.200}"
+      },
+      "optionGroup": {
+        "fontWeight": "{fonts.fontWeight.demibold}",
+        "padding": "{list.optionGroup.padding}"
+      },
+      "emptyMessage": {
+        "padding": "{list.option.padding}"
+      }
+    },
+    "paginator": {
+      "root": {
+        "padding": "0 {data.padding.200}",
+        "gap": "{data.gap.200}",
+        "borderRadius": "{content.borderRadius}",
+        "background": "{transparent}",
+        "color": "{content.color}",
+        "transitionDuration": "{data.transitionDuration}"
+      },
+      "currentPageReport": {
+        "color": "{text.mutedColor}"
+      },
+      "navButton": {
+        "background": "{transparent}",
+        "hoverBackground": "{content.hoverBackground}",
+        "selectedBackground": "{highlight.background}",
+        "color": "{text.color}",
+        "hoverColor": "{text.hoverColor}",
+        "selectedColor": "{text.extend.colorInverted}",
+        "width": "{data.icon.size.700}",
+        "height": "{data.icon.size.700}",
+        "borderRadius": "{content.borderRadius}",
+        "focusRing": {
+          "width": "{focusRing.width}",
+          "style": "{focusRing.style}",
+          "color": "{focusRing.color}",
+          "offset": "{focusRing.offset}",
+          "focus": "{focusRing.shadow}"
+        }
+      },
+      "jumpToPageInput": {
+        "maxWidth": "{data.width.400}"
+      }
+    },
+    "panelmenu": {
+      "extend": {
+        "extPanel": {
+          "gap": "{content.gap.100}"
+        },
+        "iconSize": "{navigation.submenuIcon.size}",
+        "extItem": {
+          "activeBackground": "{navigation.item.activeBackground}",
+          "activeColor": "{navigation.item.activeColor}",
+          "caption": {
+            "color": "{text.mutedColor}",
+            "gap": "{content.gap.100}"
+          }
+        }
+      },
+      "root": {
+        "gap": "{content.gap.100}",
+        "transitionDuration": "{form.transitionDuration}"
+      },
+      "panel": {
+        "background": "{transparent}",
+        "borderColor": "{transparent}",
+        "borderWidth": "{navigation.width.100}",
+        "color": "{content.color}",
+        "padding": "{content.padding.100}",
+        "borderRadius": "{content.borderRadius}",
+        "first": {
+          "borderWidth": "{navigation.width.100} {navigation.width.100} 0 {navigation.width.100}",
+          "topBorderRadius": "{content.borderRadius}"
+        },
+        "last": {
+          "borderWidth": "0 {navigation.width.100} {navigation.width.100} {navigation.width.100}",
+          "topBorderRadius": "{content.borderRadius}"
+        }
+      },
+      "item": {
+        "focusBackground": "{navigation.item.focusBackground}",
+        "color": "{navigation.item.color}",
+        "focusColor": "{navigation.item.focusColor}",
+        "gap": "{navigation.item.gap}",
+        "padding": "{navigation.item.padding}",
+        "borderRadius": "{navigation.item.borderRadius}",
+        "icon": {
+          "color": "{navigation.item.icon.color}",
+          "focusColor": "{navigation.item.icon.focusColor}"
+        }
+      },
+      "submenu": {
+        "indent": "{navigation.padding.400}"
+      },
+      "separator": {
+        "borderColor": "{content.borderColor}"
+      },
+      "submenuIcon": {
+        "color": "{navigation.submenuIcon.color}",
+        "focusColor": "{navigation.submenuIcon.focusColor}"
+      }
+    },
+    "password": {
+      "extend": {
+        "borderWidth": "{form.borderWidth}"
+      },
+      "colorScheme": {
+        "light": {
+          "strength": {
+            "weakBackground": "{error.500}",
+            "mediumBackground": "{warn.500}",
+            "strongBackground": "{success.600}"
+          },
+          "icon": {
+            "color": "{form.placeholderColor}"
+          }
+        },
+        "dark": {
+          "strength": {
+            "weakBackground": "{error.500}",
+            "mediumBackground": "{warn.500}",
+            "strongBackground": "{success.600}"
+          },
+          "icon": {
+            "color": "{form.placeholderColor}"
+          }
+        }
+      },
+      "meter": {
+        "background": "{content.borderColor}",
+        "borderRadius": "{content.borderRadius}",
+        "height": "{feedback.height.100}"
+      },
+      "overlay": {
+        "background": "{overlay.popover.background}",
+        "borderColor": "{overlay.popover.borderColor}",
+        "borderRadius": "{overlay.popover.borderRadius}",
+        "color": "{overlay.popover.color}",
+        "padding": "{overlay.popover.padding.100}",
+        "shadow": "{overlay.popover.shadow}"
+      },
+      "content": {
+        "gap": "{content.gap.200}"
+      }
+    },
+    "popover": {
+      "extend": {
+        "borderWidth": "{overlay.borderWidth}",
+        "arrow": {
+          "width": "{overlay.popover.width.200}",
+          "height": "{overlay.popover.width.100}"
+        }
+      },
+      "root": {
+        "background": "{overlay.popover.background}",
+        "borderColor": "{overlay.popover.borderColor}",
+        "color": "{overlay.popover.color}",
+        "borderRadius": "{overlay.popover.borderRadius}",
+        "shadow": "{overlay.popover.shadow}",
+        "gutter": "{overlay.gap.300}",
+        "arrowOffset": "{overlay.popover.padding.200}",
+        "arrowLeft": "0px"
+      },
+      "content": {
+        "padding": "{overlay.popover.padding.100}"
+      }
+    },
+    "progressbar": {
+      "label": {
+        "color": "{text.extend.colorPrimaryStatic}",
+        "fontSize": "{fonts.fontSize.100}",
+        "fontWeight": "{fonts.fontWeight.regular}"
+      },
+      "root": {
+        "background": "{content.borderColor}",
+        "borderRadius": "{content.borderRadius}",
+        "height": "{feedback.height.300}"
+      },
+      "value": {
+        "background": "{primary.color}"
+      }
+    },
+    "progressspinner": {
+      "extend": {
+        "small": "{feedback.width.500}",
+        "medium": "{feedback.width.700}",
+        "large": "{feedback.width.800}",
+        "xlarge": "{feedback.width.900}"
+      },
+      "colorScheme": {
+        "light": {
+          "root": {
+            "colorOne": "{success.500}",
+            "colorTwo": "{info.500}",
+            "colorThree": "{error.500}",
+            "colorFour": "{warn.500}"
+          }
+        }
+      },
+      "root": {
+        "borderWidth": "{feedback.width.200}"
+      }
+    },
+    "radiobutton": {
+      "root": {
+        "width": "{form.size.400}",
+        "height": "{form.size.400}",
+        "background": "{form.background}",
+        "checkedBackground": "{surface.900}",
+        "checkedHoverBackground": "{surface.800}",
+        "disabledBackground": "{form.disabledBackground}",
+        "filledBackground": "{form.filledBackground}",
+        "borderColor": "{form.borderColor}",
+        "hoverBorderColor": "{form.hoverBorderPrimaryColor}",
+        "focusBorderColor": "{form.borderColor}",
+        "checkedBorderColor": "{surface.900}",
+        "checkedHoverBorderColor": "{form.hoverBorderPrimaryColor}",
+        "checkedFocusBorderColor": "{form.focusBorderPrimaryColor}",
+        "checkedDisabledBorderColor": "{form.borderColor}",
+        "invalidBorderColor": "{form.invalidBorderColor}",
+        "shadow": "0",
+        "transitionDuration": "{form.transitionDuration}"
+      },
+      "focusRing": {
+        "width": "{focusRing.width}",
+        "style": "{focusRing.style}",
+        "color": "{focusRing.color}",
+        "offset": "{focusRing.offset}",
+        "shadow": "{focusRing.shadow}"
+      },
+      "sm": {
+        "width": "{form.size.300}",
+        "height": "{form.size.300}"
+      },
+      "lg": {
+        "width": "{form.size.350}",
+        "height": "{form.size.350}"
+      },
+      "icon": {
+        "size": "0.7rem",
+        "checkedColor": "{text.extend.colorInverted}",
+        "checkedHoverColor": "{text.extend.colorInverted}",
+        "disabledColor": "{text.mutedColor}",
+        "sm": {
+          "size": "{form.icon.100}"
+        },
+        "lg": {
+          "size": "{form.icon.300}"
+        }
+      }
+    },
+    "rating": {
+      "root": {
+        "gap": "{form.gap.200}",
+        "transitionDuration": "{form.transitionDuration}"
+      },
+      "focusRing": {
+        "width": "{form.focusRing.width}",
+        "style": "{form.focusRing.style}",
+        "color": "{form.focusRing.color}",
+        "offset": "{form.focusRing.offset}",
+        "shadow": "{focusRing.shadow}"
+      },
+      "icon": {
+        "size": "{form.icon.500}",
+        "color": "{surface.500}",
+        "hoverColor": "{warn.500}",
+        "activeColor": "{warn.500}"
+      }
+    },
+    "ripple": {
+      "colorScheme": {
+        "light": {
+          "root": {
+            "background": "rgba(255, 255, 255, 0.0100)"
+          }
+        }
+      }
+    },
+    "scrollpanel": {
+      "colorScheme": {
+        "light": {
+          "bar": {
+            "background": "{surface.300}"
+          }
+        }
+      },
+      "root": {
+        "transitionDuration": "{media.transitionDuration}"
+      },
+      "bar": {
+        "size": "{media.size.200}",
+        "borderRadius": "{media.borderRadius.100}",
+        "focusRing": {
+          "width": "0rem",
+          "style": "{focusRing.style}",
+          "color": "{focusRing.color}",
+          "offset": "{focusRing.offset}",
+          "shadow": "{focusRing.shadow}"
+        }
+      }
+    },
+    "select": {
+      "extend": {
+        "extOption": {
+          "background": "{list.option.background}",
+          "gap": "{list.gap.200}"
+        },
+        "extOptionGroup": {
+          "gap": "{list.gap.200}"
+        },
+        "readonlyBackground": "{form.readonlyBackground}",
+        "borderWidth": "{form.borderWidth}",
+        "iconSize": "{form.icon.300}"
+      },
+      "root": {
+        "background": "{form.background}",
+        "disabledBackground": "{form.disabledBackground}",
+        "filledBackground": "{form.filledBackground}",
+        "filledHoverBackground": "{form.filledHoverBackground}",
+        "filledFocusBackground": "{form.filledFocusBackground}",
+        "borderColor": "{form.borderColor}",
+        "hoverBorderColor": "{form.hoverBorderSecondaryColor}",
+        "focusBorderColor": "{form.focusBorderSecondaryColor}",
+        "invalidBorderColor": "{form.invalidBorderColor}",
+        "color": "{text.color}",
+        "disabledColor": "{form.disabledColor}",
+        "placeholderColor": "{form.placeholderColor}",
+        "invalidPlaceholderColor": "{form.invalidPlaceholderColor}",
+        "shadow": "0",
+        "paddingX": "{form.padding.300}",
+        "paddingY": "{form.padding.300}",
+        "borderRadius": "{form.borderRadius.200}",
+        "transitionDuration": "{form.transitionDuration}",
+        "sm": {
+          "fontSize": "{fonts.fontSize.300}",
+          "paddingX": "{form.padding.300}",
+          "paddingY": "{form.padding.200}"
+        },
+        "lg": {
+          "fontSize": "{fonts.fontSize.300}",
+          "paddingX": "{form.padding.300}",
+          "paddingY": "{form.padding.400}"
+        },
+        "focusRing": {
+          "width": "{form.focusRing.width}",
+          "style": "{form.focusRing.style}",
+          "color": "{form.focusRing.color}",
+          "offset": "{form.focusRing.offset}",
+          "shadow": "0"
+        }
+      },
+      "dropdown": {
+        "width": "{form.width.300}",
+        "color": "{form.iconColor}"
+      },
+      "overlay": {
+        "background": "{overlay.select.background}",
+        "borderColor": "{overlay.select.borderColor}",
+        "borderRadius": "{overlay.select.borderRadius}",
+        "color": "{overlay.select.color}",
+        "shadow": "{overlay.select.shadow}"
+      },
+      "list": {
+        "padding": "{list.padding}",
+        "gap": "{list.gap.100}",
+        "header": {
+          "padding": "{list.header.padding}"
+        }
+      },
+      "option": {
+        "focusBackground": "{list.option.focusBackground}",
+        "selectedBackground": "{list.option.selectedBackground}",
+        "selectedFocusBackground": "{list.option.selectedFocusBackground}",
+        "color": "{list.option.color}",
+        "focusColor": "{list.option.focusColor}",
+        "selectedColor": "{list.option.selectedColor}",
+        "selectedFocusColor": "{list.option.selectedFocusColor}",
+        "padding": "{list.option.padding}",
+        "borderRadius": "{list.option.borderRadius}"
+      },
+      "optionGroup": {
+        "background": "{list.optionGroup.background}",
+        "color": "{list.optionGroup.color}",
+        "fontWeight": "{fonts.fontWeight.regular}",
+        "padding": "{list.option.padding}"
+      },
+      "clearIcon": {
+        "color": "{form.iconColor}"
+      },
+      "checkmark": {
+        "color": "{list.option.color}",
+        "gutterStart": "-{form.padding.200}",
+        "gutterEnd": "{form.padding.200}"
+      },
+      "emptyMessage": {
+        "padding": "{list.option.padding}"
+      }
+    },
+    "selectbutton": {
+      "extend": {
+        "gap": "{form.gap.100}",
+        "paddingX": "{controls.padding.100}",
+        "paddingY": "{controls.padding.100}",
+        "checkedBackground": "{form.background}",
+        "iconSize": {
+          "sm": "{controls.iconOnly.200}",
+          "md": "{controls.iconOnly.300}",
+          "lg": "{controls.iconOnly.400}",
+          "xlg": "{controls.iconOnly.500}"
+        },
+        "checkedBorderColor": "{form.background}",
+        "checkedColor": "{form.color}",
+        "ext": {
+          "borderRadius": "{borderRadius.200}"
+        }
+      },
+      "colorScheme": {
+        "light": {
+          "root": {
+            "invalidBorderColor": "{form.invalidBorderColor}"
+          },
+          "extend": {
+            "background": "{surface.200}"
+          }
+        }
+      },
+      "root": {
+        "borderRadius": "{form.borderRadius.200}"
+      }
+    },
+    "skeleton": {
+      "extend": {
+        "minWidth": "{feedback.width.700}",
+        "height": "{feedback.height.650}"
+      },
+      "colorScheme": {
+        "light": {
+          "root": {
+            "background": "{surface.200}",
+            "animationBackground": "{surface.100}"
+          }
+        }
+      },
+      "root": {
+        "borderRadius": "{content.borderRadius}"
+      }
+    },
+    "slider": {
+      "colorScheme": {
+        "handle": {
+          "content": {
+            "background": "{surface.0}"
+          }
+        }
+      },
+      "root": {
+        "transitionDuration": "{form.transitionDuration}"
+      },
+      "track": {
+        "background": "{content.borderColor}",
+        "borderRadius": "{content.borderRadius}",
+        "size": "{form.size.150}"
+      },
+      "range": {
+        "background": "{surface.900}"
+      },
+      "handle": {
+        "width": "{form.size.350}",
+        "height": "{form.size.350}",
+        "borderRadius": "{form.borderRadius.300}",
+        "background": "{surface.900}",
+        "hoverBackground": "{surface.900}",
+        "focusRing": {
+          "width": "{form.focusRing.width}",
+          "style": "{form.focusRing.style}",
+          "color": "{form.focusRing.color}",
+          "offset": "{form.focusRing.offset}",
+          "shadow": "{focusRing.shadow}"
+        },
+        "content": {
+          "borderRadius": "{form.borderRadius.300}",
+          "hoverBackground": "{surface.900}",
+          "width": "{form.size.250}",
+          "height": "{form.size.250}",
+          "shadow": "none"
+        }
+      }
+    },
+    "splitter": {
+      "colorScheme": {
+        "light": {
+          "handle": {
+            "background": "{surface.900}"
+          }
+        }
+      },
+      "gutter": {
+        "background": "{surface.100}"
+      },
+      "root": {
+        "background": "{content.background}",
+        "borderColor": "{content.borderColor}",
+        "color": "{content.color}",
+        "transitionDuration": "{controls.transitionDuration}"
+      },
+      "handle": {
+        "size": "{form.size.150}",
+        "borderRadius": "{content.borderRadius}",
+        "focusRing": {
+          "width": "{form.focusRing.width}",
+          "style": "{form.focusRing.style}",
+          "color": "{form.focusRing.color}",
+          "offset": "{form.focusRing.offset}",
+          "shadow": "{focusRing.shadow}"
+        }
+      }
+    },
+    "stepper": {
+      "extend": {
+        "extCaption": {
+          "gap": "{feedback.gap.100}"
+        },
+        "extStepNumber": {
+          "invalidBackground": "{error.400}",
+          "invalidColor": "{error.900}",
+          "invalidBorderColor": "{error.400}",
+          "borderWidth": "{feedback.width.100}",
+          "iconSize": "{feedback.icon.size.300}"
+        }
+      },
+      "root": {
+        "transitionDuration": "{feedback.transitionDuration}"
+      },
+      "separator": {
+        "background": "{content.borderColor}",
+        "activeBackground": "{form.focusBorderPrimaryColor}",
+        "margin": "0 0 0 1.625rem",
+        "size": "{form.size.100}"
+      },
+      "step": {
+        "padding": "{feedback.padding.100}",
+        "gap": "{feedback.gap.200}"
+      },
+      "stepHeader": {
+        "padding": "0rem",
+        "borderRadius": "0rem",
+        "gap": "{feedback.gap.200}",
+        "focusRing": {
+          "width": "{focusRing.width}",
+          "style": "{focusRing.style}",
+          "color": "{focusRing.color}",
+          "offset": "{focusRing.offset}",
+          "shadow": "{focusRing.shadow}"
+        }
+      },
+      "stepTitle": {
+        "color": "{text.color}",
+        "activeColor": "{text.color}",
+        "fontWeight": "{fonts.fontWeight.regular}"
+      },
+      "stepNumber": {
+        "background": "{content.background}",
+        "activeBackground": "{primary.color}",
+        "borderColor": "{content.borderColor}",
+        "activeBorderColor": "{primary.color}",
+        "color": "{text.color}",
+        "activeColor": "{text.extend.colorPrimaryStatic}",
+        "size": "{form.size.400}",
+        "fontSize": "{fonts.fontSize.300}",
+        "fontWeight": "{fonts.fontWeight.bold}",
+        "borderRadius": "{form.borderRadius.300}",
+        "shadow": "none"
+      },
+      "steppanels": {
+        "padding": "{feedback.padding.200}"
+      },
+      "steppanel": {
+        "background": "{content.background}",
+        "color": "{content.color}",
+        "padding": "0rem",
+        "indent": "0rem"
+      }
+    },
+    "steps": {
+      "itemLink": {
+        "gap": "{form.gap.200}"
+      },
+      "itemLabel": {
+        "fontWeight": "{fonts.fontWeight.regular}"
+      },
+      "itemNumber": {
+        "background": "{content.background}",
+        "size": "{form.size.500}",
+        "fontSize": "{fonts.fontSize.300}",
+        "fontWeight": "{fonts.fontWeight.bold}",
+        "borderRadius": "{form.borderRadius.300}",
+        "shadow": "none"
+      }
+    },
+    "tabs": {
+      "colorScheme": {
+        "light": {
+          "navButton": {
+            "shadow": "none"
+          },
+          "tab": {
+            "background": "{transparent}",
+            "hoverBackground": "{transparent}",
+            "activeBackground": "{transparent}"
+          }
+        }
+      },
+      "root": {
+        "transitionDuration": "{data.transitionDuration}"
+      },
+      "tablist": {
+        "borderWidth": "0 0 {data.width.100} 0",
+        "background": "{transparent}",
+        "borderColor": "{content.borderColor}"
+      },
+      "tab": {
+        "borderWidth": "0",
+        "borderColor": "{content.borderColor}",
+        "hoverBorderColor": "{content.borderColor}",
+        "activeBorderColor": "{content.activeBorderColor}",
+        "color": "{text.mutedColor}",
+        "hoverColor": "{text.color}",
+        "activeColor": "{text.color}",
+        "padding": "{content.padding.300}",
+        "fontWeight": "{fonts.fontWeight.demibold}",
+        "margin": "0",
+        "gap": "{content.gap.200}",
+        "focusRing": {
+          "width": "{focusRing.width}",
+          "style": "{focusRing.style}",
+          "color": "{focusRing.color}",
+          "offset": "{focusRing.offset}",
+          "shadow": "{focusRing.shadow}"
+        }
+      },
+      "tabpanel": {
+        "background": "{transparent}",
+        "color": "{text.color}",
+        "padding": "{spacing.4x}",
+        "focusRing": {
+          "width": "{focusRing.width}",
+          "style": "{focusRing.style}",
+          "color": "{focusRing.color}",
+          "offset": "{focusRing.offset}",
+          "shadow": "{focusRing.shadow}"
+        }
+      },
+      "navButton": {
+        "background": "{content.background}",
+        "color": "{content.color}",
+        "hoverColor": "{content.hoverColor}",
+        "width": "{controls.iconOnly.400}",
+        "focusRing": {
+          "width": "{focusRing.width}",
+          "style": "{focusRing.style}",
+          "color": "{focusRing.color}",
+          "offset": "{focusRing.offset}",
+          "shadow": "{focusRing.shadow}"
+        }
+      },
+      "activeBar": {
+        "height": "0.18rem",
+        "bottom": "-0.18rem",
+        "background": "{content.color}"
+      }
+    },
+    "toast": {
+      "extend": {
+        "extInfo": {
+          "color": "{info.500}",
+          "closeButton": {
+            "color": "{info.500}",
+            "borderColor": "{info.500}"
+          },
+          "caption": {
+            "color": "{text.color}"
+          }
+        },
+        "extAccentLine": {
+          "width": "{feedback.width.200}"
+        },
+        "extCloseButton": {
+          "width": "{feedback.width.100}"
+        },
+        "extSuccess": {
+          "color": "{success.500}",
+          "closeButton": {
+            "color": "{success.500}",
+            "borderColor": "{success.500}"
+          },
+          "caption": {
+            "color": "{text.color}"
+          }
+        },
+        "extWarn": {
+          "color": "{warn.500}",
+          "closeButton": {
+            "color": "{warn.500}",
+            "borderColor": "{warn.500}"
+          },
+          "caption": {
+            "color": "{text.color}"
+          }
+        },
+        "extError": {
+          "color": "{error.500}",
+          "closeButton": {
+            "color": "{error.500}",
+            "borderColor": "{error.500}"
+          },
+          "caption": {
+            "color": "{text.color}"
+          }
+        }
+      },
+      "colorScheme": {
+        "light": {
+          "info": {
+            "background": "{info.50}",
+            "borderColor": "{info.500}",
+            "color": "{text.color}",
+            "detailColor": "{text.color}",
+            "shadow": "{overlay.popover.shadow}",
+            "closeButton": {
+              "hoverBackground": "{info.200}",
+              "focusRing": {
+                "color": "{focusRing.color}",
+                "shadow": "{focusRing.shadow}"
+              }
+            }
+          },
+          "success": {
+            "background": "{success.50}",
+            "borderColor": "{success.500}",
+            "color": "{text.color}",
+            "detailColor": "{text.color}",
+            "shadow": "{overlay.popover.shadow}",
+            "closeButton": {
+              "hoverBackground": "{success.200}",
+              "focusRing": {
+                "color": "{focusRing.color}",
+                "shadow": "{focusRing.shadow}"
+              }
+            }
+          },
+          "warn": {
+            "background": "{warn.50}",
+            "borderColor": "{warn.500}",
+            "color": "{text.color}",
+            "detailColor": "{text.color}",
+            "shadow": "{overlay.popover.shadow}",
+            "closeButton": {
+              "hoverBackground": "{warn.200}",
+              "focusRing": {
+                "color": "{focusRing.color}",
+                "shadow": "none"
+              }
+            }
+          },
+          "error": {
+            "background": "{error.50}",
+            "borderColor": "{error.500}",
+            "color": "{text.color}",
+            "detailColor": "{text.color}",
+            "shadow": "{overlay.popover.shadow}",
+            "closeButton": {
+              "hoverBackground": "{error.200}",
+              "focusRing": {
+                "color": "{focusRing.color}",
+                "shadow": "{focusRing.shadow}"
+              }
+            }
+          },
+          "secondary": {
+            "shadow": "{overlay.popover.shadow}"
+          },
+          "contrast": {
+            "shadow": "{overlay.popover.shadow}"
+          }
+        }
+      },
+      "root": {
+        "width": "{messages.width}",
+        "borderWidth": "{feedback.width.100}",
+        "borderRadius": "{content.borderRadius}",
+        "transitionDuration": "{feedback.transitionDuration}"
+      },
+      "icon": {
+        "size": "{feedback.icon.size.500}"
+      },
+      "content": {
+        "padding": "{feedback.padding.200}",
+        "gap": "{feedback.gap.400}"
+      },
+      "text": {
+        "gap": "{feedback.gap.100}"
+      },
+      "summary": {
+        "fontWeight": "{fonts.fontWeight.bold}",
+        "fontSize": "{fonts.fontSize.300}"
+      },
+      "detail": {
+        "fontWeight": "{fonts.fontWeight.regular}",
+        "fontSize": "{fonts.fontSize.200}"
+      },
+      "closeButton": {
+        "width": "{feedback.icon.size.400}",
+        "height": "{feedback.icon.size.400}",
+        "borderRadius": "{controls.borderRadius.100}",
+        "focusRing": {
+          "width": "{focusRing.width}",
+          "style": "{focusRing.style}",
+          "offset": "{focusRing.offset}"
+        }
+      },
+      "closeIcon": {
+        "size": "{feedback.icon.size.200}"
+      }
+    },
+    "tag": {
+      "colorScheme": {
+        "light": {
+          "primary": {
+            "background": "{primary.selectedBackground}",
+            "color": "{text.color}"
+          },
+          "secondary": {
+            "background": "{surface.200}",
+            "color": "{text.color}"
+          },
+          "success": {
+            "background": "{success.400}",
+            "color": "{success.900}"
+          },
+          "info": {
+            "background": "{info.300}",
+            "color": "{info.900}"
+          },
+          "warn": {
+            "background": "{warn.300}",
+            "color": "{warn.900}"
+          },
+          "danger": {
+            "background": "{error.300}",
+            "color": "{error.900}"
+          }
+        }
+      },
+      "root": {
+        "fontSize": "{fonts.fontSize.100}",
+        "fontWeight": "{fonts.fontWeight.regular}",
+        "padding": "{media.padding.100} {media.padding.200}",
+        "gap": "{media.gap.100}",
+        "borderRadius": "{media.size.200}",
+        "roundedBorderRadius": "{media.borderRadius.400}"
+      },
+      "icon": {
+        "size": "{media.icon.size.100}"
+      }
+    },
+    "textarea": {
+      "extend": {
+        "readonlyBackground": "{form.readonlyBackground}",
+        "borderWidth": "{form.borderWidth}",
+        "iconSize": "{form.icon.300}",
+        "minHeight": "{form.size.900}",
+        "extXlg": {
+          "fontSize": "{fonts.fontSize.300}",
+          "paddingX": "{form.padding.300}",
+          "paddingY": "{form.padding.500}"
+        }
+      },
+      "root": {
+        "background": "{form.background}",
+        "disabledBackground": "{form.disabledBackground}",
+        "filledBackground": "{form.filledBackground}",
+        "filledHoverBackground": "{form.filledHoverBackground}",
+        "filledFocusBackground": "{form.filledFocusBackground}",
+        "borderColor": "{form.borderColor}",
+        "hoverBorderColor": "{form.hoverBorderSecondaryColor}",
+        "focusBorderColor": "{form.focusBorderSecondaryColor}",
+        "invalidBorderColor": "{form.invalidBorderColor}",
+        "color": "{form.color}",
+        "disabledColor": "{form.disabledColor}",
+        "placeholderColor": "{form.placeholderColor}",
+        "invalidPlaceholderColor": "{form.invalidPlaceholderColor}",
+        "shadow": "0",
+        "paddingX": "{form.padding.300}",
+        "paddingY": "{form.padding.300}",
+        "borderRadius": "{form.borderRadius.200}",
+        "transitionDuration": "{form.transitionDuration}",
+        "focusRing": {
+          "width": "{form.focusRing.width}",
+          "style": "{form.focusRing.style}",
+          "color": "{form.focusRing.color}",
+          "offset": "{form.focusRing.offset}",
+          "shadow": "0"
+        },
+        "sm": {
+          "fontSize": "{fonts.fontSize.300}",
+          "paddingX": "{form.padding.300}",
+          "paddingY": "{form.padding.200}"
+        },
+        "lg": {
+          "fontSize": "{fonts.fontSize.300}",
+          "paddingX": "{form.padding.300}",
+          "paddingY": "{form.padding.400}"
+        }
+      }
+    },
+    "tieredmenu": {
+      "extend": {
+        "extSubmenu": {
+          "borderColor": "{content.borderColor}",
+          "background": "{content.background}"
+        },
+        "iconSize": "{navigation.submenuIcon.size}",
+        "extItem": {
+          "caption": {
+            "gap": "{content.gap.100}",
+            "color": "{text.mutedColor}"
+          }
+        }
+      },
+      "root": {
+        "background": "{content.background}",
+        "borderColor": "{transparent}",
+        "color": "{content.color}",
+        "borderRadius": "{content.borderRadius}",
+        "shadow": "{navigation.shadow}",
+        "transitionDuration": "{feedback.transitionDuration}"
+      },
+      "list": {
+        "padding": "{navigation.list.padding.100}",
+        "gap": "{navigation.list.gap}"
+      },
+      "item": {
+        "focusBackground": "{navigation.item.focusBackground}",
+        "activeBackground": "{navigation.item.activeBackground}",
+        "color": "{navigation.item.color}",
+        "focusColor": "{navigation.item.focusColor}",
+        "activeColor": "{navigation.item.activeColor}",
+        "padding": "{navigation.item.padding}",
+        "borderRadius": "{navigation.item.borderRadius}",
+        "gap": "{navigation.item.gap}",
+        "icon": {
+          "color": "{navigation.item.icon.color}",
+          "focusColor": "{navigation.item.icon.focusColor}",
+          "activeColor": "{navigation.item.icon.activeColor}"
+        }
+      },
+      "submenu": {
+        "mobileIndent": "{overlay.popover.padding.100}"
+      },
+      "separator": {
+        "borderColor": "{content.borderColor}"
+      }
+    },
+    "timeline": {
+      "extend": {
+        "extEvent": {
+          "gap": "{feedback.gap.100}"
+        }
+      },
+      "event": {
+        "minHeight": "{feedback.height.900}"
+      },
+      "vertical": {
+        "eventContent": {
+          "padding": "0 {feedback.padding.100}"
+        }
+      },
+      "horizontal": {
+        "eventContent": {
+          "padding": "{feedback.padding.100} 0"
+        }
+      },
+      "eventMarker": {
+        "size": "{feedback.width.500}",
+        "borderRadius": "{content.borderRadius}",
+        "borderWidth": "{feedback.width.200}",
+        "background": "{content.background}",
+        "borderColor": "{primary.color}",
+        "content": {
+          "borderRadius": "{content.borderRadius}",
+          "size": "{feedback.width.400}",
+          "background": "{transparent}",
+          "insetShadow": "none"
+        }
+      },
+      "eventConnector": {
+        "color": "{content.borderColor}",
+        "size": "{feedback.width.100}"
+      },
+      "colorScheme": {
+        "light": {
+          "eventMarker": {
+            "background": "{content.background}",
+            "borderColor": "{primary.color}"
+          }
+        },
+        "dark": {
+          "eventMarker": {
+            "background": "{content.background}",
+            "borderColor": "{primary.color}"
+          }
+        }
+      }
+    },
+    "togglebutton": {
+      "extend": {
+        "ext": {
+          "gap": "{form.gap.300}"
+        },
+        "iconSize": {
+          "sm": "{controls.iconOnly.200}",
+          "md": "{controls.iconOnly.300}",
+          "lg": "{controls.iconOnly.400}"
+        },
+        "iconOnlyWidth": "{form.size.600}",
+        "hoverBorderColor": "{surface.300}",
+        "checkedHoverColor": "{text.extend.colorInverted}",
+        "checkedHoverBackground": "{surface.800}",
+        "checkedHoverBorderColor": "{surface.800}",
+        "extXlg": {
+          "padding": "{form.padding.500} {form.padding.600}",
+          "iconOnlyWidth": "4.0714rem"
+        },
+        "extSm": {
+          "iconOnlyWidth": "2.1429rem"
+        },
+        "extLg": {
+          "iconOnlyWidth": "3.5714rem"
+        }
+      },
+      "colorScheme": {
+        "light": {
+          "root": {
+            "background": "{surface.200}",
+            "hoverBackground": "{surface.300}",
+            "borderColor": "{surface.200}",
+            "color": "{text.color}",
+            "hoverColor": "{text.color}",
+            "checkedBackground": "{surface.900}",
+            "checkedColor": "{text.extend.colorInverted}",
+            "checkedBorderColor": "{surface.900}",
+            "disabledBackground": "{form.disabledBackground}",
+            "disabledBorderColor": "{form.disabledBackground}",
+            "disabledColor": "{form.disabledColor}",
+            "invalidBorderColor": "{form.invalidBorderColor}"
+          },
+          "icon": {
+            "color": "{text.color}",
+            "hoverColor": "{text.color}",
+            "checkedColor": "{text.extend.colorInverted}",
+            "disabledColor": "{form.disabledColor}"
+          },
+          "content": {
+            "checkedBackground": "{transparent}"
+          }
+        }
+      },
+      "root": {
+        "padding": "{form.padding.200} {form.padding.400}",
+        "borderRadius": "{form.borderRadius.300}",
+        "gap": "{form.gap.200}",
+        "fontWeight": "{fonts.fontWeight.demibold}",
+        "focusRing": {
+          "width": "{form.focusRing.width}",
+          "style": "{form.focusRing.style}",
+          "color": "{form.focusRing.color}",
+          "offset": "{form.focusRing.offset}",
+          "shadow": "{focusRing.shadow}"
+        },
+        "sm": {
+          "fontSize": "{fonts.fontSize.200}",
+          "padding": "{form.padding.100} {form.padding.300}"
+        },
+        "lg": {
+          "fontSize": "{fonts.fontSize.500}",
+          "padding": "{form.padding.400} {form.padding.600}"
+        },
+        "transitionDuration": "{form.transitionDuration}"
+      },
+      "content": {
+        "checkedShadow": "none",
+        "padding": "0rem",
+        "borderRadius": "0rem",
+        "sm": {
+          "padding": "0rem"
+        },
+        "lg": {
+          "padding": "0rem"
+        }
+      }
+    },
+    "toggleswitch": {
+      "colorScheme": {
+        "light": {
+          "root": {
+            "background": "{surface.400}",
+            "hoverBackground": "{surface.500}",
+            "disabledBackground": "{form.disabledBackground}",
+            "checkedBackground": "{surface.900}",
+            "checkedHoverBackground": "{surface.800}"
+          },
+          "handle": {
+            "background": "{form.backgroundHandler}",
+            "hoverBackground": "{form.backgroundHandler}",
+            "disabledBackground": "{form.disabledColor}",
+            "checkedBackground": "{surface.0}",
+            "checkedHoverBackground": "{surface.0}",
+            "color": "{text.color}",
+            "hoverColor": "{text.color}",
+            "checkedColor": "{text.color}",
+            "checkedHoverColor": "{text.color}"
+          }
+        }
+      },
+      "root": {
+        "width": "{form.size.600}",
+        "height": "{form.size.400}",
+        "borderRadius": "{form.borderRadius.300}",
+        "gap": "{form.gap.100}",
+        "borderWidth": "{form.borderWidth}",
+        "shadow": "none",
+        "focusRing": {
+          "width": "{form.focusRing.width}",
+          "style": "{form.focusRing.style}",
+          "color": "{form.focusRing.color}",
+          "offset": "{form.focusRing.offset}",
+          "shadow": "0"
+        },
+        "borderColor": "{transparent}",
+        "hoverBorderColor": "{transparent}",
+        "checkedBorderColor": "{transparent}",
+        "checkedHoverBorderColor": "{transparent}",
+        "invalidBorderColor": "{form.invalidBorderColor}",
+        "transitionDuration": "{form.transitionDuration}",
+        "slideDuration": "{form.transitionDuration}"
+      },
+      "handle": {
+        "borderRadius": "{form.borderRadius.300}",
+        "size": "{form.size.300}"
+      }
+    },
+    "tooltip": {
+      "colorScheme": {
+        "light": {
+          "root": {
+            "background": "{surface.900}",
+            "color": "{text.extend.colorInverted}"
+          }
+        }
+      },
+      "root": {
+        "maxWidth": "{overlay.width}",
+        "gutter": "{feedback.gap.100}",
+        "shadow": "{overlay.popover.shadow}",
+        "padding": "{feedback.padding.100} {feedback.padding.200} ",
+        "borderRadius": "{overlay.popover.borderRadius}"
+      }
+    },
+    "tree": {
+      "root": {
+        "background": "{content.background}",
+        "color": "{content.color}",
+        "padding": "{data.padding.400}",
+        "gap": "{data.gap.100}",
+        "indent": "{data.padding.400}"
+      },
+      "node": {
+        "padding": "{data.padding.200} {data.padding.300}",
+        "color": "{text.color}",
+        "selectedColor": "{text.extend.colorInverted}",
+        "gap": "{data.gap.100}"
+      },
+      "nodeIcon": {
+        "selectedColor": "{text.extend.colorInverted}"
+      },
+      "nodeToggleButton": {
+        "borderRadius": "{data.borderRadius}",
+        "size": "{data.icon.size.400}",
+        "selectedHoverBackground": "{surface.900}"
+      },
+      "loadingIcon": {
+        "size": "{data.icon.size.100}"
+      },
+      "filter": {
+        "margin": "0 0 {data.padding.200} 0"
+      }
+    },
+    "overlaybadge": {
+      "root": {
+        "outline": {
+          "width": "0rem",
+          "color": "{transparent}"
+        }
+      }
+    }
+  }
+}
diff --git a/scripts/tokens/build_tokens.py b/scripts/tokens/build_tokens.py
new file mode 100644
index 00000000..7357d640
--- /dev/null
+++ b/scripts/tokens/build_tokens.py
@@ -0,0 +1,23 @@
+import json, re, copy
+orig=json.load(open("src/lib/providers/prime-preset/tokens/tokens.json"))
+canon=json.load(open("docs/superpowers/specs/prebuild-tokens.json"))
+def strip_color(o):
+    if isinstance(o,str): return re.sub(r"\{color\.([^}]+)\}", r"{\1}", o)
+    if isinstance(o,dict): return {k:strip_color(v) for k,v in o.items()}
+    if isinstance(o,list): return [strip_color(x) for x in o]
+    return o
+def merge(a,b):
+    out=copy.deepcopy(a)
+    for k,v in b.items():
+        out[k]=merge(out[k],v) if (k in out and isinstance(out[k],dict) and isinstance(v,dict)) else copy.deepcopy(v)
+    return out
+prim=copy.deepcopy(orig["primitive"]); prim["size"]=copy.deepcopy(canon["primitive"]["size"])
+sem=copy.deepcopy(orig["semantic"])  # сохраняем старый colorScheme + бакеты = backward-compat для Aura/CSS
+sem["dimension"]=strip_color(canon["semantic"]["dimension"])
+sem["typography"]=strip_color(canon["semantic"]["typography"])
+sem["shadow"]=strip_color(canon["semantic"]["shadow"])
+sem["colorScheme"]["light"]=merge(sem["colorScheme"]["light"], strip_color(canon["semantic"]["color"]["light"]))
+sem["colorScheme"]["dark"]=merge(sem["colorScheme"]["dark"], strip_color(canon["semantic"]["color"]["dark"]))
+out={"primitive":prim,"semantic":sem,"components":strip_color(canon["components"])}
+json.dump(out, open("src/lib/providers/prime-preset/tokens/tokens.migrated.json","w"), ensure_ascii=False, indent=2)
+print("ok")
diff --git a/scripts/tokens/repoint_primitive.py b/scripts/tokens/repoint_primitive.py
new file mode 100644
index 00000000..e1c60ad0
--- /dev/null
+++ b/scripts/tokens/repoint_primitive.py
@@ -0,0 +1,14 @@
+import json
+m=json.load(open("docs/superpowers/specs/2026-06-17-primitive-remap.json"))
+f="src/lib/providers/prime-preset/tokens/tokens.json"
+t=json.load(open(f))
+def fix(o):
+    if isinstance(o,str):
+        for old,new in m.items(): o=o.replace("{"+old+"}","{"+new+"}")
+        return o
+    if isinstance(o,dict): return {k:fix(v) for k,v in o.items()}
+    if isinstance(o,list): return [fix(x) for x in o]
+    return o
+t=fix(t)
+for k in ("spacing","sizing","borderWidth","borderRadius"): t["primitive"].pop(k,None)
+json.dump(t,open(f,"w"),ensure_ascii=False,indent=2); print("ok, primitive keys:", list(t["primitive"].keys()))
diff --git a/scripts/tokens/validate.py b/scripts/tokens/validate.py
new file mode 100644
index 00000000..31b973ef
--- /dev/null
+++ b/scripts/tokens/validate.py
@@ -0,0 +1,69 @@
+import json, re, sys
+# Эталон значений = pre-migration снимок (фикстура). Можно переопределить argv[2].
+# Использование: python3 validate.py <candidate> [<baseline>]
+DEFAULT_BASE="scripts/tokens/baseline.json"
+def get(t,p):
+    c=t
+    for x in p.split("."):
+        c=c.get(x) if isinstance(c,dict) else None
+        if c is None: return None
+    return c
+def leaves(d,p=""):
+    for k,v in d.items():
+        pp=p+"."+k if p else k
+        if isinstance(v,dict): yield from leaves(v,pp)
+        elif isinstance(v,str): yield pp,v
+def mkres(t,mode):
+    P=t["primitive"];S=t["semantic"];CS=get(S,"colorScheme.%s"%mode) or {};CL=get(S,"color.%s"%mode) or {}
+    def r(val,d=0):
+        if not isinstance(val,str) or d>30: return val
+        def rp(m):
+            ref=m.group(1);root=ref.split(".")[0]
+            node=get(CL,ref[6:]) if root=="color" else (get(P,ref) or get(S,ref) or get(CS,ref) or get(t["components"],ref))
+            if node is None or isinstance(node,dict): return m.group(0)
+            return r(node,d+1)
+        return re.sub(r"\{([^}]+)\}",rp,val)
+    return r
+def main(cand, base_path):
+    base=json.load(open(base_path)); new=json.load(open(cand))
+    if base_path==cand:
+        print("WARN: baseline == candidate — EQUIV-проверка вырождена (сравнение файла с собой)")
+    # equivalence
+    for mode in ("light","dark"):
+        rb=mkres(base,mode); rn=mkres(new,mode)
+        ob=dict(leaves(base["components"])); on=dict(leaves(new["components"]))
+        same=diff=0
+        for path in set(ob)&set(on):
+            a=rb(ob[path]).strip().lower(); b=rn(on[path]).strip().lower()
+            if "{" in a or "{" in b: continue
+            if a==b: same+=1
+            elif "0.000" in a and "0.000" in b: same+=1
+            else: diff+=1
+        print(f"EQUIV {mode}: same={same} diffs={diff}")
+        if diff>0: globals()['FAIL']=True
+    # dangling + R11
+    PRIM=set(new["primitive"].keys()); SEM=set(new["semantic"].keys())
+    CL=get(new["semantic"],"color.light") or {}
+    CS=get(new["semantic"],"colorScheme.light") or {}
+    def resolves(r):
+        root=r.split(".")[0]
+        if root=="color": return get(CL,r[6:]) is not None
+        # любой формат: primitive | semantic top-level | colorScheme.light | color.light | component
+        return (get(new["primitive"],r) is not None or get(new["semantic"],r) is not None
+                or get(CS,r) is not None or get(CL,r) is not None or get(new["components"],r) is not None)
+    refs=[]
+    def walk(d):
+        for v in d.values():
+            if isinstance(v,dict): walk(v)
+            elif isinstance(v,str): refs.extend(re.findall(r"\{([^}]+)\}",v))
+    walk(new["components"])
+    dang=[r for r in refs if not resolves(r)]
+    prim_refs=[r for r in refs if r.split(".")[0] in PRIM]
+    print(f"DANGLING={len(dang)} {dang[:5]}")
+    print(f"R11_PRIMITIVE_REFS={len(prim_refs)} {sorted(set(prim_refs))[:5]}")
+    if dang: globals()['FAIL']=True
+if __name__=="__main__":
+    cand=sys.argv[1]
+    base=sys.argv[2] if len(sys.argv)>2 else DEFAULT_BASE
+    FAIL=False; main(cand, base)
+    sys.exit(1 if FAIL else 0)
diff --git a/src/lib/components/accordion/accordion.figma.md b/src/lib/components/accordion/accordion.figma.md
new file mode 100644
index 00000000..fb091e40
--- /dev/null
+++ b/src/lib/components/accordion/accordion.figma.md
@@ -0,0 +1,132 @@
+---
+component: ExtraAccordion
+selector: extra-accordion
+import:
+  symbol: ExtraAccordionComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '1153:3084'
+  componentKey: '6d041d9db66babf7fe442165f3ab97f9bea7710a'
+  name: '<Accordion>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraAccordionComponent` — компонент аккордеона, который группирует связанный контент в вертикальный набор раскрываемых/сворачиваемых секций. Экономит место при большом объёме информации и поддерживает прогрессивное раскрытие. Оборачивает PrimeNG `p-accordion` с под-элементами `p-accordion-panel`, `p-accordion-header` и `p-accordion-content`.
+
+Компонент соответствует Figma-компоненту `<Accordion>` (nodeId `1153:3084`, fileKey `Khh7arsuXss3ncqy1Dz3OZ`, библиотека «UI Kit (DS) v2.0»). В отличие от диалога, содержимое задаётся декларативно через массив `items`, а не через слоты проекции контента — каждая секция описывается объектом `ExtraAccordionItem`.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `items` | `ExtraAccordionItem[]` | `[]` | Массив секций аккордеона; каждый элемент рендерится как отдельная панель с заголовком и содержимым |
+| `multiple` | `boolean` | `false` | Разрешить одновременное раскрытие нескольких панелей — соответствует Figma-режиму single/multiple |
+| `activeValue` | `string \| null` | `'0'` | Значение (`value`) изначально раскрытой панели; `null` — все панели свёрнуты |
+
+> `activeValueChange` — `@Output() EventEmitter<string \| number \| string[] \| number[] \| null \| undefined>`. Используйте синтаксис `[(activeValue)]` для двусторонней привязки активной секции.
+
+Структура одного элемента `ExtraAccordionItem`:
+
+| Поле | Тип | Описание |
+|------|-----|---------|
+| `value` | `string` | Уникальный идентификатор панели (ключ раскрытия и `track` в цикле) |
+| `header` | `string` | Текст заголовка панели |
+| `content` | `string` | Текстовое содержимое раскрываемой панели |
+| `icon` | `string` (опц.) | CSS-класс иконки в заголовке; доступные иконки — [icons.md](../../figma-code-connect/icons.md) |
+| `disabled` | `boolean` (опц.) | Заблокировать панель — она недоступна для раскрытия |
+
+## Variants
+
+### Одиночное раскрытие (single, по умолчанию)
+
+Figma: `<Accordion>`, режим single — раскрыта ровно одна панель.
+
+```html
+<extra-accordion
+  [items]="items"
+  activeValue="0"
+></extra-accordion>
+```
+
+```ts
+import { ExtraAccordionComponent, ExtraAccordionItem } from '@cdek-it/angular-ui-kit';
+
+// В компоненте:
+items: ExtraAccordionItem[] = [
+  { value: '0', header: 'Данные отправления', content: 'Заказ №ЦД-00123456' },
+  { value: '1', header: 'Маршрут доставки', content: 'Москва → Новосибирск' },
+];
+```
+
+### Множественное раскрытие (multiple)
+
+Figma: `<Accordion>`, режим multiple — одновременно могут быть раскрыты несколько панелей.
+
+```html
+<extra-accordion
+  [items]="items"
+  [multiple]="true"
+  activeValue="0"
+></extra-accordion>
+```
+
+```ts
+import { ExtraAccordionComponent, ExtraAccordionItem } from '@cdek-it/angular-ui-kit';
+```
+
+### С заблокированной панелью (disabled)
+
+Заблокированная панель задаётся через `disabled: true` в соответствующем `ExtraAccordionItem` и недоступна для раскрытия.
+
+```html
+<extra-accordion
+  [items]="items"
+  activeValue="0"
+></extra-accordion>
+```
+
+```ts
+import { ExtraAccordionComponent, ExtraAccordionItem } from '@cdek-it/angular-ui-kit';
+
+// В компоненте:
+items: ExtraAccordionItem[] = [
+  { value: '0', header: 'Данные отправления', content: 'Заказ №ЦД-00123456' },
+  { value: '1', header: 'Документы (недоступно)', content: 'Недоступно', disabled: true },
+];
+```
+
+## Slots
+
+Не используются. Аккордеон не применяет проекцию содержимого — структура секций задаётся декларативно через массив `items`.
+
+Внутренняя композиция каждой секции (рендерится компонентом автоматически по элементу `ExtraAccordionItem`):
+
+| Часть | PrimeNG-узел | Источник |
+|-------|--------------|----------|
+| Панель | `p-accordion-panel` | один элемент массива `items` (`value`, `disabled`) |
+| Заголовок | `p-accordion-header` | `item.header` + опциональная `item.icon` |
+| Содержимое | `p-accordion-content` | `item.content` |
+
+## Related
+
+- [Button](../button/button.figma.md) — кнопки действий внутри или рядом с панелями
+- [Иконки](../../figma-code-connect/icons.md) — CSS-классы иконок для заголовков панелей
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены поверхности и границ панелей
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Задавайте уникальный `value` для каждого элемента `items` — он используется как ключ раскрытия и `track`.
+- Используйте `[(activeValue)]` для двусторонней синхронизации раскрытой секции с состоянием компонента.
+- Включайте `[multiple]="true"`, когда пользователю полезно сравнивать содержимое нескольких секций одновременно.
+- Помечайте недоступные секции через `disabled: true` в `ExtraAccordionItem`, а не скрывайте их полностью.
+
+**Don't:**
+- Не используйте аккордеон для критичной информации, которая должна быть всегда видна.
+- Не путайте с Tabs — вкладки показывают параллельные равноправные разделы, а аккордеон раскрывает секции контента.
+- Не задавайте `activeValue`, не существующий среди `value` элементов `items` — ни одна панель не раскроется.
diff --git a/src/lib/components/autocomplete/autocomplete.figma.md b/src/lib/components/autocomplete/autocomplete.figma.md
new file mode 100644
index 00000000..257cdc11
--- /dev/null
+++ b/src/lib/components/autocomplete/autocomplete.figma.md
@@ -0,0 +1,255 @@
+---
+component: ExtraAutoComplete
+selector: extra-auto-complete
+import:
+  symbol: ExtraAutoCompleteComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '9370:42021'
+  componentKey: 'bfe33336c5b6261f311895a42da1f3a8a92ae4d4'
+  name: '<AutoComplete>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraAutoCompleteComponent` — текстовое поле с выпадающим списком подсказок, фильтруемым по мере ввода (паттерн combobox). Подходит для свободного ввода с автодополнением, длинных списков, асинхронной подгрузки опций по вводу и множественного выбора тегами. Оборачивает PrimeNG `p-autocomplete` и расширяет его размерами и режимом `fluid`. Реализует `ControlValueAccessor` и работает с `[(ngModel)]` и `[formControl]` «из коробки».
+
+Компонент соответствует Figma-компоненту `<AutoComplete>` (component set, nodeId `9370:42021`, fileKey `Khh7arsuXss3ncqy1Dz3OZ`, библиотека «UI Kit (DS) v2.0»). Варианты задаются Figma-свойствами `type` (`dropdown | group | multi-select`) и `state` (`default | opened`). Выпадающая панель, пункты и группы вынесены в отдельные Figma-узлы `<AutoComplete.Overlay>`, `<AutoComplete.Option>` и `<AutoComplete.Group>`.
+
+В отличие от `<Select>`, список подсказок не задаётся статически: он наполняется обработчиком события `(completeMethod)`, который вызывается при вводе текста и должен заполнить `[suggestions]` отфильтрованными значениями.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `suggestions` | `any[]` | `[]` | Массив подсказок выпадающего списка; наполняется обработчиком `(completeMethod)` |
+| `optionLabel` | `string \| undefined` | `undefined` | Имя поля опции, отображаемое как подпись |
+| `optionValue` | `string \| undefined` | `undefined` | Имя поля опции, используемое как значение модели |
+| `optionDisabled` | `string \| undefined` | `undefined` | Имя булева поля опции, отключающего её выбор |
+| `optionGroupLabel` | `string \| undefined` | `undefined` | Имя поля заголовка группы (при `group=true`) — соответствует Figma-свойству `type=group` |
+| `optionGroupChildren` | `string \| undefined` | `undefined` | Имя поля группы со списком дочерних опций |
+| `group` | `boolean` | `false` | Включает группировку опций — соответствует Figma-свойству `type=group` |
+| `multiple` | `boolean` | `false` | Режим множественного выбора тегами — соответствует Figma-свойству `type=multi-select` |
+| `dropdown` | `boolean` | `false` | Показывает кнопку раскрытия списка — соответствует Figma-свойству `type=dropdown` |
+| `dropdownMode` | `'blank' \| 'current'` | `'blank'` | Поведение кнопки dropdown: показать все опции (`blank`) или подсказки по текущему вводу (`current`) |
+| `showClear` | `boolean` | `false` | Показывает иконку очистки (×) при наличии значения — соответствует Figma-свойству `show-clear` |
+| `forceSelection` | `boolean` | `false` | Ограничивает ввод только значениями из списка подсказок |
+| `completeOnFocus` | `boolean` | `false` | Запрашивает подсказки при получении фокуса |
+| `placeholder` | `string \| undefined` | `undefined` | Подсказка при пустом поле — соответствует Figma-свойству `text-placeholder` / `has-placeholder` |
+| `minLength` | `number` | `1` | Минимальная длина ввода для запроса подсказок |
+| `delay` | `number` | `300` | Задержка (мс) перед вызовом `(completeMethod)` после ввода |
+| `scrollHeight` | `string` | `'200px'` | Максимальная высота выпадающей панели |
+| `emptyMessage` | `string \| undefined` | `undefined` | Сообщение при пустом списке подсказок |
+| `size` | `'small' \| 'base' \| 'large' \| 'xlarge'` | `'base'` | Размер поля; `large`/`xlarge` маппируются на CSS-классы `p-inputtext-lg` / `p-inputtext-xlg` |
+| `readonly` | `boolean` | `false` | Только для чтения — соответствует Figma-состоянию `state=readonly` |
+| `invalid` | `boolean` | `false` | Невалидное состояние — соответствует Figma-состоянию `state=danger` |
+| `fluid` | `boolean` | `false` | Растягивает поле на всю ширину контейнера |
+| `unique` | `boolean` | `false` | Запрещает повторный выбор одной опции (при `multiple=true`) |
+| `dataKey` | `string \| undefined` | `undefined` | Имя поля-идентификатора опции для сравнения значений |
+| `inputId` | `string \| undefined` | `undefined` | `id` нативного инпута для связи с внешним `<label>` |
+| `ariaLabel` | `string \| undefined` | `undefined` | Метка для программ экранного доступа |
+| `ariaLabelledBy` | `string \| undefined` | `undefined` | `id` внешнего элемента-метки для доступности |
+| `autofocus` | `boolean` | `false` | Автофокус при монтировании компонента |
+| `disabled` | `boolean` | `false` | Отключённое состояние — управляется через `FormControl.disable()` или `ControlValueAccessor.setDisabledState`; соответствует Figma-состоянию `state=disabled` |
+| `(completeMethod)` | `EventEmitter<ExtraAutoCompleteCompleteEvent>` | — | Событие запроса подсказок при вводе; обработчик заполняет `[suggestions]` |
+| `(onSelect)` | `EventEmitter<ExtraAutoCompleteSelectEvent>` | — | Событие выбора подсказки |
+| `(onUnselect)` | `EventEmitter<ExtraAutoCompleteUnselectEvent>` | — | Событие снятия выбора (при `multiple=true`) |
+| `(onDropdownClick)` | `EventEmitter<ExtraAutoCompleteDropdownClickEvent>` | — | Событие клика по кнопке dropdown |
+| `(onFocus)` | `EventEmitter<Event>` | — | Событие получения фокуса |
+| `(onBlur)` | `EventEmitter<Event>` | — | Событие потери фокуса |
+| `(onClear)` | `EventEmitter<void>` | — | Событие очистки значения (при `showClear=true`) |
+| `[(ngModel)]` / `[formControl]` | `any` | `null` | Выбранное значение через ControlValueAccessor |
+
+## Variants
+
+### Basic (поле с автодополнением)
+
+Figma: `<AutoComplete>`, type=dropdown, state=default — nodeId `9370:42022`
+
+Базовый ввод без кнопки раскрытия: подсказки появляются по мере набора текста.
+
+```html
+<extra-auto-complete
+  [suggestions]="filtered"
+  (completeMethod)="search($event)"
+  placeholder="Начните ввод..."
+  [(ngModel)]="value"
+  name="city"
+></extra-auto-complete>
+```
+
+```ts
+search(event: ExtraAutoCompleteCompleteEvent): void {
+  this.filtered = this.cities.filter(c =>
+    c.toLowerCase().includes((event.query || '').toLowerCase())
+  );
+}
+```
+
+### Dropdown (с кнопкой раскрытия списка)
+
+Figma: `<AutoComplete>`, type=dropdown, state=opened — nodeId `9370:42028`
+
+```html
+<extra-auto-complete
+  [suggestions]="filtered"
+  (completeMethod)="search($event)"
+  [dropdown]="true"
+  placeholder="Выберите город..."
+  [(ngModel)]="value"
+  name="cityDropdown"
+></extra-auto-complete>
+```
+
+### Multiple (множественный выбор тегами)
+
+Figma: `<AutoComplete>`, type=multi-select, state=default — nodeId `9370:42024`
+
+```html
+<extra-auto-complete
+  [suggestions]="filtered"
+  (completeMethod)="search($event)"
+  [multiple]="true"
+  [unique]="true"
+  placeholder="Добавьте города..."
+  [(ngModel)]="selectedCities"
+  name="cities"
+></extra-auto-complete>
+```
+
+### С привязкой объектов (optionLabel / optionValue)
+
+Figma: `<AutoComplete>`, type=dropdown, state=default — nodeId `9370:42022`
+
+```html
+<extra-auto-complete
+  [suggestions]="filtered"
+  (completeMethod)="search($event)"
+  optionLabel="name"
+  optionValue="code"
+  [dropdown]="true"
+  [(ngModel)]="selectedCode"
+  name="cityCode"
+></extra-auto-complete>
+```
+
+### С группировкой опций (group)
+
+Figma: `<AutoComplete>`, type=group, state=default — nodeId `9370:42026`
+
+```html
+<extra-auto-complete
+  [suggestions]="filtered"
+  (completeMethod)="search($event)"
+  [group]="true"
+  optionGroupLabel="region"
+  optionGroupChildren="items"
+  optionLabel="name"
+  [(ngModel)]="selectedCity"
+  name="cityGrouped"
+></extra-auto-complete>
+```
+
+### С обязательным выбором из списка (forceSelection)
+
+Figma: `<AutoComplete>`, type=dropdown, state=default — nodeId `9370:42022`
+
+```html
+<extra-auto-complete
+  [suggestions]="filtered"
+  (completeMethod)="search($event)"
+  [forceSelection]="true"
+  placeholder="Только из списка"
+  [(ngModel)]="value"
+  name="cityStrict"
+></extra-auto-complete>
+```
+
+### Large / xlarge (увеличенный размер, на всю ширину)
+
+Figma: `<AutoComplete>`, type=dropdown, state=default
+
+```html
+<extra-auto-complete
+  [suggestions]="filtered"
+  (completeMethod)="search($event)"
+  size="large"
+  [fluid]="true"
+  placeholder="Широкое поле"
+  [(ngModel)]="value"
+  name="cityWide"
+></extra-auto-complete>
+```
+
+### Disabled (отключённое поле)
+
+Figma: `<AutoComplete>`, state=disabled
+
+```html
+<extra-auto-complete
+  [suggestions]="filtered"
+  (completeMethod)="search($event)"
+  [formControl]="disabledControl"
+></extra-auto-complete>
+```
+
+```ts
+// Управляется через FormControl:
+disabledControl = new FormControl({ value: null, disabled: true });
+```
+
+### Невалидное состояние (formControl + валидация)
+
+Figma: `<AutoComplete>`, state=danger
+
+```ts
+cityControl = new FormControl(null, [Validators.required]);
+```
+
+```html
+<extra-auto-complete
+  [suggestions]="filtered"
+  (completeMethod)="search($event)"
+  placeholder="Обязательное поле"
+  [invalid]="cityControl.invalid && cityControl.touched"
+  [formControl]="cityControl"
+></extra-auto-complete>
+```
+
+## Slots
+
+Проекция содержимого пунктов выполняется средствами PrimeNG `p-autocomplete` и соответствует отдельным Figma-узлам выпадающей панели:
+
+- **Шаблон подсказки** — кастомный вид элемента выпадающего списка; соответствует Figma-узлу `<AutoComplete.Option>`.
+- **Шаблон группы** — заголовок группы опций (при `group=true`); соответствует Figma-узлу `<AutoComplete.Group>`.
+- **Шаблон выпадающей панели** — контейнер списка подсказок; соответствует Figma-узлу `<AutoComplete.Overlay>`.
+
+Собственных `extra*`-директив компонент не объявляет: его шаблон фиксирован и проксирует значения в `p-autocomplete`. Для базовых сценариев достаточно `optionLabel` и `(completeMethod)`.
+
+## Related
+
+- [Select](../select/select.figma.md) — выбор одного значения из фиксированного списка без свободного ввода
+- [InputText](../inputtext/inputtext.figma.md) — атомарное поле ввода текста без подсказок
+- [Button](../button/button.figma.md) — кнопки действий в формах
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены состояний поля
+- [Иконки](../../figma-code-connect/icons.md) — доступные иконки
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Заполняйте `[suggestions]` в обработчике `(completeMethod)` — список подсказок наполняется по мере ввода, а не задаётся статически.
+- Используйте `[(ngModel)]` или `[formControl]` — компонент реализует `ControlValueAccessor` и именно через них передаётся выбранное значение.
+- Задавайте `optionLabel` для отображаемой подписи и `optionValue`, когда в модели нужно хранить примитив, а не весь объект опции.
+- Включайте `[dropdown]="true"`, если пользователю нужно видеть весь список без предварительного ввода.
+- Используйте `[multiple]="true"` совместно с `[unique]="true"` для выбора тегами без дубликатов.
+- Управляйте состоянием `disabled` через `FormControl.disable()` / `FormControl.enable()` — это сохраняет dirty/touched-флаги.
+
+**Don't:**
+- Не используйте поле без обработчика `(completeMethod)` — без него выпадающий список останется пустым.
+- Не используйте поле без `[(ngModel)]` / `[formControl]` — без привязки выбранное значение не синхронизируется с моделью.
+- Не включайте `[group]="true"` без `optionGroupLabel` и `optionGroupChildren` — группы не отрисуются корректно.
+- Не применяйте AutoComplete для коротких фиксированных списков — для них используйте [Select](../select/select.figma.md) или radio-группу.
diff --git a/src/lib/components/avatar/avatar.figma.md b/src/lib/components/avatar/avatar.figma.md
new file mode 100644
index 00000000..696813cf
--- /dev/null
+++ b/src/lib/components/avatar/avatar.figma.md
@@ -0,0 +1,118 @@
+---
+component: ExtraAvatar
+selector: extra-avatar
+import:
+  symbol: ExtraAvatarComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '36:1365'
+  componentKey: 'fe504adcf02d8f8922f04f6ccb8bf3777ad701d9'
+  name: '<Avatar>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraAvatar` — компонент для отображения пользователя или сущности. Поддерживает три способа представления содержимого: текстовую метку, иконку или изображение. Оборачивает PrimeNG `p-avatar` и расширяет его собственными размерами и формами.
+
+Компонент соответствует Figma-компоненту `<Avatar>` (nodeId `36:1365`). Figma-свойство `type` (`image | icon | label`) не маппируется в отдельный инпут — способ представления выбирается тем, какой из инпутов `image`, `icon` или `label` задан (см. раздел Props mapping).
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `label` | `string` | `''` | Текстовая метка внутри аватара — соответствует Figma-свойству `type=label` |
+| `icon` | `string` | `''` | CSS-класс иконки (например `'ti ti-user'`) — соответствует Figma-свойству `type=icon` и `change-icon` (INSTANCE_SWAP); доступные иконки — [icons.md](../../figma-code-connect/icons.md) |
+| `image` | `string` | `''` | URL изображения — соответствует Figma-свойству `type=image` |
+| `size` | `'normal' \| 'large' \| 'xlarge'` | `'normal'` | Размер аватара — соответствует Figma-свойству `size` (Figma `base` → код `normal`) |
+| `shape` | `'square' \| 'circle'` | `'square'` | Форма аватара — соответствует Figma-свойству `shape` |
+
+Figma-свойство `show-badge` (BOOLEAN) не имеет отдельного инпута: бейдж навешивается снаружи через PrimeNG `p-overlay-badge`, оборачивающий `extra-avatar` (см. раздел Variants).
+
+## Variants
+
+### Label / Base (текстовая метка)
+
+Figma: size=base, shape=square, type=label
+
+```html
+<extra-avatar label="A"></extra-avatar>
+```
+
+### Icon / Base (иконка)
+
+Figma: size=base, shape=square, type=icon
+
+Иконка задаётся через `icon` (Figma `change-icon`); доступные классы — [icons.md](../../figma-code-connect/icons.md).
+
+```html
+<extra-avatar icon="ti ti-user"></extra-avatar>
+```
+
+### Image / Base (изображение)
+
+Figma: size=base, shape=square, type=image
+
+```html
+<extra-avatar image="/assets/images/avatar/avatar.png"></extra-avatar>
+```
+
+### Circle / Large (круглая форма, большой размер)
+
+Figma: size=large, shape=circle, type=label
+
+```html
+<extra-avatar label="C" size="large" shape="circle"></extra-avatar>
+```
+
+### Image / XLarge / Circle (изображение, круг, увеличенный размер)
+
+Figma: size=xlarge, shape=circle, type=image
+
+```html
+<extra-avatar
+  image="/assets/images/avatar/avatar.png"
+  size="xlarge"
+  shape="circle"
+></extra-avatar>
+```
+
+### С бейджем (show-badge)
+
+Figma: size=xlarge, shape=square, type=label, show-badge=true
+
+Бейдж навешивается снаружи через `p-overlay-badge`; цветовая схема — токены [tokens.md](../../figma-code-connect/tokens.md).
+
+```html
+<p-overlay-badge value="4" severity="danger">
+  <extra-avatar label="U" size="xlarge"></extra-avatar>
+</p-overlay-badge>
+```
+
+## Slots
+
+Не используются. Содержимое аватара передаётся через `@Input() label`, `@Input() icon` или `@Input() image`.
+
+## Related
+
+- [Иконки](../../figma-code-connect/icons.md) — доступные иконки (`icon`, Figma `change-icon`)
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены бейджа и фона
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+- [ExtraTag](../tag/tag.figma.md) — близкий по назначению компонент-метка
+- [ExtraButton](../button/button.figma.md) — пример компонента с навешиваемым бейджем
+
+## Do / Don't
+
+**Do:**
+- Задавайте ровно один из инпутов `label`, `icon` или `image` — он определяет Figma-свойство `type`
+- Для иконки используйте классы из справочника [icons.md](../../figma-code-connect/icons.md)
+- Для круглых аватаров с изображением задавайте `shape="circle"` — изображение обрежется по кругу
+- Бейдж навешивайте снаружи через `p-overlay-badge`, оборачивающий `extra-avatar`
+
+**Don't:**
+- Не задавайте одновременно `image` и `label` или `image` и `icon` — представление станет неоднозначным
+- Не инлайньте CSS-классы иконок вручную — используйте справочник [icons.md](../../figma-code-connect/icons.md)
+- Не используйте `size="base"` — в коде базовый размер называется `normal` (Figma `base` ↔ код `normal`)
+- Не пытайтесь задать бейдж инпутом компонента — отдельного инпута нет, используйте `p-overlay-badge`
diff --git a/src/lib/components/badge/badge.figma.md b/src/lib/components/badge/badge.figma.md
new file mode 100644
index 00000000..df09d875
--- /dev/null
+++ b/src/lib/components/badge/badge.figma.md
@@ -0,0 +1,118 @@
+---
+component: ExtraBadge
+selector: extra-badge
+import:
+  symbol: ExtraBadgeComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '21:1193'
+  componentKey: 'b8e76ebb1556bc428673719f4f3a5dccd0cf20a9'
+  name: '<Badge>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraBadge` — компактный неинтерактивный индикатор: счётчик (число) или метка тона поверх элемента (иконка, кнопка, аватар). Оборачивает PrimeNG `p-badge` и нормализует значения `severity` и `size` под токены дизайн-системы.
+
+Компонент соответствует Figma-компоненту `<Badge>` (nodeId `21:1193`). Figma-свойства `severity` и `dot` маппируются на Angular-инпуты (см. раздел Props mapping).
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `value` | `string \| number` | `''` | Отображаемое значение бейджа; пустое значение даёт точку-индикатор — соответствует Figma-свойству `dot=true` |
+| `severity` | `'primary' \| 'success' \| 'info' \| 'warning' \| 'danger'` | `'primary'` | Цветовая схема — соответствует Figma-свойству `severity` (значение `primary` соответствует Figma `severity=basic`); цвета описаны в [tokens.md](../../figma-code-connect/tokens.md) |
+| `size` | `'base' \| 'large' \| 'xlarge'` | `'base'` | Размер бейджа; отдельного свойства размера в Figma нет — управляется на уровне макета |
+
+## Variants
+
+### Primary / Base (счётчик по умолчанию)
+
+Figma: `<Badge>`, severity=basic, dot=false — nodeId `21:1193`
+
+```html
+<extra-badge value="8"></extra-badge>
+```
+
+### Success (успех)
+
+Figma: `<Badge>`, severity=success, dot=false
+
+```html
+<extra-badge value="8" severity="success"></extra-badge>
+```
+
+### Info (информация)
+
+Figma: `<Badge>`, severity=info, dot=false
+
+```html
+<extra-badge value="8" severity="info"></extra-badge>
+```
+
+### Warning (предупреждение)
+
+Figma: `<Badge>`, severity=warning, dot=false
+
+```html
+<extra-badge value="8" severity="warning"></extra-badge>
+```
+
+### Danger (ошибка)
+
+Figma: `<Badge>`, severity=danger, dot=false
+
+```html
+<extra-badge value="3" severity="danger"></extra-badge>
+```
+
+### Dot (точка-индикатор без числа)
+
+Figma: `<Badge>`, dot=true — пустое `value` даёт точку
+
+```html
+<extra-badge severity="danger"></extra-badge>
+```
+
+### Large (большой размер)
+
+Figma: размер задаётся на уровне макета, отдельного Figma-свойства нет
+
+```html
+<extra-badge value="8" size="large"></extra-badge>
+```
+
+### Overflow (порог переполнения)
+
+Figma: `<Badge>`, dot=false — счётчик с числом более 99
+
+```html
+<extra-badge value="99+"></extra-badge>
+```
+
+## Slots
+
+Не используются. Значение бейджа передаётся через `@Input() value`.
+
+## Related
+
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены severity
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+- [ExtraTag](../tag/tag.figma.md) — текстовая метка статуса/категории (не счётчик)
+- [ExtraButton](../button/button.figma.md) — кнопка с поддержкой наложенного бейджа
+
+## Do / Don't
+
+**Do:**
+- Используйте `value` для счётчика непрочитанных/новых элементов
+- Оставляйте `value` пустым для точки-индикатора (Figma `dot=true`)
+- Задавайте `severity="danger"` для критичных уведомлений, требующих внимания
+- Используйте формат `99+` для переполнения вместо больших чисел
+
+**Don't:**
+- Не используйте бейдж как кликабельный элемент — он неинтерактивен (для действий используйте [ExtraButton](../button/button.figma.md))
+- Не применяйте бейдж как текстовую метку категории — для этого есть [ExtraTag](../tag/tag.figma.md)
+- Не инлайньте цвета вручную — используйте `severity` и токены [tokens.md](../../figma-code-connect/tokens.md)
diff --git a/src/lib/components/breadcrumb/breadcrumb.figma.md b/src/lib/components/breadcrumb/breadcrumb.figma.md
new file mode 100644
index 00000000..4698ae1e
--- /dev/null
+++ b/src/lib/components/breadcrumb/breadcrumb.figma.md
@@ -0,0 +1,110 @@
+---
+component: ExtraBreadcrumb
+selector: extra-breadcrumb
+import:
+  symbol: ExtraBreadcrumbComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '735:7985'
+  componentKey: 'feb43c0120bf06c0eeed66ed8d01ee0626851d51'
+  name: '<Breadcrumb>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraBreadcrumb` — навигационный компонент «хлебные крошки», показывающий путь текущей страницы в иерархии: ссылки на родительские уровни через разделитель, последний элемент — текущая страница. Оборачивает PrimeNG `p-breadcrumb` и управляется моделью пунктов.
+
+Компонент соответствует Figma-компоненту `<Breadcrumb>` (nodeId `735:7985`) из библиотеки UI Kit (DS) v2.0. В отличие от `Tabs`/`Menubar` (переключение разделов одного уровня) и `Stepper` (линейный прогресс процесса), breadcrumb отражает положение страницы по уровням иерархии.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `model` | `ExtraMenuItem[]` | `[]` | Массив пунктов пути; последний пункт — текущая страница. Соответствует Figma-свойству `change-layout` (набор крошек) |
+| `home` | `ExtraMenuItem \| undefined` | `undefined` | Корневой пункт «домой» (обычно иконка). Соответствует Figma-свойству `home` (варианты `true`, `false`) |
+
+Каждый элемент `model` и `home` описывается интерфейсом `ExtraMenuItem`. Часто используемые поля пункта:
+
+| Поле пункта | Тип | Описание |
+|-------------|-----|---------|
+| `label` | `string` | Текст крошки |
+| `icon` | `string` | CSS-класс иконки крошки; доступные иконки — [icons.md](../../figma-code-connect/icons.md) |
+| `url` | `string` | Адрес ссылки крошки |
+| `routerLink` | `any` | Маршрут Angular Router для крошки |
+| `disabled` | `boolean` | Отключённый пункт |
+
+## Variants
+
+### Home + items (с корневой иконкой)
+
+Figma: `<Breadcrumb>`, home=true — nodeId `735:7983`
+
+```html
+<extra-breadcrumb [home]="home" [model]="model"></extra-breadcrumb>
+```
+
+```ts
+home: ExtraMenuItem = { icon: 'ti ti-home', url: '#' };
+model: ExtraMenuItem[] = [
+  { label: 'Электроника', icon: 'ti ti-device-laptop', url: '#' },
+  { label: 'Компьютеры', icon: 'ti ti-cpu', url: '#' },
+  { label: 'Ноутбуки' },
+];
+```
+
+### Без корневого пункта (только items)
+
+Figma: `<Breadcrumb>`, home=false — nodeId `735:7982`
+
+```html
+<extra-breadcrumb [model]="model"></extra-breadcrumb>
+```
+
+```ts
+model: ExtraMenuItem[] = [
+  { label: 'Электроника', url: '#' },
+  { label: 'Компьютеры', url: '#' },
+  { label: 'Ноутбуки' },
+];
+```
+
+### Только иконки (items без текста)
+
+Figma: `<Breadcrumb>`, home=true, крошки без `label`
+
+```html
+<extra-breadcrumb [home]="home" [model]="model"></extra-breadcrumb>
+```
+
+```ts
+home: ExtraMenuItem = { icon: 'ti ti-home', url: '#' };
+model: ExtraMenuItem[] = [
+  { icon: 'ti ti-device-laptop', url: '#' },
+  { icon: 'ti ti-cpu', url: '#' },
+  { icon: 'ti ti-book' },
+];
+```
+
+## Slots
+
+Не используются. Пункты пути передаются данными через `@Input() model` и `@Input() home` (массив объектов `ExtraMenuItem`), а не через проекцию содержимого.
+
+## Related
+
+- [Иконки](../../figma-code-connect/icons.md) — доступные иконки крошек (`ti ti-*`)
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Делайте последний пункт `model` текущей страницей без `url`/`routerLink` — он не должен быть ссылкой
+- Задавайте `home` для корневого уровня и используйте для него иконку из [icons.md](../../figma-code-connect/icons.md)
+- Применяйте breadcrumb, когда иерархия глубже двух уровней и пользователю важно понимать местоположение
+
+**Don't:**
+- Не используйте breadcrumb для переключения разделов одного уровня — для этого есть `Tabs`/`Menubar`
+- Не отображайте breadcrumb на главной странице или при дублирующей боковой навигации
+- Не инлайньте CSS-классы иконок вслепую — сверяйтесь со справочником [icons.md](../../figma-code-connect/icons.md)
diff --git a/src/lib/components/button/button.figma.md b/src/lib/components/button/button.figma.md
new file mode 100644
index 00000000..7d81e513
--- /dev/null
+++ b/src/lib/components/button/button.figma.md
@@ -0,0 +1,177 @@
+---
+component: ExtraButton
+selector: extra-button
+import:
+  symbol: ExtraButtonComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '160:5223'
+  componentKey: '78978b6676b9ce8c25a312d5fb52ee06805c8fa2'
+  name: 'Button.Base'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraButton` — универсальный компонент кнопки для инициации действий, отправки форм и навигации. Оборачивает PrimeNG `p-button` и расширяет его дополнительными вариантами отображения, размерами и поддержкой бейджа.
+
+Компонент соответствует Figma-компоненту `<Button.Base>` (nodeId `160:5223`) и `<Button.Danger>` (nodeId `162:5457`).
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `label` | `string` | `'Button'` | Текст кнопки |
+| `variant` | `'primary' \| 'secondary' \| 'outlined' \| 'text' \| 'link'` | `'primary'` | Вариант отображения — соответствует Figma-свойству `variant` |
+| `severity` | `'success' \| 'warning' \| 'danger' \| 'info' \| null` | `null` | Семантический акцент — соответствует Figma-компоненту `<Button.Danger>` и аналогам |
+| `size` | `'small' \| 'base' \| 'large' \| 'xlarge'` | `'base'` | Размер кнопки — соответствует Figma-свойству `size` |
+| `icon` | `string` | `''` | CSS-класс иконки (например `'pi pi-check'`); доступные иконки — [icons.md](../../figma-code-connect/icons.md) |
+| `iconPos` | `'prefix' \| 'postfix' \| null` | `null` | Позиция иконки — соответствует Figma-свойству `icon-position` |
+| `iconOnly` | `boolean` | `false` | Режим «только иконка» без текста — соответствует Figma-свойству `icon-only` |
+| `disabled` | `boolean` | `false` | Отключённое состояние — соответствует Figma-состоянию `state=disabled` |
+| `loading` | `boolean` | `false` | Состояние загрузки со спиннером — соответствует Figma-состоянию `state=loading` |
+| `rounded` | `boolean` | `false` | Скруглённая форма кнопки — соответствует Figma-свойству `rounded` |
+| `fluid` | `boolean` | `false` | Растяжение кнопки на всю ширину контейнера |
+| `showBadge` | `boolean` | `false` | Показывать бейдж поверх кнопки |
+| `badge` | `string` | `''` | Текст бейджа (отображается только при `showBadge=true`) |
+| `badgeSeverity` | `'success' \| 'info' \| 'warning' \| 'danger' \| 'secondary' \| 'contrast' \| null` | `null` | Цветовая схема бейджа; цвета соответствуют токенам [tokens.md](../../figma-code-connect/tokens.md) |
+| `text` | `boolean` | `false` | Текстовый вариант без фона и рамки (алиас для `variant='text'`) |
+| `ariaLabel` | `string \| undefined` | `undefined` | Метка для программ экранного доступа |
+| `autofocus` | `boolean` | `false` | Автофокус при монтировании компонента |
+| `tabindex` | `number \| undefined` | `undefined` | Порядок перехода по Tab |
+
+## Variants
+
+### Primary / Base (основная кнопка)
+
+Figma: `<Button.Base>`, variant=primary, size=base, state=default — nodeId `160:5223`
+
+```html
+<extra-button label="Сохранить"></extra-button>
+```
+
+### Secondary / Base (вторичная кнопка)
+
+Figma: `<Button.Base>`, variant=tertiary (в коде: `variant="secondary"`), size=base, state=default
+
+```html
+<extra-button variant="secondary" label="Отмена"></extra-button>
+```
+
+### Outlined / Large (контурная кнопка, большой размер)
+
+Figma: `<Button.Base>`, variant=outlined, size=large, state=default
+
+```html
+<extra-button variant="outlined" size="large" label="Подробнее"></extra-button>
+```
+
+### Text / Base (текстовая кнопка)
+
+Figma: `<Button.Base>`, variant=text, size=base, state=default
+
+```html
+<extra-button variant="text" label="Ссылка-кнопка"></extra-button>
+```
+
+### Link / Base (кнопка-ссылка)
+
+Figma: `<Button.Base>`, variant=link, size=base, state=default
+
+```html
+<extra-button variant="link" label="Перейти"></extra-button>
+```
+
+### С иконкой слева (prefix)
+
+Figma: `<Button.Base>`, icon-position=prefix, icon-only=false
+
+```html
+<extra-button
+  label="Добавить"
+  icon="pi pi-plus"
+  iconPos="prefix"
+></extra-button>
+```
+
+### Только иконка (icon-only)
+
+Figma: `<Button.Base>`, icon-only=true
+
+```html
+<extra-button
+  icon="pi pi-trash"
+  [iconOnly]="true"
+  ariaLabel="Удалить"
+></extra-button>
+```
+
+### Состояние загрузки (loading)
+
+Figma: `<Button.Base>`, state=loading
+
+```html
+<extra-button label="Отправка..." [loading]="true"></extra-button>
+```
+
+### Danger (деструктивное действие)
+
+Figma: `<Button.Danger>`, nodeId `162:5457`, componentKey `071aae3b46b09cd249c18e1942ca7db77051f6f0`
+
+Использует токен `background.danger.bold` — подробности в [tokens.md](../../figma-code-connect/tokens.md#color-background).
+
+```html
+<extra-button severity="danger" label="Удалить" icon="pi pi-trash"></extra-button>
+```
+
+### С бейджем
+
+```html
+<extra-button
+  label="Уведомления"
+  [showBadge]="true"
+  badge="3"
+  badgeSeverity="danger"
+></extra-button>
+```
+
+### Скруглённая (rounded)
+
+Figma: `<Button.Base>`, rounded=true
+
+```html
+<extra-button [rounded]="true" label="Округлая"></extra-button>
+```
+
+### Fluid (на всю ширину)
+
+```html
+<extra-button [fluid]="true" label="Во всю ширину"></extra-button>
+```
+
+## Slots
+
+Не используются. Содержимое кнопки передаётся через `@Input() label` и `@Input() icon`.
+
+## Related
+
+- [Иконки](../../figma-code-connect/icons.md) — доступные иконки (`pi pi-*`)
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены severity и badge
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Используйте `variant="text"` для текстовых кнопок; `[text]="true"` оставлен только как алиас для совместимости с PrimeNG.
+- Используйте `variant="primary"` для единственного главного действия на экране
+- Для деструктивных действий задавайте `severity="danger"` и добавляйте иконку через [icons.md](../../figma-code-connect/icons.md)
+- При кнопке только с иконкой всегда задавайте `ariaLabel` для доступности
+- Используйте `[fluid]="true"` в мобильных макетах и формах на всю ширину
+
+**Don't:**
+- Не размещайте две кнопки `variant="primary"` рядом без явной иерархии
+- Не инлайньте CSS-классы иконок вручную — используйте справочник [icons.md](../../figma-code-connect/icons.md)
+- Не используйте `severity` вместо `variant` для смены формы кнопки: `severity` меняет цвет, `variant` — форму
+- Не передавайте `[iconOnly]="true"` без `icon` — кнопка окажется пустой
diff --git a/src/lib/components/card/card.figma.md b/src/lib/components/card/card.figma.md
new file mode 100644
index 00000000..de90a6b4
--- /dev/null
+++ b/src/lib/components/card/card.figma.md
@@ -0,0 +1,122 @@
+---
+component: ExtraCard
+selector: extra-card
+import:
+  symbol: ExtraCardComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '1213:4134'
+  componentKey: '55dc631832ae2e7da5810b95b0537584bf146f60'
+  name: '<Card>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraCardComponent` — контейнер-поверхность для группировки связанного контента и действий вокруг одной темы или объекта; визуально отделяет блок от фона как единое целое. Оборачивает PrimeNG `p-card` и добавляет типизированные пропсы заголовка/подзаголовка и режим тени.
+
+Компонент соответствует Figma-компоненту `<Card>` (nodeId `1213:4134`, библиотека «UI Kit (DS) v2.0»). Содержимое заголовка, тела и футера проецируется через слоты PrimeNG `pTemplate`.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `title` | `string` | `''` | Заголовок карточки — соответствует Figma-свойству `text-title` |
+| `subtitle` | `string` | `''` | Подзаголовок карточки — соответствует Figma-свойству `text-caption` |
+| `overlay` | `boolean` | `false` | Тень вокруг карточки (`shadow-md`) — соответствует Figma-варианту `overlay=true/false` |
+
+## Variants
+
+### Overlay false (плоская карточка)
+
+Figma: `<Card>`, overlay=false — nodeId `1213:4135`
+
+```html
+<extra-card title="Заголовок" subtitle="Подзаголовок">
+  <ng-template pTemplate="content">
+    <p class="text-sm">Контент карточки.</p>
+  </ng-template>
+</extra-card>
+```
+
+### Overlay true (карточка с тенью)
+
+Figma: `<Card>`, overlay=true — nodeId `1156:4676`
+
+```html
+<extra-card title="Заголовок" subtitle="Подзаголовок" [overlay]="true">
+  <ng-template pTemplate="content">
+    <p class="text-sm">Контент карточки с тенью.</p>
+  </ng-template>
+</extra-card>
+```
+
+### С изображением в шапке (header)
+
+Figma: `<Card>`, show-header=true
+
+```html
+<extra-card title="Заголовок" subtitle="Подзаголовок">
+  <ng-template pTemplate="header">
+    <img alt="Заголовок" src="assets/cover.jpg" class="w-full" />
+  </ng-template>
+  <ng-template pTemplate="content">
+    <p class="text-sm">Контент карточки с изображением в шапке.</p>
+  </ng-template>
+</extra-card>
+```
+
+### С действием в футере (footer)
+
+Figma: `<Card>`, show-footer=true
+
+```html
+<extra-card title="Заголовок">
+  <ng-template pTemplate="content">
+    <p class="text-sm">Контент карточки.</p>
+  </ng-template>
+  <ng-template pTemplate="footer">
+    <extra-button label="Действие" size="small" [fluid]="true"></extra-button>
+  </ng-template>
+</extra-card>
+```
+
+```ts
+import { ExtraCardComponent, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
+import { SharedModule } from 'primeng/api';
+```
+
+## Slots
+
+Слоты реализованы через директиву PrimeNG `pTemplate` (`<ng-template pTemplate="...">`). Импортируйте `SharedModule` из `'primeng/api'` в массив `imports` компонента.
+
+| Слот | Синтаксис | Figma-свойство | Описание |
+|------|-----------|----------------|---------|
+| Шапка (header) | `<ng-template pTemplate="header">` | `show-header` | Изображение или произвольный блок над заголовком |
+| Тело (content) | `<ng-template pTemplate="content">` | `change-layout-body` | Основное содержимое карточки |
+| Футер (footer) | `<ng-template pTemplate="footer">` | `change-layout-footer` / `show-footer` | Кнопки действий и прочий контент нижней части |
+
+Заголовок и подзаголовок задаются не слотами, а пропсами `title` и `subtitle` (Figma: `text-title`, `text-caption`).
+
+## Related
+
+- [Button](../button/button.figma.md) — кнопки действий в футере карточки
+- [Dialog](../dialog/dialog.figma.md) — модальный контейнер; в отличие от Card прерывает workflow
+- [Токены](../../figma-code-connect/tokens.md) — токены поверхности, тени и скругления
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Используйте карточку для группировки контента одной темы (header / media / body / footer).
+- Задавайте `[overlay]="true"`, когда карточку нужно визуально приподнять над фоном (grid/list превью).
+- Передавайте заголовок и подзаголовок через `title` и `subtitle`, а не вёрсткой внутри `content`.
+- Размещайте кнопки действий в слоте `footer`, используя [Button](../button/button.figma.md).
+
+**Don't:**
+- Не используйте Card вместо `Dialog` для модальных сценариев — Card не прерывает workflow.
+- Не применяйте Card как зону-секцию без выделенной поверхности (для этого подходит Panel).
+- Не размещайте в Card критичные уведомления или табличные данные.
+- Не инлайньте значения тени и скругления — используйте [токены](../../figma-code-connect/tokens.md).
diff --git a/src/lib/components/carousel/carousel.figma.md b/src/lib/components/carousel/carousel.figma.md
new file mode 100644
index 00000000..9166d1a1
--- /dev/null
+++ b/src/lib/components/carousel/carousel.figma.md
@@ -0,0 +1,161 @@
+---
+component: ExtraCarousel
+selector: extra-carousel
+import:
+  symbol: ExtraCarouselComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '1187:1633'
+  componentKey: '53d6de43ff6801925f1478d66be13f779ea62f42'
+  name: '<Carousel>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraCarousel` — компонент-карусель: прокручиваемая лента слайдов в одном контейнере. Контент сменяется по горизонтали или вертикали, со стрелками навигации prev/next, индикаторами-точками и опциональным autoplay. Оборачивает PrimeNG `p-carousel` и принимает массив данных через `@Input() value`, отрисовывая каждый элемент шаблоном из item-директивы.
+
+Компонент соответствует Figma-компоненту `<Carousel>` (nodeId `1187:1633`) из библиотеки UI Kit (DS) v2.0. В отличие от `Galleria` (галерея изображений с превью-миниатюрами и lightbox) и `Tabs` (переключение разделов без прокрутки), carousel предназначен для просмотра коллекции равноуровневого контента — фото, продуктов, баннеров.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `value` | `any[]` | `[]` | Массив данных слайдов; каждый элемент отрисовывается item-шаблоном |
+| `numVisible` | `number` | `1` | Количество одновременно видимых слайдов |
+| `numScroll` | `number` | `1` | Количество слайдов, прокручиваемых за один шаг |
+| `circular` | `boolean` | `false` | Зацикленный показ (после последнего слайда — первый) |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Направление прокрутки |
+| `autoplayInterval` | `number` | `0` | Интервал автопрокрутки в мс; `0` отключает autoplay |
+| `showIndicators` | `boolean` | `true` | Показывать индикаторы-точки — соответствует Figma-свойству `show-indicators` |
+| `showNavigators` | `boolean` | `true` | Показывать стрелки prev/next — соответствует Figma-свойству `show-button-nav` |
+| `page` | `number` | `0` | Индекс текущей страницы (слайда) |
+| `responsiveOptions` | `ExtraCarouselResponsiveOptions[] \| undefined` | `undefined` | Адаптивные настройки `numVisible`/`numScroll` по брейкпоинтам |
+| `verticalViewPortHeight` | `string` | `'300px'` | Высота вьюпорта при `orientation="vertical"` |
+| `onPage` | `EventEmitter<ExtraCarouselPageEvent>` | — | Событие смены страницы (слайда) |
+
+## Variants
+
+### Default (горизонтальная карусель, один видимый слайд)
+
+Figma: `<Carousel>`, show-button-nav=true, show-indicators=true — nodeId `1187:1633`
+
+```html
+<extra-carousel [value]="products">
+  <ng-template extraCarouselItem let-product>
+    <extra-card [title]="product.name"></extra-card>
+  </ng-template>
+</extra-carousel>
+```
+
+### Несколько видимых слайдов (numVisible / numScroll)
+
+Figma: `<Carousel>` (количество видимых слайдов задаётся в коде)
+
+```html
+<extra-carousel [value]="products" [numVisible]="3" [numScroll]="3">
+  <ng-template extraCarouselItem let-product>
+    <extra-card [title]="product.name"></extra-card>
+  </ng-template>
+</extra-carousel>
+```
+
+### Вертикальная карусель (orientation=vertical)
+
+Figma: `<Carousel>`, orientation=vertical
+
+```html
+<extra-carousel
+  [value]="products"
+  orientation="vertical"
+  verticalViewPortHeight="360px"
+>
+  <ng-template extraCarouselItem let-product>
+    <extra-card [title]="product.name"></extra-card>
+  </ng-template>
+</extra-carousel>
+```
+
+### Автопрокрутка с зацикливанием (autoplay + circular)
+
+Figma: `<Carousel>` (autoplay задаётся в коде)
+
+```html
+<extra-carousel
+  [value]="banners"
+  [autoplayInterval]="3000"
+  [circular]="true"
+>
+  <ng-template extraCarouselItem let-banner>
+    <img [src]="banner.src" [alt]="banner.alt" />
+  </ng-template>
+</extra-carousel>
+```
+
+### Без стрелок навигации (show-button-nav=false)
+
+Figma: `<Carousel>`, show-button-nav=false
+
+```html
+<extra-carousel [value]="products" [showNavigators]="false">
+  <ng-template extraCarouselItem let-product>
+    <extra-card [title]="product.name"></extra-card>
+  </ng-template>
+</extra-carousel>
+```
+
+### Без индикаторов (show-indicators=false)
+
+Figma: `<Carousel>`, show-indicators=false
+
+```html
+<extra-carousel [value]="products" [showIndicators]="false">
+  <ng-template extraCarouselItem let-product>
+    <extra-card [title]="product.name"></extra-card>
+  </ng-template>
+</extra-carousel>
+```
+
+## Slots
+
+Содержимое карусели проектируется через структурные директивы на `<ng-template>`:
+
+- **`extraCarouselItem`** (`ExtraCarouselItemDirective`) — обязательный шаблон одного слайда. Контекст `let-data` (`$implicit`) содержит текущий элемент из `value`.
+- **`extraCarouselHeader`** (`ExtraCarouselHeaderDirective`) — необязательный шаблон шапки над лентой слайдов.
+- **`extraCarouselFooter`** (`ExtraCarouselFooterDirective`) — необязательный шаблон подвала под лентой слайдов.
+
+```html
+<extra-carousel [value]="products">
+  <ng-template extraCarouselHeader>
+    <h3>Рекомендуем</h3>
+  </ng-template>
+  <ng-template extraCarouselItem let-product>
+    <extra-card [title]="product.name"></extra-card>
+  </ng-template>
+  <ng-template extraCarouselFooter>
+    <extra-button variant="text" label="Показать все"></extra-button>
+  </ng-template>
+</extra-carousel>
+```
+
+## Related
+
+- [ExtraButton](../button/button.figma.md) — кнопка для действий в шапке/подвале карусели
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+- [Токены](../../figma-code-connect/tokens.md) — токены стрелок и индикаторов
+
+## Do / Don't
+
+**Do:**
+- Используйте carousel для просмотра коллекции равноуровневого контента (фото, продукты, баннеры)
+- Задавайте `[numVisible]` и `[numScroll]` вместе, чтобы прокрутка была кратна числу видимых слайдов
+- Для адаптивности задавайте `responsiveOptions` вместо фиксированного `numVisible`
+- При `orientation="vertical"` указывайте `verticalViewPortHeight` под высоту слайда
+
+**Don't:**
+- Не используйте carousel вместо `Galleria` для галереи изображений с миниатюрами и lightbox
+- Не включайте `[autoplayInterval]` для контента, требующего чтения — пользователь не успеет
+- Не скрывайте одновременно стрелки и индикаторы — у ленты не останется навигации
+- Не размещайте интерактивные формы внутри autoplay-карусели — слайд сменится во время ввода
diff --git a/src/lib/components/checkbox/checkbox.figma.md b/src/lib/components/checkbox/checkbox.figma.md
new file mode 100644
index 00000000..954cd48f
--- /dev/null
+++ b/src/lib/components/checkbox/checkbox.figma.md
@@ -0,0 +1,140 @@
+---
+component: ExtraCheckbox
+selector: extra-checkbox
+import:
+  symbol: ExtraCheckboxComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '16:13529'
+  componentKey: 'ce267dfcda08b2861c4aa2aea4af70194735c9f0'
+  name: '<Checkbox>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraCheckbox` — компонент флажка для выбора одного или нескольких вариантов. Оборачивает PrimeNG `p-checkbox` и реализует `ControlValueAccessor`, поэтому интегрируется с `[(ngModel)]` и реактивными формами через `formControl` / `formControlName`.
+
+Компонент соответствует Figma-компоненту `<Checkbox>` (nodeId `16:13529`). Figma-свойства `state`, `checked` и `indeterminate` маппируются на Angular-инпуты и модель значения (см. раздел Props mapping).
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `value` | `any` | `null` | Значение, добавляемое в массив-модель в небинарном режиме (группа чекбоксов) |
+| `binary` | `boolean` | `false` | Бинарный режим: модель — `true`/`false` вместо массива значений |
+| `disabled` | `boolean` | `false` | Отключённое состояние — соответствует Figma-свойству `state=disabled`; передаётся через `[disabled]` |
+| `readonly` | `boolean` | `false` | Режим только для чтения без изменения значения |
+| `indeterminate` | `boolean` | `false` | Неопределённое состояние — соответствует Figma-свойству `indeterminate=true` |
+| `invalid` | `boolean` | `false` | Подсветка как невалидного поля — соответствует Figma-свойству `state=danger` |
+| `size` | `'small' \| 'base' \| 'large'` | `'base'` | Размер флажка |
+| `variant` | `'outlined' \| 'filled'` | `'outlined'` | Вариант отображения |
+| `checkboxIcon` | `string \| undefined` | `undefined` | CSS-класс иконки галочки; доступные иконки — [icons.md](../../figma-code-connect/icons.md) |
+| `ariaLabel` | `string \| undefined` | `undefined` | Метка для программ экранного доступа |
+| `ariaLabelledBy` | `string \| undefined` | `undefined` | Идентификатор элемента с меткой для доступности |
+| `tabindex` | `number \| undefined` | `undefined` | Порядок перехода по Tab |
+| `inputId` | `string \| undefined` | `undefined` | Идентификатор внутреннего `input`; используется для связки с `<label for>` |
+| `trueValue` | `any` | `true` | Значение модели во «включённом» состоянии (бинарный режим) |
+| `falseValue` | `any` | `false` | Значение модели в «выключенном» состоянии (бинарный режим) |
+| `autofocus` | `boolean` | `false` | Автофокус при монтировании компонента |
+
+Состояние «отмечен» (Figma-свойство `checked`) задаётся не отдельным инпутом, а моделью через `ControlValueAccessor`: используйте `[(ngModel)]`, `formControl` или `formControlName`. Значение `true`/`false` (или `trueValue`/`falseValue`) соответствует `checked=true` / `checked=false` в Figma.
+
+## Variants
+
+### Default (по умолчанию, не отмечен)
+
+Figma: state=default, checked=false, indeterminate=false
+
+```html
+<extra-checkbox [binary]="true" [(ngModel)]="isChecked"></extra-checkbox>
+```
+
+### Checked (отмечен)
+
+Figma: state=default, checked=true, indeterminate=false
+
+```html
+<extra-checkbox [binary]="true" [(ngModel)]="isChecked"></extra-checkbox>
+```
+
+В реактивных формах эквивалентно:
+
+```html
+<extra-checkbox [binary]="true" [formControl]="acceptControl"></extra-checkbox>
+```
+
+### Indeterminate (неопределённое состояние)
+
+Figma: state=default, checked=false, indeterminate=true
+
+```html
+<extra-checkbox
+  [binary]="true"
+  [indeterminate]="true"
+  [(ngModel)]="isChecked"
+></extra-checkbox>
+```
+
+### Disabled (отключён)
+
+Figma: state=disabled, checked=false, indeterminate=false
+
+```html
+<extra-checkbox
+  [binary]="true"
+  [disabled]="true"
+  [(ngModel)]="isChecked"
+></extra-checkbox>
+```
+
+### Danger / invalid (невалидное состояние)
+
+Figma: state=danger, checked=false, indeterminate=false
+
+```html
+<extra-checkbox
+  [binary]="true"
+  [invalid]="true"
+  [(ngModel)]="isChecked"
+></extra-checkbox>
+```
+
+### Группа чекбоксов (небинарный режим)
+
+Figma: state=default — несколько `<Checkbox>` с общей моделью-массивом
+
+```html
+<extra-checkbox value="email" [(ngModel)]="selected"></extra-checkbox>
+<extra-checkbox value="sms" [(ngModel)]="selected"></extra-checkbox>
+<extra-checkbox value="push" [(ngModel)]="selected"></extra-checkbox>
+```
+
+## Slots
+
+Не используются. Подпись к флажку размещается рядом во внешнем шаблоне через `<label [for]="inputId">`.
+
+## Related
+
+- [Иконки](../../figma-code-connect/icons.md) — доступные иконки галочки (`checkboxIcon`)
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены состояний и `invalid`
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+- [ExtraInputText](../inputtext/inputtext.figma.md) — текстовое поле формы с похожим маппингом состояний
+- [ExtraDialog](../dialog/dialog.figma.md) — пример компонента с двусторонней привязкой
+
+## Do / Don't
+
+**Do:**
+- Используйте `[binary]="true"` с `[(ngModel)]` или `formControl` для одиночного флажка
+- В группе чекбоксов задавайте уникальный `value` каждому элементу и общую модель-массив
+- Для невалидного состояния задавайте `[invalid]="true"` (Figma `state=danger`)
+- Для доступности связывайте `inputId` с внешним `<label [for]>` или задавайте `ariaLabel`
+- Используйте `[indeterminate]="true"` только для «частично выбранного» родительского флажка
+
+**Don't:**
+- Не задавайте «отмечен» через отдельный атрибут — состояние идёт только через модель (`[(ngModel)]` / `formControl`)
+- Не комбинируйте `[disabled]="true"` с интерактивными обработчиками — события в этом состоянии не возникают
+- Не используйте `value` в бинарном режиме (`[binary]="true"`) — там модель хранит `true`/`false`
+- Не инлайньте CSS-классы иконок вручную — используйте справочник [icons.md](../../figma-code-connect/icons.md)
diff --git a/src/lib/components/chip/chip.figma.md b/src/lib/components/chip/chip.figma.md
new file mode 100644
index 00000000..2839a12a
--- /dev/null
+++ b/src/lib/components/chip/chip.figma.md
@@ -0,0 +1,108 @@
+---
+component: ExtraChip
+selector: extra-chip
+import:
+  symbol: ExtraChipComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '312:1298'
+  componentKey: 'a340ce844ed6af7b65422b30057e61870247e137'
+  name: '<Chip>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraChip` — компактный интерактивный элемент-метка с текстом, опциональной ведущей иконкой и опциональной кнопкой удаления. Оборачивает PrimeNG `p-chip`.
+
+Компонент соответствует Figma-компоненту `<Chip>` (nodeId `312:1298`). Figma-свойства `text-chip`, `show-icon`/`change-icon`, `show-close` и `state` маппируются на Angular-инпуты (см. раздел Props mapping).
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `label` | `string` | `''` | Текст метки — соответствует Figma-свойству `text-chip` |
+| `icon` | `string` | `''` | CSS-класс ведущей иконки; пустое значение скрывает иконку — соответствует Figma-свойствам `show-icon` (показ/скрытие) и `change-icon` (выбор иконки). Доступные иконки — [icons.md](../../figma-code-connect/icons.md) |
+| `removable` | `boolean` | `false` | Показывать кнопку удаления — соответствует Figma-свойству `show-close` |
+| `disabled` | `boolean` | `false` | Отключённое состояние — соответствует Figma-свойству `state=disabled` |
+
+Событие удаления `(onRemove)` (`EventEmitter<MouseEvent>`) возникает при клике на кнопку удаления и доступно только при `[removable]="true"`.
+
+## Variants
+
+### Default (только текст)
+
+Figma: `state=default`, `show-icon=false`, `show-close=false`
+
+```html
+<extra-chip label="В пути"></extra-chip>
+```
+
+### With icon (с ведущей иконкой)
+
+Figma: `state=default`, `show-icon=true`, `change-icon`
+
+```html
+<extra-chip label="Адрес" icon="ti ti-map-pin"></extra-chip>
+```
+
+### Removable (с кнопкой удаления)
+
+Figma: `state=default`, `show-close=true`
+
+```html
+<extra-chip
+  label="Фильтр"
+  [removable]="true"
+  (onRemove)="onRemove($event)"
+></extra-chip>
+```
+
+### Removable with icon (иконка + удаление)
+
+Figma: `state=default`, `show-icon=true`, `show-close=true`
+
+```html
+<extra-chip
+  label="Москва"
+  icon="ti ti-map-pin"
+  [removable]="true"
+  (onRemove)="onRemove($event)"
+></extra-chip>
+```
+
+### Disabled (отключён)
+
+Figma: `state=disabled`
+
+```html
+<extra-chip label="Недоступно" [disabled]="true"></extra-chip>
+```
+
+## Slots
+
+Не используются. Содержимое чипа передаётся через `@Input() label` и `@Input() icon`.
+
+## Related
+
+- [ExtraButton](../button/button.figma.md) — кнопка для действий и навигации
+- [ExtraTag](../tag/tag.figma.md) — статичная некликабельная метка
+- [ExtraAvatar](../avatar/avatar.figma.md) — компонент для отображения аватара
+- [Иконки](../../figma-code-connect/icons.md) — доступные иконки (`ti ti-*`)
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены состояний
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Используйте `ExtraChip` для категоризации, фильтрации и удаляемых токенов рядом с полем ввода
+- Для удаляемого чипа задавайте `[removable]="true"` и подписывайтесь на `(onRemove)`
+- Задавайте `icon` только из справочника [icons.md](../../figma-code-connect/icons.md)
+
+**Don't:**
+- Не используйте `ExtraChip` для навигации между страницами — берите [ExtraButton](../button/button.figma.md)
+- Не заменяйте `ExtraChip` статичной меткой — для неинтерактивных меток есть [ExtraTag](../tag/tag.figma.md)
+- Не инлайньте CSS-классы иконок вручную — используйте справочник [icons.md](../../figma-code-connect/icons.md)
+- Не ожидайте событие `(onRemove)` без `[removable]="true"` — кнопка удаления не отображается
diff --git a/src/lib/components/confirm-dialog/confirm-dialog.figma.md b/src/lib/components/confirm-dialog/confirm-dialog.figma.md
new file mode 100644
index 00000000..ba463a24
--- /dev/null
+++ b/src/lib/components/confirm-dialog/confirm-dialog.figma.md
@@ -0,0 +1,153 @@
+---
+component: ExtraConfirmDialog
+selector: extra-confirm-dialog
+import:
+  symbol: ExtraConfirmDialogComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '520:6928'
+  componentKey: 'e1f6d8c2a20ec5d1f54b0936b7ce81e9345c3943'
+  name: '<ConfirmDialog>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraConfirmDialogComponent` — модальное окно подтверждения действия (`role=alertdialog`): прерывает пользователя вопросом и требует явного ответа «подтвердить / отменить». В отличие от `ExtraDialog`, оно не принимает произвольного тела — содержимое (заголовок, текст, подписи кнопок, иконка) задаётся декларативно через `ExtraConfirmDialogService.confirm(...)`. Компонент оборачивает PrimeNG `p-confirmDialog` и расширяет его типизированными свойствами `size` и `severity`, а также структурными директивами для кастомных заголовка и футера.
+
+Компонент соответствует Figma-компоненту `<ConfirmDialog>` (nodeId `520:6928`, fileKey `Khh7arsuXss3ncqy1Dz3OZ`, библиотека «UI Kit (DS) v2.0»). Открытие выполняется императивно через сервис; зарегистрируйте провайдеры функцией `provideExtraConfirmDialog()`.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `key` | `string` | `''` | Ключ для связи компонента с вызовом `ExtraConfirmDialogService.confirm({ key })` — позволяет иметь несколько диалогов на странице |
+| `size` | `'sm' \| 'default' \| 'lg' \| 'xlg'` | `'default'` | Ширина окна — соответствует Figma-свойству `Modal Size` (sm → w-20, default/md → w-25, lg → w-30, xlg → w-45) |
+| `severity` | `'success' \| 'info' \| 'warn' \| 'help' \| 'danger' \| 'default'` | `'default'` | Семантический тон окна — соответствует Figma-варианту `severity` |
+
+> Текст, заголовок, иконка и подписи кнопок (`message`, `header`, `icon`, `acceptLabel`, `rejectLabel`) передаются не через `@Input`, а в объекте `ExtraConfirmDialogOptions` при вызове `ExtraConfirmDialogService.confirm(...)`. Иконка — CSS-класс из набора [icons.md](../../figma-code-connect/icons.md).
+
+## Variants
+
+### Default (базовый диалог через сервис)
+
+Figma: `<ConfirmDialog>`, severity=danger (вариант по умолчанию в макете), show-header=true
+
+```html
+<extra-button label="Показать диалог" (click)="showConfirm()"></extra-button>
+<extra-confirm-dialog key="cd-default"></extra-confirm-dialog>
+```
+
+```ts
+import {
+  ExtraConfirmDialogComponent,
+  ExtraConfirmDialogService,
+  ExtraButtonComponent,
+  provideExtraConfirmDialog
+} from '@cdek-it/angular-ui-kit';
+
+// providers: [provideExtraConfirmDialog()]
+constructor(private confirmDialogService: ExtraConfirmDialogService) {}
+
+showConfirm(): void {
+  this.confirmDialogService.confirm({
+    key: 'cd-default',
+    header: 'Подтверждение',
+    message: 'Вы уверены, что хотите продолжить?',
+    acceptLabel: 'Да',
+    rejectLabel: 'Нет',
+    accept: () => {},
+    reject: () => {}
+  });
+}
+```
+
+### Severity (деструктивное действие)
+
+Figma: `<ConfirmDialog>`, severity=danger — nodeId `520:6927`
+
+Тон окна меняется свойством `severity`; для деструктивного подтверждения используйте `severity="danger"`.
+
+```html
+<extra-confirm-dialog key="cd-danger" severity="danger"></extra-confirm-dialog>
+```
+
+```ts
+import { ExtraConfirmDialogComponent, ExtraConfirmDialogService } from '@cdek-it/angular-ui-kit';
+```
+
+### Large (увеличенная ширина)
+
+Figma: `<ConfirmDialog>`, Modal Size=lg
+
+```html
+<extra-confirm-dialog key="cd-lg" size="lg"></extra-confirm-dialog>
+```
+
+### Кастомные заголовок и футер (структурные директивы)
+
+Figma: `<ConfirmDialog>`, show-header=true
+
+Шаблоны получают контекст вызова: `let-message`, `let-onAccept="onAccept"`, `let-onReject="onReject"`.
+
+```html
+<extra-confirm-dialog key="cd-templates">
+  <ng-template extraConfirmDialogHeader let-message let-onReject="onReject">
+    <div class="p-dialog-header">
+      <div class="p-dialog-title">
+        <i [class]="message.icon"></i>
+        <span>{{ message.header }}</span>
+      </div>
+      <extra-button variant="text" icon="ti ti-x" [rounded]="true" [iconOnly]="true" (click)="onReject()"></extra-button>
+    </div>
+  </ng-template>
+
+  <ng-template extraConfirmDialogFooter let-message let-onAccept="onAccept" let-onReject="onReject">
+    <div class="p-dialog-footer">
+      <extra-button [label]="message.rejectLabel" variant="text" (click)="onReject()"></extra-button>
+      <extra-button [label]="message.acceptLabel" (click)="onAccept()"></extra-button>
+    </div>
+  </ng-template>
+</extra-confirm-dialog>
+```
+
+```ts
+import {
+  ExtraConfirmDialogComponent,
+  ExtraConfirmDialogHeaderDirective,
+  ExtraConfirmDialogFooterDirective,
+  ExtraButtonComponent
+} from '@cdek-it/angular-ui-kit';
+```
+
+## Slots
+
+| Слот | Синтаксис | Описание |
+|------|-----------|---------|
+| Кастомный заголовок | `<ng-template extraConfirmDialogHeader>` | Заменяет стандартный заголовок; контекст шаблона: `message`, `onAccept`, `onReject`. Импортируйте `ExtraConfirmDialogHeaderDirective` |
+| Кастомный футер | `<ng-template extraConfirmDialogFooter>` | Заменяет стандартный ряд кнопок; контекст шаблона: `message`, `onAccept`, `onReject`. Импортируйте `ExtraConfirmDialogFooterDirective` |
+
+Произвольное тело (`<ng-content>`) не поддерживается: текст окна берётся из `message.message`. Директивы `ExtraConfirmDialogHeaderDirective` и `ExtraConfirmDialogFooterDirective` объявлены как `standalone: true` — добавляйте их в массив `imports` отдельно от `ExtraConfirmDialogComponent`.
+
+## Related
+
+- [Dialog](../dialog/dialog.figma.md) — произвольный модальный контент (`role=dialog`), который можно просто закрыть
+- [Button](../button/button.figma.md) — кнопки подтверждения и отмены в футере
+- [Иконки](../../figma-code-connect/icons.md) — CSS-классы иконок (`ti ti-*`) для заголовка диалога
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены тона `severity` и оверлея
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Используйте `ExtraConfirmDialog` только для решений, требующих явного ответа: удаление, необратимые действия, уход с несохранёнными изменениями.
+- Задавайте `severity="danger"` для деструктивных подтверждений — это меняет тон окна в соответствии с Figma-вариантом.
+- Открывайте окно через `ExtraConfirmDialogService.confirm(...)`, а не вручную через DOM; не забудьте зарегистрировать `provideExtraConfirmDialog()`.
+- Используйте `key`, чтобы связать конкретный вызов сервиса с нужным экземпляром компонента, если их несколько.
+
+**Don't:**
+- Не используйте `ExtraConfirmDialog` для произвольного контента или больших форм — для этого есть [Dialog](../dialog/dialog.figma.md).
+- Не передавайте текст и заголовок как `@Input` — они задаются только в `ExtraConfirmDialogOptions` при вызове сервиса.
+- Не смешивайте стандартный заголовок и `*extraConfirmDialogHeader` одновременно — директива имеет приоритет и заменяет стандартную разметку.
diff --git a/src/lib/components/date-picker/date-picker.figma.md b/src/lib/components/date-picker/date-picker.figma.md
new file mode 100644
index 00000000..55780182
--- /dev/null
+++ b/src/lib/components/date-picker/date-picker.figma.md
@@ -0,0 +1,225 @@
+---
+component: ExtraDatePicker
+selector: extra-date-picker
+import:
+  symbol: ExtraDatePickerComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '431:3069'
+  componentKey: '186776f4f5b0f28244809844575073296ec8c383'
+  name: '<DatePicker>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraDatePickerComponent` — поле выбора даты с раскрывающимся календарём: выбор одной даты, диапазона или нескольких значений, ввод даты со временем и inline-режим. Оборачивает PrimeNG `p-datepicker`, добавляя кастомную шапку с выпадающими списками месяца и года, предпросмотр диапазона при наведении и поля ручного ввода времени. Реализует `ControlValueAccessor` и работает с `[(ngModel)]` и `[formControl]` «из коробки».
+
+Компонент соответствует Figma-компоненту `<DatePicker>` (component set, nodeId `431:3069`, fileKey `Khh7arsuXss3ncqy1Dz3OZ`, библиотека «UI Kit (DS) v2.0»). Варианты поля задаются Figma-свойствами `state` (`default | hover | focus | danger | disabled | readonly`), `has-placeholder` и `has-floatlabel`. Раскрывающаяся панель календаря описана отдельным Figma-узлом `<Calendar.DatePicker>` / `<DatePicker.Panel>` и в коде рендерится PrimeNG автоматически.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `selectionMode` | `'single' \| 'multiple' \| 'range'` | `'single'` | Режим выбора: одна дата, несколько дат или диапазон |
+| `dateFormat` | `string` | `'dd.mm.yy'` | Маска формата отображаемой даты |
+| `size` | `'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` | Размер поля; `large` и `xlarge` маппируются на PrimeNG `size="large"` |
+| `showIcon` | `boolean` | `true` | Показывать иконку календаря в поле |
+| `iconDisplay` | `'input' \| 'button'` | `'input'` | Расположение иконки: внутри поля или отдельной кнопкой |
+| `inline` | `boolean` | `false` | Встроенный календарь без раскрывающейся панели |
+| `showButtonBar` | `boolean` | `false` | Показывать панель кнопок «Сегодня» / «Очистить» |
+| `showTime` | `boolean` | `false` | Включает выбор времени (часы и минуты) |
+| `hourFormat` | `string` | `'24'` | Формат часов при `showTime=true` (`'24'` или `'12'`) |
+| `showClear` | `boolean` | `false` | Показывает иконку очистки (×) — соответствует Figma-свойству `show-clear` |
+| `placeholder` | `string \| undefined` | `undefined` | Подсказка при пустом поле — соответствует Figma-свойству `text-placeholder` / `has-placeholder` |
+| `readonly` | `boolean` | `false` | Только для чтения — соответствует Figma-состоянию `state=readonly` |
+| `minDate` | `Date \| undefined` | `undefined` | Минимальная доступная для выбора дата |
+| `maxDate` | `Date \| undefined` | `undefined` | Максимальная доступная для выбора дата |
+| `view` | `'date' \| 'month' \| 'year'` | `'date'` | Начальный режим панели: дни, месяцы или годы |
+| `showOtherMonths` | `boolean` | `true` | Показывать даты соседних месяцев в сетке |
+| `selectOtherMonths` | `boolean` | `false` | Разрешить выбор дат соседних месяцев |
+| `(onSelect)` | `EventEmitter<Date>` | — | Событие выбора даты в сетке |
+| `(onMonthChange)` | `EventEmitter<any>` | — | Событие смены отображаемого месяца |
+| `(onYearChange)` | `EventEmitter<any>` | — | Событие смены отображаемого года |
+| `(onClear)` | `EventEmitter<any>` | — | Событие очистки значения (при `showClear=true`) |
+| `[(ngModel)]` / `[formControl]` | `Date \| Date[] \| null` | `null` | Выбранное значение через ControlValueAccessor |
+
+> `invalid` — управляется через связанный `NgControl` (соответствует Figma-состоянию `state=danger`). При работе с реактивными формами невалидное состояние подтягивается из валидаторов автоматически.
+
+> `disabled` — компонент не объявляет `@Input() disabled`; отключённое состояние (Figma `state=disabled`) задаётся через `FormControl.disable()` или `ControlValueAccessor.setDisabledState`.
+
+## Variants
+
+### Single / Default (одна дата)
+
+Figma: `<DatePicker>`, state=default, has-placeholder=true, has-floatlabel=false — nodeId `431:3111`
+
+```html
+<extra-date-picker
+  placeholder="дд.мм.гггг"
+  [(ngModel)]="selectedDate"
+  name="date"
+></extra-date-picker>
+```
+
+### Range (выбор диапазона)
+
+Figma: `<DatePicker>`, state=default, has-placeholder=true, has-floatlabel=false — nodeId `431:3111`
+
+```html
+<extra-date-picker
+  selectionMode="range"
+  placeholder="с … по …"
+  [(ngModel)]="dateRange"
+  name="period"
+></extra-date-picker>
+```
+
+```ts
+dateRange: Date[] | null = null;
+```
+
+### Multiple (несколько дат)
+
+Figma: `<DatePicker>`, state=default, has-placeholder=true, has-floatlabel=false — nodeId `431:3111`
+
+```html
+<extra-date-picker
+  selectionMode="multiple"
+  placeholder="Выберите даты"
+  [(ngModel)]="selectedDates"
+  name="dates"
+></extra-date-picker>
+```
+
+```ts
+selectedDates: Date[] | null = null;
+```
+
+### With time (дата и время)
+
+Figma: `<DatePicker>`, show-time=true — раскрывающаяся панель с выбором часов и минут
+
+```html
+<extra-date-picker
+  [showTime]="true"
+  hourFormat="24"
+  placeholder="дд.мм.гггг чч:мм"
+  [(ngModel)]="dateTime"
+  name="dateTime"
+></extra-date-picker>
+```
+
+### Inline (встроенный календарь)
+
+Figma: `<Calendar.DatePicker>` — раскрытая панель календаря
+
+```html
+<extra-date-picker
+  [inline]="true"
+  [(ngModel)]="selectedDate"
+  name="inlineDate"
+></extra-date-picker>
+```
+
+### С границами min/max
+
+Figma: `<DatePicker>`, state=default
+
+```html
+<extra-date-picker
+  [minDate]="today"
+  [maxDate]="maxBookingDate"
+  placeholder="Дата в пределах диапазона"
+  [(ngModel)]="bookingDate"
+  name="booking"
+></extra-date-picker>
+```
+
+```ts
+today = new Date();
+maxBookingDate = new Date(2035, 11, 31);
+```
+
+### С кнопкой очистки (show-clear)
+
+Figma: `<DatePicker>`, show-clear=true
+
+```html
+<extra-date-picker
+  [showClear]="true"
+  placeholder="Можно очистить"
+  [(ngModel)]="selectedDate"
+  name="dateClearable"
+></extra-date-picker>
+```
+
+### Readonly (только для чтения)
+
+Figma: `<DatePicker>`, state=readonly, has-placeholder=true, has-floatlabel=false — nodeId `14980:36452`
+
+```html
+<extra-date-picker
+  [readonly]="true"
+  [(ngModel)]="selectedDate"
+  name="dateReadonly"
+></extra-date-picker>
+```
+
+### Disabled (отключённое поле)
+
+Figma: `<DatePicker>`, state=disabled, has-placeholder=true, has-floatlabel=false — nodeId `431:3070`
+
+```html
+<extra-date-picker [formControl]="disabledControl"></extra-date-picker>
+```
+
+```ts
+// Управляется через FormControl:
+disabledControl = new FormControl({ value: null, disabled: true });
+```
+
+### Невалидное состояние (formControl + валидация)
+
+Figma: `<DatePicker>`, state=danger, has-placeholder=true, has-floatlabel=false — nodeId `431:3080` (невалидное состояние определяется через NgControl автоматически)
+
+```ts
+dateControl = new FormControl<Date | null>(null, [Validators.required]);
+```
+
+```html
+<extra-date-picker
+  placeholder="Обязательное поле"
+  [formControl]="dateControl"
+></extra-date-picker>
+```
+
+## Slots
+
+Не используются. Содержимое поля и панели календаря (шапка с выбором месяца/года, поля времени, иконки) формируется внутри компонента. Внешняя проекция содержимого не поддерживается.
+
+## Related
+
+- [InputText](../inputtext/inputtext.figma.md) — атомарное поле ввода текста без календаря и валидации даты
+- [Select](../select/select.figma.md) — выбор из готового списка значений
+- [Button](../button/button.figma.md) — кнопки навигации и действий в формах
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены состояний поля
+- [Иконки](../../figma-code-connect/icons.md) — доступные иконки
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Используйте `[(ngModel)]` или `[formControl]` — компонент реализует `ControlValueAccessor` и именно через них передаётся выбранное значение.
+- Для диапазона и нескольких дат задавайте `selectionMode="range"` / `selectionMode="multiple"` и храните значение как `Date[]`.
+- Ограничивайте доступные даты через `minDate` / `maxDate` для бронирований и дедлайнов.
+- Управляйте состоянием `disabled` через `FormControl.disable()` / `FormControl.enable()` — это сохраняет dirty/touched-флаги.
+- Включайте `[showTime]="true"`, когда нужно выбрать дату вместе со временем.
+
+**Don't:**
+- Не задавайте `[disabled]="true"` как Input-атрибут напрямую — компонент не объявляет `@Input() disabled`; передавайте через `FormControl` или `ControlValueAccessor`.
+- Не используйте поле без `[(ngModel)]` / `[formControl]` — без привязки выбранное значение не синхронизируется с моделью.
+- Не задавайте `invalid` вручную — невалидное состояние вычисляется из связанного `NgControl`.
+- Не применяйте date-picker для свободного текста или приблизительной даты — используйте [InputText](../inputtext/inputtext.figma.md).
diff --git a/src/lib/components/dialog/dialog.figma.md b/src/lib/components/dialog/dialog.figma.md
new file mode 100644
index 00000000..a9a8b911
--- /dev/null
+++ b/src/lib/components/dialog/dialog.figma.md
@@ -0,0 +1,162 @@
+---
+component: ExtraDialog
+selector: extra-dialog
+import:
+  symbol: ExtraDialogComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '520:6620'
+  componentKey: 'e22e66372cf0eaa8dae30d765325f4ed2b51ca42'
+  name: '<Dialog>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraDialogComponent` — модальное диалоговое окно поверх основного контента страницы. Оборачивает PrimeNG `p-dialog` и расширяет его поддержкой структурных директив для кастомного заголовка и футера, а также типизированным свойством `size`.
+
+Компонент соответствует Figma-компоненту `<Dialog>` (nodeId `520:6620`, fileKey `Khh7arsuXss3ncqy1Dz3OZ`, библиотека «UI Kit (DS) v2.0»). Для программного открытия с произвольным содержимым используйте `ExtraDialogService` (см. Storybook «Dynamic»).
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `header` | `string` | `''` | Строковый заголовок окна — игнорируется, если передан слот `*extraDialogHeader` |
+| `[(visible)]` | `boolean` | `false` | Двусторонняя привязка видимости — `[visible]` открывает окно, `(visibleChange)` реагирует на закрытие крестиком или маской |
+| `size` | `'sm' \| 'default' \| 'lg' \| 'xlg'` | `'default'` | Ширина диалога — соответствует Figma-свойству `Modal Size` (sm → w-20, default/md → w-25, lg → w-30, xlg → w-45) |
+| `modal` | `boolean` | `true` | Блокировать ли фон страницы затемнением — соответствует Figma-варианту `modal=true/false` |
+| `dismissableMask` | `boolean` | `false` | Закрывать окно при клике на затемнённый фон |
+| `closeOnEscape` | `boolean` | `true` | Закрывать окно по нажатию клавиши Escape |
+| `showHeader` | `boolean` | `true` | Отображать ли панель заголовка — соответствует Figma-свойству `show-header` |
+| `focusOnShow` | `boolean` | `false` | Переводить фокус на первый интерактивный элемент при открытии |
+| `appendTo` | `string` | `'body'` | CSS-селектор или `'body'` — куда в DOM монтируется оверлей |
+
+> `visibleChange` — `@Output() EventEmitter<boolean>`. Используйте синтаксис `[(visible)]` для двусторонней привязки.
+
+## Variants
+
+### Default / md (базовый диалог с футером)
+
+Figma: `<Dialog>`, modal=true, size=default — nodeId `520:6572`
+
+```html
+<extra-dialog
+  header="Подтверждение заявки"
+  [(visible)]="isOpen"
+>
+  <p>Заявка на доставку груза №CDEK-2025-00478312 готова к оформлению.</p>
+  <ng-template extraDialogFooter>
+    <extra-button variant="text" label="Отмена" (click)="isOpen = false"></extra-button>
+    <extra-button label="Подтвердить" (click)="isOpen = false"></extra-button>
+  </ng-template>
+</extra-dialog>
+```
+
+```ts
+import { ExtraDialogComponent, ExtraDialogFooterDirective, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
+
+// В компоненте:
+isOpen = false;
+```
+
+### Large с кастомным заголовком (extraDialogHeader)
+
+Figma: `<Dialog>`, modal=true, size=lg, show-header=true
+
+Для добавления иконки в заголовок используйте [иконки](../../figma-code-connect/icons.md).
+
+```html
+<extra-dialog
+  size="lg"
+  [(visible)]="isOpen"
+>
+  <ng-template extraDialogHeader>
+    <div class="flex items-center gap-2">
+      <!-- иконка через icons.md -->
+      <span class="font-semibold">Детали отправления</span>
+    </div>
+  </ng-template>
+
+  <p>Содержимое диалога с кастомным заголовком. Шаблон заменяет строковый проп <code>header</code>.</p>
+
+  <ng-template extraDialogFooter>
+    <extra-button variant="text" label="Закрыть" (click)="isOpen = false"></extra-button>
+  </ng-template>
+</extra-dialog>
+```
+
+```ts
+import { ExtraDialogComponent, ExtraDialogHeaderDirective, ExtraDialogFooterDirective, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
+```
+
+### С кнопками действий в футере (extraDialogFooter + деструктивное действие)
+
+Figma: `<Dialog>`, modal=true, show-footer=true
+
+```html
+<extra-dialog
+  header="Удаление записи"
+  [(visible)]="isOpen"
+>
+  <p>Вы уверены, что хотите удалить эту запись? Действие необратимо.</p>
+  <ng-template extraDialogFooter>
+    <extra-button variant="text" label="Отмена" (click)="isOpen = false"></extra-button>
+    <extra-button severity="danger" label="Удалить" (click)="onDelete()"></extra-button>
+  </ng-template>
+</extra-dialog>
+```
+
+```ts
+import { ExtraDialogComponent, ExtraDialogFooterDirective, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
+```
+
+### Немодальный (non-modal)
+
+Figma: `<Dialog>`, modal=false — nodeId `536:314`
+
+Окно не блокирует фон и не показывает затемнение. Пользователь может взаимодействовать с остальным контентом страницы.
+
+```html
+<extra-dialog
+  header="Маршрут доставки"
+  [modal]="false"
+  [(visible)]="isOpen"
+>
+  <p>Маршрут: Москва → Новосибирск. Это окно не блокирует основной контент.</p>
+  <ng-template extraDialogFooter>
+    <extra-button variant="text" label="Закрыть" (click)="isOpen = false"></extra-button>
+  </ng-template>
+</extra-dialog>
+```
+
+## Slots
+
+| Слот | Синтаксис | Описание |
+|------|-----------|---------|
+| Тело (body) | `<ng-content>` | Произвольное содержимое диалога — размещается между заголовком и футером |
+| Кастомный заголовок | `<ng-template extraDialogHeader>` | Заменяет строковый проп `header`; импортируйте `ExtraDialogHeaderDirective` из `'@cdek-it/angular-ui-kit'` |
+| Кастомный футер | `<ng-template extraDialogFooter>` | Кнопки действий и прочий контент нижней части; импортируйте `ExtraDialogFooterDirective` из `'@cdek-it/angular-ui-kit'` |
+
+Директивы `ExtraDialogHeaderDirective` и `ExtraDialogFooterDirective` экспортируются из `@cdek-it/angular-ui-kit` и объявляются как `standalone: true` — добавляйте их в массив `imports` компонента отдельно от `ExtraDialogComponent`.
+
+## Related
+
+- [Button](../button/button.figma.md) — кнопки действий в футере диалога
+- [ConfirmDialog](../confirm-dialog/confirm-dialog.figma.md) — укороченный диалог подтверждения без произвольного тела
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены оверлея и поверхности
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Управляйте видимостью через `[(visible)]` — это сохраняет двустороннюю синхронизацию и корректно эмитит `visibleChange` при закрытии крестиком.
+- Используйте `variant="primary"` для основного действия в футере, `severity="danger"` — для деструктивного.
+- Размещайте не более 2 кнопок в футере: основное действие и «Отмена».
+- Используйте `dismissableMask="true"` вместе с `modal="true"`, чтобы разрешить закрытие кликом по фону — это улучшает UX.
+
+**Don't:**
+- Не скрывайте диалог через `*ngIf` — всегда используйте `[(visible)]`; `*ngIf` уничтожает DOM и теряет состояние формы внутри.
+- Не отключайте `closeOnEscape` без явной необходимости — это нарушает доступность (a11y) и ожидания пользователей.
+- Не смешивайте строковый `header` и `*extraDialogHeader` одновременно — директива имеет приоритет и строковый проп будет проигнорирован.
diff --git a/src/lib/components/divider/divider.figma.md b/src/lib/components/divider/divider.figma.md
new file mode 100644
index 00000000..45bed50f
--- /dev/null
+++ b/src/lib/components/divider/divider.figma.md
@@ -0,0 +1,118 @@
+---
+component: ExtraDivider
+selector: extra-divider
+import:
+  symbol: ExtraDividerComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '33:1543'
+  componentKey: 'f0a942b71512215b9a6426076e2cbd56810bcd0e'
+  name: '<Divider>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraDivider` — визуальный разделитель в виде тонкой линии для разделения и группировки смежного контента. Оборачивает PrimeNG `p-divider` и поддерживает горизонтальную и вертикальную ориентацию, стиль линии и выравнивание содержимого.
+
+Компонент соответствует Figma-компоненту `<Divider>` (nodeId `33:1543`). Figma-свойства `layout`, `type` и `align` маппируются на Angular-инпуты, а содержимое внутри линии (текст или иконка) передаётся через слот по умолчанию.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `layout` | `'horizontal' \| 'vertical'` | `'horizontal'` | Ориентация разделителя — соответствует Figma-свойству `layout` |
+| `type` | `'solid' \| 'dashed' \| 'dotted'` | `'solid'` | Стиль линии — соответствует Figma-свойству `type` (`solid` / `dash`); значение `dotted` доступно только в коде |
+| `align` | `'left' \| 'center' \| 'right' \| 'top' \| 'bottom'` | `'center'` | Выравнивание содержимого внутри разделителя — соответствует Figma-свойству `align` |
+
+Notes:
+- Figma-свойство `layout` совпадает с Angular-инпутом `layout` (`horizontal` / `vertical`).
+- Figma-свойство `type` имеет варианты `solid` / `dash`; в коде `dash` соответствует значению `'dashed'`, а `'dotted'` — расширение PrimeNG без отдельного Figma-варианта.
+- Figma-свойство `align` для горизонтального разделителя использует `left` / `center` / `right`, для вертикального — `top` / `center` / `bottom`.
+- Figma-свойства `show-content`, `show-icon` и `change-icon` управляют содержимым внутри линии; в Angular это содержимое задаётся через слот по умолчанию (см. раздел Slots), а иконки берутся из [icons.md](../../figma-code-connect/icons.md).
+
+## Variants
+
+### Horizontal / Solid (по умолчанию)
+
+Figma: `<Divider>`, layout=horizontal, type=solid, align=center
+
+```html
+<extra-divider></extra-divider>
+```
+
+### Vertical (вертикальный разделитель)
+
+Figma: `<Divider>`, layout=vertical, type=solid, align=center
+
+```html
+<extra-divider layout="vertical"></extra-divider>
+```
+
+### Dashed (пунктирная линия)
+
+Figma: `<Divider>`, layout=horizontal, type=dash, align=center
+
+```html
+<extra-divider type="dashed"></extra-divider>
+```
+
+### Dotted (точечная линия)
+
+Расширение PrimeNG без отдельного Figma-варианта.
+
+```html
+<extra-divider type="dotted"></extra-divider>
+```
+
+### Align left (выравнивание содержимого по левому краю)
+
+Figma: `<Divider>`, layout=horizontal, type=solid, align=left
+
+```html
+<extra-divider align="left">Секция</extra-divider>
+```
+
+### С текстом внутри линии
+
+Figma: `<Divider>`, show-content=true — текст внутри разделителя
+
+```html
+<extra-divider align="center">или</extra-divider>
+```
+
+### С иконкой внутри линии
+
+Figma: `<Divider>`, show-content=true, show-icon=true — иконка внутри разделителя (`change-icon`); доступные иконки — [icons.md](../../figma-code-connect/icons.md)
+
+```html
+<extra-divider align="center">
+  <i class="pi pi-star"></i>
+</extra-divider>
+```
+
+## Slots
+
+- **`default`** — содержимое внутри линии разделителя (текст или иконка), проектируется через `<ng-content>`. Соответствует Figma-свойствам `show-content` / `show-icon`.
+
+## Related
+
+- [Иконки](../../figma-code-connect/icons.md) — доступные иконки для содержимого разделителя
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены линии разделителя
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Используйте `layout="vertical"` для разделения inline-элементов по горизонтали
+- Задавайте `align` для позиционирования текста или иконки внутри линии
+- Для содержимого внутри разделителя используйте слот по умолчанию; иконки берите из [icons.md](../../figma-code-connect/icons.md)
+- Используйте разделитель внутри потока контента, а не как рамку контейнера
+
+**Don't:**
+- Не используйте `align="top"` / `align="bottom"` для горизонтального разделителя — они применимы только к `layout="vertical"`
+- Не применяйте разделитель там, где достаточно пустого пространства (отступа)
+- Не инлайньте CSS-классы иконок вручную в обход справочника [icons.md](../../figma-code-connect/icons.md)
+- Не путайте разделитель с границей контейнера (`border` карточки)
diff --git a/src/lib/components/drawer/drawer.figma.md b/src/lib/components/drawer/drawer.figma.md
new file mode 100644
index 00000000..9d534ee9
--- /dev/null
+++ b/src/lib/components/drawer/drawer.figma.md
@@ -0,0 +1,173 @@
+---
+component: ExtraDrawer
+selector: extra-drawer
+import:
+  symbol: ExtraDrawerComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '536:340'
+  componentKey: '421d78d98d9918b17c1cad294fbedd0ea9747720'
+  name: '<Drawer>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraDrawerComponent` — панель, выезжающая от края экрана (слева, справа, сверху или снизу) поверх основного контента. Используется для подзадач с сохранением контекста страницы: создание и редактирование через форму, просмотр деталей рядом со списком, фильтры и дополнительные параметры. Оборачивает PrimeNG `p-drawer` и расширяет его поддержкой структурных директив для кастомного заголовка и футера, а также типизированным свойством `size`.
+
+Компонент соответствует Figma-компоненту `<Drawer>` (nodeId `536:340`, библиотека «UI Kit (DS) v2.0»). По умолчанию drawer модальный (со scrim). В отличие от `ExtraDialogComponent` (центральное модальное окно, прерывающее workflow), drawer крепится к краю экрана и сохраняет рабочий контекст.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `[(visible)]` | `boolean` | `false` | Двусторонняя привязка видимости — `[visible]` открывает панель, `(visibleChange)` реагирует на закрытие крестиком или маской |
+| `header` | `string \| undefined` | `undefined` | Строковый заголовок панели — игнорируется, если передан слот `*extraDrawerHeader` |
+| `position` | `'left' \| 'right' \| 'top' \| 'bottom'` | `'right'` | Край экрана, от которого выезжает панель — соответствует Figma-варианту `position` |
+| `size` | `'default' \| 'sm' \| 'lg' \| 'xlg'` | `'default'` | Размер панели — соответствует Figma-свойству `Modal Size` (ширина для left/right, высота для top/bottom) |
+| `modal` | `boolean` | `true` | Блокировать ли фон страницы затемнением — соответствует Figma-варианту `modal=true/false` |
+| `fullScreen` | `boolean` | `false` | Растягивать ли панель на весь экран |
+| `dismissible` | `boolean` | `true` | Закрывать панель при клике на затемнённый фон |
+| `showCloseIcon` | `boolean` | `true` | Отображать ли кнопку закрытия (крестик) |
+| `closeOnEscape` | `boolean` | `true` | Закрывать панель по нажатию клавиши Escape |
+| `blockScroll` | `boolean` | `true` | Блокировать прокрутку страницы, пока панель открыта |
+
+> `visibleChange` — `@Output() EventEmitter<boolean>`. Используйте синтаксис `[(visible)]` для двусторонней привязки. Дополнительно компонент эмитит `onShow` и `onHide` (`EventEmitter<void>`) при открытии и закрытии.
+
+## Variants
+
+### Right (по умолчанию — выезд справа)
+
+Figma: `<Drawer>`, modal=true, position=right — nodeId `538:343`
+
+```html
+<extra-drawer
+  header="Детали отправления"
+  [(visible)]="isOpen"
+>
+  <p>Маршрут: Москва → Новосибирск. Трек-номер CDEK-2025-00478312.</p>
+</extra-drawer>
+```
+
+```ts
+import { ExtraDrawerComponent } from '@cdek-it/angular-ui-kit';
+
+// В компоненте:
+isOpen = false;
+```
+
+### Left (выезд слева)
+
+Figma: `<Drawer>`, modal=true, position=left — nodeId `536:339`
+
+```html
+<extra-drawer
+  header="Фильтры"
+  position="left"
+  [(visible)]="isOpen"
+>
+  <p>Параметры фильтрации списка отправлений.</p>
+</extra-drawer>
+```
+
+### Top (выезд сверху)
+
+Figma: `<Drawer>`, modal=true, position=top — nodeId `538:404`
+
+```html
+<extra-drawer
+  header="Уведомления"
+  position="top"
+  [(visible)]="isOpen"
+>
+  <p>Системные сообщения и оповещения.</p>
+</extra-drawer>
+```
+
+### Bottom (выезд снизу)
+
+Figma: `<Drawer>`, modal=true, position=bottom — nodeId `538:495`
+
+```html
+<extra-drawer
+  header="Действия"
+  position="bottom"
+  [(visible)]="isOpen"
+>
+  <p>Дополнительные действия с выбранными отправлениями.</p>
+</extra-drawer>
+```
+
+### Немодальный (non-modal)
+
+Figma: `<Drawer>`, modal=false, position=right — nodeId `538:356`
+
+Панель не блокирует фон и не показывает затемнение. Пользователь может взаимодействовать с остальным контентом страницы.
+
+```html
+<extra-drawer
+  header="Подсказка"
+  [modal]="false"
+  [(visible)]="isOpen"
+>
+  <p>Эта панель не блокирует основной контент страницы.</p>
+</extra-drawer>
+```
+
+### С кастомным заголовком и футером
+
+Figma: `<Drawer>`, modal=true, show-header=true, show-footer=true
+
+```html
+<extra-drawer [(visible)]="isOpen">
+  <ng-template extraDrawerHeader>
+    <div class="flex items-center gap-2">
+      <span class="font-semibold">Редактирование заявки</span>
+    </div>
+  </ng-template>
+
+  <p>Форма редактирования заявки на доставку.</p>
+
+  <ng-template extraDrawerFooter>
+    <extra-button variant="text" label="Отмена" (click)="isOpen = false"></extra-button>
+    <extra-button label="Сохранить" (click)="onSave()"></extra-button>
+  </ng-template>
+</extra-drawer>
+```
+
+```ts
+import { ExtraDrawerComponent, ExtraDrawerHeaderDirective, ExtraDrawerFooterDirective, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
+```
+
+## Slots
+
+| Слот | Синтаксис | Описание |
+|------|-----------|---------|
+| Тело (body) | `<ng-content>` | Произвольное содержимое панели — размещается между заголовком и футером |
+| Кастомный заголовок | `<ng-template extraDrawerHeader>` | Заменяет строковый проп `header`; импортируйте `ExtraDrawerHeaderDirective` из `'@cdek-it/angular-ui-kit'` |
+| Кастомный футер | `<ng-template extraDrawerFooter>` | Кнопки действий и прочий контент нижней части; импортируйте `ExtraDrawerFooterDirective` из `'@cdek-it/angular-ui-kit'` |
+
+Директивы `ExtraDrawerHeaderDirective` и `ExtraDrawerFooterDirective` экспортируются из `@cdek-it/angular-ui-kit` и объявляются как `standalone: true` — добавляйте их в массив `imports` компонента отдельно от `ExtraDrawerComponent`.
+
+## Related
+
+- [Dialog](../dialog/dialog.figma.md) — центральное модальное окно, прерывающее workflow
+- [Button](../button/button.figma.md) — кнопки действий в футере панели
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены оверлея и поверхности
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Управляйте видимостью через `[(visible)]` — это сохраняет двустороннюю синхронизацию и корректно эмитит `visibleChange` при закрытии крестиком или маской.
+- Используйте drawer для подзадач, где важно сохранить контекст страницы (формы, детали, фильтры).
+- Размещайте основное действие и «Отмена» в футере через `*extraDrawerFooter`.
+- Используйте `position="right"` для деталей и форм, `position="left"` — для фильтров и навигационных параметров.
+
+**Don't:**
+- Не скрывайте панель через `*ngIf` — всегда используйте `[(visible)]`; `*ngIf` уничтожает DOM и теряет состояние формы внутри.
+- Не используйте drawer вместо `ExtraDialog` для коротких прерывающих подтверждений — для них предназначен центральный диалог.
+- Не смешивайте строковый `header` и `*extraDrawerHeader` одновременно — директива имеет приоритет, и строковый проп будет проигнорирован.
+- Не отключайте `closeOnEscape` без явной необходимости — это нарушает доступность (a11y) и ожидания пользователей.
diff --git a/src/lib/components/galleria/galleria.figma.md b/src/lib/components/galleria/galleria.figma.md
new file mode 100644
index 00000000..0653c3af
--- /dev/null
+++ b/src/lib/components/galleria/galleria.figma.md
@@ -0,0 +1,216 @@
+---
+component: ExtraGalleria
+selector: extra-galleria
+import:
+  symbol: ExtraGalleriaComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '1200:385'
+  componentKey: '11b7fe5571d386f90ed9e309c8214d0bf95aec53'
+  name: '<Galleria>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraGalleriaComponent` — галерея изображений с полосой превью (thumbnails) и полноэкранным просмотром (lightbox): крупное активное изображение со стрелками prev/next, подписью (caption), индикаторами и опциональным autoplay-слайдшоу. Оборачивает PrimeNG `p-galleria` и принимает коллекцию изображений через `@Input() value`, а содержимое каждого слайда задаётся структурными директивами-шаблонами.
+
+Компонент соответствует Figma-компоненту `<Galleria>` (nodeId `1200:385`, библиотека «UI Kit (DS) v2.0»). В отличие от `Carousel` (лента любого контента без lightbox и полосы превью) и `Image` (показ одного изображения), Galleria управляет коллекцией изображений с навигацией и увеличением.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `value` | `ExtraGalleriaItem[]` | `[]` | Коллекция изображений (`itemImageSrc`, `thumbnailImageSrc?`, `alt?`, `title?`, `description?`) |
+| `numVisible` | `number` | `3` | Количество одновременно видимых миниатюр в полосе превью |
+| `showItemNavigators` | `boolean` | `false` | Показывать стрелки prev/next у активного изображения — соответствует Figma-свойству `show-button-nav` |
+| `showItemNavigatorsOnHover` | `boolean` | `false` | Показывать стрелки навигации только при наведении |
+| `showThumbnails` | `boolean` | `true` | Показывать полосу миниатюр — соответствует Figma-свойству `show-container-thumbnail` |
+| `showThumbnailNavigators` | `boolean` | `true` | Показывать стрелки прокрутки полосы миниатюр — соответствует Figma-свойству `show-button-thumbnail` |
+| `showIndicators` | `boolean` | `false` | Показывать индикаторы текущего слайда — соответствует Figma-свойству `show-Indicators` |
+| `showIndicatorsOnItem` | `boolean` | `false` | Накладывать индикаторы поверх изображения, а не под ним |
+| `circular` | `boolean` | `false` | Циклический переход от последнего слайда к первому |
+| `autoPlay` | `boolean` | `false` | Автоматическое воспроизведение слайдшоу |
+| `transitionInterval` | `number` | `4000` | Интервал смены изображений в мс (действует при `autoPlay`) |
+| `fullScreen` | `boolean` | `false` | Полноэкранный режим (lightbox) — соответствует Figma-варианту `mask=true` |
+| `[(visible)]` | `boolean` | `false` | Двусторонняя привязка видимости в полноэкранном режиме — `[visible]` открывает lightbox, `(visibleChange)` реагирует на закрытие |
+| `containerClass` | `string \| undefined` | `undefined` | Дополнительный CSS-класс на контейнере галереи |
+| `containerStyle` | `Record<string, string> \| undefined` | `undefined` | Inline-стили контейнера галереи |
+| `responsiveOptions` | `any[] \| undefined` | `undefined` | Адаптивная конфигурация `numVisible` по брейкпоинтам |
+
+> `activeIndexChange` — `@Output() EventEmitter<number>` (смена активного слайда); `visibleChange` — `@Output() EventEmitter<boolean>`. Используйте синтаксис `[(visible)]` для двусторонней привязки в полноэкранном режиме.
+
+## Variants
+
+### Default (навигация и индикаторы без миниатюр)
+
+Figma: `<Galleria>`, mask=false, orientation-image=horizontal — nodeId `1200:384`
+
+```html
+<extra-galleria
+  [value]="images"
+  [numVisible]="5"
+  [showItemNavigators]="true"
+  [showIndicators]="true"
+  [showThumbnails]="false"
+  [circular]="true"
+>
+  <ng-template extraGalleriaItem let-item>
+    <img [src]="item.itemImageSrc" [alt]="item.alt" />
+  </ng-template>
+</extra-galleria>
+```
+
+### С миниатюрами (thumbnails)
+
+Figma: `<Galleria>`, show-container-thumbnail=true — nodeId `1200:384`
+
+```html
+<extra-galleria
+  [value]="images"
+  [numVisible]="5"
+  [showItemNavigators]="true"
+  [showThumbnails]="true"
+  [circular]="true"
+>
+  <ng-template extraGalleriaItem let-item>
+    <img [src]="item.itemImageSrc" [alt]="item.alt" />
+  </ng-template>
+  <ng-template extraGalleriaThumbnail let-item>
+    <img [src]="item.thumbnailImageSrc" [alt]="item.alt" />
+  </ng-template>
+</extra-galleria>
+```
+
+### С индикаторами (indicators)
+
+Figma: `<Galleria>`, show-container-Indicator=true, show-Indicators=true — nodeId `1200:384`
+
+```html
+<extra-galleria
+  [value]="images"
+  [showItemNavigators]="true"
+  [showThumbnails]="false"
+  [showIndicators]="true"
+  [circular]="true"
+>
+  <ng-template extraGalleriaItem let-item>
+    <img [src]="item.itemImageSrc" [alt]="item.alt" />
+  </ng-template>
+</extra-galleria>
+```
+
+### Полноэкранный режим (fullscreen / lightbox)
+
+Figma: `<Galleria>`, mask=true, orientation-image=horizontal — nodeId `1200:383`
+
+```html
+<extra-button label="Открыть галерею" (click)="isOpen = true"></extra-button>
+
+<extra-galleria
+  [value]="images"
+  [numVisible]="5"
+  [showItemNavigators]="true"
+  [showThumbnails]="true"
+  [circular]="true"
+  [fullScreen]="true"
+  [(visible)]="isOpen"
+>
+  <ng-template extraGalleriaItem let-item>
+    <img [src]="item.itemImageSrc" [alt]="item.alt" />
+  </ng-template>
+  <ng-template extraGalleriaThumbnail let-item>
+    <img [src]="item.thumbnailImageSrc" [alt]="item.alt" />
+  </ng-template>
+</extra-galleria>
+```
+
+```ts
+import { ExtraGalleriaComponent, ExtraGalleriaItemDirective, ExtraGalleriaThumbnailDirective, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
+
+// В компоненте:
+isOpen = false;
+```
+
+### Автовоспроизведение (autoplay)
+
+Figma: `<Galleria>` (общий компонент; autoplay задаётся в коде)
+
+```html
+<extra-galleria
+  [value]="images"
+  [showItemNavigators]="true"
+  [showIndicators]="true"
+  [showThumbnails]="false"
+  [circular]="true"
+  [autoPlay]="true"
+  [transitionInterval]="3000"
+>
+  <ng-template extraGalleriaItem let-item>
+    <img [src]="item.itemImageSrc" [alt]="item.alt" />
+  </ng-template>
+</extra-galleria>
+```
+
+## Slots
+
+Содержимое каждой части галереи проектируется через структурные директивы-шаблоны `ng-template`. Все директивы экспортируются из `@cdek-it/angular-ui-kit`, объявлены как `standalone: true` и добавляются в массив `imports` компонента отдельно от `ExtraGalleriaComponent`.
+
+| Слот | Синтаксис | Контекст | Описание |
+|------|-----------|----------|---------|
+| Изображение | `<ng-template extraGalleriaItem let-item>` | `$implicit: item` | Шаблон активного (крупного) изображения слайда |
+| Миниатюра | `<ng-template extraGalleriaThumbnail let-item>` | `$implicit: item` | Шаблон миниатюры в полосе превью |
+| Подпись | `<ng-template extraGalleriaCaption let-item>` | `$implicit: item` | Подпись (caption) к активному изображению — соответствует Figma-свойству `show-caption` |
+| Индикатор | `<ng-template extraGalleriaIndicator let-index>` | `$implicit: index` | Кастомный индикатор слайда (требует `[showIndicators]="true"`) |
+| Шапка | `<ng-template extraGalleriaHeader>` | — | Содержимое над галереей |
+| Подвал | `<ng-template extraGalleriaFooter>` | — | Содержимое под галереей |
+
+Соответствующие директивы: `ExtraGalleriaItemDirective`, `ExtraGalleriaThumbnailDirective`, `ExtraGalleriaCaptionDirective`, `ExtraGalleriaIndicatorDirective`, `ExtraGalleriaHeaderDirective`, `ExtraGalleriaFooterDirective`.
+
+```html
+<extra-galleria [value]="images" [showIndicators]="true" [showThumbnails]="false">
+  <ng-template extraGalleriaHeader>
+    <span class="font-bold">Галерея СДЭК</span>
+  </ng-template>
+
+  <ng-template extraGalleriaItem let-item>
+    <img [src]="item.itemImageSrc" [alt]="item.alt" />
+  </ng-template>
+
+  <ng-template extraGalleriaCaption let-item>
+    <h4>{{ item.title }}</h4>
+    <p>{{ item.description }}</p>
+  </ng-template>
+
+  <ng-template extraGalleriaIndicator let-index>
+    <span class="indicator-dot"></span>
+  </ng-template>
+
+  <ng-template extraGalleriaFooter>
+    <span>Переключайте изображения стрелками</span>
+  </ng-template>
+</extra-galleria>
+```
+
+## Related
+
+- [Button](../button/button.figma.md) — кнопка для открытия галереи в полноэкранном режиме
+- [Dialog](../dialog/dialog.figma.md) — альтернативный оверлей для произвольного модального содержимого
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены оверлея, навигации и индикаторов
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Всегда задавайте `extraGalleriaItem` — без него активное изображение не отрисуется.
+- Заполняйте `thumbnailImageSrc` в элементах `value`, если используете `[showThumbnails]="true"`.
+- Управляйте полноэкранным режимом через `[(visible)]` — это сохраняет двустороннюю синхронизацию при закрытии lightbox.
+- Указывайте `alt` у каждого изображения для доступности (a11y).
+
+**Don't:**
+- Не используйте Galleria для ленты разнородного контента — для этого предназначен `Carousel`.
+- Не включайте `[autoPlay]="true"` без `[circular]="true"` — слайдшоу остановится на последнем кадре.
+- Не задавайте `[showIndicators]="false"` вместе с шаблоном `extraGalleriaIndicator` — индикаторы не появятся.
+- Не подменяйте Galleria компонентом `Image`, когда нужно показать одно изображение без навигации.
diff --git a/src/lib/components/inputgroup/inputgroup.figma.md b/src/lib/components/inputgroup/inputgroup.figma.md
new file mode 100644
index 00000000..a8185e5b
--- /dev/null
+++ b/src/lib/components/inputgroup/inputgroup.figma.md
@@ -0,0 +1,106 @@
+---
+component: ExtraInputGroup
+selector: extra-input-group
+import:
+  symbol: ExtraInputGroupComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '437:3505'
+  componentKey: '5804ce15e658506c41002f48bf003b500ceceef1'
+  name: '<InputGroup>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraInputGroupComponent` — обёртка, объединяющая поле ввода (`<extra-input-text>`) с присоединёнными аддонами (текст, единица измерения, иконка, кнопка) слева и/или справа в единый визуальный блок. Аддоны проецируются как дочерние элементы `<extra-input-group-addon>`.
+
+Компонент соответствует Figma-компоненту `<InputGroup>` (nodeId `437:3505`, fileKey `Khh7arsuXss3ncqy1Dz3OZ`, библиотека «UI Kit (DS) v2.0»). Позиция аддонов определяется Figma-свойством `addon-position` (`left`, `right`, `left & right`), а само вкладываемое поле — свойством `change-field`.
+
+## Props mapping
+
+### `<extra-input-group>` — обёртка
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `size` | `'small' \| 'base' \| 'large' \| 'xlarge'` | `'base'` | Размер группы; влияет на паддинги и шрифты аддонов. Должен совпадать с `size` вложенного `<extra-input-text>` |
+
+> Позиция аддонов (Figma-свойство `addon-position`) в коде не является `@Input` — она задаётся порядком проекции `<extra-input-group-addon>` относительно `<extra-input-text>` в шаблоне.
+
+### `<extra-input-group-addon>` — аддон
+
+`ExtraInputGroupAddonComponent` (символ `ExtraInputGroupAddonComponent`, селектор `extra-input-group-addon`) не имеет `@Input`. Содержимое аддона (иконка, текст или кнопка) передаётся через проекцию контента — см. [Slots](#slots).
+
+## Variants
+
+### Addon слева (addon-position=left)
+
+Figma: `<InputGroup>`, addon-position=left — nodeId `437:3504`
+
+```html
+<extra-input-group>
+  <extra-input-group-addon><i class="ti ti-user"></i></extra-input-group-addon>
+  <extra-input-text placeholder="Введите данные..." [(ngModel)]="value" name="field" [fluid]="true"></extra-input-text>
+</extra-input-group>
+```
+
+### Addon справа (addon-position=right)
+
+Figma: `<InputGroup>`, addon-position=right — nodeId `437:3502`
+
+```html
+<extra-input-group>
+  <extra-input-text placeholder="Сумма" [(ngModel)]="amount" name="amount" [fluid]="true"></extra-input-text>
+  <extra-input-group-addon>₽</extra-input-group-addon>
+</extra-input-group>
+```
+
+### Addon с обеих сторон (addon-position=left & right)
+
+Figma: `<InputGroup>`, addon-position=left & right — nodeId `437:3503`
+
+```html
+<extra-input-group>
+  <extra-input-group-addon><i class="ti ti-currency-dollar"></i></extra-input-group-addon>
+  <extra-input-text placeholder="0.00" [(ngModel)]="price" name="price" [fluid]="true"></extra-input-text>
+  <extra-input-group-addon>USD</extra-input-group-addon>
+</extra-input-group>
+```
+
+### Размер xlarge
+
+Figma: `<InputGroup>`, addon-position=left
+
+```html
+<extra-input-group size="xlarge">
+  <extra-input-group-addon><i class="ti ti-search"></i></extra-input-group-addon>
+  <extra-input-text size="xlarge" placeholder="Поиск" [(ngModel)]="query" name="query" [fluid]="true"></extra-input-text>
+</extra-input-group>
+```
+
+## Slots
+
+- **`default` (обёртка)** — `<extra-input-group>` проецирует через `<ng-content>` дочерние `<extra-input-group-addon>` и `<extra-input-text>`. Позиция аддона определяется его порядком относительно поля.
+- **`default` (аддон)** — `<extra-input-group-addon>` проецирует через `<ng-content>` своё содержимое: иконку (см. [icons.md](../../figma-code-connect/icons.md)), текст или кнопку.
+
+## Related
+
+- [InputText](../inputtext/inputtext.figma.md) — поле ввода, вкладываемое в группу
+- [Токены](../../figma-code-connect/tokens.md) — токены паддингов и фонов аддонов
+- [Иконки](../../figma-code-connect/icons.md) — иконки для аддонов
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Задавайте одинаковый `size` на `<extra-input-group>` и на вложенном `<extra-input-text>`, чтобы поле и аддоны совпадали по высоте.
+- Используйте `[fluid]="true"` на `<extra-input-text>` внутри группы, чтобы поле занимало доступную ширину.
+- Управляйте позицией аддона его порядком в шаблоне: до поля — слева, после — справа, и до, и после — с обеих сторон.
+- Передавайте иконки в `<extra-input-group-addon>` ссылками из [icons.md](../../figma-code-connect/icons.md).
+
+**Don't:**
+- Не задавайте позицию аддона через `@Input` — у `<extra-input-group-addon>` нет входных свойств; позиция определяется порядком проекции.
+- Не инлайньте значения токенов паддингов/цветов аддонов — используйте [tokens.md](../../figma-code-connect/tokens.md).
+- Не вкладывайте несколько `<extra-input-text>` в одну группу — обёртка рассчитана на одно поле с аддонами.
diff --git a/src/lib/components/inputmask/inputmask.figma.md b/src/lib/components/inputmask/inputmask.figma.md
new file mode 100644
index 00000000..302625c8
--- /dev/null
+++ b/src/lib/components/inputmask/inputmask.figma.md
@@ -0,0 +1,187 @@
+---
+component: ExtraInputMask
+selector: extra-input-mask
+import:
+  symbol: ExtraInputMaskComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '319:1690'
+  componentKey: '30f1444b38ec5c9aa2d2cdff3e7051afb73d2b1b'
+  name: '<InputMask>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraInputMaskComponent` — поле ввода с фиксированной маской/форматом (телефон, дата, карта, СНИЛС/ИНН, время): подставляет структуру и литералы маски, а через `unmask` может отдавать «сырое» значение без разделителей. Реализует `ControlValueAccessor` и работает с `[(ngModel)]` и `[formControl]` «из коробки».
+
+Компонент соответствует Figma-компоненту `<InputMask>` (nodeId `319:1690`, fileKey `Khh7arsuXss3ncqy1Dz3OZ`, библиотека «UI Kit (DS) v2.0»). Label, подсказка и сообщение об ошибке навешиваются снаружи — через `<extra-input-group>` или `<extra-form-field>`.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `mask` | `string` | `''` | Шаблон маски (`9` — цифра, `a` — буква, `*` — буква или цифра), задаёт фиксированный формат ввода |
+| `slotChar` | `string` | `'_'` | Символ-заполнитель для незаполненных позиций маски |
+| `autoClear` | `boolean` | `true` | Очищать поле при потере фокуса, если значение не соответствует маске целиком |
+| `unmask` | `boolean` | `false` | Отдавать в модель «сырое» значение без литералов маски |
+| `showClear` | `boolean` | `false` | Показывает иконку очистки (×) при наличии значения — соответствует Figma-свойству `show-clear` |
+| `placeholder` | `string` | `''` | Подсказка при пустом поле — соответствует Figma-свойству `text-placeholder` / `has-placeholder` |
+| `size` | `'small' \| 'base' \| 'large' \| 'xlarge'` | `'base'` | Размер поля; `large` и `xlarge` маппируются на PrimeNG `pSize="large"` |
+| `readonly` | `boolean` | `false` | Только для чтения — соответствует Figma-состоянию `state=readonly` |
+| `fluid` | `boolean` | `false` | Растягивает поле на всю ширину контейнера |
+| `characterPattern` | `string` | `'[A-Za-z]'` | RegExp-шаблон для буквенных позиций маски (`a`) |
+| `keepBuffer` | `boolean` | `false` | Сохранять буфер маски при удалении символов |
+| `autocomplete` | `string` | `''` | Значение нативного атрибута `autocomplete` |
+| `(onComplete)` | `EventEmitter<void>` | — | Событие при полном заполнении маски |
+| `(onClearEvent)` | `EventEmitter<void>` | — | Событие при нажатии на иконку очистки (только при `showClear=true`) |
+| `(onFocusEvent)` | `EventEmitter<Event>` | — | Событие фокусировки поля |
+| `(onBlurEvent)` | `EventEmitter<Event>` | — | Событие потери фокуса |
+| `(onInputEvent)` | `EventEmitter<Event>` | — | Событие ввода символа |
+| `(onKeydownEvent)` | `EventEmitter<Event>` | — | Событие нажатия клавиши |
+| `[(ngModel)]` / `[formControl]` | `string` | `''` | Значение поля через ControlValueAccessor — соответствует Figma-свойству `text-input` |
+
+> `invalid` — вычисляемое свойство: берётся автоматически из связанного `NgControl` (соответствует Figma-состоянию `state=danger`). Устанавливать вручную нельзя.
+
+## Variants
+
+### Телефон (маска `(999) 999-9999`)
+
+Figma: `<InputMask>`, state=default, has-placeholder=true, has-floatlabel=false — nodeId `319:1716`
+
+```html
+<extra-input-mask
+  mask="(999) 999-9999"
+  placeholder="(___) ___-____"
+  [(ngModel)]="phone"
+  name="phone"
+></extra-input-mask>
+```
+
+### Дата (маска `99/99/9999`)
+
+Figma: `<InputMask>`, state=default, has-placeholder=true, has-floatlabel=false — nodeId `319:1716`
+
+```html
+<extra-input-mask
+  mask="99/99/9999"
+  slotChar="дд/мм/гггг"
+  [(ngModel)]="birthDate"
+  name="birthDate"
+></extra-input-mask>
+```
+
+### Сырое значение (unmask)
+
+Figma: `<InputMask>`, state=default, has-placeholder=false, has-floatlabel=false — nodeId `319:1719`
+
+```html
+<extra-input-mask
+  mask="999-99-999 99"
+  [unmask]="true"
+  [(ngModel)]="snils"
+  name="snils"
+></extra-input-mask>
+```
+
+### С кнопкой очистки (show-clear)
+
+Figma: `<InputMask>`, state=default, show-clear=true — nodeId `319:1716`
+
+```html
+<extra-input-mask
+  mask="9999 9999 9999 9999"
+  placeholder="Номер карты"
+  [showClear]="true"
+  [(ngModel)]="card"
+  name="card"
+></extra-input-mask>
+```
+
+### Disabled (отключённое поле)
+
+Figma: `<InputMask>`, state=disabled, has-placeholder=true, has-floatlabel=false — nodeId `319:1691`
+
+```ts
+disabledControl = new FormControl({ value: '', disabled: true });
+```
+
+```html
+<extra-input-mask
+  mask="(999) 999-9999"
+  placeholder="Недоступно"
+  [formControl]="disabledControl"
+></extra-input-mask>
+```
+
+### Readonly (только для чтения)
+
+Figma: `<InputMask>`, state=readonly, has-placeholder=true, has-floatlabel=false — nodeId `14980:19858`
+
+```html
+<extra-input-mask
+  mask="(999) 999-9999"
+  [readonly]="true"
+  [(ngModel)]="readonlyPhone"
+  name="roPhone"
+></extra-input-mask>
+```
+
+### Fluid / Large (на всю ширину, большой размер)
+
+Figma: `<InputMask>`, state=default, has-placeholder=true, has-floatlabel=false
+
+```html
+<extra-input-mask
+  mask="(999) 999-9999"
+  size="large"
+  [fluid]="true"
+  placeholder="(___) ___-____"
+  [(ngModel)]="phone"
+  name="widePhone"
+></extra-input-mask>
+```
+
+### С реактивной формой (formControl + валидация)
+
+Figma: `<InputMask>`, state=danger, has-placeholder=true, has-floatlabel=false — nodeId `319:1697` (невалидное состояние определяется через NgControl автоматически)
+
+```ts
+phoneControl = new FormControl('', [Validators.required]);
+```
+
+```html
+<extra-input-mask
+  mask="(999) 999-9999"
+  placeholder="(___) ___-____"
+  [formControl]="phoneControl"
+></extra-input-mask>
+```
+
+## Slots
+
+Нет — поле атомарное. Проекция содержимого не поддерживается. Для добавления prefix/suffix-иконок используйте `<extra-input-group>` — см. [inputgroup.figma.md](../inputgroup/inputgroup.figma.md).
+
+## Related
+
+- [InputText](../inputtext/inputtext.figma.md) — поле для свободного ввода без маски
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены состояний поля
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Используйте `[(ngModel)]` или `[formControl]` — компонент реализует `ControlValueAccessor` и именно через них передаётся значение.
+- Управляйте состоянием `disabled` через `FormControl.disable()` / `FormControl.enable()` — это сохраняет dirty/touched-флаги.
+- Включайте `[unmask]="true"`, когда в модель нужно сохранять значение без литералов маски (например, только цифры телефона).
+- Для сброса поля через иконку × включайте `[showClear]="true"` и подписывайтесь на `(onClearEvent)` при необходимости пост-обработки.
+- Используйте `[fluid]="true"` в формах на всю ширину и мобильных макетах.
+- Оберните поле в `<extra-form-field>` или `<extra-input-group>` для добавления label, подсказки и prefix/suffix.
+
+**Don't:**
+- Не используйте маскированное поле для свободного текста без фиксированного формата — для этого есть [InputText](../inputtext/inputtext.figma.md).
+- Не задавайте `[disabled]="true"` как Input-атрибут напрямую — компонент не объявляет `@Input() disabled`; передавайте через `FormControl` или `ControlValueAccessor`.
+- Не подменяйте `value` через прямой DOM (`document.querySelector('input').value = ...`) — теряется `dirty`-state и Angular-реактивность.
+- Не используйте поле без `[(ngModel)]` / `[formControl]` — без привязки значение не синхронизируется с моделью.
diff --git a/src/lib/components/inputnumber/inputnumber.figma.md b/src/lib/components/inputnumber/inputnumber.figma.md
new file mode 100644
index 00000000..f87fd14f
--- /dev/null
+++ b/src/lib/components/inputnumber/inputnumber.figma.md
@@ -0,0 +1,192 @@
+---
+component: ExtraInputNumber
+selector: extra-input-number
+import:
+  symbol: ExtraInputNumberComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '320:1754'
+  componentKey: '00bb1604181c52a43b1c9357ef8f88ccf882dd59'
+  name: '<InputNumber>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraInputNumberComponent` — числовое поле для точного ввода числа с клавиатуры и пошагово через stepper-кнопки (+/−). Поддерживает форматирование (валюта, проценты, разделители разрядов), ограничения диапазона (`min`/`max`) и шаг (`step`). Оборачивает PrimeNG `p-inputNumber` и реализует `ControlValueAccessor`, поэтому работает с `[(ngModel)]` и `[formControl]` «из коробки».
+
+Компонент соответствует Figma-компоненту `<InputNumber>` (nodeId `320:1754`, библиотека «UI Kit (DS) v2.0»). Label, подсказка и сообщение об ошибке навешиваются снаружи — через `<extra-input-group>` или `<extra-form-field>`. В отличие от `<InputText>` с `type=number`, поддерживает stepper-кнопки и форматирование.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `size` | `'small' \| 'base' \| 'large' \| 'xlarge'` | `'base'` | Размер поля |
+| `showButtons` | `boolean` | `false` | Показывает stepper-кнопки (+/−) — соответствует Figma-свойству `buttons` |
+| `buttonLayout` | `'stacked' \| 'horizontal' \| 'vertical'` | `'stacked'` | Расположение stepper-кнопок (действует при `showButtons=true`) |
+| `mode` | `string` (`'decimal' \| 'currency'`) | `'decimal'` | Режим форматирования числа; `currency` включает отображение валюты |
+| `currency` | `string \| undefined` | `undefined` | Код валюты (ISO 4217, например `'RUB'`); используется при `mode='currency'` |
+| `locale` | `string \| undefined` | `undefined` | Локаль форматирования (например `'ru-RU'`) |
+| `placeholder` | `string` | `''` | Подсказка при пустом поле — соответствует Figma-свойствам `text-placeholder` / `has-placeholder` |
+| `readonly` | `boolean` | `false` | Только для чтения — соответствует Figma-состоянию `state=readonly` |
+| `fluid` | `boolean` | `false` | Растягивает поле на всю ширину контейнера |
+| `min` | `number \| undefined` | `undefined` | Минимальное допустимое значение |
+| `max` | `number \| undefined` | `undefined` | Максимальное допустимое значение |
+| `step` | `number` | `1` | Шаг изменения при нажатии stepper-кнопок |
+| `prefix` | `string \| undefined` | `undefined` | Текст перед числом — соответствует Figma-свойствам `show-text-prefix` / `text-prefix` |
+| `suffix` | `string \| undefined` | `undefined` | Текст после числа — соответствует Figma-свойствам `show-text-suffix` / `text-suffix` |
+| `minFractionDigits` | `number \| undefined` | `undefined` | Минимальное число знаков после запятой |
+| `maxFractionDigits` | `number \| undefined` | `undefined` | Максимальное число знаков после запятой |
+| `useGrouping` | `boolean` | `true` | Группировка разрядов (разделитель тысяч) |
+| `incrementButtonIcon` | `string \| undefined` | `undefined` | CSS-класс иконки кнопки «+»; по умолчанию используется встроенная SVG-иконка плюса |
+| `decrementButtonIcon` | `string \| undefined` | `undefined` | CSS-класс иконки кнопки «−»; по умолчанию используется встроенная SVG-иконка минуса |
+| `(onInput)` | `EventEmitter<{ value: number \| null }>` | — | Событие при изменении значения |
+| `[(ngModel)]` / `[formControl]` | `number \| null` | `null` | Значение поля через ControlValueAccessor — соответствует Figma-свойству `text-inputnumber` |
+
+> `invalid` — вычисляемое свойство: берётся автоматически из связанного `NgControl` (соответствует Figma-состоянию `state=danger`). Устанавливать вручную нельзя.
+
+> `disabled` — управляется через `FormControl.disable()` или `ControlValueAccessor.setDisabledState`; компонент не объявляет `@Input() disabled`. Соответствует Figma-состоянию `state=disabled`.
+
+## Variants
+
+### Default / Base (базовое поле)
+
+Figma: `<InputNumber>`, state=default, buttons=false, has-placeholder=true — nodeId `320:1780`
+
+```html
+<extra-input-number
+  placeholder="0"
+  [(ngModel)]="value"
+  name="amount"
+></extra-input-number>
+```
+
+### Со stepper-кнопками (buttons)
+
+Figma: `<InputNumber>`, state=default, buttons=true, has-placeholder=true — nodeId `379:1793`
+
+```html
+<extra-input-number
+  [showButtons]="true"
+  [min]="0"
+  [max]="100"
+  [step]="1"
+  [(ngModel)]="quantity"
+  name="quantity"
+></extra-input-number>
+```
+
+### Валюта (currency)
+
+Figma: `<InputNumber>`, state=default, show-text-suffix=true — nodeId `320:1780`
+
+```html
+<extra-input-number
+  mode="currency"
+  currency="RUB"
+  locale="ru-RU"
+  [(ngModel)]="price"
+  name="price"
+></extra-input-number>
+```
+
+### С префиксом и суффиксом (prefix / suffix)
+
+Figma: `<InputNumber>`, state=default, show-text-prefix=true, show-text-suffix=true — nodeId `320:1780`
+
+```html
+<extra-input-number
+  prefix="₽ "
+  suffix=" /шт"
+  [(ngModel)]="value"
+  name="cost"
+></extra-input-number>
+```
+
+### Disabled (отключённое поле)
+
+Figma: `<InputNumber>`, state=disabled, buttons=false — nodeId `320:1755`
+
+```html
+<extra-input-number
+  placeholder="Недоступно"
+  [formControl]="disabledControl"
+></extra-input-number>
+```
+
+```ts
+disabledControl = new FormControl({ value: 0, disabled: true });
+```
+
+### Readonly (только для чтения)
+
+Figma: `<InputNumber>`, state=readonly, buttons=false — nodeId `14980:33596`
+
+```html
+<extra-input-number
+  [readonly]="true"
+  [(ngModel)]="readonlyValue"
+  name="roField"
+></extra-input-number>
+```
+
+### С реактивной формой (formControl + валидация)
+
+Figma: `<InputNumber>`, state=danger — nodeId `320:1761` (невалидное состояние определяется через NgControl автоматически)
+
+```ts
+amountControl = new FormControl<number | null>(null, [
+  Validators.required,
+  Validators.min(1),
+]);
+```
+
+```html
+<extra-input-number
+  placeholder="0"
+  [formControl]="amountControl"
+></extra-input-number>
+```
+
+### Fluid / Large (на всю ширину, большой размер)
+
+Figma: `<InputNumber>`, state=default
+
+```html
+<extra-input-number
+  size="large"
+  [fluid]="true"
+  placeholder="0"
+  [(ngModel)]="value"
+  name="wideField"
+></extra-input-number>
+```
+
+## Slots
+
+Нет — поле атомарное. Проекция содержимого не поддерживается. Иконки stepper-кнопок настраиваются через `incrementButtonIcon` / `decrementButtonIcon`. Для добавления внешних prefix/suffix-иконок используйте `<extra-input-group>` — см. [inputtext.figma.md](../inputtext/inputtext.figma.md).
+
+## Related
+
+- [InputText](../inputtext/inputtext.figma.md) — однострочное текстовое поле (`type=number` без stepper и форматирования)
+- [Button](../button/button.figma.md) — кнопка действия
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены состояний поля
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Используйте `[(ngModel)]` или `[formControl]` — компонент реализует `ControlValueAccessor` и именно через них передаётся значение.
+- Управляйте состоянием `disabled` через `FormControl.disable()` / `FormControl.enable()` — это сохраняет dirty/touched-флаги.
+- Задавайте `[min]` и `[max]` для ограничения диапазона и `[step]` для шага stepper-кнопок.
+- Для денежных значений используйте `mode="currency"` с `currency` и `locale` вместо ручного `suffix`.
+- Используйте `[fluid]="true"` в формах на всю ширину и мобильных макетах.
+- Оберните поле в `<extra-form-field>` или `<extra-input-group>` для добавления label, подсказки и сообщения об ошибке.
+
+**Don't:**
+- Не подменяйте `value` через прямой DOM — теряется `dirty`-state и Angular-реактивность.
+- Не задавайте `[disabled]="true"` как Input-атрибут напрямую — компонент не объявляет `@Input() disabled`; передавайте через `FormControl` или `ControlValueAccessor`.
+- Не используйте поле без `[(ngModel)]` / `[formControl]` — без привязки значение не синхронизируется с моделью.
+- Не применяйте `mode="currency"` без `currency` — валюта не отобразится корректно.
diff --git a/src/lib/components/inputotp/inputotp.figma.md b/src/lib/components/inputotp/inputotp.figma.md
new file mode 100644
index 00000000..54fe110e
--- /dev/null
+++ b/src/lib/components/inputotp/inputotp.figma.md
@@ -0,0 +1,161 @@
+---
+component: ExtraInputOtp
+selector: extra-input-otp
+import:
+  symbol: ExtraInputOtpComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '318:1373'
+  componentKey: 'aa558ffe72b6bf9bdb18f5033e8c63f1336646e1'
+  name: '<InputOtp>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraInputOtpComponent` — поле ввода одноразового кода (OTP/PIN) из N отдельных ячеек по одному символу. Поддерживает автопереход фокуса между ячейками, вставку кода целиком, маскирование символов и режим «только цифры». Реализует `ControlValueAccessor` и работает с `[(ngModel)]` и `[formControl]` «из коробки».
+
+Компонент соответствует Figma-компоненту `<InputOtp>` (nodeId `318:1373`, библиотека «UI Kit (DS) v2.0»). Не путать с `<InputText>`/`<InputNumber>` (одно сплошное поле) и `Password` (скрытый пароль произвольной длины) — OTP всегда фиксированной длины и разбит на ячейки.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `length` | `number` | `4` | Количество ячеек кода — соответствует числу элементов `<InputOtp.Item>` в Figma |
+| `mask` | `boolean` | `false` | Маскирование введённых символов (как пароль) |
+| `integerOnly` | `boolean` | `false` | Разрешает вводить только цифры |
+| `readonly` | `boolean` | `false` | Только для чтения — соответствует Figma-состоянию `state=readonly` |
+| `size` | `'small' \| 'base' \| 'large' \| 'xlarge'` | `'base'` | Размер ячеек; `large` и `xlarge` маппируются на PrimeNG `pSize="large"` |
+| `tabindex` | `number \| null` | `null` | Порядок перехода по Tab |
+| `autofocus` | `boolean` | `false` | Автофокус первой ячейки при монтировании |
+| `(onChange)` | `EventEmitter<ExtraInputOtpChangeEvent>` | — | Событие изменения значения кода |
+| `(onFocus)` | `EventEmitter<Event>` | — | Событие получения фокуса |
+| `(onBlur)` | `EventEmitter<Event>` | — | Событие потери фокуса |
+| `[(ngModel)]` / `[formControl]` | `string` | `null` | Значение кода через ControlValueAccessor |
+
+> `invalid` — вычисляемое свойство: берётся автоматически из связанного `NgControl` (соответствует Figma-состоянию `state=danger`). Устанавливать вручную нельзя.
+>
+> `disabled` — не объявлен как `@Input`; управляется через `FormControl.disable()` или `ControlValueAccessor.setDisabledState`; соответствует Figma-состоянию `state=disabled`.
+
+## Variants
+
+### Default / 4 ячейки (базовое поле)
+
+Figma: `<InputOtp>`, length=4, state=default — nodeId `318:1373`
+
+```html
+<extra-input-otp
+  [length]="4"
+  [(ngModel)]="code"
+  name="otp"
+></extra-input-otp>
+```
+
+### 6 ячеек (SMS-код)
+
+Figma: `<InputOtp>`, length=6, state=default
+
+```html
+<extra-input-otp
+  [length]="6"
+  [(ngModel)]="smsCode"
+  name="smsCode"
+></extra-input-otp>
+```
+
+### Только цифры (integer-only)
+
+Figma: `<InputOtp>`, integerOnly=true, state=default
+
+```html
+<extra-input-otp
+  [length]="6"
+  [integerOnly]="true"
+  [(ngModel)]="pin"
+  name="pin"
+></extra-input-otp>
+```
+
+### Маскирование (mask)
+
+Figma: `<InputOtp>`, mask=true, state=default
+
+```html
+<extra-input-otp
+  [length]="4"
+  [mask]="true"
+  [(ngModel)]="secretPin"
+  name="secretPin"
+></extra-input-otp>
+```
+
+### Disabled (отключённое поле)
+
+Figma: `<InputOtp>`, state=disabled
+
+```html
+<extra-input-otp
+  [length]="4"
+  [formControl]="disabledControl"
+></extra-input-otp>
+```
+
+```ts
+// Управляется через FormControl:
+disabledControl = new FormControl({ value: null, disabled: true });
+```
+
+### Large (большой размер ячеек)
+
+Figma: `<InputOtp>`, size=large, state=default
+
+```html
+<extra-input-otp
+  [length]="6"
+  size="large"
+  [(ngModel)]="code"
+  name="otp"
+></extra-input-otp>
+```
+
+### С реактивной формой (formControl + валидация)
+
+Figma: `<InputOtp>`, state=danger (невалидное состояние определяется через NgControl автоматически)
+
+```ts
+otpControl = new FormControl(null, [Validators.required, Validators.minLength(4)]);
+```
+
+```html
+<extra-input-otp
+  [length]="4"
+  [formControl]="otpControl"
+></extra-input-otp>
+```
+
+## Slots
+
+Нет — поле атомарное. Проекция содержимого не поддерживается. Количество ячеек задаётся через `@Input() length`. Label, подсказку и сообщение об ошибке навешивайте снаружи — через `<extra-form-field>`.
+
+## Related
+
+- [InputText](../inputtext/inputtext.figma.md) — однострочное поле для свободного текста
+- [Button](../button/button.figma.md) — кнопка подтверждения кода
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Используйте `[(ngModel)]` или `[formControl]` — компонент реализует `ControlValueAccessor` и именно через них передаётся значение.
+- Задавайте `[length]` равным реальной длине кода (4 для PIN, 6 для SMS-кода).
+- Включайте `[integerOnly]="true"` для числовых кодов — это блокирует ввод букв.
+- Управляйте состоянием `disabled` через `FormControl.disable()` / `FormControl.enable()` — это сохраняет dirty/touched-флаги.
+- Используйте `[mask]="true"` для конфиденциальных кодов (например, PIN при подтверждении операции).
+
+**Don't:**
+- Не используйте OTP для ввода длинного или произвольного текста — для этого есть [InputText](../inputtext/inputtext.figma.md).
+- Не задавайте `[disabled]="true"` как Input-атрибут напрямую — компонент не объявляет `@Input() disabled`; передавайте через `FormControl` или `ControlValueAccessor`.
+- Не используйте поле без `[(ngModel)]` / `[formControl]` — без привязки значение не синхронизируется с моделью.
+- Не меняйте `[length]` динамически после ввода — это сбрасывает уже введённые символы.
diff --git a/src/lib/components/inputtext/inputtext.figma.md b/src/lib/components/inputtext/inputtext.figma.md
new file mode 100644
index 00000000..09e2f80f
--- /dev/null
+++ b/src/lib/components/inputtext/inputtext.figma.md
@@ -0,0 +1,143 @@
+---
+component: ExtraInputText
+selector: extra-input-text
+import:
+  symbol: ExtraInputTextComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '15:13444'
+  componentKey: 'b8bc649d1acf7132183bed9af9df322dcab6ab9e'
+  name: '<InputText>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraInputTextComponent` — атомарное однострочное поле для ввода короткого свободного текста (имя, email, строка поиска). Реализует `ControlValueAccessor` и работает с `[(ngModel)]` и `[formControl]` «из коробки».
+
+Компонент соответствует Figma-компоненту `<InputText>` (nodeId `15:13444`, fileKey `Khh7arsuXss3ncqy1Dz3OZ`, библиотека «UI Kit (DS) v2.0»). Label, подсказка и сообщение об ошибке навешиваются снаружи — через `<extra-input-group>` или `<extra-form-field>`.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `placeholder` | `string` | `''` | Подсказка при пустом поле — соответствует Figma-свойству `text-placeholder` / `has-placeholder` |
+| `size` | `'small' \| 'base' \| 'large' \| 'xlarge'` | `'base'` | Размер поля; `large` и `xlarge` маппируются на PrimeNG `pSize="large"` |
+| `readonly` | `boolean` | `false` | Только для чтения — соответствует Figma-состоянию `state=readonly` |
+| `showClear` | `boolean` | `false` | Показывает иконку очистки (×) при наличии значения — соответствует Figma-свойству `show-clear` |
+| `fluid` | `boolean` | `false` | Растягивает поле на всю ширину контейнера |
+| `disabled` | `boolean` | `false` | Отключённое состояние — управляется через `FormControl.disable()` или `ControlValueAccessor.setDisabledState`; соответствует Figma-состоянию `state=disabled` |
+| `(onClear)` | `EventEmitter<void>` | — | Событие при нажатии на иконку очистки (только при `showClear=true`) |
+| `[(ngModel)]` / `[formControl]` | `string` | `''` | Значение поля через ControlValueAccessor — соответствует Figma-свойству `text-input` |
+
+> `invalid` — вычисляемое свойство: берётся автоматически из связанного `NgControl` (соответствует Figma-состоянию `state=danger`). Устанавливать вручную нельзя.
+
+## Variants
+
+### Default / Base (базовое поле)
+
+Figma: `<InputText>`, state=default, has-placeholder=true, has-floatlabel=false — nodeId `15:13443`
+
+```html
+<extra-input-text
+  placeholder="Введите текст..."
+  [(ngModel)]="value"
+  name="field"
+></extra-input-text>
+```
+
+### С кнопкой очистки (show-clear)
+
+Figma: `<InputText>`, state=default, show-clear=true — nodeId `15:13443`
+
+```html
+<extra-input-text
+  placeholder="Поиск..."
+  [showClear]="true"
+  [(ngModel)]="searchQuery"
+  name="search"
+></extra-input-text>
+```
+
+### Disabled (отключённое поле)
+
+Figma: `<InputText>`, state=disabled — nodeId `15:13439`
+
+```html
+<extra-input-text
+  placeholder="Недоступно"
+  [formControl]="disabledControl"
+></extra-input-text>
+```
+
+```ts
+// Управляется через FormControl:
+disabledControl = new FormControl({ value: '', disabled: true });
+```
+
+### Fluid / Large (на всю ширину, большой размер)
+
+Figma: `<InputText>`, state=default
+
+```html
+<extra-input-text
+  size="large"
+  [fluid]="true"
+  placeholder="Широкое поле"
+  [(ngModel)]="value"
+  name="wideField"
+></extra-input-text>
+```
+
+### С реактивной формой (formControl + валидация)
+
+Figma: `<InputText>`, state=danger — nodeId `15:13435` (невалидное состояние определяется через NgControl автоматически)
+
+```ts
+emailControl = new FormControl('', [Validators.required, Validators.email]);
+```
+
+```html
+<extra-input-text
+  placeholder="email@example.com"
+  [formControl]="emailControl"
+></extra-input-text>
+```
+
+### Readonly (только для чтения)
+
+Figma: `<InputText>`, state=readonly — nodeId `14978:17413`
+
+```html
+<extra-input-text
+  [readonly]="true"
+  [(ngModel)]="readonlyValue"
+  name="roField"
+></extra-input-text>
+```
+
+## Slots
+
+Нет — поле атомарное. Проекция содержимого не поддерживается. Для добавления prefix/suffix-иконок используйте `<extra-input-group>` — см. [inputgroup.figma.md](../inputgroup/inputgroup.figma.md).
+
+## Related
+
+- [InputGroup](../inputgroup/inputgroup.figma.md) — обёртка с prefix/suffix-слотами
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены состояний поля
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Используйте `[(ngModel)]` или `[formControl]` — компонент реализует `ControlValueAccessor` и именно через них передаётся значение.
+- Управляйте состоянием `disabled` через `FormControl.disable()` / `FormControl.enable()` — это сохраняет dirty/touched-флаги.
+- Для сброса поля через иконку × включайте `[showClear]="true"` и подписывайтесь на `(onClear)` при необходимости пост-обработки.
+- Используйте `[fluid]="true"` в формах на всю ширину и мобильных макетах.
+- Оберните поле в `<extra-form-field>` или `<extra-input-group>` для добавления label, подсказки и prefix/suffix.
+
+**Don't:**
+- Не подменяйте `value` через прямой DOM (`document.querySelector('input').value = ...`) — теряется `dirty`-state и Angular-реактивность.
+- Не задавайте `[disabled]="true"` как Input-атрибут напрямую — компонент не объявляет `@Input() disabled`; передавайте через `FormControl` или `ControlValueAccessor`.
+- Не используйте поле без `[(ngModel)]` / `[formControl]` — без привязки значение не синхронизируется с моделью.
diff --git a/src/lib/components/listbox/listbox.figma.md b/src/lib/components/listbox/listbox.figma.md
new file mode 100644
index 00000000..c0894b0c
--- /dev/null
+++ b/src/lib/components/listbox/listbox.figma.md
@@ -0,0 +1,211 @@
+---
+component: ExtraListbox
+selector: extra-listbox
+import:
+  symbol: ExtraListboxComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '349:2649'
+  componentKey: 'c754e38e38d8927dcd62709abaecf328fd59b653'
+  name: '<Listbox>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraListboxComponent` — всегда видимый список опций для выбора одного или нескольких значений, который не сворачивается за триггером. Оборачивает PrimeNG `p-listbox` и расширяет его множественным выбором с чекбоксами, фильтрацией, группировкой опций и кастомным шаблоном пункта. Реализует `ControlValueAccessor` и работает с `[(ngModel)]` и `[formControl]` «из коробки».
+
+Компонент соответствует Figma-компоненту `<Listbox>` (component set, nodeId `349:2649`, fileKey `Khh7arsuXss3ncqy1Dz3OZ`, библиотека «UI Kit (DS) v2.0»). Варианты задаются Figma-свойствами `state` (`default | disabled`), `empty`, `overlay`, `header`, а вложенные свойства `show-checkbox`, `show-filter` и `show-close` управляют отображением чекбоксов и строки поиска. Пункты, группы и расширенные шаблоны опций вынесены в отдельные внутренние Figma-узлы (`<Listbox.ItemCheckbox>`, `<Listbox.ItemGroup>`, `<Listbox.ItemTemplate>`, `<Listbox.ItemIcon>`) и в коде описываются через шаблон-директиву (см. Slots).
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `options` | `any[]` | `[]` | Массив опций для выбора |
+| `optionLabel` | `string` | `'label'` | Имя поля опции, отображаемое как подпись |
+| `optionValue` | `string \| undefined` | `undefined` | Имя поля опции, используемое как значение модели |
+| `multiple` | `boolean` | `false` | Множественный выбор — соответствует Figma-свойству `show-checkbox` |
+| `filter` | `boolean` | `false` | Показывает строку поиска над списком — соответствует Figma-свойству `show-filter` |
+| `filterPlaceHolder` | `string \| undefined` | `undefined` | Подсказка в строке поиска (при `filter=true`) |
+| `checkmark` | `boolean` | `false` | Показывает галочку у выбранного пункта (одиночный выбор) |
+| `group` | `boolean` | `false` | Включает группировку опций по секциям |
+| `optionGroupLabel` | `string \| undefined` | `undefined` | Имя поля заголовка группы (при `group=true`) — соответствует Figma-узлу `<Listbox.ItemGroup>` |
+| `optionGroupChildren` | `string \| undefined` | `undefined` | Имя поля группы со списком дочерних опций |
+| `scrollHeight` | `string` | `'200px'` | Максимальная высота прокручиваемой области списка |
+| `emptyMessage` | `string \| undefined` | `undefined` | Сообщение при пустом списке опций — соответствует Figma-свойству `empty=true` |
+| `(onFocus)` | `EventEmitter<FocusEvent>` | — | Событие получения фокуса |
+| `(onBlur)` | `EventEmitter<FocusEvent>` | — | Событие потери фокуса |
+| `[(ngModel)]` / `[formControl]` | `any` | `null` | Выбранное значение через ControlValueAccessor |
+
+> `disabled` — компонент не объявляет `@Input() disabled`; отключённое состояние (Figma `state=disabled`) задаётся через `ControlValueAccessor` (`FormControl.disable()`).
+
+## Variants
+
+### Single (одиночный выбор)
+
+Figma: `<Listbox>`, state=default, header=true — nodeId `365:1812`
+
+```html
+<extra-listbox
+  [options]="cities"
+  optionLabel="name"
+  [(ngModel)]="selectedCity"
+  name="city"
+></extra-listbox>
+```
+
+### Single c optionValue (примитивное значение модели)
+
+Figma: `<Listbox>`, state=default
+
+```html
+<extra-listbox
+  [options]="cities"
+  optionLabel="name"
+  optionValue="code"
+  [checkmark]="true"
+  [(ngModel)]="selectedCode"
+  name="cityCode"
+></extra-listbox>
+```
+
+### Multiple (множественный выбор с чекбоксами)
+
+Figma: `<Listbox>`, state=default, show-checkbox=true — пункты `<Listbox.ItemCheckbox>`
+
+```html
+<extra-listbox
+  [options]="cities"
+  optionLabel="name"
+  [multiple]="true"
+  [(ngModel)]="selectedCities"
+  name="cities"
+></extra-listbox>
+```
+
+### Checkbox + checkmark (галочка выбранного пункта)
+
+Figma: `<Listbox>`, state=default, show-checkbox=true
+
+```html
+<extra-listbox
+  [options]="cities"
+  optionLabel="name"
+  [multiple]="true"
+  [checkmark]="true"
+  [(ngModel)]="selectedCities"
+  name="citiesCheck"
+></extra-listbox>
+```
+
+### Filter (строка поиска над списком)
+
+Figma: `<Listbox>`, state=default, show-filter=true
+
+```html
+<extra-listbox
+  [options]="cities"
+  optionLabel="name"
+  [filter]="true"
+  filterPlaceHolder="Поиск города..."
+  [(ngModel)]="selectedCity"
+  name="cityFilter"
+></extra-listbox>
+```
+
+### Group (группировка опций по секциям)
+
+Figma: `<Listbox>`, state=default — заголовки групп `<Listbox.ItemGroup>`
+
+```html
+<extra-listbox
+  [options]="groupedCities"
+  [group]="true"
+  optionGroupLabel="region"
+  optionGroupChildren="items"
+  optionLabel="name"
+  [(ngModel)]="selectedCity"
+  name="cityGrouped"
+></extra-listbox>
+```
+
+### Empty (пустой список)
+
+Figma: `<Listbox>`, state=default, empty=true — nodeId `365:1826`
+
+```html
+<extra-listbox
+  [options]="[]"
+  optionLabel="name"
+  emptyMessage="Нет данных"
+  [(ngModel)]="selectedCity"
+  name="cityEmpty"
+></extra-listbox>
+```
+
+### Disabled (отключённый список)
+
+Figma: `<Listbox>`, state=disabled — nodeId `365:1842`
+
+```html
+<extra-listbox
+  [options]="cities"
+  optionLabel="name"
+  [formControl]="disabledControl"
+></extra-listbox>
+```
+
+```ts
+// Управляется через FormControl:
+disabledControl = new FormControl({ value: null, disabled: true });
+```
+
+## Slots
+
+Проекция пользовательского содержимого пункта выполняется через шаблон-директиву `extraListboxItem`, размещаемую внутри тега `<extra-listbox>`. Директива оборачивается в `<ng-template>` и получает текущую опцию через `let-item`:
+
+- **`extraListboxItem`** (`ExtraListboxItemDirective`) — шаблон отдельного пункта списка (контекст `let-item`); соответствует Figma-узлам `<Listbox.ItemTemplate>` и `<Listbox.ItemIcon>`.
+
+```html
+<extra-listbox [formControl]="ctrl" [options]="options" optionLabel="name">
+  <ng-template extraListboxItem let-item>
+    <i [class]="item.icon"></i>
+    <div class="p-listbox-option-label-group">
+      <span>{{ item.name }}</span>
+      <small class="p-listbox-option-caption">{{ item.description }}</small>
+    </div>
+  </ng-template>
+</extra-listbox>
+```
+
+```ts
+import {
+  ExtraListboxComponent,
+  ExtraListboxItemDirective
+} from '@cdek-it/angular-ui-kit';
+```
+
+## Related
+
+- [Select](../select/select.figma.md) — выбор одного значения из сворачиваемого выпадающего списка
+- [Checkbox](../checkbox/checkbox.figma.md) — отдельный чекбокс; в Listbox используется для множественного выбора
+- [Button](../button/button.figma.md) — кнопки действий в формах
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Используйте `[(ngModel)]` или `[formControl]` — компонент реализует `ControlValueAccessor` и именно через них передаётся выбранное значение.
+- Включайте `[multiple]="true"` для выбора нескольких значений — пункты получают чекбоксы.
+- Управляйте отключённым состоянием через `FormControl.disable()` / `FormControl.enable()` — это сохраняет dirty/touched-флаги.
+- Задавайте `optionLabel` для отображаемой подписи и `optionValue`, когда в модели нужно хранить примитив, а не весь объект опции.
+- Включайте `[filter]="true"` для длинных списков, чтобы пользователь мог искать опцию по тексту.
+- Для кастомного вида пункта используйте директиву `extraListboxItem`.
+
+**Don't:**
+- Не задавайте `[disabled]="true"` как Input-атрибут напрямую — компонент не объявляет `@Input() disabled`; передавайте отключение через `FormControl` или `ControlValueAccessor`.
+- Не используйте список без `[(ngModel)]` / `[formControl]` — без привязки выбранное значение не синхронизируется с моделью.
+- Не включайте `[group]="true"` без `optionGroupLabel` и `optionGroupChildren` — группы не отрисуются корректно.
+- Не применяйте Listbox для свёрнутого выбора с триггером — для этого используйте [Select](../select/select.figma.md).
diff --git a/src/lib/components/megamenu/megamenu.figma.md b/src/lib/components/megamenu/megamenu.figma.md
new file mode 100644
index 00000000..7b6b4716
--- /dev/null
+++ b/src/lib/components/megamenu/megamenu.figma.md
@@ -0,0 +1,90 @@
+---
+component: ExtraMegaMenu
+selector: extra-megamenu
+import:
+  symbol: ExtraMegaMenuComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '16194:4401'
+  componentKey: '951a533f89eac2ebe0f8d3f7cb2a69aa2f1b995f'
+  name: '<MegaMenu>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraMegaMenu` — компонент навигационного меню с многоколоночными подменю для крупной навигации. Корневые пункты раскрывают широкую панель из нескольких колонок-групп ссылок. Оборачивает PrimeNG `p-megamenu`, работает на основе модели (`model`) и поддерживает горизонтальную и вертикальную ориентацию.
+
+Компонент соответствует Figma-компоненту `<MegaMenu>` (nodeId `16194:4401`) из библиотеки UI Kit (DS) v2.0. В отличие от `Menubar` (горизонтальное меню без многоколоночных панелей) и `TieredMenu` (каскадное меню по уровням без колонок), `MegaMenu` предназначен для верхней навигации с большим числом сгруппированных разделов.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `model` | `ExtraMegaMenuItem[]` | `[]` | Модель пунктов меню (метка, иконка, ссылка, вложенные группы); определяет содержимое меню |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Ориентация меню — соответствует Figma-свойству `orientation` (варианты `horizontal`, `vertical`) |
+| `breakpoint` | `string` | `'960px'` | Точка перехода в мобильный режим с кнопкой-гамбургером |
+| `scrollHeight` | `string` | `''` | Максимальная высота прокручиваемой области подменю |
+| `disabled` | `boolean` | `false` | Отключённое состояние всего меню |
+| `ariaLabel` | `string \| undefined` | `undefined` | Метка для программ экранного доступа |
+| `ariaLabelledBy` | `string \| undefined` | `undefined` | Идентификатор элемента-метки для экранного доступа |
+| `tabindex` | `number` | `0` | Порядок перехода по Tab |
+
+## Variants
+
+### Horizontal (горизонтальное меню)
+
+Figma: `<MegaMenu>`, orientation=horizontal
+
+```html
+<extra-megamenu [model]="items"></extra-megamenu>
+```
+
+### Vertical (вертикальное меню)
+
+Figma: `<MegaMenu>`, orientation=vertical
+
+```html
+<extra-megamenu [model]="items" orientation="vertical"></extra-megamenu>
+```
+
+### Disabled (отключённое меню)
+
+Figma: `<MegaMenu>` (общий компонент; отключение задаётся в коде)
+
+```html
+<extra-megamenu [model]="items" [disabled]="true"></extra-megamenu>
+```
+
+## Slots
+
+Кастомный шаблон пункта меню задаётся через структурную директиву `[extraMegaMenuItem]` на `ng-template`. Шаблон получает контекст с пунктом (`$implicit`) и признаком наличия подменю (`hasSubmenu`). Если шаблон не задан, используется стандартная отрисовка пункта.
+
+```html
+<extra-megamenu [model]="items">
+  <ng-template extraMegaMenuItem let-item let-hasSubmenu="hasSubmenu">
+    <span>{{ item.label }}</span>
+  </ng-template>
+</extra-megamenu>
+```
+
+## Related
+
+- [ExtraButton](../button/button.figma.md) — кнопки в шаблонах пунктов меню
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+- [Иконки](../../figma-code-connect/icons.md) — иконки пунктов меню
+
+## Do / Don't
+
+**Do:**
+- Используйте для верхней навигации с большим числом сгруппированных разделов
+- Задавайте структуру меню через `[model]`, группируя ссылки в колонки
+- Используйте `orientation="vertical"` для бокового многоколоночного меню
+- Применяйте директиву `[extraMegaMenuItem]` для кастомной отрисовки пунктов
+
+**Don't:**
+- Не используйте `MegaMenu` для плоского меню без колонок — для этого подходит `Menubar`
+- Не используйте `MegaMenu` для каскадных подменю по уровням — для этого подходит `TieredMenu`
+- Не передавайте пустой `[model]` — меню окажется без пунктов
diff --git a/src/lib/components/menu/menu.figma.md b/src/lib/components/menu/menu.figma.md
new file mode 100644
index 00000000..4ffb53ad
--- /dev/null
+++ b/src/lib/components/menu/menu.figma.md
@@ -0,0 +1,85 @@
+---
+component: ExtraMenu
+selector: extra-menu
+import:
+  symbol: ExtraMenuComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '16005:21803'
+  componentKey: 'f8ce571000a0f4d615795f6ea2307b3b478964a7'
+  name: '<Menu>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraMenu` — компонент вертикального меню для навигации и действий. Принимает массив пунктов через `@Input() model` и отображает их списком; поддерживает разделители, иконки, группировку (вложенные `items`) и пункты с описанием (`caption`). Оборачивает PrimeNG `p-menu`.
+
+Компонент соответствует Figma-компоненту `<Menu>` (nodeId `16005:21803`) из библиотеки UI Kit (DS) v2.0. Figma-свойство `popup` напрямую маппируется в `@Input() popup`. Это не панель-навигация (`Menubar`), не многоуровневое меню (`TieredMenu`) и не широкое раскрывающееся меню (`MegaMenu`).
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `model` | `ExtraMenuModel[]` | `[]` | Массив пунктов меню (label, icon, command, url, separator, items, caption и др.) |
+| `popup` | `boolean` | `false` | Режим всплывающего меню — соответствует Figma-свойству `popup`. В этом режиме меню скрыто и показывается вызовом метода `toggle(event)` |
+
+Иконки пунктов задаются строковым CSS-классом в поле `icon` пункта `model`; доступные иконки — [icons.md](../../figma-code-connect/icons.md).
+
+## Variants
+
+### Inline (popup=false)
+
+Figma: `<Menu>`, popup=false — nodeId `16005:21806`
+
+Меню отображается на месте, в потоке документа.
+
+```html
+<extra-menu [model]="items"></extra-menu>
+```
+
+### Popup (popup=true)
+
+Figma: `<Menu>`, popup=true — nodeId `16005:21804`
+
+Меню скрыто и открывается рядом с триггером по вызову `toggle(event)` через ссылку на компонент.
+
+```html
+<extra-button label="Действия" variant="secondary" (click)="menuRef.toggle($event)"></extra-button>
+<extra-menu #menuRef [model]="items" [popup]="true"></extra-menu>
+```
+
+## Slots
+
+Для кастомного рендера пункта меню используется структурная директива `*extraMenuItem` (символ `ExtraMenuItemDirective`). Шаблон получает текущий пункт через контекст `let-item`; при отсутствии директивы применяется стандартный рендер пункта.
+
+```html
+<extra-menu [model]="items">
+  <ng-template extraMenuItem let-item>
+    <a class="p-menu-item-link" role="menuitem" tabindex="0">
+      <span class="p-menu-item-label">{{ item.label }}</span>
+    </a>
+  </ng-template>
+</extra-menu>
+```
+
+## Related
+
+- [ExtraButton](../button/button.figma.md) — частый триггер для popup-режима меню
+- [Иконки](../../figma-code-connect/icons.md) — CSS-классы иконок пунктов
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Передавайте пункты через `[model]`, описывая их декларативно в компоненте
+- Для popup-режима задавайте `[popup]="true"` и открывайте меню методом `toggle($event)` по ссылке на компонент
+- Используйте `separator: true` в пункте `model` для визуального разделения групп действий
+- Для нестандартного отображения пункта используйте директиву `*extraMenuItem` вместо переопределения стилей
+
+**Don't:**
+- Не используйте `ExtraMenu` для горизонтальной навигации — для неё предназначен `Menubar`
+- Не инлайньте CSS-классы иконок вручную — используйте справочник [icons.md](../../figma-code-connect/icons.md)
+- Не открывайте popup-меню вручную через DOM — используйте метод `toggle()`
diff --git a/src/lib/components/menubar/menubar.figma.md b/src/lib/components/menubar/menubar.figma.md
new file mode 100644
index 00000000..32b7b86b
--- /dev/null
+++ b/src/lib/components/menubar/menubar.figma.md
@@ -0,0 +1,104 @@
+---
+component: ExtraMenubar
+selector: extra-menubar
+import:
+  symbol: ExtraMenubarComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '16194:4260'
+  componentKey: '91c53c61603fc1a9169bb4bf411cf1af75d9bd20'
+  name: '<Menubar>'
+status: stable
+updated: '2026-06-23'
+---
+
+## Overview
+
+`ExtraMenubar` — горизонтальная навигационная панель верхнего уровня с поддержкой вложенных выпадающих подменю. Разделы задаются декларативной моделью `model`, каждый пункт — это переход или действие (`label`, `icon`, `command`, `url`), вложенность задаётся через `items[].items`. Оборачивает PrimeNG `p-menubar`.
+
+Компонент соответствует Figma-компоненту `<Menubar>` (nodeId `16194:4260`) из библиотеки UI Kit (DS) v2.0. В отличие от `MegaMenu` (многоколоночные панели подменю) и `Menu` (вертикальный popup действий), menubar предназначен для глобальной навигации по разделам в шапке приложения.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `model` | `ExtraMenuItem[]` | `[]` | Декларативная модель пунктов меню; вложенные подменю задаются через `items[].items`. Каждый пункт поддерживает `label`, `icon`, `command`, `url`, `disabled`, `separator`, `badge` и др. |
+
+## Variants
+
+### Horizontal (горизонтальная навигация)
+
+Figma: `<Menubar>`, orientation=horizontal — nodeId `16194:4261`
+
+```html
+<extra-menubar [model]="items"></extra-menubar>
+```
+
+### С иконками пунктов
+
+Иконка пункта задаётся в модели через поле `icon` (CSS-класс иконки; доступные иконки — [icons.md](../../figma-code-connect/icons.md)).
+
+```ts
+items: ExtraMenuItem[] = [
+  { label: 'Home', icon: 'ti ti-home' },
+  { label: 'Settings', icon: 'ti ti-settings' }
+];
+```
+
+### С вложенными подменю
+
+Подменю задаётся вложенным массивом `items`; у пункта с подменю отображается chevron.
+
+```ts
+items: ExtraMenuItem[] = [
+  {
+    label: 'Features',
+    icon: 'ti ti-star',
+    items: [
+      { label: 'Core', icon: 'ti ti-cpu' },
+      { label: 'UI Kit', icon: 'ti ti-palette' }
+    ]
+  }
+];
+```
+
+## Slots
+
+Кастомный рендер пункта меню задаётся через структурную директиву `[extraMenubarItem]` (symbol `ExtraMenubarItemDirective`). Шаблон получает контекст: `$implicit` (item типа `ExtraMenuItem`), `hasSubmenu` (есть ли вложенное подменю) и `root` (пункт верхнего уровня). При отсутствии директивы используется рендер по умолчанию.
+
+```html
+<extra-menubar [model]="items">
+  <ng-template extraMenubarItem let-item let-hasSubmenu="hasSubmenu" let-root="root">
+    <a class="p-menubar-item-link flex items-center gap-2">
+      @if (item.icon) {
+        <span [class]="'p-menubar-item-icon ' + item.icon"></span>
+      }
+      <span class="p-menubar-item-label">{{ item.label }}</span>
+      @if (hasSubmenu) {
+        <span [class]="root ? 'p-menubar-submenu-icon ti ti-chevron-down' : 'p-menubar-submenu-icon ti ti-chevron-right'"></span>
+      }
+    </a>
+  </ng-template>
+</extra-menubar>
+```
+
+## Related
+
+- [ExtraButton](../button/button.figma.md) — кнопка для действий вне навигации
+- [Иконки](../../figma-code-connect/icons.md) — доступные иконки пунктов (`ti ti-*`)
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Используйте для глобальной навигации по разделам в шапке приложения
+- Задавайте структуру через `model`, вкладывая подменю в `items[].items`
+- Используйте директиву `[extraMenubarItem]` для кастомного рендера пункта (бейдж, описание)
+- Задавайте иконки пунктов через поле `icon` из справочника [icons.md](../../figma-code-connect/icons.md)
+
+**Don't:**
+- Не используйте menubar для многоколоночных выпадающих панелей — для этого предназначен `MegaMenu`
+- Не используйте menubar как вертикальный popup действий — для этого предназначен `Menu`
+- Не инлайньте CSS-классы иконок вручную — используйте справочник [icons.md](../../figma-code-connect/icons.md)
+- Не дублируйте навигацию menubar с боковой навигацией на одном экране
diff --git a/src/lib/components/message/message.figma.md b/src/lib/components/message/message.figma.md
new file mode 100644
index 00000000..86ba7c14
--- /dev/null
+++ b/src/lib/components/message/message.figma.md
@@ -0,0 +1,121 @@
+---
+component: ExtraMessage
+selector: extra-message
+import:
+  symbol: ExtraMessageComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '15963:3163'
+  componentKey: '04f90e69c40005a0433f7c7d3e3840c011e27b9b'
+  name: '<Message>'
+status: stable
+updated: '2026-06-23'
+---
+
+## Overview
+
+`ExtraMessage` — компонент инлайн-сообщения со статусом (иконка + заголовок + подробный текст), встроенного в поток страницы: рядом с полем формы, у секции или как агрегированный фидбэк по валидации. Оборачивает PrimeNG `p-message` и подбирает иконку автоматически по `severity`.
+
+Компонент соответствует Figma-компоненту `<Message>` (nodeId `15963:3163`). Это инлайн-компонент: всплывающий toast вынесен в отдельный Figma-компонент `<Toast>` и здесь не покрывается.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `severity` | `'success' \| 'info' \| 'warn' \| 'error' \| 'secondary' \| 'contrast'` | `'info'` | Семантический акцент — соответствует Figma-свойству `severity` (`warn` ↔ Figma `warning`, `error` ↔ Figma `danger`) |
+| `summary` | `string` | `''` | Заголовок сообщения — соответствует основной строке текста в Figma |
+| `detail` | `string` | `''` | Подробный текст под заголовком — соответствует Figma-свойству `show-caption` |
+| `icon` | `string` | `undefined` | CSS-класс иконки; по умолчанию подбирается по `severity` — соответствует Figma-свойствам `change-icon-*`; доступные иконки — [icons.md](../../figma-code-connect/icons.md) |
+| `closable` | `boolean` | `false` | Показывать кнопку закрытия — соответствует Figma-свойству `show-close` |
+| `life` | `number` | `undefined` | Время автозакрытия в миллисекундах — соответствует Figma-свойству `timer` |
+
+Событие закрытия доступно через `@Output() onClose: EventEmitter<Event>`.
+
+Всплывающее уведомление (toast) вынесено в отдельный Figma-компонент `<Toast>` и в этом контракте не задаётся.
+
+## Variants
+
+### Info (информационное)
+
+Figma: `severity=info`
+
+```html
+<extra-message severity="info" summary="Информация" detail="Дополнительный текст"></extra-message>
+```
+
+### Success (успех)
+
+Figma: `severity=success`
+
+```html
+<extra-message severity="success" summary="Готово" detail="Операция выполнена"></extra-message>
+```
+
+### Warn (предупреждение)
+
+Figma: `severity=warning`
+
+```html
+<extra-message severity="warn" summary="Внимание" detail="Проверьте данные"></extra-message>
+```
+
+### Error / danger (ошибка)
+
+Figma: `severity=danger`
+
+```html
+<extra-message severity="error" summary="Ошибка" detail="Не удалось сохранить"></extra-message>
+```
+
+### С кнопкой закрытия (closable)
+
+Figma: `show-close=true`
+
+```html
+<extra-message
+  severity="info"
+  summary="Сообщение"
+  [closable]="true"
+  (onClose)="onClosed($event)"
+></extra-message>
+```
+
+### С автозакрытием (life)
+
+Figma: `timer=true`
+
+```html
+<extra-message severity="success" summary="Сохранено" [life]="3000"></extra-message>
+```
+
+## Slots
+
+Содержимое проектируется через безымянный `<ng-content>` — произвольная разметка внутри тега размещается под заголовком и подробным текстом.
+
+```html
+<extra-message severity="info" summary="Подсказка">
+  <a href="/docs">Подробнее в документации</a>
+</extra-message>
+```
+
+## Related
+
+- [Иконки](../../figma-code-connect/icons.md) — доступные иконки `severity` и `icon`
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены `severity`
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+- [ExtraButton](../button/button.figma.md) — кнопка закрытия использует общий контракт
+
+## Do / Don't
+
+**Do:**
+- Используйте `extra-message` для устойчивого инлайн-фидбэка рядом с формой, полем или секцией
+- Подбирайте `severity` по смыслу: `error` для ошибок, `warn` для предупреждений, `success` для подтверждений
+- Для закрываемого сообщения задавайте `[closable]="true"` и обрабатывайте `(onClose)`
+- Полагайтесь на автоподбор иконки по `severity`; переопределяйте `icon` только при необходимости — используйте справочник [icons.md](../../figma-code-connect/icons.md)
+
+**Don't:**
+- Не используйте инлайн-Message как всплывающий toast — для системных самозакрывающихся уведомлений предназначен отдельный компонент (Figma `<Toast>`)
+- Не инлайньте CSS-классы иконок вручную в обход справочника [icons.md](../../figma-code-connect/icons.md)
+- Не задавайте `[life]` для постоянного статуса секции — автозакрытие уместно только для временных подтверждений
+- Не дублируйте текст ошибки в `summary` и `detail` — заголовок краткий, подробности в `detail`
diff --git a/src/lib/components/metergroup/metergroup.figma.md b/src/lib/components/metergroup/metergroup.figma.md
new file mode 100644
index 00000000..a0ee4c4d
--- /dev/null
+++ b/src/lib/components/metergroup/metergroup.figma.md
@@ -0,0 +1,97 @@
+---
+component: ExtraMeterGroup
+selector: extra-metergroup
+import:
+  symbol: ExtraMeterGroupComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '222:1489'
+  componentKey: '5e667c21084e33270039bc3dfec1a77ef9ef63d2'
+  name: '<MeterGroup>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraMeterGroup` — компонент шкалы измерения, отображающий несколько значений-сегментов на одной общей шкале (`role=meter`) в известном диапазоне. Каждый сегмент имеет своё значение, цвет, иконку и подпись; компонент показывает распределение или заполненность по категориям и неинтерактивен. Оборачивает PrimeNG `p-metergroup`.
+
+Компонент соответствует Figma-компоненту `<MeterGroup>` (nodeId `222:1489`). Figma-свойства `label-position` и `label-orientation` маппируются на Angular-инпуты `labelPosition` и `labelOrientation`; ориентация самой шкалы задаётся инпутом `orientation`.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `value` | `ExtraMeterItem[]` | `[]` | Массив сегментов шкалы; каждый элемент задаёт `value`, `color`, `icon` и `label` |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Ориентация шкалы — горизонтальная или вертикальная |
+| `labelPosition` | `'start' \| 'end'` | `'end'` | Позиция блока подписей относительно шкалы — соответствует Figma-свойству `label-position` |
+| `labelOrientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Раскладка списка подписей — соответствует Figma-свойству `label-orientation` |
+
+Тип `ExtraMeterItem` реэкспортирует PrimeNG `MeterItem`: поле `value` (число) обязательно, поля `label`, `color` и `icon` опциональны. CSS-классы иконок берутся из справочника [icons.md](../../figma-code-connect/icons.md), цвета сегментов — из токенов [tokens.md](../../figma-code-connect/tokens.md).
+
+## Variants
+
+### Горизонтальная шкала (по умолчанию)
+
+Figma: `<MeterGroup>`, label-position=end, label-orientation=horizontal — nodeId `222:1489`
+
+```html
+<extra-metergroup [value]="meterItems"></extra-metergroup>
+```
+
+### Вертикальная шкала
+
+Figma: `<MeterGroup>` — orientation в коде; раскладка подписей задаётся отдельно
+
+```html
+<extra-metergroup orientation="vertical" [value]="meterItems"></extra-metergroup>
+```
+
+### Подписи перед шкалой (label-position=start)
+
+Figma: `<MeterGroup>`, label-position=start, label-orientation=horizontal
+
+```html
+<extra-metergroup labelPosition="start" [value]="meterItems"></extra-metergroup>
+```
+
+### Вертикальная раскладка подписей (label-orientation=vertical)
+
+Figma: `<MeterGroup>`, label-position=end, label-orientation=vertical
+
+```html
+<extra-metergroup labelOrientation="vertical" [value]="meterItems"></extra-metergroup>
+```
+
+### Несколько метрик (многосегментная шкала)
+
+Figma: `<MeterGroup>` с несколькими видимыми сегментами (`show-item-*`)
+
+```html
+<extra-metergroup [value]="storageBreakdown"></extra-metergroup>
+```
+
+## Slots
+
+Не используются. Сегменты и их подписи задаются данными через `@Input() value` (`ExtraMeterItem[]`).
+
+## Related
+
+- [Иконки](../../figma-code-connect/icons.md) — доступные иконки сегментов (`MeterItem.icon`)
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены сегментов (`MeterItem.color`)
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+- [ExtraButton](../button/button.figma.md) — пример контракта со строковыми вариантами
+
+## Do / Don't
+
+**Do:**
+- Передавайте данные сегментов через `[value]` массивом `ExtraMeterItem[]`
+- Используйте `orientation="vertical"` для компактных вертикальных макетов
+- Задавайте `labelPosition` и `labelOrientation` для управления раскладкой подписей
+- Для цветов сегментов используйте токены [tokens.md](../../figma-code-connect/tokens.md), для иконок — [icons.md](../../figma-code-connect/icons.md)
+
+**Don't:**
+- Не используйте `ExtraMeterGroup` для прогресса задачи во времени — для этого предназначен ProgressBar
+- Не применяйте компонент для интерактивного ввода значения — он только отображает данные
+- Не инлайньте цвета и CSS-классы иконок вручную — используйте справочники токенов и иконок
diff --git a/src/lib/components/paginator/paginator.figma.md b/src/lib/components/paginator/paginator.figma.md
new file mode 100644
index 00000000..a5b7a7c6
--- /dev/null
+++ b/src/lib/components/paginator/paginator.figma.md
@@ -0,0 +1,118 @@
+---
+component: ExtraPaginator
+selector: extra-paginator
+import:
+  symbol: ExtraPaginatorComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '1284:1732'
+  componentKey: '5c0a5f38512dbb5c809f815f42a3eb6f4af88c0a'
+  name: '<Paginator>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraPaginatorComponent` — компонент постраничной навигации по большим спискам и таблицам. Разбивает данные на страницы, отображает кнопки prev/next, номера страниц и, опционально, выбор размера страницы, поле прыжка на страницу и текст с текущей позицией. Оборачивает PrimeNG `p-paginator`.
+
+Компонент соответствует Figma-компоненту `<Paginator>` (component set, nodeId `1284:1732`, fileKey `Khh7arsuXss3ncqy1Dz3OZ`, библиотека «UI Kit (DS) v2.0»). Опциональные блоки управляются Figma-свойствами `show-jump` (поле прыжка на страницу), `show-dropdown` (выпадающий выбор размера страницы) и осью `template`.
+
+Компонент событийный: текущая страница не хранится через `ControlValueAccessor`, а сообщается наружу событием `(onPageChange)`. Состояние страницы задаётся входами `first` и `rows`.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `first` | `number` | `0` | Индекс первой записи на текущей странице (смещение) |
+| `rows` | `number` | `10` | Количество строк на странице |
+| `totalRecords` | `number` | `0` | Общее количество записей для расчёта числа страниц |
+| `rowsPerPageOptions` | `any[] \| undefined` | `undefined` | Набор вариантов размера страницы — соответствует Figma-свойству `show-dropdown` |
+| `currentPageReportTemplate` | `string` | `'{currentPage} из {totalPages}'` | Шаблон текста текущей позиции (плейсхолдеры `{currentPage}`, `{totalPages}` и др.) |
+| `showCurrentPageReport` | `boolean` | `false` | Показывать текст с текущей страницей и общим числом |
+| `showFirstLastIcon` | `boolean` | `true` | Показывать кнопки перехода на первую и последнюю страницу |
+| `showJumpToPageDropdown` | `boolean` | `false` | Показывать выпадающий список для прыжка на страницу |
+| `showJumpToPageInput` | `boolean` | `false` | Показывать поле ввода для прыжка на страницу — соответствует Figma-свойству `show-jump` |
+| `showPageLinks` | `boolean` | `true` | Показывать номера страниц |
+| `pageLinkSize` | `number` | `5` | Количество одновременно отображаемых ссылок на страницы |
+| `alwaysShow` | `boolean` | `true` | Показывать пагинатор даже при единственной странице |
+| `(onPageChange)` | `EventEmitter<ExtraPaginatorState>` | — | Событие смены страницы; содержит `page`, `first`, `rows`, `pageCount` |
+
+## Variants
+
+### Default (базовая навигация)
+
+Figma: `<Paginator>`, template=false, show-jump=false, show-dropdown=false — nodeId `1284:1732`
+
+```html
+<extra-paginator
+  [totalRecords]="120"
+  [rows]="10"
+  [first]="0"
+  (onPageChange)="onPageChange($event)"
+></extra-paginator>
+```
+
+### С текстом текущей страницы (show-current-page-report)
+
+Figma: `<Paginator>`, template=false
+
+```html
+<extra-paginator
+  [totalRecords]="120"
+  [rows]="10"
+  [showCurrentPageReport]="true"
+  currentPageReportTemplate="{currentPage} из {totalPages}"
+  (onPageChange)="onPageChange($event)"
+></extra-paginator>
+```
+
+### С выбором размера страницы (show-dropdown)
+
+Figma: `<Paginator>`, show-dropdown=true
+
+```html
+<extra-paginator
+  [totalRecords]="120"
+  [rows]="10"
+  [rowsPerPageOptions]="[10, 20, 50]"
+  (onPageChange)="onPageChange($event)"
+></extra-paginator>
+```
+
+### С полем прыжка на страницу (show-jump)
+
+Figma: `<Paginator>`, show-jump=true
+
+```html
+<extra-paginator
+  [totalRecords]="120"
+  [rows]="10"
+  [showJumpToPageInput]="true"
+  (onPageChange)="onPageChange($event)"
+></extra-paginator>
+```
+
+## Slots
+
+Не используются. Состав пагинатора определяется входными свойствами; содержимое не проецируется.
+
+## Related
+
+- [Select](../select/select.figma.md) — выпадающий список (используется для выбора размера страницы)
+- [Button](../button/button.figma.md) — кнопки навигации prev/next
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Управляйте текущей страницей через входы `first` и `rows`, обновляя их в обработчике `(onPageChange)`.
+- Задавайте `totalRecords` — без него число страниц не рассчитывается.
+- Включайте `[rowsPerPageOptions]` только когда пользователю действительно нужно менять размер страницы.
+- Используйте `currentPageReportTemplate` вместе с `[showCurrentPageReport]="true"` для отображения позиции.
+
+**Don't:**
+- Не ожидайте двусторонней привязки страницы: компонент событийный, синхронизируйте `first`/`rows` вручную в `(onPageChange)`.
+- Не задавайте `pageLinkSize` больше реального числа страниц — лишние ссылки не появятся.
+- Не отключайте `alwaysShow`, если в макете пагинатор должен оставаться видимым при единственной странице.
diff --git a/src/lib/components/panelmenu/panelmenu.figma.md b/src/lib/components/panelmenu/panelmenu.figma.md
new file mode 100644
index 00000000..83b1e413
--- /dev/null
+++ b/src/lib/components/panelmenu/panelmenu.figma.md
@@ -0,0 +1,88 @@
+---
+component: ExtraPanelMenu
+selector: extra-panelmenu
+import:
+  symbol: ExtraPanelMenuComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '16194:4870'
+  componentKey: 'e1101a767cb5ae9a77bb06c11ea258da1b91a503'
+  name: '<PanelMenu>'
+status: stable
+updated: '2026-06-23'
+---
+
+## Overview
+
+`ExtraPanelMenu` — вертикальное аккордеон-меню с вложенными разделами для боковой навигации. Пункты верхнего уровня отображаются как панели с chevron, раскрываются по клику и показывают вложенные пункты (рекурсивно). Оборачивает PrimeNG `p-panelmenu`.
+
+Компонент соответствует Figma-компоненту `<PanelMenu>` (nodeId `16194:4870`) из библиотеки UI Kit (DS) v2.0. Структура меню задаётся декларативно через модель пунктов, а не через слоты. В отличие от `Accordion` (раскрытие произвольного контента) и `Menubar` (горизонтальная навигация), `ExtraPanelMenu` предназначен для вертикальной иерархической навигации с раскрываемыми разделами.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `model` | `ExtraMenuItem[]` | `[]` | Иерархическая модель пунктов меню; вложенность задаётся через `items` каждого пункта |
+| `multiple` | `boolean` | `false` | Режим раскрытия: `false` — одновременно раскрыта одна панель (single-open), `true` — несколько (multiple-open) |
+| `tabindex` | `number \| undefined` | `undefined` | Порядок перехода по Tab |
+
+Каждый элемент `ExtraMenuItem` поддерживает поля `label`, `icon`, `items` (вложенные пункты), `disabled`, `expanded`, `url`, `routerLink`, `command` и другие. Подробности — в Slots.
+
+## Variants
+
+### Single-open (одиночное раскрытие)
+
+Figma: `<PanelMenu>`, режим single-open — nodeId `16194:4870`
+
+```html
+<extra-panelmenu [model]="items"></extra-panelmenu>
+```
+
+### Multiple-open (множественное раскрытие)
+
+Figma: `<PanelMenu>`, режим multiple-open — nodeId `16194:4870`
+
+```html
+<extra-panelmenu [model]="items" [multiple]="true"></extra-panelmenu>
+```
+
+## Slots
+
+Не используются. Содержимое меню задаётся декларативно через `@Input() model` — массив `ExtraMenuItem`. Вложенные разделы описываются полем `items` каждого пункта, иконки — полем `icon` (значения из [icons.md](../../figma-code-connect/icons.md)).
+
+```ts
+import { ExtraMenuItem } from '@cdek-it/angular-ui-kit';
+
+const items: ExtraMenuItem[] = [
+  {
+    label: 'Отправления',
+    icon: 'ti ti-package',
+    items: [
+      { label: 'Новые' },
+      { label: 'В пути' },
+      { label: 'Возвраты', items: [{ label: 'Ожидают' }, { label: 'Завершённые' }] }
+    ]
+  },
+  { label: 'Маршруты', icon: 'ti ti-route' },
+  { label: 'Настройки', disabled: true }
+];
+```
+
+## Related
+
+- [Иконки](../../figma-code-connect/icons.md) — доступные иконки для поля `icon` пунктов меню
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Используйте для вертикальной иерархической навигации в сайдбаре с раскрываемыми разделами
+- Группируйте пункты по категориям через поле `items` вложенных `ExtraMenuItem`
+- Используйте `[multiple]="true"`, когда пользователю нужно держать раскрытыми несколько разделов одновременно
+- Задавайте `disabled: true` у пункта модели, чтобы сделать раздел неактивным
+
+**Don't:**
+- Не используйте `ExtraPanelMenu` для горизонтальной навигации — для этого предназначен `Menubar`
+- Не применяйте его для раскрытия произвольного контента вместо навигации — для этого предназначен `Accordion`
+- Не передавайте плоский список без вложенности там, где достаточно простого меню действий
diff --git a/src/lib/components/password/password.figma.md b/src/lib/components/password/password.figma.md
new file mode 100644
index 00000000..4d0a06d5
--- /dev/null
+++ b/src/lib/components/password/password.figma.md
@@ -0,0 +1,204 @@
+---
+component: ExtraPassword
+selector: extra-password
+import:
+  symbol: ExtraPasswordComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '375:1701'
+  componentKey: '54106946f181dd41079e1c4aafa63165cf07e065'
+  name: '<Password>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraPasswordComponent` — поле ввода пароля: маскирует символы, даёт toggle показа (reveal) и опциональный индикатор надёжности. Оборачивает PrimeNG `p-password`, реализует `ControlValueAccessor` и работает с `[(ngModel)]` и `[formControl]` «из коробки».
+
+Компонент соответствует Figma-компоненту `<Password>` (nodeId `375:1701`, fileKey `Khh7arsuXss3ncqy1Dz3OZ`, библиотека «UI Kit (DS) v2.0»). Содержимое индикатора надёжности и подсказок настраивается структурными директивами `[extraPasswordHeader]` и `[extraPasswordFooter]`.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `[(ngModel)]` / `[formControl]` | `string \| null` | `null` | Значение поля через ControlValueAccessor — соответствует Figma-свойству `text-input` |
+| `feedback` | `boolean` | `true` | Показывать ли overlay-индикатор надёжности пароля |
+| `toggleMask` | `boolean` | `false` | Показывать ли иконку-переключатель видимости (reveal) — соответствует Figma-свойству `show-eye` |
+| `placeholder` | `string \| undefined` | `undefined` | Подсказка при пустом поле — соответствует Figma-свойствам `text-placeholder` / `has-placeholder` |
+| `size` | `'small' \| 'base' \| 'large' \| 'xlarge'` | `'base'` | Размер поля; маппируется на классы PrimeNG `p-inputtext-sm` / `p-inputtext-lg` |
+| `variant` | `'filled' \| 'outlined'` | `'outlined'` | Стиль оформления поля |
+| `fluid` | `boolean` | `false` | Растягивает поле на всю ширину контейнера |
+| `invalid` | `boolean` | `false` | Невалидное состояние — соответствует Figma-состоянию `state=danger` |
+| `disabled` | `boolean` | `false` | Отключённое состояние — управляется через `FormControl.disable()` или `ControlValueAccessor.setDisabledState`; соответствует Figma-состоянию `state=disabled` |
+| `floatLabel` | `boolean` | `false` | Плавающий label поверх поля — соответствует Figma-свойству `has-floatlabel` |
+| `label` | `string` | `''` | Текст плавающего label (используется при `floatLabel=true`) |
+| `promptLabel` | `string` | `'Введите пароль'` | Текст-подсказка в индикаторе надёжности при пустом поле |
+| `weakLabel` | `string` | `'Слабый'` | Подпись слабого уровня надёжности |
+| `mediumLabel` | `string` | `'Средний'` | Подпись среднего уровня надёжности |
+| `strongLabel` | `string` | `'Надёжный'` | Подпись надёжного уровня |
+| `inputId` | `string \| undefined` | `undefined` | `id` нативного input — связывает поле с label |
+| `inputStyleClass` | `string \| undefined` | `undefined` | Дополнительные CSS-классы нативного input |
+| `ariaLabel` | `string \| undefined` | `undefined` | `aria-label` для доступности |
+| `ariaLabelledBy` | `string \| undefined` | `undefined` | `aria-labelledby` для доступности |
+| `appendTo` | `any` | `'body'` | Куда в DOM монтируется overlay индикатора надёжности |
+| `autofocus` | `boolean` | `false` | Автофокус на поле при инициализации |
+| `(onFocus)` | `EventEmitter<Event>` | — | Событие получения фокуса |
+| `(onBlur)` | `EventEmitter<Event>` | — | Событие потери фокуса |
+
+## Variants
+
+### Default / Base (базовое поле с индикатором надёжности)
+
+Figma: `<Password>`, state=default, has-placeholder=true, has-floatlabel=false — nodeId `375:1743`
+
+```html
+<extra-password
+  placeholder="Введите пароль"
+  [(ngModel)]="password"
+  name="password"
+></extra-password>
+```
+
+### С переключателем видимости (toggleMask / show-eye)
+
+Figma: `<Password>`, state=default, show-eye=true — nodeId `375:1743`
+
+```html
+<extra-password
+  placeholder="Введите пароль"
+  [toggleMask]="true"
+  [(ngModel)]="password"
+  name="password"
+></extra-password>
+```
+
+### Без индикатора надёжности (feedback=false)
+
+Figma: `<Password>`, state=default — nodeId `375:1743`
+
+```html
+<extra-password
+  placeholder="Текущий пароль"
+  [feedback]="false"
+  [toggleMask]="true"
+  [(ngModel)]="password"
+  name="currentPassword"
+></extra-password>
+```
+
+### Disabled (отключённое поле)
+
+Figma: `<Password>`, state=disabled, has-placeholder=true, has-floatlabel=false — nodeId `375:1702`
+
+```html
+<extra-password
+  placeholder="Недоступно"
+  [formControl]="disabledControl"
+></extra-password>
+```
+
+```ts
+disabledControl = new FormControl({ value: '', disabled: true });
+```
+
+### С реактивной формой и валидацией (state=danger)
+
+Figma: `<Password>`, state=danger, has-placeholder=true, has-floatlabel=false — nodeId `375:1712`
+
+```ts
+passwordControl = new FormControl('', [Validators.required, Validators.minLength(8)]);
+```
+
+```html
+<extra-password
+  placeholder="Минимум 8 символов"
+  [invalid]="passwordControl.invalid && passwordControl.touched"
+  [formControl]="passwordControl"
+></extra-password>
+```
+
+### С плавающим label (floatLabel / has-floatlabel)
+
+Figma: `<Password>`, state=default, has-placeholder=false, has-floatlabel=true — nodeId `13986:10640`
+
+```html
+<extra-password
+  [floatLabel]="true"
+  label="Пароль"
+  [(ngModel)]="password"
+  name="password"
+></extra-password>
+```
+
+### Fluid / Large (на всю ширину, большой размер)
+
+Figma: `<Password>`, state=default — nodeId `375:1743`
+
+```html
+<extra-password
+  size="large"
+  [fluid]="true"
+  placeholder="Широкое поле"
+  [(ngModel)]="password"
+  name="password"
+></extra-password>
+```
+
+## Slots
+
+| Слот | Синтаксис | Описание |
+|------|-----------|---------|
+| Заголовок индикатора | `<ng-template extraPasswordHeader>` | Содержимое над списком требований в overlay надёжности; импортируйте `ExtraPasswordHeaderDirective` из `'@cdek-it/angular-ui-kit'` |
+| Футер индикатора | `<ng-template extraPasswordFooter>` | Содержимое под индикатором надёжности (список правил, ссылки); импортируйте `ExtraPasswordFooterDirective` из `'@cdek-it/angular-ui-kit'` |
+
+Директивы `ExtraPasswordHeaderDirective` и `ExtraPasswordFooterDirective` экспортируются из `@cdek-it/angular-ui-kit` и объявляются как `standalone: true` — добавляйте их в массив `imports` компонента отдельно от `ExtraPasswordComponent`. Слоты проецируются только при `feedback=true`.
+
+```html
+<extra-password
+  placeholder="Придумайте пароль"
+  [(ngModel)]="password"
+  name="newPassword"
+>
+  <ng-template extraPasswordHeader>
+    <span class="font-semibold">Требования к паролю</span>
+  </ng-template>
+  <ng-template extraPasswordFooter>
+    <ul>
+      <li>Минимум 8 символов</li>
+      <li>Хотя бы одна цифра</li>
+    </ul>
+  </ng-template>
+</extra-password>
+```
+
+```ts
+import {
+  ExtraPasswordComponent,
+  ExtraPasswordHeaderDirective,
+  ExtraPasswordFooterDirective
+} from '@cdek-it/angular-ui-kit';
+```
+
+## Related
+
+- [InputText](../inputtext/inputtext.figma.md) — однострочное текстовое поле без маскирования
+- [Button](../button/button.figma.md) — кнопка отправки формы аутентификации
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены состояний поля
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Используйте `[(ngModel)]` или `[formControl]` — компонент реализует `ControlValueAccessor` и именно через них передаётся значение.
+- Управляйте состоянием `disabled` через `FormControl.disable()` / `FormControl.enable()` — это сохраняет dirty/touched-флаги.
+- Включайте `[toggleMask]="true"`, чтобы дать пользователю возможность сверить введённый пароль.
+- Включайте `[feedback]="true"` на экранах регистрации и смены пароля; для поля «текущий пароль» при входе ставьте `[feedback]="false"`.
+- Локализуйте `promptLabel`, `weakLabel`, `mediumLabel`, `strongLabel` под язык интерфейса.
+
+**Don't:**
+- Не подменяйте `value` через прямой DOM — теряется `dirty`-state и Angular-реактивность.
+- Не задавайте `[disabled]="true"` для управления формой через шаблон, если используете реактивные формы — управляйте состоянием через `FormControl`.
+- Не используйте поле без `[(ngModel)]` / `[formControl]` — без привязки значение не синхронизируется с моделью.
+- Не используйте `extra-password` для одноразовых кодов — для этого предназначен InputOTP.
diff --git a/src/lib/components/popover/popover.figma.md b/src/lib/components/popover/popover.figma.md
new file mode 100644
index 00000000..fec1539e
--- /dev/null
+++ b/src/lib/components/popover/popover.figma.md
@@ -0,0 +1,106 @@
+---
+component: ExtraPopover
+selector: extra-popover
+import:
+  symbol: ExtraPopoverComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '920:1239'
+  componentKey: 'd4a07e3a7dd6a8713f2fe0dfa8615959668f2896'
+  name: '<Popover>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraPopoverComponent` — немодальная всплывающая панель с произвольным (часто интерактивным) содержимым, привязанная к триггеру. Оборачивает PrimeNG `p-popover` и проецирует внутрь любой контент через `<ng-content>`. Фон страницы остаётся активным, фокус не блокируется.
+
+Компонент соответствует Figma-компоненту `<Popover>` (nodeId `920:1239`, fileKey `Khh7arsuXss3ncqy1Dz3OZ`, библиотека «UI Kit (DS) v2.0»). Открытие выполняется императивно: получите ссылку на компонент через template reference variable и вызовите метод `toggle(event)` из обработчика клика по триггеру. В отличие от `Tooltip` (read-only текст по hover) и `Dialog` (блокирующее модальное по центру) popover показывает интерактивный контент у элемента по клику.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `dismissable` | `boolean` | `true` | Закрывать панель при клике вне её области |
+| `appendTo` | `string \| HTMLElement` | `'body'` | Куда в DOM монтируется оверлей — `'body'`, `'self'` или CSS-селектор/элемент |
+
+> Открытие и закрытие выполняется методом `toggle(event: Event)`: панель не имеет `@Input` видимости, её состоянием управляет триггер. Figma-свойства `position` (`top` / `bottom`) и `aligment` (`left` / `center` / `right`) задают сторону и выравнивание панели относительно триггера в макете; в коде позиционирование рассчитывается автоматически от события клика.
+
+## Variants
+
+### Открытие по кнопке (базовый)
+
+Figma: `<Popover>`, position=top, aligment=left — nodeId `533:137`
+
+```html
+<extra-button label="Показать" (click)="popover.toggle($event)"></extra-button>
+<extra-popover #popover appendTo="self">
+  <p>Содержимое popover.</p>
+</extra-popover>
+```
+
+```ts
+import { ExtraPopoverComponent, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
+import { ViewChild } from '@angular/core';
+
+// В компоненте:
+@ViewChild('popover') popover!: ExtraPopoverComponent;
+```
+
+### С расширенным содержимым (заголовок и описание)
+
+Figma: `<Popover>`, position=bottom, aligment=left — nodeId `920:1172`
+
+```html
+<extra-button label="Подробнее" (click)="popover.toggle($event)"></extra-button>
+<extra-popover #popover appendTo="self">
+  <div class="flex flex-col gap-2">
+    <span class="font-semibold">Заголовок</span>
+    <p class="text-sm">Произвольный контент внутри панели: текст, ссылки, форма.</p>
+  </div>
+</extra-popover>
+```
+
+```ts
+import { ExtraPopoverComponent, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
+```
+
+### Без закрытия по клику вне области (dismissable=false)
+
+Figma: `<Popover>` (общий компонент; поведение задаётся в коде)
+
+```html
+<extra-button label="Открыть" (click)="popover.toggle($event)"></extra-button>
+<extra-popover #popover [dismissable]="false">
+  <p>Панель закрывается только повторным кликом по триггеру.</p>
+</extra-popover>
+```
+
+## Slots
+
+| Слот | Синтаксис | Описание |
+|------|-----------|---------|
+| Содержимое (default) | `<ng-content>` | Произвольное содержимое панели — текст, ссылки, кнопки, небольшая форма. Проецируется без имени между тегами `<extra-popover>` |
+
+Именованные слоты не используются: вся проекция контента идёт через единственный безымянный `<ng-content>`.
+
+## Related
+
+- [Button](../button/button.figma.md) — типичный триггер открытия панели
+- [Dialog](../dialog/dialog.figma.md) — блокирующее модальное окно по центру для тяжёлых подзадач
+- [Tooltip](../tooltip/tooltip.figma.md) — read-only текстовая подсказка по hover
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Открывайте панель методом `toggle($event)` из обработчика клика по триггеру, передавая событие — оно нужно для расчёта позиции.
+- Используйте `appendTo="self"`, когда триггер находится в контейнере с `position: relative`, чтобы панель позиционировалась рядом.
+- Размещайте в панели интерактивный контент: ссылки, вторичные действия, небольшие формы.
+
+**Don't:**
+- Не используйте popover для критичной информации, которая должна быть видна постоянно — для этого подходит inline-сообщение.
+- Не помещайте в panel read-only текст-подсказку — для коротких пояснений по hover используйте `Tooltip`.
+- Не отключайте `dismissable` без необходимости — пользователи ожидают закрытие кликом вне панели.
diff --git a/src/lib/components/progressbar/progressbar.figma.md b/src/lib/components/progressbar/progressbar.figma.md
new file mode 100644
index 00000000..a7f7417c
--- /dev/null
+++ b/src/lib/components/progressbar/progressbar.figma.md
@@ -0,0 +1,76 @@
+---
+component: ExtraProgressBar
+selector: extra-progressbar
+import:
+  symbol: ExtraProgressBarComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '113:1004'
+  componentKey: 'd5a0ce52cb63f14e227643dfbe424a0693d40747'
+  name: '<ProgressBar>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraProgressBar` — линейный индикатор прогресса задачи: горизонтальный трек с заполняющимся баром, отображающий долю выполнения длительной операции (0–100). Оборачивает PrimeNG `p-progressbar`.
+
+Компонент соответствует Figma-компоненту `<ProgressBar>` (nodeId `113:1004`). Figma-свойство `progress` маппируется на инпут `value`, а `hasValue` — на `showValue` (см. раздел Props mapping).
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `value` | `number` | `0` | Доля выполнения операции (0–100) — соответствует Figma-свойству `progress` |
+| `mode` | `'determinate' \| 'indeterminate'` | `'determinate'` | Режим отображения: с известным процентом или анимированный без значения |
+| `showValue` | `boolean` | `true` | Показывать числовое значение поверх трека — соответствует Figma-свойству `hasValue` |
+
+## Variants
+
+### Determinate (с известным процентом)
+
+Figma: `<ProgressBar>`, progress=50, hasValue=true
+
+```html
+<extra-progressbar [value]="50"></extra-progressbar>
+```
+
+### Determinate без числовой метки
+
+Figma: `<ProgressBar>`, progress=50, hasValue=false
+
+```html
+<extra-progressbar [value]="50" [showValue]="false"></extra-progressbar>
+```
+
+### Indeterminate (анимированный, без значения)
+
+Figma: `<ProgressBar>`, mode=indeterminate — анимированная активность без конкретной доли выполнения
+
+```html
+<extra-progressbar mode="indeterminate"></extra-progressbar>
+```
+
+## Slots
+
+Не используются. Числовое значение формируется компонентом по `value` и управляется через `showValue`.
+
+## Related
+
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+- [ExtraButton](../button/button.figma.md) — пример компонента с маппингом Figma-вариантов
+
+## Do / Don't
+
+**Do:**
+- Используйте `mode="determinate"` с заданным `[value]`, когда процент выполнения известен
+- Используйте `mode="indeterminate"` для фоновой активности без измеримого прогресса
+- Скрывайте числовую метку через `[showValue]="false"`, когда процент не нужен визуально
+- Держите `value` в диапазоне 0–100
+
+**Don't:**
+- Не задавайте `[value]` в режиме `mode="indeterminate"` — доля выполнения там не отображается
+- Не используйте `ExtraProgressBar` для коротких операций без процента — для них предназначен круговой индикатор (ProgressSpinner)
+- Не передавайте `value` вне диапазона 0–100
diff --git a/src/lib/components/progressspinner/progressspinner.figma.md b/src/lib/components/progressspinner/progressspinner.figma.md
new file mode 100644
index 00000000..28f7134c
--- /dev/null
+++ b/src/lib/components/progressspinner/progressspinner.figma.md
@@ -0,0 +1,97 @@
+---
+component: ExtraProgressSpinner
+selector: extra-progressspinner
+import:
+  symbol: ExtraProgressSpinnerComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '1219:3101'
+  componentKey: '1ab76ee6c518796317b9e0f4634217b61bd553c3'
+  name: '<ProgressSpinner>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraProgressSpinner` — круговой индикатор загрузки неопределённой длительности: вращающаяся дуга сообщает, что процесс идёт, но не показывает процент выполнения. Оборачивает PrimeNG `p-progressSpinner` и добавляет фиксированные размеры и переключение между многоцветным и монохромным режимами.
+
+Компонент соответствует Figma-компоненту `<ProgressSpinner>` (nodeId `1219:3101`). Figma-свойство `size` маппируется на Angular-инпут `size`, а Figma-свойство `fill` (`primary` / `white`) — на режим окраски (`multicolor`). Figma-свойство `keyframes` отражает фазы анимации и не имеет соответствия в коде.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `size` | `'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` | Размер спиннера — соответствует Figma-свойству `size` (`sm` / `md` / `lg` / `xl`) |
+| `multicolor` | `boolean` | `true` | Многоцветная анимация; `false` — монохромный режим. Связано с Figma-свойством `fill` (`primary` / `white`) |
+| `strokeWidth` | `string` | `'2'` | Толщина линии дуги (передаётся в SVG `stroke-width`) |
+| `fill` | `string` | `'none'` | Цвет заливки внутренней области круга (SVG `fill`) |
+| `animationDuration` | `string` | `'2s'` | Длительность одной итерации анимации вращения |
+| `ariaLabel` | `string \| undefined` | `undefined` | Метка для программ экранного доступа |
+
+## Variants
+
+### Small (маленький размер)
+
+Figma: `<ProgressSpinner>`, size=sm
+
+```html
+<extra-progressspinner size="small"></extra-progressspinner>
+```
+
+### Medium (средний размер, по умолчанию)
+
+Figma: `<ProgressSpinner>`, size=md
+
+```html
+<extra-progressspinner></extra-progressspinner>
+```
+
+### Large (большой размер)
+
+Figma: `<ProgressSpinner>`, size=lg
+
+```html
+<extra-progressspinner size="large"></extra-progressspinner>
+```
+
+### XLarge (увеличенный размер)
+
+Figma: `<ProgressSpinner>`, size=xl
+
+```html
+<extra-progressspinner size="xlarge"></extra-progressspinner>
+```
+
+### Monochrome (монохромный режим)
+
+Figma: `<ProgressSpinner>`, fill=white — одноцветная дуга вместо многоцветной анимации
+
+```html
+<extra-progressspinner [multicolor]="false"></extra-progressspinner>
+```
+
+## Slots
+
+Не используются. Компонент рендерит только индикатор и не принимает проектируемое содержимое.
+
+## Related
+
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены дуги и режима `fill`
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+- [ExtraButton](../button/button.figma.md) — кнопка с состоянием `loading`, использующим встроенный спиннер
+
+## Do / Don't
+
+**Do:**
+- Используйте спиннер для действий с неизвестной длительностью (порог ~1–3с) и держите один индикатор на экран
+- Задавайте `[multicolor]="false"` для монохромного режима на цветной подложке (Figma `fill=white`)
+- Для доступности указывайте `ariaLabel`, описывающий выполняемую операцию
+- Подбирайте `size` под контекст: меньшие значения — внутри кнопок и инпутов
+
+**Don't:**
+- Не используйте спиннер для измеримого прогресса к цели — для этого предназначен линейный ProgressBar
+- Не заменяйте спиннером каркас-плейсхолдер (Skeleton) при загрузке разметки страницы
+- Не инлайньте значения цветов вручную — опирайтесь на токены [tokens.md](../../figma-code-connect/tokens.md)
+- Не размещайте несколько спиннеров одновременно в одной области
diff --git a/src/lib/components/radiobutton/radiobutton.figma.md b/src/lib/components/radiobutton/radiobutton.figma.md
new file mode 100644
index 00000000..8c1d2e4c
--- /dev/null
+++ b/src/lib/components/radiobutton/radiobutton.figma.md
@@ -0,0 +1,163 @@
+---
+component: ExtraRadiobutton
+selector: extra-radiobutton
+import:
+  symbol: ExtraRadiobuttonComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '17:13535'
+  componentKey: 'b2f1d57bdcaefad98286b9316272c0b64bb268d8'
+  name: '<RadioButton>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraRadiobutton` — радиокнопка для выбора ровно одного варианта из взаимоисключающей группы. Внутри группы радиокнопки объединяются общим `name`, выбор одиночный, снять выбор нельзя. Оборачивает PrimeNG `p-radiobutton` и реализует `ControlValueAccessor`, поэтому работает с `[(ngModel)]` и реактивными формами (`formControl` / `formControlName`).
+
+Компонент соответствует Figma-компоненту `<RadioButton>` (nodeId `17:13535`) с VARIANT-свойствами `state` (default, focus, hover, danger, disabled) и `checked` (false, true).
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `value` | `any` | `null` | Значение, которое получит модель при выборе этой радиокнопки |
+| `name` | `string \| undefined` | `undefined` | Имя группы; одинаковое значение объединяет радиокнопки во взаимоисключающую группу |
+| `disabled` | `boolean` | `false` | Отключённое состояние — соответствует Figma-свойству `state=disabled` |
+| `invalid` | `boolean` | `false` | Признак невалидности — соответствует Figma-свойству `state=danger` |
+| `variant` | `'outlined' \| 'filled'` | `'outlined'` | Вариант оформления контрола |
+| `size` | `'small' \| 'base' \| 'large'` | `'base'` | Размер радиокнопки |
+| `inputId` | `string \| undefined` | `undefined` | `id` нативного `input`; используется для связи с внешним `<label for="...">` |
+| `tabindex` | `number \| undefined` | `undefined` | Порядок перехода по Tab |
+| `ariaLabel` | `string \| undefined` | `undefined` | Метка для программ экранного доступа |
+| `ariaLabelledBy` | `string \| undefined` | `undefined` | `id` элемента, выступающего меткой для скринридера |
+| `autofocus` | `boolean` | `false` | Автофокус при монтировании компонента |
+
+Состояния `state=focus` и `state=hover` в Figma — интерактивные, отдельных `@Input` не имеют и воспроизводятся браузером автоматически. Состояние `checked` в Figma управляется значением модели через `[(ngModel)]` / `formControl`, а не отдельным `@Input`.
+
+## Variants
+
+### Default (невыбранная)
+
+Figma: `<RadioButton>`, state=default, checked=false — nodeId `17:13535`
+
+```html
+<extra-radiobutton
+  value="option1"
+  name="delivery"
+  [(ngModel)]="selected"
+></extra-radiobutton>
+```
+
+### Checked (выбранная)
+
+Figma: `<RadioButton>`, state=default, checked=true
+
+Выбранное состояние задаётся равенством `value` и значения модели (`selected === 'option1'`).
+
+```html
+<extra-radiobutton
+  value="option1"
+  name="delivery"
+  [(ngModel)]="selected"
+></extra-radiobutton>
+```
+
+### Группа вариантов
+
+Figma: `<RadioButton>`, общий `name`, одиночный выбор внутри группы
+
+```html
+<extra-radiobutton value="pickup" name="delivery" [(ngModel)]="selected"></extra-radiobutton>
+<extra-radiobutton value="courier" name="delivery" [(ngModel)]="selected"></extra-radiobutton>
+<extra-radiobutton value="post" name="delivery" [(ngModel)]="selected"></extra-radiobutton>
+```
+
+### Disabled (отключённая)
+
+Figma: `<RadioButton>`, state=disabled
+
+```html
+<extra-radiobutton
+  value="option1"
+  name="delivery"
+  [disabled]="true"
+  [(ngModel)]="selected"
+></extra-radiobutton>
+```
+
+### Invalid / Danger (невалидная)
+
+Figma: `<RadioButton>`, state=danger
+
+```html
+<extra-radiobutton
+  value="option1"
+  name="delivery"
+  [invalid]="true"
+  [(ngModel)]="selected"
+></extra-radiobutton>
+```
+
+### Filled (залитый вариант)
+
+Figma: `<RadioButton>`, variant=filled
+
+```html
+<extra-radiobutton
+  value="option1"
+  name="delivery"
+  variant="filled"
+  [(ngModel)]="selected"
+></extra-radiobutton>
+```
+
+### Large (крупный размер)
+
+Figma: `<RadioButton>`, size=large
+
+```html
+<extra-radiobutton
+  value="option1"
+  name="delivery"
+  size="large"
+  [(ngModel)]="selected"
+></extra-radiobutton>
+```
+
+### Реактивная форма (formControl)
+
+Figma: `<RadioButton>`, общий `name`, одиночный выбор внутри группы
+
+```html
+<extra-radiobutton value="pickup" name="delivery" [formControl]="deliveryControl"></extra-radiobutton>
+<extra-radiobutton value="courier" name="delivery" [formControl]="deliveryControl"></extra-radiobutton>
+```
+
+## Slots
+
+Не используются. Метка к радиокнопке добавляется внешним `<label [attr.for]="inputId">` или композитным шаблоном `Label.Radio`.
+
+## Related
+
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены состояний (danger, disabled)
+- [Иконки](../../figma-code-connect/icons.md) — доступные иконки (`pi pi-*`)
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+- [ExtraInputText](../inputtext/inputtext.figma.md) — текстовое поле формы
+- [ExtraButton](../button/button.figma.md) — кнопка действия
+
+## Do / Don't
+
+**Do:**
+- Объединяйте радиокнопки одной группы общим `name` и связывайте с одной моделью через `[(ngModel)]` или `formControl`
+- Используйте радиокнопки, когда нужно выбрать ровно один из взаимоисключающих вариантов
+- Задавайте `inputId` и связывайте с внешней меткой `<label>` для доступности и кликабельности подписи
+- Применяйте `[invalid]="true"` для подсветки ошибки валидации формы
+
+**Don't:**
+- Не используйте радиокнопки для множественного выбора — для этого есть Checkbox
+- Не оставляйте радиокнопку без видимой метки — подпись обязательна
+- Не пытайтесь снять выбор у радиокнопки повторным кликом: одиночный выбор в группе снять нельзя
+- Не задавайте разный `name` радиокнопкам одной группы — они перестанут быть взаимоисключающими
diff --git a/src/lib/components/rating/rating.figma.md b/src/lib/components/rating/rating.figma.md
new file mode 100644
index 00000000..cb719546
--- /dev/null
+++ b/src/lib/components/rating/rating.figma.md
@@ -0,0 +1,94 @@
+---
+component: ExtraRating
+selector: extra-rating
+import:
+  symbol: ExtraRatingComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '384:1881'
+  componentKey: '6c441f5ded02d0e5b053fbdcee752221af0d6d3d'
+  name: '<Rating>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraRating` — компонент оценки звёздами: ввод оценки кликом или отображение готового значения в режиме только для чтения. Оборачивает PrimeNG `p-rating` и реализует `ControlValueAccessor`, поэтому интегрируется с `[(ngModel)]` и реактивными формами через `formControl` / `formControlName`.
+
+Компонент соответствует Figma-компоненту `<Rating>` (nodeId `384:1881`). Значение оценки задаётся не отдельным инпутом, а моделью через `ControlValueAccessor`. Figma-свойство `disabled` маппируется на одноимённый Angular-инпут (см. раздел Props mapping).
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `stars` | `number` | `5` | Количество звёзд (максимальная оценка) |
+| `readonly` | `boolean` | `false` | Режим только для чтения: отображение готовой оценки без возможности изменения |
+| `disabled` | `boolean` | `false` | Отключённое состояние — соответствует Figma-свойству `disabled=true`; также управляется формой через `setDisabledState` |
+| `autofocus` | `boolean` | `false` | Автофокус при монтировании компонента |
+
+Значение оценки (число выбранных звёзд) задаётся через модель: используйте `[(ngModel)]`, `formControl` или `formControlName`. Тип значения — `number | null` (`ExtraRatingValue`); `null` означает «оценка не выбрана».
+
+## Variants
+
+### Интерактивный (ввод оценки)
+
+Figma: `disabled=false` — оценка задаётся кликом по звёздам
+
+```html
+<extra-rating [(ngModel)]="rating"></extra-rating>
+```
+
+В реактивных формах эквивалентно:
+
+```html
+<extra-rating [formControl]="ratingControl"></extra-rating>
+```
+
+### Readonly (отображение готовой оценки)
+
+Figma: `disabled=false` — звёзды отражают значение модели без интерактивности
+
+```html
+<extra-rating [readonly]="true" [(ngModel)]="rating"></extra-rating>
+```
+
+### Disabled (отключён)
+
+Figma: `disabled=true`
+
+```html
+<extra-rating [disabled]="true" [(ngModel)]="rating"></extra-rating>
+```
+
+### Произвольное количество звёзд
+
+Figma: `disabled=false` — изменён максимум шкалы
+
+```html
+<extra-rating [stars]="10" [(ngModel)]="rating"></extra-rating>
+```
+
+## Slots
+
+Не используются. Звёзды формируются компонентом по значению `stars`; подпись к шкале размещается рядом во внешнем шаблоне.
+
+## Related
+
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+- [ExtraCheckbox](../checkbox/checkbox.figma.md) — компонент формы с похожим маппингом состояний через `ControlValueAccessor`
+- [ExtraButton](../button/button.figma.md) — компонент с отключённым состоянием `disabled`
+
+## Do / Don't
+
+**Do:**
+- Используйте `[(ngModel)]`, `formControl` или `formControlName` для чтения и записи оценки
+- Для отображения готовой оценки задавайте `[readonly]="true"`
+- Меняйте размер шкалы через `[stars]` (например `[stars]="10"`)
+- Связывайте компонент с подписью во внешнем шаблоне для доступности
+
+**Don't:**
+- Не задавайте оценку через отдельный атрибут — значение идёт только через модель (`[(ngModel)]` / `formControl`)
+- Не комбинируйте `[disabled]="true"` с интерактивными обработчиками `(onRate)` — события в этом состоянии не возникают
+- Не используйте компонент для непрерывной шкалы с произвольным числом — для этого предназначен Slider
diff --git a/src/lib/components/scroll-panel/scroll-panel.figma.md b/src/lib/components/scroll-panel/scroll-panel.figma.md
new file mode 100644
index 00000000..7511bfa9
--- /dev/null
+++ b/src/lib/components/scroll-panel/scroll-panel.figma.md
@@ -0,0 +1,100 @@
+---
+component: ExtraScrollPanel
+selector: extra-scroll-panel
+import:
+  symbol: ExtraScrollPanelComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '33:1560'
+  componentKey: '72b7f7e351d59fa0db86f43964862b412ae34342'
+  name: '<ScrollPanel>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraScrollPanelComponent` — контейнер с кастомным кросс-браузерным скроллбаром. Оборачивает PrimeNG `p-scrollpanel` и заменяет нативную полосу прокрутки браузера на стилизованную в соответствии с темой. Используется, когда контент не помещается в отведённую область и нужна прокрутка по вертикали или горизонтали с единообразным внешним видом во всех браузерах.
+
+Компонент соответствует Figma-компоненту `<ScrollPanel>` (nodeId `33:1560`, библиотека «UI Kit (DS) v2.0»). У компонента нет визуальных вариантов в Figma: его поведение определяется фиксированными размерами области и проецируемым содержимым.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `height` | `string` | `'100px'` | Высота области прокрутки (любая CSS-единица); фиксированная высота включает вертикальный скроллбар, когда контент выше |
+| `width` | `string` | `'100%'` | Ширина области прокрутки (любая CSS-единица); фиксированная ширина включает горизонтальный скроллбар, когда контент шире |
+| `step` | `number` | `10` | Шаг прокрутки при нажатии клавиш со стрелками (в пикселях) |
+
+## Variants
+
+Визуальных вариантов в Figma нет. Направление прокрутки определяется соотношением размеров области (`height`/`width`) и габаритов проецируемого содержимого.
+
+### Вертикальная прокрутка
+
+Фиксированная высота меньше высоты контента — появляется вертикальный скроллбар.
+
+```html
+<extra-scroll-panel height="100px">
+  <p>Длинный текст или список, который выше отведённой области и прокручивается по вертикали.</p>
+</extra-scroll-panel>
+```
+
+### Горизонтальная прокрутка
+
+Контент без переносов шире области — появляется горизонтальный скроллбар.
+
+```html
+<extra-scroll-panel height="80px">
+  <p style="white-space: nowrap; margin: 0">
+    Длинная строка без переносов, которая выходит за ширину контейнера и прокручивается по горизонтали.
+  </p>
+</extra-scroll-panel>
+```
+
+### Прокрутка в обоих направлениях
+
+Содержимое шире и выше области — появляются оба скроллбара.
+
+```html
+<extra-scroll-panel height="200px" width="50%">
+  <div style="width: max-content">
+    <p style="white-space: nowrap; margin: 0 0 0.5rem 0">Строка таблицы шире контейнера…</p>
+    <p style="white-space: nowrap; margin: 0 0 0.5rem 0">…и таких строк больше, чем помещается по высоте.</p>
+  </div>
+</extra-scroll-panel>
+```
+
+### Кастомный шаг прокрутки
+
+```html
+<extra-scroll-panel height="120px" [step]="30">
+  <p>Прокрутка стрелками клавиатуры выполняется шагом 30px вместо стандартных 10px.</p>
+</extra-scroll-panel>
+```
+
+## Slots
+
+| Слот | Синтаксис | Описание |
+|------|-----------|---------|
+| Содержимое | `<ng-content>` | Произвольное прокручиваемое содержимое — размещается напрямую между тегами `<extra-scroll-panel>` |
+
+Именованных слотов и структурных директив компонент не имеет. Любая разметка между открывающим и закрывающим тегами попадает в безымянный `<ng-content>` и становится прокручиваемой областью.
+
+## Related
+
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены скроллбара и поверхности
+
+## Do / Don't
+
+**Do:**
+- Задавайте фиксированную `height` (и при необходимости `width`), чтобы область могла прокручиваться — без ограничения размера скроллбар не появится.
+- Используйте для длинных списков, текстов и таблиц внутри карточек, панелей и сайдбаров, где нужен единый вид скроллбара во всех браузерах.
+- Для горизонтальной прокрутки задавайте содержимому `white-space: nowrap` или фиксированную ширину контента.
+
+**Don't:**
+- Не используйте компонент только ради факта прокрутки — для нативного поведения без кастомного вида достаточно CSS `overflow`.
+- Не путайте со скроллом внутри `Dialog`/`Drawer` — это отдельные поверхности; `extra-scroll-panel` лишь делает вложенную область прокручиваемой.
+- Не задавайте `height: 100%` без ограниченного по высоте родителя — область растянется и прокрутка не возникнет.
diff --git a/src/lib/components/select-button/select-button.figma.md b/src/lib/components/select-button/select-button.figma.md
new file mode 100644
index 00000000..a08e8cc7
--- /dev/null
+++ b/src/lib/components/select-button/select-button.figma.md
@@ -0,0 +1,143 @@
+---
+component: ExtraSelectButton
+selector: extra-select-button
+import:
+  symbol: ExtraSelectButtonComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '317:1832'
+  componentKey: '62afbf071ec53d216933d644c1e3041ff6a11dee'
+  name: '<SelectButton>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraSelectButton` — segmented-группа кнопок для выбора одного или нескольких значений из небольшого набора взаимоисключающих опций (2–5). Кнопки слиты в единый контрол, выбор применяется немедленно. Оборачивает PrimeNG `p-selectbutton` и реализует `ControlValueAccessor`, поэтому интегрируется с `[(ngModel)]` и реактивными формами через `formControl` / `formControlName`.
+
+Компонент соответствует Figma-компоненту `<SelectButton>` (nodeId `317:1832`). Figma-свойство `state` маппируется на Angular-инпут `disabled`, а набор сегментов (Figma-свойство `change-layout`) описывается массивом `options` с объектами `ExtraSelectButtonItem`.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `options` | `ExtraSelectButtonItem[]` | `[]` | Массив сегментов; каждый сегмент задаётся объектом с `label`, `value`, опциональными `icon` и `disabled` — соответствует Figma-свойству `change-layout` |
+| `optionLabel` | `string` | `'label'` | Имя поля объекта опции, из которого берётся подпись сегмента |
+| `optionValue` | `string` | `'value'` | Имя поля объекта опции, из которого берётся значение модели |
+| `optionDisabled` | `string` | `'disabled'` | Имя поля объекта опции, отключающего отдельный сегмент |
+| `size` | `'small' \| 'base' \| 'large' \| 'xLarge'` | `'base'` | Размер контрола |
+| `multiple` | `boolean` | `false` | Множественный выбор: модель — массив значений вместо одиночного значения |
+| `allowEmpty` | `boolean` | `true` | Разрешает снять выбор (пустое значение) повторным нажатием на активный сегмент |
+| `disabled` | `boolean` | `false` | Отключённое состояние всего контрола — соответствует Figma-свойству `state=disabled`; задаётся через `[disabled]` или `setDisabledState` формы |
+
+Выбранное значение задаётся не отдельным инпутом, а моделью через `ControlValueAccessor`: используйте `[(ngModel)]`, `formControl` или `formControlName`. В одиночном режиме модель — `string`, в режиме `multiple` — `string[]`. Изменение значения также доступно через `@Output() valueChange`.
+
+## Variants
+
+### Одиночный выбор (по умолчанию)
+
+Figma: `<SelectButton>`, state=default — single-режим
+
+```html
+<extra-select-button
+  [options]="viewOptions"
+  [(ngModel)]="selectedView"
+></extra-select-button>
+```
+
+В реактивных формах эквивалентно:
+
+```html
+<extra-select-button
+  [options]="viewOptions"
+  [formControl]="viewControl"
+></extra-select-button>
+```
+
+### Множественный выбор (multiple)
+
+Figma: `<SelectButton>`, state=default — multiple-режим, модель-массив
+
+```html
+<extra-select-button
+  [options]="filterOptions"
+  [multiple]="true"
+  [(ngModel)]="selectedFilters"
+></extra-select-button>
+```
+
+### Без возможности снять выбор (allowEmpty=false)
+
+Figma: `<SelectButton>`, state=default — обязателен один активный сегмент
+
+```html
+<extra-select-button
+  [options]="viewOptions"
+  [allowEmpty]="false"
+  [(ngModel)]="selectedView"
+></extra-select-button>
+```
+
+### С иконками в сегментах
+
+Figma: `<SelectButton>`, state=default — сегменты с иконкой; CSS-классы иконок — [icons.md](../../figma-code-connect/icons.md)
+
+```html
+<extra-select-button
+  [options]="alignOptions"
+  [(ngModel)]="selectedAlign"
+></extra-select-button>
+```
+
+### Disabled (отключён)
+
+Figma: `<SelectButton>`, state=disabled
+
+```html
+<extra-select-button
+  [options]="viewOptions"
+  [disabled]="true"
+  [(ngModel)]="selectedView"
+></extra-select-button>
+```
+
+### Отдельный отключённый сегмент
+
+Figma: `<SelectButton>`, state=default — один сегмент с `disabled: true`
+
+```html
+<extra-select-button
+  [options]="partlyDisabledOptions"
+  [(ngModel)]="selectedView"
+></extra-select-button>
+```
+
+## Slots
+
+Не используются. Содержимое сегментов задаётся через `@Input() options`: подпись берётся из поля `optionLabel`, иконка — из поля `icon` объекта опции.
+
+## Related
+
+- [ExtraButton](../button/button.figma.md) — одиночная кнопка действия (не выбор значения)
+- [ExtraToggleButton](../togglebutton/togglebutton.figma.md) — одиночный переключатель состояния
+- [ExtraCheckbox](../checkbox/checkbox.figma.md) — множественный выбор списком с похожим маппингом модели
+- [Иконки](../../figma-code-connect/icons.md) — доступные иконки сегментов (поле `icon`)
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены состояний контрола
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Используйте для 2–5 взаимоисключающих опций с мгновенным применением выбора (переключение вида, фильтр)
+- Передавайте значение через `[(ngModel)]` / `formControl`; не задавайте «выбран» отдельным атрибутом
+- Для режима «выбор нескольких» задавайте `[multiple]="true"` — модель станет массивом
+- Используйте `[allowEmpty]="false"`, когда хотя бы один сегмент должен оставаться активным
+- Для иконок в сегментах задавайте поле `icon` в объекте опции — классы берите из [icons.md](../../figma-code-connect/icons.md)
+
+**Don't:**
+- Не используйте для навигации по разделам — для этого предназначен компонент Tabs
+- Не используйте для длинных списков значений — выберите `ExtraSelect`
+- Не путайте с `ExtraToggleButton` — это одиночный переключатель, а не группа сегментов
+- Не инлайньте CSS-классы иконок вручную — используйте справочник [icons.md](../../figma-code-connect/icons.md)
diff --git a/src/lib/components/select/select.figma.md b/src/lib/components/select/select.figma.md
new file mode 100644
index 00000000..a84b0ad7
--- /dev/null
+++ b/src/lib/components/select/select.figma.md
@@ -0,0 +1,260 @@
+---
+component: ExtraSelect
+selector: extra-select
+import:
+  symbol: ExtraSelectComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '361:1561'
+  componentKey: '361-1561'
+  name: '<Select>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraSelectComponent` — выпадающий список для выбора одного значения из набора опций. Оборачивает PrimeNG `p-select` и расширяет его размерами, фильтрацией, группировкой, режимом плавающей метки и кастомными шаблонами пунктов. Реализует `ControlValueAccessor` и работает с `[(ngModel)]` и `[formControl]` «из коробки».
+
+Компонент соответствует Figma-компоненту `<Select>` (component set, nodeId `361:1561`, fileKey `Khh7arsuXss3ncqy1Dz3OZ`, библиотека «UI Kit (DS) v2.0»). Варианты задаются Figma-свойствами `state` (`default | hover | focus | danger | disabled | readonly`), `has-placeholder` и `has-floatlabel`. Выпадающая панель, пункты и группы вынесены в отдельные Figma-узлы `<Select.Overlay>`, `<Select.Option>` и `<Select.Group>` и в коде описываются через шаблоны-директивы (см. ниже).
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `options` | `any[] \| null \| undefined` | `undefined` | Массив опций для выбора |
+| `optionLabel` | `string \| undefined` | `undefined` | Имя поля опции, отображаемое как подпись |
+| `optionValue` | `string \| undefined` | `undefined` | Имя поля опции, используемое как значение модели |
+| `optionDisabled` | `string \| undefined` | `undefined` | Имя булева поля опции, отключающего её выбор |
+| `optionGroupLabel` | `string \| undefined` | `undefined` | Имя поля заголовка группы (при `group=true`) |
+| `optionGroupChildren` | `string` | `'items'` | Имя поля группы со списком дочерних опций |
+| `group` | `boolean` | `false` | Включает группировку опций |
+| `placeholder` | `string` | `''` | Подсказка при пустом поле — соответствует Figma-свойству `text-placeholder` / `has-placeholder` |
+| `size` | `'small' \| 'base' \| 'large' \| 'xlarge'` | `'base'` | Размер поля; `large` маппируется на PrimeNG `size="large"`, `xlarge` — на CSS-класс `p-select-xlg` |
+| `filter` | `boolean` | `false` | Показывает строку поиска в выпадающем списке |
+| `showClear` | `boolean` | `false` | Показывает иконку очистки (×) при наличии значения — соответствует Figma-свойству `show-clear` |
+| `editable` | `boolean` | `false` | Разрешает ручной ввод значения в поле |
+| `readonly` | `boolean` | `false` | Только для чтения — соответствует Figma-состоянию `state=readonly` |
+| `loading` | `boolean` | `false` | Состояние загрузки опций — соответствует Figma-свойству `show-loader` |
+| `inputId` | `string \| undefined` | `undefined` | `id` нативного инпута для связи с внешним `<label>` |
+| `appendTo` | `any` | `'body'` | Контейнер для отрисовки выпадающей панели |
+| `floatLabel` | `boolean` | `false` | Режим плавающей метки — соответствует Figma-свойству `has-floatlabel` |
+| `label` | `string` | `''` | Текст плавающей метки (используется при `floatLabel=true`) |
+| `checkmark` | `boolean` | `true` | Показывает галочку у выбранного пункта в списке |
+| `emptyMessage` | `string` | `'Нет данных'` | Сообщение при пустом списке опций |
+| `emptyFilterMessage` | `string` | `'Результаты не найдены'` | Сообщение при отсутствии результатов фильтрации |
+| `(onClear)` | `EventEmitter<Event>` | — | Событие очистки выбранного значения (при `showClear=true`) |
+| `(onFilter)` | `EventEmitter<ExtraSelectFilterEvent>` | — | Событие ввода в строку поиска (при `filter=true`) |
+| `(onShow)` | `EventEmitter<ExtraAnimationEvent>` | — | Событие открытия панели |
+| `(onHide)` | `EventEmitter<ExtraAnimationEvent>` | — | Событие закрытия панели |
+| `(onFocus)` | `EventEmitter<Event>` | — | Событие получения фокуса |
+| `(onBlur)` | `EventEmitter<Event>` | — | Событие потери фокуса |
+| `[(ngModel)]` / `[formControl]` | `any` | `null` | Выбранное значение через ControlValueAccessor |
+
+> `invalid` — вычисляемое свойство: берётся автоматически из связанного `NgControl` (соответствует Figma-состоянию `state=danger`). Устанавливать вручную нельзя.
+
+## Variants
+
+### Default / Base (базовый список)
+
+Figma: `<Select>`, state=default, has-placeholder=true, has-floatlabel=false — nodeId `361:1603`
+
+```html
+<extra-select
+  [options]="cities"
+  optionLabel="name"
+  placeholder="Выберите город..."
+  [(ngModel)]="selectedCity"
+  name="city"
+></extra-select>
+```
+
+### С привязкой значения (optionValue)
+
+Figma: `<Select>`, state=default, has-placeholder=false, has-floatlabel=false — nodeId `361:1608`
+
+```html
+<extra-select
+  [options]="cities"
+  optionLabel="name"
+  optionValue="code"
+  [(ngModel)]="selectedCode"
+  name="cityCode"
+></extra-select>
+```
+
+### С фильтрацией (filter)
+
+Figma: `<Select.Overlay>` — выпадающая панель со строкой поиска
+
+```html
+<extra-select
+  [options]="cities"
+  optionLabel="name"
+  [filter]="true"
+  placeholder="Поиск города..."
+  [(ngModel)]="selectedCity"
+  name="cityFilter"
+></extra-select>
+```
+
+### С кнопкой очистки (show-clear)
+
+Figma: `<Select>`, show-clear=true
+
+```html
+<extra-select
+  [options]="cities"
+  optionLabel="name"
+  [showClear]="true"
+  placeholder="Можно очистить"
+  [(ngModel)]="selectedCity"
+  name="cityClearable"
+></extra-select>
+```
+
+### С группировкой опций (group)
+
+Figma: `<Select.Group>` — заголовок группы в панели
+
+```html
+<extra-select
+  [options]="groupedCities"
+  [group]="true"
+  optionGroupLabel="region"
+  optionGroupChildren="items"
+  optionLabel="name"
+  placeholder="Выберите город..."
+  [(ngModel)]="selectedCity"
+  name="cityGrouped"
+></extra-select>
+```
+
+### С плавающей меткой (has-floatlabel)
+
+Figma: `<Select>`, state=default, has-placeholder=true, has-floatlabel=true — nodeId `13798:26472`
+
+```html
+<extra-select
+  [options]="cities"
+  optionLabel="name"
+  [floatLabel]="true"
+  label="Город"
+  [(ngModel)]="selectedCity"
+  name="cityFloat"
+></extra-select>
+```
+
+### Large / xlarge (увеличенный размер)
+
+Figma: `<Select>`, state=default
+
+```html
+<extra-select
+  [options]="cities"
+  optionLabel="name"
+  size="large"
+  placeholder="Большое поле"
+  [(ngModel)]="selectedCity"
+  name="cityLarge"
+></extra-select>
+```
+
+### Readonly (только для чтения)
+
+Figma: `<Select>`, state=readonly, has-placeholder=true, has-floatlabel=false — nodeId `14980:35505`
+
+```html
+<extra-select
+  [options]="cities"
+  optionLabel="name"
+  [readonly]="true"
+  [(ngModel)]="selectedCity"
+  name="cityReadonly"
+></extra-select>
+```
+
+### Disabled (отключённое поле)
+
+Figma: `<Select>`, state=disabled, has-placeholder=true, has-floatlabel=false — nodeId `361:1562`
+
+```html
+<extra-select
+  [options]="cities"
+  optionLabel="name"
+  [formControl]="disabledControl"
+></extra-select>
+```
+
+```ts
+// Управляется через FormControl:
+disabledControl = new FormControl({ value: null, disabled: true });
+```
+
+### Невалидное состояние (formControl + валидация)
+
+Figma: `<Select>`, state=danger, has-placeholder=true, has-floatlabel=false — nodeId `361:1572` (невалидное состояние определяется через NgControl автоматически)
+
+```ts
+cityControl = new FormControl(null, [Validators.required]);
+```
+
+```html
+<extra-select
+  [options]="cities"
+  optionLabel="name"
+  placeholder="Обязательное поле"
+  [formControl]="cityControl"
+></extra-select>
+```
+
+## Slots
+
+Проекция содержимого выполняется через шаблоны-директивы, размещаемые между тегами `<extra-select>`. Каждая директива оборачивается в `<ng-template>` и получает контекст через `let-`:
+
+- **`extraSelectOption`** — шаблон пункта выпадающего списка (контекст `let-option`); соответствует Figma-узлу `<Select.Option>`.
+- **`extraSelectSelectedItem`** — шаблон выбранного значения в закрытом поле (контекст `let-option`).
+- **`extraSelectOptionGroup`** — шаблон заголовка группы (контекст `let-group`); соответствует Figma-узлу `<Select.Group>`.
+
+```html
+<extra-select [options]="cities" [(ngModel)]="selectedCity" name="cityCustom">
+  <ng-template extraSelectOption let-option>
+    <span>{{ option.name }} ({{ option.code }})</span>
+  </ng-template>
+  <ng-template extraSelectSelectedItem let-option>
+    <strong>{{ option.name }}</strong>
+  </ng-template>
+</extra-select>
+```
+
+```ts
+import {
+  ExtraSelectOptionDirective,
+  ExtraSelectSelectedItemDirective,
+  ExtraSelectOptionGroupDirective
+} from '@cdek-it/angular-ui-kit';
+```
+
+## Related
+
+- [InputText](../inputtext/inputtext.figma.md) — атомарное поле ввода текста
+- [Button](../button/button.figma.md) — кнопки действий в формах
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены состояний поля
+- [Иконки](../../figma-code-connect/icons.md) — доступные иконки
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Используйте `[(ngModel)]` или `[formControl]` — компонент реализует `ControlValueAccessor` и именно через них передаётся выбранное значение.
+- Управляйте состоянием `disabled` через `FormControl.disable()` / `FormControl.enable()` — это сохраняет dirty/touched-флаги.
+- Задавайте `optionLabel` для отображаемой подписи и `optionValue`, когда в модели нужно хранить примитив, а не весь объект опции.
+- Включайте `[filter]="true"` для длинных списков, чтобы пользователь мог искать опцию по тексту.
+- Для кастомного вида пунктов и выбранного значения используйте директивы `extraSelectOption` / `extraSelectSelectedItem` / `extraSelectOptionGroup`.
+
+**Don't:**
+- Не задавайте `[disabled]="true"` как Input-атрибут напрямую — компонент не объявляет `@Input() disabled`; передавайте через `FormControl` или `ControlValueAccessor`.
+- Не используйте поле без `[(ngModel)]` / `[formControl]` — без привязки выбранное значение не синхронизируется с моделью.
+- Не включайте `[group]="true"` без `optionGroupLabel` и `optionGroupChildren` — группы не отрисуются корректно.
+- Не задавайте `invalid` вручную — невалидное состояние вычисляется из связанного `NgControl`.
diff --git a/src/lib/components/skeleton/skeleton.figma.md b/src/lib/components/skeleton/skeleton.figma.md
new file mode 100644
index 00000000..53527d7d
--- /dev/null
+++ b/src/lib/components/skeleton/skeleton.figma.md
@@ -0,0 +1,93 @@
+---
+component: ExtraSkeleton
+selector: extra-skeleton
+import:
+  symbol: ExtraSkeletonComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '5221:12465'
+  componentKey: '50cb1fdbaa98c8b72ac1342d28b7fc8fed5adbcf'
+  name: '<Skeleton>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraSkeleton` — плейсхолдер-каркас контента на время загрузки данных. Низкофиделити-фигура занимает место будущего текста, аватара или изображения, имитирует финальный макет и снижает layout shift. Оборачивает PrimeNG `p-skeleton` и поддерживает прямоугольную и круглую форму, а также волновую анимацию.
+
+Компонент соответствует Figma-компоненту `<Skeleton>` (nodeId `5221:12465`). В Figma форма и анимация заданы внутренней раскадровкой (Figma-свойство `keyframes` со значениями `1` / `2` — это кадры shimmer-анимации, а не дизайн-проп), поэтому форма, размеры и тип анимации настраиваются через Angular-инпуты (см. раздел Props mapping).
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `shape` | `'rectangle' \| 'circle'` | `'rectangle'` | Форма каркаса — прямоугольник или круг |
+| `animation` | `'wave' \| 'none'` | `'wave'` | Тип анимации: волновой шиммер или без анимации |
+| `width` | `string` | `'100%'` | Ширина элемента (CSS-значение, например `'8rem'`); игнорируется при заданном `size` |
+| `height` | `string` | `'1rem'` | Высота элемента (CSS-значение, например `'1rem'`); игнорируется при заданном `size` |
+| `size` | `string \| undefined` | `undefined` | Размер элемента, задаёт ширину и высоту одновременно; используется для круглой формы (`shape='circle'`) |
+| `borderRadius` | `string \| undefined` | `undefined` | Скругление углов (CSS-значение); переопределяет значение темы |
+
+Notes:
+- `size` имеет приоритет над парой `width` / `height`: при заданном `size` ширина и высота берутся из него.
+- Для `shape='circle'` задавайте `size`, чтобы получить ровный круг (одинаковые ширина и высота).
+- Цвет и базовое скругление наследуются из темы — см. [tokens.md](../../figma-code-connect/tokens.md); `borderRadius` переопределяет только скругление.
+
+## Variants
+
+### Rectangle (прямоугольник, по умолчанию)
+
+Figma: `<Skeleton>`, форма прямоугольная — nodeId `5221:12465`
+
+```html
+<extra-skeleton width="12rem" height="1rem"></extra-skeleton>
+```
+
+### Circle (круг)
+
+Figma: `<Skeleton>`, форма круглая
+
+```html
+<extra-skeleton shape="circle" size="4rem"></extra-skeleton>
+```
+
+### Без анимации (animation=none)
+
+Figma: `<Skeleton>`, статичный кадр без shimmer
+
+```html
+<extra-skeleton animation="none" width="100%" height="2rem"></extra-skeleton>
+```
+
+### Со скруглением (borderRadius)
+
+Figma: `<Skeleton>`, переопределённое скругление углов
+
+```html
+<extra-skeleton width="8rem" height="2.5rem" borderRadius="0.75rem"></extra-skeleton>
+```
+
+## Slots
+
+Не используются. Каркас не проектирует содержимое — форма и размеры задаются через `@Input()` (`shape`, `size`, `width`, `height`).
+
+## Related
+
+- [Токены](../../figma-code-connect/tokens.md) — цвет и базовое скругление каркаса
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Используйте `shape='circle'` с `size` для круглых плейсхолдеров (аватары, иконки)
+- Резервируйте место под реальный контент — задавайте `width` / `height`, близкие к финальным размерам, чтобы снизить layout shift
+- Используйте `animation='none'` для статичных каркасов или при предпочтении пользователя «уменьшить движение»
+- Комбинируйте несколько `extra-skeleton` для имитации структуры карточек, списков и таблиц
+
+**Don't:**
+- Не используйте Skeleton для измеримого прогресса — для этого предназначен ProgressBar
+- Не используйте Skeleton вместо ProgressSpinner для короткого ожидания контента непредсказуемой формы
+- Не инлайньте значения цвета вручную — цвет наследуется из темы, см. [tokens.md](../../figma-code-connect/tokens.md)
+- Не задавайте одновременно `size` и `width` / `height` — `size` переопределит обе размерные величины
diff --git a/src/lib/components/slider/slider.figma.md b/src/lib/components/slider/slider.figma.md
new file mode 100644
index 00000000..e26d3863
--- /dev/null
+++ b/src/lib/components/slider/slider.figma.md
@@ -0,0 +1,110 @@
+---
+component: ExtraSlider
+selector: extra-slider
+import:
+  symbol: ExtraSliderComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '383:1844'
+  componentKey: '06f2d9890eea51bccebbb9140db19d29c4b25dbf'
+  name: '<Slider>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraSlider` — компонент-ползунок для выбора числового значения или диапазона перетаскиванием бегунка по шкале в границах `min`/`max` с заданным шагом. Оборачивает PrimeNG `p-slider` и реализует `ControlValueAccessor`, поэтому интегрируется с `[(ngModel)]` и реактивными формами через `formControl` / `formControlName`.
+
+Компонент соответствует Figma-компоненту `<Slider>` (nodeId `383:1844`). Figma-свойства `state` (default / hover / disabled) и `range` (false / true) маппируются на Angular-инпут `disabled`, инпут `range` и модель значения (см. раздел Props mapping).
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `min` | `number` | `0` | Минимальное значение шкалы |
+| `max` | `number` | `100` | Максимальное значение шкалы |
+| `step` | `number \| undefined` | `undefined` | Шаг изменения значения; `undefined` — плавное перемещение |
+| `range` | `boolean` | `false` | Режим выбора диапазона с двумя бегунками — соответствует Figma-свойству `range=true`; модель становится массивом `[from, to]` |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Ориентация шкалы |
+| `disabled` | `boolean` | `false` | Отключённое состояние — соответствует Figma-свойству `state=disabled`; передаётся через `[disabled]` |
+
+Текущее значение (положение бегунка) задаётся не отдельным инпутом, а моделью через `ControlValueAccessor`: используйте `[(ngModel)]`, `formControl` или `formControlName`. В одиночном режиме модель — `number`, в режиме `[range]="true"` — массив `number[]` вида `[from, to]`. Состояние Figma `state=hover` — это интерактивное состояние наведения, отдельного инпута не имеет.
+
+Событие завершения перетаскивания доступно через `@Output() onSlideEnd` типа `EventEmitter<ExtraSliderSlideEndEvent>`.
+
+## Variants
+
+### Single (одиночное значение)
+
+Figma: state=default, range=false
+
+```html
+<extra-slider [(ngModel)]="volume"></extra-slider>
+```
+
+В реактивных формах эквивалентно:
+
+```html
+<extra-slider [formControl]="volumeControl"></extra-slider>
+```
+
+### Range (выбор диапазона)
+
+Figma: state=default, range=true
+
+```html
+<extra-slider [range]="true" [(ngModel)]="priceRange"></extra-slider>
+```
+
+Модель — массив `[from, to]`, например `[20, 80]`.
+
+### Vertical (вертикальная ориентация)
+
+Figma: state=default, range=false — ориентация задаётся инпутом `orientation`
+
+```html
+<extra-slider orientation="vertical" [(ngModel)]="brightness"></extra-slider>
+```
+
+### Step (дискретный шаг)
+
+Figma: state=default, range=false — шаг задаётся инпутом `step`
+
+```html
+<extra-slider [min]="0" [max]="50" [step]="5" [(ngModel)]="zoom"></extra-slider>
+```
+
+### Disabled (отключён)
+
+Figma: state=disabled, range=false
+
+```html
+<extra-slider [disabled]="true" [(ngModel)]="volume"></extra-slider>
+```
+
+## Slots
+
+Не используются. Подпись к ползунку размещается рядом во внешнем шаблоне.
+
+## Related
+
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+- [ExtraCheckbox](../checkbox/checkbox.figma.md) — пример компонента формы с `ControlValueAccessor`
+- [ExtraButton](../button/button.figma.md) — пример компонента-обёртки над PrimeNG
+
+## Do / Don't
+
+**Do:**
+- Используйте `[(ngModel)]` или `formControl` для привязки текущего значения — отдельного инпута значения нет
+- Для диапазона задавайте `[range]="true"` и связывайте модель-массив `[from, to]` (Figma `range=true`)
+- Задавайте `[step]` для дискретного выбора (громкость, масштаб, рейтинг шагами)
+- Для отключённого состояния задавайте `[disabled]="true"` (Figma `state=disabled`)
+- Подписывайтесь на `(onSlideEnd)`, чтобы реагировать на завершение перетаскивания, а не на каждое промежуточное изменение
+
+**Don't:**
+- Не задавайте значение через атрибут — состояние идёт только через модель (`[(ngModel)]` / `formControl`)
+- Не используйте `range` для точного ручного ввода числа — для этого предназначен `ExtraInputNumber`
+- Не передавайте скалярную модель в режиме `[range]="true"` — модель должна быть массивом `[from, to]`
+- Не комбинируйте `[disabled]="true"` с обработчиком `(onSlideEnd)` — событие в этом состоянии не возникает
diff --git a/src/lib/components/stepper/stepper.figma.md b/src/lib/components/stepper/stepper.figma.md
new file mode 100644
index 00000000..9fbdad25
--- /dev/null
+++ b/src/lib/components/stepper/stepper.figma.md
@@ -0,0 +1,139 @@
+---
+component: ExtraStepper
+selector: extra-stepper
+import:
+  symbol: ExtraStepperComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '1079:7496'
+  componentKey: '13935dba8f227678ec2a853b311e916cd7fd3e98'
+  name: '<Stepper>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraStepper` — индикатор шагов пошагового процесса (мастер/wizard): последовательность этапов с текущим, завершёнными и оставшимися шагами. Поддерживает горизонтальную и вертикальную ориентацию, линейный режим и опциональные панели контента. Оборачивает PrimeNG `p-stepper` и data-driven строит шаги из массива `steps`.
+
+Компонент соответствует Figma-компоненту `<Stepper>` (nodeId `1079:7496`, библиотека «UI Kit (DS) v2.0»). Шаги задаются декларативно через `@Input() steps`, а не через ручную композицию под-элементов.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `[(value)]` | `number \| undefined` | `1` | Двусторонняя привязка значения активного шага — `[value]` задаёт текущий шаг, `(valueChange)` реагирует на переход |
+| `steps` | `ExtraStepperItem[]` | `[]` | Массив шагов; каждый элемент описывает `value`, `label`, опциональные `caption`, `content`, `disabled`, `invalid` |
+| `linear` | `boolean` | `false` | Запрещает переход к следующему шагу без завершения текущего — соответствует Figma-режиму `linear` |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Ориентация степпера — соответствует Figma-свойству ориентации |
+| `showPanels` | `boolean` | `true` | Отображать ли панели контента с навигационными кнопками под шагами |
+
+> `valueChange` — `@Output() EventEmitter<number | undefined>`. Используйте синтаксис `[(value)]` для двусторонней привязки.
+
+Структура одного элемента `ExtraStepperItem`:
+
+| Поле | Тип | Описание |
+|------|-----|---------|
+| `value` | `number \| undefined` | Уникальный идентификатор шага, по нему определяется активность |
+| `label` | `string` | Заголовок шага |
+| `caption` | `string` | Опциональная вторичная подпись под заголовком |
+| `content` | `string` | Опциональный текст панели контента (при `showPanels=true`) |
+| `disabled` | `boolean` | Шаг недоступен для перехода |
+| `invalid` | `boolean` | Шаг помечен как невалидный (ошибка); блокирует кнопку «Вперёд» |
+
+## Variants
+
+### Horizontal (горизонтальный степпер с панелями)
+
+Figma: `<Stepper>`, orientation=horizontal — nodeId `1079:7496`
+
+```html
+<extra-stepper
+  [(value)]="activeStep"
+  [steps]="steps"
+></extra-stepper>
+```
+
+```ts
+import { ExtraStepperComponent, ExtraStepperItem } from '@cdek-it/angular-ui-kit';
+
+// В компоненте:
+activeStep = 1;
+steps: ExtraStepperItem[] = [
+  { value: 1, label: 'Получатель', caption: 'данные', content: 'Шаг 1' },
+  { value: 2, label: 'Адрес', caption: 'доставки', content: 'Шаг 2' },
+  { value: 3, label: 'Оплата', caption: 'способ', content: 'Шаг 3' },
+];
+```
+
+### Vertical (вертикальный степпер)
+
+Figma: `<Stepper>`, orientation=vertical
+
+Шаги располагаются друг под другом, панель контента раскрывается под активным шагом.
+
+```html
+<extra-stepper
+  orientation="vertical"
+  [(value)]="activeStep"
+  [steps]="steps"
+></extra-stepper>
+```
+
+### Linear (линейный режим)
+
+Figma: `<Stepper>`, linear=true
+
+Переход к следующему шагу возможен только после завершения текущего.
+
+```html
+<extra-stepper
+  [linear]="true"
+  [(value)]="activeStep"
+  [steps]="steps"
+></extra-stepper>
+```
+
+### Steps only (только индикатор, без панелей)
+
+Figma: `<Stepper>`, без `<Stepper.StepPanel>`
+
+Отображает только последовательность шагов без панелей контента и навигационных кнопок.
+
+```html
+<extra-stepper
+  [showPanels]="false"
+  [(value)]="activeStep"
+  [steps]="steps"
+></extra-stepper>
+```
+
+## Slots
+
+Не используются. Композиция Figma — `<Stepper>` содержит внутренние под-элементы `<🔒Stepper.Item>` (шаг с номером/иконкой, коннектором и label) и `<🔒Stepper.StepPanel>` (панель контента). В коде эта структура строится декларативно из `@Input() steps`, а под-сущности PrimeNG (`p-step-list`, `p-step`, `p-step-item`, `p-step-panels`, `p-step-panel`) инкапсулированы внутри `ExtraStepperComponent` и не выносятся в шаблон потребителя:
+
+- `p-step-list` + `p-step` — горизонтальная лента шагов (`orientation="horizontal"`);
+- `p-step-item` + `p-step` — вертикальная композиция шага (`orientation="vertical"`);
+- `p-step-panels` + `p-step-panel` — панели контента, рендерятся при `showPanels=true`.
+
+Навигационные кнопки «Назад» и «Вперёд» внутри панелей реализованы через [Button](../button/button.figma.md).
+
+## Related
+
+- [Button](../button/button.figma.md) — навигационные кнопки «Назад» и «Вперёд» в панелях шагов
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Управляйте активным шагом через `[(value)]` — это сохраняет двустороннюю синхронизацию и эмитит `valueChange` при переходе.
+- Задавайте уникальный `value` каждому элементу `steps` — по нему определяется активность и порядок шагов.
+- Используйте `[linear]="true"` для обязательной последовательности, где шаги нельзя пропускать.
+- Помечайте шаг с ошибкой через `invalid: true` в элементе `steps` — это блокирует кнопку «Вперёд».
+
+**Don't:**
+- Не используйте Stepper для свободного переключения разделов — для этого предназначены Tabs.
+- Не путайте со списком событий по времени (Timeline) — Stepper ведёт по управляемому процессу.
+- Не задавайте `value` активного шага вне диапазона значений в `steps` — активный шаг не определится.
+- Не отключайте `showPanels`, если шаги должны нести контент и навигацию внутри степпера.
diff --git a/src/lib/components/tabs/tabs.figma.md b/src/lib/components/tabs/tabs.figma.md
new file mode 100644
index 00000000..43da5aa1
--- /dev/null
+++ b/src/lib/components/tabs/tabs.figma.md
@@ -0,0 +1,157 @@
+---
+component: ExtraTabs
+selector: extra-tabs
+import:
+  symbol: ExtraTabsComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '884:7324'
+  componentKey: 'ef7d7ac9ae94d9df8efe08ae85751d59c91779c3'
+  name: '<Tabs>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraTabsComponent` — компонент вкладок, организующий контент в несколько переключаемых разделов. Оборачивает PrimeNG `p-tabs` (`p-tablist` + `p-tabpanels`) и предлагает декларативный API: список вкладок задаётся одним массивом `tabs` типа `ExtraTabItem[]`, а не отдельными под-компонентами в шаблоне.
+
+Компонент соответствует Figma-компоненту `<Tabs>` (nodeId `884:7324`, библиотека «UI Kit (DS) v2.0»). Figma-свойство `show-nav-buttons` соответствует Angular-входу `scrollable` (навигационные стрелки появляются при горизонтальной прокрутке списка вкладок).
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `value` | `string \| number \| undefined` | `'0'` | Значение активной вкладки; совпадает с `value` одного из элементов `tabs` |
+| `tabs` | `ExtraTabItem[]` | `[]` | Массив описаний вкладок (см. структуру ниже в Slots) |
+| `scrollable` | `boolean` | `false` | Горизонтальная прокрутка списка вкладок — соответствует Figma-свойству `show-nav-buttons` |
+| `lazy` | `boolean` | `false` | Ленивая инициализация панелей: содержимое рендерится при первом открытии |
+
+Элемент массива `ExtraTabItem`:
+
+| Поле | Тип | Описание |
+|------|-----|---------|
+| `value` | `string` | Уникальный идентификатор вкладки; связывает заголовок и панель |
+| `label` | `string` | Текст заголовка вкладки |
+| `icon` | `string` | CSS-класс иконки заголовка; доступные иконки — [icons.md](../../figma-code-connect/icons.md) |
+| `disabled` | `boolean` | Отключённое состояние вкладки |
+| `badge` | `string` | Текст бейджа в заголовке вкладки |
+| `badgeSeverity` | `'success' \| 'info' \| 'warn' \| 'danger' \| 'secondary' \| 'contrast'` | Цветовая схема бейджа; цвета соответствуют токенам [tokens.md](../../figma-code-connect/tokens.md) |
+| `content` | `string` | Текстовое содержимое панели вкладки |
+
+## Variants
+
+### Несколько вкладок (базовый вариант)
+
+Figma: `<Tabs>`, show-nav-buttons=false — nodeId `884:7324`
+
+```html
+<extra-tabs value="0" [tabs]="tabs"></extra-tabs>
+```
+
+```ts
+import { ExtraTabsComponent, ExtraTabItem } from '@cdek-it/angular-ui-kit';
+
+// В компоненте:
+tabs: ExtraTabItem[] = [
+  { value: '0', label: 'Информация', content: 'Содержимое первой вкладки' },
+  { value: '1', label: 'Параметры', content: 'Содержимое второй вкладки' },
+  { value: '2', label: 'История', content: 'Содержимое третьей вкладки' },
+];
+```
+
+### Прокручиваемые вкладки (scrollable)
+
+Figma: `<Tabs>`, show-nav-buttons=true
+
+```html
+<extra-tabs value="0" [tabs]="tabs" [scrollable]="true"></extra-tabs>
+```
+
+### Вкладки с иконками
+
+Figma: `<Tabs>`, change-layout=иконка + текст
+
+Иконки заголовков задаются полем `icon` элемента `ExtraTabItem`; доступные иконки — [icons.md](../../figma-code-connect/icons.md).
+
+```html
+<extra-tabs value="0" [tabs]="tabs"></extra-tabs>
+```
+
+```ts
+import { ExtraTabsComponent, ExtraTabItem } from '@cdek-it/angular-ui-kit';
+
+// В компоненте (CSS-классы иконок — см. icons.md):
+tabs: ExtraTabItem[] = [
+  { value: '0', label: 'Профиль', icon: 'ti ti-user', content: 'Данные профиля' },
+  { value: '1', label: 'Настройки', icon: 'ti ti-settings', content: 'Параметры аккаунта' },
+];
+```
+
+### Вкладки с бейджами
+
+Бейдж задаётся полем `badge` (и опционально `badgeSeverity`); цвета бейджа соответствуют токенам [tokens.md](../../figma-code-connect/tokens.md).
+
+```html
+<extra-tabs value="0" [tabs]="tabs"></extra-tabs>
+```
+
+```ts
+import { ExtraTabsComponent, ExtraTabItem } from '@cdek-it/angular-ui-kit';
+
+// В компоненте:
+tabs: ExtraTabItem[] = [
+  { value: '0', label: 'Входящие', badge: '99+', badgeSeverity: 'danger', content: 'Список входящих' },
+  { value: '1', label: 'Архив', badge: '5', content: 'Архивные записи' },
+];
+```
+
+### С отключённой вкладкой
+
+Отключение задаётся полем `disabled` элемента `ExtraTabItem`.
+
+```html
+<extra-tabs value="0" [tabs]="tabs"></extra-tabs>
+```
+
+```ts
+import { ExtraTabsComponent, ExtraTabItem } from '@cdek-it/angular-ui-kit';
+
+// В компоненте:
+tabs: ExtraTabItem[] = [
+  { value: '0', label: 'Доступно', content: 'Активная вкладка' },
+  { value: '1', label: 'Недоступно', disabled: true, content: 'Эта вкладка отключена' },
+];
+```
+
+## Slots
+
+Компонент не использует `<ng-content>` и структурные директивы. Структура вкладок (заголовки и панели) описывается декларативно через массив `tabs`, который во внутреннем шаблоне разворачивается в PrimeNG-разметку:
+
+| Уровень | PrimeNG-элемент | Источник данных |
+|---------|-----------------|-----------------|
+| Контейнер | `p-tabs` | входы `value`, `scrollable`, `lazy` |
+| Список заголовков | `p-tablist` → `p-tab` (на каждый элемент `tabs`) | поля `label`, `icon`, `badge`, `disabled` элемента `ExtraTabItem` |
+| Панели контента | `p-tabpanels` → `p-tabpanel` (на каждый элемент `tabs`) | поле `content` элемента `ExtraTabItem` |
+
+Связь заголовка и панели обеспечивается полем `value`: совпадающие значения в `p-tab` и `p-tabpanel` объединяют их в одну вкладку.
+
+## Related
+
+- [Иконки](../../figma-code-connect/icons.md) — CSS-классы иконок для поля `icon`
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены бейджей вкладок
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Задавайте уникальный `value` каждому элементу `tabs` и используйте то же значение во входе `value` для выбора активной вкладки по умолчанию.
+- Включайте `[scrollable]="true"`, когда вкладок много и они не помещаются по ширине контейнера.
+- Используйте `[lazy]="true"` для тяжёлого содержимого панелей, чтобы откладывать их инициализацию до первого открытия.
+- Для иконок заголовков используйте CSS-классы из справочника [icons.md](../../figma-code-connect/icons.md).
+
+**Don't:**
+- Не дублируйте значения `value` у разных элементов `tabs` — это нарушит связь заголовка и панели.
+- Не инлайньте CSS-классы иконок вручную в обход [icons.md](../../figma-code-connect/icons.md).
+- Не задавайте во входе `value` идентификатор, которого нет ни в одном элементе `tabs` — активная вкладка не будет выбрана.
diff --git a/src/lib/components/tag/tag.figma.md b/src/lib/components/tag/tag.figma.md
new file mode 100644
index 00000000..f0bd84e1
--- /dev/null
+++ b/src/lib/components/tag/tag.figma.md
@@ -0,0 +1,121 @@
+---
+component: ExtraTag
+selector: extra-tag
+import:
+  symbol: ExtraTagComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '21:1238'
+  componentKey: '7dd396d5b311b096c403e1c4764dcbf700eddfbd'
+  name: '<Tag>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraTag` — статичная некликабельная метка статуса или категории: короткий текст с тоном по `severity` и опциональной иконкой. Оборачивает PrimeNG `p-tag` и используется для обозначения статусов объектов, категорий и семантики записей в списках и таблицах.
+
+Компонент соответствует Figma-компоненту `<Tag>` (nodeId `21:1238`). Tag не выполняет действий: для интерактивной метки используйте Chip, для overlay-счётчика — Badge.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `value` | `string` | `''` | Текст метки — соответствует Figma-свойству `text-tag` |
+| `severity` | `'primary' \| 'secondary' \| 'success' \| 'info' \| 'warn' \| 'danger'` | `'primary'` | Семантический тон — соответствует Figma-свойству `severity` (значение `primary` ↔ Figma `basic`, `warn` ↔ Figma `warning`) |
+| `rounded` | `boolean` | `false` | Скруглённая форма метки — соответствует Figma-свойству `rounded` |
+| `icon` | `string` | `''` | CSS-класс иконки (например `'ti ti-check'`) — соответствует Figma-свойствам `show-icon` / `change-icon`; доступные иконки — [icons.md](../../figma-code-connect/icons.md) |
+
+## Variants
+
+### Basic (нейтральная метка)
+
+Figma: `<Tag>`, severity=basic (в коде: `severity="primary"`), rounded=false — nodeId `21:1237`
+
+```html
+<extra-tag value="Tag"></extra-tag>
+```
+
+### Secondary (вторичный тон)
+
+Figma: `<Tag>`, severity=secondary, rounded=false — nodeId `2262:1019`
+
+```html
+<extra-tag value="Черновик" severity="secondary"></extra-tag>
+```
+
+### Info (информационный тон)
+
+Figma: `<Tag>`, severity=info, rounded=false — nodeId `21:1235`
+
+```html
+<extra-tag value="В работе" severity="info"></extra-tag>
+```
+
+### Success (успех)
+
+Figma: `<Tag>`, severity=success, rounded=false — nodeId `21:1236`
+
+```html
+<extra-tag value="Готово" severity="success"></extra-tag>
+```
+
+### Warning (предупреждение)
+
+Figma: `<Tag>`, severity=warning (в коде: `severity="warn"`), rounded=false — nodeId `21:1233`
+
+```html
+<extra-tag value="Ожидает" severity="warn"></extra-tag>
+```
+
+### Danger (ошибка)
+
+Figma: `<Tag>`, severity=danger, rounded=false — nodeId `21:1234`
+
+```html
+<extra-tag value="Ошибка" severity="danger"></extra-tag>
+```
+
+### Rounded (скруглённая форма)
+
+Figma: `<Tag>`, severity=basic, rounded=true — nodeId `21:1287`
+
+```html
+<extra-tag value="Tag" [rounded]="true"></extra-tag>
+```
+
+### С иконкой
+
+Figma: `<Tag>`, show-icon=true; набор иконок — [icons.md](../../figma-code-connect/icons.md)
+
+```html
+<extra-tag value="Готово" severity="success" icon="ti ti-check"></extra-tag>
+```
+
+## Slots
+
+Не используются. Содержимое метки передаётся через `@Input() value` и `@Input() icon`.
+
+## Related
+
+- [Иконки](../../figma-code-connect/icons.md) — доступные иконки (`ti ti-*`)
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены severity
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+- [Button](../button/button.figma.md) — кнопка для действий (Tag действий не выполняет)
+- [InputText](../inputtext/inputtext.figma.md) — текстовое поле ввода
+- [Dialog](../dialog/dialog.figma.md) — модальное окно
+
+## Do / Don't
+
+**Do:**
+- Используйте `severity` для семантического тона: `success` для завершённых, `danger` для ошибок, `warn` для предупреждений
+- Задавайте иконку через справочник [icons.md](../../figma-code-connect/icons.md), а не вручную
+- Используйте Tag как статичный индикатор статуса или категории
+
+**Don't:**
+- Не используйте Tag для интерактивных меток (удаление, выбор) — для этого предназначен Chip
+- Не используйте Tag как overlay-счётчик у иконки — для этого предназначен Badge
+- Не инлайньте CSS-классы иконок вручную — используйте справочник [icons.md](../../figma-code-connect/icons.md)
+- Не путайте значения тонов: в коде `primary` и `warn`, в Figma — `basic` и `warning`
diff --git a/src/lib/components/textarea/textarea.figma.md b/src/lib/components/textarea/textarea.figma.md
new file mode 100644
index 00000000..2e04610a
--- /dev/null
+++ b/src/lib/components/textarea/textarea.figma.md
@@ -0,0 +1,175 @@
+---
+component: ExtraTextarea
+selector: extra-textarea
+import:
+  symbol: ExtraTextareaComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '309:1582'
+  componentKey: 'a4d238e342705216c67068f12f4b28da12094ab7'
+  name: '<Textarea>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraTextareaComponent` — атомарное многострочное поле для ввода длинного произвольного текста (комментарий, описание, заметка). Реализует `ControlValueAccessor` и работает с `[(ngModel)]` и `[formControl]` «из коробки».
+
+Компонент соответствует Figma-компоненту `<Textarea>` (nodeId `309:1582`, fileKey `Khh7arsuXss3ncqy1Dz3OZ`, библиотека «UI Kit (DS) v2.0»). Поле «голое»: label, подсказка, сообщение об ошибке и счётчик символов навешиваются снаружи — через `<extra-input-group>` или `<extra-form-field>`.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `placeholder` | `string` | `''` | Подсказка при пустом поле — соответствует Figma-свойству `text-placeholder` / `placeholder` |
+| `size` | `'small' \| 'base' \| 'large' \| 'xlarge'` | `'base'` | Размер поля; `small`/`large` маппируются на PrimeNG `pSize`, `xlarge` — на CSS-класс `p-textarea-xlg` |
+| `readonly` | `boolean` | `false` | Только для чтения — соответствует Figma-состоянию `state=readonly` |
+| `showClear` | `boolean` | `false` | Показывает иконку очистки (×) при наличии значения — соответствует Figma-свойству `show-clear` |
+| `fluid` | `boolean` | `false` | Растягивает поле на всю ширину контейнера |
+| `autoResize` | `boolean` | `false` | Автоподстройка высоты под содержимое — соответствует Figma-свойству `show-resize` |
+| `rows` | `number` | `3` | Стартовая высота поля в строках |
+| `cols` | `number \| undefined` | `undefined` | Ширина поля в символах |
+| `(onResize)` | `EventEmitter<{ height: string } \| {}>` | — | Событие при изменении высоты поля пользователем |
+| `(onClear)` | `EventEmitter<void>` | — | Событие при нажатии на иконку очистки (только при `showClear=true`) |
+| `[(ngModel)]` / `[formControl]` | `string` | `''` | Значение поля через ControlValueAccessor — соответствует Figma-свойству `text-inputarea` |
+
+> `invalid` — вычисляемое свойство: берётся автоматически из связанного `NgControl` (соответствует Figma-состоянию `state=danger`). Устанавливать вручную нельзя.
+
+## Variants
+
+### Default / Base (базовое поле)
+
+Figma: `<Textarea>`, state=default, placeholder=true, has-floatlabel=false — nodeId `309:1608`
+
+```html
+<extra-textarea
+  placeholder="Введите текст..."
+  [(ngModel)]="value"
+  name="comment"
+></extra-textarea>
+```
+
+### С кнопкой очистки (show-clear)
+
+Figma: `<Textarea>`, state=default, show-clear=true — nodeId `309:1608`
+
+```html
+<extra-textarea
+  placeholder="Комментарий..."
+  [showClear]="true"
+  [(ngModel)]="comment"
+  name="comment"
+></extra-textarea>
+```
+
+### Автоподстройка высоты (autoResize)
+
+Figma: `<Textarea>`, show-resize=true — nodeId `309:1608`
+
+```html
+<extra-textarea
+  placeholder="Описание..."
+  [autoResize]="true"
+  [(ngModel)]="description"
+  name="description"
+></extra-textarea>
+```
+
+### Заданная высота (rows)
+
+Figma: `<Textarea>`, state=default, placeholder=true
+
+```html
+<extra-textarea
+  placeholder="Заметка..."
+  [rows]="6"
+  [(ngModel)]="note"
+  name="note"
+></extra-textarea>
+```
+
+### Disabled (отключённое поле)
+
+Figma: `<Textarea>`, state=disabled — nodeId `309:1583`
+
+```html
+<extra-textarea
+  placeholder="Недоступно"
+  [formControl]="disabledControl"
+></extra-textarea>
+```
+
+```ts
+disabledControl = new FormControl({ value: '', disabled: true });
+```
+
+### Readonly (только для чтения)
+
+Figma: `<Textarea>`, state=readonly — nodeId `14980:20329`
+
+```html
+<extra-textarea
+  [readonly]="true"
+  [(ngModel)]="readonlyValue"
+  name="roField"
+></extra-textarea>
+```
+
+### Fluid / Large (на всю ширину, большой размер)
+
+Figma: `<Textarea>`, state=default
+
+```html
+<extra-textarea
+  size="large"
+  [fluid]="true"
+  placeholder="Широкое поле"
+  [(ngModel)]="value"
+  name="wideField"
+></extra-textarea>
+```
+
+### С реактивной формой (formControl + валидация)
+
+Figma: `<Textarea>`, state=danger, placeholder=true — nodeId `309:1589` (невалидное состояние определяется через NgControl автоматически)
+
+```ts
+descriptionControl = new FormControl('', [Validators.required, Validators.maxLength(500)]);
+```
+
+```html
+<extra-textarea
+  placeholder="Опишите проблему"
+  [formControl]="descriptionControl"
+></extra-textarea>
+```
+
+## Slots
+
+Нет — поле атомарное. Проекция содержимого не поддерживается. Для добавления prefix/suffix-иконок используйте `<extra-input-group>` — см. [inputgroup.figma.md](../inputgroup/inputgroup.figma.md).
+
+## Related
+
+- [InputText](../inputtext/inputtext.figma.md) — однострочное поле для короткого текста
+- [InputGroup](../inputgroup/inputgroup.figma.md) — обёртка с prefix/suffix-слотами
+- [Button](../button/button.figma.md) — кнопки действий рядом с полем
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены состояний поля
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Используйте `[(ngModel)]` или `[formControl]` — компонент реализует `ControlValueAccessor` и именно через них передаётся значение.
+- Управляйте состоянием `disabled` через `FormControl.disable()` / `FormControl.enable()` — это сохраняет dirty/touched-флаги.
+- Включайте `[autoResize]="true"` при непредсказуемом объёме текста, чтобы поле росло по содержимому.
+- Задавайте `[rows]` для стартовой высоты поля и `[fluid]="true"` в формах на всю ширину.
+- Для сброса поля через иконку × включайте `[showClear]="true"` и подписывайтесь на `(onClear)` при необходимости пост-обработки.
+- Оберните поле в `<extra-form-field>` или `<extra-input-group>` для добавления label, подсказки, ошибки и счётчика символов.
+
+**Don't:**
+- Не подменяйте `value` через прямой DOM (`document.querySelector('textarea').value = ...`) — теряется `dirty`-state и Angular-реактивность.
+- Не задавайте `[disabled]="true"` как Input-атрибут напрямую — компонент не объявляет `@Input() disabled`; передавайте через `FormControl` или `ControlValueAccessor`.
+- Не используйте поле без `[(ngModel)]` / `[formControl]` — без привязки значение не синхронизируется с моделью.
+- Не используйте `extra-textarea` для короткого однострочного текста — для него предназначен [InputText](../inputtext/inputtext.figma.md).
diff --git a/src/lib/components/tieredmenu/tieredmenu.figma.md b/src/lib/components/tieredmenu/tieredmenu.figma.md
new file mode 100644
index 00000000..cb130b50
--- /dev/null
+++ b/src/lib/components/tieredmenu/tieredmenu.figma.md
@@ -0,0 +1,126 @@
+---
+component: ExtraTieredMenu
+selector: extra-tieredmenu
+import:
+  symbol: ExtraTieredMenuComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '18204:57983'
+  componentKey: 'edd218458f3543fe03731107b9cebf1a8810aa17'
+  name: '<TieredMenu>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraTieredMenu` — вертикальное иерархическое меню с каскадными подменю, которые раскрываются вложенными оверлеями при наведении или фокусе на родительском пункте. Оборачивает PrimeNG `p-tieredmenu` и принимает дерево пунктов через единственную модель `model`.
+
+Компонент соответствует Figma-компоненту `<TieredMenu>` (nodeId `18204:57983`) из библиотеки UI Kit (DS) v2.0. В отличие от `Menu` (плоский список без каскадов), `Menubar` (горизонтальная строка) и `PanelMenu` (аккордеон с раскрытием на месте), `ExtraTieredMenu` показывает вложенные подменю всплывающими панелями. Структура пунктов (`label`, `icon`, вложенность через `items[].items`) задаётся данными, а не Figma-свойствами компонента.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `model` | `ExtraMenuItem[]` | `[]` | Дерево пунктов меню; вложенность задаётся полем `items` каждого пункта — соответствует Figma-структуре пунктов и подменю |
+| `autoDisplay` | `boolean` | `true` | Раскрывать подменю при наведении на родительский пункт |
+| `tabindex` | `number \| undefined` | `undefined` | Порядок фокуса при навигации клавиатурой |
+
+Поля пункта `ExtraMenuItem` (передаются внутри `model`):
+
+| Поле | Тип | Описание |
+|------|-----|---------|
+| `label` | `string` | Текст пункта |
+| `icon` | `string` | CSS-класс иконки пункта; доступные иконки — [icons.md](../../figma-code-connect/icons.md) |
+| `items` | `ExtraMenuItem[]` | Вложенные пункты подменю (каскад) |
+| `separator` | `boolean` | Пункт-разделитель между группами |
+| `disabled` | `boolean` | Отключённый пункт |
+| `badge` | `string` | Текст бейджа пункта |
+| `command` | `(event) => void` | Обработчик клика по пункту |
+| `url` / `routerLink` | `string \| any` | Переход по пункту-ссылке |
+
+## Variants
+
+### Базовое меню с вложенными подменю
+
+Figma: `<TieredMenu>`, nodeId `18204:57983`
+
+```html
+<extra-tieredmenu [model]="items"></extra-tieredmenu>
+```
+
+```ts
+items: ExtraMenuItem[] = [
+  {
+    label: 'Отправления',
+    icon: 'ti ti-package',
+    items: [
+      { label: 'Новые' },
+      { label: 'В обработке' },
+      { label: 'Возвраты', items: [{ label: 'Ожидают' }, { label: 'Завершённые' }] },
+    ],
+  },
+  { label: 'Маршруты' },
+  { label: 'Настройки', icon: 'ti ti-settings', disabled: true },
+];
+```
+
+### Без авто-раскрытия по наведению (autoDisplay=false)
+
+Figma: `<TieredMenu>` (поведение задаётся в коде)
+
+```html
+<extra-tieredmenu [model]="items" [autoDisplay]="false"></extra-tieredmenu>
+```
+
+### С порядком фокуса для клавиатуры (tabindex)
+
+Figma: `<TieredMenu>` (значение задаётся в коде)
+
+```html
+<extra-tieredmenu [model]="items" [tabindex]="0"></extra-tieredmenu>
+```
+
+### Кастомный шаблон пункта
+
+Figma: `<TieredMenu>` (содержимое пункта задаётся через слот `#item`)
+
+```html
+<extra-tieredmenu [model]="items">
+  <ng-template #item let-item let-hasSubmenu="hasSubmenu">
+    <a class="p-tieredmenu-item-link flex items-center gap-2 w-full">
+      @if (item.icon) {
+        <span [class]="'p-tieredmenu-item-icon ' + item.icon"></span>
+      }
+      <span class="p-tieredmenu-item-label">{{ item.label }}</span>
+      @if (hasSubmenu) {
+        <span class="p-tieredmenu-submenu-icon ti ti-chevron-right"></span>
+      }
+    </a>
+  </ng-template>
+</extra-tieredmenu>
+```
+
+## Slots
+
+- **`#item`** — шаблонный слот (`<ng-template #item let-item let-hasSubmenu="hasSubmenu">`) для кастомного отображения пункта меню. Контекст: `item` — текущий `ExtraMenuItem`, `hasSubmenu` — признак наличия вложенных пунктов. Без слота пункт рендерится по полям модели (`label`, `icon`).
+
+## Related
+
+- [Icons](../../figma-code-connect/icons.md) — доступные иконки (`ti ti-*`) для пунктов меню
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Используйте для иерархической навигации и многоуровневых наборов действий со всплывающими подменю
+- Задавайте структуру через `model` и вложенность `items`, а не через отдельные компоненты
+- Используйте слот `#item` для пунктов с описанием, бейджем или нестандартной разметкой
+- Группируйте пункты разделителями (`separator: true`) для логических блоков
+
+**Don't:**
+- Не используйте `ExtraTieredMenu` для плоского списка действий без каскадов — для этого есть `Menu`
+- Не применяйте для раскрытия подменю на месте (аккордеон) — для этого есть `PanelMenu`
+- Не инлайньте CSS-классы иконок вручную — используйте справочник [icons.md](../../figma-code-connect/icons.md)
+- Не делайте вложенность глубже 3 уровней — каскад подменю станет неудобным для навигации
diff --git a/src/lib/components/timeline/timeline.figma.md b/src/lib/components/timeline/timeline.figma.md
new file mode 100644
index 00000000..a071b482
--- /dev/null
+++ b/src/lib/components/timeline/timeline.figma.md
@@ -0,0 +1,117 @@
+---
+component: ExtraTimeline
+selector: extra-timeline
+import:
+  symbol: ExtraTimelineComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '1090:3325'
+  componentKey: '333455156cc12cb69676f82e164038b8b1174f64'
+  name: '<Timeline>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraTimeline` — компонент для визуализации последовательности событий в хронологическом порядке: ось с маркерами-точками, коннекторами-линиями, основным и опциональным противоположным контентом (дата/время). Компонент data-driven: события передаются массивом через `@Input() value`, а отрисовка содержимого, противоположной стороны и маркера настраивается через контент-шаблоны. Оборачивает PrimeNG `p-timeline`.
+
+Компонент соответствует Figma-компоненту `<Timeline>` (nodeId `1090:3325`) из библиотеки UI Kit (DS) v2.0. В отличие от `Stepper` (управление прохождением wizard) и `Steps` (прогресс по этапам задачи), `Timeline` отображает ленту уже произошедших или запланированных событий и не управляет процессом.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `value` | `any[]` | `[]` | Массив событий для отображения; каждое событие доступно в контент-шаблонах через контекст `let-event` |
+| `align` | `'left' \| 'right' \| 'alternate' \| 'top' \| 'bottom'` | `'left'` | Положение контента относительно оси; для вертикального layout — `left`/`right`/`alternate`, для горизонтального — `top`/`bottom`/`alternate` |
+| `layout` | `'vertical' \| 'horizontal'` | `'vertical'` | Ориентация ленты — соответствует Figma-свойству `layout` (варианты `vertical`, `horizontal`) |
+| `showCaption` | `boolean` | `true` | Показывать ли противоположный (caption) контент; при `false` слот `extraTimelineOpposite` не отрисовывается |
+| `line` | `'solid' \| 'dashed' \| 'dotted' \| 'none'` | `'solid'` | Стиль коннектора-линии между маркерами |
+| `icon` | `string` | `''` | CSS-класс иконки маркера по умолчанию (например `'pi pi-check'`); доступные иконки — [icons.md](../../figma-code-connect/icons.md) |
+| `markerColor` | `string` | `''` | Цвет маркера; задаётся токеном, см. [tokens.md](../../figma-code-connect/tokens.md) |
+
+## Variants
+
+### Vertical (вертикальная ось, по умолчанию)
+
+Figma: `<Timeline>`, layout=vertical — nodeId `1090:3317`
+
+```html
+<extra-timeline [value]="events">
+  <ng-template extraTimelineContent let-event>{{ event.value }}</ng-template>
+</extra-timeline>
+```
+
+### Horizontal (горизонтальная ось)
+
+Figma: `<Timeline>`, layout=horizontal — nodeId `1090:3318`
+
+```html
+<extra-timeline [value]="events" layout="horizontal" align="top">
+  <ng-template extraTimelineContent let-event>{{ event.value }}</ng-template>
+</extra-timeline>
+```
+
+### Alternate (контент по обе стороны оси)
+
+Figma: `<Timeline>` (общий компонент; чередование задаётся в коде через `align`)
+
+```html
+<extra-timeline [value]="events" align="alternate">
+  <ng-template extraTimelineContent let-event>{{ event.value }}</ng-template>
+</extra-timeline>
+```
+
+### С противоположным контентом (caption)
+
+Figma: `<Timeline>` (противоположная сторона — дата/время)
+
+```html
+<extra-timeline [value]="events">
+  <ng-template extraTimelineContent let-event>{{ event.value }}</ng-template>
+  <ng-template extraTimelineOpposite let-event>{{ event.caption }}</ng-template>
+</extra-timeline>
+```
+
+### С кастомным маркером
+
+Figma: `<Timeline>` (маркер задаётся в коде через шаблон или `icon`)
+
+```html
+<extra-timeline [value]="events" icon="pi pi-check">
+  <ng-template extraTimelineContent let-event>{{ event.value }}</ng-template>
+  <ng-template extraTimelineMarker let-event>
+    <span class="custom-marker"><i [class]="event.icon"></i></span>
+  </ng-template>
+</extra-timeline>
+```
+
+## Slots
+
+Содержимое проектируется через контент-директивы, применяемые к `<ng-template>` внутри компонента; каждый шаблон получает текущее событие через контекст `let-event`:
+
+- **`extraTimelineContent`** — основной контент события. Если не задан, выводится строковое значение события.
+- **`extraTimelineOpposite`** — контент с противоположной стороны оси (дата/время). Отрисовывается только при `showCaption=true`.
+- **`extraTimelineMarker`** — кастомный маркер события. Если не задан, используется маркер по умолчанию с иконкой из `@Input() icon`.
+
+## Related
+
+- [ExtraButton](../button/button.figma.md) — кнопки действий рядом с лентой событий
+- [Иконки](../../figma-code-connect/icons.md) — доступные иконки маркеров (`pi pi-*`)
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены маркера и линии
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Используйте `layout="vertical"` для длинных хронологий и историй изменений; `layout="horizontal"` — для коротких этапов на широком экране
+- Передавайте дату/время через `extraTimelineOpposite` как вторичный контент
+- Задавайте `align="alternate"` для симметричного размещения контента по обе стороны оси
+- Используйте `extraTimelineMarker` или `icon` для персонализации маркера по типу события — см. [icons.md](../../figma-code-connect/icons.md)
+
+**Don't:**
+- Не используйте `Timeline` для управления прохождением процесса — для wizard применяйте `Stepper`, для прогресса по задаче — `Steps`
+- Не задавайте вертикальные значения `align` (`left`/`right`) при `layout="horizontal"` — используйте `top`/`bottom`
+- Не инлайньте цвет маркера напрямую — задавайте `markerColor` токеном из [tokens.md](../../figma-code-connect/tokens.md)
+- Не дублируйте основной контент в `extraTimelineOpposite` — противоположная сторона предназначена для вторичной информации
diff --git a/src/lib/components/toast/toast.figma.md b/src/lib/components/toast/toast.figma.md
new file mode 100644
index 00000000..57763c23
--- /dev/null
+++ b/src/lib/components/toast/toast.figma.md
@@ -0,0 +1,189 @@
+---
+component: ExtraToast
+selector: extra-toast
+import:
+  symbol: ExtraToastComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '15953:4478'
+  componentKey: 'e62d7e276583e57fc42b31096f545e591ec18979'
+  name: '<Toast>'
+status: stable
+updated: '2026-06-23'
+---
+
+## Overview
+
+`ExtraToast` — контейнер всплывающих самозакрывающихся уведомлений поверх интерфейса. Сообщения не вставляются в шаблон напрямую: компонент монтируется один раз (обычно в корне приложения), а показ выполняется императивно через `ExtraToastService`. Оборачивает PrimeNG `p-toast` и подбирает иконку автоматически по `severity`.
+
+Для работы требуется зарегистрировать провайдеры через `provideExtraToast()` в `ApplicationConfig.providers`.
+
+Компонент соответствует Figma-узлу `<Toast>` (nodeId `15953:4478`) — это всплывающее самозакрывающееся уведомление, в отличие от инлайн-компонента `<Message>` (nodeId `15963:3163`), встроенного в поток страницы. В ходе рефакторинга toast-сценарий был отделён от inline `<Message>` в самостоятельный Figma-узел `<Toast>`.
+
+## Props mapping
+
+Входные свойства задаются на самом контейнере `<extra-toast>` и управляют отображением всех сообщений.
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `position` | `'top-right' \| 'top-left' \| 'top-center' \| 'bottom-right' \| 'bottom-left' \| 'bottom-center' \| 'center'` | `'top-right'` | Позиция группы уведомлений на экране |
+| `key` | `string \| undefined` | `undefined` | Ключ контейнера; показывают только сообщения с тем же `key` (несколько независимых очередей) |
+| `life` | `number` | `5000` | Время автозакрытия в миллисекундах |
+| `pt` | `Record<string, any> \| undefined` | `undefined` | PrimeNG PassThrough для тонкой настройки внутренних элементов |
+
+Само сообщение передаётся в `ExtraToastService.add()` объектом `ExtraToastMessage`:
+
+| Поле | Тип | Описание |
+|------|-----|---------|
+| `severity` | `'success' \| 'info' \| 'warn' \| 'error' \| 'secondary' \| 'contrast'` | Семантический акцент; определяет цвет и иконку |
+| `summary` | `string` | Заголовок уведомления |
+| `detail` | `string` | Подробный текст под заголовком |
+| `life` | `number` | Время автозакрытия в миллисекундах (переопределяет `life` контейнера) |
+| `icon` | `string` | CSS-класс иконки; по умолчанию подбирается по `severity` — доступные иконки см. [icons.md](../../figma-code-connect/icons.md) |
+| `closable` | `boolean` | Показывать кнопку закрытия |
+| `key` | `string` | Ключ целевого контейнера `<extra-toast>` |
+
+Контейнер монтируется в шаблоне без сообщений, а показ выполняется через сервис.
+
+```html
+<extra-toast></extra-toast>
+```
+
+```ts
+import { Component, inject } from '@angular/core';
+import { ExtraToastComponent, ExtraToastService } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-root',
+  imports: [ExtraToastComponent],
+  template: '<extra-toast></extra-toast>',
+})
+export class AppComponent {
+  private readonly toast = inject(ExtraToastService);
+
+  show(): void {
+    this.toast.add({ severity: 'success', summary: 'Готово', detail: 'Операция выполнена' });
+  }
+}
+```
+
+## Variants
+
+Варианты различаются по `severity` сообщения. Контейнер один и тот же; меняется объект, переданный в `ExtraToastService.add()`. Figma-узел `<Toast>` задаёт два свойства: `severity` (`info | success | warning | danger`) и `timer` (`false | true`).
+
+### Info (информационное)
+
+Figma: `severity=info`
+
+```html
+<extra-toast></extra-toast>
+```
+
+```ts
+this.toast.add({ severity: 'info', summary: 'Информация', detail: 'Дополнительный текст' });
+```
+
+### Success (успех)
+
+Figma: `severity=success`
+
+```html
+<extra-toast></extra-toast>
+```
+
+```ts
+this.toast.add({ severity: 'success', summary: 'Готово', detail: 'Операция выполнена' });
+```
+
+### Warn (предупреждение)
+
+Figma: `severity=warning`
+
+```html
+<extra-toast></extra-toast>
+```
+
+```ts
+this.toast.add({ severity: 'warn', summary: 'Внимание', detail: 'Проверьте данные' });
+```
+
+### Error / danger (ошибка)
+
+Figma: `severity=danger`
+
+```html
+<extra-toast></extra-toast>
+```
+
+```ts
+this.toast.add({ severity: 'error', summary: 'Ошибка', detail: 'Не удалось сохранить' });
+```
+
+### С кнопкой закрытия (closable)
+
+```html
+<extra-toast></extra-toast>
+```
+
+```ts
+this.toast.add({ severity: 'info', summary: 'Сообщение', closable: true });
+```
+
+### С увеличенным временем жизни (life)
+
+Figma: `timer=true`
+
+```html
+<extra-toast [life]="10000"></extra-toast>
+```
+
+```ts
+this.toast.add({ severity: 'success', summary: 'Сохранено', life: 10000 });
+```
+
+### Позиционирование (position)
+
+```html
+<extra-toast position="bottom-center"></extra-toast>
+```
+
+```ts
+this.toast.add({ severity: 'info', summary: 'Уведомление снизу' });
+```
+
+### Несколько очередей (key)
+
+```html
+<extra-toast key="orders"></extra-toast>
+```
+
+```ts
+this.toast.add({ key: 'orders', severity: 'success', summary: 'Заказ создан' });
+```
+
+## Slots
+
+Контент уведомления формируется из полей `summary` и `detail` объекта сообщения и не проектируется через `<ng-content>`. Структурные слоты не используются.
+
+## Related
+
+- [Message](../message/message.figma.md) — инлайн-вариант сообщения со статусом; покрывает Figma `<Message>` (`toast=false`)
+- [Button](../button/button.figma.md) — кнопка закрытия использует общий контракт
+- [Иконки](../../figma-code-connect/icons.md) — доступные иконки `severity` и `icon`
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Монтируйте один `<extra-toast>` в корне приложения и показывайте сообщения через `ExtraToastService.add()`
+- Регистрируйте `provideExtraToast()` в `ApplicationConfig.providers` один раз
+- Подбирайте `severity` по смыслу: `error` для ошибок, `warn` для предупреждений, `success` для подтверждений
+- Используйте `key` для независимых очередей уведомлений (например системные и контекстные)
+- Полагайтесь на автоподбор иконки по `severity`; переопределяйте `icon` только при необходимости — используйте справочник [icons.md](../../figma-code-connect/icons.md)
+
+**Don't:**
+- Не используйте toast для устойчивого статуса рядом с формой или секцией — для инлайн-фидбэка предназначен [Message](../message/message.figma.md)
+- Не монтируйте несколько `<extra-toast>` с одинаковым `position` и `key` — сообщения продублируются
+- Не инлайньте CSS-классы иконок вручную в обход справочника [icons.md](../../figma-code-connect/icons.md)
+- Не задавайте слишком короткий `life` для текста, который нужно успеть прочитать
diff --git a/src/lib/components/togglebutton/togglebutton.figma.md b/src/lib/components/togglebutton/togglebutton.figma.md
new file mode 100644
index 00000000..713a37a5
--- /dev/null
+++ b/src/lib/components/togglebutton/togglebutton.figma.md
@@ -0,0 +1,181 @@
+---
+component: ToggleButtonComponent
+selector: toggle-button
+import:
+  symbol: ToggleButtonComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '174:1363'
+  componentKey: '19f1388f80113907cee5bc24117e98c7d18eb16c'
+  name: '<ToggleButton>'
+status: stable
+updated: '2026-06-23'
+---
+
+## Overview
+
+`ToggleButtonComponent` — кнопка-переключатель с двумя состояниями (нажата / не нажата). Оборачивает PrimeNG `p-togglebutton` и реализует `ControlValueAccessor`, поэтому интегрируется с `[(ngModel)]` и реактивными формами через `formControl` / `formControlName`. Может менять подпись и иконку для включённого и выключенного состояний.
+
+Компонент соответствует Figma-компоненту `<ToggleButton>` (nodeId `174:1363`). Figma-свойство `checked` маппируется на модель значения, а `state`, `size`, `icon-position` и `icon-only` — на Angular-инпуты (см. раздел Props mapping). Не путать с `ToggleSwitch` (свитч настройки, `role=switch`) и `SelectButton` (группа выбора одного из набора).
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `onLabel` | `string` | `'Вкл'` | Текст во включённом состоянии — соответствует Figma-свойству `checked=true` |
+| `offLabel` | `string` | `'Выкл'` | Текст в выключенном состоянии — соответствует Figma-свойству `checked=false` |
+| `onIcon` | `string \| undefined` | `undefined` | CSS-класс иконки во включённом состоянии; доступные иконки — [icons.md](../../figma-code-connect/icons.md) |
+| `offIcon` | `string \| undefined` | `undefined` | CSS-класс иконки в выключенном состоянии; доступные иконки — [icons.md](../../figma-code-connect/icons.md) |
+| `iconPos` | `'left' \| 'right'` | `'left'` | Позиция иконки — соответствует Figma-свойству `icon-position` |
+| `size` | `'small' \| 'base' \| 'large' \| 'xlarge'` | `'base'` | Размер кнопки — соответствует Figma-свойству `size` |
+| `disabled` | `boolean` | `false` | Отключённое состояние — соответствует Figma-свойству `state=disabled` |
+| `iconOnly` | `boolean` | `false` | Режим «только иконка» без текста — соответствует Figma-свойству `icon-only` |
+| `allowEmpty` | `boolean \| undefined` | `undefined` | Разрешает снимать выбор повторным нажатием |
+| `fluid` | `boolean` | `false` | Растяжение кнопки на всю ширину контейнера |
+| `ariaLabel` | `string \| undefined` | `undefined` | Метка для программ экранного доступа |
+| `ariaLabelledBy` | `string \| undefined` | `undefined` | Идентификатор элемента с меткой для доступности |
+| `inputId` | `string \| undefined` | `undefined` | Идентификатор внутреннего элемента; используется для связки с `<label for>` |
+| `tabindex` | `number \| undefined` | `undefined` | Порядок перехода по Tab |
+| `autofocus` | `boolean \| undefined` | `undefined` | Автофокус при монтировании компонента |
+
+Состояние «нажата» (Figma-свойство `checked`) задаётся не отдельным инпутом, а моделью через `ControlValueAccessor`: используйте `[(ngModel)]`, `formControl` или `formControlName`. Значение `true` / `false` соответствует `checked=true` / `checked=false` в Figma. Состояния `hover` и `focus` из Figma воспроизводятся браузером при наведении и фокусе и не имеют отдельных инпутов.
+
+## Variants
+
+### Off (выключена, по умолчанию)
+
+Figma: `<ToggleButton>`, state=default, checked=false, icon-only=false
+
+```html
+<toggle-button onLabel="Вкл" offLabel="Выкл" [(ngModel)]="isOn"></toggle-button>
+```
+
+В реактивных формах эквивалентно:
+
+```html
+<toggle-button onLabel="Вкл" offLabel="Выкл" [formControl]="control"></toggle-button>
+```
+
+### On (включена)
+
+Figma: `<ToggleButton>`, state=default, checked=true, icon-only=false
+
+```html
+<toggle-button onLabel="Вкл" offLabel="Выкл" [(ngModel)]="isOn"></toggle-button>
+```
+
+### С иконками (onIcon / offIcon)
+
+Figma: `<ToggleButton>`, icon-position=left, checked=true/false
+
+Классы иконок — из справочника [icons.md](../../figma-code-connect/icons.md).
+
+```html
+<toggle-button
+  onLabel="Включено"
+  offLabel="Выключено"
+  onIcon="ti ti-check"
+  offIcon="ti ti-x"
+  iconPos="left"
+  [(ngModel)]="isOn"
+></toggle-button>
+```
+
+### Иконка справа (icon-position=right)
+
+Figma: `<ToggleButton>`, icon-position=right
+
+```html
+<toggle-button
+  onLabel="Включено"
+  offLabel="Выключено"
+  onIcon="ti ti-check"
+  offIcon="ti ti-x"
+  iconPos="right"
+  [(ngModel)]="isOn"
+></toggle-button>
+```
+
+### Только иконка (icon-only)
+
+Figma: `<ToggleButton>`, icon-only=true, icon-position=null
+
+```html
+<toggle-button
+  onIcon="ti ti-star-filled"
+  offIcon="ti ti-star"
+  [iconOnly]="true"
+  ariaLabel="В избранное"
+  [(ngModel)]="isOn"
+></toggle-button>
+```
+
+### Размер large
+
+Figma: `<ToggleButton>`, size=large
+
+```html
+<toggle-button
+  onLabel="Вкл"
+  offLabel="Выкл"
+  size="large"
+  [(ngModel)]="isOn"
+></toggle-button>
+```
+
+### Disabled (отключена)
+
+Figma: `<ToggleButton>`, state=disabled
+
+Отключённое состояние задаётся через `[disabled]="true"` либо через `FormControl` в состоянии `disabled`.
+
+```html
+<toggle-button
+  onLabel="Вкл"
+  offLabel="Выкл"
+  [disabled]="true"
+  [(ngModel)]="isOn"
+></toggle-button>
+```
+
+### Fluid (на всю ширину)
+
+Figma: `<ToggleButton>`, size=base
+
+```html
+<toggle-button
+  onLabel="Вкл"
+  offLabel="Выкл"
+  [fluid]="true"
+  [(ngModel)]="isOn"
+></toggle-button>
+```
+
+## Slots
+
+Не используются. Подписи и иконки задаются через `@Input` `onLabel` / `offLabel` / `onIcon` / `offIcon`.
+
+## Related
+
+- [ExtraButton](../button/button.figma.md) — кнопка-действие без двух состояний
+- [ExtraCheckbox](../checkbox/checkbox.figma.md) — выбор в форме с похожим маппингом состояния через модель
+- [Иконки](../../figma-code-connect/icons.md) — доступные иконки (`onIcon` / `offIcon`)
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены состояний
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+
+## Do / Don't
+
+**Do:**
+- Задавайте состояние через модель (`[(ngModel)]`, `formControl` или `formControlName`) — это Figma-свойство `checked`
+- Для режима `[iconOnly]="true"` всегда задавайте `ariaLabel` для доступности
+- Используйте понятные пары `onLabel` / `offLabel`, отражающие включённое и выключенное состояния
+- Для отключения предпочитайте `FormControl` в состоянии `disabled` либо `[disabled]="true"`
+- Используйте `[fluid]="true"` в мобильных макетах и формах на всю ширину
+
+**Don't:**
+- Не задавайте «нажата» через отдельный атрибут — состояние идёт только через модель
+- Не используйте `ToggleButton` для навигации по разделам — для этого есть `Tabs`
+- Не подменяйте им `ToggleSwitch` (свитч настройки) или `SelectButton` (выбор из набора)
+- Не передавайте `[iconOnly]="true"` без `onIcon` / `offIcon` — кнопка окажется пустой
+- Не инлайньте CSS-классы иконок вручную — используйте справочник [icons.md](../../figma-code-connect/icons.md)
diff --git a/src/lib/components/toggleswitch/toggleswitch.figma.md b/src/lib/components/toggleswitch/toggleswitch.figma.md
new file mode 100644
index 00000000..9d1c1749
--- /dev/null
+++ b/src/lib/components/toggleswitch/toggleswitch.figma.md
@@ -0,0 +1,103 @@
+---
+component: ExtraToggleSwitch
+selector: extra-toggleswitch
+import:
+  symbol: ExtraToggleSwitchComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '19:13673'
+  componentKey: 'd40b5a42d528dd153d39b16be43311aae73a0e42'
+  name: '<ToggleSwitch>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraToggleSwitch` — переключатель-свитч (`role=switch`) для мгновенного включения/выключения одной бинарной настройки: эффект применяется сразу, без отдельного сохранения. Оборачивает PrimeNG `p-toggleswitch` и реализует `ControlValueAccessor`, поэтому интегрируется с `[(ngModel)]` и реактивными формами через `formControl` / `formControlName`.
+
+Компонент соответствует Figma-компоненту `<ToggleSwitch>` (nodeId `19:13673`). Figma-свойства `state` и `checked` маппируются на состояние компонента и модель значения (см. раздел Props mapping).
+
+## Props mapping
+
+У компонента нет собственных `@Input()` для конфигурации внешнего вида: состояние задаётся моделью и формой через `ControlValueAccessor`. Доступны три события вывода (`@Output()`):
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `onChange` | `EventEmitter<unknown>` | — | Событие при изменении значения переключателя |
+| `onFocus` | `EventEmitter<Event>` | — | Событие при получении фокуса |
+| `onBlur` | `EventEmitter<Event>` | — | Событие при потере фокуса |
+
+Состояние «включён» (Figma-свойство `checked`) задаётся не отдельным инпутом, а моделью через `ControlValueAccessor`: используйте `[(ngModel)]`, `formControl` или `formControlName`. Значение `true` / `false` соответствует `checked=true` / `checked=false` в Figma.
+
+Отключённое состояние (Figma `state=disabled`) задаётся не отдельным инпутом, а через форму: атрибут `[disabled]` на `formControl` или `disabled`-состояние реактивной формы передаётся в компонент методом `setDisabledState` из `ControlValueAccessor`.
+
+Невалидное состояние (Figma `state=danger`) выводится автоматически из состояния валидации связанного `NgControl` (`ngControl.invalid`) и отдельным инпутом не задаётся.
+
+## Variants
+
+### Off (выключен, по умолчанию)
+
+Figma: state=default, checked=false
+
+```html
+<extra-toggleswitch [(ngModel)]="isEnabled"></extra-toggleswitch>
+```
+
+### On (включён)
+
+Figma: state=default, checked=true
+
+```html
+<extra-toggleswitch [(ngModel)]="isEnabled"></extra-toggleswitch>
+```
+
+В реактивных формах эквивалентно:
+
+```html
+<extra-toggleswitch [formControl]="darkThemeControl"></extra-toggleswitch>
+```
+
+### Disabled (отключён)
+
+Figma: state=disabled, checked=false
+
+Отключение задаётся через состояние формы, а не через атрибут на компоненте:
+
+```html
+<extra-toggleswitch [formControl]="disabledControl"></extra-toggleswitch>
+```
+
+### Danger / invalid (невалидное состояние)
+
+Figma: state=danger, checked=false
+
+Подсветка как невалидного поля выводится автоматически из состояния валидации связанного `formControl`:
+
+```html
+<extra-toggleswitch [formControl]="requiredConsentControl"></extra-toggleswitch>
+```
+
+## Slots
+
+Не используются. Подпись к переключателю размещается рядом во внешнем шаблоне.
+
+## Related
+
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+- [ExtraCheckbox](../checkbox/checkbox.figma.md) — выбор в форме с submit (selection vs activation), похожий маппинг состояний через модель
+- [ExtraButton](../button/button.figma.md) — пример компонента с маппингом state-вариантов
+
+## Do / Don't
+
+**Do:**
+- Используйте `[(ngModel)]` или `formControl` для управления состоянием вкл/выкл
+- Применяйте свитч для мгновенного эффекта (тёмная тема, уведомления), без отдельной кнопки Save
+- Для отключения и невалидного состояния управляйте состоянием формы (`disabled` / валидаторы `formControl`)
+- Размещайте подпись рядом с переключателем во внешнем шаблоне для доступности
+
+**Don't:**
+- Не задавайте «включён» через отдельный атрибут — состояние идёт только через модель (`[(ngModel)]` / `formControl`)
+- Не используйте свитч для действий с подтверждением, необратимых операций или выбора из более чем двух опций
+- Не путайте с `ExtraCheckbox` (выбор в форме с submit) и `ToggleButton` (кнопка-переключатель, `aria-pressed`)
diff --git a/src/lib/components/tooltip/tooltip.figma.md b/src/lib/components/tooltip/tooltip.figma.md
new file mode 100644
index 00000000..520af72f
--- /dev/null
+++ b/src/lib/components/tooltip/tooltip.figma.md
@@ -0,0 +1,115 @@
+---
+component: ExtraTooltipDirective
+selector: '[extra-tooltip]'
+import:
+  symbol: ExtraTooltipDirective
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'Khh7arsuXss3ncqy1Dz3OZ'
+  nodeId: '24:1369'
+  componentKey: '82ea6ac996902209774a682f0bf448bc307261e6'
+  name: '<Tooltip>'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+
+`ExtraTooltipDirective` — атрибутная директива для показа короткой текстовой подсказки у хост-элемента при наведении или фокусе. Подсказка содержит только текст, не интерактивна и применяется к любому элементу через селектор `[extra-tooltip]` (например к `extra-button`, `input` или `span`).
+
+Директива соответствует Figma-компоненту `<Tooltip>` (nodeId `24:1369`) из библиотеки UI Kit (DS) v2.0. В отличие от `Popover` (интерактивная панель по клику) и `Message` (постоянный helper-текст), tooltip предназначен для некритичной поясняющей информации и плохо работает на touch-устройствах.
+
+## Props mapping
+
+| Свойство | Тип | По умолчанию | Описание |
+|----------|-----|--------------|---------|
+| `tooltip` | `string \| undefined` | `undefined` | Текст подсказки — соответствует Figma-свойству `text-tooltip` |
+| `position` | `'right' \| 'left' \| 'top' \| 'bottom'` | `'right'` | Позиция подсказки относительно хост-элемента — соответствует Figma-свойству `position` (варианты `top`, `botton`, `left`, `right`) |
+| `event` | `'hover' \| 'focus' \| 'both'` | `'hover'` | Событие, по которому показывается подсказка |
+| `showDelay` | `number \| undefined` | `undefined` | Задержка перед появлением, мс |
+| `hideDelay` | `number \| undefined` | `undefined` | Задержка перед скрытием, мс |
+| `disabled` | `boolean` | `false` | Отключает подсказку |
+
+## Variants
+
+### Default (подсказка справа при наведении)
+
+Figma: `<Tooltip>`, position=right — nodeId `24:1365`
+
+```html
+<extra-button extra-tooltip="Это текст подсказки" label="Наведи на меня"></extra-button>
+```
+
+### Position top (подсказка сверху)
+
+Figma: `<Tooltip>`, position=top — nodeId `24:1368`
+
+```html
+<extra-button extra-tooltip="Подсказка сверху" position="top" label="Сверху"></extra-button>
+```
+
+### Position bottom (подсказка снизу)
+
+Figma: `<Tooltip>`, position=botton — nodeId `24:1366`
+
+```html
+<extra-button extra-tooltip="Подсказка снизу" position="bottom" label="Снизу"></extra-button>
+```
+
+### Position left (подсказка слева)
+
+Figma: `<Tooltip>`, position=left — nodeId `24:1367`
+
+```html
+<extra-button extra-tooltip="Подсказка слева" position="left" label="Слева"></extra-button>
+```
+
+### Показ по фокусу (event=focus)
+
+Figma: `<Tooltip>` (общий компонент; событие задаётся в коде)
+
+```html
+<input type="text" extra-tooltip="Введите ваше имя" event="focus" placeholder="Кликни для фокуса" />
+```
+
+### С задержкой появления (showDelay)
+
+Figma: `<Tooltip>` (общий компонент; задержка задаётся в коде)
+
+```html
+<extra-button
+  extra-tooltip="Подсказка с задержкой 1с"
+  [showDelay]="1000"
+  label="Задержка появления (1с)"
+></extra-button>
+```
+
+### Отключённая подсказка (disabled)
+
+Figma: `<Tooltip>` (общий компонент; отключение задаётся в коде)
+
+```html
+<span extra-tooltip="Не покажется" [disabled]="true">Текст без подсказки</span>
+```
+
+## Slots
+
+Не используются. Текст подсказки передаётся через `@Input() tooltip`; директива применяется к существующему хост-элементу.
+
+## Related
+
+- [ExtraButton](../button/button.figma.md) — частый хост-элемент для подсказки
+- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular
+- [Токены](../../figma-code-connect/tokens.md) — цветовые токены подсказки
+
+## Do / Don't
+
+**Do:**
+- Применяйте подсказку к icon-only кнопкам и неоднозначным иконкам для пояснения действия
+- Используйте `position` для размещения подсказки там, где она не перекрывает важный контент
+- Задавайте `[showDelay]` для элементов, по которым курсор часто проходит транзитом
+
+**Don't:**
+- Не размещайте в подсказке интерактивный контент (ссылки, кнопки, формы) — для этого используйте `Popover`
+- Не передавайте критичную информацию только через tooltip — на touch-устройствах нет hover
+- Не дублируйте в подсказке текст, который уже виден на форме
diff --git a/src/lib/figma-code-connect/README.md b/src/lib/figma-code-connect/README.md
new file mode 100644
index 00000000..c1dd0c54
--- /dev/null
+++ b/src/lib/figma-code-connect/README.md
@@ -0,0 +1,223 @@
+# Figma Code Connect — Статические файлы описания компонентов
+
+Эта директория содержит статические файлы документации для интеграции Figma с исходным кодом компонентов `@cdek-it/angular-ui-kit`.
+
+## Структура директории
+
+```
+src/lib/figma-code-connect/          # Глобальные справочные документы
+├── README.md                        # Этот файл
+├── schema.md                        # Полная спецификация формата .figma.md
+├── conventions.md                   # Соглашения и best practices
+├── tokens.md                        # Дизайн токены
+├── icons.md                         # Доступные иконки
+└── missing.md                       # Список компонентов без Code Connect
+
+src/lib/components/                  # Контрактные файлы (colocated с компонентом)
+├── button/
+│   ├── button.component.ts
+│   └── button.figma.md             # Code Connect для Button
+├── inputtext/
+│   ├── inputtext.component.ts
+│   └── inputtext.figma.md          # Code Connect для InputText
+└── dialog/
+    ├── dialog.component.ts
+    └── dialog.figma.md             # Code Connect для Dialog
+```
+
+## Описание
+
+**Figma Code Connect** — это практика связывания компонентов Figma с их реализацией в исходном коде. 
+Статические файлы (`.figma.md`) содержат метаданные о компонентах, которые позволяют:
+
+- Агентам находить реальную реализацию компонента по его nodeId из Figma
+- Разработчикам быстро переходить между дизайном и кодом
+- Поддерживать актуальность синхронизации между Figma и исходным кодом
+
+## Как использовать этот формат
+
+### Для разработчиков
+
+1. **Читайте** [`schema.md`](./schema.md) для понимания структуры файлов
+2. **Смотрите примеры** рядом с компонентами (`src/lib/components/{button,inputtext,dialog}/<name>.figma.md`)
+3. **Следуйте соглашениям** из [`conventions.md`](./conventions.md)
+4. **Валидируйте** свои файлы перед коммитом:
+   ```bash
+   npm run validate:figma-cc
+   ```
+
+### Для агентов и интеграций
+
+Агент (например, при автоматическом синхронизировании дизайна) может использовать эти файлы следующим образом:
+
+1. **Получить nodeId из Figma**
+   ```
+   figma.fileKey = abc123def456
+   figma.nodeId = 1:42
+   ```
+
+2. **Найти соответствующий .figma.md файл**
+   ```bash
+   grep -r "nodeId.*1:42" src/lib/**/*.figma.md
+   # Результат: src/lib/button/button.figma.md
+   ```
+
+3. **Извлечь метаданные из frontmatter**
+   ```yaml
+   component: ExtraButton
+   selector: extra-button
+   import:
+     symbol: ExtraButtonComponent
+     from: '@cdek-it/angular-ui-kit'
+   ```
+
+4. **Использовать данные для синхронизации**
+   - Обновить тип компонента в коде
+   - Добавить новое свойство или slot
+   - Обновить документацию
+
+## Справочные документы
+
+| Документ | Описание |
+|----------|---------|
+| [`schema.md`](./schema.md) | Полная спецификация формата файлов, обязательные/опциональные поля, правила форматирования |
+| [`conventions.md`](./conventions.md) | Соглашения по именованию, структуре компонентов, примеры best practices |
+| [`tokens.md`](./tokens.md) | Список дизайн-токенов (цвета, типография, размеры, отступы) |
+| [`icons.md`](./icons.md) | Доступные иконки и их имена |
+| [`missing.md`](./missing.md) | Компоненты, которые есть в коде, но не документированы в Code Connect |
+
+## Валидация
+
+### Команда валидации
+
+```bash
+npm run validate:figma-cc
+```
+
+### Что проверяет валидатор?
+
+Валидатор сканирует файлы по паттерну `src/lib/**/*.figma.md` и проверяет:
+
+✓ Наличие и корректность YAML frontmatter  
+✓ Обязательные поля: `component`, `selector`, `import.{symbol,from}`, `figma.{fileKey,nodeId,componentKey,name}`, `status`, `updated`  
+✓ Правильный порядок секций (Overview → Props mapping → Variants → Slots → Related → Do/Don't)  
+✓ Открывающие code-fences содержат явный язык программирования (закрывающие — без языка, стандарт CommonMark)  
+✓ Опциональные поля (если present): `deprecated.{replaceWith,since,reason}`  
+
+### Примеры ошибок
+
+```bash
+# ❌ Отсутствует frontmatter
+src/lib/button/button.figma.md: missing frontmatter
+
+# ❌ Отсутствует обязательное поле
+src/lib/button/button.figma.md: missing field figma
+
+# ❌ Нарушен порядок секций
+src/lib/button/button.figma.md: section order violation near ## Related
+
+# ❌ Открывающий code-fence без языка
+src/lib/button/button.figma.md: code-fence without language
+```
+
+### Валидация отдельного файла
+
+```bash
+npm run validate:figma-cc src/lib/button/button.figma.md
+```
+
+## Примеры использования
+
+### Пример 1: Найти компонент по nodeId
+
+Дизайнер скопировал nodeId из Figma: `1:42`
+
+```bash
+grep -r "nodeId.*1:42" src/lib
+# src/lib/button/button.figma.md: figma:
+#   nodeId: '1:42'
+```
+
+Затем агент может прочитать `src/lib/button/button.figma.md` и получить полную информацию 
+о компоненте (селектор, имя для импорта и т.д.).
+
+### Пример 2: Отобразить все компоненты со статусом deprecated
+
+```bash
+grep -l "status: deprecated" src/lib/**/*.figma.md
+```
+
+### Пример 3: Обновить дату последнего обновления
+
+```yaml
+# Было
+updated: '2026-06-15'
+
+# Стало
+updated: '2026-06-22'
+```
+
+## Создание нового компонента Code Connect
+
+1. **Прочитайте** [`schema.md`](./schema.md) — полную спецификацию
+2. **Создайте файл** `src/lib/<component>/<component>.figma.md`
+3. **Добавьте frontmatter** со всеми обязательными полями
+4. **Напишите секции** в правильном порядке
+5. **Валидируйте**: `npm run validate:figma-cc`
+6. **Коммитьте** с message: `feat(figma-cc): add <component>.figma.md`
+
+Пример структуры:
+
+```markdown
+---
+component: ExtraButton
+selector: extra-button
+import:
+  symbol: ExtraButtonComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'abc123'
+  nodeId: '1:42'
+  componentKey: 'Button_primary'
+  name: 'Button / Primary'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+Описание компонента...
+
+## Props mapping
+Таблица свойств...
+
+## Variants
+Описание вариантов...
+
+## Slots
+Информация о slot'ах...
+
+## Related
+Связанные компоненты и документы...
+
+## Do / Don't
+Рекомендации...
+```
+
+## Важные замечания
+
+- **Только статические файлы**: Этот формат не требует интеграции с Figma API (в отличие от других решений Code Connect)
+- **Git-friendly**: Файлы хорошо работают с системой контроля версий (читаемые, небольшие)
+- **Человеко-читаемые**: Легко редактировать в обычном текстовом редакторе
+- **Безопасные**: Можно безопасно хранить в репозитории (нет секретов Figma)
+
+## Контролеры и ответственность
+
+- **Разработчики компонентов**: Создают и обновляют `.figma.md` файлы
+- **Дизайнеры**: Получают информацию о реализации компонентов
+- **Агенты/интеграции**: Используют метаданные для синхронизации дизайна и кода
+
+## Дополнительные ресурсы
+
+- [Figma Code Connect Official Documentation](https://www.figma.com/developers/api#code-connect)
+- [@cdek-it/angular-ui-kit на npm](https://www.npmjs.com/package/@cdek-it/angular-ui-kit)
+- [Angular Components](https://angular.io/guide/component-overview)
diff --git a/src/lib/figma-code-connect/conventions.md b/src/lib/figma-code-connect/conventions.md
new file mode 100644
index 00000000..0df5f366
--- /dev/null
+++ b/src/lib/figma-code-connect/conventions.md
@@ -0,0 +1,354 @@
+# Соглашения Figma Code Connect
+
+Этот документ описывает соглашения и best practices для написания файлов Code Connect (`.figma.md`) компонентов `@cdek-it/angular-ui-kit`.
+
+## Naming (Именование)
+
+### Селектор компонента (CSS)
+
+Все селекторы должны начинаться с префикса `extra-` в формате kebab-case:
+
+```html
+<!-- ✓ Правильно -->
+<extra-button></extra-button>
+<extra-input-text></extra-input-text>
+<extra-dialog></extra-dialog>
+
+<!-- ✗ Неправильно -->
+<button></button>
+<cdek-button></cdek-button>
+<Button></Button>
+```
+
+### Название класса компонента (TypeScript)
+
+Все классы компонентов должны следовать паттерну `Extra<Name>Component` в формате PascalCase:
+
+```typescript
+// ✓ Правильно
+export class ExtraButtonComponent {}
+export class ExtraInputTextComponent {}
+export class ExtraDialogComponent {}
+
+// ✗ Неправильно
+export class ButtonComponent {}
+export class CdekButtonComponent {}
+export class ExtraButton {}
+```
+
+### Путь импорта
+
+Все импорты должны идти из пакета `@cdek-it/angular-ui-kit`:
+
+```typescript
+// ✓ Правильно
+import { ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
+import { ExtraInputTextComponent, ExtraDialogComponent } from '@cdek-it/angular-ui-kit';
+
+// ✗ Неправильно
+import { ExtraButtonComponent } from './button/button.component';
+import { ExtraButtonComponent } from '@cdek-it/angular-ui-kit/button';
+```
+
+---
+
+## Figma property → Angular @Input Mapping (Маппинг свойств)
+
+Свойства компонентов в Figma должны маппироваться в Angular `@Input()` следующим образом:
+
+### Строковые свойства (Variant, Size, Style)
+
+Figma-свойства типа **Variant** маппируются в string-тип Angular inputs:
+
+```html
+<!-- Figma: Variant = Primary → Angular: variant="primary" -->
+<extra-button variant="primary">Submit</extra-button>
+
+<!-- Figma: Variant = Secondary → Angular: variant="secondary" -->
+<extra-button variant="secondary">Cancel</extra-button>
+
+<!-- Figma: Size = base → Angular: size="base" -->
+<extra-input-text size="base"></extra-input-text>
+
+<!-- Figma: Size = large → Angular: size="large" -->
+<extra-input-text size="large"></extra-input-text>
+```
+
+**Правило:** Значения Figma-свойств преобразуются в lowercase и передаются как строки без кавычек в шаблоне TypeScript.
+
+### Булевы свойства (State)
+
+Figma-свойства типа **State** маппируются в boolean inputs с использованием property binding `[prop]="true|false"`:
+
+```html
+<!-- Figma: State = Disabled → Angular: [disabled]="true" -->
+<extra-button [disabled]="true">Disabled Button</extra-button>
+
+<!-- Figma: State = Disabled = false → Angular: [disabled]="false" -->
+<extra-button [disabled]="false">Enabled Button</extra-button>
+
+<!-- Figma: State = IsLoading → Angular: [isLoading]="true" -->
+<extra-button [isLoading]="true">Loading...</extra-button>
+
+<!-- Figma: State = IsReadOnly → Angular: [isReadOnly]="true" -->
+<extra-input-text [isReadOnly]="true"></extra-input-text>
+```
+
+**Правило:** Булевы свойства всегда используют property binding `[prop]="true"` или `[prop]="false"`, никогда не передаются как атрибуты без квадратных скобок.
+
+### Других типы свойств (Number, Text, Custom)
+
+Для числовых и пользовательских свойств используйте property binding:
+
+```html
+<!-- Figma: Custom property maxLength = 50 → Angular: [maxLength]="50" -->
+<extra-input-text [maxLength]="50"></extra-input-text>
+
+<!-- Figma: Text property placeholder → Angular: placeholder="Enter text" -->
+<extra-input-text placeholder="Enter text"></extra-input-text>
+
+<!-- Figma: Number property tabIndex = 1 → Angular: [tabIndex]="1" -->
+<extra-button [tabIndex]="1">First</extra-button>
+```
+
+---
+
+## Two-way Binding (Двусторонняя привязка)
+
+Компоненты, которые имеют изменяемое состояние, должны поддерживать двустороннюю привязку через `[()]` syntax:
+
+### Видимость (visible)
+
+```html
+<!-- ✓ Двусторонняя привязка видимости -->
+<extra-dialog [(visible)]="isDialogOpen">
+  <p>Dialog content</p>
+</extra-dialog>
+
+<!-- В компоненте используется: -->
+<!-- @Input() visible: boolean; -->
+<!-- @Output() visibleChange = new EventEmitter<boolean>(); -->
+```
+
+### Модель (ngModel)
+
+```html
+<!-- ✓ Двусторонняя привязка значения (ngModel) -->
+<extra-input-text [(ngModel)]="userInput" name="username"></extra-input-text>
+
+<!-- Эквивалентно: -->
+<extra-input-text [ngModel]="userInput" (ngModelChange)="userInput = $event"></extra-input-text>
+
+<!-- В компоненте используется: -->
+<!-- @Input() ngModel: any; -->
+<!-- @Output() ngModelChange = new EventEmitter<any>(); -->
+```
+
+### Пользовательские свойства
+
+```html
+<!-- ✓ Двусторонняя привязка для пользовательских свойств -->
+<extra-component [(selectedValue)]="myValue">
+  <!-- content -->
+</extra-component>
+
+<!-- В компоненте используется: -->
+<!-- @Input() selectedValue: any; -->
+<!-- @Output() selectedValueChange = new EventEmitter<any>(); -->
+```
+
+**Правило:** Для двусторонней привязки компонент должен иметь пару:
+- `@Input() propertyName`
+- `@Output() propertyNameChange = new EventEmitter()`
+
+---
+
+## Slots / Content Projection (Слоты и проектирование содержимого)
+
+### Структурные директивы (Structural Directives)
+
+Для более сложного проектирования содержимого используйте структурные директивы:
+
+```html
+<!-- ✓ Структурная директива для заголовка -->
+<extra-dialog>
+  <div *extraDialogHeader>
+    <h2>Dialog Title</h2>
+  </div>
+  <p>Dialog body content</p>
+</extra-dialog>
+
+<!-- ✓ Структурная директива для футера -->
+<extra-dialog>
+  <p>Dialog body content</p>
+  <div *extraDialogFooter>
+    <extra-button (click)="onCancel()">Cancel</extra-button>
+    <extra-button variant="primary" (click)="onSubmit()">Submit</extra-button>
+  </div>
+</extra-dialog>
+```
+
+**Паттерн:** Структурные директивы следуют паттерну `*extra<ComponentName><SlotName>` (camelCase после компонента).
+
+### ng-content (Безымянные слоты)
+
+Для базового проектирования содержимого используйте `<ng-content>`:
+
+```html
+<!-- Figma component template (button.component.html) -->
+<button>
+  <ng-content></ng-content>
+</button>
+
+<!-- Usage -->
+<extra-button>
+  <span>Click me</span>
+</extra-button>
+
+<!-- Эквивалентно -->
+<extra-button>Click me</extra-button>
+```
+
+### Несколько именованных слотов
+
+```html
+<!-- Figma component template (dialog.component.html) -->
+<div class="dialog">
+  <div class="dialog-header">
+    <ng-content select="[dialogHeader]"></ng-content>
+  </div>
+  <div class="dialog-body">
+    <ng-content></ng-content>
+  </div>
+  <div class="dialog-footer">
+    <ng-content select="[dialogFooter]"></ng-content>
+  </div>
+</div>
+
+<!-- Usage -->
+<extra-dialog>
+  <div dialogHeader>
+    <h2>Title</h2>
+  </div>
+  <p>Body content</p>
+  <div dialogFooter>
+    <extra-button>Cancel</extra-button>
+  </div>
+</extra-dialog>
+```
+
+**Правило:** 
+- Используйте структурные директивы (`*extra<Name>`) для более семантичного и удобного API
+- Используйте `<ng-content>` для простого проектирования безымянного содержимого
+- Используйте selector-based `ng-content` для типизированного проектирования нескольких слотов
+
+---
+
+## Red Lines (Красные линии — антипаттерны)
+
+### ✗ Не описывайте приватные компоненты
+
+Только компоненты, экспортированные в `public_api.ts` библиотеки, должны иметь `.figma.md` файлы:
+
+```typescript
+// ✓ Публичный компонент (экспортирован в public_api.ts)
+export class ExtraButtonComponent {}
+
+// ✗ Приватный компонент (НЕ пишите для него .figma.md)
+class _ExtraButtonBaseComponent {} // недокументируется
+```
+
+### ✗ Не дублируйте Storybook
+
+Файлы `.figma.md` — это метаданные для интеграции Figma, а не документация компонентов:
+
+```markdown
+<!-- ✓ В .figma.md: минимум, только для Figma интеграции -->
+## Overview
+ExtraButton — универсальная кнопка для выполнения действий.
+
+<!-- ✗ В .figma.md: не копируйте Storybook -->
+## Overview
+ExtraButton — это компонент кнопки с поддержкой 15 вариантов, включая primary, secondary, 
+danger, ghost, с размерами small, base, large, и состояниями disabled, loading, focus...
+<!-- Это описание принадлежит Storybook/документации, а не Code Connect -->
+```
+
+### ✗ Не описывайте runtime-логику
+
+`.figma.md` файлы описывают **структуру и маппинг**, а не implementation details:
+
+```markdown
+<!-- ✓ Правильно: что маппируется -->
+## Props mapping
+| Свойство | Тип | Описание |
+| disabled | boolean | Отключить кнопку |
+
+<!-- ✗ Неправильно: как реализовано -->
+## Props mapping
+| Свойство | Тип | Описание |
+| disabled | boolean | Устанавливает атрибут disabled на native button element внутри компонента и запускает CD |
+```
+
+### ✗ Не инлайньте значения токенов
+
+Используйте ссылки на `tokens.md` вместо копирования значений:
+
+```markdown
+<!-- ✓ Правильно: ссылка на tokens.md -->
+## Variants
+- **Primary** — использует токен `color-primary` [см. tokens.md](./tokens.md)
+
+<!-- ✗ Неправильно: копирование значения -->
+## Variants
+- **Primary** — использует цвет #007AFF (primary blue)
+```
+
+### ✗ Не инлайньте названия иконок
+
+Используйте ссылки на `icons.md` вместо копирования списков:
+
+```markdown
+<!-- ✓ Правильно: ссылка на icons.md -->
+## Props mapping
+| Свойство | Тип | Описание |
+| icon | string | Имя иконки из доступного набора [см. icons.md](./icons.md) |
+
+<!-- ✗ Неправильно: копирование списка -->
+## Props mapping
+| Свойство | Тип | Описание |
+| icon | 'check' \| 'close' \| 'warning' \| 'info' \| 'success' | Иконка |
+```
+
+### ✗ Не создавайте отдельные файлы для вариантов
+
+Все варианты одного компонента описываются в **одном** файле:
+
+```
+<!-- ✓ Правильно -->
+src/lib/button/
+├── button.figma.md          # все варианты Button
+└── button.component.ts
+
+<!-- ✗ Неправильно -->
+src/lib/button/
+├── button-primary.figma.md  # ❌ отдельный файл для варианта
+├── button-secondary.figma.md # ❌ отдельный файл для варианта
+├── button.component.ts
+└── button.variant.ts
+```
+
+---
+
+## Файлы для справки
+
+- [`schema.md`](./schema.md) — Полная спецификация формата файлов
+- [`tokens.md`](./tokens.md) — Список дизайн-токенов
+- [`icons.md`](./icons.md) — Доступные иконки
+- [`missing.md`](./missing.md) — Компоненты без Code Connect
+
+## Дополнительные ресурсы
+
+- [Figma Code Connect Official Documentation](https://www.figma.com/developers/api#code-connect)
+- [Angular Template Syntax](https://angular.io/guide/template-syntax)
+- [@cdek-it/angular-ui-kit Documentation](https://www.npmjs.com/package/@cdek-it/angular-ui-kit)
diff --git a/src/lib/figma-code-connect/icons.md b/src/lib/figma-code-connect/icons.md
new file mode 100644
index 00000000..970cd315
--- /dev/null
+++ b/src/lib/figma-code-connect/icons.md
@@ -0,0 +1,55 @@
+# Иконки (Icons)
+
+Справочник иконок для компонентов `@cdek-it/angular-ui-kit`. Используется библиотека **PrimeIcons** (часть PrimeNG).
+
+## Использование
+
+Иконки передаются в компоненты как строка в формате `'pi pi-<name>'`:
+
+```typescript
+import { ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
+
+// Использование в шаблоне
+<extra-button icon="pi pi-check" label="Сохранить"></extra-button>
+<extra-button icon="pi pi-trash" label="Удалить"></extra-button>
+```
+
+Цвет иконки наследуется от `currentColor` текущего контекста.
+
+## Часто используемые иконки (Common icons)
+
+| Figma слой | Код | Пример использования |
+|-----------|------|-------------------|
+| check | `'pi pi-check'` | `<extra-button icon="pi pi-check"></extra-button>` |
+| times | `'pi pi-times'` | `<extra-button icon="pi pi-times"></extra-button>` |
+| search | `'pi pi-search'` | `<extra-input-text icon="pi pi-search"></extra-input-text>` |
+| trash | `'pi pi-trash'` | `<extra-button icon="pi pi-trash" severity="danger"></extra-button>` |
+| arrow-left | `'pi pi-arrow-left'` | `<extra-button icon="pi pi-arrow-left"></extra-button>` |
+| arrow-right | `'pi pi-arrow-right'` | `<extra-button icon="pi pi-arrow-right"></extra-button>` |
+| chevron-down | `'pi pi-chevron-down'` | `<extra-button icon="pi pi-chevron-down"></extra-button>` |
+| chevron-up | `'pi pi-chevron-up'` | `<extra-button icon="pi pi-chevron-up"></extra-button>` |
+| star | `'pi pi-star'` | `<extra-button icon="pi pi-star"></extra-button>` |
+| heart | `'pi pi-heart'` | `<extra-button icon="pi pi-heart"></extra-button>` |
+| bell | `'pi pi-bell'` | `<extra-button icon="pi pi-bell"></extra-button>` |
+| calendar | `'pi pi-calendar'` | `<extra-button icon="pi pi-calendar"></extra-button>` |
+| clock | `'pi pi-clock'` | `<extra-button icon="pi pi-clock"></extra-button>` |
+| cog | `'pi pi-cog'` | `<extra-button icon="pi pi-cog"></extra-button>` |
+| user | `'pi pi-user'` | `<extra-button icon="pi pi-user"></extra-button>` |
+| home | `'pi pi-home'` | `<extra-button icon="pi pi-home"></extra-button>` |
+| info | `'pi pi-info'` | `<extra-button icon="pi pi-info" severity="info"></extra-button>` |
+| exclamation-triangle | `'pi pi-exclamation-triangle'` | `<extra-button icon="pi pi-exclamation-triangle" severity="warning"></extra-button>` |
+| question | `'pi pi-question'` | `<extra-button icon="pi pi-question"></extra-button>` |
+| lock | `'pi pi-lock'` | `<extra-button icon="pi pi-lock"></extra-button>` |
+| unlock | `'pi pi-unlock'` | `<extra-button icon="pi pi-unlock"></extra-button>` |
+| download | `'pi pi-download'` | `<extra-button icon="pi pi-download"></extra-button>` |
+| upload | `'pi pi-upload'` | `<extra-button icon="pi pi-upload"></extra-button>` |
+
+## Все иконки PrimeIcons
+
+Полный список иконок доступен на [primeng.org/icons](https://primeng.org/icons). Формат для использования: `'pi pi-<name>'`, где `<name>` — название иконки в kebab-case (например, `exclamation-triangle`, `arrow-left`).
+
+## Примечания
+
+- Иконки из PrimeIcons подключены автоматически через PrimeNG.
+- Цвет контролируется через CSS или атрибут `severity` компонента.
+- При необходимости новых иконок (не найденных в PrimeIcons) обратитесь к [`missing.md`](#missing.md).
diff --git a/src/lib/figma-code-connect/missing.md b/src/lib/figma-code-connect/missing.md
new file mode 100644
index 00000000..79a8714e
--- /dev/null
+++ b/src/lib/figma-code-connect/missing.md
@@ -0,0 +1,34 @@
+# Backlog: отсутствующие токены и иконки (Missing)
+
+Таблица компонентов и токенов, которые еще не добавлены в Code Connect или требуют уточнения.
+
+## Описание
+
+Этот документ отслеживает:
+- Токены из Figma, отсутствующие в коде или `tokens.md`
+- Иконки, которые нужно добавить в `icons.md`
+- Компоненты, требующие синхронизации
+
+**Важно:** не путать с `status: orphan-code` — это обратное: в коде есть элемент, которого нет в Figma.
+
+## Таблица backlog
+
+| Figma имя | nodeId | componentKey | Заметка | Статус |
+|-----------|--------|--------------|---------|--------|
+| _(пусто)_ | — | — | Нет текущих задач | — |
+
+## Добавление записей
+
+При обнаружении отсутствующего токена или иконки:
+1. Добавьте строку в таблицу выше.
+2. Заполните все поля: Figma имя, nodeId (из URL), componentKey, заметку и статус.
+3. Статус: `pending` (ожидает реализации), `in-progress` (в работе), `blocked` (заблокирован).
+4. После реализации измените статус на `done` или удалите строку.
+
+## Примеры
+
+```markdown
+| custom-token-primary | node_abc123 | custom.primary | Новый цвет бренда | pending |
+| expand-icon | node_def456 | icons.expand | Иконка разворота меню | in-progress |
+| avatar-xl | node_ghi789 | components.avatar.xl | Размер XL для аватара | blocked |
+```
diff --git a/src/lib/figma-code-connect/schema.md b/src/lib/figma-code-connect/schema.md
new file mode 100644
index 00000000..ab91e85d
--- /dev/null
+++ b/src/lib/figma-code-connect/schema.md
@@ -0,0 +1,301 @@
+# Схема файлов Figma Code Connect
+
+Этот документ описывает структуру и формат файлов Code Connect для компонентов `@cdek-it/angular-ui-kit`.
+
+## Формат файла
+
+Файлы Code Connect имеют расширение `.figma.md` и состоят из двух частей:
+1. **Frontmatter** (YAML) — метаданные компонента
+2. **Тело** (Markdown) — описание и примеры
+
+### Пример структуры
+
+```markdown
+---
+component: ExtraButton
+selector: extra-button
+import:
+  symbol: ExtraButtonComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'abc123def456'
+  nodeId: '1:42'
+  componentKey: 'Button_primary'
+  name: 'Button / Primary'
+status: stable
+updated: '2026-06-22'
+deprecated:
+  replaceWith: ExtraButtonV2
+  since: '2.0.0'
+  reason: 'Migrated to Material Design v2'
+---
+
+## Overview
+...
+```
+
+## Обязательные поля Frontmatter
+
+### Основная информация компонента
+
+- **`component`** (строка)
+  - Название компонента на TypeScript (UpperCamelCase)
+  - Пример: `ExtraButton`, `ExtraInputText`, `ExtraDialog`
+
+- **`selector`** (строка)
+  - CSS-селектор для использования в шаблонах (kebab-case)
+  - Пример: `extra-button`, `extra-input-text`, `extra-dialog`
+
+### Информация об импорте
+
+- **`import.symbol`** (строка)
+  - Экспортируемый символ из пакета
+  - Пример: `ExtraButtonComponent`, `ExtraInputTextComponent`
+
+- **`import.from`** (строка)
+  - Путь до импорта в пакете `@cdek-it/angular-ui-kit`
+  - Обычно: `@cdek-it/angular-ui-kit`
+
+### Информация о Figma
+
+- **`figma.fileKey`** (строка)
+  - Уникальный идентификатор Figma-файла из URL
+  - Пример: `abc123def456` (из `figma.com/file/abc123def456/...`)
+
+- **`figma.nodeId`** (строка)
+  - Уникальный идентификатор узла компонента в Figma
+  - Пример: `1:42`, `123:456`
+
+- **`figma.componentKey`** (строка)
+  - Ключ компонента в Figma (для библиотек)
+  - Пример: `Button_primary`, `InputText_default`
+
+- **`figma.name`** (строка)
+  - Отображаемое имя компонента в Figma
+  - Пример: `Button / Primary`, `Input Text / Default`
+
+### Статус и дата
+
+- **`status`** (строка, перечисление)
+  - Статус компонента: `stable | beta | deprecated | orphan-code`
+  - Определяет, используется ли компонент в продакшене.
+  - `orphan-code` — компонент есть в коде, но не сопоставлен с Figma; используется как fallback при недоступности MCP.
+
+- **`updated`** (строка, ISO 8601 дата)
+  - Дата последнего обновления в формате `YYYY-MM-DD`
+  - Пример: `2026-06-22`
+
+## Опциональные поля Frontmatter
+
+### Информация об устаревании
+
+- **`deprecated.replaceWith`** (строка)
+  - Название компонента, который использовать вместо текущего
+  - Используется только если `status: deprecated`
+
+- **`deprecated.since`** (строка, семантическое версионирование)
+  - Версия, с которой компонент отмечен как deprecated
+  - Пример: `2.0.0`
+
+- **`deprecated.reason`** (строка)
+  - Описание причины устаревания
+  - Пример: `Migrated to Material Design v2`
+
+## Структура тела файла
+
+Тело должно содержать следующие секции в **строгом порядке**:
+
+### 1. `## Overview`
+Краткое описание компонента и его предназначения. Обычно 1-3 абзаца.
+
+Пример:
+```markdown
+## Overview
+
+ExtraButton — универсальный компонент кнопки для выполнения действий. 
+Поддерживает различные варианты оформления, размеры и состояния.
+```
+
+### 2. `## Props mapping`
+Таблица или описание входных свойств компонента (Input properties).
+
+Пример:
+```markdown
+## Props mapping
+
+| Свойство | Тип | Описание |
+|----------|-----|---------|
+| `label` | `string` | Текст кнопки |
+| `disabled` | `boolean` | Отключить кнопку |
+```
+
+### 3. `## Variants`
+Описание доступных вариантов компонента (primary, secondary, size variations и т.д.).
+
+Пример:
+```markdown
+## Variants
+
+- **Primary** — основная кнопка для главного действия
+- **Secondary** — вторичная кнопка для дополнительных действий
+- **Ghost** — невидимая кнопка только с текстом
+```
+
+### 4. `## Slots`
+Описание именованных slot'ов для проектирования содержимого (если компонент их имеет).
+
+Пример:
+```markdown
+## Slots
+
+- **`default`** — основное содержимое кнопки (текст или иконка)
+```
+
+Если компонент не использует слоты, напишите:
+```markdown
+## Slots
+
+Не используются.
+```
+
+### 5. `## Related`
+Ссылки на связанные компоненты, документацию или стандарты.
+
+Пример:
+```markdown
+## Related
+
+- [ButtonGroup](./button-group.figma.md) — группировка кнопок
+- [Icon](./icon.figma.md) — иконки
+- [Conventions](./conventions.md) — соглашения кодирования
+```
+
+### 6. `## Do / Don't`
+Рекомендации и антипаттерны использования компонента.
+
+Пример:
+```markdown
+## Do / Don't
+
+**Do:**
+- Используйте для основных действий на странице
+- Выравнивайте кнопки по левому краю контейнера
+
+**Don't:**
+- Не комбинируйте текст и иконку без пространства
+- Не размещайте более 2 primary-кнопок рядом
+```
+
+## Правила форматирования
+
+### Code-fences
+Каждый **ОТКРЫВАЮЩИЙ** code-fence обязан иметь язык (`html`, `ts`, `scss`). Закрывающий fence — без языка (стандарт CommonMark).
+
+Пример (открывающий с языком, закрывающий — пустой):
+
+````markdown
+```html
+<extra-button label="Submit"></extra-button>
+```
+````
+
+**Запрещено:**
+- Открывающий code-fence без языка (без спецификации после обратных кавычек)
+- Закрывающий fence с языком (нестандартно, игнорируется рендерерами)
+- Inline-значения токенов прямо в примерах (используйте ссылки на `tokens.md`)
+- Inline-иконки в примерах (используйте ссылки на `icons.md`)
+
+### Ссылки на глобальные документы
+
+При ссылке на вспомогательные документы используйте относительные пути:
+
+```markdown
+- [Список токенов](./tokens.md)
+- [Доступные иконки](./icons.md)
+- [Соглашения](./conventions.md)
+- [Отсутствующие компоненты](./missing.md)
+```
+
+### Языки кода
+
+Используйте следующие языки для code-fences:
+
+- **typescript** или **ts** — TypeScript и JavaScript
+- **html** — HTML шаблоны
+- **css** — Стили CSS
+- **json** — JSON данные
+- **yaml** — YAML конфигурация
+- **bash** или **shell** — Bash/Shell команды
+
+## Порядок проверки валидатором
+
+Валидатор (`npm run validate:figma-cc`) различает **ошибки** (errors) и **предупреждения** (warnings). Только ошибки завершают процесс с кодом 1; предупреждения печатаются с префиксом `warning:`, но не блокируют сборку.
+
+### Ошибки (exit 1)
+
+Проверяются по каждому файлу:
+
+1. Наличие frontmatter (YAML между `---...---`)
+2. Корректность YAML синтаксиса
+3. Наличие всех обязательных полей frontmatter
+4. Наличие всех обязательных полей внутри `figma`
+5. Допустимое значение `status` (`stable | beta | deprecated | orphan-code`)
+6. Порядок секций в теле файла
+7. Наличие языка у открывающих code-fences (закрывающие fences должны быть без языка)
+
+Кросс-файловая проверка по всему набору:
+
+8. **Уникальность `figma.nodeId`** — один nodeId не должен встречаться в двух `.figma.md`. Дубликаты ломают grep-lookup по nodeId, поэтому это ошибка.
+
+### Предупреждения (exit 0)
+
+- **Висячие cross-links** — относительная ссылка вида `[...](../<component>/<component>.figma.md)` на ещё не созданный контракт. Это намеренно warning, а не error: контракт может законно ссылаться на компонент-пилот, который будет написан позже (forward reference). Ссылка с `#anchor` проверяется по базовому файлу без учёта якоря.
+
+## Примеры полных файлов
+
+### Минимальный компонент (без deprecated)
+
+```markdown
+---
+component: ExtraTag
+selector: extra-tag
+import:
+  symbol: ExtraTagComponent
+  from: '@cdek-it/angular-ui-kit'
+figma:
+  fileKey: 'xyz789'
+  nodeId: '2:100'
+  componentKey: 'Tag_default'
+  name: 'Tag / Default'
+status: stable
+updated: '2026-06-22'
+---
+
+## Overview
+ExtraTag — компонент для отображения меток.
+
+## Props mapping
+| Свойство | Тип | Описание |
+|----------|-----|---------|
+| `value` | `string` | Текст метки |
+
+## Variants
+- **Default** — стандартная метка
+
+## Slots
+Не используются.
+
+## Related
+- [Conventions](./conventions.md)
+
+## Do / Don't
+**Do:**
+- Используйте для категоризации контента
+```
+
+## Файлы, подлежащие валидации
+
+Валидатор сканирует только файлы по паттерну `src/lib/**/*.figma.md` и проверяет только их.
+
+Глобальные документы (schema.md, README.md, conventions.md, tokens.md, icons.md, missing.md) 
+**НЕ проверяются** валидатором и служат справочной информацией для разработчиков и агентов.
diff --git a/src/lib/figma-code-connect/tokens.md b/src/lib/figma-code-connect/tokens.md
new file mode 100644
index 00000000..3bff677c
--- /dev/null
+++ b/src/lib/figma-code-connect/tokens.md
@@ -0,0 +1,158 @@
+# Токены дизайна (Design Tokens)
+
+Справочник токенов Figma, используемых в `@cdek-it/angular-ui-kit`. Токены разбиты на категории: примитивные (primitive) и семантические (semantic).
+
+## Цвета (Colors)
+
+### Основные цвета (Solid colors)
+
+Примитивные цвета из палитры доступны в 11 оттенках (50, 100, 200, ..., 900, 950):
+
+| Цвет | Примеры оттенков | CSS переменная |
+|------|-----------------|----------------|
+| Зелёный (green) | #dcfce7, #bbf7d0, #86efac, #22c55e, #059669 | `--p-green-500` |
+| Красный (red) | #fee2e2, #fca5a5, #f87171, #ef4444, #b91c1c | `--p-red-500` |
+| Синий (blue) | #dbeafe, #93c5fd, #3b82f6, #1d4ed8, #1e40af | `--p-blue-500` |
+| Жёлтый (yellow) | #fef3c7, #fde047, #facc15, #eab308, #ca8a04 | `--p-yellow-500` |
+| Фиолетовый (purple) | #f3e8ff, #d8b4fe, #a855f7, #7e22ce, #6b21a8 | `--p-purple-500` |
+| Цинк (zinc) | #f4f4f5, #d4d4d8, #71717a, #27272a, #09090b | `--p-zinc-500` |
+
+Доступные цвета: amber, blue, cyan, emerald, fuchsia, gray, green, indigo, lime, neutral, orange, pink, purple, red, rose, sky, slate, stone, teal, violet, yellow, zinc.
+
+### Семантические цвета (Semantic colors)
+
+Привязаны к смыслу (фон, текст, бордер и т.д.):
+
+#### color-background
+
+| Название | Светлая тема | Тёмная тема | Использование |
+|----------|--------------|------------|----------------|
+| surface.ground | `#f4f4f5` | `#18181b` | Базовый фон |
+| surface.section | `#ffffff` | `#27272a` | Фон секций, панелей |
+| background.brand.bold | `#22c55e` (green-500) | `#16a34a` | Активные элементы, основные кнопки |
+| background.success.bold | `#22c55e` (green-500) | `#16a34a` | Успех |
+| background.danger.bold | `#ef4444` (red-500) | `#dc2626` | Ошибка, удаление |
+| background.warning.bold | `#eab308` (yellow-500) | `#ca8a04` | Предупреждение |
+| background.info.bold | `#3b82f6` (blue-500) | `#2563eb` | Информация |
+| background.help.bold | `#a855f7` (purple-500) | `#9333ea` | Справка |
+
+#### color-text
+
+| Название | Светлая тема | Тёмная тема | Использование |
+|----------|--------------|------------|----------------|
+| text.default | `#18181b` (zinc-900) | `#fafafa` | Основной текст |
+| text.subtle | `#52525b` (zinc-600) | `#a1a1aa` | Вторичный текст |
+| text.muted | `#71717a` (zinc-500) | `#71717a` | Выключенный текст |
+| text.disabled | `#d4d4d8` (zinc-300) | `#52525b` | Недоступный текст |
+| text.onBold | `#ffffff` | `#ffffff` | Текст на ярких фонах |
+| text.link | `#16a34a` (green-600) | `#22c55e` | Ссылки |
+
+#### color-border
+
+| Название | Светлая тема | Тёмная тема | Использование |
+|----------|--------------|------------|----------------|
+| border.default | `#e4e4e7` (zinc-200) | `#52525b` | Основной бордер |
+| border.subtle | `#e4e4e7` (zinc-200) | `#3f3f46` | Мягкий бордер |
+| border.muted | `#f4f4f5` (zinc-100) | `#3f3f46` | Едва заметный бордер |
+
+#### color-icon
+
+| Название | Светлая тема | Тёмная тема | Использование |
+|----------|--------------|------------|----------------|
+| icon.default | `#52525b` (zinc-600) | `#a1a1aa` | Основной цвет иконок |
+| icon.subtle | `#71717a` (zinc-500) | `#71717a` | Вторичные иконки |
+| icon.muted | `#d4d4d8` (zinc-300) | `#52525b` | Отключённые иконки |
+
+## Интервалы (Spacing)
+
+Используется 12-кратная система на основе `0.25rem` (4px):
+
+| Токен | Значение | CSS переменная | Использование |
+|-------|----------|----------------|----------------|
+| `1x` | 0.25rem (4px) | `--p-spacing-1` | Минимальный отступ |
+| `2x` | 0.5rem (8px) | `--p-spacing-2` | Маленький отступ |
+| `3x` | 0.75rem (12px) | `--p-spacing-3` | Отступ между элементами |
+| `4x` | 1rem (16px) | `--p-spacing-4` | Стандартный отступ |
+| `6x` | 1.5rem (24px) | `--p-spacing-6` | Больший отступ |
+| `8x` | 2rem (32px) | `--p-spacing-8` | Крупный отступ |
+| `12x` | 3rem (48px) | `--p-spacing-12` | Очень крупный отступ |
+
+Доступны значения: none, min, 2px, 1x–120x, pill, max.
+
+## Скругления (Radius)
+
+| Токен | Значение | CSS переменная | Использование |
+|-------|----------|----------------|----------------|
+| radius-none | 0rem | `--p-radius-0` | Прямые углы |
+| radius-100 | 0.25rem (4px) | `--p-radius-100` | Небольшое скругление |
+| radius-200 | 0.5rem (8px) | `--p-radius-200` | Стандартное скругление |
+| radius-300 | 0.75rem (12px) | `--p-radius-300` | Умеренное скругление |
+| radius-400 | 1rem (16px) | `--p-radius-400` | Выраженное скругление |
+| radius-500 | 1.5rem (24px) | `--p-radius-500` | Большое скругление |
+| radius-max | 71.357rem (pill) | `--p-radius-max` | Круглая кнопка, таблетка |
+
+## Типография (Typography)
+
+### Шрифты
+
+| Категория | Семейство | Использование |
+|-----------|-----------|----------------|
+| font-heading | TT Fellows | Заголовки, крупный текст |
+| font-base | PT Sans | Основной текст, интерфейс |
+
+### Размеры шрифта
+
+| Размер | Значение | CSS переменная | Использование |
+|--------|----------|----------------|----------------|
+| 100 | 0.75rem (12px) | `--p-font-size-100` | Caption, подпись |
+| 200 | 0.875rem (14px) | `--p-font-size-200` | Label small |
+| 300 | 1rem (16px) | `--p-font-size-300` | Body, label |
+| 400 | 1.125rem (18px) | `--p-font-size-400` | Body large |
+| 500 | 1.25rem (20px) | `--p-font-size-500` | Heading small |
+| 600 | 1.5rem (24px) | `--p-font-size-600` | Heading medium |
+| 700 | 2.25rem (36px) | `--p-font-size-700` | Heading large |
+| 750 | 3rem (48px) | `--p-font-size-750` | Heading extra-large |
+
+### Полужирность (Font weights)
+
+| Вес | Значение | CSS переменная | Использование |
+|-----|----------|----------------|----------------|
+| font-weight-regular | 400 | `--p-font-weight-regular` | Основной текст |
+| font-weight-medium | 500 | `--p-font-weight-medium` | Label, emphasis |
+| font-weight-demibold | 600 | `--p-font-weight-demibold` | Подзаголовки, heading |
+| font-weight-bold | 700 | `--p-font-weight-bold` | Заголовки, выделение |
+
+### Высота строки (Line height)
+
+| Токен | Значение | Использование |
+|-------|----------|----------------|
+| line-height-250 | 1rem | Caption, маленький текст |
+| line-height-300 | 1.0714rem | Label small |
+| line-height-400 | 1.2857rem | Label, body small |
+| line-height-500 | 1.5rem | Body, основной текст |
+| line-height-550 | 1.5714rem | Body large |
+| line-height-600 | 1.7143rem | Heading small |
+| line-height-700 | 1.8571rem | Heading medium |
+| line-height-900 | 2.7857rem | Heading large |
+| line-height-auto | auto | Автоматическая высота |
+
+## Тени (Shadows)
+
+| Уровень | CSS переменная | Использование |
+|---------|----------------|----------------|
+| shadow-none | `--p-shadow-none` | Без тени |
+| shadow-100 | `--p-shadow-100` | Лёгкая тень (hover) |
+| shadow-200 | `--p-shadow-200` | Мягкая тень |
+| shadow-300 | `--p-shadow-300` | Средняя тень |
+| shadow-400 | `--p-shadow-400` | Глубокая тень |
+| shadow-500 | `--p-shadow-500` | Очень глубокая тень (модальные окна) |
+
+## Прозрачность (Opacity)
+
+Доступны уровни прозрачности для белого и чёрного с шагом 10% (от 0.1 до 1.0).
+
+## Примечания
+
+- Все токены привязаны к переменным Figma и синхронизируются с `src/lib/providers/prime-preset/tokens/tokens.json`.
+- Для Tailwind используются CSS переменные через `theme.extend.colors`.
+- При отсутствии значения в коде обратитесь к [`missing.md`](#missing.md).
diff --git a/src/lib/providers/prime-preset/tokens/components/accordion.ts b/src/lib/providers/prime-preset/tokens/components/accordion.ts
index b9b38aa9..500facbb 100644
--- a/src/lib/providers/prime-preset/tokens/components/accordion.ts
+++ b/src/lib/providers/prime-preset/tokens/components/accordion.ts
@@ -5,8 +5,8 @@
 export const accordionCss = ({ dt }: { dt: (token: string) => string }): string => `
   /* ─── Шрифт заголовка ─── */
   .p-accordionheader {
-    font-family: ${dt('fonts.fontFamily.base')};
-    font-size: ${dt('fonts.fontSize.300')};
+    font-family: ${dt('accordion.extend.fonts_fontFamily_base')};
+    font-size: ${dt('accordion.extend.fonts_fontSize_300')};
   }
 
   /* ─── Размер иконки toggle ─── */
diff --git a/src/lib/providers/prime-preset/tokens/components/autocomplete.ts b/src/lib/providers/prime-preset/tokens/components/autocomplete.ts
index e1119016..b989d14b 100644
--- a/src/lib/providers/prime-preset/tokens/components/autocomplete.ts
+++ b/src/lib/providers/prime-preset/tokens/components/autocomplete.ts
@@ -8,14 +8,14 @@ export const autocompleteCss = ({ dt }: { dt: (token: string) => string }): stri
   .p-autocomplete:has(input:disabled) .p-autocomplete-input,
   .p-autocomplete:has(input:disabled) .p-autocomplete-input-multiple,
   .p-autocomplete:has(input:disabled) .p-autocomplete-dropdown {
-    border-color: ${dt('form.borderColor')};
+    border-color: ${dt('autocomplete.extend.form_borderColor')};
   }
 
   /* ─── Инпут и границы ─── */
   .p-autocomplete .p-autocomplete-input {
     width: 100%;
     padding: ${dt('autocomplete.root.paddingY')} ${dt('autocomplete.root.paddingX')};
-    line-height: ${dt('fonts.lineHeight.250')};
+    line-height: ${dt('autocomplete.extend.fonts_lineHeight_250')};
   }
 
   /* Монолитный вид: убираем стыкующиеся границы инпута и dropdown-кнопки.
@@ -34,12 +34,12 @@ export const autocompleteCss = ({ dt }: { dt: (token: string) => string }): stri
   .p-autocomplete.p-component:not(:has(input:disabled)):hover .p-inputtext.p-autocomplete-input,
   .p-autocomplete.p-component:not(:has(input:disabled)):hover .p-autocomplete-dropdown,
   .p-autocomplete.p-component:not(:has(input:disabled)):has(.p-autocomplete-input:hover) .p-autocomplete-dropdown {
-    border-color: ${dt('form.hoverBorderSecondaryColor')};
+    border-color: ${dt('autocomplete.extend.form_hoverBorderSecondaryColor')};
   }
 
   /* ─── States: Focus ─── */
   .p-autocomplete:has(.p-autocomplete-input:focus) .p-autocomplete-dropdown {
-    border-color: ${dt('form.focusBorderSecondaryColor')};
+    border-color: ${dt('autocomplete.extend.form_focusBorderSecondaryColor')};
   }
 
   /* ─── Иконки ─── */
@@ -49,12 +49,12 @@ export const autocompleteCss = ({ dt }: { dt: (token: string) => string }): stri
   }
 
   .p-autocomplete.p-component:has(.p-autocomplete-dropdown) .p-autocomplete-clear-icon {
-    inset-inline-end: ${dt('form.width.300')};
+    inset-inline-end: ${dt('autocomplete.extend.form_width_300')};
   }
 
   /* ─── Multiple: чипсы ─── */
   .p-autocomplete .p-autocomplete-input-multiple {
-    line-height: ${dt('fonts.lineHeight.250')};
+    line-height: ${dt('autocomplete.extend.fonts_lineHeight_250')};
     padding: ${dt('autocomplete.root.paddingY')} ${dt('autocomplete.root.paddingX')};
   }
 
@@ -138,8 +138,8 @@ export const autocompleteCss = ({ dt }: { dt: (token: string) => string }): stri
   }
 
   .p-autocomplete.p-component .p-inputtext-xlg .p-autocomplete-chip {
-    padding-top: ${dt('spacing.2x')};
-    padding-bottom: ${dt('spacing.2x')};
-    font-size: ${dt('fonts.fontSize.300')};
+    padding-top: ${dt('autocomplete.extend.dimension_space_200')};
+    padding-bottom: ${dt('autocomplete.extend.dimension_space_200')};
+    font-size: ${dt('autocomplete.extend.fonts_fontSize_300')};
   }
 `;
diff --git a/src/lib/providers/prime-preset/tokens/components/avatar.ts b/src/lib/providers/prime-preset/tokens/components/avatar.ts
index 2c80d571..732298c4 100644
--- a/src/lib/providers/prime-preset/tokens/components/avatar.ts
+++ b/src/lib/providers/prime-preset/tokens/components/avatar.ts
@@ -2,10 +2,10 @@ export const avatarCss = ({ dt }: { dt: (token: string) => string }): string =>
   :root {
     --p-avatar-extend-border-color:         ${dt('avatar.extend.borderColor')};
     --p-avatar-extend-circle-border-radius: ${dt('avatar.extend.circle.borderRadius')};
-    --p-avatar-group-border-color:          ${dt('content.background')};
-    --p-avatar-group-offset:                calc(-1 * ${dt('media.padding.300')});
-    --p-avatar-lg-group-offset:             calc(-1 * ${dt('media.padding.300')});
-    --p-avatar-xl-group-offset:             calc(-1 * ${dt('media.padding.600')});
+    --p-avatar-group-border-color:          ${dt('avatar.extend.content_background')};
+    --p-avatar-group-offset:                calc(-1 * ${dt('avatar.extend.media_padding_300')});
+    --p-avatar-lg-group-offset:             calc(-1 * ${dt('avatar.extend.media_padding_300')});
+    --p-avatar-xl-group-offset:             calc(-1 * ${dt('avatar.extend.media_padding_600')});
   }
 
   /* ─── Группировка: отступы для кастомных классов хост-элемента <avatar> ─── */
diff --git a/src/lib/providers/prime-preset/tokens/components/breadcrumb.ts b/src/lib/providers/prime-preset/tokens/components/breadcrumb.ts
index 5c6fe006..dc5f80ad 100644
--- a/src/lib/providers/prime-preset/tokens/components/breadcrumb.ts
+++ b/src/lib/providers/prime-preset/tokens/components/breadcrumb.ts
@@ -1,7 +1,7 @@
 export const breadcrumbCss = ({ dt }: { dt: (token: string) => string }): string => `
   .p-breadcrumb-item-link {
     padding: ${dt('breadcrumb.extend.extItem.padding')};
-    font-size: ${dt('fonts.fontSize.200')};
+    font-size: ${dt('breadcrumb.extend.fonts_fontSize_200')};
   }
 
   .p-breadcrumb-item-link:hover {
@@ -13,12 +13,12 @@ export const breadcrumbCss = ({ dt }: { dt: (token: string) => string }): string
   }
 
   .p-breadcrumb-item:last-child .p-breadcrumb-item-link {
-    opacity: ${dt('opacity.500')};
+    opacity: ${dt('breadcrumb.extend.opacity_500')};
     pointer-events: none;
     cursor: default;
   }
 
   .p-breadcrumb-item:last-child .p-breadcrumb-item-link:hover {
-    background: ${dt('transparent')};
+    background: ${dt('breadcrumb.extend.transparent')};
   }
 `;
diff --git a/src/lib/providers/prime-preset/tokens/components/card.ts b/src/lib/providers/prime-preset/tokens/components/card.ts
index 7bfac62c..c5d96940 100644
--- a/src/lib/providers/prime-preset/tokens/components/card.ts
+++ b/src/lib/providers/prime-preset/tokens/components/card.ts
@@ -19,7 +19,7 @@ export const cardCss = ({ dt }: { dt: (token: string) => string }): string => `
 
   /* ─── Overlay variant ─── */
   .p-card.p-component.shadow-md {
-    box-shadow: ${dt('overlay.popover.shadow')};
+    box-shadow: ${dt('card.extend.overlay_popover_shadow')};
   }
 
   /* ─── Caption (Title & Subtitle wrapper) ─── */
@@ -31,8 +31,8 @@ export const cardCss = ({ dt }: { dt: (token: string) => string }): string => `
 
   /* ─── Subtitle typography ─── */
   .p-card-subtitle {
-    font-family: ${dt('fonts.fontFamily.heading')};
-    font-size: ${dt('fonts.fontSize.200')};
-    font-weight: ${dt('fonts.fontWeight.regular')};
+    font-family: ${dt('card.extend.fonts_fontFamily_heading')};
+    font-size: ${dt('card.extend.fonts_fontSize_200')};
+    font-weight: ${dt('card.extend.fonts_fontWeight_regular')};
   }
 `;
diff --git a/src/lib/providers/prime-preset/tokens/components/carousel.ts b/src/lib/providers/prime-preset/tokens/components/carousel.ts
index 298a3d13..f1ca8dfe 100644
--- a/src/lib/providers/prime-preset/tokens/components/carousel.ts
+++ b/src/lib/providers/prime-preset/tokens/components/carousel.ts
@@ -1,21 +1,21 @@
 export const carouselCss = ({ dt }: { dt: (token: string) => string }): string => `
   .p-carousel .p-carousel-prev-button.p-button-secondary,
   .p-carousel .p-carousel-next-button.p-button-secondary {
-    background: ${dt('surface.200')};
-    color: ${dt('text.color')};
+    background: ${dt('carousel.extend.surface_200')};
+    color: ${dt('carousel.extend.text_color')};
     border-color: transparent;
   }
 
   .p-carousel .p-carousel-prev-button.p-button-secondary:not(:disabled):hover,
   .p-carousel .p-carousel-next-button.p-button-secondary:not(:disabled):hover {
-    background: ${dt('surface.300')};
-    color: ${dt('text.color')};
+    background: ${dt('carousel.extend.surface_300')};
+    color: ${dt('carousel.extend.text_color')};
   }
 
   .p-carousel .p-carousel-prev-button.p-button-secondary:not(:disabled):active,
   .p-carousel .p-carousel-next-button.p-button-secondary:not(:disabled):active {
-    background: ${dt('surface.400')};
-    color: ${dt('text.color')};
+    background: ${dt('carousel.extend.surface_400')};
+    color: ${dt('carousel.extend.text_color')};
   }
 
   .p-carousel .p-button-icon-only.p-button-rounded {
diff --git a/src/lib/providers/prime-preset/tokens/components/checkbox.ts b/src/lib/providers/prime-preset/tokens/components/checkbox.ts
index a1e3d355..8a2dde52 100644
--- a/src/lib/providers/prime-preset/tokens/components/checkbox.ts
+++ b/src/lib/providers/prime-preset/tokens/components/checkbox.ts
@@ -3,37 +3,37 @@ export const checkboxCss = ({ dt }: { dt: (token: string) => string }): string =
 .checkbox-label {
   display: flex;
   align-items: center;
-  color: ${dt('text.color')};
-  font-family: ${dt('fonts.fontFamily.base')};
-  font-size: ${dt('fonts.fontSize.300')};
-  font-weight: ${dt('fonts.fontWeight.regular')};
+  color: ${dt('checkbox.extend.text_color')};
+  font-family: ${dt('checkbox.extend.fonts_fontFamily_base')};
+  font-size: ${dt('checkbox.extend.fonts_fontSize_300')};
+  font-weight: ${dt('checkbox.extend.fonts_fontWeight_regular')};
   line-height: normal;
   cursor: pointer;
 }
 
 .checkbox-label--hover {
-  color: ${dt('text.primaryColor')};
+  color: ${dt('checkbox.extend.text_brand')};
 }
 
 .checkbox-label--disabled {
-  color: ${dt('text.mutedColor')};
+  color: ${dt('checkbox.extend.text_mutedColor')};
   cursor: default;
 }
 
 .checkbox-caption {
-  color: ${dt('text.secondaryColor')};
-  font-family: ${dt('fonts.fontFamily.heading')};
-  font-size: ${dt('fonts.fontSize.200')};
-  font-weight: ${dt('fonts.fontWeight.regular')};
+  color: ${dt('checkbox.extend.text_subtle')};
+  font-family: ${dt('checkbox.extend.fonts_fontFamily_heading')};
+  font-size: ${dt('checkbox.extend.fonts_fontSize_200')};
+  font-weight: ${dt('checkbox.extend.fonts_fontWeight_regular')};
   line-height: normal;
 }
 
 .checkbox-caption--hover {
-  color: ${dt('text.primaryColor')};
+  color: ${dt('checkbox.extend.text_brand')};
 }
 
 .checkbox-caption--disabled {
-  color: ${dt('text.disabledColor')};
+  color: ${dt('checkbox.extend.text_disabled')};
 }
 
 /* Переопределение ширины border для checkbox */
@@ -62,13 +62,13 @@ export const checkboxCss = ({ dt }: { dt: (token: string) => string }): string =
 .p-checkbox:not(.p-disabled):not(.p-checkbox-checked):not(.p-invalid):has(.p-checkbox-input:focus-visible) .p-checkbox-box,
 .p-checkbox-checked:not(.p-disabled):not(.p-invalid):has(.p-checkbox-input:focus-visible) .p-checkbox-box,
 .p-checkbox-indeterminate:not(.p-disabled):not(.p-invalid):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
-  box-shadow: 0 0 0 ${dt('checkbox.root.focusRing.focusRing')} ${dt('focusRing.extend.success')};
+  box-shadow: 0 0 0 ${dt('checkbox.root.focusRing.focusRing')} ${dt('checkbox.extend.focusRing_success')};
 }
 
 /* Focus ring с красным цветом для состояний с ошибкой */
 .p-checkbox.p-invalid .p-checkbox-box,
 .p-checkbox-checked.p-invalid .p-checkbox-box,
 .p-checkbox-indeterminate.p-invalid .p-checkbox-box {
-  box-shadow: 0 0 0 ${dt('focusRing.width')} ${dt('focusRing.extend.invalid')};
+  box-shadow: 0 0 0 ${dt('checkbox.extend.focusRing_width')} ${dt('checkbox.extend.focusRing_invalid')};
 }
 `;
diff --git a/src/lib/providers/prime-preset/tokens/components/chip.ts b/src/lib/providers/prime-preset/tokens/components/chip.ts
index d4e93526..460ad4f2 100644
--- a/src/lib/providers/prime-preset/tokens/components/chip.ts
+++ b/src/lib/providers/prime-preset/tokens/components/chip.ts
@@ -17,10 +17,10 @@ export const chipCss = ({ dt }: { dt: (token: string) => string }): string => `
 
   /* ─── Типографика лейбла ─── */
   .p-chip-label {
-    font-family: ${dt('fonts.fontFamily.base')};
-    font-size: ${dt('fonts.fontSize.300')};
-    font-weight: ${dt('fonts.fontWeight.regular')};
-    line-height: ${dt('fonts.lineHeight.400')};
+    font-family: ${dt('chip.extend.fonts_fontFamily_base')};
+    font-size: ${dt('chip.extend.fonts_fontSize_300')};
+    font-weight: ${dt('chip.extend.fonts_fontWeight_regular')};
+    line-height: ${dt('chip.extend.fonts_lineHeight_400')};
   }
 
   /* ─── Сброс уменьшенного padding PrimeNG при наличии кнопки удаления ─── */
@@ -30,12 +30,12 @@ export const chipCss = ({ dt }: { dt: (token: string) => string }): string => `
 
   /* ─── Focus ring иконки удаления ─── */
   .p-chip-remove-icon:focus-visible {
-    outline: ${dt('chip.removeIcon.focusRing.width')} solid ${dt('focusRing.extend.success')};
+    outline: ${dt('chip.removeIcon.focusRing.width')} solid ${dt('chip.extend.focusRing_success')};
   }
 
   /* ─── Disabled состояние ─── */
   .p-chip.p-disabled {
-    opacity: ${dt('opacity.500')};
+    opacity: ${dt('chip.extend.opacity_500')};
     pointer-events: none;
   }
 
diff --git a/src/lib/providers/prime-preset/tokens/components/confirm-dialog.ts b/src/lib/providers/prime-preset/tokens/components/confirm-dialog.ts
index bc9e3ffd..ce681c42 100644
--- a/src/lib/providers/prime-preset/tokens/components/confirm-dialog.ts
+++ b/src/lib/providers/prime-preset/tokens/components/confirm-dialog.ts
@@ -15,19 +15,19 @@ export const confirmDialogCss = ({ dt }: { dt: (token: string) => string }): str
 
   /* Размеры */
   .p-confirmdialog.p-dialog {
-    width: ${dt('overlay.width')};
+    width: ${dt('confirmdialog.extend.dimension_overlayWidth_base')};
   }
 
   .p-confirmdialog-sm.p-dialog {
-    width: ${dt('sizing.80x')};
+    width: ${dt('confirmdialog.extend.dimension_overlayWidth_sm')};
   }
 
   .p-confirmdialog-lg.p-dialog {
-    width: ${dt('sizing.120x')};
+    width: ${dt('confirmdialog.extend.dimension_overlayWidth_lg')};
   }
 
   .p-confirmdialog-xlg.p-dialog {
-    width: ${dt('sizing.128x')};
+    width: ${dt('confirmdialog.extend.dimension_overlayWidth_xlg')};
   }
 
   /* Цвета иконок по severity */
diff --git a/src/lib/providers/prime-preset/tokens/components/data-table.ts b/src/lib/providers/prime-preset/tokens/components/data-table.ts
index d5d0960e..5745eafa 100644
--- a/src/lib/providers/prime-preset/tokens/components/data-table.ts
+++ b/src/lib/providers/prime-preset/tokens/components/data-table.ts
@@ -23,6 +23,6 @@ export const dataTableCss = ({ dt }: { dt: (token: string) => string }): string
   }
 
   .p-datatable .p-datatable-sortable-column:not(.p-datatable-column-sorted):hover {
-    color: ${dt('text.hoverColor')};
+    color: ${dt('datatable.extend.text_hoverColor')};
   }
 `;
diff --git a/src/lib/providers/prime-preset/tokens/components/date-picker.ts b/src/lib/providers/prime-preset/tokens/components/date-picker.ts
index a923663f..378c6a7f 100644
--- a/src/lib/providers/prime-preset/tokens/components/date-picker.ts
+++ b/src/lib/providers/prime-preset/tokens/components/date-picker.ts
@@ -50,7 +50,7 @@ export const datePickerCss = ({ dt }: { dt: (token: string) => string }): string
 }
 
 .p-datepicker-today.p-datepicker-today > .p-datepicker-day:not(.p-datepicker-day-selected) {
-  border: ${dt('form.borderWidth')} solid ${dt(
+  border: ${dt('datepicker.extend.form_borderWidth')} solid ${dt(
   'datepicker.extend.extToday.borderColor'
 )};
 }
@@ -73,16 +73,16 @@ export const datePickerCss = ({ dt }: { dt: (token: string) => string }): string
 
 /* ─── Weekday header text ─── */
 .p-datepicker-weekday {
-  font-family: ${dt('fonts.fontFamily.base')};
-  font-size: ${dt('fonts.fontSize.300')};
-  font-weight: ${dt('fonts.fontWeight.demibold')};
+  font-family: ${dt('datepicker.extend.fonts_fontFamily_base')};
+  font-size: ${dt('datepicker.extend.fonts_fontSize_300')};
+  font-weight: ${dt('datepicker.extend.fonts_fontWeight_demibold')};
 }
 
 /* ─── Day cell text ─── */
 .p-datepicker-day {
-  font-family: ${dt('fonts.fontFamily.base')};
-  font-size: ${dt('fonts.fontSize.300')};
-  font-weight: ${dt('fonts.fontWeight.regular')};
+  font-family: ${dt('datepicker.extend.fonts_fontFamily_base')};
+  font-size: ${dt('datepicker.extend.fonts_fontSize_300')};
+  font-weight: ${dt('datepicker.extend.fonts_fontWeight_regular')};
 }
 
 /* ─── Скрываем нативный time picker (заменён кастомным в footer) ─── */
@@ -94,7 +94,7 @@ export const datePickerCss = ({ dt }: { dt: (token: string) => string }): string
   background: transparent;
   color: ${dt('button.colorScheme.light.text.primary.color')};
   border: 0 none;
-  font-family: ${dt('fonts.fontFamily.heading')};
+  font-family: ${dt('datepicker.extend.fonts_fontFamily_heading')};
   font-weight: ${dt('button.root.label.fontWeight')};
   transition: background-color ${dt('button.root.transitionDuration')};
 }
@@ -141,7 +141,7 @@ export const datePickerCss = ({ dt }: { dt: (token: string) => string }): string
   justify-content: center;
   gap: ${dt('datepicker.timePicker.gap')};
   padding: ${dt('datepicker.timePicker.padding')};
-  border-top: ${dt('form.borderWidth')} solid ${dt('datepicker.panel.borderColor')};
+  border-top: ${dt('datepicker.extend.form_borderWidth')} solid ${dt('datepicker.panel.borderColor')};
 }
 
 .p-datepicker-time-picker-custom .p-datepicker-time-field {
@@ -153,9 +153,9 @@ export const datePickerCss = ({ dt }: { dt: (token: string) => string }): string
 }
 
 .p-datepicker-time-picker-custom .p-datepicker-time-label {
-  font-family: ${dt('fonts.fontFamily.heading')};
-  font-size: ${dt('fonts.fontSize.100')};
-  font-weight: ${dt('fonts.fontWeight.regular')};
+  font-family: ${dt('datepicker.extend.fonts_fontFamily_heading')};
+  font-size: ${dt('datepicker.extend.fonts_fontSize_100')};
+  font-weight: ${dt('datepicker.extend.fonts_fontWeight_regular')};
   line-height: 1;
   color: ${dt('datepicker.extend.extTimePicker.color')};
 }
@@ -167,12 +167,12 @@ export const datePickerCss = ({ dt }: { dt: (token: string) => string }): string
 }
 
 .p-datepicker-time-picker-custom .p-datepicker-separator {
-  font-family: ${dt('fonts.fontFamily.heading')};
-  font-size: ${dt('fonts.fontSize.100')};
-  font-weight: ${dt('fonts.fontWeight.regular')};
+  font-family: ${dt('datepicker.extend.fonts_fontFamily_heading')};
+  font-size: ${dt('datepicker.extend.fonts_fontSize_100')};
+  font-weight: ${dt('datepicker.extend.fonts_fontWeight_regular')};
   line-height: 1;
   color: ${dt('datepicker.extend.extTimePicker.color')};
-  margin-top: calc(${dt('fonts.fontSize.100')} + ${dt('datepicker.timePicker.buttonGap')});
+  margin-top: calc(${dt('datepicker.extend.fonts_fontSize_100')} + ${dt('datepicker.timePicker.buttonGap')});
 }
 
 :is(.p-datepicker-month-select, .p-datepicker-year-select) .p-select-dropdown {
@@ -180,7 +180,7 @@ export const datePickerCss = ({ dt }: { dt: (token: string) => string }): string
 }
 
 :is(.p-datepicker-month-select, .p-datepicker-year-select) .p-select-label {
-  width: ${dt('sizing.24x')};
+  width: ${dt('datepicker.extend.dimension_size_1000')};
 }
 
 `;
diff --git a/src/lib/providers/prime-preset/tokens/components/dialog.ts b/src/lib/providers/prime-preset/tokens/components/dialog.ts
index 7426012c..925d1829 100644
--- a/src/lib/providers/prime-preset/tokens/components/dialog.ts
+++ b/src/lib/providers/prime-preset/tokens/components/dialog.ts
@@ -1,20 +1,20 @@
 export const dialogCss = ({ dt }: { dt: (token: string) => string }): string => `
   .p-dialog .p-dialog-title {
-    font-family: ${dt('fonts.fontFamily.heading')};
+    font-family: ${dt('dialog.extend.fonts_fontFamily_heading')};
     font-size: ${dt('dialog.title.fontSize')};
     font-weight: ${dt('dialog.title.fontWeight')};
-    line-height: ${dt('fonts.lineHeight.550')};
+    line-height: ${dt('dialog.extend.fonts_lineHeight_550')};
   }
 
   .p-dialog .p-dialog-content {
-    font-family: ${dt('fonts.fontFamily.base')};
-    font-size: ${dt('fonts.fontSize.300')};
-    font-weight: ${dt('fonts.fontWeight.regular')};
-    line-height: ${dt('fonts.lineHeight.500')};
+    font-family: ${dt('dialog.extend.fonts_fontFamily_base')};
+    font-size: ${dt('dialog.extend.fonts_fontSize_300')};
+    font-weight: ${dt('dialog.extend.fonts_fontWeight_regular')};
+    line-height: ${dt('dialog.extend.fonts_lineHeight_500')};
   }
 
   .p-dialog .p-dialog-header {
-    border-bottom: ${dt('borderWidth.100')} solid ${dt('dialog.root.borderColor')};
+    border-bottom: ${dt('dialog.extend.dimension_borderWidth_100')} solid ${dt('dialog.root.borderColor')};
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -36,18 +36,18 @@ export const dialogCss = ({ dt }: { dt: (token: string) => string }): string =>
   }
 
   .p-dialog {
-    width: ${dt('overlay.width')};
+    width: ${dt('dialog.extend.dimension_overlayWidth_base')};
   }
 
   .p-dialog.p-component.p-dialog-sm {
-    width: ${dt('sizing.80x')};
+    width: ${dt('dialog.extend.dimension_overlayWidth_sm')};
   }
 
   .p-dialog.p-component.p-dialog-lg {
-    width: ${dt('sizing.120x')};
+    width: ${dt('dialog.extend.dimension_overlayWidth_lg')};
   }
 
   .p-dialog.p-component.p-dialog-xlg {
-    width: ${dt('sizing.128x')};
+    width: ${dt('dialog.extend.dimension_overlayWidth_xlg')};
   }
 `;
diff --git a/src/lib/providers/prime-preset/tokens/components/divider.ts b/src/lib/providers/prime-preset/tokens/components/divider.ts
index de3e3581..f3141b06 100644
--- a/src/lib/providers/prime-preset/tokens/components/divider.ts
+++ b/src/lib/providers/prime-preset/tokens/components/divider.ts
@@ -15,9 +15,9 @@ export const dividerCss = ({ dt }: { dt: (token: string) => string }): string =>
     display: flex;
     align-items: center;
     gap: var(--p-divider-extend-content-gap);
-    font-family: ${dt('fonts.fontFamily.heading')};
-    font-size: ${dt('fonts.fontSize.200')};
-    font-weight: ${dt('fonts.fontWeight.demibold')};
+    font-family: ${dt('divider.extend.fonts_fontFamily_heading')};
+    font-size: ${dt('divider.extend.fonts_fontSize_200')};
+    font-weight: ${dt('divider.extend.fonts_fontWeight_demibold')};
   }
 
   .p-divider-content .ti {
diff --git a/src/lib/providers/prime-preset/tokens/components/drawer.ts b/src/lib/providers/prime-preset/tokens/components/drawer.ts
index 8783c865..bedc92e4 100644
--- a/src/lib/providers/prime-preset/tokens/components/drawer.ts
+++ b/src/lib/providers/prime-preset/tokens/components/drawer.ts
@@ -8,7 +8,7 @@ const drawerCss = ({ dt }: { dt: (token: string) => string }): string => `
 /* Нижняя граница и внутренние отступы заголовка */
 .p-drawer.p-component .p-drawer-header {
   border-bottom: 1px solid ${dt('drawer.extend.extHeader.borderColor')};
-  padding: ${dt('overlay.modal.padding.300')} ${dt('overlay.modal.padding.300')} ${dt('overlay.modal.padding.100')} ${dt('overlay.modal.padding.300')};
+  padding: ${dt('drawer.extend.overlay_modal_padding_300')} ${dt('drawer.extend.overlay_modal_padding_300')} ${dt('drawer.extend.dimension_space_400')} ${dt('drawer.extend.overlay_modal_padding_300')};
 }
 
 /* Типографика */
@@ -24,11 +24,11 @@ const drawerCss = ({ dt }: { dt: (token: string) => string }): string => `
 
 /* Внутренние отступы контента и футера */
 .p-drawer.p-component .p-drawer-content {
-  padding: ${dt('overlay.modal.padding.300')};
+  padding: ${dt('drawer.extend.overlay_modal_padding_300')};
 }
 
 .p-drawer.p-component .p-drawer-footer {
-  padding: 0 ${dt('overlay.modal.padding.300')} ${dt('overlay.modal.padding.300')} ${dt('overlay.modal.padding.300')};
+  padding: 0 ${dt('drawer.extend.overlay_modal_padding_300')} ${dt('drawer.extend.overlay_modal_padding_300')} ${dt('drawer.extend.overlay_modal_padding_300')};
 }
 
 /* Боковые drawer (слева/справа) - базовые размеры и отступы от краев экрана */
diff --git a/src/lib/providers/prime-preset/tokens/components/galleria.ts b/src/lib/providers/prime-preset/tokens/components/galleria.ts
index b247c67c..d0314890 100644
--- a/src/lib/providers/prime-preset/tokens/components/galleria.ts
+++ b/src/lib/providers/prime-preset/tokens/components/galleria.ts
@@ -2,7 +2,7 @@ export const galleriaCss = ({ dt }: { dt: (token: string) => string }): string =
   /* ─── Подпись к изображению ─── */
   .p-galleria .p-galleria-caption {
     background: ${dt('galleria.caption.background')};
-    padding: ${dt('spacing.2x')};
+    padding: ${dt('galleria.extend.dimension_space_200')};
   }
 
   /* ─── Кнопки навигации в полноэкранном режиме ─── */
diff --git a/src/lib/providers/prime-preset/tokens/components/inputnumber.ts b/src/lib/providers/prime-preset/tokens/components/inputnumber.ts
index 950a3c1c..124351e0 100644
--- a/src/lib/providers/prime-preset/tokens/components/inputnumber.ts
+++ b/src/lib/providers/prime-preset/tokens/components/inputnumber.ts
@@ -2,15 +2,15 @@ export const inputnumberCss = ({ dt }: { dt: (token: string) => string }): strin
 
 /* ─── Базовые стили ─── */
 .p-inputnumber .p-inputnumber-input {
-  font-family: ${dt('fonts.fontFamily.base')};
+  font-family: ${dt('inputnumber.extend.fonts_fontFamily_base')};
 }
 
 .p-inputnumber .p-inputnumber-input::placeholder {
-  font-family: ${dt('fonts.fontFamily.base')};
+  font-family: ${dt('inputnumber.extend.fonts_fontFamily_base')};
 }
 
 .p-floatlabel:has(.p-inputnumber) label {
-  font-family: ${dt('fonts.fontFamily.base')};
+  font-family: ${dt('inputnumber.extend.fonts_fontFamily_base')};
 }
 
 /* ─── Кнопки увеличения/уменьшения ─── */
diff --git a/src/lib/providers/prime-preset/tokens/components/inputotp.ts b/src/lib/providers/prime-preset/tokens/components/inputotp.ts
index de80e1d9..10961cd7 100644
--- a/src/lib/providers/prime-preset/tokens/components/inputotp.ts
+++ b/src/lib/providers/prime-preset/tokens/components/inputotp.ts
@@ -25,7 +25,7 @@ export const inputotpCss = ({ dt }: { dt: (token: string) => string }): string =
 /* ─── Invalid + Focus ─── */
 .p-inputotp.p-component .p-inputtext.p-invalid:focus {
   border-color: ${dt('inputtext.root.invalidBorderColor')};
-  box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('focusRing.extend.invalid')};
+  box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('inputotp.extend.focusRing_invalid')};
 }
 
 /* ─── Small ─── */
diff --git a/src/lib/providers/prime-preset/tokens/components/inputtext.ts b/src/lib/providers/prime-preset/tokens/components/inputtext.ts
index 8f0131cc..5949c04d 100644
--- a/src/lib/providers/prime-preset/tokens/components/inputtext.ts
+++ b/src/lib/providers/prime-preset/tokens/components/inputtext.ts
@@ -2,16 +2,16 @@ export const inputtextCss = ({ dt }: { dt: (token: string) => string }): string
 
 /* ─── Базовые стили ─── */
 .p-inputtext {
-  line-height: ${dt('fonts.lineHeight.250')};
-  font-family: ${dt('fonts.fontFamily.base')};
+  line-height: ${dt('inputtext.extend.fonts_lineHeight_250')};
+  font-family: ${dt('inputtext.extend.fonts_fontFamily_base')};
 }
 
 .p-inputtext::placeholder {
-  font-family: ${dt('fonts.fontFamily.base')};
+  font-family: ${dt('inputtext.extend.fonts_fontFamily_base')};
 }
 
 .p-floatlabel:has(.p-inputtext) label {
-  font-family: ${dt('fonts.fontFamily.base')};
+  font-family: ${dt('inputtext.extend.fonts_fontFamily_base')};
 }
 
 /* ─── Disabled ─── */
@@ -34,7 +34,7 @@ export const inputtextCss = ({ dt }: { dt: (token: string) => string }): string
 /* ─── Invalid + Focus ─── */
 .p-inputtext.p-invalid:focus {
   border-color: ${dt('inputtext.root.invalidBorderColor')};
-  box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('focusRing.extend.invalid')};
+  box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('inputtext.extend.focusRing_invalid')};
 }
 
 /* ─── Extra Large ─── */
diff --git a/src/lib/providers/prime-preset/tokens/components/listbox.ts b/src/lib/providers/prime-preset/tokens/components/listbox.ts
index 05489d17..2bd5ad9e 100644
--- a/src/lib/providers/prime-preset/tokens/components/listbox.ts
+++ b/src/lib/providers/prime-preset/tokens/components/listbox.ts
@@ -33,8 +33,8 @@ export const listboxCss = ({ dt }: { dt: (token: string) => string }): string =>
   /* ─── Подпись элемента списка ─── */
   .p-listbox-option-caption {
     color: var(--p-listbox-extend-ext-option-caption-color);
-    font-size: ${dt('fonts.fontSize.200')};
-    font-family: ${dt('fonts.fontFamily.heading')};
+    font-size: ${dt('listbox.extend.fonts_fontSize_200')};
+    font-family: ${dt('listbox.extend.fonts_fontFamily_heading')};
   }
 
   /* ─── Галочка выбора ─── */
diff --git a/src/lib/providers/prime-preset/tokens/components/megamenu.ts b/src/lib/providers/prime-preset/tokens/components/megamenu.ts
index 542864b7..13d244c6 100644
--- a/src/lib/providers/prime-preset/tokens/components/megamenu.ts
+++ b/src/lib/providers/prime-preset/tokens/components/megamenu.ts
@@ -7,8 +7,8 @@ export const megamenuCss = ({ dt }: { dt: (token: string) => string }): string =
 
 /* ─── Типографика пунктов меню ─── */
 .p-megamenu-item-label {
-  font-size: ${dt('fonts.fontSize.300')};
-  font-weight: ${dt('fonts.fontWeight.regular')};
+  font-size: ${dt('megamenu.extend.fonts_fontSize_300')};
+  font-weight: ${dt('megamenu.extend.fonts_fontWeight_regular')};
 }
 
 /* ─── Caption (описание) для кастомных пунктов ─── */
@@ -19,7 +19,7 @@ export const megamenuCss = ({ dt }: { dt: (token: string) => string }): string =
 }
 
 .p-megamenu .megamenu-item-caption {
-  font-size: ${dt('fonts.fontSize.200')};
+  font-size: ${dt('megamenu.extend.fonts_fontSize_200')};
   color: ${dt('megamenu.extend.extItem.caption.color')};
 }
 
diff --git a/src/lib/providers/prime-preset/tokens/components/menu.ts b/src/lib/providers/prime-preset/tokens/components/menu.ts
index 2ef5fcfc..21732f10 100644
--- a/src/lib/providers/prime-preset/tokens/components/menu.ts
+++ b/src/lib/providers/prime-preset/tokens/components/menu.ts
@@ -4,10 +4,10 @@ export const menuCss = ({ dt }: { dt: (token: string) => string }): string => `
   }
 
   .p-menu .p-menu-item-content .p-menu-item-link .p-menu-item-label {
-    font-family: ${dt('fonts.fontFamily.base')};
-    font-size: ${dt('fonts.fontSize.300')};
-    font-weight: ${dt('fonts.fontWeight.regular')};
-    line-height: ${dt('fonts.lineHeight.400')};
+    font-family: ${dt('menu.extend.fonts_fontFamily_base')};
+    font-size: ${dt('menu.extend.fonts_fontSize_300')};
+    font-weight: ${dt('menu.extend.fonts_fontWeight_regular')};
+    line-height: ${dt('menu.extend.fonts_lineHeight_400')};
   }
 
   .p-menu .p-menu-item-content .menu-item-label {
@@ -17,9 +17,9 @@ export const menuCss = ({ dt }: { dt: (token: string) => string }): string => `
   }
 
   .p-menu .p-menu-item-content .menu-item-caption {
-    font-family: ${dt('fonts.fontFamily.base')};
-    font-size: ${dt('fonts.fontSize.200')};
-    font-weight: ${dt('fonts.fontWeight.regular')};
+    font-family: ${dt('menu.extend.fonts_fontFamily_base')};
+    font-size: ${dt('menu.extend.fonts_fontSize_200')};
+    font-weight: ${dt('menu.extend.fonts_fontWeight_regular')};
     color: ${dt('menu.colorScheme.light.extend.extItem.caption.color')};
   }
 
@@ -60,8 +60,8 @@ export const menuCss = ({ dt }: { dt: (token: string) => string }): string => `
 
   .p-menu .p-menu-submenu-label {
     text-transform: uppercase;
-    font-size: ${dt('fonts.fontSize.200')};
-    font-family: ${dt('fonts.fontFamily.heading')};
-    line-height: ${dt('fonts.lineHeight.400')};
+    font-size: ${dt('menu.extend.fonts_fontSize_200')};
+    font-family: ${dt('menu.extend.fonts_fontFamily_heading')};
+    line-height: ${dt('menu.extend.fonts_lineHeight_400')};
   }
 `;
diff --git a/src/lib/providers/prime-preset/tokens/components/menubar.ts b/src/lib/providers/prime-preset/tokens/components/menubar.ts
index 6e2202a7..cd566216 100644
--- a/src/lib/providers/prime-preset/tokens/components/menubar.ts
+++ b/src/lib/providers/prime-preset/tokens/components/menubar.ts
@@ -5,13 +5,13 @@ export const menubarCss = ({ dt }: { dt: (token: string) => string }): string =>
   }
 
   .p-menubar-item-label {
-    font-family: ${dt('fonts.fontFamily.base')};
-    font-size: ${dt('fonts.fontSize.300')};
-    font-weight: ${dt('fonts.fontWeight.regular')};
+    font-family: ${dt('menubar.extend.fonts_fontFamily_base')};
+    font-size: ${dt('menubar.extend.fonts_fontSize_300')};
+    font-weight: ${dt('menubar.extend.fonts_fontWeight_regular')};
   }
 
   .p-menubar-item-caption {
-    font-size: ${dt('fonts.fontSize.200')};
+    font-size: ${dt('menubar.extend.fonts_fontSize_200')};
     color: ${dt('menubar.extend.extItem.caption.color')};
   }
 
@@ -22,7 +22,7 @@ export const menubarCss = ({ dt }: { dt: (token: string) => string }): string =>
   }
 
   .p-menubar .menubar-item-caption {
-    font-size: ${dt('fonts.fontSize.200')};
+    font-size: ${dt('menubar.extend.fonts_fontSize_200')};
     color: ${dt('menubar.extend.extItem.caption.color')};
   }
 
diff --git a/src/lib/providers/prime-preset/tokens/components/message.ts b/src/lib/providers/prime-preset/tokens/components/message.ts
index 6e39b2bc..bf0c8fce 100644
--- a/src/lib/providers/prime-preset/tokens/components/message.ts
+++ b/src/lib/providers/prime-preset/tokens/components/message.ts
@@ -24,18 +24,18 @@ export const messageCss = ({ dt }: { dt: (token: string) => string }): string =>
 
   /* Заголовок message */
   .p-message-summary {
-    font-family: ${dt('fonts.fontFamily.base')};
+    font-family: ${dt('message.extend.fonts_fontFamily_base')};
     font-weight: ${dt('message.text.fontWeight')};
-    line-height: ${dt('fonts.lineHeight.250')};
+    line-height: ${dt('message.extend.fonts_lineHeight_250')};
     font-size: ${dt('message.text.fontSize')};
   }
 
   /* Детальное описание message */
   .p-message .p-message-detail {
-    font-family: ${dt('fonts.fontFamily.base')};
-    font-size: ${dt('fonts.fontSize.200')};
-    line-height: ${dt('fonts.lineHeight.250')};
-    font-weight: ${dt('fonts.fontWeight.regular')};
+    font-family: ${dt('message.extend.fonts_fontFamily_base')};
+    font-size: ${dt('message.extend.fonts_fontSize_200')};
+    line-height: ${dt('message.extend.fonts_lineHeight_250')};
+    font-weight: ${dt('message.extend.fonts_fontWeight_regular')};
   }
 
   /* Кнопка закрытия message */
diff --git a/src/lib/providers/prime-preset/tokens/components/metergroup.ts b/src/lib/providers/prime-preset/tokens/components/metergroup.ts
index 91b53797..b4864b69 100644
--- a/src/lib/providers/prime-preset/tokens/components/metergroup.ts
+++ b/src/lib/providers/prime-preset/tokens/components/metergroup.ts
@@ -1,16 +1,16 @@
 export const metergroupCss = ({ dt }: { dt: (path: string) => string }) => `
   .p-metergroup-label-text {
-    font-family: ${dt('fonts.fontFamily.base')};
-    font-size: ${dt('fonts.fontSize.200')};
-    font-weight: ${dt('fonts.fontWeight.regular')};
-    line-height: ${dt('fonts.lineHeight.200')};
+    font-family: ${dt('metergroup.extend.fonts_fontFamily_base')};
+    font-size: ${dt('metergroup.extend.fonts_fontSize_200')};
+    font-weight: ${dt('metergroup.extend.fonts_fontWeight_regular')};
+    line-height: ${dt('metergroup.extend.fonts_lineHeight_200')};
     color: ${dt('metergroup.extend.extLabel.color')};
   }
   .p-metergroup-label .p-metergroup-label-text + span {
-    font-family: ${dt('fonts.fontFamily.base')};
-    font-size: ${dt('fonts.fontSize.200')};
-    font-weight: ${dt('fonts.fontWeight.medium')};
-    color: ${dt('text.color')};
+    font-family: ${dt('metergroup.extend.fonts_fontFamily_base')};
+    font-size: ${dt('metergroup.extend.fonts_fontSize_200')};
+    font-weight: ${dt('metergroup.extend.fonts_fontWeight_medium')};
+    color: ${dt('metergroup.extend.text_color')};
   }
   .p-metergroup-horizontal .p-metergroup-meter { min-height: 100%; }
   .p-metergroup-vertical .p-metergroup-meter { min-width: 100%; }
diff --git a/src/lib/providers/prime-preset/tokens/components/paginator.ts b/src/lib/providers/prime-preset/tokens/components/paginator.ts
index 061b759f..2161399c 100644
--- a/src/lib/providers/prime-preset/tokens/components/paginator.ts
+++ b/src/lib/providers/prime-preset/tokens/components/paginator.ts
@@ -1,18 +1,18 @@
 export const paginatorCss = ({ dt }: { dt: (token: string) => string }): string => `
   /* ─── Current page report ─── */
   .p-paginator .p-paginator-current {
-    font-family: ${dt('fonts.fontFamily.base')};
-    font-size: ${dt('fonts.fontSize.300')};
-    font-weight: ${dt('fonts.fontWeight.regular')};
-    line-height: ${dt('fonts.lineHeight.250')};
+    font-family: ${dt('paginator.extend.fonts_fontFamily_base')};
+    font-size: ${dt('paginator.extend.fonts_fontSize_300')};
+    font-weight: ${dt('paginator.extend.fonts_fontWeight_regular')};
+    line-height: ${dt('paginator.extend.fonts_lineHeight_250')};
     color: ${dt('paginator.currentPageReport.color')};
   }
 
   /* ─── Page number buttons ─── */
   .p-paginator .p-paginator-page {
-    font-family: ${dt('fonts.fontFamily.base')};
-    font-size: ${dt('fonts.fontSize.300')};
-    font-weight: ${dt('fonts.fontWeight.regular')};
-    line-height: ${dt('fonts.lineHeight.250')};
+    font-family: ${dt('paginator.extend.fonts_fontFamily_base')};
+    font-size: ${dt('paginator.extend.fonts_fontSize_300')};
+    font-weight: ${dt('paginator.extend.fonts_fontWeight_regular')};
+    line-height: ${dt('paginator.extend.fonts_lineHeight_250')};
   }
 `;
diff --git a/src/lib/providers/prime-preset/tokens/components/panelmenu.ts b/src/lib/providers/prime-preset/tokens/components/panelmenu.ts
index 0ef79947..15177a06 100644
--- a/src/lib/providers/prime-preset/tokens/components/panelmenu.ts
+++ b/src/lib/providers/prime-preset/tokens/components/panelmenu.ts
@@ -9,7 +9,7 @@ export const panelmenuCss = ({ dt }: { dt: (token: string) => string }): string
 
   .p-panelmenu-header-content,
   .p-panelmenu-item-content {
-    font-size: ${dt('fonts.fontSize.300')};
+    font-size: ${dt('panelmenu.extend.fonts_fontSize_300')};
   }
 
   .p-panelmenu-submenu-icon {
@@ -61,8 +61,8 @@ export const panelmenuCss = ({ dt }: { dt: (token: string) => string }): string
   }
 
   .p-panelmenu .panelmenu-item-caption {
-    font-size: ${dt('fonts.fontSize.200')};
-    line-height: ${dt('fonts.lineHeight.450')};
+    font-size: ${dt('panelmenu.extend.fonts_fontSize_200')};
+    line-height: ${dt('panelmenu.extend.fonts_lineHeight_450')};
     color: ${dt('panelmenu.extend.extItem.caption.color')};
   }
 `;
diff --git a/src/lib/providers/prime-preset/tokens/components/password.ts b/src/lib/providers/prime-preset/tokens/components/password.ts
index b682ad02..48931769 100644
--- a/src/lib/providers/prime-preset/tokens/components/password.ts
+++ b/src/lib/providers/prime-preset/tokens/components/password.ts
@@ -16,10 +16,10 @@ export const passwordCss = ({ dt }: { dt: (token: string) => string }): string =
   }
 
   .p-password-meter-text {
-    font-family: ${dt('fonts.fontFamily.base')};
-    font-size: ${dt('fonts.fontSize.200')};
-    font-weight: ${dt('fonts.fontWeight.regular')};
-    line-height: ${dt('fonts.lineHeight.250')};
+    font-family: ${dt('password.extend.fonts_fontFamily_base')};
+    font-size: ${dt('password.extend.fonts_fontSize_200')};
+    font-weight: ${dt('password.extend.fonts_fontWeight_regular')};
+    line-height: ${dt('password.extend.fonts_lineHeight_250')};
     color: ${dt('password.overlay.color')};
   }
 
@@ -31,7 +31,7 @@ export const passwordCss = ({ dt }: { dt: (token: string) => string }): string =
 
   /* ─── Invalid + Focus ─── */
   .p-password:has(.p-inputtext.p-invalid:focus) {
-    box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('focusRing.extend.invalid')};
+    box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('password.extend.focusRing_invalid')};
     border-radius: ${dt('inputtext.root.borderRadius')};
   }
 
@@ -41,20 +41,20 @@ export const passwordCss = ({ dt }: { dt: (token: string) => string }): string =
 
   /* ─── FloatLabel ─── */
   .p-floatlabel:has(.p-password) label {
-    font-family: ${dt('fonts.fontFamily.base')};
-    font-weight: ${dt('floatlabel.root.fontWeight')};
-    line-height: ${dt('fonts.lineHeight.250')};
-    color: ${dt('floatlabel.root.color')};
+    font-family: ${dt('password.extend.fonts_fontFamily_base')};
+    font-weight: ${dt('password.extend.floatlabel_root_fontWeight')};
+    line-height: ${dt('password.extend.fonts_lineHeight_250')};
+    color: ${dt('password.extend.floatlabel_root_color')};
   }
 
   .p-floatlabel:has(.p-password) .p-floatlabel-active label {
-    font-weight: ${dt('floatlabel.root.active.fontWeight')};
+    font-weight: ${dt('password.extend.floatlabel_root_active_fontWeight')};
   }
 
   .p-floatlabel-in .p-password .p-inputtext {
-    font-family: ${dt('fonts.fontFamily.base')};
-    padding-block-start: ${dt('floatlabel.in.input.paddingTop')};
-    padding-block-end: ${dt('floatlabel.in.input.paddingBottom')};
+    font-family: ${dt('password.extend.fonts_fontFamily_base')};
+    padding-block-start: ${dt('password.extend.floatlabel_in_input_paddingTop')};
+    padding-block-end: ${dt('password.extend.floatlabel_in_input_paddingBottom')};
   }
 
   /* ─── Кастомный контент (правила пароля) ─── */
@@ -71,20 +71,20 @@ export const passwordCss = ({ dt }: { dt: (token: string) => string }): string =
     display: flex;
     align-items: center;
     gap: ${dt('password.content.gap')};
-    font-family: ${dt('fonts.fontFamily.base')};
-    font-size: ${dt('fonts.fontSize.200')};
-    font-weight: ${dt('fonts.fontWeight.regular')};
-    line-height: ${dt('fonts.lineHeight.250')};
+    font-family: ${dt('password.extend.fonts_fontFamily_base')};
+    font-size: ${dt('password.extend.fonts_fontSize_200')};
+    font-weight: ${dt('password.extend.fonts_fontWeight_regular')};
+    line-height: ${dt('password.extend.fonts_lineHeight_250')};
     color: ${dt('password.overlay.color')};
   }
 
   /* ─── Состояния иконок правил ─── */
   .p-password-rule i {
-    font-size: ${dt('fonts.fontSize.200')};
+    font-size: ${dt('password.extend.fonts_fontSize_200')};
   }
 
   .p-password-rule .ti-circle {
-    color: ${dt('surface.400')};
+    color: ${dt('password.extend.surface_400')};
   }
 
   .p-password-rule .ti-circle-check {
diff --git a/src/lib/providers/prime-preset/tokens/components/progressbar.ts b/src/lib/providers/prime-preset/tokens/components/progressbar.ts
index eda95979..1ce30601 100644
--- a/src/lib/providers/prime-preset/tokens/components/progressbar.ts
+++ b/src/lib/providers/prime-preset/tokens/components/progressbar.ts
@@ -1,5 +1,5 @@
 export const progressbarCss = ({ dt }: { dt: (path: string) => string }) => `
   .p-progressbar-label {
-    font-family: ${dt('fonts.fontFamily.base')};
+    font-family: ${dt('progressbar.extend.fonts_fontFamily_base')};
   }
 `;
diff --git a/src/lib/providers/prime-preset/tokens/components/progressspinner.ts b/src/lib/providers/prime-preset/tokens/components/progressspinner.ts
index d901e3e1..8967afa1 100644
--- a/src/lib/providers/prime-preset/tokens/components/progressspinner.ts
+++ b/src/lib/providers/prime-preset/tokens/components/progressspinner.ts
@@ -5,7 +5,7 @@ export const progressspinnerCss = ({ dt }: { dt: (token: string) => string }): s
 
 /* multicolor false */
 .p-progressspinner.p-progressspinner-monochrome .p-progressspinner-circle {
-    stroke: ${dt('primary.color')};
+    stroke: ${dt('progressspinner.extend.primary_color')};
     animation: p-progressspinner-dash 1.5s ease-in-out infinite;
 }
 
diff --git a/src/lib/providers/prime-preset/tokens/components/radiobutton.ts b/src/lib/providers/prime-preset/tokens/components/radiobutton.ts
index 975dce6f..8f6b0c1a 100644
--- a/src/lib/providers/prime-preset/tokens/components/radiobutton.ts
+++ b/src/lib/providers/prime-preset/tokens/components/radiobutton.ts
@@ -3,7 +3,7 @@ export const radiobuttonCss = ({ dt }: { dt: (token: string) => string }): strin
 .p-radiobutton:not(.p-disabled):not(.p-invalid):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box,
 .p-radiobutton-checked:not(.p-disabled):not(.p-invalid):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
   outline: none;
-  box-shadow: 0 0 0 ${dt('radiobutton.focusRing.width')} ${dt('focusRing.extend.success')};
+  box-shadow: 0 0 0 ${dt('radiobutton.focusRing.width')} ${dt('radiobutton.extend.focusRing_success')};
 }
 
 /* Focus ring с красным цветом для состояний с ошибкой */
@@ -11,6 +11,6 @@ export const radiobuttonCss = ({ dt }: { dt: (token: string) => string }): strin
 .p-radiobutton.p-invalid:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box,
 .p-radiobutton-checked.p-invalid .p-radiobutton-box,
 .p-radiobutton-checked.p-invalid:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
-  box-shadow: 0 0 0 ${dt('radiobutton.focusRing.width')} ${dt('focusRing.extend.invalid')};
+  box-shadow: 0 0 0 ${dt('radiobutton.focusRing.width')} ${dt('radiobutton.extend.focusRing_invalid')};
 }
 `;
diff --git a/src/lib/providers/prime-preset/tokens/components/select.ts b/src/lib/providers/prime-preset/tokens/components/select.ts
index 9a3bfd52..21f5d564 100644
--- a/src/lib/providers/prime-preset/tokens/components/select.ts
+++ b/src/lib/providers/prime-preset/tokens/components/select.ts
@@ -3,12 +3,12 @@ export const selectCss = ({ dt }: { dt: (token: string) => string }): string =>
   .p-select.p-component {
     width: 100%;
     border-width: ${dt('select.extend.borderWidth')};
-    line-height: ${dt('fonts.lineHeight.250')};
+    line-height: ${dt('select.extend.fonts_lineHeight_250')};
   }
 
   .p-select.p-component .p-select-label,
   .p-select-option {
-    font-family: ${dt('fonts.fontFamily.base')};
+    font-family: ${dt('select.extend.fonts_fontFamily_base')};
   }
 
   /* ─── Focus ─── */
@@ -19,7 +19,7 @@ export const selectCss = ({ dt }: { dt: (token: string) => string }): string =>
   /* ─── Invalid + Focus ─── */
   .p-select.p-component.p-invalid.p-focus {
     border-color: ${dt('select.root.invalidBorderColor')};
-    box-shadow: 0 0 0 ${dt('select.root.focusRing.width')} ${dt('focusRing.extend.invalid')};
+    box-shadow: 0 0 0 ${dt('select.root.focusRing.width')} ${dt('select.extend.focusRing_invalid')};
   }
 
   /* ─── Readonly ─── */
@@ -44,20 +44,20 @@ export const selectCss = ({ dt }: { dt: (token: string) => string }): string =>
 
   /* ─── FloatLabel ─── */
   .p-floatlabel:has(.p-select.p-component) label {
-    font-family: ${dt('fonts.fontFamily.base')};
-    font-weight: ${dt('floatlabel.root.fontWeight')};
-    line-height: ${dt('fonts.lineHeight.250')};
-    color: ${dt('floatlabel.root.color')};
+    font-family: ${dt('select.extend.fonts_fontFamily_base')};
+    font-weight: ${dt('select.extend.floatlabel_root_fontWeight')};
+    line-height: ${dt('select.extend.fonts_lineHeight_250')};
+    color: ${dt('select.extend.floatlabel_root_color')};
   }
 
   .p-floatlabel:has(.p-select.p-component) .p-floatlabel-active label {
-    font-weight: ${dt('floatlabel.root.active.fontWeight')};
+    font-weight: ${dt('select.extend.floatlabel_root_active_fontWeight')};
   }
 
   .p-floatlabel-in .p-select.p-component .p-select-label {
-    font-family: ${dt('fonts.fontFamily.base')};
-    padding-block-start: ${dt('floatlabel.in.input.paddingTop')};
-    padding-block-end: ${dt('floatlabel.in.input.paddingBottom')};
+    font-family: ${dt('select.extend.fonts_fontFamily_base')};
+    padding-block-start: ${dt('select.extend.floatlabel_in_input_paddingTop')};
+    padding-block-end: ${dt('select.extend.floatlabel_in_input_paddingBottom')};
   }
 
   /* ─── Checkmark: выбранный элемент ─── */
diff --git a/src/lib/providers/prime-preset/tokens/components/selectbutton.ts b/src/lib/providers/prime-preset/tokens/components/selectbutton.ts
index d02fd4fd..5eeb74a9 100644
--- a/src/lib/providers/prime-preset/tokens/components/selectbutton.ts
+++ b/src/lib/providers/prime-preset/tokens/components/selectbutton.ts
@@ -3,21 +3,21 @@ export const selectbuttonCss = ({ dt }: { dt: (token: string) => string }): stri
   background: ${dt('selectbutton.colorScheme.light.extend.background')};
   padding: ${dt('selectbutton.extend.paddingY')} ${dt('selectbutton.extend.paddingX')};
   gap: ${dt('selectbutton.extend.gap')};
-  font-family: ${dt('fonts.fontFamily.heading')};
-  font-weight: ${dt('fonts.fontWeight.demibold')};
+  font-family: ${dt('selectbutton.extend.fonts_fontFamily_heading')};
+  font-weight: ${dt('selectbutton.extend.fonts_fontWeight_demibold')};
 }
 
 .p-selectbutton.p-component .p-togglebutton.p-component {
-  font-family: ${dt('fonts.fontFamily.heading')};
-  font-weight: ${dt('fonts.fontWeight.demibold')};
-  line-height: ${dt('fonts.lineHeight.500')};
-  height: ${dt('controls.iconOnly.700')};
+  font-family: ${dt('selectbutton.extend.fonts_fontFamily_heading')};
+  font-weight: ${dt('selectbutton.extend.fonts_fontWeight_demibold')};
+  line-height: ${dt('selectbutton.extend.fonts_lineHeight_500')};
+  height: ${dt('selectbutton.extend.controls_iconOnly_700')};
   border-radius: ${dt('selectbutton.extend.ext.borderRadius')};
 }
 
 .p-selectbutton.p-component .p-togglebutton .p-togglebutton-label,
 .p-selectbutton.p-component .p-togglebutton .p-togglebutton-content > span {
-  line-height: ${dt('fonts.lineHeight.400')};
+  line-height: ${dt('selectbutton.extend.fonts_lineHeight_400')};
 }
 
 .p-selectbutton.p-component .p-togglebutton.p-togglebutton-checked.p-component,
@@ -35,13 +35,13 @@ export const selectbuttonCss = ({ dt }: { dt: (token: string) => string }): stri
 
 /* Size: small */
 .p-selectbutton.p-selectbutton-small.p-component .p-togglebutton.p-component {
-  line-height: ${dt('fonts.lineHeight.300')};
-  height: ${dt('controls.iconOnly.600')};
+  line-height: ${dt('selectbutton.extend.fonts_lineHeight_300')};
+  height: ${dt('selectbutton.extend.controls_iconOnly_600')};
 }
 
 .p-selectbutton.p-selectbutton-small.p-component .p-togglebutton .p-togglebutton-label,
 .p-selectbutton.p-selectbutton-small.p-component .p-togglebutton .p-togglebutton-content > span {
-  line-height: ${dt('fonts.lineHeight.250')};
+  line-height: ${dt('selectbutton.extend.fonts_lineHeight_250')};
 }
 
 .p-selectbutton.p-selectbutton-small.p-component .p-togglebutton .p-togglebutton-icon,
@@ -57,13 +57,13 @@ export const selectbuttonCss = ({ dt }: { dt: (token: string) => string }): stri
 
 /* Size: large */
 .p-selectbutton.p-selectbutton-large.p-component .p-togglebutton.p-component {
-  line-height: ${dt('fonts.lineHeight.550')};
-  height: ${dt('controls.iconOnly.850')};
+  line-height: ${dt('selectbutton.extend.fonts_lineHeight_550')};
+  height: ${dt('selectbutton.extend.controls_iconOnly_850')};
 }
 
 .p-selectbutton.p-selectbutton-large.p-component .p-togglebutton .p-togglebutton-label,
 .p-selectbutton.p-selectbutton-large.p-component .p-togglebutton .p-togglebutton-content > span {
-  line-height: ${dt('fonts.lineHeight.550')};
+  line-height: ${dt('selectbutton.extend.fonts_lineHeight_550')};
 }
 
 .p-selectbutton.p-selectbutton-large.p-component .p-togglebutton .p-togglebutton-icon,
@@ -73,14 +73,14 @@ export const selectbuttonCss = ({ dt }: { dt: (token: string) => string }): stri
 
 /* Size: xlarge */
 .p-selectbutton.p-selectbutton-xlarge.p-component .p-togglebutton.p-component {
-  font-size: ${dt('fonts.fontSize.600')};
-  line-height: ${dt('fonts.lineHeight.550')};
-  height: ${dt('controls.iconOnly.900')};
+  font-size: ${dt('selectbutton.extend.fonts_fontSize_600')};
+  line-height: ${dt('selectbutton.extend.fonts_lineHeight_550')};
+  height: ${dt('selectbutton.extend.controls_iconOnly_900')};
 }
 
 .p-selectbutton.p-selectbutton-xlarge.p-component .p-togglebutton .p-togglebutton-label,
 .p-selectbutton.p-selectbutton-xlarge.p-component .p-togglebutton .p-togglebutton-content > span {
-  line-height: ${dt('fonts.lineHeight.700')};
+  line-height: ${dt('selectbutton.extend.fonts_lineHeight_700')};
 }
 
 .p-selectbutton.p-selectbutton-xlarge.p-component .p-togglebutton .p-togglebutton-icon,
diff --git a/src/lib/providers/prime-preset/tokens/components/slider.ts b/src/lib/providers/prime-preset/tokens/components/slider.ts
index 0fb55b17..6fca119d 100644
--- a/src/lib/providers/prime-preset/tokens/components/slider.ts
+++ b/src/lib/providers/prime-preset/tokens/components/slider.ts
@@ -5,7 +5,7 @@
 export const sliderCss = ({ dt }: { dt: (token: string) => string }): string => `
   /* ─── Focus ring ползунка ─── */
   .p-slider-handle:focus-visible {
-    outline: ${dt('slider.handle.focusRing.width')} ${dt('slider.handle.focusRing.style')} ${dt('focusRing.extend.success')};
+    outline: ${dt('slider.handle.focusRing.width')} ${dt('slider.handle.focusRing.style')} ${dt('slider.extend.focusRing_success')};
     outline-offset: ${dt('slider.handle.focusRing.offset')};
     box-shadow: none;
   }
diff --git a/src/lib/providers/prime-preset/tokens/components/stepper.ts b/src/lib/providers/prime-preset/tokens/components/stepper.ts
index b6fd0534..ed130d89 100644
--- a/src/lib/providers/prime-preset/tokens/components/stepper.ts
+++ b/src/lib/providers/prime-preset/tokens/components/stepper.ts
@@ -5,7 +5,7 @@ export const stepperCss = ({ dt }: { dt: (token: string) => string }): string =>
   display: flex;
   flex-direction: column;
   gap: ${dt('stepper.extend.extCaption.gap')};
-  line-height: ${dt('fonts.lineHeight.200')};
+  line-height: ${dt('stepper.extend.fonts_lineHeight_200')};
   align-items: flex-start;
   text-align: left;
 }
@@ -14,19 +14,19 @@ export const stepperCss = ({ dt }: { dt: (token: string) => string }): string =>
 .p-stepper .p-step-title .caption-secondary {
   display: flex;
   justify-content: flex-start;
-  font-family: ${dt('fonts.fontFamily.base')};
-  font-size: ${dt('fonts.fontSize.200')};
-  font-weight: ${dt('fonts.fontWeight.regular')};
+  font-family: ${dt('stepper.extend.fonts_fontFamily_base')};
+  font-size: ${dt('stepper.extend.fonts_fontSize_200')};
+  font-weight: ${dt('stepper.extend.fonts_fontWeight_regular')};
   line-height: normal;
-  color: ${dt('text.mutedColor')};
+  color: ${dt('stepper.extend.text_mutedColor')};
 }
 
 /* Номер шага */
 .p-stepper .p-step-number {
-  font-family: ${dt('fonts.fontFamily.base')};
-  font-size: ${dt('fonts.fontSize.300')};
-  font-weight: ${dt('fonts.fontWeight.medium')};
-  line-height: ${dt('fonts.lineHeight.150')};
+  font-family: ${dt('stepper.extend.fonts_fontFamily_base')};
+  font-size: ${dt('stepper.extend.fonts_fontSize_300')};
+  font-weight: ${dt('stepper.extend.fonts_fontWeight_medium')};
+  line-height: ${dt('stepper.extend.fonts_lineHeight_150')};
 }
 
 /* Border для номера шага */
@@ -43,8 +43,8 @@ export const stepperCss = ({ dt }: { dt: (token: string) => string }): string =>
 
 /* Step-number с иконкой */
 .p-stepper .p-step-number:has(i) {
-  background: ${dt('colorScheme.light.transparent')};
-  border-color: ${dt('colorScheme.light.transparent')};
+  background: ${dt('stepper.extend.background_transparent')};
+  border-color: ${dt('stepper.extend.background_transparent')};
 }
 
 /* Размер иконок в step-number */
@@ -59,6 +59,6 @@ export const stepperCss = ({ dt }: { dt: (token: string) => string }): string =>
 
 /* Прозрачный фон для панелей */
 .p-stepper .p-steppanel {
-  background: ${dt('colorScheme.light.transparent')};
+  background: ${dt('stepper.extend.background_transparent')};
 }
 `;
diff --git a/src/lib/providers/prime-preset/tokens/components/tabs.ts b/src/lib/providers/prime-preset/tokens/components/tabs.ts
index e9cc5dcf..1bf7a783 100644
--- a/src/lib/providers/prime-preset/tokens/components/tabs.ts
+++ b/src/lib/providers/prime-preset/tokens/components/tabs.ts
@@ -12,9 +12,9 @@ export const tabsCss = ({ dt }: { dt: (token: string) => string }): string => `
   display: flex;
   align-items: center;
   gap: ${dt('tabs.tab.gap')};
-  font-family: ${dt('fonts.fontFamily.heading')};
-  font-size: ${dt('fonts.fontSize.300')};
-  font-weight: ${dt('fonts.fontWeight.demibold')};
+  font-family: ${dt('tabs.extend.fonts_fontFamily_heading')};
+  font-size: ${dt('tabs.extend.fonts_fontSize_300')};
+  font-weight: ${dt('tabs.extend.fonts_fontWeight_demibold')};
 }
 
 /* Стили для tablist с правильной границей */
diff --git a/src/lib/providers/prime-preset/tokens/components/tag.ts b/src/lib/providers/prime-preset/tokens/components/tag.ts
index 7f84dbe3..4d288fcb 100644
--- a/src/lib/providers/prime-preset/tokens/components/tag.ts
+++ b/src/lib/providers/prime-preset/tokens/components/tag.ts
@@ -1,6 +1,6 @@
 export const tagCss = ({ dt }: { dt: (token: string) => string }): string => `
   .p-tag {
-    font-family: ${dt('fonts.fontFamily.base')};
-    line-height: ${dt('fonts.lineHeight.250')};
+    font-family: ${dt('tag.extend.fonts_fontFamily_base')};
+    line-height: ${dt('tag.extend.fonts_lineHeight_250')};
   }
 `;
diff --git a/src/lib/providers/prime-preset/tokens/components/textarea.ts b/src/lib/providers/prime-preset/tokens/components/textarea.ts
index 263e6886..1bc0d1e2 100644
--- a/src/lib/providers/prime-preset/tokens/components/textarea.ts
+++ b/src/lib/providers/prime-preset/tokens/components/textarea.ts
@@ -3,17 +3,17 @@ export const textareaCss = ({ dt }: { dt: (token: string) => string }): string =
 /* --- Base --- */
 .p-textarea {
   border-width: ${dt('textarea.extend.borderWidth')};
-  line-height: ${dt('fonts.lineHeight.250')};
+  line-height: ${dt('textarea.extend.fonts_lineHeight_250')};
   min-height: ${dt('textarea.extend.minHeight')};
-  font-family: ${dt('fonts.fontFamily.base')};
+  font-family: ${dt('textarea.extend.fonts_fontFamily_base')};
 }
 
 .p-textarea::placeholder {
-  font-family: ${dt('fonts.fontFamily.base')};
+  font-family: ${dt('textarea.extend.fonts_fontFamily_base')};
 }
 
 .p-floatlabel:has(.p-textarea) label {
-  font-family: ${dt('fonts.fontFamily.base')};
+  font-family: ${dt('textarea.extend.fonts_fontFamily_base')};
 }
 
 /* --- Sizes --- */
@@ -42,7 +42,7 @@ export const textareaCss = ({ dt }: { dt: (token: string) => string }): string =
 /* --- Invalid + Focus --- */
 .p-textarea.p-invalid:focus {
   border-color: ${dt('textarea.invalidBorderColor')};
-  box-shadow: 0 0 0 ${dt('textarea.focusRing.width')} ${dt('focusRing.extend.invalid')};
+  box-shadow: 0 0 0 ${dt('textarea.focusRing.width')} ${dt('textarea.extend.focusRing_invalid')};
 }
 
 /* --- ClearButton (showClear) --- */
@@ -52,11 +52,11 @@ export const textareaCss = ({ dt }: { dt: (token: string) => string }): string =
 }
 
 .p-iconfield:has(.p-textarea) .p-textarea {
-  padding-right: ${dt('form.padding.700')};
+  padding-right: ${dt('textarea.extend.form_padding_700')};
 }
 
 .p-iconfield:has(.p-textarea) .p-inputicon {
-  top: ${dt('form.padding.500')};
+  top: ${dt('textarea.extend.form_padding_500')};
   transform: none;
   font-size: ${dt('textarea.extend.iconSize')};
   width: ${dt('textarea.extend.iconSize')};
diff --git a/src/lib/providers/prime-preset/tokens/components/tieredmenu.ts b/src/lib/providers/prime-preset/tokens/components/tieredmenu.ts
index bdef994f..8acda6c8 100644
--- a/src/lib/providers/prime-preset/tokens/components/tieredmenu.ts
+++ b/src/lib/providers/prime-preset/tokens/components/tieredmenu.ts
@@ -4,7 +4,7 @@ export const tieredmenuCss = ({ dt }: { dt: (token: string) => string }): string
   }
 
   .p-tieredmenu-item-content {
-    font-size: ${dt('fonts.fontSize.300')};
+    font-size: ${dt('tieredmenu.extend.fonts_fontSize_300')};
   }
 
   .p-tieredmenu-submenu-icon {
@@ -46,7 +46,7 @@ export const tieredmenuCss = ({ dt }: { dt: (token: string) => string }): string
   }
 
   .p-tieredmenu .p-tieredmenu-item-caption-text {
-    font-size: ${dt('fonts.fontSize.200')};
+    font-size: ${dt('tieredmenu.extend.fonts_fontSize_200')};
     color: ${dt('tieredmenu.extend.extItem.caption.color')};
   }
 `;
diff --git a/src/lib/providers/prime-preset/tokens/components/timeline.ts b/src/lib/providers/prime-preset/tokens/components/timeline.ts
index 562376ec..454737d3 100644
--- a/src/lib/providers/prime-preset/tokens/components/timeline.ts
+++ b/src/lib/providers/prime-preset/tokens/components/timeline.ts
@@ -2,10 +2,10 @@ export const timelineCss = ({ dt }: { dt: (token: string) => string }): string =
 
 /* ─── Типографика ─── */
 .p-timeline {
-  font-family: ${dt('fonts.fontFamily.base')};
-  font-size: ${dt('fonts.fontSize.300')};
-  line-height: ${dt('fonts.lineHeight.500')};
-  color: ${dt('text.color')};
+  font-family: ${dt('timeline.extend.fonts_fontFamily_base')};
+  font-size: ${dt('timeline.extend.fonts_fontSize_300')};
+  line-height: ${dt('timeline.extend.fonts_lineHeight_500')};
+  color: ${dt('timeline.extend.text_color')};
 }
 
 /* ─── Маркер ─── */
diff --git a/src/lib/providers/prime-preset/tokens/components/toast.ts b/src/lib/providers/prime-preset/tokens/components/toast.ts
index adc64305..36506ea2 100644
--- a/src/lib/providers/prime-preset/tokens/components/toast.ts
+++ b/src/lib/providers/prime-preset/tokens/components/toast.ts
@@ -24,14 +24,14 @@ export const toastCss = ({ dt }: { dt: (token: string) => string }): string => `
 
   /* Заголовок toast */
   .p-toast-summary {
-    font-family: ${dt('fonts.fontFamily.base')};
-    line-height: ${dt('fonts.lineHeight.250')};
+    font-family: ${dt('toast.extend.fonts_fontFamily_base')};
+    line-height: ${dt('toast.extend.fonts_lineHeight_250')};
   }
 
   /* Детальное описание toast */
   .p-toast-message .p-toast-detail {
-    font-family: ${dt('fonts.fontFamily.base')};
-    line-height: ${dt('fonts.lineHeight.250')};
+    font-family: ${dt('toast.extend.fonts_fontFamily_base')};
+    line-height: ${dt('toast.extend.fonts_lineHeight_250')};
   }
 
   /* Кнопка закрытия toast-сообщения */
diff --git a/src/lib/providers/prime-preset/tokens/components/togglebutton.ts b/src/lib/providers/prime-preset/tokens/components/togglebutton.ts
index 228d2d39..68e7b83f 100644
--- a/src/lib/providers/prime-preset/tokens/components/togglebutton.ts
+++ b/src/lib/providers/prime-preset/tokens/components/togglebutton.ts
@@ -2,9 +2,9 @@ export const togglebuttonCss = ({ dt }: { dt: (token: string) => string }): stri
 
 /* ─── Типографика ─── */
 .p-togglebutton.p-component {
-  font-family: ${dt('fonts.fontFamily.heading')};
-  font-weight: ${dt('fonts.fontWeight.demibold')};
-  line-height: ${dt('fonts.lineHeight.500')};
+  font-family: ${dt('togglebutton.extend.fonts_fontFamily_heading')};
+  font-weight: ${dt('togglebutton.extend.fonts_fontWeight_demibold')};
+  line-height: ${dt('togglebutton.extend.fonts_lineHeight_500')};
 }
 
 /* ─── Hover unchecked ─── */
@@ -21,10 +21,10 @@ export const togglebuttonCss = ({ dt }: { dt: (token: string) => string }): stri
 
 /* ─── Small ─── */
 .p-togglebutton.p-togglebutton.p-component.p-togglebutton-sm {
-  line-height: ${dt('fonts.lineHeight.300')};
+  line-height: ${dt('togglebutton.extend.fonts_lineHeight_300')};
 }
 .p-togglebutton.p-togglebutton.p-component.p-togglebutton-sm .p-togglebutton-label {
-  line-height: ${dt('fonts.lineHeight.250')};
+  line-height: ${dt('togglebutton.extend.fonts_lineHeight_250')};
 }
 .p-togglebutton.p-togglebutton.p-component.p-togglebutton-sm .p-togglebutton-icon {
   font-size: ${dt('togglebutton.extend.iconSize.sm')};
@@ -37,7 +37,7 @@ export const togglebuttonCss = ({ dt }: { dt: (token: string) => string }): stri
 
 /* ─── Large ─── */
 .p-togglebutton.p-togglebutton.p-component.p-togglebutton-lg {
-  line-height: ${dt('fonts.lineHeight.550')};
+  line-height: ${dt('togglebutton.extend.fonts_lineHeight_550')};
   gap: ${dt('togglebutton.root.gap')};
 }
 .p-togglebutton.p-togglebutton.p-component.p-togglebutton-lg .p-togglebutton-content {
@@ -50,8 +50,8 @@ export const togglebuttonCss = ({ dt }: { dt: (token: string) => string }): stri
 /* ─── Extra Large ─── */
 .p-togglebutton.p-togglebutton.p-component.p-togglebutton-xlarge {
   padding: ${dt('togglebutton.extend.extXlg.padding')};
-  font-size: ${dt('fonts.fontSize.500')};
-  line-height: ${dt('fonts.lineHeight.550')};
+  font-size: ${dt('togglebutton.extend.fonts_fontSize_500')};
+  line-height: ${dt('togglebutton.extend.fonts_lineHeight_550')};
   display: inline-flex;
   align-items: center;
   justify-content: center;
diff --git a/src/lib/providers/prime-preset/tokens/components/toggleswitch.ts b/src/lib/providers/prime-preset/tokens/components/toggleswitch.ts
index 8793c207..2c57e480 100644
--- a/src/lib/providers/prime-preset/tokens/components/toggleswitch.ts
+++ b/src/lib/providers/prime-preset/tokens/components/toggleswitch.ts
@@ -1,11 +1,11 @@
 export const toggleswitchCss = ({ dt }: { dt: (token: string) => string }): string => `
   /* Focus ring для валидных состояний */
   .p-toggleswitch:not(.p-disabled):not(.p-invalid):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {
-    box-shadow: 0 0 0 ${dt('toggleswitch.root.focusRing.width')} ${dt('focusRing.extend.success')};
+    box-shadow: 0 0 0 ${dt('toggleswitch.root.focusRing.width')} ${dt('toggleswitch.extend.focusRing_success')};
   }
 
   /* Focus ring для состояния ошибки */
   .p-toggleswitch.p-invalid:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {
-    box-shadow: 0 0 0 ${dt('focusRing.width')} ${dt('focusRing.extend.invalid')};
+    box-shadow: 0 0 0 ${dt('toggleswitch.extend.focusRing_width')} ${dt('toggleswitch.extend.focusRing_invalid')};
   }
 `;
diff --git a/src/lib/providers/prime-preset/tokens/components/tooltip.ts b/src/lib/providers/prime-preset/tokens/components/tooltip.ts
index 8bbc215f..3284de1b 100644
--- a/src/lib/providers/prime-preset/tokens/components/tooltip.ts
+++ b/src/lib/providers/prime-preset/tokens/components/tooltip.ts
@@ -1,9 +1,9 @@
 export const tooltipCss = ({ dt }: { dt: (token: string) => string }): string => `
 /* Типографика для Tooltip */
 .p-tooltip .p-tooltip-text {
-  font-family: ${dt('fonts.fontFamily.base')};
-  font-size: ${dt('fonts.fontSize.200')};
-  font-weight: ${dt('fonts.fontWeight.regular')};
-  line-height: ${dt('fonts.lineHeight.300')};
+  font-family: ${dt('tooltip.extend.fonts_fontFamily_base')};
+  font-size: ${dt('tooltip.extend.fonts_fontSize_200')};
+  font-weight: ${dt('tooltip.extend.fonts_fontWeight_regular')};
+  line-height: ${dt('tooltip.extend.fonts_lineHeight_300')};
 }
 `;
diff --git a/src/lib/providers/prime-preset/tokens/tokens.json b/src/lib/providers/prime-preset/tokens/tokens.json
index 869e9334..bb1a3262 100644
--- a/src/lib/providers/prime-preset/tokens/tokens.json
+++ b/src/lib/providers/prime-preset/tokens/tokens.json
@@ -316,21 +316,6 @@
         }
       }
     },
-    "borderRadius": {
-      "100": "0.25rem",
-      "200": "0.5rem",
-      "300": "0.75rem",
-      "400": "1rem",
-      "500": "1.5rem",
-      "none": "0rem",
-      "max": "71.3571rem"
-    },
-    "borderWidth": {
-      "100": "0.0714rem",
-      "200": "0.1429rem",
-      "300": "0.25rem",
-      "none": "0rem"
-    },
     "fonts": {
       "fontFamily": {
         "heading": "TT Fellows",
@@ -376,32 +361,38 @@
         "auto": "auto"
       }
     },
-    "spacing": {
-      "none": "0rem",
-      "1x": "0.25rem",
-      "2x": "0.5rem",
-      "3x": "0.75rem",
-      "4x": "1rem",
-      "5x": "1.25rem",
-      "6x": "1.5rem",
-      "7x": "1.75rem",
-      "8x": "2rem",
-      "9x": "2.25rem",
-      "10x": "2.5rem",
-      "11x": "2.75rem",
-      "12x": "3rem",
-      "14x": "3.5rem",
-      "16x": "4rem",
-      "20x": "5rem",
-      "24x": "6rem",
-      "28x": "7rem",
-      "32x": "8rem",
-      "36x": "9rem",
-      "40x": "10rem"
+    "shadows": {
+      "100": "0 0 0.1rem {colors.alpha.black.200}",
+      "200": "0 0 0.25rem {colors.alpha.black.200}",
+      "300": "0 0.1rem 0.25rem {colors.alpha.black.200}",
+      "400": "0 0.25rem 0.5rem {colors.alpha.black.200}",
+      "500": "0 0.5rem 1rem 0 {colors.alpha.black.200}",
+      "none": "none"
+    },
+    "transition": {
+      "easing": {
+        "linear": "linear",
+        "in": "cubic-bezier(0.55, 0.06, 0.7, 0.2)",
+        "out": "cubic-bezier(0.2, 0.6, 0.4, 1)",
+        "inOut": "cubic-bezier(0.65, 0.05, 0.35, 1)"
+      },
+      "duration": {
+        "100": "140ms",
+        "200": "180ms",
+        "300": "240ms",
+        "400": "320ms",
+        "500": "400ms"
+      }
+    },
+    "opacity": {
+      "250": "0.25",
+      "500": "0.5",
+      "1000": "1"
     },
-    "sizing": {
+    "size": {
       "none": "0rem",
       "min": "0.0714rem",
+      "2px": "0.1429rem",
       "1x": "0.25rem",
       "2x": "0.5rem",
       "3x": "0.75rem",
@@ -448,956 +439,562 @@
       "136x": "54rem",
       "140x": "58rem",
       "144x": "60rem",
+      "pill": "71.3571rem",
       "max": "100%"
-    },
-    "shadows": {
-      "100": "0 0 0.1rem {colors.alpha.black.200}",
-      "200": "0 0 0.25rem {colors.alpha.black.200}",
-      "300": "0 0.1rem 0.25rem {colors.alpha.black.200}",
-      "400": "0 0.25rem 0.5rem {colors.alpha.black.200}",
-      "500": "0 0.5rem 1rem 0 {colors.alpha.black.200}",
-      "none": "none"
-    },
-    "transition": {
-      "easing": {
-        "linear": "linear",
-        "in": "cubic-bezier(0.55, 0.06, 0.7, 0.2)",
-        "out": "cubic-bezier(0.2, 0.6, 0.4, 1)",
-        "inOut": "cubic-bezier(0.65, 0.05, 0.35, 1)"
-      },
-      "duration": {
-        "100": "140ms",
-        "200": "180ms",
-        "300": "240ms",
-        "400": "320ms",
-        "500": "400ms"
-      }
-    },
-    "opacity": {
-      "250": "0.25",
-      "500": "0.5",
-      "1000": "1"
     }
   },
   "semantic": {
-    "list": {
-      "padding": "{spacing.1x}",
-      "gap": {
-        "100": "{spacing.1x}",
-        "200": "{spacing.2x}"
-      },
-      "header": {
-        "padding": "{spacing.4x} {spacing.4x} 0 {spacing.4x}"
-      },
-      "option": {
-        "padding": "{spacing.2x} {spacing.3x}",
-        "borderRadius": "{borderRadius.200}"
-      },
-      "optionGroup": {
-        "padding": "{spacing.2x} {spacing.3x}",
-        "fontWeight": "{fonts.fontWeight.demibold}"
-      }
-    },
-    "focusRing": {
-      "width": "{borderWidth.300}",
-      "style": "none",
-      "color": "{focusRing.extend.success}",
-      "offset": "0rem"
-    },
-    "form": {
-      "padding": {
-        "100": "{spacing.1x}",
-        "200": "{spacing.2x}",
-        "300": "{spacing.3x}",
-        "400": "{spacing.4x}",
-        "500": "{spacing.5x}",
-        "600": "{spacing.6x}",
-        "700": "{spacing.7x}"
-      },
-      "borderRadius": {
-        "100": "{borderRadius.200}",
-        "200": "{borderRadius.300}",
-        "300": "{borderRadius.max}"
-      },
-      "borderWidth": "{borderWidth.100}",
-      "icon": {
-        "100": "{sizing.2x}",
-        "200": "{sizing.3x}",
-        "300": "{sizing.4x}",
-        "400": "{sizing.5x}",
-        "500": "{sizing.6x}"
-      },
-      "transitionDuration": "{transition.duration.200}",
-      "size": {
-        "100": "{sizing.min}",
-        "150": "{sizing.1x}",
-        "200": "{sizing.2x}",
-        "250": "{sizing.3x}",
-        "300": "{sizing.4x}",
-        "350": "{sizing.5x}",
-        "400": "{sizing.6x}",
-        "500": "{sizing.8x}",
-        "600": "{sizing.10x}",
-        "700": "{sizing.12x}",
-        "800": "{sizing.16x}",
-        "900": "{sizing.20x}"
-      },
-      "width": {
-        "100": "{sizing.6x}",
-        "200": "{sizing.8x}",
-        "300": "{sizing.10x}",
-        "350": "{sizing.11x}",
-        "400": "{sizing.12x}",
-        "500": "{sizing.60x}",
-        "full": "{sizing.max}"
-      },
-      "gap": {
-        "100": "{spacing.1x}",
-        "200": "{spacing.2x}",
-        "300": "{spacing.3x}",
-        "400": "{spacing.4x}"
-      },
-      "focusRing": {
-        "width": "{focusRing.width}",
-        "style": "{focusRing.style}",
-        "color": "{focusRing.color}",
-        "offset": "{focusRing.offset}"
-      },
-      "sm": {
-        "width": "{sizing.60x}",
-        "fontSize": "{fonts.fontSize.300}",
-        "paddingX": "{spacing.3x}",
-        "paddingY": "{spacing.3x}"
-      },
-      "fontSize": "{fonts.fontSize.300}",
-      "paddingX": "{spacing.4x}",
-      "paddingY": "{spacing.4x}",
-      "lg": {
-        "width": "{sizing.76x}",
-        "fontSize": "{fonts.fontSize.300}",
-        "paddingX": "{spacing.5x}",
-        "paddingY": "{spacing.5x}"
-      },
-      "xlg": {
-        "width": "{sizing.84x}",
-        "fontSize": "{fonts.fontSize.300}",
-        "paddingX": "{spacing.6x}",
-        "paddingY": "{spacing.6x}"
-      }
-    },
-    "content": {
-      "borderRadius": "{borderRadius.300}",
-      "padding": {
-        "100": "{spacing.1x}",
-        "200": "{spacing.2x}",
-        "300": "{spacing.4x}",
-        "400": "{spacing.6x}",
-        "500": "{spacing.7x}"
-      },
-      "borderWidth": "{sizing.min}",
-      "gap": {
-        "100": "{spacing.1x}",
-        "200": "{spacing.2x}",
-        "300": "{spacing.3x}",
-        "400": "{spacing.4x}"
-      }
-    },
-    "navigation": {
-      "width": {
-        "100": "{borderWidth.100}",
-        "200": "{borderWidth.300}"
-      },
-      "borderRadius": "{borderRadius.100}",
-      "padding": {
-        "100": "{spacing.1x}",
-        "200": "{spacing.3x}",
-        "300": "{spacing.4x}",
-        "400": "{spacing.6x}"
-      },
-      "size": {
-        "100": "{sizing.1x}",
-        "200": "{sizing.2x}",
-        "300": "{sizing.5x}",
-        "400": "{sizing.8x}",
-        "500": "{sizing.16x}"
-      },
-      "submenu": {
-        "padding": "{spacing.5x}"
-      },
-      "list": {
-        "padding": {
-          "100": "{spacing.1x}",
-          "200": "{spacing.2x}"
+    "colorScheme": {
+      "light": {
+        "background": {
+          "surface": {
+            "ground": "{colors.solid.zinc.100}",
+            "section": "{colors.alpha.white.1000}",
+            "field": "{colors.alpha.white.1000}",
+            "raised": "{colors.alpha.white.1000}",
+            "overlay": "{colors.alpha.white.1000}",
+            "sunken": "{colors.solid.zinc.100}",
+            "canvas": "{colors.alpha.white.1000}",
+            "inverse": "{colors.solid.zinc.800}",
+            "inverseStrong": "{colors.solid.zinc.950}",
+            "hover": {
+              "section": "{colors.solid.zinc.100}",
+              "raised": "{colors.solid.zinc.100}"
+            }
+          },
+          "brand": {
+            "subtle": "{colors.solid.green.50}",
+            "subtleHover": "{colors.solid.green.100}",
+            "bold": "{colors.solid.green.500}",
+            "boldHover": "{colors.solid.green.600}",
+            "boldActive": "{colors.solid.green.700}"
+          },
+          "neutral": {
+            "subtle": "{colors.solid.zinc.50}",
+            "subtleHover": "{colors.solid.zinc.100}",
+            "bold": "{colors.solid.zinc.500}",
+            "boldHover": "{colors.solid.zinc.600}"
+          },
+          "selected": "{colors.solid.zinc.900}",
+          "disabled": "{colors.solid.zinc.200}",
+          "scrim": {
+            "default": "{colors.alpha.black.400}",
+            "modal": "{colors.alpha.black.300}"
+          },
+          "translucent": {
+            "light": {
+              "subtle": "{colors.alpha.white.100}",
+              "default": "{colors.alpha.white.200}",
+              "strong": "{colors.alpha.white.500}"
+            },
+            "dark": {
+              "default": "{colors.alpha.black.500}"
+            }
+          },
+          "transparent": "rgba(255, 255, 255, 0.0001)",
+          "selectedStrong": "{colors.solid.zinc.700}",
+          "success": {
+            "subtle": "{colors.solid.green.50}",
+            "subtleHover": "{colors.solid.green.100}",
+            "bold": "{colors.solid.green.500}",
+            "boldHover": "{colors.solid.green.600}"
+          },
+          "info": {
+            "subtle": "{colors.solid.blue.50}",
+            "subtleHover": "{colors.solid.blue.100}",
+            "bold": "{colors.solid.blue.500}",
+            "boldHover": "{colors.solid.blue.600}"
+          },
+          "warning": {
+            "subtle": "{colors.solid.yellow.50}",
+            "subtleHover": "{colors.solid.yellow.100}",
+            "bold": "{colors.solid.yellow.500}",
+            "boldHover": "{colors.solid.yellow.600}"
+          },
+          "danger": {
+            "subtle": "{colors.solid.red.50}",
+            "subtleHover": "{colors.solid.red.100}",
+            "bold": "{colors.solid.red.500}",
+            "boldHover": "{colors.solid.red.600}"
+          },
+          "help": {
+            "subtle": "{colors.solid.purple.50}",
+            "subtleHover": "{colors.solid.purple.100}",
+            "bold": "{colors.solid.purple.500}",
+            "boldHover": "{colors.solid.purple.600}"
+          }
         },
-        "gap": "{spacing.1x}"
-      },
-      "item": {
-        "padding": "{spacing.2x} {spacing.3x}",
-        "borderRadius": "{borderRadius.200}",
-        "gap": "{spacing.2x}"
-      },
-      "submenuLabel": {
-        "padding": "{spacing.2x} {spacing.3x}",
-        "fontWeight": "{fonts.fontWeight.regular}"
-      },
-      "submenuIcon": {
-        "size": "{fonts.fontSize.500}"
-      }
-    },
-    "overlay": {
-      "mask": {
-        "transitionDuration": "{transition.duration.200}"
-      },
-      "select": {
-        "borderRadius": "{borderRadius.300}",
-        "padding": "{spacing.1x}"
-      },
-      "borderWidth": "{borderWidth.100}",
-      "icon": {
-        "size": {
-          "100": "{sizing.4x}",
-          "200": "{sizing.6x}",
-          "300": "{sizing.7x}",
-          "400": "{sizing.8x}",
-          "500": "{sizing.9x}"
-        }
-      },
-      "popover": {
-        "borderRadius": "{borderRadius.200}",
-        "width": {
-          "100": "{sizing.2x}",
-          "200": "{sizing.3x}"
+        "text": {
+          "default": "{colors.solid.zinc.900}",
+          "subtle": "{colors.solid.zinc.600}",
+          "muted": "{colors.solid.zinc.500}",
+          "placeholder": "{colors.solid.zinc.500}",
+          "disabled": "{colors.solid.zinc.300}",
+          "onBold": "{colors.alpha.white.1000}",
+          "staticDark": "{colors.solid.zinc.900}",
+          "staticLight": "{colors.alpha.white.1000}",
+          "brand": "{colors.solid.green.600}",
+          "link": "{colors.solid.green.600}",
+          "linkHover": "{colors.solid.green.700}",
+          "neutral": "{colors.solid.zinc.600}",
+          "hover": {
+            "default": "{colors.solid.zinc.700}",
+            "subtle": "{colors.solid.zinc.400}",
+            "muted": "{colors.solid.zinc.300}",
+            "brand": "{colors.solid.green.700}"
+          },
+          "defaultHover": "{colors.solid.zinc.950}",
+          "neutralHover": "{colors.solid.zinc.950}",
+          "transparent": "rgba(255, 255, 255, 0.0001)",
+          "success": "{colors.solid.green.600}",
+          "info": "{colors.solid.blue.600}",
+          "warning": "{colors.solid.yellow.600}",
+          "danger": "{colors.solid.red.600}",
+          "help": "{colors.solid.purple.600}"
+        },
+        "border": {
+          "subtle": "{colors.solid.zinc.200}",
+          "default": "{colors.solid.zinc.300}",
+          "strong": "{colors.solid.zinc.900}",
+          "disabled": "{colors.solid.zinc.200}",
+          "brand": "{colors.solid.green.600}",
+          "neutral": "{colors.solid.zinc.400}",
+          "inverse": "{colors.solid.zinc.800}",
+          "transparent": "rgba(255, 255, 255, 0.0001)",
+          "checked": "{colors.solid.green.500}",
+          "success": "{colors.solid.green.400}",
+          "info": "{colors.solid.blue.400}",
+          "warning": "{colors.solid.yellow.400}",
+          "danger": "{colors.solid.red.400}",
+          "help": "{colors.solid.purple.400}"
         },
-        "padding": {
-          "100": "{spacing.3x}",
-          "200": "{spacing.5x}"
-        }
-      },
-      "modal": {
-        "borderRadius": "{borderRadius.500}",
-        "padding": {
-          "100": "{spacing.4x}",
-          "200": "{spacing.5x}",
-          "300": "{spacing.6x}"
+        "icon": {
+          "default": "{colors.solid.zinc.950}",
+          "subtle": "{colors.solid.zinc.500}",
+          "disabled": "{colors.solid.zinc.300}",
+          "onBold": "{colors.alpha.white.1000}",
+          "brand": "{colors.solid.green.600}",
+          "neutral": "{colors.solid.zinc.600}",
+          "strong": "{colors.solid.zinc.900}",
+          "strongMuted": "{colors.solid.zinc.900}",
+          "strongHover": "{colors.solid.zinc.700}",
+          "success": "{colors.solid.green.600}",
+          "info": "{colors.solid.blue.600}",
+          "warning": "{colors.solid.yellow.600}",
+          "danger": "{colors.solid.red.600}",
+          "help": "{colors.solid.purple.600}"
+        },
+        "focusRing": {
+          "default": "{colors.solid.green.500}",
+          "invalid": "{colors.solid.red.200}",
+          "success": "{colors.solid.green.200}",
+          "warning": "{colors.solid.yellow.200}",
+          "info": "{colors.solid.blue.200}",
+          "help": "{colors.solid.purple.200}",
+          "shadow": "{shadow.200}"
         }
       },
-      "gap": {
-        "100": "{spacing.1x}",
-        "200": "{spacing.2x}",
-        "300": "{spacing.3x}",
-        "400": "{spacing.4x}"
-      },
-      "width": "{sizing.100x}",
-      "drawer": {
-        "padding": "{spacing.2x}"
-      },
-      "sm": {
-        "width": "{sizing.80x}"
-      },
-      "lg": {
-        "width": "{sizing.120x}"
-      },
-      "xlg": {
-        "width": "{sizing.128x}"
-      }
-    },
-    "feedback": {
-      "transitionDuration": "{transition.duration.200}",
-      "width": {
-        "100": "{sizing.min}",
-        "200": "{sizing.1x}",
-        "300": "{sizing.2x}",
-        "400": "{sizing.3x}",
-        "500": "{sizing.4x}",
-        "550": "{sizing.5x}",
-        "600": "{sizing.6x}",
-        "650": "{sizing.7x}",
-        "700": "{sizing.8x}",
-        "800": "{sizing.12x}",
-        "900": "{sizing.16x}"
-      },
-      "icon": {
-        "size": {
-          "100": "{sizing.2x}",
-          "200": "{sizing.4x}",
-          "300": "{sizing.6x}",
-          "350": "{sizing.7x}",
-          "400": "{sizing.8x}",
-          "500": "{sizing.9x}"
+      "dark": {
+        "background": {
+          "surface": {
+            "ground": "{colors.solid.zinc.950}",
+            "section": "{colors.solid.zinc.900}",
+            "field": "{colors.solid.zinc.950}",
+            "raised": "{colors.solid.zinc.900}",
+            "overlay": "{colors.solid.zinc.900}",
+            "sunken": "{colors.solid.zinc.950}",
+            "canvas": "{colors.alpha.black.1000}",
+            "inverse": "{colors.solid.zinc.200}",
+            "inverseStrong": "{colors.solid.zinc.50}",
+            "hover": {
+              "section": "{colors.solid.zinc.800}",
+              "raised": "{colors.solid.zinc.800}"
+            }
+          },
+          "brand": {
+            "subtle": "{colors.solid.green.950}",
+            "subtleHover": "{colors.solid.green.900}",
+            "bold": "{colors.solid.green.500}",
+            "boldHover": "{colors.solid.green.400}",
+            "boldActive": "{colors.solid.green.300}"
+          },
+          "neutral": {
+            "subtle": "{colors.solid.zinc.950}",
+            "subtleHover": "{colors.solid.zinc.900}",
+            "bold": "{colors.solid.zinc.500}",
+            "boldHover": "{colors.solid.zinc.400}"
+          },
+          "selected": "{colors.solid.zinc.100}",
+          "disabled": "{colors.solid.zinc.800}",
+          "scrim": {
+            "default": "{colors.alpha.black.600}",
+            "modal": "{colors.alpha.black.300}"
+          },
+          "translucent": {
+            "light": {
+              "subtle": "{colors.alpha.white.100}",
+              "default": "{colors.alpha.white.200}",
+              "strong": "{colors.alpha.white.500}"
+            },
+            "dark": {
+              "default": "{colors.alpha.black.500}"
+            }
+          },
+          "transparent": "rgba(0, 0, 0, 0.0001)",
+          "selectedStrong": "{colors.solid.zinc.300}",
+          "success": {
+            "subtle": "{colors.solid.green.950}",
+            "subtleHover": "{colors.solid.green.900}",
+            "bold": "{colors.solid.green.500}",
+            "boldHover": "{colors.solid.green.400}"
+          },
+          "info": {
+            "subtle": "{colors.solid.blue.950}",
+            "subtleHover": "{colors.solid.blue.900}",
+            "bold": "{colors.solid.blue.500}",
+            "boldHover": "{colors.solid.blue.400}"
+          },
+          "warning": {
+            "subtle": "{colors.solid.yellow.950}",
+            "subtleHover": "{colors.solid.yellow.900}",
+            "bold": "{colors.solid.yellow.500}",
+            "boldHover": "{colors.solid.yellow.400}"
+          },
+          "danger": {
+            "subtle": "{colors.solid.red.950}",
+            "subtleHover": "{colors.solid.red.900}",
+            "bold": "{colors.solid.red.500}",
+            "boldHover": "{colors.solid.red.400}"
+          },
+          "help": {
+            "subtle": "{colors.solid.purple.950}",
+            "subtleHover": "{colors.solid.purple.900}",
+            "bold": "{colors.solid.purple.500}",
+            "boldHover": "{colors.solid.purple.400}"
+          }
+        },
+        "text": {
+          "default": "{colors.alpha.white.1000}",
+          "subtle": "{colors.solid.zinc.400}",
+          "muted": "{colors.solid.zinc.500}",
+          "placeholder": "{colors.solid.zinc.500}",
+          "disabled": "{colors.solid.zinc.700}",
+          "onBold": "{colors.solid.zinc.900}",
+          "staticDark": "{colors.solid.zinc.900}",
+          "staticLight": "{colors.alpha.white.1000}",
+          "brand": "{colors.solid.green.400}",
+          "link": "{colors.solid.green.400}",
+          "linkHover": "{colors.solid.green.300}",
+          "neutral": "{colors.solid.zinc.400}",
+          "hover": {
+            "default": "{colors.solid.zinc.300}",
+            "subtle": "{colors.solid.zinc.600}",
+            "muted": "{colors.solid.zinc.700}",
+            "brand": "{colors.solid.green.300}"
+          },
+          "defaultHover": "{colors.alpha.white.1000}",
+          "neutralHover": "{colors.solid.zinc.50}",
+          "transparent": "rgba(0, 0, 0, 0.0001)",
+          "success": "{colors.solid.green.400}",
+          "info": "{colors.solid.blue.400}",
+          "warning": "{colors.solid.yellow.400}",
+          "danger": "{colors.solid.red.400}",
+          "help": "{colors.solid.purple.400}"
+        },
+        "border": {
+          "subtle": "{colors.solid.zinc.800}",
+          "default": "{colors.solid.zinc.700}",
+          "strong": "{colors.solid.zinc.100}",
+          "disabled": "{colors.solid.zinc.800}",
+          "brand": "{colors.solid.green.400}",
+          "neutral": "{colors.solid.zinc.600}",
+          "inverse": "{colors.solid.zinc.200}",
+          "transparent": "rgba(0, 0, 0, 0.0001)",
+          "checked": "{colors.solid.green.500}",
+          "success": "{colors.solid.green.600}",
+          "info": "{colors.solid.blue.600}",
+          "warning": "{colors.solid.yellow.600}",
+          "danger": "{colors.solid.red.600}",
+          "help": "{colors.solid.purple.600}"
+        },
+        "icon": {
+          "default": "{colors.alpha.white.1000}",
+          "subtle": "{colors.solid.zinc.500}",
+          "disabled": "{colors.solid.zinc.700}",
+          "onBold": "{colors.solid.zinc.900}",
+          "brand": "{colors.solid.green.400}",
+          "neutral": "{colors.solid.zinc.400}",
+          "strong": "{colors.alpha.white.1000}",
+          "strongMuted": "{colors.solid.zinc.100}",
+          "strongHover": "{colors.solid.zinc.300}",
+          "success": "{colors.solid.green.400}",
+          "info": "{colors.solid.blue.400}",
+          "warning": "{colors.solid.yellow.400}",
+          "danger": "{colors.solid.red.400}",
+          "help": "{colors.solid.purple.400}"
+        },
+        "focusRing": {
+          "default": "{colors.solid.green.500}",
+          "invalid": "{colors.solid.red.800}",
+          "success": "{colors.solid.green.800}",
+          "warning": "{colors.solid.yellow.800}",
+          "info": "{colors.solid.blue.800}",
+          "help": "{colors.solid.purple.800}",
+          "shadow": "{shadow.200}"
         }
-      },
-      "padding": {
-        "100": "{spacing.2x}",
-        "200": "{spacing.4x}"
-      },
-      "height": {
-        "100": "{sizing.2x}",
-        "200": "{sizing.3x}",
-        "300": "{sizing.4x}",
-        "400": "{sizing.5x}",
-        "500": "{sizing.6x}",
-        "600": "{sizing.7x}",
-        "650": "{sizing.8x}",
-        "700": "{sizing.9x}",
-        "750": "{sizing.10x}",
-        "800": "{sizing.11x}",
-        "850": "{sizing.12x}",
-        "900": "{sizing.16x}"
-      },
-      "gap": {
-        "100": "{spacing.1x}",
-        "200": "{spacing.2x}",
-        "300": "{spacing.3x}",
-        "400": "{spacing.4x}"
       }
     },
-    "data": {
-      "padding": {
-        "100": "{spacing.1x}",
-        "200": "{spacing.2x}",
-        "300": "{spacing.3x}",
-        "400": "{spacing.4x}",
-        "500": "{spacing.5x}"
-      },
-      "icon": {
-        "size": {
-          "100": "{sizing.4x}",
-          "200": "{sizing.5x}",
-          "300": "{sizing.6x}",
-          "400": "{sizing.7x}",
-          "500": "{sizing.8x}",
-          "600": "{sizing.9x}",
-          "700": "{sizing.10x}"
-        }
+    "dimension": {
+      "space": {
+        "none": "{size.none}",
+        "100": "{size.1x}",
+        "200": "{size.2x}",
+        "300": "{size.3x}",
+        "400": "{size.4x}",
+        "500": "{size.5x}",
+        "600": "{size.6x}",
+        "700": "{size.7x}",
+        "800": "{size.8x}",
+        "900": "{size.10x}"
       },
-      "transitionDuration": "{transition.duration.200}",
-      "borderWidth": "{borderWidth.none}",
-      "borderRadius": "{borderRadius.100}",
-      "gap": {
-        "100": "{spacing.1x}",
-        "200": "{spacing.2x}",
-        "300": "{spacing.3x}"
-      },
-      "width": {
-        "100": "{sizing.min}",
-        "200": "{sizing.1x}",
-        "300": "{sizing.2x}",
-        "400": "{sizing.20x}"
-      }
-    },
-    "media": {
       "size": {
-        "100": "{sizing.1x}",
-        "200": "{sizing.2x}",
-        "300": "{sizing.8x}",
-        "400": "{sizing.10x}",
-        "500": "{sizing.14x}",
-        "600": "{sizing.16x}"
-      },
-      "borderRadius": {
-        "100": "{borderRadius.200}",
-        "200": "{borderRadius.300}",
-        "300": "{borderRadius.400}",
-        "400": "{borderRadius.500}",
-        "max": "{borderRadius.max}"
+        "100": "{size.min}",
+        "150": "{size.1x}",
+        "200": "{size.2x}",
+        "250": "{size.3x}",
+        "300": "{size.4x}",
+        "350": "{size.5x}",
+        "400": "{size.6x}",
+        "450": "{size.7x}",
+        "500": "{size.8x}",
+        "550": "{size.9x}",
+        "600": "{size.10x}",
+        "700": "{size.12x}",
+        "750": "{size.14x}",
+        "800": "{size.16x}",
+        "900": "{size.20x}",
+        "1000": "{size.24x}"
+      },
+      "radius": {
+        "none": "{size.none}",
+        "100": "{size.1x}",
+        "200": "{size.2x}",
+        "300": "{size.3x}",
+        "400": "{size.4x}",
+        "500": "{size.6x}",
+        "max": "{size.pill}"
+      },
+      "borderWidth": {
+        "none": "{size.none}",
+        "100": "{size.min}",
+        "200": "{size.2px}",
+        "300": "{size.1x}"
       },
-      "icon": {
-        "size": {
-          "100": "{sizing.4x}",
-          "200": "{sizing.6x}",
-          "300": "{sizing.8x}"
-        }
+      "focusRing": {
+        "width": "{size.1x}",
+        "offset": "{size.none}",
+        "style": "none"
       },
-      "transitionDuration": "{transition.duration.200}",
-      "padding": {
-        "100": "{spacing.1x}",
-        "200": "{spacing.2x}",
-        "300": "{spacing.3x}",
-        "400": "{spacing.4x}",
-        "500": "{spacing.5x}",
-        "600": "{spacing.6x}"
-      },
-      "gap": {
-        "100": "{spacing.1x}",
-        "200": "{spacing.2x}"
-      }
-    },
-    "controls": {
-      "iconOnly": {
-        "100": "{sizing.2x}",
-        "200": "{sizing.4x}",
-        "300": "{sizing.5x}",
-        "400": "{sizing.6x}",
-        "500": "{sizing.7x}",
-        "600": "{sizing.8x}",
-        "700": "{sizing.10x}",
-        "800": "{sizing.11x}",
-        "850": "{sizing.14x}",
-        "900": "{sizing.16x}"
-      },
-      "borderRadius": {
-        "100": "{borderRadius.300}",
-        "200": "{borderRadius.400}",
-        "max": "{borderRadius.max}"
-      },
-      "transitionDuration": "{transition.duration.200}",
-      "padding": {
-        "100": "{spacing.1x}",
-        "200": "{spacing.2x}",
-        "300": "{spacing.3x}",
-        "400": "{spacing.4x}",
-        "500": "{spacing.5x}",
-        "600": "{spacing.6x}"
-      },
-      "gap": {
-        "100": "{spacing.2x}",
-        "200": "{spacing.3x}",
-        "300": "{spacing.4x}"
-      },
-      "width": {
-        "100": "{sizing.min}"
+      "duration": {
+        "100": "{transition.duration.100}",
+        "200": "{transition.duration.200}",
+        "300": "{transition.duration.300}",
+        "400": "{transition.duration.400}",
+        "500": "{transition.duration.500}"
+      },
+      "overlayWidth": {
+        "narrow": "{size.60x}",
+        "sm": "{size.80x}",
+        "base": "{size.100x}",
+        "lg": "{size.120x}",
+        "xlg": "{size.128x}"
       }
     },
-    "colorScheme": {
-      "light": {
-        "success": {
-          "50": "{colors.solid.green.50}",
-          "100": "{colors.solid.green.100}",
-          "200": "{colors.solid.green.200}",
-          "300": "{colors.solid.green.300}",
-          "400": "{colors.solid.green.400}",
-          "500": "{colors.solid.green.500}",
-          "600": "{colors.solid.green.600}",
-          "700": "{colors.solid.green.700}",
-          "800": "{colors.solid.green.800}",
-          "900": "{colors.solid.green.900}",
-          "950": "{colors.solid.green.950}"
-        },
-        "info": {
-          "50": "{colors.solid.blue.50}",
-          "100": "{colors.solid.blue.100}",
-          "200": "{colors.solid.blue.200}",
-          "300": "{colors.solid.blue.300}",
-          "400": "{colors.solid.blue.400}",
-          "500": "{colors.solid.blue.500}",
-          "600": "{colors.solid.blue.600}",
-          "700": "{colors.solid.blue.700}",
-          "800": "{colors.solid.blue.800}",
-          "900": "{colors.solid.blue.900}",
-          "950": "{colors.solid.blue.950}"
-        },
-        "warn": {
-          "50": "{colors.solid.yellow.50}",
-          "100": "{colors.solid.yellow.100}",
-          "200": "{colors.solid.yellow.200}",
-          "300": "{colors.solid.yellow.300}",
-          "400": "{colors.solid.yellow.400}",
-          "500": "{colors.solid.yellow.500}",
-          "600": "{colors.solid.yellow.600}",
-          "700": "{colors.solid.yellow.700}",
-          "800": "{colors.solid.yellow.800}",
-          "900": "{colors.solid.yellow.900}",
-          "950": "{colors.solid.yellow.950}"
-        },
-        "transparent": "rgba(255, 255, 255, 0.0001)",
-        "help": {
-          "50": "{colors.solid.purple.50}",
-          "100": "{colors.solid.purple.100}",
-          "200": "{colors.solid.purple.200}",
-          "300": "{colors.solid.purple.300}",
-          "400": "{colors.solid.purple.400}",
-          "500": "{colors.solid.purple.500}",
-          "600": "{colors.solid.purple.600}",
-          "700": "{colors.solid.purple.700}",
-          "800": "{colors.solid.purple.800}",
-          "900": "{colors.solid.purple.900}",
-          "950": "{colors.solid.purple.950}"
-        },
-        "error": {
-          "50": "{colors.solid.red.50}",
-          "100": "{colors.solid.red.100}",
-          "200": "{colors.solid.red.200}",
-          "300": "{colors.solid.red.300}",
-          "400": "{colors.solid.red.400}",
-          "500": "{colors.solid.red.500}",
-          "600": "{colors.solid.red.600}",
-          "700": "{colors.solid.red.700}",
-          "800": "{colors.solid.red.800}",
-          "900": "{colors.solid.red.900}",
-          "950": "{colors.solid.red.950}"
-        },
-        "surface": {
-          "0": "{colors.alpha.white.1000}",
-          "50": "{colors.solid.zinc.50}",
-          "100": "{colors.solid.zinc.100}",
-          "200": "{colors.solid.zinc.200}",
-          "300": "{colors.solid.zinc.300}",
-          "400": "{colors.solid.zinc.400}",
-          "500": "{colors.solid.zinc.500}",
-          "600": "{colors.solid.zinc.600}",
-          "700": "{colors.solid.zinc.700}",
-          "800": "{colors.solid.zinc.800}",
-          "900": "{colors.solid.zinc.900}",
-          "950": "{colors.solid.zinc.950}"
-        },
-        "primary": {
-          "color": "{colors.solid.green.500}",
-          "contrastColor": "{colors.alpha.white.1000}",
-          "hoverColor": "{colors.solid.green.600}",
-          "activeColor": "{colors.solid.green.700}",
-          "hoverBackground": "{colors.solid.green.50}",
-          "activeBackground": "{colors.solid.green.100}",
-          "borderColor": "{colors.solid.green.200}",
-          "selectedBackground": "{colors.solid.green.500}",
-          "selectedHoverBackground": "{colors.solid.green.600}"
-        },
-        "highlight": {
-          "background": "{colors.solid.zinc.900}",
-          "focusBackground": "{colors.solid.zinc.800}",
-          "color": "{colors.alpha.white.1000}",
-          "focusColor": "{colors.alpha.white.1000}"
-        },
-        "focusRing": {
-          "shadow": "{shadows.200}",
-          "extend": {
-            "invalid": "{colors.solid.red.200}",
-            "success": "{colors.solid.green.200}",
-            "warning": "{colors.solid.yellow.200}",
-            "info": "{colors.solid.blue.200}"
-          }
-        },
-        "mask": {
-          "background": "{colors.alpha.black.400}",
-          "color": "{surface.200}"
-        },
-        "form": {
-          "background": "{colors.alpha.white.1000}",
-          "disabledBackground": "{colors.solid.zinc.200}",
-          "readonlyBackground": "{colors.solid.zinc.100}",
-          "filledBackground": "{colors.alpha.white.1000}",
-          "filledHoverBackground": "{colors.alpha.white.1000}",
-          "filledFocusBackground": "{colors.alpha.white.1000}",
-          "borderColor": "{colors.solid.zinc.300}",
-          "hoverBorderPrimaryColor": "{colors.solid.zinc.900}",
-          "focusBorderPrimaryColor": "{colors.solid.zinc.900}",
-          "hoverBorderSecondaryColor": "{colors.solid.green.600}",
-          "focusBorderSecondaryColor": "{colors.solid.green.600}",
-          "invalidBorderColor": "{colors.solid.red.400}",
-          "color": "{colors.solid.zinc.950}",
-          "disabledColor": "{colors.solid.zinc.500}",
-          "placeholderColor": "{colors.solid.zinc.500}",
-          "invalidPlaceholderColor": "{colors.solid.red.600}",
-          "floatLabelColor": "{colors.solid.zinc.500}",
-          "floatLabelFocusColor": "{colors.solid.zinc.500}",
-          "floatLabelActiveColor": "{colors.solid.zinc.500}",
-          "floatLabelInvalidColor": "{form.invalidPlaceholderColor}",
-          "iconColor": "{colors.solid.zinc.950}",
-          "backgroundHandler": "{colors.alpha.white.1000}",
-          "shadow": "{shadows.200}"
-        },
-        "text": {
-          "color": "{colors.solid.zinc.900}",
-          "extend": {
-            "colorPrimaryStatic": "{colors.solid.zinc.900}",
-            "colorSecondaryStatic": "{colors.alpha.white.1000}",
-            "colorInverted": "{colors.alpha.white.1000}"
-          },
-          "hoverColor": "{colors.solid.zinc.700}",
-          "primaryColor": "{colors.solid.green.600}",
-          "hoverPrimaryColor": "{colors.solid.green.700}",
-          "secondaryColor": "{colors.solid.zinc.600}",
-          "hoverSecondaryColor": "{colors.solid.zinc.400}",
-          "mutedColor": "{colors.solid.zinc.500}",
-          "hoverMutedColor": "{colors.solid.zinc.300}",
-          "disabledColor": "{colors.solid.zinc.300}",
-          "infoColor": "{colors.solid.blue.600}",
-          "successColor": "{colors.solid.green.700}",
-          "dangerColor": "{colors.solid.red.600}",
-          "warningColor": "{colors.solid.yellow.600}",
-          "helpColor": "{colors.solid.purple.600}"
-        },
-        "content": {
-          "background": "{colors.alpha.white.1000}",
-          "hoverBackground": "{colors.solid.zinc.100}",
-          "borderColor": "{colors.solid.zinc.200}",
-          "activeBorderColor": "{colors.solid.zinc.800}",
-          "color": "{text.color}",
-          "hoverColor": "{text.hoverColor}",
-          "shadow": "{shadows.400}"
-        },
-        "list": {
-          "option": {
-            "background": "{colors.alpha.white.1000}",
-            "focusBackground": "{colors.solid.zinc.100}",
-            "selectedBackground": "{colors.solid.zinc.900}",
-            "selectedFocusBackground": "{colors.solid.zinc.700}",
-            "color": "{text.color}",
-            "focusColor": "{text.color}",
-            "selectedColor": "{text.extend.colorInverted}",
-            "selectedFocusColor": "{text.extend.colorInverted}",
-            "icon": {
-              "color": "{text.color}",
-              "focusColor": "{text.color}"
-            }
-          },
-          "optionGroup": {
-            "background": "{colors.alpha.white.1000}",
-            "color": "{text.mutedColor}"
-          }
+    "typography": {
+      "display": {
+        "lg": {
+          "fontFamily": "{fonts.fontFamily.heading}",
+          "fontSize": "{fonts.fontSize.1000}",
+          "fontWeight": "{fonts.fontWeight.bold}",
+          "lineHeight": "{fonts.lineHeight.auto}"
         },
-        "overlay": {
-          "select": {
-            "background": "{colors.alpha.white.1000}",
-            "borderColor": "{colors.solid.zinc.200}",
-            "color": "{text.color}",
-            "shadow": "0 0.25rem 0.5rem {colors.alpha.black.200}"
-          },
-          "popover": {
-            "background": "{colors.alpha.white.1000}",
-            "borderColor": "{form.borderColor}",
-            "color": "{text.color}",
-            "shadow": "{shadows.400}"
-          },
-          "modal": {
-            "background": "{colors.alpha.white.1000}",
-            "backdrop": "{colors.alpha.black.300}",
-            "borderColor": "{colors.solid.zinc.200}",
-            "color": "{text.color}",
-            "shadow": "{shadows.200}"
-          }
+        "md": {
+          "fontFamily": "{fonts.fontFamily.heading}",
+          "fontSize": "{fonts.fontSize.900}",
+          "fontWeight": "{fonts.fontWeight.bold}",
+          "lineHeight": "{fonts.lineHeight.auto}"
         },
-        "navigation": {
-          "submenuLabel": {
-            "background": "rgba(255, 255, 255, 0.0000)",
-            "color": "{text.mutedColor}"
-          },
-          "submenuIcon": {
-            "color": "{colors.solid.zinc.900}",
-            "focusColor": "{colors.solid.zinc.900}",
-            "activeColor": "{colors.alpha.white.1000}"
-          },
-          "item": {
-            "focusBackground": "{colors.solid.zinc.100}",
-            "activeBackground": "{colors.solid.zinc.900}",
-            "color": "{colors.solid.zinc.900}",
-            "focusColor": "{colors.solid.zinc.900}",
-            "icon": {
-              "color": "{colors.solid.zinc.900}",
-              "focusColor": "{colors.solid.zinc.900}",
-              "activeColor": "{colors.alpha.white.1000}"
-            },
-            "activeColor": "{colors.alpha.white.1000}"
-          },
-          "shadow": "{shadows.400}"
+        "sm": {
+          "fontFamily": "{fonts.fontFamily.heading}",
+          "fontSize": "{fonts.fontSize.800}",
+          "fontWeight": "{fonts.fontWeight.bold}",
+          "lineHeight": "{fonts.lineHeight.auto}"
         }
       },
-      "dark": {
-        "success": {
-          "50": "{colors.solid.green.950}",
-          "100": "{colors.solid.green.900}",
-          "200": "{colors.solid.green.800}",
-          "300": "{colors.solid.green.700}",
-          "400": "{colors.solid.green.600}",
-          "500": "{colors.solid.green.500}",
-          "600": "{colors.solid.green.400}",
-          "700": "{colors.solid.green.300}",
-          "800": "{colors.solid.green.200}",
-          "900": "{colors.solid.green.100}",
-          "950": "{colors.solid.green.50}"
+      "heading": {
+        "xl": {
+          "fontFamily": "{fonts.fontFamily.heading}",
+          "fontSize": "{fonts.fontSize.750}",
+          "fontWeight": "{fonts.fontWeight.bold}",
+          "lineHeight": "{fonts.lineHeight.auto}"
         },
-        "info": {
-          "50": "{colors.solid.blue.950}",
-          "100": "{colors.solid.blue.900}",
-          "200": "{colors.solid.blue.800}",
-          "300": "{colors.solid.blue.700}",
-          "400": "{colors.solid.blue.600}",
-          "500": "{colors.solid.blue.500}",
-          "600": "{colors.solid.blue.400}",
-          "700": "{colors.solid.blue.300}",
-          "800": "{colors.solid.blue.200}",
-          "900": "{colors.solid.blue.100}",
-          "950": "{colors.solid.blue.50}"
-        },
-        "warn": {
-          "50": "{colors.solid.yellow.950}",
-          "100": "{colors.solid.yellow.900}",
-          "200": "{colors.solid.yellow.800}",
-          "300": "{colors.solid.yellow.700}",
-          "400": "{colors.solid.yellow.600}",
-          "500": "{colors.solid.yellow.500}",
-          "600": "{colors.solid.yellow.400}",
-          "700": "{colors.solid.yellow.300}",
-          "800": "{colors.solid.yellow.200}",
-          "900": "{colors.solid.yellow.100}",
-          "950": "{colors.solid.yellow.50}"
-        },
-        "transparent": "rgba(0, 0, 0, 0.0001)",
-        "help": {
-          "50": "{colors.solid.purple.950}",
-          "100": "{colors.solid.purple.900}",
-          "200": "{colors.solid.purple.800}",
-          "300": "{colors.solid.purple.700}",
-          "400": "{colors.solid.purple.600}",
-          "500": "{colors.solid.purple.500}",
-          "600": "{colors.solid.purple.400}",
-          "700": "{colors.solid.purple.300}",
-          "800": "{colors.solid.purple.200}",
-          "900": "{colors.solid.purple.100}",
-          "950": "{colors.solid.purple.50}"
-        },
-        "error": {
-          "50": "{colors.solid.red.950}",
-          "100": "{colors.solid.red.900}",
-          "200": "{colors.solid.red.800}",
-          "300": "{colors.solid.red.700}",
-          "400": "{colors.solid.red.600}",
-          "500": "{colors.solid.red.500}",
-          "600": "{colors.solid.red.400}",
-          "700": "{colors.solid.red.300}",
-          "800": "{colors.solid.red.200}",
-          "900": "{colors.solid.red.100}",
-          "950": "{colors.solid.red.50}"
-        },
-        "surface": {
-          "0": "{colors.alpha.black.1000}",
-          "50": "{colors.solid.zinc.950}",
-          "100": "{colors.solid.zinc.900}",
-          "200": "{colors.solid.zinc.800}",
-          "300": "{colors.solid.zinc.700}",
-          "400": "{colors.solid.zinc.600}",
-          "500": "{colors.solid.zinc.500}",
-          "600": "{colors.solid.zinc.400}",
-          "700": "{colors.solid.zinc.300}",
-          "800": "{colors.solid.zinc.200}",
-          "900": "{colors.solid.zinc.100}",
-          "950": "{colors.solid.zinc.50}"
-        },
-        "primary": {
-          "color": "{colors.solid.green.500}",
-          "contrastColor": "{colors.solid.zinc.900}",
-          "hoverColor": "{colors.solid.green.400}",
-          "activeColor": "{colors.solid.green.300}",
-          "hoverBackground": "{colors.solid.green.950}",
-          "activeBackground": "{colors.solid.green.900}",
-          "borderColor": "{colors.solid.green.800}",
-          "selectedBackground": "{colors.solid.green.500}",
-          "selectedHoverBackground": "{colors.solid.green.600}"
-        },
-        "highlight": {
-          "background": "{colors.solid.zinc.100}",
-          "focusBackground": "{colors.solid.zinc.200}",
-          "color": "{colors.solid.zinc.900}",
-          "focusColor": "{colors.solid.zinc.900}"
+        "lg": {
+          "fontFamily": "{fonts.fontFamily.heading}",
+          "fontSize": "{fonts.fontSize.700}",
+          "fontWeight": "{fonts.fontWeight.demibold}",
+          "lineHeight": "{fonts.lineHeight.900}"
         },
-        "focusRing": {
-          "shadow": "{shadows.200}",
-          "extend": {
-            "invalid": "{colors.solid.red.800}",
-            "success": "{colors.solid.green.800}",
-            "warning": "{colors.solid.yellow.800}",
-            "info": "{colors.solid.blue.800}"
-          }
+        "md": {
+          "fontFamily": "{fonts.fontFamily.heading}",
+          "fontSize": "{fonts.fontSize.600}",
+          "fontWeight": "{fonts.fontWeight.demibold}",
+          "lineHeight": "{fonts.lineHeight.700}"
         },
-        "mask": {
-          "background": "{colors.alpha.black.600}",
-          "color": "{surface.800}"
-        },
-        "form": {
-          "background": "{colors.solid.zinc.950}",
-          "disabledBackground": "{colors.solid.zinc.800}",
-          "readonlyBackground": "{colors.solid.zinc.900}",
-          "filledBackground": "{colors.solid.zinc.950}",
-          "filledHoverBackground": "{colors.solid.zinc.950}",
-          "filledFocusBackground": "{colors.solid.zinc.950}",
-          "borderColor": "{colors.solid.zinc.700}",
-          "hoverBorderPrimaryColor": "{colors.solid.zinc.100}",
-          "focusBorderPrimaryColor": "{colors.solid.zinc.100}",
-          "hoverBorderSecondaryColor": "{colors.solid.green.400}",
-          "focusBorderSecondaryColor": "{colors.solid.green.400}",
-          "invalidBorderColor": "{colors.solid.red.600}",
-          "color": "{colors.alpha.white.1000}",
-          "disabledColor": "{colors.solid.zinc.500}",
-          "placeholderColor": "{colors.solid.zinc.500}",
-          "invalidPlaceholderColor": "{colors.solid.red.400}",
-          "floatLabelColor": "{colors.solid.zinc.500}",
-          "floatLabelFocusColor": "{colors.solid.zinc.500}",
-          "floatLabelActiveColor": "{colors.solid.zinc.500}",
-          "floatLabelInvalidColor": "{form.invalidPlaceholderColor}",
-          "iconColor": "{colors.alpha.white.1000}",
-          "backgroundHandler": "{colors.alpha.white.1000}",
-          "shadow": "{shadows.200}"
+        "sm": {
+          "fontFamily": "{fonts.fontFamily.heading}",
+          "fontSize": "{fonts.fontSize.500}",
+          "fontWeight": "{fonts.fontWeight.demibold}",
+          "lineHeight": "{fonts.lineHeight.600}"
+        }
+      },
+      "body": {
+        "lg": {
+          "fontFamily": "{fonts.fontFamily.base}",
+          "fontSize": "{fonts.fontSize.400}",
+          "fontWeight": "{fonts.fontWeight.regular}",
+          "lineHeight": "{fonts.lineHeight.550}"
         },
-        "text": {
-          "color": "{colors.alpha.white.1000}",
-          "extend": {
-            "colorPrimaryStatic": "{colors.solid.zinc.900}",
-            "colorSecondaryStatic": "{colors.alpha.white.1000}",
-            "colorInverted": "{colors.solid.zinc.900}"
-          },
-          "hoverColor": "{colors.solid.zinc.300}",
-          "primaryColor": "{colors.solid.green.400}",
-          "hoverPrimaryColor": "{colors.solid.green.300}",
-          "secondaryColor": "{colors.solid.zinc.400}",
-          "hoverSecondaryColor": "{colors.solid.zinc.600}",
-          "mutedColor": "{colors.solid.zinc.500}",
-          "hoverMutedColor": "{colors.solid.zinc.700}",
-          "disabledColor": "{colors.solid.zinc.700}",
-          "infoColor": "{colors.solid.blue.400}",
-          "successColor": "{colors.solid.green.400}",
-          "dangerColor": "{colors.solid.red.400}",
-          "warningColor": "{colors.solid.yellow.400}",
-          "helpColor": "{colors.solid.purple.400}"
+        "md": {
+          "fontFamily": "{fonts.fontFamily.base}",
+          "fontSize": "{fonts.fontSize.300}",
+          "fontWeight": "{fonts.fontWeight.regular}",
+          "lineHeight": "{fonts.lineHeight.500}"
         },
-        "content": {
-          "background": "{colors.solid.zinc.900}",
-          "hoverBackground": "{colors.solid.zinc.800}",
-          "borderColor": "{colors.solid.zinc.800}",
-          "activeBorderColor": "{colors.solid.zinc.200}",
-          "color": "{text.color}",
-          "hoverColor": "{text.hoverColor}",
-          "shadow": "{shadows.400}"
-        },
-        "list": {
-          "option": {
-            "background": "{colors.solid.zinc.900}",
-            "focusBackground": "{colors.solid.zinc.800}",
-            "selectedBackground": "{colors.solid.zinc.100}",
-            "selectedFocusBackground": "{colors.solid.zinc.300}",
-            "color": "{text.color}",
-            "focusColor": "{text.color}",
-            "selectedColor": "{text.extend.colorInverted}",
-            "selectedFocusColor": "{text.extend.colorInverted}",
-            "icon": {
-              "color": "{text.color}",
-              "focusColor": "{text.color}"
-            }
-          },
-          "optionGroup": {
-            "background": "{colors.solid.zinc.900}",
-            "color": "{text.mutedColor}"
-          }
+        "sm": {
+          "fontFamily": "{fonts.fontFamily.base}",
+          "fontSize": "{fonts.fontSize.200}",
+          "fontWeight": "{fonts.fontWeight.regular}",
+          "lineHeight": "{fonts.lineHeight.400}"
+        }
+      },
+      "label": {
+        "lg": {
+          "fontFamily": "{fonts.fontFamily.base}",
+          "fontSize": "{fonts.fontSize.300}",
+          "fontWeight": "{fonts.fontWeight.medium}",
+          "lineHeight": "{fonts.lineHeight.500}"
         },
-        "overlay": {
-          "select": {
-            "background": "{colors.solid.zinc.900}",
-            "borderColor": "{colors.solid.zinc.800}",
-            "color": "{text.color}",
-            "shadow": "{shadows.400}"
-          },
-          "popover": {
-            "background": "{colors.solid.zinc.900}",
-            "borderColor": "{form.borderColor}",
-            "color": "{text.color}",
-            "shadow": "{shadows.400}"
-          },
-          "modal": {
-            "background": "{colors.solid.zinc.900}",
-            "backdrop": "{colors.alpha.black.300}",
-            "borderColor": "{colors.solid.zinc.800}",
-            "color": "{text.color}",
-            "shadow": "{shadows.200}"
-          }
+        "md": {
+          "fontFamily": "{fonts.fontFamily.base}",
+          "fontSize": "{fonts.fontSize.200}",
+          "fontWeight": "{fonts.fontWeight.medium}",
+          "lineHeight": "{fonts.lineHeight.400}"
         },
-        "navigation": {
-          "submenuLabel": {
-            "background": "rgba(255, 255, 255, 0.0000)",
-            "color": "{text.mutedColor}"
-          },
-          "submenuIcon": {
-            "color": "{colors.solid.zinc.100}",
-            "focusColor": "{colors.solid.zinc.100}",
-            "activeColor": "{colors.solid.zinc.900}"
-          },
-          "item": {
-            "focusBackground": "{colors.solid.zinc.900}",
-            "activeBackground": "{colors.solid.zinc.100}",
-            "color": "{colors.alpha.white.1000}",
-            "focusColor": "{colors.alpha.white.1000}",
-            "icon": {
-              "color": "{colors.alpha.white.1000}",
-              "focusColor": "{colors.alpha.white.1000}",
-              "activeColor": "{colors.solid.zinc.900}"
-            },
-            "activeColor": "{colors.solid.zinc.900}"
-          },
-          "shadow": "{shadows.400}"
+        "sm": {
+          "fontFamily": "{fonts.fontFamily.base}",
+          "fontSize": "{fonts.fontSize.100}",
+          "fontWeight": "{fonts.fontWeight.medium}",
+          "lineHeight": "{fonts.lineHeight.300}"
         }
+      },
+      "caption": {
+        "fontFamily": "{fonts.fontFamily.base}",
+        "fontSize": "{fonts.fontSize.100}",
+        "fontWeight": "{fonts.fontWeight.regular}",
+        "lineHeight": "{fonts.lineHeight.250}"
       }
+    },
+    "shadow": {
+      "none": "{shadows.none}",
+      "100": "{shadows.100}",
+      "200": "{shadows.200}",
+      "300": "{shadows.300}",
+      "400": "{shadows.400}",
+      "500": "{shadows.500}"
     }
   },
   "components": {
     "accordion": {
       "extend": {
         "extHeader": {
-          "iconSize": "{controls.iconOnly.300}",
-          "gap": "{controls.gap.100}"
-        }
+          "iconSize": "{dimension.size.350}",
+          "gap": "{dimension.space.200}"
+        },
+        "fonts_fontFamily_base": "{typography.body.lg.fontFamily}",
+        "fonts_fontSize_300": "{typography.body.md.fontSize}"
       },
       "colorScheme": {
         "light": {
           "header": {
-            "background": "{transparent}",
-            "hoverBackground": "{transparent}",
-            "activeBackground": "{transparent}",
-            "activeHoverBackground": "{transparent}"
+            "background": "{background.transparent}",
+            "hoverBackground": "{background.transparent}",
+            "activeBackground": "{background.transparent}",
+            "activeHoverBackground": "{background.transparent}"
           }
         }
       },
       "header": {
-        "color": "{text.color}",
-        "hoverColor": "{text.hoverColor}",
-        "activeColor": "{text.color}",
-        "activeHoverColor": "{text.hoverColor}",
-        "borderColor": "{transparent}",
-        "padding": "{navigation.padding.300} 0 {navigation.padding.300} 0",
-        "fontWeight": "{fonts.fontWeight.bold}",
-        "borderRadius": "{borderRadius.none}",
-        "borderWidth": "{borderWidth.none}",
+        "color": "{text.default}",
+        "hoverColor": "{text.hover.default}",
+        "activeColor": "{text.default}",
+        "activeHoverColor": "{text.hover.default}",
+        "borderColor": "{border.transparent}",
+        "padding": "{dimension.space.400} 0 {dimension.space.400} 0",
+        "fontWeight": "{typography.heading.xl.fontWeight}",
+        "borderRadius": "{dimension.radius.none}",
+        "borderWidth": "{dimension.borderWidth.none}",
         "focusRing": {
-          "width": "{focusRing.width}",
-          "style": "{focusRing.style}",
-          "color": "{focusRing.color}",
-          "offset": "{focusRing.offset}",
-          "shadow": "inset {focus.ring.shadow}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "inset {shadow.200}"
         },
         "toggleIcon": {
-          "color": "{text.color}",
-          "hoverColor": "{text.hoverColor}",
-          "activeColor": "{text.color}",
-          "activeHoverColor": "{text.hoverColor}"
+          "color": "{icon.strong}",
+          "hoverColor": "{icon.strongHover}",
+          "activeColor": "{icon.strong}",
+          "activeHoverColor": "{icon.strongHover}"
         },
         "last": {
-          "bottomBorderRadius": "{borderRadius.none}",
-          "activeBottomBorderRadius": "{borderRadius.none}"
+          "bottomBorderRadius": "{dimension.radius.none}",
+          "activeBottomBorderRadius": "{dimension.radius.none}"
         },
         "first": {
-          "borderWidth": "{borderWidth.none}",
-          "topBorderRadius": "{borderRadius.none}"
+          "borderWidth": "{dimension.borderWidth.none}",
+          "topBorderRadius": "{dimension.radius.none}"
         }
       },
       "root": {
-        "transitionDuration": "{controls.transitionDuration}"
+        "transitionDuration": "{dimension.duration.200}"
       },
       "panel": {
-        "borderWidth": "{borderWidth.none} {borderWidth.none} {navigation.width.100} {borderWidth.none}",
-        "borderColor": "{form.borderColor}"
+        "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.none}",
+        "borderColor": "{border.default}"
       },
       "content": {
-        "borderWidth": "{content.borderWidth} {borderWidth.none} {borderWidth.none} {borderWidth.none}",
-        "borderColor": "{transparent}",
-        "background": "{transparent}",
-        "color": "{text.color}",
-        "padding": "0 {content.padding.400} {content.padding.300} {content.padding.400}"
+        "borderWidth": "{dimension.borderWidth.100} {dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.none}",
+        "borderColor": "{border.transparent}",
+        "background": "{background.transparent}",
+        "color": "{text.default}",
+        "padding": "0 {dimension.space.600} {dimension.space.400} {dimension.space.600}"
       }
     },
     "autocomplete": {
       "extend": {
         "extOption": {
-          "gap": "{form.gap.200}"
+          "gap": "{dimension.space.200}"
         },
         "extOptionGroup": {
-          "gap": "{form.gap.200}"
-        }
+          "gap": "{dimension.space.200}"
+        },
+        "dimension_space_200": "{dimension.space.200}",
+        "fonts_fontSize_300": "{typography.body.md.fontSize}",
+        "fonts_lineHeight_250": "{typography.caption.lineHeight}",
+        "form_borderColor": "{text.disabled}",
+        "form_focusBorderSecondaryColor": "{background.brand.boldHover}",
+        "form_hoverBorderSecondaryColor": "{background.brand.boldHover}",
+        "form_width_300": "{dimension.space.900}"
       },
       "colorScheme": {
         "light": {
@@ -1406,162 +1003,165 @@
             "focusColor": "{chip.colorScheme.light.root.color}"
           },
           "dropdown": {
-            "background": "{form.background}",
-            "hoverBackground": "{form.background}",
-            "activeBackground": "{form.background}",
-            "color": "{form.color}",
-            "hoverColor": "{form.color}",
-            "activeColor": "{form.color}"
+            "background": "{background.surface.field}",
+            "hoverBackground": "{background.surface.field}",
+            "activeBackground": "{background.surface.field}",
+            "color": "{text.defaultHover}",
+            "hoverColor": "{text.defaultHover}",
+            "activeColor": "{text.defaultHover}"
           }
         }
       },
       "root": {
-        "background": "{form.background}",
-        "disabledBackground": "{form.disabledBackground}",
-        "filledBackground": "{form.filledBackground}",
-        "filledHoverBackground": "{form.filledHoverBackground}",
-        "filledFocusBackground": "{form.filledFocusBackground}",
-        "borderColor": "{form.borderColor}",
-        "hoverBorderColor": "{form.hoverBorderSecondaryColor}",
-        "focusBorderColor": "{form.focusBorderSecondaryColor}",
-        "invalidBorderColor": "{form.invalidBorderColor}",
-        "color": "{form.color}",
-        "disabledColor": "{form.disabledColor}",
-        "placeholderColor": "{form.placeholderColor}",
-        "invalidPlaceholderColor": "{form.invalidPlaceholderColor}",
+        "background": "{background.surface.field}",
+        "disabledBackground": "{background.disabled}",
+        "filledBackground": "{background.surface.field}",
+        "filledHoverBackground": "{background.surface.field}",
+        "filledFocusBackground": "{background.surface.field}",
+        "borderColor": "{border.default}",
+        "hoverBorderColor": "{border.brand}",
+        "focusBorderColor": "{border.brand}",
+        "invalidBorderColor": "{border.danger}",
+        "color": "{text.defaultHover}",
+        "disabledColor": "{text.muted}",
+        "placeholderColor": "{text.muted}",
+        "invalidPlaceholderColor": "{text.danger}",
         "shadow": "0",
-        "paddingX": "{form.padding.300}",
-        "paddingY": "{form.padding.300}",
-        "borderRadius": "{form.borderRadius.200}",
-        "transitionDuration": "{form.transitionDuration}",
+        "paddingX": "{dimension.space.300}",
+        "paddingY": "{dimension.space.300}",
+        "borderRadius": "{dimension.radius.300}",
+        "transitionDuration": "{dimension.duration.200}",
         "focusRing": {
-          "width": "{focusRing.width}",
-          "style": "{form.focusRing.style}",
-          "color": "{form.focusRing.color}",
-          "offset": "{form.focusRing.offset}",
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
           "shadow": "0"
         }
       },
       "overlay": {
-        "background": "{overlay.select.background}",
-        "borderColor": "{overlay.select.borderColor}",
-        "borderRadius": "{overlay.select.borderRadius}",
-        "color": "{overlay.select.color}",
-        "shadow": "{form.shadow}"
+        "background": "{background.surface.raised}",
+        "borderColor": "{border.subtle}",
+        "borderRadius": "{dimension.radius.300}",
+        "color": "{text.default}",
+        "shadow": "{shadow.200}"
       },
       "list": {
-        "padding": "{list.padding}",
-        "gap": "{list.gap.100}"
+        "padding": "{dimension.space.100}",
+        "gap": "{dimension.space.100}"
       },
       "option": {
-        "focusBackground": "{list.option.focusBackground}",
-        "selectedBackground": "{list.option.selectedBackground}",
-        "selectedFocusBackground": "{list.option.selectedFocusBackground}",
-        "color": "{list.option.color}",
-        "focusColor": "{list.option.focusColor}",
-        "selectedColor": "{list.option.selectedColor}",
-        "selectedFocusColor": "{list.option.selectedFocusColor}",
-        "padding": "{list.option.padding}",
-        "borderRadius": "{list.option.borderRadius}"
+        "focusBackground": "{background.surface.hover.section}",
+        "selectedBackground": "{background.selected}",
+        "selectedFocusBackground": "{background.selectedStrong}",
+        "color": "{text.default}",
+        "focusColor": "{text.default}",
+        "selectedColor": "{text.onBold}",
+        "selectedFocusColor": "{text.onBold}",
+        "padding": "{dimension.space.200} {dimension.space.300}",
+        "borderRadius": "{dimension.radius.200}"
       },
       "optionGroup": {
-        "background": "{list.optionGroup.background}",
-        "color": "{list.optionGroup.color}",
-        "fontWeight": "{fonts.fontWeight.demibold}",
-        "padding": "{list.optionGroup.padding}"
+        "background": "{background.surface.raised}",
+        "color": "{text.muted}",
+        "fontWeight": "{typography.heading.lg.fontWeight}",
+        "padding": "{dimension.space.200} {dimension.space.300}"
       },
       "dropdown": {
-        "width": "{form.width.300}",
-        "borderColor": "{form.borderColor}",
-        "hoverBorderColor": "{form.hoverBorderSecondaryColor}",
-        "activeBorderColor": "{form.focusBorderSecondaryColor}",
-        "borderRadius": "{form.borderRadius.200}",
+        "width": "{dimension.size.600}",
+        "borderColor": "{border.default}",
+        "hoverBorderColor": "{border.brand}",
+        "activeBorderColor": "{border.brand}",
+        "borderRadius": "{dimension.radius.300}",
         "focusRing": {
-          "width": "{focusRing.width}",
-          "style": "{form.focusRing.style}",
-          "color": "{form.focusRing.color}",
-          "offset": "{form.focusRing.offset}",
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
           "shadow": "0"
         },
         "sm": {
-          "width": "{form.width.200}"
+          "width": "{dimension.size.500}"
         },
         "lg": {
-          "width": "{form.width.400}"
+          "width": "{dimension.size.700}"
         }
       },
       "chip": {
         "borderRadius": "{chip.root.borderRadius}"
       },
       "emptyMessage": {
-        "padding": "{list.option.padding}"
+        "padding": "{dimension.space.200} {dimension.space.300}"
       }
     },
     "avatar": {
       "extend": {
-        "borderColor": "{form.borderColor}",
+        "borderColor": "{border.default}",
         "circle": {
-          "borderRadius": "{media.borderRadius.max}"
-        }
+          "borderRadius": "{dimension.radius.max}"
+        },
+        "content_background": "{background.surface.raised}",
+        "media_padding_300": "{dimension.space.300}",
+        "media_padding_600": "{dimension.space.600}"
       },
       "root": {
-        "width": "{media.size.300}",
-        "height": "{media.size.300}",
-        "fontSize": "{fonts.fontSize.200}",
-        "color": "{text.extend.colorPrimaryStatic}",
-        "background": "{primary.color}",
-        "borderRadius": "{media.borderRadius.200}"
+        "width": "{dimension.size.500}",
+        "height": "{dimension.size.500}",
+        "fontSize": "{typography.body.sm.fontSize}",
+        "color": "{text.staticDark}",
+        "background": "{background.brand.bold}",
+        "borderRadius": "{dimension.radius.300}"
       },
       "icon": {
-        "size": "{media.icon.size.100}"
+        "size": "{dimension.size.300}"
       },
       "group": {
-        "borderColor": "{content.background}",
-        "offset": "-{media.padding.300}"
+        "borderColor": "{background.surface.raised}",
+        "offset": "-{dimension.space.300}"
       },
       "lg": {
-        "width": "{media.size.400}",
-        "height": "{media.size.400}",
-        "fontSize": "{fonts.fontSize.300}",
+        "width": "{dimension.size.600}",
+        "height": "{dimension.size.600}",
+        "fontSize": "{typography.body.md.fontSize}",
         "icon": {
-          "size": "{media.icon.size.100}"
+          "size": "{dimension.size.300}"
         },
         "group": {
-          "offset": "-{media.padding.300}"
+          "offset": "-{dimension.space.300}"
         }
       },
       "xl": {
-        "width": "{media.size.500}",
-        "height": "{media.size.500}",
+        "width": "{dimension.size.750}",
+        "height": "{dimension.size.750}",
         "icon": {
-          "size": "{media.icon.size.200}"
+          "size": "{dimension.size.400}"
         },
         "group": {
-          "offset": "-{media.padding.600}"
+          "offset": "-{dimension.space.600}"
         },
-        "fontSize": "{fonts.fontSize.500}"
+        "fontSize": "{typography.heading.sm.fontSize}"
       }
     },
     "badge": {
       "extend": {
         "extDot": {
           "success": {
-            "background": "{colors.solid.green.400}"
+            "background": "{background.success.bold}"
           },
           "info": {
-            "background": "{info.400}"
+            "background": "{background.info.bold}"
           },
           "warn": {
-            "background": "{warn.400}"
+            "background": "{background.warning.bold}"
           },
           "danger": {
-            "background": "{error.400}"
+            "background": "{background.danger.bold}"
           },
           "lg": {
-            "size": "{feedback.width.400}"
+            "size": "{dimension.size.250}"
           },
           "xlg": {
-            "size": "{feedback.width.500}"
+            "size": "{dimension.size.300}"
           }
         },
         "ext": {
@@ -1571,700 +1171,734 @@
       "colorScheme": {
         "light": {
           "primary": {
-            "color": "{text.extend.colorPrimaryStatic}",
-            "background": "{primary.color}"
+            "color": "{text.staticDark}",
+            "background": "{background.brand.bold}"
           },
           "secondary": {
-            "color": "{text.extend.colorInverted}",
-            "background": "{surface.900}"
+            "color": "{text.onBold}",
+            "background": "{background.selected}"
           },
           "success": {
-            "color": "{success.900}",
-            "background": "{success.300}"
+            "color": "{text.success}",
+            "background": "{background.success.subtleHover}"
           },
           "info": {
-            "color": "{info.900}",
-            "background": "{info.300}"
+            "color": "{text.info}",
+            "background": "{background.info.subtleHover}"
           },
           "warn": {
-            "color": "{warn.900}",
-            "background": "{warn.300}"
+            "color": "{text.warning}",
+            "background": "{background.warning.subtleHover}"
           },
           "danger": {
-            "color": "{error.900}",
-            "background": "{error.300}"
+            "color": "{text.danger}",
+            "background": "{background.danger.subtleHover}"
           }
         }
       },
       "root": {
-        "borderRadius": "{feedback.width.300}",
-        "padding": "{feedback.padding.100}",
-        "fontSize": "{fonts.fontSize.100}",
-        "fontWeight": "{fonts.fontWeight.regular}",
-        "minWidth": "{feedback.width.600}",
-        "height": "{feedback.height.500}"
+        "borderRadius": "{dimension.size.200}",
+        "padding": "{dimension.space.200}",
+        "fontSize": "{typography.label.sm.fontSize}",
+        "fontWeight": "{typography.body.lg.fontWeight}",
+        "minWidth": "{dimension.size.400}",
+        "height": "{dimension.size.400}"
       },
       "dot": {
-        "size": "{feedback.width.300}"
+        "size": "{dimension.size.200}"
       },
       "sm": {
-        "fontSize": "{fonts.fontSize.100}",
+        "fontSize": "{typography.label.sm.fontSize}",
         "minWidth": "0rem",
         "height": "0rem"
       },
       "lg": {
-        "fontSize": "{fonts.fontSize.100}",
-        "minWidth": "{feedback.width.650}",
-        "height": "{feedback.height.600}"
+        "fontSize": "{typography.label.sm.fontSize}",
+        "minWidth": "{dimension.size.450}",
+        "height": "{dimension.size.450}"
       },
       "xl": {
-        "fontSize": "{fonts.fontSize.100}",
-        "minWidth": "{feedback.width.700}",
-        "height": "{feedback.height.650}"
+        "fontSize": "{typography.label.sm.fontSize}",
+        "minWidth": "{dimension.size.500}",
+        "height": "{dimension.size.500}"
       }
     },
     "breadcrumb": {
       "extend": {
-        "hoverBackground": "{surface.100}",
-        "iconSize": "{navigation.size.300}",
+        "hoverBackground": "{background.neutral.subtleHover}",
+        "iconSize": "{dimension.size.350}",
         "extItem": {
-          "padding": "{navigation.padding.100}"
-        }
+          "padding": "{dimension.space.100}"
+        },
+        "fonts_fontSize_200": "{typography.body.sm.fontSize}",
+        "opacity_500": "{opacity.500}",
+        "transparent": "{background.transparent}"
       },
       "root": {
         "padding": "0rem",
-        "background": "{transparent}",
+        "background": "{background.transparent}",
         "gap": "0rem",
-        "transitionDuration": "{form.transitionDuration}"
+        "transitionDuration": "{dimension.duration.200}"
       },
       "focusRing": {
-        "width": "{focusRing.width}",
-        "style": "{focusRing.style}",
-        "color": "{focusRing.color}",
-        "offset": "{focusRing.offset}",
-        "shadow": "{focusRing.shadow}"
+        "width": "{dimension.borderWidth.300}",
+        "style": "{dimension.focusRing.style}",
+        "color": "{background.success.subtleHover}",
+        "offset": "{dimension.focusRing.offset}",
+        "shadow": "{shadow.200}"
       },
       "item": {
-        "color": "{text.color}",
-        "hoverColor": "{text.hoverColor}",
-        "borderRadius": "{navigation.borderRadius}",
-        "gap": "{navigation.item.gap}",
+        "color": "{text.default}",
+        "hoverColor": "{text.hover.default}",
+        "borderRadius": "{dimension.radius.100}",
+        "gap": "{dimension.space.200}",
         "icon": {
-          "color": "{text.color}",
-          "hoverColor": "{text.hoverColor}"
+          "color": "{icon.strong}",
+          "hoverColor": "{icon.strongHover}"
         }
       },
       "separator": {
-        "color": "{text.color}"
+        "color": "{text.default}"
       }
     },
     "button": {
       "extend": {
-        "disabledBackground": "{form.disabledBackground}",
+        "disabledBackground": "{background.disabled}",
         "extOutlined": {
           "danger": {
-            "focusBackground": "{transparent}"
+            "focusBackground": "{background.transparent}"
           },
           "warn": {
-            "focusBackground": "{transparent}"
+            "focusBackground": "{background.transparent}"
           },
           "info": {
-            "focusBackground": "{transparent}"
+            "focusBackground": "{background.transparent}"
           },
           "help": {
-            "focusBackground": "{transparent}"
+            "focusBackground": "{background.transparent}"
           },
           "success": {
-            "focusBackground": "{transparent}"
+            "focusBackground": "{background.transparent}"
           }
         },
-        "disabledColor": "{form.disabledColor}",
+        "disabledColor": "{text.muted}",
         "extText": {
           "danger": {
-            "focusBackground": "{transparent}"
+            "focusBackground": "{background.transparent}"
           },
           "warn": {
-            "focusBackground": "{transparent}"
+            "focusBackground": "{background.transparent}"
           },
           "info": {
-            "focusBackground": "{transparent}"
+            "focusBackground": "{background.transparent}"
           },
           "help": {
-            "focusBackground": "{transparent}"
+            "focusBackground": "{background.transparent}"
           },
           "success": {
-            "focusBackground": "{transparent}"
+            "focusBackground": "{background.transparent}"
           }
         },
         "extLink": {
-          "background": "{transparent}",
-          "colorHover": "{text.hoverColor}",
+          "background": "{background.transparent}",
+          "colorHover": "{background.selectedStrong}",
           "paddingX": "0rem",
-          "paddingY": "{controls.padding.100}",
+          "paddingY": "{dimension.space.100}",
           "sm": {
-            "iconOnlyWidth": "{controls.iconOnly.200}"
+            "iconOnlyWidth": "{dimension.size.300}"
           },
           "base": {
-            "iconOnlyWidth": "{controls.iconOnly.400}"
+            "iconOnlyWidth": "{dimension.size.400}"
           },
           "lg": {
-            "iconOnlyWidth": "{controls.iconOnly.500}"
+            "iconOnlyWidth": "{dimension.size.450}"
           },
           "xlg": {
-            "iconOnlyWidth": "{controls.iconOnly.600}"
+            "iconOnlyWidth": "{dimension.size.500}"
           }
         },
         "extSm": {
-          "borderRadius": "{controls.borderRadius.100}",
-          "gap": "{controls.gap.100}"
+          "borderRadius": "{dimension.radius.300}",
+          "gap": "{dimension.space.200}"
         },
         "extLg": {
-          "borderRadius": "{controls.borderRadius.200}",
-          "gap": "{controls.gap.200}",
-          "height": "{controls.iconOnly.850}"
+          "borderRadius": "{dimension.radius.400}",
+          "gap": "{dimension.space.300}",
+          "height": "{dimension.size.750}"
         },
         "extXlg": {
-          "borderRadius": "{controls.borderRadius.200}",
-          "gap": "{controls.gap.200}",
-          "iconOnlyWidth": "{controls.iconOnly.900}",
-          "paddingX": "{controls.padding.600}",
-          "paddingY": "{controls.padding.500}",
-          "height": "{controls.iconOnly.900}"
-        },
-        "borderWidth": "{controls.width.100}",
+          "borderRadius": "{dimension.radius.400}",
+          "gap": "{dimension.space.300}",
+          "iconOnlyWidth": "{dimension.size.800}",
+          "paddingX": "{dimension.space.600}",
+          "paddingY": "{dimension.space.500}",
+          "height": "{dimension.size.800}"
+        },
+        "borderWidth": "{dimension.size.100}",
         "iconSize": {
-          "sm": "{controls.iconOnly.200}",
-          "md": "{controls.iconOnly.300}",
-          "lg": "{controls.iconOnly.400}"
+          "sm": "{dimension.size.300}",
+          "md": "{dimension.size.350}",
+          "lg": "{dimension.size.400}"
         }
       },
       "colorScheme": {
         "light": {
           "root": {
             "primary": {
-              "background": "{primary.color}",
-              "hoverBackground": "{primary.hoverColor}",
-              "activeBackground": "{primary.activeColor}",
-              "borderColor": "{transparent}",
-              "hoverBorderColor": "{transparent}",
-              "activeBorderColor": "{transparent}",
-              "color": "{text.extend.colorPrimaryStatic}",
-              "hoverColor": "{text.extend.colorPrimaryStatic}",
-              "activeColor": "{text.extend.colorPrimaryStatic}",
+              "background": "{background.brand.bold}",
+              "hoverBackground": "{background.brand.boldHover}",
+              "activeBackground": "{background.brand.boldActive}",
+              "borderColor": "{border.transparent}",
+              "hoverBorderColor": "{border.transparent}",
+              "activeBorderColor": "{border.transparent}",
+              "color": "{text.staticDark}",
+              "hoverColor": "{text.staticDark}",
+              "activeColor": "{text.staticDark}",
               "focusRing": {
-                "color": "{focusRing.color}",
-                "shadow": "{focusRing.shadow}"
+                "color": "{background.success.subtleHover}",
+                "shadow": "{shadow.200}"
               }
             },
             "secondary": {
-              "background": "{surface.900}",
-              "hoverBackground": "{surface.800}",
-              "activeBackground": "{surface.700}",
-              "borderColor": "{transparent}",
-              "hoverBorderColor": "{transparent}",
-              "activeBorderColor": "{transparent}",
-              "color": "{text.extend.colorInverted}",
-              "hoverColor": "{text.extend.colorInverted}",
-              "activeColor": "{text.extend.colorInverted}",
+              "background": "{background.selected}",
+              "hoverBackground": "{background.surface.inverse}",
+              "activeBackground": "{background.selectedStrong}",
+              "borderColor": "{border.transparent}",
+              "hoverBorderColor": "{border.transparent}",
+              "activeBorderColor": "{border.transparent}",
+              "color": "{text.onBold}",
+              "hoverColor": "{text.onBold}",
+              "activeColor": "{text.onBold}",
               "focusRing": {
-                "color": "{focusRing.color}",
-                "shadow": "{focusRing.shadow}"
+                "color": "{background.success.subtleHover}",
+                "shadow": "{shadow.200}"
               }
             },
             "contrast": {
-              "background": "{surface.200}",
-              "hoverBackground": "{surface.300}",
-              "activeBackground": "{surface.400}",
-              "borderColor": "{transparent}",
-              "hoverBorderColor": "{transparent}",
-              "activeBorderColor": "{transparent}",
-              "color": "{text.color}",
-              "hoverColor": "{text.color}",
-              "activeColor": "{text.color}",
+              "background": "{background.disabled}",
+              "hoverBackground": "{text.disabled}",
+              "activeBackground": "{text.hover.subtle}",
+              "borderColor": "{border.transparent}",
+              "hoverBorderColor": "{border.transparent}",
+              "activeBorderColor": "{border.transparent}",
+              "color": "{text.default}",
+              "hoverColor": "{text.default}",
+              "activeColor": "{text.default}",
               "focusRing": {
-                "color": "{focusRing.color}",
-                "shadow": "{focusRing.shadow}"
+                "color": "{background.success.subtleHover}",
+                "shadow": "{shadow.200}"
               }
             },
             "info": {
-              "background": "{info.300}",
-              "hoverBackground": "{info.400}",
-              "activeBackground": "{info.500}",
-              "borderColor": "{transparent}",
-              "hoverBorderColor": "{transparent}",
-              "activeBorderColor": "{transparent}",
-              "color": "{info.900}",
-              "hoverColor": "{info.950}",
-              "activeColor": "{info.900}"
+              "background": "{background.info.subtleHover}",
+              "hoverBackground": "{background.info.bold}",
+              "activeBackground": "{background.info.bold}",
+              "borderColor": "{border.transparent}",
+              "hoverBorderColor": "{border.transparent}",
+              "activeBorderColor": "{border.transparent}",
+              "color": "{text.info}",
+              "hoverColor": "{text.info}",
+              "activeColor": "{text.info}"
             },
             "success": {
-              "background": "{success.300}",
-              "hoverBackground": "{success.400}",
-              "activeBackground": "{success.500}",
-              "borderColor": "{transparent}",
-              "hoverBorderColor": "{transparent}",
-              "activeBorderColor": "{transparent}",
-              "color": "{success.900}",
-              "hoverColor": "{success.950}",
-              "activeColor": "{success.900}"
+              "background": "{background.success.subtleHover}",
+              "hoverBackground": "{background.success.bold}",
+              "activeBackground": "{background.brand.bold}",
+              "borderColor": "{border.transparent}",
+              "hoverBorderColor": "{border.transparent}",
+              "activeBorderColor": "{border.transparent}",
+              "color": "{text.success}",
+              "hoverColor": "{text.success}",
+              "activeColor": "{text.success}"
             },
             "warn": {
-              "background": "{warn.300}",
-              "hoverBackground": "{warn.400}",
-              "activeBackground": "{warn.500}",
-              "borderColor": "{transparent}",
-              "hoverBorderColor": "{transparent}",
-              "activeBorderColor": "{transparent}",
-              "color": "{warn.900}",
-              "hoverColor": "{warn.950}",
-              "activeColor": "{warn.900}"
+              "background": "{background.warning.subtleHover}",
+              "hoverBackground": "{background.warning.bold}",
+              "activeBackground": "{background.warning.bold}",
+              "borderColor": "{border.transparent}",
+              "hoverBorderColor": "{border.transparent}",
+              "activeBorderColor": "{border.transparent}",
+              "color": "{text.warning}",
+              "hoverColor": "{text.warning}",
+              "activeColor": "{text.warning}"
             },
             "help": {
-              "background": "{help.300}",
-              "hoverBackground": "{help.400}",
-              "activeBackground": "{help.500}",
-              "borderColor": "{transparent}",
-              "hoverBorderColor": "{transparent}",
-              "activeBorderColor": "{transparent}",
-              "color": "{help.900}",
-              "hoverColor": "{help.950}",
-              "activeColor": "{help.900}"
+              "background": "{background.help.subtleHover}",
+              "hoverBackground": "{background.help.bold}",
+              "activeBackground": "{background.help.bold}",
+              "borderColor": "{border.transparent}",
+              "hoverBorderColor": "{border.transparent}",
+              "activeBorderColor": "{border.transparent}",
+              "color": "{text.help}",
+              "hoverColor": "{text.help}",
+              "activeColor": "{text.help}"
             },
             "danger": {
-              "background": "{error.300}",
-              "hoverBackground": "{error.400}",
-              "activeBackground": "{error.500}",
-              "borderColor": "{transparent}",
-              "hoverBorderColor": "{transparent}",
-              "activeBorderColor": "{transparent}",
-              "color": "{error.900}",
-              "hoverColor": "{error.950}",
-              "activeColor": "{error.900}"
+              "background": "{background.danger.subtleHover}",
+              "hoverBackground": "{background.danger.bold}",
+              "activeBackground": "{background.danger.bold}",
+              "borderColor": "{border.transparent}",
+              "hoverBorderColor": "{border.transparent}",
+              "activeBorderColor": "{border.transparent}",
+              "color": "{text.danger}",
+              "hoverColor": "{text.danger}",
+              "activeColor": "{text.danger}"
             }
           },
           "outlined": {
             "primary": {
-              "hoverBackground": "{primary.hoverBackground}",
-              "activeBackground": "{primary.activeBackground}",
-              "borderColor": "{primary.borderColor}",
-              "color": "{primary.color}"
+              "hoverBackground": "{background.brand.subtle}",
+              "activeBackground": "{background.brand.subtleHover}",
+              "borderColor": "{border.success}",
+              "color": "{text.success}"
             },
             "success": {
-              "hoverBackground": "{success.100}",
-              "activeBackground": "{success.200}",
-              "borderColor": "{success.600}",
-              "color": "{success.600}"
+              "hoverBackground": "{background.brand.subtleHover}",
+              "activeBackground": "{background.success.subtleHover}",
+              "borderColor": "{border.brand}",
+              "color": "{text.brand}"
             },
             "info": {
-              "hoverBackground": "{info.100}",
-              "activeBackground": "{info.200}",
-              "borderColor": "{info.600}",
-              "color": "{info.600}"
+              "hoverBackground": "{background.info.subtleHover}",
+              "activeBackground": "{background.info.subtleHover}",
+              "borderColor": "{border.info}",
+              "color": "{text.info}"
             },
             "warn": {
-              "hoverBackground": "{warn.100}",
-              "activeBackground": "{warn.200}",
-              "borderColor": "{warn.600}",
-              "color": "{warn.600}"
+              "hoverBackground": "{background.warning.subtleHover}",
+              "activeBackground": "{background.warning.subtleHover}",
+              "borderColor": "{border.warning}",
+              "color": "{text.warning}"
             },
             "help": {
-              "hoverBackground": "{help.100}",
-              "activeBackground": "{help.200}",
-              "borderColor": "{help.600}",
-              "color": "{help.600}"
+              "hoverBackground": "{background.help.subtleHover}",
+              "activeBackground": "{background.help.subtleHover}",
+              "borderColor": "{border.help}",
+              "color": "{text.help}"
             },
             "danger": {
-              "hoverBackground": "{error.100}",
-              "activeBackground": "{error.200}",
-              "borderColor": "{error.600}",
-              "color": "{error.600}"
+              "hoverBackground": "{background.danger.subtleHover}",
+              "activeBackground": "{background.danger.subtleHover}",
+              "borderColor": "{border.danger}",
+              "color": "{text.danger}"
             }
           },
           "text": {
             "primary": {
-              "hoverBackground": "{surface.100}",
-              "activeBackground": "{surface.200}",
-              "color": "{text.color}"
+              "hoverBackground": "{background.neutral.subtleHover}",
+              "activeBackground": "{background.disabled}",
+              "color": "{text.default}"
             },
             "success": {
-              "hoverBackground": "{success.100}",
-              "activeBackground": "{success.200}",
-              "color": "{success.600}"
+              "hoverBackground": "{background.brand.subtleHover}",
+              "activeBackground": "{background.success.subtleHover}",
+              "color": "{text.brand}"
             },
             "info": {
-              "hoverBackground": "{info.100}",
-              "activeBackground": "{info.200}",
-              "color": "{info.600}"
+              "hoverBackground": "{background.info.subtleHover}",
+              "activeBackground": "{background.info.subtleHover}",
+              "color": "{text.info}"
             },
             "warn": {
-              "hoverBackground": "{warn.100}",
-              "activeBackground": "{warn.200}",
-              "color": "{warn.600}"
+              "hoverBackground": "{background.warning.subtleHover}",
+              "activeBackground": "{background.warning.subtleHover}",
+              "color": "{text.warning}"
             },
             "help": {
-              "hoverBackground": "{help.100}",
-              "activeBackground": "{help.200}",
-              "color": "{help.600}"
+              "hoverBackground": "{background.help.subtleHover}",
+              "activeBackground": "{background.help.subtleHover}",
+              "color": "{text.help}"
             },
             "danger": {
-              "hoverBackground": "{error.100}",
-              "activeBackground": "{error.200}",
-              "color": "{error.600}"
+              "hoverBackground": "{background.danger.subtleHover}",
+              "activeBackground": "{background.danger.subtleHover}",
+              "color": "{text.danger}"
             }
           },
           "link": {
-            "color": "{text.color}",
-            "hoverColor": "{text.hoverColor}",
-            "activeColor": "{text.mutedColor}"
+            "color": "{text.default}",
+            "hoverColor": "{text.hover.default}",
+            "activeColor": "{text.muted}"
           }
         },
         "dark": {
           "root": {
             "primary": {
-              "background": "{primary.color}",
-              "hoverBackground": "{primary.hoverColor}",
-              "activeBackground": "{primary.activeColor}",
-              "borderColor": "{transparent}",
-              "hoverBorderColor": "{transparent}",
-              "activeBorderColor": "{transparent}",
-              "color": "{text.extend.colorPrimaryStatic}",
-              "hoverColor": "{text.extend.colorPrimaryStatic}",
-              "activeColor": "{text.extend.colorPrimaryStatic}",
+              "background": "{background.brand.bold}",
+              "hoverBackground": "{background.brand.boldHover}",
+              "activeBackground": "{background.brand.boldActive}",
+              "borderColor": "{border.transparent}",
+              "hoverBorderColor": "{border.transparent}",
+              "activeBorderColor": "{border.transparent}",
+              "color": "{text.staticDark}",
+              "hoverColor": "{text.staticDark}",
+              "activeColor": "{text.staticDark}",
               "focusRing": {
-                "color": "{focusRing.color}",
-                "shadow": "{focusRing.shadow}"
+                "color": "{background.success.subtleHover}",
+                "shadow": "{shadow.200}"
               }
             },
             "secondary": {
-              "background": "{surface.200}",
-              "hoverBackground": "{surface.300}",
-              "activeBackground": "{surface.400}",
-              "borderColor": "{transparent}",
-              "hoverBorderColor": "{transparent}",
-              "activeBorderColor": "{transparent}",
-              "color": "{surface.950}",
-              "hoverColor": "{surface.950}",
-              "activeColor": "{surface.950}",
+              "background": "{background.disabled}",
+              "hoverBackground": "{text.disabled}",
+              "activeBackground": "{text.hover.subtle}",
+              "borderColor": "{border.transparent}",
+              "hoverBorderColor": "{border.transparent}",
+              "activeBorderColor": "{border.transparent}",
+              "color": "{text.neutralHover}",
+              "hoverColor": "{text.neutralHover}",
+              "activeColor": "{text.neutralHover}",
               "focusRing": {
-                "color": "{focusRing.color}",
-                "shadow": "{focusRing.shadow}"
+                "color": "{background.success.subtleHover}",
+                "shadow": "{shadow.200}"
               }
             },
             "contrast": {
-              "background": "{surface.950}",
-              "hoverBackground": "{surface.900}",
-              "activeBackground": "{surface.800}",
-              "borderColor": "{transparent}",
-              "hoverBorderColor": "{transparent}",
-              "activeBorderColor": "{transparent}",
-              "color": "{surface.0}",
-              "hoverColor": "{surface.0}",
-              "activeColor": "{surface.0}",
+              "background": "{background.surface.inverseStrong}",
+              "hoverBackground": "{background.selected}",
+              "activeBackground": "{background.surface.inverse}",
+              "borderColor": "{border.transparent}",
+              "hoverBorderColor": "{border.transparent}",
+              "activeBorderColor": "{border.transparent}",
+              "color": "{background.surface.canvas}",
+              "hoverColor": "{background.surface.canvas}",
+              "activeColor": "{background.surface.canvas}",
               "focusRing": {
-                "color": "{focusRing.color}",
-                "shadow": "{focusRing.shadow}"
+                "color": "{background.success.subtleHover}",
+                "shadow": "{shadow.200}"
               }
             },
             "info": {
-              "background": "{info.500}",
-              "hoverBackground": "{info.400}",
-              "activeBackground": "{info.300}",
-              "borderColor": "{transparent}",
-              "hoverBorderColor": "{transparent}",
-              "activeBorderColor": "{transparent}",
-              "color": "{text.extend.colorPrimaryStatic}",
-              "hoverColor": "{text.extend.colorPrimaryStatic}",
-              "activeColor": "{text.extend.colorPrimaryStatic}"
+              "background": "{background.info.bold}",
+              "hoverBackground": "{background.info.bold}",
+              "activeBackground": "{background.info.subtleHover}",
+              "borderColor": "{border.transparent}",
+              "hoverBorderColor": "{border.transparent}",
+              "activeBorderColor": "{border.transparent}",
+              "color": "{text.staticDark}",
+              "hoverColor": "{text.staticDark}",
+              "activeColor": "{text.staticDark}"
             },
             "success": {
-              "background": "{success.500}",
-              "hoverBackground": "{success.400}",
-              "activeBackground": "{success.300}",
-              "borderColor": "{transparent}",
-              "hoverBorderColor": "{transparent}",
-              "activeBorderColor": "{transparent}",
-              "color": "{text.extend.colorPrimaryStatic}",
-              "hoverColor": "{text.extend.colorPrimaryStatic}",
-              "activeColor": "{text.extend.colorPrimaryStatic}"
+              "background": "{background.brand.bold}",
+              "hoverBackground": "{background.success.bold}",
+              "activeBackground": "{background.success.subtleHover}",
+              "borderColor": "{border.transparent}",
+              "hoverBorderColor": "{border.transparent}",
+              "activeBorderColor": "{border.transparent}",
+              "color": "{text.staticDark}",
+              "hoverColor": "{text.staticDark}",
+              "activeColor": "{text.staticDark}"
             },
             "warn": {
-              "background": "{warn.500}",
-              "hoverBackground": "{warn.400}",
-              "activeBackground": "{warn.300}",
-              "borderColor": "{transparent}",
-              "hoverBorderColor": "{transparent}",
-              "activeBorderColor": "{transparent}",
-              "color": "{text.extend.colorPrimaryStatic}",
-              "hoverColor": "{text.extend.colorPrimaryStatic}",
-              "activeColor": "{text.extend.colorPrimaryStatic}"
+              "background": "{background.warning.bold}",
+              "hoverBackground": "{background.warning.bold}",
+              "activeBackground": "{background.warning.subtleHover}",
+              "borderColor": "{border.transparent}",
+              "hoverBorderColor": "{border.transparent}",
+              "activeBorderColor": "{border.transparent}",
+              "color": "{text.staticDark}",
+              "hoverColor": "{text.staticDark}",
+              "activeColor": "{text.staticDark}"
             },
             "help": {
-              "background": "{help.500}",
-              "hoverBackground": "{help.400}",
-              "activeBackground": "{help.300}",
-              "borderColor": "{transparent}",
-              "hoverBorderColor": "{transparent}",
-              "activeBorderColor": "{transparent}",
-              "color": "{text.extend.colorPrimaryStatic}",
-              "hoverColor": "{text.extend.colorPrimaryStatic}",
-              "activeColor": "{text.extend.colorPrimaryStatic}"
+              "background": "{background.help.bold}",
+              "hoverBackground": "{background.help.bold}",
+              "activeBackground": "{background.help.subtleHover}",
+              "borderColor": "{border.transparent}",
+              "hoverBorderColor": "{border.transparent}",
+              "activeBorderColor": "{border.transparent}",
+              "color": "{text.staticDark}",
+              "hoverColor": "{text.staticDark}",
+              "activeColor": "{text.staticDark}"
             },
             "danger": {
-              "background": "{error.500}",
-              "hoverBackground": "{error.400}",
-              "activeBackground": "{error.300}",
-              "borderColor": "{transparent}",
-              "hoverBorderColor": "{transparent}",
-              "activeBorderColor": "{transparent}",
-              "color": "{text.extend.colorPrimaryStatic}",
-              "hoverColor": "{text.extend.colorPrimaryStatic}",
-              "activeColor": "{text.extend.colorPrimaryStatic}"
+              "background": "{background.danger.bold}",
+              "hoverBackground": "{background.danger.bold}",
+              "activeBackground": "{background.danger.subtleHover}",
+              "borderColor": "{border.transparent}",
+              "hoverBorderColor": "{border.transparent}",
+              "activeBorderColor": "{border.transparent}",
+              "color": "{text.staticDark}",
+              "hoverColor": "{text.staticDark}",
+              "activeColor": "{text.staticDark}"
             }
           },
           "outlined": {
             "primary": {
-              "hoverBackground": "{primary.hoverBackground}",
-              "activeBackground": "{primary.activeBackground}",
-              "borderColor": "{primary.borderColor}",
-              "color": "{primary.color}"
+              "hoverBackground": "{background.brand.subtle}",
+              "activeBackground": "{background.brand.subtleHover}",
+              "borderColor": "{border.success}",
+              "color": "{text.success}"
             },
             "success": {
-              "hoverBackground": "{success.950}",
-              "activeBackground": "{success.900}",
-              "borderColor": "{success.500}",
-              "color": "{success.500}"
+              "hoverBackground": "{text.success}",
+              "activeBackground": "{background.success.bold}",
+              "borderColor": "{border.checked}",
+              "color": "{text.success}"
             },
             "info": {
-              "hoverBackground": "{info.950}",
-              "activeBackground": "{info.900}",
-              "borderColor": "{info.500}",
-              "color": "{info.500}"
+              "hoverBackground": "{text.info}",
+              "activeBackground": "{background.info.bold}",
+              "borderColor": "{border.info}",
+              "color": "{text.info}"
             },
             "warn": {
-              "hoverBackground": "{warn.950}",
-              "activeBackground": "{warn.900}",
-              "borderColor": "{warn.500}",
-              "color": "{warn.500}"
+              "hoverBackground": "{text.warning}",
+              "activeBackground": "{background.warning.bold}",
+              "borderColor": "{border.warning}",
+              "color": "{text.warning}"
             },
             "help": {
-              "hoverBackground": "{help.950}",
-              "activeBackground": "{help.900}",
-              "borderColor": "{help.500}",
-              "color": "{help.500}"
+              "hoverBackground": "{text.help}",
+              "activeBackground": "{background.help.bold}",
+              "borderColor": "{border.help}",
+              "color": "{text.help}"
             },
             "danger": {
-              "hoverBackground": "{error.950}",
-              "activeBackground": "{error.900}",
-              "borderColor": "{error.500}",
-              "color": "{error.500}"
+              "hoverBackground": "{text.danger}",
+              "activeBackground": "{background.danger.bold}",
+              "borderColor": "{border.danger}",
+              "color": "{text.danger}"
             }
           },
           "text": {
             "primary": {
-              "hoverBackground": "{surface.800}",
-              "activeBackground": "{surface.700}",
-              "color": "{text.color}"
+              "hoverBackground": "{background.surface.inverse}",
+              "activeBackground": "{background.selectedStrong}",
+              "color": "{text.default}"
             },
             "success": {
-              "hoverBackground": "{success.950}",
-              "activeBackground": "{success.900}",
-              "color": "{success.500}"
+              "hoverBackground": "{text.success}",
+              "activeBackground": "{background.success.bold}",
+              "color": "{text.success}"
             },
             "info": {
-              "hoverBackground": "{info.950}",
-              "activeBackground": "{info.900}",
-              "color": "{info.500}"
+              "hoverBackground": "{text.info}",
+              "activeBackground": "{background.info.bold}",
+              "color": "{text.info}"
             },
             "warn": {
-              "hoverBackground": "{warn.950}",
-              "activeBackground": "{warn.900}",
-              "color": "{warn.500}"
+              "hoverBackground": "{text.warning}",
+              "activeBackground": "{background.warning.bold}",
+              "color": "{text.warning}"
             },
             "help": {
-              "hoverBackground": "{help.950}",
-              "activeBackground": "{help.900}",
-              "color": "{help.500}"
+              "hoverBackground": "{text.help}",
+              "activeBackground": "{background.help.bold}",
+              "color": "{text.help}"
             },
             "danger": {
-              "hoverBackground": "{error.950}",
-              "activeBackground": "{error.900}",
-              "color": "{error.500}"
+              "hoverBackground": "{text.danger}",
+              "activeBackground": "{background.danger.bold}",
+              "color": "{text.danger}"
             }
           },
           "link": {
-            "color": "{text.color}",
-            "hoverColor": "{text.hoverColor}",
-            "activeColor": "{text.mutedColor}"
+            "color": "{text.default}",
+            "hoverColor": "{text.hover.default}",
+            "activeColor": "{text.muted}"
           }
         }
       },
       "root": {
-        "borderRadius": "{controls.borderRadius.100}",
-        "roundedBorderRadius": "{controls.borderRadius.max}",
-        "gap": "{controls.gap.100}",
-        "fontSize": "{fonts.fontSize.200}",
-        "paddingX": "{controls.padding.400}",
-        "paddingY": "{controls.padding.200}",
-        "iconOnlyWidth": "{controls.iconOnly.700}",
+        "borderRadius": "{dimension.radius.300}",
+        "roundedBorderRadius": "{dimension.radius.max}",
+        "gap": "{dimension.space.200}",
+        "fontSize": "{typography.body.sm.fontSize}",
+        "paddingX": "{dimension.space.400}",
+        "paddingY": "{dimension.space.200}",
+        "iconOnlyWidth": "{dimension.size.600}",
         "raisedShadow": "none",
-        "badgeSize": "{feedback.width.500}",
-        "transitionDuration": "{controls.transitionDuration}",
+        "badgeSize": "{dimension.size.300}",
+        "transitionDuration": "{dimension.duration.200}",
         "focusRing": {
-          "width": "{focusRing.width}",
-          "style": "{focusRing.style}",
-          "offset": "{focusRing.offset}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "offset": "{dimension.focusRing.offset}"
         },
         "sm": {
-          "fontSize": "{fonts.fontSize.200}",
-          "iconOnlyWidth": "{controls.iconOnly.600}",
-          "paddingX": "{controls.padding.300}",
-          "paddingY": "{controls.padding.200}"
+          "fontSize": "{typography.body.sm.fontSize}",
+          "iconOnlyWidth": "{dimension.size.500}",
+          "paddingX": "{dimension.space.300}",
+          "paddingY": "{dimension.space.200}"
         },
         "lg": {
-          "fontSize": "{fonts.fontSize.500}",
-          "iconOnlyWidth": "{controls.iconOnly.850}",
-          "paddingX": "{controls.padding.600}",
-          "paddingY": "{controls.padding.400}"
+          "fontSize": "{typography.heading.sm.fontSize}",
+          "iconOnlyWidth": "{dimension.size.750}",
+          "paddingX": "{dimension.space.600}",
+          "paddingY": "{dimension.space.400}"
         },
         "label": {
-          "fontWeight": "{fonts.fontWeight.demibold}"
+          "fontWeight": "{typography.heading.lg.fontWeight}"
         }
       }
     },
     "card": {
       "extend": {
-        "borderColor": "{content.borderColor}",
-        "borderWidth": "{content.borderWidth}"
+        "borderColor": "{border.subtle}",
+        "borderWidth": "{dimension.size.100}",
+        "fonts_fontFamily_heading": "{typography.heading.lg.fontFamily}",
+        "fonts_fontSize_200": "{typography.body.sm.fontSize}",
+        "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}",
+        "overlay_popover_shadow": "{shadow.400}"
       },
       "root": {
-        "background": "{content.background}",
-        "borderRadius": "{content.gap.400}",
-        "color": "{content.color}"
+        "background": "{background.surface.raised}",
+        "borderRadius": "{dimension.space.400}",
+        "color": "{text.default}"
       },
       "body": {
-        "padding": "{content.padding.300}",
-        "gap": "{content.gap.400}"
+        "padding": "{dimension.space.400}",
+        "gap": "{dimension.space.400}"
       },
       "caption": {
-        "gap": "{content.gap.100}"
+        "gap": "{dimension.space.100}"
       },
       "title": {
-        "fontSize": "{fonts.fontSize.400}",
-        "fontWeight": "{fonts.fontWeight.demibold}"
+        "fontSize": "{typography.body.lg.fontSize}",
+        "fontWeight": "{typography.heading.lg.fontWeight}"
       },
       "subtitle": {
-        "color": "{text.mutedColor}"
+        "color": "{text.muted}"
       }
     },
     "carousel": {
       "colorScheme": {
         "light": {
           "indicator": {
-            "background": "{surface.300}",
-            "hoverBackground": "{surface.400}",
-            "activeBackground": "{surface.900}"
+            "background": "{text.disabled}",
+            "hoverBackground": "{text.hover.subtle}",
+            "activeBackground": "{background.selected}"
           }
         }
       },
       "root": {
-        "transitionDuration": "{media.transitionDuration}"
+        "transitionDuration": "{dimension.duration.200}"
       },
       "content": {
-        "gap": "{media.gap.200}"
+        "gap": "{dimension.space.200}"
       },
       "indicatorList": {
-        "padding": "{media.padding.400}",
-        "gap": "{media.gap.200}"
+        "padding": "{dimension.space.400}",
+        "gap": "{dimension.space.200}"
       },
       "indicator": {
-        "width": "{controls.iconOnly.100}",
-        "height": "{controls.iconOnly.100}",
-        "borderRadius": "{media.borderRadius.400}",
+        "width": "{dimension.size.200}",
+        "height": "{dimension.size.200}",
+        "borderRadius": "{dimension.radius.500}",
         "focusRing": {
-          "width": "{focusRing.width}",
-          "style": "{focusRing.style}",
-          "color": "{focusRing.color}",
-          "offset": "{focusRing.offset}",
-          "shadow": "{focusRing.shadow}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "{shadow.200}"
         }
+      },
+      "extend": {
+        "surface_200": "{background.disabled}",
+        "surface_300": "{text.disabled}",
+        "surface_400": "{text.hover.subtle}",
+        "text_color": "{text.default}"
       }
     },
     "checkbox": {
       "root": {
-        "borderRadius": "{form.borderRadius.100}",
+        "borderRadius": "{dimension.radius.200}",
         "extend": {
-          "borderWidth": "{form.borderWidth}"
-        },
-        "width": "{form.size.400}",
-        "height": "{form.size.400}",
-        "background": "{form.background}",
-        "checkedBackground": "{surface.900}",
-        "checkedHoverBackground": "{surface.800}",
-        "disabledBackground": "{form.disabledBackground}",
-        "filledBackground": "{form.filledBackground}",
-        "borderColor": "{form.borderColor}",
-        "hoverBorderColor": "{form.hoverBorderPrimaryColor}",
-        "focusBorderColor": "{form.focusBorderPrimaryColor}",
-        "checkedBorderColor": "{surface.900}",
-        "checkedHoverBorderColor": "{surface.800}",
-        "checkedFocusBorderColor": "{primary.color}",
-        "checkedDisabledBorderColor": "{form.borderColor}",
-        "invalidBorderColor": "{form.invalidBorderColor}",
+          "borderWidth": "{dimension.borderWidth.100}"
+        },
+        "width": "{dimension.size.400}",
+        "height": "{dimension.size.400}",
+        "background": "{background.surface.field}",
+        "checkedBackground": "{background.selected}",
+        "checkedHoverBackground": "{background.surface.inverse}",
+        "disabledBackground": "{background.disabled}",
+        "filledBackground": "{background.surface.field}",
+        "borderColor": "{border.default}",
+        "hoverBorderColor": "{border.strong}",
+        "focusBorderColor": "{border.strong}",
+        "checkedBorderColor": "{border.strong}",
+        "checkedHoverBorderColor": "{border.inverse}",
+        "checkedFocusBorderColor": "{border.checked}",
+        "checkedDisabledBorderColor": "{border.default}",
+        "invalidBorderColor": "{border.danger}",
         "shadow": "0",
         "focusRing": {
-          "focusRing": "{focusRing.width}",
-          "style": "{focusRing.style}",
-          "color": "{focusRing.color}",
-          "offset": "{focusRing.offset}",
-          "shadow": "{focusRing.shadow}"
+          "focusRing": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "{shadow.200}"
         },
         "sm": {
-          "width": "{form.size.200}",
-          "height": "{form.size.200}"
+          "width": "{dimension.size.200}",
+          "height": "{dimension.size.200}"
         },
         "lg": {
-          "width": "{form.size.350}",
-          "height": "{form.size.350}"
+          "width": "{dimension.size.350}",
+          "height": "{dimension.size.350}"
         },
-        "transitionDuration": "{form.transitionDuration}"
+        "transitionDuration": "{dimension.duration.200}"
       },
       "icon": {
-        "size": "{form.icon.300}",
-        "color": "{form.color}",
-        "checkedColor": "{primary.contrastColor}",
-        "checkedHoverColor": "{primary.contrastColor}",
-        "disabledColor": "{form.disabledColor}",
+        "size": "{dimension.size.300}",
+        "color": "{icon.default}",
+        "checkedColor": "{icon.onBold}",
+        "checkedHoverColor": "{icon.onBold}",
+        "disabledColor": "{icon.subtle}",
         "sm": {
-          "size": "{form.icon.200}"
+          "size": "{dimension.size.250}"
         },
         "lg": {
-          "size": "{form.icon.400}"
+          "size": "{dimension.size.350}"
         }
+      },
+      "extend": {
+        "focusRing_invalid": "{focusRing.invalid}",
+        "focusRing_success": "{focusRing.success}",
+        "fonts_fontFamily_base": "{typography.body.lg.fontFamily}",
+        "fonts_fontFamily_heading": "{typography.heading.lg.fontFamily}",
+        "fonts_fontSize_200": "{typography.body.sm.fontSize}",
+        "fonts_fontSize_300": "{typography.body.md.fontSize}",
+        "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}",
+        "text_brand": "{text.brand}",
+        "text_color": "{text.default}",
+        "text_disabled": "{text.disabled}",
+        "text_mutedColor": "{text.muted}",
+        "text_subtle": "{text.subtle}",
+        "focusRing_width": "{dimension.space.100}"
       }
     },
     "chip": {
       "extend": {
-        "borderColor": "{transparent}",
-        "borderWidth": "{controls.width.100}"
+        "borderColor": "{border.transparent}",
+        "borderWidth": "{dimension.size.100}",
+        "focusRing_success": "{focusRing.success}",
+        "fonts_fontFamily_base": "{typography.body.lg.fontFamily}",
+        "fonts_fontSize_300": "{typography.body.md.fontSize}",
+        "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}",
+        "fonts_lineHeight_400": "{typography.body.sm.lineHeight}",
+        "opacity_500": "{opacity.500}"
       },
       "root": {
-        "borderRadius": "{media.borderRadius.100}",
-        "paddingX": "{media.padding.200}",
-        "paddingY": "{media.padding.100}",
-        "gap": "{media.gap.200}",
-        "transitionDuration": "{media.transitionDuration}"
+        "borderRadius": "{dimension.radius.200}",
+        "paddingX": "{dimension.space.200}",
+        "paddingY": "{dimension.space.100}",
+        "gap": "{dimension.space.200}",
+        "transitionDuration": "{dimension.duration.200}"
       },
       "colorScheme": {
         "light": {
           "root": {
-            "background": "{surface.200}",
-            "color": "{text.color}"
+            "background": "{background.disabled}",
+            "color": "{text.default}"
           },
           "icon": {
-            "color": "{text.color}"
+            "color": "{icon.strong}"
           },
           "removeIcon": {
-            "color": "{text.color}"
+            "color": "{icon.strong}"
           }
         }
       },
@@ -2273,32 +1907,36 @@
         "height": "0rem"
       },
       "icon": {
-        "size": "{media.icon.size.100}"
+        "size": "{dimension.size.300}"
       },
       "removeIcon": {
-        "size": "{media.icon.size.100}",
+        "size": "{dimension.size.300}",
         "focusRing": {
-          "width": "{form.focusRing.width}",
-          "style": "{form.focusRing.style}",
-          "color": "{focusRing.color}",
-          "offset": "{form.focusRing.offset}",
-          "shadow": "{focusRing.shadow}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "{shadow.200}"
         }
       }
     },
     "confirmdialog": {
       "extend": {
         "extIcon": {
-          "success": "{success.500}",
-          "info": "{info.500}",
-          "help": "{help.500}",
-          "warn": "{warn.500}",
-          "danger": "{error.500}"
-        }
+          "success": "{background.brand.bold}",
+          "info": "{background.info.bold}",
+          "help": "{background.help.bold}",
+          "warn": "{background.warning.bold}",
+          "danger": "{background.danger.bold}"
+        },
+        "dimension_overlayWidth_base": "{dimension.overlayWidth.base}",
+        "dimension_overlayWidth_lg": "{dimension.overlayWidth.lg}",
+        "dimension_overlayWidth_sm": "{dimension.overlayWidth.sm}",
+        "dimension_overlayWidth_xlg": "{dimension.overlayWidth.xlg}"
       },
       "icon": {
-        "size": "{overlay.icon.size.200}",
-        "color": "{overlay.modal.color}"
+        "size": "{dimension.size.400}",
+        "color": "{icon.strong}"
       },
       "content": {
         "gap": "0rem"
@@ -2306,362 +1944,376 @@
     },
     "confirmpopup": {
       "root": {
-        "background": "{overlay.popover.background}",
-        "color": "{overlay.popover.color}",
-        "shadow": "{overlay.popover.shadow}",
-        "gutter": "{overlay.gap.300}",
-        "arrowOffset": "{overlay.modal.padding.200}"
+        "background": "{background.surface.raised}",
+        "color": "{text.default}",
+        "shadow": "{shadow.400}",
+        "gutter": "{dimension.space.300}",
+        "arrowOffset": "{dimension.space.500}"
       },
       "content": {
-        "padding": "{overlay.popover.padding.100}",
-        "gap": "{overlay.gap.400}"
+        "padding": "{dimension.space.300}",
+        "gap": "{dimension.space.400}"
       },
       "icon": {
-        "size": "{overlay.icon.size.200}",
-        "color": "{overlay.popover.color}"
+        "size": "{dimension.size.400}",
+        "color": "{icon.strong}"
       },
       "footer": {
-        "gap": "{overlay.gap.200}",
-        "padding": "0 {overlay.popover.padding} {overlay.popover.padding} {overlay.popover.padding}"
+        "gap": "{dimension.space.200}",
+        "padding": "0 {dimension.space.300} {dimension.space.500} {dimension.space.300}"
       }
     },
     "contextmenu": {
       "root": {
-        "background": "{content.background}",
-        "color": "{content.color}",
-        "shadow": "{navigation.shadow}"
+        "background": "{background.surface.raised}",
+        "color": "{text.default}",
+        "shadow": "{shadow.400}"
       },
       "list": {
-        "padding": "{navigation.list.padding.md} 0",
-        "gap": "{navigation.list.gap}"
+        "padding": "{dimension.space.100} 0",
+        "gap": "{dimension.space.100}"
       },
       "item": {
-        "padding": "{navigation.item.padding}",
-        "gap": "{navigation.item.gap}"
+        "padding": "{dimension.space.200} {dimension.space.300}",
+        "gap": "{dimension.space.200}"
       },
       "submenu": {
-        "mobileIndent": "{navigation.submenu.padding}"
+        "mobileIndent": "{dimension.space.500}"
       }
     },
     "datatable": {
       "colorScheme": {
         "light": {
           "root": {
-            "color": "{text.color}",
-            "borderColor": "{content.borderColor}"
+            "color": "{text.default}",
+            "borderColor": "{border.subtle}"
           },
           "header": {
-            "background": "{surface.50}",
-            "color": "{text.color}"
+            "background": "{background.neutral.subtle}",
+            "color": "{text.default}"
           },
           "headerCell": {
-            "background": "{surface.50}",
-            "hoverBackground": "{surface.100}",
-            "color": "{text.color}"
+            "background": "{background.neutral.subtle}",
+            "hoverBackground": "{background.neutral.subtleHover}",
+            "color": "{text.default}"
           },
           "footer": {
-            "background": "{surface.100}",
-            "color": "{text.color}"
+            "background": "{background.neutral.subtleHover}",
+            "color": "{text.default}"
           },
           "footerCell": {
-            "background": "{content.hoverBackground}",
-            "color": "{text.color}"
+            "background": "{background.surface.hover.section}",
+            "color": "{text.default}"
           },
           "row": {
-            "stripedBackground": "{content.hoverBackground}"
+            "stripedBackground": "{background.surface.hover.section}"
           },
           "bodyCell": {
-            "selectedBorderColor": "{content.borderColor}"
+            "selectedBorderColor": "{border.subtle}"
           }
         }
       },
       "extended": {
         "extHeaderCell": {
-          "selectedHoverBackground": "{surface.800}"
+          "selectedHoverBackground": "{background.surface.inverse}"
         },
         "extRow": {
-          "selectedHoverBackground": "{surface.800}",
-          "stripedHoverBackground": "{surface.100}"
+          "selectedHoverBackground": "{background.surface.inverse}",
+          "stripedHoverBackground": "{background.neutral.subtleHover}"
         }
       },
       "root": {
-        "transitionDuration": "{data.transitionDuration}"
+        "transitionDuration": "{dimension.duration.200}"
       },
       "header": {
-        "borderColor": "{content.borderColor}",
-        "borderWidth": "{data.width.100} 0 {data.width.100} 0",
-        "padding": "{data.padding.400}",
+        "borderColor": "{border.subtle}",
+        "borderWidth": "{dimension.size.100} 0 {dimension.size.100} 0",
+        "padding": "{dimension.space.400}",
         "sm": {
-          "padding": "{data.padding.200}"
+          "padding": "{dimension.space.200}"
         },
         "lg": {
-          "padding": "{data.padding.500}"
+          "padding": "{dimension.space.500}"
         }
       },
       "headerCell": {
-        "selectedBackground": "{highlight.background}",
-        "borderColor": "{content.borderColor}",
-        "hoverColor": "{text.extend.colorInverted}",
-        "selectedColor": "{highlight.color}",
-        "gap": "{data.gap.200}",
-        "padding": "{data.padding.400}",
+        "selectedBackground": "{background.selected}",
+        "borderColor": "{border.subtle}",
+        "hoverColor": "{text.onBold}",
+        "selectedColor": "{text.onBold}",
+        "gap": "{dimension.space.200}",
+        "padding": "{dimension.space.400}",
         "focusRing": {
-          "width": "{focusRing.width}",
-          "style": "{focusRing.style}",
-          "color": "{focusRing.color}",
-          "offset": "{focusRing.offset}",
-          "shadow": "inset {focus.ring.shadow}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "inset {shadow.200}"
         },
         "sm": {
-          "padding": "{data.padding.200}"
+          "padding": "{dimension.space.200}"
         },
         "lg": {
-          "padding": "{data.padding.500}"
+          "padding": "{dimension.space.500}"
         }
       },
       "columnTitle": {
-        "fontWeight": "{fonts.fontWeight.bold}"
+        "fontWeight": "{typography.heading.xl.fontWeight}"
       },
       "row": {
-        "background": "{content.background}",
-        "hoverBackground": "{content.hoverBackground}",
-        "selectedBackground": "{highlight.background}",
-        "color": "{content.color}",
-        "hoverColor": "{content.hoverColor}",
-        "selectedColor": "{highlight.color}",
+        "background": "{background.surface.raised}",
+        "hoverBackground": "{background.surface.hover.section}",
+        "selectedBackground": "{background.selected}",
+        "color": "{text.default}",
+        "hoverColor": "{text.hover.default}",
+        "selectedColor": "{text.onBold}",
         "focusRing": {
-          "width": "{focusRing.width}",
-          "style": "{focusRing.style}",
-          "color": "{focusRing.color}",
-          "offset": "{focusRing.offset}",
-          "shadow": "inset {focus.ring.shadow}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "inset {shadow.200}"
         }
       },
       "bodyCell": {
-        "borderColor": "{content.borderColor}",
-        "padding": "{data.padding.400}",
+        "borderColor": "{border.subtle}",
+        "padding": "{dimension.space.400}",
         "sm": {
-          "padding": "{data.padding.200}"
+          "padding": "{dimension.space.200}"
         },
         "lg": {
-          "padding": "{data.padding.500}"
+          "padding": "{dimension.space.500}"
         }
       },
       "footerCell": {
-        "borderColor": "{content.borderColor}",
-        "padding": "{data.padding.400}",
+        "borderColor": "{border.subtle}",
+        "padding": "{dimension.space.400}",
         "sm": {
-          "padding": "{data.padding.200}"
+          "padding": "{dimension.space.200}"
         },
         "lg": {
-          "padding": "{data.padding.500}"
+          "padding": "{dimension.space.500}"
         }
       },
       "columnFooter": {
-        "fontWeight": "{fonts.fontWeight.bold}"
+        "fontWeight": "{typography.heading.xl.fontWeight}"
       },
       "dropPoint": {
-        "color": "{highlight.background}"
+        "color": "{background.selected}"
       },
       "footer": {
-        "borderColor": "{content.borderColor}",
-        "borderWidth": "0 0 {data.width.100} 0",
-        "padding": "{data.padding.400}",
+        "borderColor": "{border.subtle}",
+        "borderWidth": "0 0 {dimension.size.100} 0",
+        "padding": "{dimension.space.400}",
         "sm": {
-          "padding": "{data.padding.200}"
+          "padding": "{dimension.space.200}"
         },
         "lg": {
-          "padding": "{data.padding.500}"
+          "padding": "{dimension.space.500}"
         }
       },
       "columnResizer": {
-        "width": "{data.width.300}"
+        "width": "{dimension.size.200}"
       },
       "resizeIndicator": {
-        "width": "{data.width.100}",
-        "color": "{highlight.background}"
+        "width": "{dimension.size.100}",
+        "color": "{background.selected}"
       },
       "sortIcon": {
-        "color": "{text.color}",
-        "hoverColor": "{text.hoverColor}",
-        "size": "{data.icon.size.100}"
+        "color": "{icon.strong}",
+        "hoverColor": "{icon.strongHover}",
+        "size": "{dimension.size.300}"
       },
       "loadingIcon": {
-        "size": "{data.icon.size.500}"
+        "size": "{dimension.size.500}"
       },
       "rowToggleButton": {
-        "hoverBackground": "{content.hoverBackground}",
-        "selectedHoverBackground": "{content.hoverBackground}",
-        "color": "{text.color}",
-        "hoverColor": "{text.color}",
-        "selectedHoverColor": "{text.color}",
-        "size": "{data.icon.size.500}",
-        "borderRadius": "{content.borderRadius}",
+        "hoverBackground": "{background.surface.hover.section}",
+        "selectedHoverBackground": "{background.surface.hover.section}",
+        "color": "{text.default}",
+        "hoverColor": "{text.default}",
+        "selectedHoverColor": "{text.default}",
+        "size": "{dimension.size.500}",
+        "borderRadius": "{dimension.radius.300}",
         "focusRing": {
-          "width": "{focusRing.width}",
-          "style": "{focusRing.style}",
-          "color": "{focusRing.color}",
-          "offset": "{focusRing.offset}",
-          "shadow": "{focusRing.shadow}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "{shadow.200}"
         }
       },
       "filter": {
-        "inlineGap": "{data.gap.200}",
+        "inlineGap": "{dimension.space.200}",
         "rule": {
-          "borderColor": "{content.borderColor}"
+          "borderColor": "{border.subtle}"
         },
         "constraintList": {
-          "padding": "{list.padding}",
-          "gap": "{list.gap.100}"
+          "padding": "{dimension.space.100}",
+          "gap": "{dimension.space.100}"
         },
         "constraint": {
-          "focusBackground": "{list.option.focusBackground}",
-          "selectedBackground": "{list.option.selectedBackground}",
-          "selectedFocusBackground": "{list.option.selectedFocusBackground}",
-          "color": "{list.option.color}",
-          "focusColor": "{list.option.focusColor}",
-          "selectedColor": "{list.option.selectedColor}",
-          "selectedFocusColor": "{list.option.selectedFocusColor}",
-          "padding": "{list.option.padding}",
-          "borderRadius": "{list.option.borderRadius}",
+          "focusBackground": "{background.surface.hover.section}",
+          "selectedBackground": "{background.selected}",
+          "selectedFocusBackground": "{background.selectedStrong}",
+          "color": "{text.default}",
+          "focusColor": "{text.default}",
+          "selectedColor": "{text.onBold}",
+          "selectedFocusColor": "{text.onBold}",
+          "padding": "{dimension.space.200} {dimension.space.300}",
+          "borderRadius": "{dimension.radius.200}",
           "separator": {
-            "borderColor": "{content.borderColor}"
+            "borderColor": "{border.subtle}"
           }
         },
         "overlaySelect": {
-          "background": "{overlay.select.background}",
-          "color": "{overlay.select.color}",
-          "borderColor": "{overlay.select.borderColor}",
-          "borderRadius": "{overlay.select.borderRadius}",
-          "shadow": "{overlay.select.shadow}"
+          "background": "{background.surface.raised}",
+          "color": "{text.default}",
+          "borderColor": "{border.subtle}",
+          "borderRadius": "{dimension.radius.300}",
+          "shadow": "{shadow.400}"
         },
         "overlayPopover": {
-          "background": "{overlay.popover.background}",
-          "color": "{overlay.popover.color}",
-          "borderColor": "{overlay.select.borderColor}",
-          "borderRadius": "{overlay.select.borderRadius}",
-          "shadow": "{overlay.popover.shadow}",
-          "padding": "{overlay.popover.padding.100}",
-          "gap": "{list.gap.100}"
+          "background": "{background.surface.raised}",
+          "color": "{text.default}",
+          "borderColor": "{border.subtle}",
+          "borderRadius": "{dimension.radius.300}",
+          "shadow": "{shadow.400}",
+          "padding": "{dimension.space.300}",
+          "gap": "{dimension.space.100}"
         }
       },
       "paginatorTop": {
-        "borderColor": "{form.borderColor}",
-        "borderWidth": "0 0 {data.width.100} 0"
+        "borderColor": "{border.default}",
+        "borderWidth": "0 0 {dimension.size.100} 0"
       },
       "paginatorBottom": {
-        "borderWidth": "0 0 {data.width.100} 0",
-        "borderColor": "{content.borderColor}"
+        "borderWidth": "0 0 {dimension.size.100} 0",
+        "borderColor": "{border.subtle}"
+      },
+      "extend": {
+        "text_hoverColor": "{text.hover.default}"
       }
     },
     "dataview": {
       "root": {
-        "borderWidth": "{data.width.100}",
-        "borderRadius": "{data.borderRadius}",
+        "borderWidth": "{dimension.size.100}",
+        "borderRadius": "{dimension.radius.100}",
         "padding": "0rem",
-        "borderColor": "{content.borderColor}"
+        "borderColor": "{border.subtle}"
       },
       "header": {
-        "borderWidth": "0 0 {data.width.100} 0",
-        "padding": "{data.padding.200} {data.padding.300}",
+        "borderWidth": "0 0 {dimension.size.100} 0",
+        "padding": "{dimension.space.200} {dimension.space.300}",
         "borderRadius": "0 0 0 0",
-        "color": "{text.color}"
+        "color": "{text.default}"
       },
       "content": {
-        "background": "{content.background}",
-        "color": "{content.color}",
-        "borderColor": "{content.borderColor}",
+        "background": "{background.surface.raised}",
+        "color": "{text.default}",
+        "borderColor": "{border.subtle}",
         "borderWidth": "0rem",
         "padding": "0rem",
         "borderRadius": "0"
       },
       "footer": {
-        "background": "{surface.100}",
-        "color": "{text.color}",
-        "borderWidth": "{data.width.100} 0 0 0",
-        "padding": "{data.padding.200} {data.padding.300}",
+        "background": "{background.neutral.subtleHover}",
+        "color": "{text.default}",
+        "borderWidth": "{dimension.size.100} 0 0 0",
+        "padding": "{dimension.space.200} {dimension.space.300}",
         "borderRadius": "0 0 0 0"
       },
       "paginatorTop": {
-        "borderWidth": "0 0 {data.width.100} 0"
+        "borderWidth": "0 0 {dimension.size.100} 0"
       },
       "paginatorBottom": {
-        "borderWidth": "{data.width.100} 0 0 0"
+        "borderWidth": "{dimension.size.100} 0 0 0"
       }
     },
     "datepicker": {
       "extend": {
         "extDate": {
-          "selectedHoverBackground": "{surface.800}"
+          "selectedHoverBackground": "{background.surface.inverse}"
         },
         "extToday": {
-          "hoverBackground": "{content.hoverBackground}",
-          "borderColor": "{content.activeBorderColor}"
+          "hoverBackground": "{background.surface.hover.section}",
+          "borderColor": "{border.inverse}"
         },
         "extTitle": {
-          "width": "{form.width.500}"
+          "width": "{dimension.overlayWidth.narrow}"
         },
         "extTimePicker": {
-          "minWidth": "{form.width.400}",
-          "color": "{content.color}"
-        }
+          "minWidth": "{dimension.size.700}",
+          "color": "{text.default}"
+        },
+        "extSelectYear": {
+          "minWidth": "{dimension.size.1000}"
+        },
+        "dimension_size_1000": "{dimension.size.1000}",
+        "fonts_fontFamily_base": "{typography.body.lg.fontFamily}",
+        "fonts_fontFamily_heading": "{typography.heading.lg.fontFamily}",
+        "fonts_fontSize_100": "{typography.label.sm.fontSize}",
+        "fonts_fontSize_300": "{typography.body.md.fontSize}",
+        "fonts_fontWeight_demibold": "{typography.heading.lg.fontWeight}",
+        "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}",
+        "form_borderWidth": "{dimension.size.100}"
       },
       "colorScheme": {
         "light": {
           "dropdown": {
-            "background": "{content.background}",
-            "hoverBackground": "{navigation.item.focusBackground}",
-            "activeBackground": "{navigation.item.activeBackground}",
-            "color": "{navigation.item.color}",
-            "hoverColor": "{navigation.item.focusColor}",
-            "activeColor": "{navigation.item.activeColor}"
+            "background": "{background.surface.raised}",
+            "hoverBackground": "{background.neutral.subtleHover}",
+            "activeBackground": "{background.selected}",
+            "color": "{text.default}",
+            "hoverColor": "{text.default}",
+            "activeColor": "{text.onBold}"
           },
           "today": {
-            "background": "{transparent}",
-            "color": "{text.extend.colorPrimaryStatic}"
+            "background": "{background.transparent}",
+            "color": "{text.staticDark}"
           }
         }
       },
       "panel": {
-        "background": "{content.background}",
-        "borderColor": "{content.borderColor}",
-        "color": "{content.color}",
-        "borderRadius": "{content.borderRadius}",
-        "shadow": "{overlay.popover.shadow}",
+        "background": "{background.surface.raised}",
+        "borderColor": "{border.subtle}",
+        "color": "{text.default}",
+        "borderRadius": "{dimension.radius.300}",
+        "shadow": "{shadow.400}",
         "padding": "0rem"
       },
       "header": {
-        "background": "{content.background}",
-        "borderColor": "{content.borderColor}",
-        "color": "{content.color}",
-        "padding": "{overlay.popover.padding.100}"
+        "background": "{background.surface.raised}",
+        "borderColor": "{border.subtle}",
+        "color": "{text.default}",
+        "padding": "{dimension.space.300}"
       },
       "title": {
-        "gap": "{form.gap.200}",
-        "fontWeight": "{fonts.fontWeight.bold}"
+        "gap": "{dimension.space.200}",
+        "fontWeight": "{typography.heading.xl.fontWeight}"
       },
       "selectMonth": {
-        "hoverBackground": "{content.hoverBackground}",
-        "color": "{content.color}",
-        "hoverColor": "{content.hoverColor}",
-        "borderRadius": "{content.borderRadius}",
-        "padding": "{form.padding.200}"
+        "hoverBackground": "{background.surface.hover.section}",
+        "color": "{text.default}",
+        "hoverColor": "{text.hover.default}",
+        "borderRadius": "{dimension.radius.300}",
+        "padding": "{dimension.space.200}"
       },
       "inputIcon": {
-        "color": "{form.floatLabelColor}"
+        "color": "{icon.subtle}"
       },
       "dropdown": {
-        "width": "{form.width.300}",
-        "borderColor": "{form.borderColor}",
-        "hoverBorderColor": "{form.borderColor}",
-        "activeBorderColor": "{form.borderColor}",
-        "borderRadius": "{form.borderRadius.200}",
+        "width": "{dimension.size.600}",
+        "borderColor": "{border.default}",
+        "hoverBorderColor": "{border.default}",
+        "activeBorderColor": "{border.default}",
+        "borderRadius": "{dimension.radius.300}",
         "focusRing": {
-          "width": "{form.focusRing.width}",
-          "style": "{form.focusRing.style}",
-          "color": "{form.focusRing.color}",
-          "offset": "{form.focusRing.offset}",
-          "shadow": "{focusRing.shadow}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "{shadow.200}"
         },
         "sm": {
           "width": "0rem"
@@ -2671,42 +2323,42 @@
         }
       },
       "group": {
-        "borderColor": "{content.borderColor}",
-        "gap": "{overlay.popover.padding.100}"
+        "borderColor": "{border.subtle}",
+        "gap": "{dimension.space.300}"
       },
       "selectYear": {
-        "hoverBackground": "{content.hoverBackground}",
-        "color": "{content.color}",
-        "hoverColor": "{content.hoverColor}",
-        "borderRadius": "{content.borderRadius}",
-        "padding": "{overlay.select.padding}"
+        "hoverBackground": "{background.surface.hover.section}",
+        "color": "{text.default}",
+        "hoverColor": "{text.hover.default}",
+        "borderRadius": "{dimension.radius.300}",
+        "padding": "{dimension.space.100}"
       },
       "dayView": {
-        "margin": "{overlay.popover.padding.100}"
+        "margin": "{dimension.space.300}"
       },
       "weekDay": {
-        "padding": "{form.padding.100}",
-        "fontWeight": "{fonts.fontWeight.bold}",
-        "color": "{content.color}"
+        "padding": "{dimension.space.100}",
+        "fontWeight": "{typography.heading.xl.fontWeight}",
+        "color": "{text.default}"
       },
       "date": {
-        "hoverBackground": "{content.hoverBackground}",
-        "selectedBackground": "{highlight.background}",
-        "rangeSelectedBackground": "{list.option.focusBackground}",
-        "color": "{content.color}",
-        "hoverColor": "{content.color}",
-        "selectedColor": "{text.extend.colorInverted}",
-        "rangeSelectedColor": "{text.color}",
-        "width": "{form.size.500}",
-        "height": "{form.size.500}",
-        "borderRadius": "{form.borderRadius.100}",
-        "padding": "{form.padding.100}",
+        "hoverBackground": "{background.surface.hover.section}",
+        "selectedBackground": "{background.selected}",
+        "rangeSelectedBackground": "{background.surface.hover.section}",
+        "color": "{text.default}",
+        "hoverColor": "{text.default}",
+        "selectedColor": "{text.onBold}",
+        "rangeSelectedColor": "{text.default}",
+        "width": "{dimension.size.500}",
+        "height": "{dimension.size.500}",
+        "borderRadius": "{dimension.radius.200}",
+        "padding": "{dimension.space.100}",
         "focusRing": {
-          "width": "{form.focusRing.width}",
-          "style": "{form.focusRing.style}",
-          "color": "{form.focusRing.color}",
-          "offset": "{form.focusRing.offset}",
-          "shadow": "{focusRing.shadow}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "{shadow.200}"
         }
       },
       "monthView": {
@@ -2724,406 +2376,425 @@
         "borderRadius": "0rem"
       },
       "buttonbar": {
-        "padding": "{overlay.popover.padding.100}",
-        "borderColor": "{content.borderColor}"
+        "padding": "{dimension.space.300}",
+        "borderColor": "{border.subtle}"
       },
       "timePicker": {
-        "padding": "{form.padding.300}",
-        "borderColor": "{content.borderColor}",
-        "gap": "{form.gap.200}",
-        "buttonGap": "{form.gap.100}"
+        "padding": "{dimension.space.300}",
+        "borderColor": "{border.subtle}",
+        "gap": "{dimension.space.200}",
+        "buttonGap": "{dimension.space.100}"
       },
       "root": {
-        "transitionDuration": "{form.transitionDuration}"
+        "transitionDuration": "{dimension.duration.200}"
       }
     },
     "dialog": {
       "extend": {
-        "borderWidth": "{overlay.borderWidth}",
-        "backdrop": "{overlay.modal.backdrop}"
+        "borderWidth": "{dimension.borderWidth.100}",
+        "backdrop": "{background.scrim.modal}",
+        "dimension_borderWidth_100": "{dimension.borderWidth.100}",
+        "dimension_overlayWidth_base": "{dimension.overlayWidth.base}",
+        "dimension_overlayWidth_lg": "{dimension.overlayWidth.lg}",
+        "dimension_overlayWidth_sm": "{dimension.overlayWidth.sm}",
+        "dimension_overlayWidth_xlg": "{dimension.overlayWidth.xlg}",
+        "fonts_fontFamily_base": "{typography.body.lg.fontFamily}",
+        "fonts_fontFamily_heading": "{typography.heading.lg.fontFamily}",
+        "fonts_fontSize_300": "{typography.body.md.fontSize}",
+        "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}",
+        "fonts_lineHeight_500": "{typography.body.md.lineHeight}",
+        "fonts_lineHeight_550": "{typography.body.lg.lineHeight}"
       },
       "root": {
-        "background": "{overlay.modal.background}",
-        "borderColor": "{overlay.modal.borderColor}",
-        "color": "{overlay.modal.color}",
-        "borderRadius": "{overlay.modal.borderRadius}",
-        "shadow": "{overlay.popover.shadow}"
+        "background": "{background.surface.raised}",
+        "borderColor": "{border.subtle}",
+        "color": "{text.default}",
+        "borderRadius": "{dimension.radius.500}",
+        "shadow": "{shadow.400}"
       },
       "header": {
-        "padding": "{overlay.modal.padding.300} {overlay.modal.padding.300} 1rem {overlay.modal.padding.300}",
-        "gap": "{overlay.gap.200}"
+        "padding": "{dimension.space.600} {dimension.space.600} 1rem {dimension.space.600}",
+        "gap": "{dimension.space.200}"
       },
       "title": {
-        "fontSize": "{fonts.fontSize.500}",
-        "fontWeight": "{fonts.fontWeight.demibold}"
+        "fontSize": "{typography.heading.sm.fontSize}",
+        "fontWeight": "{typography.heading.lg.fontWeight}"
       },
       "content": {
-        "padding": "{content.padding.400}"
+        "padding": "{dimension.space.600}"
       },
       "footer": {
-        "padding": "0 {overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.300}",
-        "gap": "{content.gap.200}"
+        "padding": "0 {dimension.space.600} {dimension.space.600} {dimension.space.600}",
+        "gap": "{dimension.space.200}"
       }
     },
     "divider": {
       "colorScheme": {
         "light": {
           "content": {
-            "background": "{content.background}",
-            "color": "{text.mutedColor}"
+            "background": "{background.surface.raised}",
+            "color": "{text.muted}"
           },
-          "borderColor": "{content.borderColor}"
+          "borderColor": "{border.subtle}"
         }
       },
       "extend": {
         "content": {
-          "gap": "{content.gap.200}"
+          "gap": "{dimension.space.200}"
         },
-        "iconSize": "{media.icon.size.100}"
+        "iconSize": "{dimension.size.300}",
+        "fonts_fontFamily_heading": "{typography.heading.lg.fontFamily}",
+        "fonts_fontSize_200": "{typography.body.sm.fontSize}",
+        "fonts_fontWeight_demibold": "{typography.heading.lg.fontWeight}"
       },
       "horizontal": {
-        "margin": "{content.padding.300} 0",
-        "padding": "0 {content.padding.300}",
+        "margin": "{dimension.space.400} 0",
+        "padding": "0 {dimension.space.400}",
         "content": {
-          "padding": "0 {content.padding.200}"
+          "padding": "0 {dimension.space.200}"
         }
       },
       "vertical": {
-        "margin": "0 {content.padding.300}",
-        "padding": "{content.padding.300} 0",
+        "margin": "0 {dimension.space.400}",
+        "padding": "{dimension.space.400} 0",
         "content": {
-          "padding": "{content.padding.200} 0"
+          "padding": "{dimension.space.200} 0"
         }
       }
     },
     "drawer": {
       "extend": {
-        "borderRadius": "{overlay.popover.borderRadius}",
-        "borderWidth": "{overlay.borderWidth}",
-        "width": "{overlay.width}",
+        "borderRadius": "{dimension.radius.200}",
+        "borderWidth": "{dimension.borderWidth.100}",
+        "width": "{dimension.overlayWidth.base}",
         "extHeader": {
-          "gap": "{overlay.gap.200}",
+          "gap": "{dimension.space.200}",
           "borderColor": "{drawer.root.borderColor}"
         },
-        "padding": "{overlay.drawer.padding}",
+        "padding": "{dimension.space.200}",
         "scale": "0.125rem",
-        "backdrop": "{overlay.modal.backdrop}"
+        "backdrop": "{background.scrim.modal}",
+        "dimension_space_400": "{dimension.space.400}",
+        "overlay_modal_padding_300": "{dimension.space.600}"
       },
       "root": {
-        "background": "{overlay.modal.background}",
-        "borderColor": "{overlay.modal.borderColor}",
-        "color": "{overlay.modal.color}",
-        "shadow": "{overlay.modal.shadow}",
-        "width": "{overlay.width}"
+        "background": "{background.surface.raised}",
+        "borderColor": "{border.subtle}",
+        "color": "{text.default}",
+        "shadow": "{shadow.200}",
+        "width": "{dimension.overlayWidth.base}"
       },
       "sm": {
-        "width": "{overlay.sm.width}"
+        "width": "{dimension.overlayWidth.sm}"
       },
       "lg": {
-        "width": "{overlay.lg.width}"
+        "width": "{dimension.overlayWidth.lg}"
       },
       "xlg": {
-        "width": "{overlay.xlg.width}"
+        "width": "{dimension.overlayWidth.xlg}"
       },
       "header": {
-        "padding": "{overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.200} {overlay.modal.padding.300} "
+        "padding": "{dimension.space.600} {dimension.space.600} {dimension.space.500} {dimension.space.600} "
       },
       "title": {
-        "fontSize": "{fonts.fontSize.500}",
-        "fontWeight": "{fonts.fontWeight.demibold}"
+        "fontSize": "{typography.heading.sm.fontSize}",
+        "fontWeight": "{typography.heading.lg.fontWeight}"
       },
       "content": {
-        "padding": "{overlay.modal.padding.300}"
+        "padding": "{dimension.space.600}"
       },
       "footer": {
-        "padding": "0 {overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.300} "
+        "padding": "0 {dimension.space.600} {dimension.space.600} {dimension.space.600} "
       }
     },
     "fileupload": {
       "extend": {
         "extDragNdrop": {
-          "background": "{surface.0}",
-          "borderRadius": "{form.borderRadius.200}",
-          "iconSize": "{form.size.500}",
-          "padding": "{form.padding.400}",
+          "background": "{background.surface.canvas}",
+          "borderRadius": "{dimension.radius.300}",
+          "iconSize": "{dimension.size.500}",
+          "padding": "{dimension.space.400}",
           "info": {
-            "gap": "{form.gap.100}"
+            "gap": "{dimension.space.100}"
           }
         },
         "extFile": {
-          "iconSize": "{form.size.350}"
+          "iconSize": "{dimension.size.350}"
         },
         "extContent": {
-          "borderRadius": "{content.borderRadius}",
-          "highlightBorderDefault": "{form.borderColor}"
+          "borderRadius": "{dimension.radius.300}",
+          "highlightBorderDefault": "{text.disabled}"
         }
       },
       "colorScheme": {
         "light": {
           "header": {
-            "background": "{surface.0}",
-            "color": "{text.color}"
+            "background": "{background.surface.canvas}",
+            "color": "{text.default}"
           }
         }
       },
       "root": {
-        "background": "{content.background}",
-        "borderColor": "{content.borderColor}",
-        "color": "{content.color}",
-        "borderRadius": "{content.borderRadius}",
-        "transitionDuration": "{form.transitionDuration}"
+        "background": "{background.surface.raised}",
+        "borderColor": "{border.subtle}",
+        "color": "{text.default}",
+        "borderRadius": "{dimension.radius.300}",
+        "transitionDuration": "{dimension.duration.200}"
       },
       "header": {
-        "borderColor": "{content.borderColor}",
+        "borderColor": "{border.subtle}",
         "borderWidth": "0rem",
         "padding": "0rem",
         "borderRadius": "0rem",
-        "gap": "{content.gap.200}"
+        "gap": "{dimension.space.200}"
       },
       "content": {
-        "highlightBorderColor": "{surface.900}",
+        "highlightBorderColor": "{border.strong}",
         "padding": "0rem",
-        "gap": "{content.gap.200}"
+        "gap": "{dimension.space.200}"
       },
       "file": {
-        "padding": "{content.padding.200}",
-        "gap": "{content.gap.200}",
-        "borderColor": "{form.borderColor}",
+        "padding": "{dimension.space.200}",
+        "gap": "{dimension.space.200}",
+        "borderColor": "{border.default}",
         "info": {
-          "gap": "{content.gap.100}"
+          "gap": "{dimension.space.100}"
         }
       },
       "fileList": {
-        "gap": "{content.gap.200}"
+        "gap": "{dimension.space.200}"
       },
       "progressbar": {
-        "height": "{feedback.height.100}"
+        "height": "{dimension.size.200}"
       },
       "basic": {
-        "gap": "{content.gap.200}"
+        "gap": "{dimension.space.200}"
       }
     },
     "floatlabel": {
       "extend": {
-        "height": "{form.size.800}",
-        "iconSize": "{form.icon.400}"
+        "height": "{dimension.size.800}",
+        "iconSize": "{dimension.size.350}"
       },
       "root": {
-        "color": "{form.floatLabelColor}",
-        "focusColor": "{form.floatLabelFocusColor}",
-        "activeColor": "{form.floatLabelActiveColor}",
-        "invalidColor": "{form.floatLabelInvalidColor}",
-        "transitionDuration": "{form.transitionDuration}",
-        "positionX": "{form.padding.300}",
-        "positionY": "{form.padding.300}",
-        "fontWeight": "{fonts.fontWeight.regular}",
+        "color": "{text.muted}",
+        "focusColor": "{text.muted}",
+        "activeColor": "{text.muted}",
+        "invalidColor": "{text.danger}",
+        "transitionDuration": "{dimension.duration.200}",
+        "positionX": "{dimension.space.300}",
+        "positionY": "{dimension.space.300}",
+        "fontWeight": "{typography.body.lg.fontWeight}",
         "active": {
-          "fontSize": "{fonts.fontSize.100}",
-          "fontWeight": "{fonts.fontWeight.regular}"
+          "fontSize": "{typography.label.sm.fontSize}",
+          "fontWeight": "{typography.body.lg.fontWeight}"
         }
       },
       "over": {
         "active": {
-          "top": "{form.padding.400}"
+          "top": "{dimension.space.400}"
         }
       },
       "in": {
         "input": {
-          "paddingTop": "{form.padding.700}",
-          "paddingBottom": "{form.padding.300}"
+          "paddingTop": "{dimension.space.700}",
+          "paddingBottom": "{dimension.space.300}"
         },
         "active": {
-          "top": "{form.padding.300}"
+          "top": "{dimension.space.300}"
         }
       },
       "on": {
         "borderRadius": "0rem",
         "active": {
-          "padding": "0 {form.padding.100}",
-          "background": "{form.background}"
+          "padding": "0 {dimension.space.100}",
+          "background": "{background.surface.field}"
         }
       }
     },
     "galleria": {
       "extend": {
-        "backdrop": "{overlay.modal.backdrop}"
+        "backdrop": "{background.scrim.modal}",
+        "dimension_space_200": "{dimension.space.200}"
       },
       "colorScheme": {
         "light": {
           "thumbnailContent": {
-            "background": "{surface.100}"
+            "background": "{background.neutral.subtleHover}"
           },
           "thumbnailNavButton": {
-            "hoverBackground": "{colors.alpha.white.200}",
-            "color": "{text.color}",
-            "hoverColor": "{text.hoverColor}"
+            "hoverBackground": "{background.translucent.light.default}",
+            "color": "{text.default}",
+            "hoverColor": "{text.hover.default}"
           },
           "indicatorButton": {
-            "background": "{surface.300}",
-            "hoverBackground": "{surface.400}"
+            "background": "{text.disabled}",
+            "hoverBackground": "{text.hover.subtle}"
           }
         }
       },
       "root": {
-        "borderWidth": "{content.borderWidth}",
-        "borderColor": "{content.borderColor}",
-        "borderRadius": "{content.borderRadius}",
-        "transitionDuration": "{media.transitionDuration}"
+        "borderWidth": "{dimension.size.100}",
+        "borderColor": "{border.subtle}",
+        "borderRadius": "{dimension.radius.300}",
+        "transitionDuration": "{dimension.duration.200}"
       },
       "navButton": {
-        "background": "{transparent}",
-        "hoverBackground": "{colors.alpha.white.200}",
-        "color": "{text.extend.colorInverted}",
-        "hoverColor": "{text.extend.colorInverted}",
-        "size": "{media.size.600}",
-        "gutter": "{media.gap.200}",
+        "background": "{background.transparent}",
+        "hoverBackground": "{background.translucent.light.default}",
+        "color": "{text.onBold}",
+        "hoverColor": "{text.onBold}",
+        "size": "{dimension.size.800}",
+        "gutter": "{dimension.space.200}",
         "prev": {
-          "borderRadius": "{navigation.item.borderRadius}"
+          "borderRadius": "{dimension.radius.200}"
         },
         "next": {
-          "borderRadius": "{navigation.item.borderRadius}"
+          "borderRadius": "{dimension.radius.200}"
         },
         "focusRing": {
-          "width": "{focusRing.width}",
-          "style": "{focusRing.style}",
-          "color": "{focusRing.color}",
-          "offset": "{focusRing.offset}",
-          "shadow": "{focusRing.shadow}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "{shadow.200}"
         }
       },
       "navIcon": {
-        "size": "{media.icon.size.300}"
+        "size": "{dimension.size.500}"
       },
       "thumbnailsContent": {
-        "padding": "{media.padding.100}"
+        "padding": "{dimension.space.100}"
       },
       "thumbnailNavButton": {
-        "size": "{media.size.300}",
-        "borderRadius": "{content.borderRadius}",
-        "gutter": "{media.gap.200}",
+        "size": "{dimension.size.500}",
+        "borderRadius": "{dimension.radius.300}",
+        "gutter": "{dimension.space.200}",
         "focusRing": {
-          "width": "{focusRing.width}",
-          "style": "{focusRing.style}",
-          "color": "{focusRing.color}",
-          "offset": "{focusRing.offset}",
-          "shadow": "{focusRing.shadow}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "{shadow.200}"
         }
       },
       "thumbnailNavButtonIcon": {
-        "size": "{media.icon.size.100}"
+        "size": "{dimension.size.300}"
       },
       "caption": {
-        "background": "{colors.alpha.white.500}",
-        "color": "{text.color}",
-        "padding": "{media.gap.200}"
+        "background": "{background.translucent.light.strong}",
+        "color": "{text.default}",
+        "padding": "{dimension.space.200}"
       },
       "indicatorList": {
-        "gap": "{media.gap.200}",
-        "padding": "{media.padding.400}"
+        "gap": "{dimension.space.200}",
+        "padding": "{dimension.space.400}"
       },
       "indicatorButton": {
-        "width": "{media.size.200}",
-        "height": "{media.size.200}",
-        "activeBackground": "{surface.900}",
-        "borderRadius": "{content.borderRadius}",
+        "width": "{dimension.size.200}",
+        "height": "{dimension.size.200}",
+        "activeBackground": "{background.selected}",
+        "borderRadius": "{dimension.radius.300}",
         "focusRing": {
-          "width": "{focusRing.width}",
-          "style": "{focusRing.style}",
-          "color": "{focusRing.color}",
-          "offset": "{focusRing.offset}",
-          "shadow": "{focusRing.shadow}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "{shadow.200}"
         }
       },
       "insetIndicatorList": {
-        "background": "{colors.alpha.black.500}"
+        "background": "{background.translucent.dark.default}"
       },
       "insetIndicatorButton": {
-        "background": "{colors.alpha.white.100}",
-        "hoverBackground": "{colors.alpha.white.200}",
-        "activeBackground": "{colors.alpha.white.500}"
+        "background": "{background.translucent.light.subtle}",
+        "hoverBackground": "{background.translucent.light.default}",
+        "activeBackground": "{background.translucent.light.strong}"
       },
       "closeButton": {
-        "size": "{media.size.600}",
-        "gutter": "{media.gap.200}",
-        "background": "{colors.alpha.white.100}",
-        "hoverBackground": "{colors.alpha.white.200}",
-        "color": "{text.extend.colorInverted}",
-        "hoverColor": "{text.extend.colorInverted}",
-        "borderRadius": "{controls.borderRadius.200}",
+        "size": "{dimension.size.800}",
+        "gutter": "{dimension.space.200}",
+        "background": "{background.translucent.light.subtle}",
+        "hoverBackground": "{background.translucent.light.default}",
+        "color": "{text.onBold}",
+        "hoverColor": "{text.onBold}",
+        "borderRadius": "{dimension.radius.400}",
         "focusRing": {
-          "width": "{focusRing.width}",
-          "style": "{focusRing.style}",
-          "color": "{focusRing.color}",
-          "offset": "{focusRing.offset}",
-          "shadow": "{focusRing.shadow}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "{shadow.200}"
         }
       },
       "closeButtonIcon": {
-        "size": "{media.icon.size.300}"
+        "size": "{dimension.size.500}"
       }
     },
     "inputgroup": {
       "extend": {
-        "borderWidth": "{form.borderWidth}",
-        "iconSize": "{form.icon.300}"
+        "borderWidth": "{dimension.borderWidth.100}",
+        "iconSize": "{dimension.size.300}"
       },
       "colorScheme": {
         "light": {
           "addon": {
-            "background": "{form.background}",
-            "borderColor": "{form.borderColor}",
-            "color": "{text.mutedColor}"
+            "background": "{background.surface.field}",
+            "borderColor": "{border.default}",
+            "color": "{text.muted}"
           }
         }
       },
       "addon": {
-        "borderRadius": "{form.borderRadius.200}",
-        "padding": "{form.padding.300}",
-        "minWidth": "{form.width.300}"
+        "borderRadius": "{dimension.radius.300}",
+        "padding": "{dimension.space.300}",
+        "minWidth": "{dimension.size.600}"
       }
     },
     "inputnumber": {
       "extend": {
-        "borderWidth": "{form.borderWidth}",
+        "borderWidth": "{dimension.borderWidth.100}",
         "extButton": {
-          "height": "{form.size.600}",
-          "iconSize": "{form.icon.300}"
-        }
+          "height": "{dimension.size.600}",
+          "iconSize": "{dimension.size.300}"
+        },
+        "fonts_fontFamily_base": "{typography.body.lg.fontFamily}"
       },
       "colorScheme": {
         "light": {
           "button": {
-            "background": "{content.background}",
-            "hoverBackground": "{content.hoverBackground}",
-            "activeBackground": "{transparent}",
-            "borderColor": "{form.borderColor}",
-            "hoverBorderColor": "{form.borderColor}",
-            "activeBorderColor": "{form.borderColor}",
-            "color": "{text.color}",
-            "hoverColor": "{text.hoverColor}",
-            "activeColor": "{text.color}"
+            "background": "{background.surface.raised}",
+            "hoverBackground": "{background.surface.hover.section}",
+            "activeBackground": "{background.transparent}",
+            "borderColor": "{border.default}",
+            "hoverBorderColor": "{border.default}",
+            "activeBorderColor": "{border.default}",
+            "color": "{text.default}",
+            "hoverColor": "{text.hover.default}",
+            "activeColor": "{text.default}"
           }
         }
       },
       "transitionDuration": {
-        "transitionDuration": "{form.transitionDuration}"
+        "transitionDuration": "{dimension.duration.200}"
       },
       "button": {
-        "width": "{form.size.600}",
-        "borderRadius": "{form.borderRadius.200}",
-        "verticalPadding": "{form.padding.300}"
+        "width": "{dimension.size.600}",
+        "borderRadius": "{dimension.radius.300}",
+        "verticalPadding": "{dimension.space.300}"
       }
     },
     "inputotp": {
       "extend": {
-        "height": "{form.size.600}",
-        "borderWidth": "{form.borderWidth}"
+        "height": "{dimension.size.600}",
+        "borderWidth": "{dimension.borderWidth.100}",
+        "focusRing_invalid": "{focusRing.invalid}"
       },
       "root": {
-        "gap": "{form.gap.200}"
+        "gap": "{dimension.space.200}"
       },
       "input": {
-        "width": "{form.width.400}"
+        "width": "{dimension.size.700}"
       },
       "sm": {
         "width": "0rem"
@@ -3134,49 +2805,52 @@
     },
     "inputtext": {
       "extend": {
-        "readonlyBackground": "{form.readonlyBackground}",
-        "iconSize": "{form.icon.300}",
-        "borderWidth": "{form.borderWidth}",
+        "readonlyBackground": "{background.neutral.subtleHover}",
+        "iconSize": "{dimension.size.300}",
+        "borderWidth": "{dimension.borderWidth.100}",
         "extXlg": {
-          "fontSize": "{form.xlg.fontSize}",
-          "paddingX": "{form.padding.300}",
-          "paddingY": "{form.padding.600}"
-        }
+          "fontSize": "{typography.body.md.fontSize}",
+          "paddingX": "{dimension.space.300}",
+          "paddingY": "{dimension.space.600}"
+        },
+        "focusRing_invalid": "{focusRing.invalid}",
+        "fonts_fontFamily_base": "{typography.body.lg.fontFamily}",
+        "fonts_lineHeight_250": "{typography.caption.lineHeight}"
       },
       "root": {
-        "background": "{form.background}",
-        "disabledBackground": "{form.disabledBackground}",
-        "filledBackground": "{form.filledBackground}",
-        "filledHoverBackground": "{form.filledHoverBackground}",
-        "filledFocusBackground": "{form.filledFocusBackground}",
-        "borderColor": "{form.borderColor}",
-        "hoverBorderColor": "{form.hoverBorderSecondaryColor}",
-        "focusBorderColor": "{form.focusBorderSecondaryColor}",
-        "invalidBorderColor": "{form.invalidBorderColor}",
-        "color": "{text.color}",
-        "disabledColor": "{form.disabledColor}",
-        "placeholderColor": "{form.placeholderColor}",
-        "invalidPlaceholderColor": "{form.invalidPlaceholderColor}",
+        "background": "{background.surface.field}",
+        "disabledBackground": "{background.disabled}",
+        "filledBackground": "{background.surface.field}",
+        "filledHoverBackground": "{background.surface.field}",
+        "filledFocusBackground": "{background.surface.field}",
+        "borderColor": "{border.default}",
+        "hoverBorderColor": "{border.brand}",
+        "focusBorderColor": "{border.brand}",
+        "invalidBorderColor": "{border.danger}",
+        "color": "{text.default}",
+        "disabledColor": "{text.muted}",
+        "placeholderColor": "{text.muted}",
+        "invalidPlaceholderColor": "{text.danger}",
         "shadow": "0",
-        "paddingX": "{form.padding.300}",
-        "paddingY": "{form.padding.300}",
-        "borderRadius": "{form.borderRadius.200}",
-        "transitionDuration": "{form.transitionDuration}",
+        "paddingX": "{dimension.space.300}",
+        "paddingY": "{dimension.space.300}",
+        "borderRadius": "{dimension.radius.300}",
+        "transitionDuration": "{dimension.duration.200}",
         "sm": {
-          "fontSize": "{fonts.fontSize.300}",
-          "paddingX": "{form.padding.300}",
-          "paddingY": "{form.padding.200}"
+          "fontSize": "{typography.body.md.fontSize}",
+          "paddingX": "{dimension.space.300}",
+          "paddingY": "{dimension.space.200}"
         },
         "lg": {
-          "fontSize": "{fonts.fontSize.300}",
-          "paddingX": "{form.padding.300}",
-          "paddingY": "{form.padding.400}"
+          "fontSize": "{typography.body.md.fontSize}",
+          "paddingX": "{dimension.space.300}",
+          "paddingY": "{dimension.space.400}"
         },
         "focusRing": {
-          "width": "{form.focusRing.width}",
-          "style": "{form.focusRing.style}",
-          "color": "{form.focusRing.color}",
-          "offset": "{form.focusRing.offset}",
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
           "shadow": "0"
         }
       }
@@ -3185,381 +2859,400 @@
       "extend": {
         "extOption": {
           "label": {
-            "gap": "{list.gap.100}"
+            "gap": "{dimension.space.100}"
           },
           "caption": {
-            "color": "{text.mutedColor}",
-            "stripedColor": "{text.mutedColor}"
+            "color": "{text.muted}",
+            "stripedColor": "{text.muted}"
           },
-          "gap": "{list.gap.200}"
-        }
+          "gap": "{dimension.space.200}"
+        },
+        "fonts_fontFamily_heading": "{typography.heading.lg.fontFamily}",
+        "fonts_fontSize_200": "{typography.body.sm.fontSize}"
       },
       "colorScheme": {
         "light": {
           "option": {
-            "stripedBackground": "{surface.50}"
+            "stripedBackground": "{background.neutral.subtle}"
           }
         }
       },
       "root": {
-        "background": "{form.background}",
-        "disabledBackground": "{form.disabledBackground}",
-        "borderColor": "{form.borderColor}",
-        "invalidBorderColor": "{form.invalidBorderColor}",
-        "color": "{form.color}",
-        "disabledColor": "{form.disabledColor}",
+        "background": "{background.surface.field}",
+        "disabledBackground": "{background.disabled}",
+        "borderColor": "{border.default}",
+        "invalidBorderColor": "{border.danger}",
+        "color": "{text.defaultHover}",
+        "disabledColor": "{text.muted}",
         "shadow": "0",
-        "borderRadius": "{form.borderRadius.200}",
-        "transitionDuration": "{form.transitionDuration}"
+        "borderRadius": "{dimension.radius.300}",
+        "transitionDuration": "{dimension.duration.200}"
       },
       "list": {
-        "padding": "{list.padding}",
-        "gap": "{list.gap.100}",
+        "padding": "{dimension.space.100}",
+        "gap": "{dimension.space.100}",
         "header": {
-          "padding": "{list.header.padding}"
+          "padding": "{dimension.space.400} {dimension.space.400} 0 {dimension.space.400}"
         }
       },
       "option": {
-        "focusBackground": "{list.option.focusBackground}",
-        "selectedBackground": "{list.option.selectedBackground}",
-        "selectedFocusBackground": "{list.option.selectedFocusBackground}",
-        "color": "{list.option.color}",
-        "focusColor": "{list.option.focusColor}",
-        "selectedColor": "{list.option.selectedColor}",
-        "selectedFocusColor": "{list.option.selectedFocusColor}",
-        "padding": "{list.option.padding}",
-        "borderRadius": "{list.option.borderRadius}"
+        "focusBackground": "{background.surface.hover.section}",
+        "selectedBackground": "{background.selected}",
+        "selectedFocusBackground": "{background.selectedStrong}",
+        "color": "{text.default}",
+        "focusColor": "{text.default}",
+        "selectedColor": "{text.onBold}",
+        "selectedFocusColor": "{text.onBold}",
+        "padding": "{dimension.space.200} {dimension.space.300}",
+        "borderRadius": "{dimension.radius.200}"
       },
       "optionGroup": {
-        "background": "{list.optionGroup.background}",
-        "color": "{list.optionGroup.color}",
-        "fontWeight": "{fonts.fontWeight.regular}",
-        "padding": "{list.option.padding}"
+        "background": "{background.surface.raised}",
+        "color": "{text.muted}",
+        "fontWeight": "{typography.body.lg.fontWeight}",
+        "padding": "{dimension.space.200} {dimension.space.300}"
       },
       "checkmark": {
-        "color": "{list.option.color}",
-        "gutterStart": "-{list.gap.200}",
-        "gutterEnd": "{list.gap.200}"
+        "color": "{text.default}",
+        "gutterStart": "-{dimension.space.200}",
+        "gutterEnd": "{dimension.space.200}"
       },
       "emptyMessage": {
-        "padding": "{list.option.padding}"
+        "padding": "{dimension.space.200} {dimension.space.300}"
       }
     },
     "megamenu": {
       "extend": {
         "extItem": {
           "caption": {
-            "color": "{text.mutedColor}",
-            "gap": "{content.gap.100}"
+            "color": "{text.muted}",
+            "gap": "{dimension.space.100}"
           }
         },
-        "iconSize": "{navigation.submenuIcon.size}"
+        "iconSize": "{typography.heading.sm.fontSize}",
+        "fonts_fontSize_200": "{typography.body.sm.fontSize}",
+        "fonts_fontSize_300": "{typography.body.md.fontSize}",
+        "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}"
       },
       "colorScheme": {
         "light": {
           "root": {
-            "background": "{transparent}"
+            "background": "{background.transparent}"
           }
         }
       },
       "root": {
-        "borderColor": "{transparent}",
-        "borderRadius": "{content.borderRadius}",
-        "color": "{content.color}",
-        "gap": "{content.gap.100}",
-        "transitionDuration": "{form.transitionDuration}",
+        "borderColor": "{border.transparent}",
+        "borderRadius": "{dimension.radius.300}",
+        "color": "{text.default}",
+        "gap": "{dimension.space.100}",
+        "transitionDuration": "{dimension.duration.200}",
         "verticalOrientation": {
-          "padding": "{navigation.list.padding.100}",
-          "gap": "{navigation.list.gap}"
+          "padding": "{dimension.space.100}",
+          "gap": "{dimension.space.100}"
         },
         "horizontalOrientation": {
-          "padding": "{navigation.list.padding.100}",
-          "gap": "{navigation.list.gap}"
+          "padding": "{dimension.space.100}",
+          "gap": "{dimension.space.100}"
         }
       },
       "baseItem": {
-        "borderRadius": "{content.borderRadius}",
-        "padding": "{navigation.item.padding}"
+        "borderRadius": "{dimension.radius.300}",
+        "padding": "{dimension.space.200} {dimension.space.300}"
       },
       "item": {
-        "focusBackground": "{navigation.item.focusBackground}",
-        "activeBackground": "{navigation.item.activeBackground}",
-        "color": "{navigation.item.color}",
-        "focusColor": "{navigation.item.focusColor}",
-        "activeColor": "{navigation.item.activeColor}",
-        "padding": "{navigation.item.padding}",
-        "borderRadius": "{navigation.item.borderRadius}",
-        "gap": "{navigation.item.gap}",
+        "focusBackground": "{background.neutral.subtleHover}",
+        "activeBackground": "{background.selected}",
+        "color": "{text.default}",
+        "focusColor": "{text.default}",
+        "activeColor": "{text.onBold}",
+        "padding": "{dimension.space.200} {dimension.space.300}",
+        "borderRadius": "{dimension.radius.200}",
+        "gap": "{dimension.space.200}",
         "icon": {
-          "color": "{navigation.item.icon.color}",
-          "focusColor": "{navigation.item.icon.focusColor}",
-          "activeColor": "{navigation.item.icon.activeColor}"
+          "color": "{icon.strong}",
+          "focusColor": "{icon.strong}",
+          "activeColor": "{icon.onBold}"
         }
       },
       "overlay": {
-        "padding": "{content.padding.100}",
-        "background": "{content.background}",
-        "borderColor": "{content.borderColor}",
-        "borderRadius": "{content.borderRadius}",
-        "color": "{content.color}",
-        "shadow": "{navigation.shadow}",
+        "padding": "{dimension.space.100}",
+        "background": "{background.surface.raised}",
+        "borderColor": "{border.subtle}",
+        "borderRadius": "{dimension.radius.300}",
+        "color": "{text.default}",
+        "shadow": "{shadow.400}",
         "gap": "0rem"
       },
       "submenu": {
-        "padding": "{navigation.list.padding.100}",
-        "gap": "{navigation.list.gap}"
+        "padding": "{dimension.space.100}",
+        "gap": "{dimension.space.100}"
       },
       "submenuLabel": {
-        "fontWeight": "{navigation.submenuLabel.fontWeight}",
-        "padding": "{navigation.submenuLabel.padding}",
-        "background": "{navigation.submenuLabel.background}",
-        "color": "{navigation.submenuLabel.color}"
+        "fontWeight": "{typography.body.lg.fontWeight}",
+        "padding": "{dimension.space.200} {dimension.space.300}",
+        "background": "{background.transparent}",
+        "color": "{text.muted}"
       },
       "submenuIcon": {
-        "size": "{navigation.submenuIcon.size}",
-        "color": "{navigation.submenuIcon.color}",
-        "focusColor": "{navigation.submenuIcon.focusColor}",
-        "activeColor": "{navigation.submenuIcon.activeColor}"
+        "size": "{typography.heading.sm.fontSize}",
+        "color": "{icon.strongMuted}",
+        "focusColor": "{icon.strongMuted}",
+        "activeColor": "{icon.onBold}"
       },
       "separator": {
-        "borderColor": "{content.borderColor}"
+        "borderColor": "{border.subtle}"
       },
       "mobileButton": {
-        "borderRadius": "{navigation.item.borderRadius}",
-        "size": "{controls.iconOnly.600}",
-        "color": "{text.color}",
-        "hoverColor": "{text.hoverColor}",
-        "hoverBackground": "{content.hoverBackground}",
+        "borderRadius": "{dimension.radius.200}",
+        "size": "{dimension.size.500}",
+        "color": "{text.default}",
+        "hoverColor": "{text.hover.default}",
+        "hoverBackground": "{background.surface.hover.section}",
         "focusRing": {
-          "width": "{focusRing.width}",
-          "style": "{focusRing.style}",
-          "color": "{focusRing.color}",
-          "offset": "{focusRing.offset}",
-          "shadow": "{focusRing.shadow}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "{shadow.200}"
         }
       }
     },
     "menu": {
       "extend": {
         "paddingX": "0.25rem",
-        "iconSize": "{navigation.submenuIcon.size}",
+        "iconSize": "{typography.heading.sm.fontSize}",
         "paddingY": "0.25rem",
         "extItem": {
           "caption": {
-            "gap": "{content.gap.100}"
+            "gap": "{dimension.space.100}"
           },
-          "activeBackground": "{navigation.item.activeBackground}",
-          "activeColor": "{navigation.item.activeColor}"
-        }
+          "activeBackground": "{background.selected}",
+          "activeColor": "{text.onBold}"
+        },
+        "fonts_fontFamily_base": "{typography.body.lg.fontFamily}",
+        "fonts_fontFamily_heading": "{typography.heading.lg.fontFamily}",
+        "fonts_fontSize_200": "{typography.body.sm.fontSize}",
+        "fonts_fontSize_300": "{typography.body.md.fontSize}",
+        "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}",
+        "fonts_lineHeight_400": "{typography.body.sm.lineHeight}"
       },
       "colorScheme": {
         "light": {
           "extend": {
             "extItem": {
               "caption": {
-                "color": "{text.mutedColor}"
+                "color": "{text.muted}"
               },
               "icon": {
-                "activeColor": "{navigation.item.icon.activeColor}"
+                "activeColor": "{icon.onBold}"
               }
             }
           },
           "root": {
-            "background": "{content.background}",
-            "borderColor": "{content.borderColor}",
-            "color": "{content.color}"
+            "background": "{background.surface.raised}",
+            "borderColor": "{border.subtle}",
+            "color": "{text.default}"
           },
           "item": {
-            "focusBackground": "{navigation.item.focusBackground}",
-            "color": "{navigation.item.color}",
-            "focusColor": "{navigation.item.focusColor}",
+            "focusBackground": "{background.neutral.subtleHover}",
+            "color": "{text.default}",
+            "focusColor": "{text.default}",
             "icon": {
-              "color": "{navigation.item.icon.color}",
-              "focusColor": "{navigation.item.icon.focusColor}"
+              "color": "{icon.strong}",
+              "focusColor": "{icon.strong}"
             }
           }
         }
       },
       "root": {
-        "borderRadius": "{content.borderRadius}",
-        "shadow": "{navigation.shadow}",
-        "transitionDuration": "{form.transitionDuration}"
+        "borderRadius": "{dimension.radius.300}",
+        "shadow": "{shadow.400}",
+        "transitionDuration": "{dimension.duration.200}"
       },
       "list": {
-        "padding": "{navigation.list.padding.100}",
-        "gap": "{navigation.list.gap}"
+        "padding": "{dimension.space.100}",
+        "gap": "{dimension.space.100}"
       },
       "submenuLabel": {
-        "padding": "{navigation.submenuLabel.padding}",
-        "fontWeight": "{fonts.fontWeight.regular}",
-        "background": "{navigation.submenuLabel.background}",
-        "color": "{navigation.submenuLabel.color}"
+        "padding": "{dimension.space.200} {dimension.space.300}",
+        "fontWeight": "{typography.body.lg.fontWeight}",
+        "background": "{background.transparent}",
+        "color": "{text.muted}"
       },
       "separator": {
-        "borderColor": "{content.borderColor}"
+        "borderColor": "{border.subtle}"
       },
       "item": {
-        "padding": "{navigation.item.padding}",
-        "borderRadius": "{navigation.item.borderRadius}",
-        "gap": "{navigation.item.gap}"
+        "padding": "{dimension.space.200} {dimension.space.300}",
+        "borderRadius": "{dimension.radius.200}",
+        "gap": "{dimension.space.200}"
       }
     },
     "menubar": {
       "extend": {
-        "iconSize": "{navigation.submenuIcon.size}",
+        "iconSize": "{typography.heading.sm.fontSize}",
         "extItem": {
           "caption": {
-            "color": "{text.mutedColor}",
-            "gap": "{content.padding.100}"
+            "color": "{text.muted}",
+            "gap": "{dimension.space.100}"
           }
         },
         "extSubmenuLabel": {
-          "padding": "{navigation.submenuLabel.padding}",
-          "fontWeight": "{fonts.fontWeight.demibold}",
-          "background": "{navigation.submenuLabel.background}",
-          "color": "{navigation.submenuLabel.color}"
-        }
+          "padding": "{dimension.space.200} {dimension.space.300}",
+          "fontWeight": "{typography.heading.lg.fontWeight}",
+          "background": "{background.transparent}",
+          "color": "{text.muted}"
+        },
+        "fonts_fontFamily_base": "{typography.body.lg.fontFamily}",
+        "fonts_fontSize_200": "{typography.body.sm.fontSize}",
+        "fonts_fontSize_300": "{typography.body.md.fontSize}",
+        "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}"
       },
       "colorScheme": {
         "light": {
           "root": {
-            "background": "{transparent}"
+            "background": "{background.transparent}"
           }
         }
       },
       "root": {
-        "borderColor": "{transparent}",
-        "borderRadius": "{navigation.item.borderRadius}",
-        "color": "{content.color}",
-        "gap": "{content.padding.100}",
-        "padding": "{navigation.list.padding.100}",
-        "transitionDuration": "{form.transitionDuration}"
+        "borderColor": "{border.transparent}",
+        "borderRadius": "{dimension.radius.200}",
+        "color": "{text.default}",
+        "gap": "{dimension.space.100}",
+        "padding": "{dimension.space.100}",
+        "transitionDuration": "{dimension.duration.200}"
       },
       "baseItem": {
-        "borderRadius": "{navigation.item.borderRadius}",
-        "padding": "{navigation.item.padding}"
+        "borderRadius": "{dimension.radius.200}",
+        "padding": "{dimension.space.200} {dimension.space.300}"
       },
       "item": {
-        "focusBackground": "{navigation.item.focusBackground}",
-        "activeBackground": "{navigation.item.activeBackground}",
-        "color": "{navigation.item.color}",
-        "focusColor": "{navigation.item.focusColor}",
-        "activeColor": "{navigation.item.activeColor}",
-        "padding": "{navigation.item.padding}",
-        "borderRadius": "{navigation.item.borderRadius}",
-        "gap": "{navigation.item.gap}",
+        "focusBackground": "{background.neutral.subtleHover}",
+        "activeBackground": "{background.selected}",
+        "color": "{text.default}",
+        "focusColor": "{text.default}",
+        "activeColor": "{text.onBold}",
+        "padding": "{dimension.space.200} {dimension.space.300}",
+        "borderRadius": "{dimension.radius.200}",
+        "gap": "{dimension.space.200}",
         "icon": {
-          "color": "{navigation.item.icon.color}",
-          "focusColor": "{navigation.item.icon.focusColor}",
-          "activeColor": "{navigation.item.icon.activeColor}"
+          "color": "{icon.strong}",
+          "focusColor": "{icon.strong}",
+          "activeColor": "{icon.onBold}"
         }
       },
       "submenu": {
-        "padding": "{navigation.list.padding.100}",
-        "gap": "{navigation.list.gap}",
-        "background": "{content.background}",
-        "borderColor": "{content.borderColor}",
-        "borderRadius": "{content.borderRadius}",
-        "shadow": "{navigation.shadow}",
-        "mobileIndent": "{navigation.padding.200}",
+        "padding": "{dimension.space.100}",
+        "gap": "{dimension.space.100}",
+        "background": "{background.surface.raised}",
+        "borderColor": "{border.subtle}",
+        "borderRadius": "{dimension.radius.300}",
+        "shadow": "{shadow.400}",
+        "mobileIndent": "{dimension.space.300}",
         "icon": {
-          "size": "{navigation.submenuIcon.size}",
-          "color": "{navigation.submenuIcon.color}",
-          "focusColor": "{navigation.submenuIcon.focusColor}",
-          "activeColor": "{navigation.submenuIcon.activeColor}"
+          "size": "{typography.heading.sm.fontSize}",
+          "color": "{icon.strongMuted}",
+          "focusColor": "{icon.strongMuted}",
+          "activeColor": "{icon.onBold}"
         }
       },
       "separator": {
-        "borderColor": "{content.borderColor}"
+        "borderColor": "{border.subtle}"
       },
       "mobileButton": {
-        "borderRadius": "{navigation.item.borderRadius}",
-        "size": "{controls.iconOnly.600}",
-        "color": "{text.color}",
-        "hoverColor": "{text.hoverColor}",
-        "hoverBackground": "{content.hoverBackground}",
+        "borderRadius": "{dimension.radius.200}",
+        "size": "{dimension.size.500}",
+        "color": "{text.default}",
+        "hoverColor": "{text.hover.default}",
+        "hoverBackground": "{background.surface.hover.section}",
         "focusRing": {
-          "width": "{focusRing.width}",
-          "style": "{focusRing.style}",
-          "color": "{focusRing.color}",
-          "offset": "{focusRing.offset}",
-          "shadow": "{focusRing.shadow}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "{shadow.200}"
         }
       }
     },
     "message": {
       "extend": {
-        "width": "{messages.width}",
+        "width": "{dimension.overlayWidth.base}",
         "extText": {
-          "gap": "{feedback.gap.100}"
+          "gap": "{dimension.space.100}"
         },
         "extInfo": {
-          "color": "{info.500}",
+          "color": "{text.info}",
           "closeButton": {
-            "color": "{info.500}",
-            "borderColor": "{info.500}"
+            "color": "{text.info}",
+            "borderColor": "{border.info}"
           },
           "caption": {
-            "color": "{text.color}"
+            "color": "{text.default}"
           }
         },
         "extAccentLine": {
-          "width": "{feedback.width.200}"
+          "width": "{dimension.size.150}"
         },
         "extCloseButton": {
-          "width": "{feedback.width.100}"
+          "width": "{dimension.size.100}"
         },
         "extSuccess": {
-          "color": "{success.500}",
+          "color": "{text.success}",
           "closeButton": {
-            "color": "{success.500}",
-            "borderColor": "{success.500}"
+            "color": "{text.success}",
+            "borderColor": "{border.checked}"
           },
           "caption": {
-            "color": "{text.color}"
+            "color": "{text.default}"
           }
         },
         "extWarn": {
-          "color": "{warn.500}",
+          "color": "{text.warning}",
           "closeButton": {
-            "color": "{warn.500}",
-            "borderColor": "{warn.500}"
+            "color": "{text.warning}",
+            "borderColor": "{border.warning}"
           },
           "caption": {
-            "color": "{text.color}"
+            "color": "{text.default}"
           }
         },
         "extError": {
-          "color": "{error.500}",
+          "color": "{text.danger}",
           "closeButton": {
-            "color": "{error.500}",
-            "borderColor": "{error.500}"
+            "color": "{text.danger}",
+            "borderColor": "{border.danger}"
           },
           "caption": {
-            "color": "{text.color}"
+            "color": "{text.default}"
           }
-        }
+        },
+        "fonts_fontFamily_base": "{typography.body.lg.fontFamily}",
+        "fonts_fontSize_200": "{typography.body.sm.fontSize}",
+        "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}",
+        "fonts_lineHeight_250": "{typography.caption.lineHeight}"
       },
       "colorScheme": {
         "light": {
           "success": {
-            "background": "{success.50}",
-            "borderColor": "{success.500}",
-            "color": "{text.color}",
+            "background": "{background.brand.subtle}",
+            "borderColor": "{border.checked}",
+            "color": "{text.default}",
             "shadow": "none",
             "outlined": {
-              "color": "{text.color}",
-              "borderColor": "{success.500}"
+              "color": "{text.default}",
+              "borderColor": "{border.checked}"
             },
             "closeButton": {
-              "hoverBackground": "{success.200}",
+              "hoverBackground": "{background.success.subtleHover}",
               "focusRing": {
-                "color": "{focusRing.color}",
-                "shadow": "{focusRing.shadow}"
+                "color": "{background.success.subtleHover}",
+                "shadow": "{shadow.200}"
               }
             },
             "simple": {
-              "color": "{text.color}"
+              "color": "{text.default}"
             }
           },
           "outlined": {
@@ -3567,18 +3260,18 @@
               "borderWidth": "0rem"
             },
             "closeButton": {
-              "hoverBackground": "{transparent}",
+              "hoverBackground": "{background.transparent}",
               "focusRing": {
-                "color": "{focusRing.color}",
-                "shadow": "{focusRing.shadow}"
+                "color": "{background.success.subtleHover}",
+                "shadow": "{shadow.200}"
               }
             },
             "outlined": {
-              "color": "{transparent}",
-              "borderColor": "{transparent}"
+              "color": "{text.transparent}",
+              "borderColor": "{border.transparent}"
             },
             "simple": {
-              "color": "{transparent}"
+              "color": "{text.transparent}"
             }
           },
           "simple": {
@@ -3587,549 +3280,583 @@
             }
           },
           "warn": {
-            "background": "{warn.50}",
-            "borderColor": "{warn.500}",
-            "color": "{text.color}",
+            "background": "{background.warning.subtle}",
+            "borderColor": "{border.warning}",
+            "color": "{text.default}",
             "shadow": "none",
             "outlined": {
-              "color": "{text.color}",
-              "borderColor": "{warn.500}"
+              "color": "{text.default}",
+              "borderColor": "{border.warning}"
             },
             "closeButton": {
-              "hoverBackground": "{warn.200}",
+              "hoverBackground": "{background.warning.subtleHover}",
               "focusRing": {
-                "color": "{focusRing.color}",
-                "shadow": "{focusRing.shadow}"
+                "color": "{background.success.subtleHover}",
+                "shadow": "{shadow.200}"
               }
             },
             "simple": {
-              "color": "{text.color}"
+              "color": "{text.default}"
             }
           },
           "error": {
-            "background": "{error.50}",
-            "borderColor": "{error.500}",
-            "color": "{text.color}",
+            "background": "{background.danger.subtle}",
+            "borderColor": "{border.danger}",
+            "color": "{text.default}",
             "shadow": "none",
             "outlined": {
-              "color": "{text.color}",
-              "borderColor": "{error.500}"
+              "color": "{text.default}",
+              "borderColor": "{border.danger}"
             },
             "closeButton": {
-              "hoverBackground": "{error.200}",
+              "hoverBackground": "{background.danger.subtleHover}",
               "focusRing": {
-                "color": "{focusRing.color}",
-                "shadow": "{focusRing.shadow}"
+                "color": "{background.success.subtleHover}",
+                "shadow": "{shadow.200}"
               }
             },
             "simple": {
-              "color": "{text.color}"
+              "color": "{text.default}"
             }
           },
           "secondary": {
-            "borderColor": "{transparent}",
+            "borderColor": "{border.transparent}",
             "shadow": "none",
             "closeButton": {
-              "hoverBackground": "{transparent}",
+              "hoverBackground": "{background.transparent}",
               "focusRing": {
-                "color": "{focusRing.color}",
-                "shadow": "{focusRing.shadow}"
+                "color": "{background.success.subtleHover}",
+                "shadow": "{shadow.200}"
               }
             },
             "simple": {
-              "color": "{transparent}"
+              "color": "{text.transparent}"
             },
             "outlined": {
-              "color": "{transparent}",
-              "borderColor": "{transparent}"
+              "color": "{text.transparent}",
+              "borderColor": "{border.transparent}"
             }
           },
           "contrast": {
-            "borderColor": "{transparent}",
+            "borderColor": "{border.transparent}",
             "shadow": "none",
             "closeButton": {
-              "hoverBackground": "{transparent}",
+              "hoverBackground": "{background.transparent}",
               "focusRing": {
-                "color": "{focusRing.color}",
-                "shadow": "{focusRing.shadow}"
+                "color": "{background.success.subtleHover}",
+                "shadow": "{shadow.200}"
               }
             },
             "simple": {
-              "color": "{transparent}"
+              "color": "{text.transparent}"
             },
             "outlined": {
-              "color": "{transparent}",
-              "borderColor": "{transparent}"
+              "color": "{text.transparent}",
+              "borderColor": "{border.transparent}"
             }
           },
           "info": {
-            "background": "{info.50}",
-            "borderColor": "{info.500}",
-            "color": "{text.color}",
+            "background": "{background.info.subtle}",
+            "borderColor": "{border.info}",
+            "color": "{text.default}",
             "shadow": "none",
             "closeButton": {
-              "hoverBackground": "{info.200}",
+              "hoverBackground": "{background.info.subtleHover}",
               "focusRing": {
-                "color": "{focusRing.color}",
-                "shadow": "{focusRing.shadow}"
+                "color": "{background.success.subtleHover}",
+                "shadow": "{shadow.200}"
               }
             },
             "outlined": {
-              "color": "{text.color}",
-              "borderColor": "{info.500}"
+              "color": "{text.default}",
+              "borderColor": "{border.info}"
             },
             "simple": {
-              "color": "{text.color}"
+              "color": "{text.default}"
             }
           }
         }
       },
       "root": {
-        "borderRadius": "{content.borderRadius}",
-        "borderWidth": "{feedback.width.100}",
-        "transitionDuration": "{feedback.transitionDuration}"
+        "borderRadius": "{dimension.radius.300}",
+        "borderWidth": "{dimension.size.100}",
+        "transitionDuration": "{dimension.duration.200}"
       },
       "content": {
-        "padding": "{feedback.padding.200}",
-        "gap": "{feedback.gap.400}",
+        "padding": "{dimension.space.400}",
+        "gap": "{dimension.space.400}",
         "sm": {
-          "padding": "{feedback.padding.200}"
+          "padding": "{dimension.space.400}"
         },
         "lg": {
-          "padding": "{feedback.padding.200}"
+          "padding": "{dimension.space.400}"
         }
       },
       "text": {
-        "fontSize": "{fonts.fontSize.300}",
-        "fontWeight": "{fonts.fontWeight.bold}",
+        "fontSize": "{typography.body.md.fontSize}",
+        "fontWeight": "{typography.heading.xl.fontWeight}",
         "sm": {
-          "fontSize": "{fonts.fontSize.300}"
+          "fontSize": "{typography.body.md.fontSize}"
         },
         "lg": {
-          "fontSize": "{fonts.fontSize.300}"
+          "fontSize": "{typography.body.md.fontSize}"
         }
       },
       "icon": {
-        "size": "{feedback.icon.size.500}",
+        "size": "{dimension.size.550}",
         "sm": {
-          "size": "{feedback.icon.size.500}"
+          "size": "{dimension.size.550}"
         },
         "lg": {
-          "size": "{feedback.icon.size.500}"
+          "size": "{dimension.size.550}"
         }
       },
       "closeButton": {
-        "width": "{controls.iconOnly.600}",
-        "height": "{controls.iconOnly.600}",
-        "borderRadius": "{controls.borderRadius.100}",
+        "width": "{dimension.size.500}",
+        "height": "{dimension.size.500}",
+        "borderRadius": "{dimension.radius.300}",
         "focusRing": {
-          "width": "{focusRing.width}",
-          "style": "{focusRing.style}",
-          "offset": "{focusRing.offset}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "offset": "{dimension.focusRing.offset}"
         }
       },
       "closeIcon": {
-        "size": "{feedback.icon.size.200}",
+        "size": "{dimension.size.300}",
         "sm": {
-          "size": "{feedback.icon.size.200}"
+          "size": "{dimension.size.300}"
         },
         "lg": {
-          "size": "{feedback.icon.size.200}"
+          "size": "{dimension.size.300}"
         }
       }
     },
     "metergroup": {
       "extend": {
         "extLabel": {
-          "color": "{text.mutedColor}"
-        }
+          "color": "{text.muted}"
+        },
+        "fonts_fontFamily_base": "{typography.body.lg.fontFamily}",
+        "fonts_fontSize_200": "{typography.body.sm.fontSize}",
+        "fonts_fontWeight_medium": "{typography.label.lg.fontWeight}",
+        "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}",
+        "fonts_lineHeight_200": "{typography.caption.lineHeight}",
+        "text_color": "{text.default}"
       },
       "root": {
-        "borderRadius": "{content.borderRadius}",
-        "gap": "{feedback.gap.300}"
+        "borderRadius": "{dimension.radius.300}",
+        "gap": "{dimension.space.300}"
       },
       "meters": {
-        "size": "{feedback.height.100}",
-        "background": "{content.borderColor}"
+        "size": "{dimension.size.200}",
+        "background": "{background.disabled}"
       },
       "label": {
-        "gap": "{feedback.gap.100}"
+        "gap": "{dimension.space.100}"
       },
       "labelMarker": {
-        "size": "{feedback.icon.size.100}"
+        "size": "{dimension.size.200}"
       },
       "labelIcon": {
-        "size": "{feedback.icon.size.200}"
+        "size": "{dimension.size.300}"
       },
       "labelList": {
-        "verticalGap": "{feedback.gap.200}",
-        "horizontalGap": "{feedback.gap.300}"
+        "verticalGap": "{dimension.space.200}",
+        "horizontalGap": "{dimension.space.300}"
       }
     },
     "multiselect": {
       "colorScheme": {
         "overlay": {
-          "background": "{overlay.select.background}",
-          "borderColor": "{overlay.select.borderColor}",
-          "color": "{overlay.select.color}"
+          "background": "{background.surface.raised}",
+          "borderColor": "{border.subtle}",
+          "color": "{text.default}"
         },
         "option": {
-          "focusBackground": "{list.option.focusBackground}",
-          "selectedBackground": "{list.option.selectedBackground}",
-          "selectedFocusBackground": "{list.option.selectedFocusBackground}",
-          "color": "{list.option.color}",
-          "focusColor": "{list.option.focusColor}",
-          "selectedColor": "{list.option.selectedColor}",
-          "selectedFocusColor": "{list.option.selectedFocusColor}"
+          "focusBackground": "{background.surface.hover.section}",
+          "selectedBackground": "{background.selected}",
+          "selectedFocusBackground": "{background.selectedStrong}",
+          "color": "{text.default}",
+          "focusColor": "{text.default}",
+          "selectedColor": "{text.onBold}",
+          "selectedFocusColor": "{text.onBold}"
         },
         "root": {
-          "background": "{form.background}",
-          "disabledBackground": "{form.disabledBackground}",
-          "filledBackground": "{form.filledBackground}",
-          "filledHoverBackground": "{form.filledHoverBackground}",
-          "filledFocusBackground": "{form.filledFocusBackground}",
-          "borderColor": "{form.borderColor}",
-          "hoverBorderColor": "{form.hoverBorderSecondaryColor}",
-          "focusBorderColor": "{form.focusBorderSecondaryColor}",
-          "invalidBorderColor": "{form.invalidBorderColor}",
-          "color": "{form.color}",
-          "disabledColor": "{form.disabledColor}",
-          "placeholderColor": "{form.placeholderColor}",
-          "invalidPlaceholderColor": "{form.invalidPlaceholderColor}",
+          "background": "{background.surface.field}",
+          "disabledBackground": "{background.disabled}",
+          "filledBackground": "{background.surface.field}",
+          "filledHoverBackground": "{background.surface.field}",
+          "filledFocusBackground": "{background.surface.field}",
+          "borderColor": "{border.default}",
+          "hoverBorderColor": "{border.brand}",
+          "focusBorderColor": "{border.brand}",
+          "invalidBorderColor": "{border.danger}",
+          "color": "{text.defaultHover}",
+          "disabledColor": "{text.muted}",
+          "placeholderColor": "{text.muted}",
+          "invalidPlaceholderColor": "{text.danger}",
           "focusRing": {
-            "color": "{form.focusRing.color}"
+            "color": "{background.success.subtleHover}"
           }
         },
         "dropdown": {
-          "color": "{form.floatLabelColor}"
+          "color": "{text.muted}"
         },
         "optionGroup": {
-          "background": "{list.optionGroup.background}",
-          "color": "{list.optionGroup.color}"
+          "background": "{background.surface.raised}",
+          "color": "{text.muted}"
         },
         "clearIcon": {
-          "color": "{form.floatLabelColor}"
+          "color": "{icon.subtle}"
         }
       },
       "extend": {
         "paddingX": "0.3571rem",
         "paddingY": "0.3571rem",
-        "borderWidth": "{form.borderWidth}",
-        "iconSize": "{form.icon.300}",
-        "width": "{form.width}",
-        "readonlyBackground": "{form.readonlyBackground}"
+        "borderWidth": "{dimension.borderWidth.100}",
+        "iconSize": "{dimension.size.300}",
+        "width": "{dimension.overlayWidth.narrow}",
+        "readonlyBackground": "{background.neutral.subtleHover}"
       },
       "root": {
         "shadow": "0",
-        "paddingX": "{form.paddingX}",
-        "paddingY": "{form.paddingY}",
-        "borderRadius": "{form.borderRadius.200}",
-        "transitionDuration": "{form.transitionDuration}",
+        "paddingX": "{dimension.space.400}",
+        "paddingY": "{dimension.space.400}",
+        "borderRadius": "{dimension.radius.300}",
+        "transitionDuration": "{dimension.duration.200}",
         "sm": {
-          "fontSize": "{fonts.fontSize.300}",
-          "paddingX": "{form.padding.200}",
-          "paddingY": "{form.padding.200}"
+          "fontSize": "{typography.body.md.fontSize}",
+          "paddingX": "{dimension.space.200}",
+          "paddingY": "{dimension.space.200}"
         },
         "lg": {
-          "fontSize": "{fonts.fontSize.300}",
-          "paddingX": "{form.padding.400}",
-          "paddingY": "{form.padding.400}"
+          "fontSize": "{typography.body.md.fontSize}",
+          "paddingX": "{dimension.space.400}",
+          "paddingY": "{dimension.space.400}"
         },
         "focusRing": {
-          "width": "{form.focusRing.width}",
-          "style": "{form.focusRing.style}",
-          "offset": "{form.focusRing.offset}",
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "offset": "{dimension.focusRing.offset}",
           "shadow": "0"
         }
       },
       "dropdown": {
-        "width": "{form.width.300}"
+        "width": "{dimension.size.600}"
       },
       "overlay": {
-        "borderRadius": "{overlay.select.borderRadius}",
-        "shadow": "{overlay.select.shadow}"
+        "borderRadius": "{dimension.radius.300}",
+        "shadow": "{shadow.400}"
       },
       "list": {
-        "padding": "{list.padding}",
+        "padding": "{dimension.space.100}",
         "header": {
-          "padding": "{list.header.padding}"
+          "padding": "{dimension.space.400} {dimension.space.400} 0 {dimension.space.400}"
         },
-        "gap": "{list.gap.100}"
+        "gap": "{dimension.space.100}"
       },
       "chip": {
-        "borderRadius": "{form.borderRadius.100}"
+        "borderRadius": "{dimension.radius.200}"
       },
       "option": {
-        "padding": "{list.option.padding}",
-        "borderRadius": "{list.option.borderRadius}",
-        "gap": "{list.gap.200}"
+        "padding": "{dimension.space.200} {dimension.space.300}",
+        "borderRadius": "{dimension.radius.200}",
+        "gap": "{dimension.space.200}"
       },
       "optionGroup": {
-        "fontWeight": "{fonts.fontWeight.demibold}",
-        "padding": "{list.optionGroup.padding}"
+        "fontWeight": "{typography.heading.lg.fontWeight}",
+        "padding": "{dimension.space.200} {dimension.space.300}"
       },
       "emptyMessage": {
-        "padding": "{list.option.padding}"
+        "padding": "{dimension.space.200} {dimension.space.300}"
       }
     },
     "paginator": {
       "root": {
-        "padding": "0 {data.padding.200}",
-        "gap": "{data.gap.200}",
-        "borderRadius": "{content.borderRadius}",
-        "background": "{transparent}",
-        "color": "{content.color}",
-        "transitionDuration": "{data.transitionDuration}"
+        "padding": "0 {dimension.space.200}",
+        "gap": "{dimension.space.200}",
+        "borderRadius": "{dimension.radius.300}",
+        "background": "{background.transparent}",
+        "color": "{text.default}",
+        "transitionDuration": "{dimension.duration.200}"
       },
       "currentPageReport": {
-        "color": "{text.mutedColor}"
+        "color": "{text.muted}"
       },
       "navButton": {
-        "background": "{transparent}",
-        "hoverBackground": "{content.hoverBackground}",
-        "selectedBackground": "{highlight.background}",
-        "color": "{text.color}",
-        "hoverColor": "{text.hoverColor}",
-        "selectedColor": "{text.extend.colorInverted}",
-        "width": "{data.icon.size.700}",
-        "height": "{data.icon.size.700}",
-        "borderRadius": "{content.borderRadius}",
+        "background": "{background.transparent}",
+        "hoverBackground": "{background.surface.hover.section}",
+        "selectedBackground": "{background.selected}",
+        "color": "{text.default}",
+        "hoverColor": "{text.hover.default}",
+        "selectedColor": "{text.onBold}",
+        "width": "{dimension.size.600}",
+        "height": "{dimension.size.600}",
+        "borderRadius": "{dimension.radius.300}",
         "focusRing": {
-          "width": "{focusRing.width}",
-          "style": "{focusRing.style}",
-          "color": "{focusRing.color}",
-          "offset": "{focusRing.offset}",
-          "focus": "{focusRing.shadow}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "focus": "{shadow.200}"
         }
       },
       "jumpToPageInput": {
-        "maxWidth": "{data.width.400}"
+        "maxWidth": "{dimension.size.900}"
+      },
+      "extend": {
+        "fonts_fontFamily_base": "{typography.body.lg.fontFamily}",
+        "fonts_fontSize_300": "{typography.body.md.fontSize}",
+        "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}",
+        "fonts_lineHeight_250": "{typography.caption.lineHeight}"
       }
     },
     "panelmenu": {
       "extend": {
         "extPanel": {
-          "gap": "{content.gap.100}"
+          "gap": "{dimension.space.100}"
         },
-        "iconSize": "{navigation.submenuIcon.size}",
+        "iconSize": "{typography.heading.sm.fontSize}",
         "extItem": {
-          "activeBackground": "{navigation.item.activeBackground}",
-          "activeColor": "{navigation.item.activeColor}",
+          "activeBackground": "{background.selected}",
+          "activeColor": "{text.onBold}",
           "caption": {
-            "color": "{text.mutedColor}",
-            "gap": "{content.gap.100}"
+            "color": "{text.muted}",
+            "gap": "{dimension.space.100}"
           }
-        }
+        },
+        "fonts_fontSize_200": "{typography.body.sm.fontSize}",
+        "fonts_fontSize_300": "{typography.body.md.fontSize}",
+        "fonts_lineHeight_450": "{typography.body.md.lineHeight}"
       },
       "root": {
-        "gap": "{content.gap.100}",
-        "transitionDuration": "{form.transitionDuration}"
+        "gap": "{dimension.space.100}",
+        "transitionDuration": "{dimension.duration.200}"
       },
       "panel": {
-        "background": "{transparent}",
-        "borderColor": "{transparent}",
-        "borderWidth": "{navigation.width.100}",
-        "color": "{content.color}",
-        "padding": "{content.padding.100}",
-        "borderRadius": "{content.borderRadius}",
+        "background": "{background.transparent}",
+        "borderColor": "{border.transparent}",
+        "borderWidth": "{dimension.borderWidth.100}",
+        "color": "{text.default}",
+        "padding": "{dimension.space.100}",
+        "borderRadius": "{dimension.radius.300}",
         "first": {
-          "borderWidth": "{navigation.width.100} {navigation.width.100} 0 {navigation.width.100}",
-          "topBorderRadius": "{content.borderRadius}"
+          "borderWidth": "{dimension.borderWidth.100} {dimension.borderWidth.100} 0 {dimension.borderWidth.100}",
+          "topBorderRadius": "{dimension.radius.300}"
         },
         "last": {
-          "borderWidth": "0 {navigation.width.100} {navigation.width.100} {navigation.width.100}",
-          "topBorderRadius": "{content.borderRadius}"
+          "borderWidth": "0 {dimension.borderWidth.100} {dimension.borderWidth.100} {dimension.borderWidth.100}",
+          "topBorderRadius": "{dimension.radius.300}"
         }
       },
       "item": {
-        "focusBackground": "{navigation.item.focusBackground}",
-        "color": "{navigation.item.color}",
-        "focusColor": "{navigation.item.focusColor}",
-        "gap": "{navigation.item.gap}",
-        "padding": "{navigation.item.padding}",
-        "borderRadius": "{navigation.item.borderRadius}",
+        "focusBackground": "{background.neutral.subtleHover}",
+        "color": "{text.default}",
+        "focusColor": "{text.default}",
+        "gap": "{dimension.space.200}",
+        "padding": "{dimension.space.200} {dimension.space.300}",
+        "borderRadius": "{dimension.radius.200}",
         "icon": {
-          "color": "{navigation.item.icon.color}",
-          "focusColor": "{navigation.item.icon.focusColor}"
+          "color": "{icon.strong}",
+          "focusColor": "{icon.strong}"
         }
       },
       "submenu": {
-        "indent": "{navigation.padding.400}"
+        "indent": "{dimension.space.600}"
       },
       "separator": {
-        "borderColor": "{content.borderColor}"
+        "borderColor": "{border.subtle}"
       },
       "submenuIcon": {
-        "color": "{navigation.submenuIcon.color}",
-        "focusColor": "{navigation.submenuIcon.focusColor}"
+        "color": "{icon.strongMuted}",
+        "focusColor": "{icon.strongMuted}"
       }
     },
     "password": {
       "extend": {
-        "borderWidth": "{form.borderWidth}"
+        "borderWidth": "{dimension.borderWidth.100}",
+        "floatlabel_root_color": "{background.neutral.bold}",
+        "focusRing_invalid": "{focusRing.invalid}",
+        "fonts_fontFamily_base": "{typography.body.lg.fontFamily}",
+        "fonts_fontSize_200": "{typography.body.sm.fontSize}",
+        "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}",
+        "fonts_lineHeight_250": "{typography.caption.lineHeight}",
+        "surface_400": "{text.hover.subtle}",
+        "floatlabel_in_input_paddingBottom": "{dimension.space.300}",
+        "floatlabel_in_input_paddingTop": "{dimension.space.700}",
+        "floatlabel_root_active_fontWeight": "{typography.body.lg.fontWeight}",
+        "floatlabel_root_fontWeight": "{typography.body.lg.fontWeight}"
       },
       "colorScheme": {
         "light": {
           "strength": {
-            "weakBackground": "{error.500}",
-            "mediumBackground": "{warn.500}",
-            "strongBackground": "{success.600}"
+            "weakBackground": "{background.danger.bold}",
+            "mediumBackground": "{background.warning.bold}",
+            "strongBackground": "{background.brand.boldHover}"
           },
           "icon": {
-            "color": "{form.placeholderColor}"
+            "color": "{icon.subtle}"
           }
         },
         "dark": {
           "strength": {
-            "weakBackground": "{error.500}",
-            "mediumBackground": "{warn.500}",
-            "strongBackground": "{success.600}"
+            "weakBackground": "{background.danger.bold}",
+            "mediumBackground": "{background.warning.bold}",
+            "strongBackground": "{background.brand.boldHover}"
           },
           "icon": {
-            "color": "{form.placeholderColor}"
+            "color": "{icon.subtle}"
           }
         }
       },
       "meter": {
-        "background": "{content.borderColor}",
-        "borderRadius": "{content.borderRadius}",
-        "height": "{feedback.height.100}"
+        "background": "{background.disabled}",
+        "borderRadius": "{dimension.radius.300}",
+        "height": "{dimension.size.200}"
       },
       "overlay": {
-        "background": "{overlay.popover.background}",
-        "borderColor": "{overlay.popover.borderColor}",
-        "borderRadius": "{overlay.popover.borderRadius}",
-        "color": "{overlay.popover.color}",
-        "padding": "{overlay.popover.padding.100}",
-        "shadow": "{overlay.popover.shadow}"
+        "background": "{background.surface.raised}",
+        "borderColor": "{border.default}",
+        "borderRadius": "{dimension.radius.200}",
+        "color": "{text.default}",
+        "padding": "{dimension.space.300}",
+        "shadow": "{shadow.400}"
       },
       "content": {
-        "gap": "{content.gap.200}"
+        "gap": "{dimension.space.200}"
       }
     },
     "popover": {
       "extend": {
-        "borderWidth": "{overlay.borderWidth}",
+        "borderWidth": "{dimension.borderWidth.100}",
         "arrow": {
-          "width": "{overlay.popover.width.200}",
-          "height": "{overlay.popover.width.100}"
+          "width": "{dimension.size.250}",
+          "height": "{dimension.size.200}"
         }
       },
       "root": {
-        "background": "{overlay.popover.background}",
-        "borderColor": "{overlay.popover.borderColor}",
-        "color": "{overlay.popover.color}",
-        "borderRadius": "{overlay.popover.borderRadius}",
-        "shadow": "{overlay.popover.shadow}",
-        "gutter": "{overlay.gap.300}",
-        "arrowOffset": "{overlay.popover.padding.200}",
+        "background": "{background.surface.raised}",
+        "borderColor": "{border.default}",
+        "color": "{text.default}",
+        "borderRadius": "{dimension.radius.200}",
+        "shadow": "{shadow.400}",
+        "gutter": "{dimension.space.300}",
+        "arrowOffset": "{dimension.space.500}",
         "arrowLeft": "0px"
       },
       "content": {
-        "padding": "{overlay.popover.padding.100}"
+        "padding": "{dimension.space.300}"
       }
     },
     "progressbar": {
       "label": {
-        "color": "{text.extend.colorPrimaryStatic}",
-        "fontSize": "{fonts.fontSize.100}",
-        "fontWeight": "{fonts.fontWeight.regular}"
+        "color": "{text.staticDark}",
+        "fontSize": "{typography.label.sm.fontSize}",
+        "fontWeight": "{typography.body.lg.fontWeight}"
       },
       "root": {
-        "background": "{content.borderColor}",
-        "borderRadius": "{content.borderRadius}",
-        "height": "{feedback.height.300}"
+        "background": "{background.disabled}",
+        "borderRadius": "{dimension.radius.300}",
+        "height": "{dimension.size.300}"
       },
       "value": {
-        "background": "{primary.color}"
+        "background": "{background.brand.bold}"
+      },
+      "extend": {
+        "fonts_fontFamily_base": "{typography.body.lg.fontFamily}"
       }
     },
     "progressspinner": {
       "extend": {
-        "small": "{feedback.width.500}",
-        "medium": "{feedback.width.700}",
-        "large": "{feedback.width.800}",
-        "xlarge": "{feedback.width.900}"
+        "small": "{dimension.size.300}",
+        "medium": "{dimension.size.500}",
+        "large": "{dimension.size.700}",
+        "xlarge": "{dimension.size.800}",
+        "primary_color": "{background.brand.bold}"
       },
       "colorScheme": {
         "light": {
           "root": {
-            "colorOne": "{success.500}",
-            "colorTwo": "{info.500}",
-            "colorThree": "{error.500}",
-            "colorFour": "{warn.500}"
+            "colorOne": "{background.brand.bold}",
+            "colorTwo": "{background.info.bold}",
+            "colorThree": "{background.danger.bold}",
+            "colorFour": "{background.warning.bold}"
           }
         }
       },
       "root": {
-        "borderWidth": "{feedback.width.200}"
+        "borderWidth": "{dimension.size.150}"
       }
     },
     "radiobutton": {
       "root": {
-        "width": "{form.size.400}",
-        "height": "{form.size.400}",
-        "background": "{form.background}",
-        "checkedBackground": "{surface.900}",
-        "checkedHoverBackground": "{surface.800}",
-        "disabledBackground": "{form.disabledBackground}",
-        "filledBackground": "{form.filledBackground}",
-        "borderColor": "{form.borderColor}",
-        "hoverBorderColor": "{form.hoverBorderPrimaryColor}",
-        "focusBorderColor": "{form.borderColor}",
-        "checkedBorderColor": "{surface.900}",
-        "checkedHoverBorderColor": "{form.hoverBorderPrimaryColor}",
-        "checkedFocusBorderColor": "{form.focusBorderPrimaryColor}",
-        "checkedDisabledBorderColor": "{form.borderColor}",
-        "invalidBorderColor": "{form.invalidBorderColor}",
+        "width": "{dimension.size.400}",
+        "height": "{dimension.size.400}",
+        "background": "{background.surface.field}",
+        "checkedBackground": "{background.selected}",
+        "checkedHoverBackground": "{background.surface.inverse}",
+        "disabledBackground": "{background.disabled}",
+        "filledBackground": "{background.surface.field}",
+        "borderColor": "{border.default}",
+        "hoverBorderColor": "{border.strong}",
+        "focusBorderColor": "{border.default}",
+        "checkedBorderColor": "{border.strong}",
+        "checkedHoverBorderColor": "{border.strong}",
+        "checkedFocusBorderColor": "{border.strong}",
+        "checkedDisabledBorderColor": "{border.default}",
+        "invalidBorderColor": "{border.danger}",
         "shadow": "0",
-        "transitionDuration": "{form.transitionDuration}"
+        "transitionDuration": "{dimension.duration.200}"
       },
       "focusRing": {
-        "width": "{focusRing.width}",
-        "style": "{focusRing.style}",
-        "color": "{focusRing.color}",
-        "offset": "{focusRing.offset}",
-        "shadow": "{focusRing.shadow}"
+        "width": "{dimension.borderWidth.300}",
+        "style": "{dimension.focusRing.style}",
+        "color": "{background.success.subtleHover}",
+        "offset": "{dimension.focusRing.offset}",
+        "shadow": "{shadow.200}"
       },
       "sm": {
-        "width": "{form.size.300}",
-        "height": "{form.size.300}"
+        "width": "{dimension.size.300}",
+        "height": "{dimension.size.300}"
       },
       "lg": {
-        "width": "{form.size.350}",
-        "height": "{form.size.350}"
+        "width": "{dimension.size.350}",
+        "height": "{dimension.size.350}"
       },
       "icon": {
         "size": "0.7rem",
-        "checkedColor": "{text.extend.colorInverted}",
-        "checkedHoverColor": "{text.extend.colorInverted}",
-        "disabledColor": "{text.mutedColor}",
+        "checkedColor": "{icon.onBold}",
+        "checkedHoverColor": "{icon.onBold}",
+        "disabledColor": "{icon.subtle}",
         "sm": {
-          "size": "{form.icon.100}"
+          "size": "{dimension.size.200}"
         },
         "lg": {
-          "size": "{form.icon.300}"
+          "size": "{dimension.size.300}"
         }
+      },
+      "extend": {
+        "focusRing_invalid": "{focusRing.invalid}",
+        "focusRing_success": "{focusRing.success}"
       }
     },
     "rating": {
       "root": {
-        "gap": "{form.gap.200}",
-        "transitionDuration": "{form.transitionDuration}"
+        "gap": "{dimension.space.200}",
+        "transitionDuration": "{dimension.duration.200}"
       },
       "focusRing": {
-        "width": "{form.focusRing.width}",
-        "style": "{form.focusRing.style}",
-        "color": "{form.focusRing.color}",
-        "offset": "{form.focusRing.offset}",
-        "shadow": "{focusRing.shadow}"
+        "width": "{dimension.borderWidth.300}",
+        "style": "{dimension.focusRing.style}",
+        "color": "{background.success.subtleHover}",
+        "offset": "{dimension.focusRing.offset}",
+        "shadow": "{shadow.200}"
       },
       "icon": {
-        "size": "{form.icon.500}",
-        "color": "{surface.500}",
-        "hoverColor": "{warn.500}",
-        "activeColor": "{warn.500}"
+        "size": "{dimension.size.400}",
+        "color": "{icon.subtle}",
+        "hoverColor": "{background.warning.bold}",
+        "activeColor": "{background.warning.bold}"
       }
     },
     "ripple": {
@@ -4145,320 +3872,353 @@
       "colorScheme": {
         "light": {
           "bar": {
-            "background": "{surface.300}"
+            "background": "{text.disabled}"
           }
         }
       },
       "root": {
-        "transitionDuration": "{media.transitionDuration}"
+        "transitionDuration": "{dimension.duration.200}"
       },
       "bar": {
-        "size": "{media.size.200}",
-        "borderRadius": "{media.borderRadius.100}",
+        "size": "{dimension.size.200}",
+        "borderRadius": "{dimension.radius.200}",
         "focusRing": {
           "width": "0rem",
-          "style": "{focusRing.style}",
-          "color": "{focusRing.color}",
-          "offset": "{focusRing.offset}",
-          "shadow": "{focusRing.shadow}"
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "{shadow.200}"
         }
       }
     },
     "select": {
       "extend": {
         "extOption": {
-          "background": "{list.option.background}",
-          "gap": "{list.gap.200}"
+          "background": "{background.surface.raised}",
+          "gap": "{dimension.space.200}"
         },
         "extOptionGroup": {
-          "gap": "{list.gap.200}"
-        },
-        "readonlyBackground": "{form.readonlyBackground}",
-        "borderWidth": "{form.borderWidth}",
-        "iconSize": "{form.icon.300}"
+          "gap": "{dimension.space.200}"
+        },
+        "readonlyBackground": "{background.neutral.subtleHover}",
+        "borderWidth": "{dimension.borderWidth.100}",
+        "iconSize": "{dimension.size.300}",
+        "floatlabel_root_color": "{background.neutral.bold}",
+        "focusRing_invalid": "{focusRing.invalid}",
+        "fonts_fontFamily_base": "{typography.body.lg.fontFamily}",
+        "fonts_lineHeight_250": "{typography.caption.lineHeight}",
+        "floatlabel_in_input_paddingBottom": "{dimension.space.300}",
+        "floatlabel_in_input_paddingTop": "{dimension.space.700}",
+        "floatlabel_root_active_fontWeight": "{typography.body.lg.fontWeight}",
+        "floatlabel_root_fontWeight": "{typography.body.lg.fontWeight}"
       },
       "root": {
-        "background": "{form.background}",
-        "disabledBackground": "{form.disabledBackground}",
-        "filledBackground": "{form.filledBackground}",
-        "filledHoverBackground": "{form.filledHoverBackground}",
-        "filledFocusBackground": "{form.filledFocusBackground}",
-        "borderColor": "{form.borderColor}",
-        "hoverBorderColor": "{form.hoverBorderSecondaryColor}",
-        "focusBorderColor": "{form.focusBorderSecondaryColor}",
-        "invalidBorderColor": "{form.invalidBorderColor}",
-        "color": "{text.color}",
-        "disabledColor": "{form.disabledColor}",
-        "placeholderColor": "{form.placeholderColor}",
-        "invalidPlaceholderColor": "{form.invalidPlaceholderColor}",
+        "background": "{background.surface.field}",
+        "disabledBackground": "{background.disabled}",
+        "filledBackground": "{background.surface.field}",
+        "filledHoverBackground": "{background.surface.field}",
+        "filledFocusBackground": "{background.surface.field}",
+        "borderColor": "{border.default}",
+        "hoverBorderColor": "{border.brand}",
+        "focusBorderColor": "{border.brand}",
+        "invalidBorderColor": "{border.danger}",
+        "color": "{text.default}",
+        "disabledColor": "{text.muted}",
+        "placeholderColor": "{text.muted}",
+        "invalidPlaceholderColor": "{text.danger}",
         "shadow": "0",
-        "paddingX": "{form.padding.300}",
-        "paddingY": "{form.padding.300}",
-        "borderRadius": "{form.borderRadius.200}",
-        "transitionDuration": "{form.transitionDuration}",
+        "paddingX": "{dimension.space.300}",
+        "paddingY": "{dimension.space.300}",
+        "borderRadius": "{dimension.radius.300}",
+        "transitionDuration": "{dimension.duration.200}",
         "sm": {
-          "fontSize": "{fonts.fontSize.300}",
-          "paddingX": "{form.padding.300}",
-          "paddingY": "{form.padding.200}"
+          "fontSize": "{typography.body.md.fontSize}",
+          "paddingX": "{dimension.space.300}",
+          "paddingY": "{dimension.space.200}"
         },
         "lg": {
-          "fontSize": "{fonts.fontSize.300}",
-          "paddingX": "{form.padding.300}",
-          "paddingY": "{form.padding.400}"
+          "fontSize": "{typography.body.md.fontSize}",
+          "paddingX": "{dimension.space.300}",
+          "paddingY": "{dimension.space.400}"
         },
         "focusRing": {
-          "width": "{form.focusRing.width}",
-          "style": "{form.focusRing.style}",
-          "color": "{form.focusRing.color}",
-          "offset": "{form.focusRing.offset}",
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
           "shadow": "0"
         }
       },
       "dropdown": {
-        "width": "{form.width.300}",
-        "color": "{form.iconColor}"
+        "width": "{dimension.size.600}",
+        "color": "{text.defaultHover}"
       },
       "overlay": {
-        "background": "{overlay.select.background}",
-        "borderColor": "{overlay.select.borderColor}",
-        "borderRadius": "{overlay.select.borderRadius}",
-        "color": "{overlay.select.color}",
-        "shadow": "{overlay.select.shadow}"
+        "background": "{background.surface.raised}",
+        "borderColor": "{border.subtle}",
+        "borderRadius": "{dimension.radius.300}",
+        "color": "{text.default}",
+        "shadow": "{shadow.400}"
       },
       "list": {
-        "padding": "{list.padding}",
-        "gap": "{list.gap.100}",
+        "padding": "{dimension.space.100}",
+        "gap": "{dimension.space.100}",
         "header": {
-          "padding": "{list.header.padding}"
+          "padding": "{dimension.space.400} {dimension.space.400} 0 {dimension.space.400}"
         }
       },
       "option": {
-        "focusBackground": "{list.option.focusBackground}",
-        "selectedBackground": "{list.option.selectedBackground}",
-        "selectedFocusBackground": "{list.option.selectedFocusBackground}",
-        "color": "{list.option.color}",
-        "focusColor": "{list.option.focusColor}",
-        "selectedColor": "{list.option.selectedColor}",
-        "selectedFocusColor": "{list.option.selectedFocusColor}",
-        "padding": "{list.option.padding}",
-        "borderRadius": "{list.option.borderRadius}"
+        "focusBackground": "{background.surface.hover.section}",
+        "selectedBackground": "{background.selected}",
+        "selectedFocusBackground": "{background.selectedStrong}",
+        "color": "{text.default}",
+        "focusColor": "{text.default}",
+        "selectedColor": "{text.onBold}",
+        "selectedFocusColor": "{text.onBold}",
+        "padding": "{dimension.space.200} {dimension.space.300}",
+        "borderRadius": "{dimension.radius.200}"
       },
       "optionGroup": {
-        "background": "{list.optionGroup.background}",
-        "color": "{list.optionGroup.color}",
-        "fontWeight": "{fonts.fontWeight.regular}",
-        "padding": "{list.option.padding}"
+        "background": "{background.surface.raised}",
+        "color": "{text.muted}",
+        "fontWeight": "{typography.body.lg.fontWeight}",
+        "padding": "{dimension.space.200} {dimension.space.300}"
       },
       "clearIcon": {
-        "color": "{form.iconColor}"
+        "color": "{icon.default}"
       },
       "checkmark": {
-        "color": "{list.option.color}",
-        "gutterStart": "-{form.padding.200}",
-        "gutterEnd": "{form.padding.200}"
+        "color": "{text.default}",
+        "gutterStart": "-{dimension.space.200}",
+        "gutterEnd": "{dimension.space.200}"
       },
       "emptyMessage": {
-        "padding": "{list.option.padding}"
+        "padding": "{dimension.space.200} {dimension.space.300}"
       }
     },
     "selectbutton": {
       "extend": {
-        "gap": "{form.gap.100}",
-        "paddingX": "{controls.padding.100}",
-        "paddingY": "{controls.padding.100}",
-        "checkedBackground": "{form.background}",
+        "gap": "{dimension.space.100}",
+        "paddingX": "{dimension.space.100}",
+        "paddingY": "{dimension.space.100}",
+        "checkedBackground": "{background.surface.field}",
         "iconSize": {
-          "sm": "{controls.iconOnly.200}",
-          "md": "{controls.iconOnly.300}",
-          "lg": "{controls.iconOnly.400}",
-          "xlg": "{controls.iconOnly.500}"
+          "sm": "{dimension.size.300}",
+          "md": "{dimension.size.350}",
+          "lg": "{dimension.size.400}",
+          "xlg": "{dimension.size.450}"
         },
-        "checkedBorderColor": "{form.background}",
-        "checkedColor": "{form.color}",
+        "checkedBorderColor": "{background.surface.field}",
+        "checkedColor": "{text.defaultHover}",
         "ext": {
-          "borderRadius": "{borderRadius.200}"
-        }
+          "borderRadius": "{dimension.radius.200}"
+        },
+        "fonts_fontFamily_heading": "{typography.heading.lg.fontFamily}",
+        "fonts_fontSize_600": "{typography.heading.md.fontSize}",
+        "fonts_fontWeight_demibold": "{typography.heading.lg.fontWeight}",
+        "fonts_lineHeight_250": "{typography.caption.lineHeight}",
+        "fonts_lineHeight_300": "{typography.label.sm.lineHeight}",
+        "fonts_lineHeight_400": "{typography.body.sm.lineHeight}",
+        "fonts_lineHeight_500": "{typography.body.md.lineHeight}",
+        "fonts_lineHeight_550": "{typography.body.lg.lineHeight}",
+        "fonts_lineHeight_700": "{typography.heading.md.lineHeight}",
+        "controls_iconOnly_600": "{dimension.space.800}",
+        "controls_iconOnly_700": "{dimension.space.900}",
+        "controls_iconOnly_850": "{dimension.size.750}",
+        "controls_iconOnly_900": "{dimension.size.800}"
       },
       "colorScheme": {
         "light": {
           "root": {
-            "invalidBorderColor": "{form.invalidBorderColor}"
+            "invalidBorderColor": "{border.danger}"
           },
           "extend": {
-            "background": "{surface.200}"
+            "background": "{background.disabled}"
           }
         }
       },
       "root": {
-        "borderRadius": "{form.borderRadius.200}"
+        "borderRadius": "{dimension.radius.300}"
       }
     },
     "skeleton": {
       "extend": {
-        "minWidth": "{feedback.width.700}",
-        "height": "{feedback.height.650}"
+        "minWidth": "{dimension.size.500}",
+        "height": "{dimension.size.500}"
       },
       "colorScheme": {
         "light": {
           "root": {
-            "background": "{surface.200}",
-            "animationBackground": "{surface.100}"
+            "background": "{background.disabled}",
+            "animationBackground": "{background.neutral.subtleHover}"
           }
         }
       },
       "root": {
-        "borderRadius": "{content.borderRadius}"
+        "borderRadius": "{dimension.radius.300}"
       }
     },
     "slider": {
       "colorScheme": {
         "handle": {
           "content": {
-            "background": "{surface.0}"
+            "background": "{background.surface.canvas}"
           }
         }
       },
       "root": {
-        "transitionDuration": "{form.transitionDuration}"
+        "transitionDuration": "{dimension.duration.200}"
       },
       "track": {
-        "background": "{content.borderColor}",
-        "borderRadius": "{content.borderRadius}",
-        "size": "{form.size.150}"
+        "background": "{background.disabled}",
+        "borderRadius": "{dimension.radius.300}",
+        "size": "{dimension.size.150}"
       },
       "range": {
-        "background": "{surface.900}"
+        "background": "{background.selected}"
       },
       "handle": {
-        "width": "{form.size.350}",
-        "height": "{form.size.350}",
-        "borderRadius": "{form.borderRadius.300}",
-        "background": "{surface.900}",
-        "hoverBackground": "{surface.900}",
+        "width": "{dimension.size.350}",
+        "height": "{dimension.size.350}",
+        "borderRadius": "{dimension.radius.max}",
+        "background": "{background.selected}",
+        "hoverBackground": "{background.selected}",
         "focusRing": {
-          "width": "{form.focusRing.width}",
-          "style": "{form.focusRing.style}",
-          "color": "{form.focusRing.color}",
-          "offset": "{form.focusRing.offset}",
-          "shadow": "{focusRing.shadow}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "{shadow.200}"
         },
         "content": {
-          "borderRadius": "{form.borderRadius.300}",
-          "hoverBackground": "{surface.900}",
-          "width": "{form.size.250}",
-          "height": "{form.size.250}",
+          "borderRadius": "{dimension.radius.max}",
+          "hoverBackground": "{background.selected}",
+          "width": "{dimension.size.250}",
+          "height": "{dimension.size.250}",
           "shadow": "none"
         }
+      },
+      "extend": {
+        "focusRing_success": "{focusRing.success}"
       }
     },
     "splitter": {
       "colorScheme": {
         "light": {
           "handle": {
-            "background": "{surface.900}"
+            "background": "{background.selected}"
           }
         }
       },
       "gutter": {
-        "background": "{surface.100}"
+        "background": "{background.neutral.subtleHover}"
       },
       "root": {
-        "background": "{content.background}",
-        "borderColor": "{content.borderColor}",
-        "color": "{content.color}",
-        "transitionDuration": "{controls.transitionDuration}"
+        "background": "{background.surface.raised}",
+        "borderColor": "{border.subtle}",
+        "color": "{text.default}",
+        "transitionDuration": "{dimension.duration.200}"
       },
       "handle": {
-        "size": "{form.size.150}",
-        "borderRadius": "{content.borderRadius}",
+        "size": "{dimension.size.150}",
+        "borderRadius": "{dimension.radius.300}",
         "focusRing": {
-          "width": "{form.focusRing.width}",
-          "style": "{form.focusRing.style}",
-          "color": "{form.focusRing.color}",
-          "offset": "{form.focusRing.offset}",
-          "shadow": "{focusRing.shadow}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "{shadow.200}"
         }
       }
     },
     "stepper": {
       "extend": {
         "extCaption": {
-          "gap": "{feedback.gap.100}"
+          "gap": "{dimension.space.100}"
         },
         "extStepNumber": {
-          "invalidBackground": "{error.400}",
-          "invalidColor": "{error.900}",
-          "invalidBorderColor": "{error.400}",
-          "borderWidth": "{feedback.width.100}",
-          "iconSize": "{feedback.icon.size.300}"
-        }
+          "invalidBackground": "{background.danger.bold}",
+          "invalidColor": "{text.danger}",
+          "invalidBorderColor": "{border.danger}",
+          "borderWidth": "{dimension.size.100}",
+          "iconSize": "{dimension.size.400}"
+        },
+        "background_transparent": "{background.transparent}",
+        "fonts_fontFamily_base": "{typography.body.lg.fontFamily}",
+        "fonts_fontSize_200": "{typography.body.sm.fontSize}",
+        "fonts_fontSize_300": "{typography.body.md.fontSize}",
+        "fonts_fontWeight_medium": "{typography.label.lg.fontWeight}",
+        "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}",
+        "fonts_lineHeight_150": "{typography.caption.lineHeight}",
+        "fonts_lineHeight_200": "{typography.caption.lineHeight}",
+        "text_mutedColor": "{text.muted}"
       },
       "root": {
-        "transitionDuration": "{feedback.transitionDuration}"
+        "transitionDuration": "{dimension.duration.200}"
       },
       "separator": {
-        "background": "{content.borderColor}",
-        "activeBackground": "{form.focusBorderPrimaryColor}",
+        "background": "{background.disabled}",
+        "activeBackground": "{background.selected}",
         "margin": "0 0 0 1.625rem",
-        "size": "{form.size.100}"
+        "size": "{dimension.size.100}"
       },
       "step": {
-        "padding": "{feedback.padding.100}",
-        "gap": "{feedback.gap.200}"
+        "padding": "{dimension.space.200}",
+        "gap": "{dimension.space.200}"
       },
       "stepHeader": {
         "padding": "0rem",
         "borderRadius": "0rem",
-        "gap": "{feedback.gap.200}",
+        "gap": "{dimension.space.200}",
         "focusRing": {
-          "width": "{focusRing.width}",
-          "style": "{focusRing.style}",
-          "color": "{focusRing.color}",
-          "offset": "{focusRing.offset}",
-          "shadow": "{focusRing.shadow}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "{shadow.200}"
         }
       },
       "stepTitle": {
-        "color": "{text.color}",
-        "activeColor": "{text.color}",
-        "fontWeight": "{fonts.fontWeight.regular}"
+        "color": "{text.default}",
+        "activeColor": "{text.default}",
+        "fontWeight": "{typography.body.lg.fontWeight}"
       },
       "stepNumber": {
-        "background": "{content.background}",
-        "activeBackground": "{primary.color}",
-        "borderColor": "{content.borderColor}",
-        "activeBorderColor": "{primary.color}",
-        "color": "{text.color}",
-        "activeColor": "{text.extend.colorPrimaryStatic}",
-        "size": "{form.size.400}",
-        "fontSize": "{fonts.fontSize.300}",
-        "fontWeight": "{fonts.fontWeight.bold}",
-        "borderRadius": "{form.borderRadius.300}",
+        "background": "{background.surface.raised}",
+        "activeBackground": "{background.brand.bold}",
+        "borderColor": "{border.subtle}",
+        "activeBorderColor": "{border.checked}",
+        "color": "{text.default}",
+        "activeColor": "{text.staticDark}",
+        "size": "{dimension.size.400}",
+        "fontSize": "{typography.body.md.fontSize}",
+        "fontWeight": "{typography.heading.xl.fontWeight}",
+        "borderRadius": "{dimension.radius.max}",
         "shadow": "none"
       },
       "steppanels": {
-        "padding": "{feedback.padding.200}"
+        "padding": "{dimension.space.400}"
       },
       "steppanel": {
-        "background": "{content.background}",
-        "color": "{content.color}",
+        "background": "{background.surface.raised}",
+        "color": "{text.default}",
         "padding": "0rem",
         "indent": "0rem"
       }
     },
     "steps": {
       "itemLink": {
-        "gap": "{form.gap.200}"
+        "gap": "{dimension.space.200}"
       },
       "itemLabel": {
-        "fontWeight": "{fonts.fontWeight.regular}"
+        "fontWeight": "{typography.body.lg.fontWeight}"
       },
       "itemNumber": {
-        "background": "{content.background}",
-        "size": "{form.size.500}",
-        "fontSize": "{fonts.fontSize.300}",
-        "fontWeight": "{fonts.fontWeight.bold}",
-        "borderRadius": "{form.borderRadius.300}",
+        "background": "{background.surface.raised}",
+        "size": "{dimension.size.500}",
+        "fontSize": "{typography.body.md.fontSize}",
+        "fontWeight": "{typography.heading.xl.fontWeight}",
+        "borderRadius": "{dimension.radius.max}",
         "shadow": "none"
       }
     },
@@ -4469,410 +4229,432 @@
             "shadow": "none"
           },
           "tab": {
-            "background": "{transparent}",
-            "hoverBackground": "{transparent}",
-            "activeBackground": "{transparent}"
+            "background": "{background.transparent}",
+            "hoverBackground": "{background.transparent}",
+            "activeBackground": "{background.transparent}"
           }
         }
       },
       "root": {
-        "transitionDuration": "{data.transitionDuration}"
+        "transitionDuration": "{dimension.duration.200}"
       },
       "tablist": {
-        "borderWidth": "0 0 {data.width.100} 0",
-        "background": "{transparent}",
-        "borderColor": "{content.borderColor}"
+        "borderWidth": "0 0 {dimension.size.100} 0",
+        "background": "{background.transparent}",
+        "borderColor": "{border.subtle}"
       },
       "tab": {
         "borderWidth": "0",
-        "borderColor": "{content.borderColor}",
-        "hoverBorderColor": "{content.borderColor}",
-        "activeBorderColor": "{content.activeBorderColor}",
-        "color": "{text.mutedColor}",
-        "hoverColor": "{text.color}",
-        "activeColor": "{text.color}",
-        "padding": "{content.padding.300}",
-        "fontWeight": "{fonts.fontWeight.demibold}",
+        "borderColor": "{border.subtle}",
+        "hoverBorderColor": "{border.subtle}",
+        "activeBorderColor": "{border.inverse}",
+        "color": "{text.muted}",
+        "hoverColor": "{text.default}",
+        "activeColor": "{text.default}",
+        "padding": "{dimension.space.400}",
+        "fontWeight": "{typography.heading.lg.fontWeight}",
         "margin": "0",
-        "gap": "{content.gap.200}",
+        "gap": "{dimension.space.200}",
         "focusRing": {
-          "width": "{focusRing.width}",
-          "style": "{focusRing.style}",
-          "color": "{focusRing.color}",
-          "offset": "{focusRing.offset}",
-          "shadow": "{focusRing.shadow}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "{shadow.200}"
         }
       },
       "tabpanel": {
-        "background": "{transparent}",
-        "color": "{text.color}",
-        "padding": "{spacing.4x}",
+        "background": "{background.transparent}",
+        "color": "{text.default}",
+        "padding": "{dimension.space.400}",
         "focusRing": {
-          "width": "{focusRing.width}",
-          "style": "{focusRing.style}",
-          "color": "{focusRing.color}",
-          "offset": "{focusRing.offset}",
-          "shadow": "{focusRing.shadow}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "{shadow.200}"
         }
       },
       "navButton": {
-        "background": "{content.background}",
-        "color": "{content.color}",
-        "hoverColor": "{content.hoverColor}",
-        "width": "{controls.iconOnly.400}",
+        "background": "{background.surface.raised}",
+        "color": "{text.default}",
+        "hoverColor": "{text.hover.default}",
+        "width": "{dimension.size.400}",
         "focusRing": {
-          "width": "{focusRing.width}",
-          "style": "{focusRing.style}",
-          "color": "{focusRing.color}",
-          "offset": "{focusRing.offset}",
-          "shadow": "{focusRing.shadow}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "{shadow.200}"
         }
       },
       "activeBar": {
         "height": "0.18rem",
         "bottom": "-0.18rem",
-        "background": "{content.color}"
+        "background": "{text.default}"
+      },
+      "extend": {
+        "fonts_fontFamily_heading": "{typography.heading.lg.fontFamily}",
+        "fonts_fontSize_300": "{typography.body.md.fontSize}",
+        "fonts_fontWeight_demibold": "{typography.heading.lg.fontWeight}"
       }
     },
     "toast": {
       "extend": {
         "extInfo": {
-          "color": "{info.500}",
+          "color": "{text.info}",
           "closeButton": {
-            "color": "{info.500}",
-            "borderColor": "{info.500}"
+            "color": "{text.info}",
+            "borderColor": "{border.info}"
           },
           "caption": {
-            "color": "{text.color}"
+            "color": "{text.default}"
           }
         },
         "extAccentLine": {
-          "width": "{feedback.width.200}"
+          "width": "{dimension.size.150}"
         },
         "extCloseButton": {
-          "width": "{feedback.width.100}"
+          "width": "{dimension.size.100}"
         },
         "extSuccess": {
-          "color": "{success.500}",
+          "color": "{text.success}",
           "closeButton": {
-            "color": "{success.500}",
-            "borderColor": "{success.500}"
+            "color": "{text.success}",
+            "borderColor": "{border.checked}"
           },
           "caption": {
-            "color": "{text.color}"
+            "color": "{text.default}"
           }
         },
         "extWarn": {
-          "color": "{warn.500}",
+          "color": "{text.warning}",
           "closeButton": {
-            "color": "{warn.500}",
-            "borderColor": "{warn.500}"
+            "color": "{text.warning}",
+            "borderColor": "{border.warning}"
           },
           "caption": {
-            "color": "{text.color}"
+            "color": "{text.default}"
           }
         },
         "extError": {
-          "color": "{error.500}",
+          "color": "{text.danger}",
           "closeButton": {
-            "color": "{error.500}",
-            "borderColor": "{error.500}"
+            "color": "{text.danger}",
+            "borderColor": "{border.danger}"
           },
           "caption": {
-            "color": "{text.color}"
+            "color": "{text.default}"
           }
-        }
+        },
+        "fonts_fontFamily_base": "{typography.body.lg.fontFamily}",
+        "fonts_lineHeight_250": "{typography.caption.lineHeight}"
       },
       "colorScheme": {
         "light": {
           "info": {
-            "background": "{info.50}",
-            "borderColor": "{info.500}",
-            "color": "{text.color}",
-            "detailColor": "{text.color}",
-            "shadow": "{overlay.popover.shadow}",
+            "background": "{background.info.subtle}",
+            "borderColor": "{border.info}",
+            "color": "{text.default}",
+            "detailColor": "{text.default}",
+            "shadow": "{shadow.400}",
             "closeButton": {
-              "hoverBackground": "{info.200}",
+              "hoverBackground": "{background.info.subtleHover}",
               "focusRing": {
-                "color": "{focusRing.color}",
-                "shadow": "{focusRing.shadow}"
+                "color": "{background.success.subtleHover}",
+                "shadow": "{shadow.200}"
               }
             }
           },
           "success": {
-            "background": "{success.50}",
-            "borderColor": "{success.500}",
-            "color": "{text.color}",
-            "detailColor": "{text.color}",
-            "shadow": "{overlay.popover.shadow}",
+            "background": "{background.brand.subtle}",
+            "borderColor": "{border.checked}",
+            "color": "{text.default}",
+            "detailColor": "{text.default}",
+            "shadow": "{shadow.400}",
             "closeButton": {
-              "hoverBackground": "{success.200}",
+              "hoverBackground": "{background.success.subtleHover}",
               "focusRing": {
-                "color": "{focusRing.color}",
-                "shadow": "{focusRing.shadow}"
+                "color": "{background.success.subtleHover}",
+                "shadow": "{shadow.200}"
               }
             }
           },
           "warn": {
-            "background": "{warn.50}",
-            "borderColor": "{warn.500}",
-            "color": "{text.color}",
-            "detailColor": "{text.color}",
-            "shadow": "{overlay.popover.shadow}",
+            "background": "{background.warning.subtle}",
+            "borderColor": "{border.warning}",
+            "color": "{text.default}",
+            "detailColor": "{text.default}",
+            "shadow": "{shadow.400}",
             "closeButton": {
-              "hoverBackground": "{warn.200}",
+              "hoverBackground": "{background.warning.subtleHover}",
               "focusRing": {
-                "color": "{focusRing.color}",
+                "color": "{background.success.subtleHover}",
                 "shadow": "none"
               }
             }
           },
           "error": {
-            "background": "{error.50}",
-            "borderColor": "{error.500}",
-            "color": "{text.color}",
-            "detailColor": "{text.color}",
-            "shadow": "{overlay.popover.shadow}",
+            "background": "{background.danger.subtle}",
+            "borderColor": "{border.danger}",
+            "color": "{text.default}",
+            "detailColor": "{text.default}",
+            "shadow": "{shadow.400}",
             "closeButton": {
-              "hoverBackground": "{error.200}",
+              "hoverBackground": "{background.danger.subtleHover}",
               "focusRing": {
-                "color": "{focusRing.color}",
-                "shadow": "{focusRing.shadow}"
+                "color": "{background.success.subtleHover}",
+                "shadow": "{shadow.200}"
               }
             }
           },
           "secondary": {
-            "shadow": "{overlay.popover.shadow}"
+            "shadow": "{shadow.400}"
           },
           "contrast": {
-            "shadow": "{overlay.popover.shadow}"
+            "shadow": "{shadow.400}"
           }
         }
       },
       "root": {
-        "width": "{messages.width}",
-        "borderWidth": "{feedback.width.100}",
-        "borderRadius": "{content.borderRadius}",
-        "transitionDuration": "{feedback.transitionDuration}"
+        "width": "{dimension.overlayWidth.base}",
+        "borderWidth": "{dimension.size.100}",
+        "borderRadius": "{dimension.radius.300}",
+        "transitionDuration": "{dimension.duration.200}"
       },
       "icon": {
-        "size": "{feedback.icon.size.500}"
+        "size": "{dimension.size.550}"
       },
       "content": {
-        "padding": "{feedback.padding.200}",
-        "gap": "{feedback.gap.400}"
+        "padding": "{dimension.space.400}",
+        "gap": "{dimension.space.400}"
       },
       "text": {
-        "gap": "{feedback.gap.100}"
+        "gap": "{dimension.space.100}"
       },
       "summary": {
-        "fontWeight": "{fonts.fontWeight.bold}",
-        "fontSize": "{fonts.fontSize.300}"
+        "fontWeight": "{typography.heading.xl.fontWeight}",
+        "fontSize": "{typography.body.md.fontSize}"
       },
       "detail": {
-        "fontWeight": "{fonts.fontWeight.regular}",
-        "fontSize": "{fonts.fontSize.200}"
+        "fontWeight": "{typography.body.lg.fontWeight}",
+        "fontSize": "{typography.body.sm.fontSize}"
       },
       "closeButton": {
-        "width": "{feedback.icon.size.400}",
-        "height": "{feedback.icon.size.400}",
-        "borderRadius": "{controls.borderRadius.100}",
+        "width": "{dimension.size.500}",
+        "height": "{dimension.size.500}",
+        "borderRadius": "{dimension.radius.300}",
         "focusRing": {
-          "width": "{focusRing.width}",
-          "style": "{focusRing.style}",
-          "offset": "{focusRing.offset}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "offset": "{dimension.focusRing.offset}"
         }
       },
       "closeIcon": {
-        "size": "{feedback.icon.size.200}"
+        "size": "{dimension.size.300}"
       }
     },
     "tag": {
       "colorScheme": {
         "light": {
           "primary": {
-            "background": "{primary.selectedBackground}",
-            "color": "{text.color}"
+            "background": "{background.brand.bold}",
+            "color": "{text.default}"
           },
           "secondary": {
-            "background": "{surface.200}",
-            "color": "{text.color}"
+            "background": "{background.disabled}",
+            "color": "{text.default}"
           },
           "success": {
-            "background": "{success.400}",
-            "color": "{success.900}"
+            "background": "{background.success.bold}",
+            "color": "{text.success}"
           },
           "info": {
-            "background": "{info.300}",
-            "color": "{info.900}"
+            "background": "{background.info.subtleHover}",
+            "color": "{text.info}"
           },
           "warn": {
-            "background": "{warn.300}",
-            "color": "{warn.900}"
+            "background": "{background.warning.subtleHover}",
+            "color": "{text.warning}"
           },
           "danger": {
-            "background": "{error.300}",
-            "color": "{error.900}"
+            "background": "{background.danger.subtleHover}",
+            "color": "{text.danger}"
           }
         }
       },
       "root": {
-        "fontSize": "{fonts.fontSize.100}",
-        "fontWeight": "{fonts.fontWeight.regular}",
-        "padding": "{media.padding.100} {media.padding.200}",
-        "gap": "{media.gap.100}",
-        "borderRadius": "{media.size.200}",
-        "roundedBorderRadius": "{media.borderRadius.400}"
+        "fontSize": "{typography.label.sm.fontSize}",
+        "fontWeight": "{typography.body.lg.fontWeight}",
+        "padding": "{dimension.space.100} {dimension.space.200}",
+        "gap": "{dimension.space.100}",
+        "borderRadius": "{dimension.size.200}",
+        "roundedBorderRadius": "{dimension.radius.500}"
       },
       "icon": {
-        "size": "{media.icon.size.100}"
+        "size": "{dimension.size.300}"
+      },
+      "extend": {
+        "fonts_fontFamily_base": "{typography.body.lg.fontFamily}",
+        "fonts_lineHeight_250": "{typography.caption.lineHeight}"
       }
     },
     "textarea": {
       "extend": {
-        "readonlyBackground": "{form.readonlyBackground}",
-        "borderWidth": "{form.borderWidth}",
-        "iconSize": "{form.icon.300}",
-        "minHeight": "{form.size.900}",
+        "readonlyBackground": "{background.neutral.subtleHover}",
+        "borderWidth": "{dimension.borderWidth.100}",
+        "iconSize": "{dimension.size.300}",
+        "minHeight": "{dimension.size.900}",
         "extXlg": {
-          "fontSize": "{fonts.fontSize.300}",
-          "paddingX": "{form.padding.300}",
-          "paddingY": "{form.padding.500}"
-        }
+          "fontSize": "{typography.body.md.fontSize}",
+          "paddingX": "{dimension.space.300}",
+          "paddingY": "{dimension.space.500}"
+        },
+        "focusRing_invalid": "{focusRing.invalid}",
+        "fonts_fontFamily_base": "{typography.body.lg.fontFamily}",
+        "fonts_lineHeight_250": "{typography.caption.lineHeight}",
+        "form_padding_500": "{dimension.space.500}",
+        "form_padding_700": "{dimension.space.700}"
       },
       "root": {
-        "background": "{form.background}",
-        "disabledBackground": "{form.disabledBackground}",
-        "filledBackground": "{form.filledBackground}",
-        "filledHoverBackground": "{form.filledHoverBackground}",
-        "filledFocusBackground": "{form.filledFocusBackground}",
-        "borderColor": "{form.borderColor}",
-        "hoverBorderColor": "{form.hoverBorderSecondaryColor}",
-        "focusBorderColor": "{form.focusBorderSecondaryColor}",
-        "invalidBorderColor": "{form.invalidBorderColor}",
-        "color": "{form.color}",
-        "disabledColor": "{form.disabledColor}",
-        "placeholderColor": "{form.placeholderColor}",
-        "invalidPlaceholderColor": "{form.invalidPlaceholderColor}",
+        "background": "{background.surface.field}",
+        "disabledBackground": "{background.disabled}",
+        "filledBackground": "{background.surface.field}",
+        "filledHoverBackground": "{background.surface.field}",
+        "filledFocusBackground": "{background.surface.field}",
+        "borderColor": "{border.default}",
+        "hoverBorderColor": "{border.brand}",
+        "focusBorderColor": "{border.brand}",
+        "invalidBorderColor": "{border.danger}",
+        "color": "{text.defaultHover}",
+        "disabledColor": "{text.muted}",
+        "placeholderColor": "{text.muted}",
+        "invalidPlaceholderColor": "{text.danger}",
         "shadow": "0",
-        "paddingX": "{form.padding.300}",
-        "paddingY": "{form.padding.300}",
-        "borderRadius": "{form.borderRadius.200}",
-        "transitionDuration": "{form.transitionDuration}",
+        "paddingX": "{dimension.space.300}",
+        "paddingY": "{dimension.space.300}",
+        "borderRadius": "{dimension.radius.300}",
+        "transitionDuration": "{dimension.duration.200}",
         "focusRing": {
-          "width": "{form.focusRing.width}",
-          "style": "{form.focusRing.style}",
-          "color": "{form.focusRing.color}",
-          "offset": "{form.focusRing.offset}",
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
           "shadow": "0"
         },
         "sm": {
-          "fontSize": "{fonts.fontSize.300}",
-          "paddingX": "{form.padding.300}",
-          "paddingY": "{form.padding.200}"
+          "fontSize": "{typography.body.md.fontSize}",
+          "paddingX": "{dimension.space.300}",
+          "paddingY": "{dimension.space.200}"
         },
         "lg": {
-          "fontSize": "{fonts.fontSize.300}",
-          "paddingX": "{form.padding.300}",
-          "paddingY": "{form.padding.400}"
+          "fontSize": "{typography.body.md.fontSize}",
+          "paddingX": "{dimension.space.300}",
+          "paddingY": "{dimension.space.400}"
         }
       }
     },
     "tieredmenu": {
       "extend": {
         "extSubmenu": {
-          "borderColor": "{content.borderColor}",
-          "background": "{content.background}"
+          "borderColor": "{border.subtle}",
+          "background": "{background.surface.raised}"
         },
-        "iconSize": "{navigation.submenuIcon.size}",
+        "iconSize": "{typography.heading.sm.fontSize}",
         "extItem": {
           "caption": {
-            "gap": "{content.gap.100}",
-            "color": "{text.mutedColor}"
+            "gap": "{dimension.space.100}",
+            "color": "{text.muted}"
           }
-        }
+        },
+        "fonts_fontSize_200": "{typography.body.sm.fontSize}",
+        "fonts_fontSize_300": "{typography.body.md.fontSize}"
       },
       "root": {
-        "background": "{content.background}",
-        "borderColor": "{transparent}",
-        "color": "{content.color}",
-        "borderRadius": "{content.borderRadius}",
-        "shadow": "{navigation.shadow}",
-        "transitionDuration": "{feedback.transitionDuration}"
+        "background": "{background.surface.raised}",
+        "borderColor": "{border.transparent}",
+        "color": "{text.default}",
+        "borderRadius": "{dimension.radius.300}",
+        "shadow": "{shadow.400}",
+        "transitionDuration": "{dimension.duration.200}"
       },
       "list": {
-        "padding": "{navigation.list.padding.100}",
-        "gap": "{navigation.list.gap}"
+        "padding": "{dimension.space.100}",
+        "gap": "{dimension.space.100}"
       },
       "item": {
-        "focusBackground": "{navigation.item.focusBackground}",
-        "activeBackground": "{navigation.item.activeBackground}",
-        "color": "{navigation.item.color}",
-        "focusColor": "{navigation.item.focusColor}",
-        "activeColor": "{navigation.item.activeColor}",
-        "padding": "{navigation.item.padding}",
-        "borderRadius": "{navigation.item.borderRadius}",
-        "gap": "{navigation.item.gap}",
+        "focusBackground": "{background.neutral.subtleHover}",
+        "activeBackground": "{background.selected}",
+        "color": "{text.default}",
+        "focusColor": "{text.default}",
+        "activeColor": "{text.onBold}",
+        "padding": "{dimension.space.200} {dimension.space.300}",
+        "borderRadius": "{dimension.radius.200}",
+        "gap": "{dimension.space.200}",
         "icon": {
-          "color": "{navigation.item.icon.color}",
-          "focusColor": "{navigation.item.icon.focusColor}",
-          "activeColor": "{navigation.item.icon.activeColor}"
+          "color": "{icon.strong}",
+          "focusColor": "{icon.strong}",
+          "activeColor": "{icon.onBold}"
         }
       },
       "submenu": {
-        "mobileIndent": "{overlay.popover.padding.100}"
+        "mobileIndent": "{dimension.space.300}"
       },
       "separator": {
-        "borderColor": "{content.borderColor}"
+        "borderColor": "{border.subtle}"
       }
     },
     "timeline": {
       "extend": {
         "extEvent": {
-          "gap": "{feedback.gap.100}"
-        }
+          "gap": "{dimension.space.100}"
+        },
+        "fonts_fontFamily_base": "{typography.body.lg.fontFamily}",
+        "fonts_fontSize_300": "{typography.body.md.fontSize}",
+        "fonts_lineHeight_500": "{typography.body.md.lineHeight}",
+        "text_color": "{text.default}"
       },
       "event": {
-        "minHeight": "{feedback.height.900}"
+        "minHeight": "{dimension.size.800}"
       },
       "vertical": {
         "eventContent": {
-          "padding": "0 {feedback.padding.100}"
+          "padding": "0 {dimension.space.200}"
         }
       },
       "horizontal": {
         "eventContent": {
-          "padding": "{feedback.padding.100} 0"
+          "padding": "{dimension.space.200} 0"
         }
       },
       "eventMarker": {
-        "size": "{feedback.width.500}",
-        "borderRadius": "{content.borderRadius}",
-        "borderWidth": "{feedback.width.200}",
-        "background": "{content.background}",
-        "borderColor": "{primary.color}",
+        "size": "{dimension.size.300}",
+        "borderRadius": "{dimension.radius.300}",
+        "borderWidth": "{dimension.size.150}",
+        "background": "{background.surface.raised}",
+        "borderColor": "{border.checked}",
         "content": {
-          "borderRadius": "{content.borderRadius}",
-          "size": "{feedback.width.400}",
-          "background": "{transparent}",
+          "borderRadius": "{dimension.radius.300}",
+          "size": "{dimension.size.250}",
+          "background": "{background.transparent}",
           "insetShadow": "none"
         }
       },
       "eventConnector": {
-        "color": "{content.borderColor}",
-        "size": "{feedback.width.100}"
+        "color": "{background.disabled}",
+        "size": "{dimension.size.100}"
       },
       "colorScheme": {
         "light": {
           "eventMarker": {
-            "background": "{content.background}",
-            "borderColor": "{primary.color}"
+            "background": "{background.surface.raised}",
+            "borderColor": "{border.checked}"
           }
         },
         "dark": {
           "eventMarker": {
-            "background": "{content.background}",
-            "borderColor": "{primary.color}"
+            "background": "{background.surface.raised}",
+            "borderColor": "{border.checked}"
           }
         }
       }
@@ -4880,20 +4662,20 @@
     "togglebutton": {
       "extend": {
         "ext": {
-          "gap": "{form.gap.300}"
+          "gap": "{dimension.space.300}"
         },
         "iconSize": {
-          "sm": "{controls.iconOnly.200}",
-          "md": "{controls.iconOnly.300}",
-          "lg": "{controls.iconOnly.400}"
-        },
-        "iconOnlyWidth": "{form.size.600}",
-        "hoverBorderColor": "{surface.300}",
-        "checkedHoverColor": "{text.extend.colorInverted}",
-        "checkedHoverBackground": "{surface.800}",
-        "checkedHoverBorderColor": "{surface.800}",
+          "sm": "{dimension.size.300}",
+          "md": "{dimension.size.350}",
+          "lg": "{dimension.size.400}"
+        },
+        "iconOnlyWidth": "{dimension.size.600}",
+        "hoverBorderColor": "{border.default}",
+        "checkedHoverColor": "{text.onBold}",
+        "checkedHoverBackground": "{background.surface.inverse}",
+        "checkedHoverBorderColor": "{border.inverse}",
         "extXlg": {
-          "padding": "{form.padding.500} {form.padding.600}",
+          "padding": "{dimension.space.500} {dimension.space.600}",
           "iconOnlyWidth": "4.0714rem"
         },
         "extSm": {
@@ -4901,56 +4683,63 @@
         },
         "extLg": {
           "iconOnlyWidth": "3.5714rem"
-        }
+        },
+        "fonts_fontFamily_heading": "{typography.heading.lg.fontFamily}",
+        "fonts_fontSize_500": "{typography.heading.sm.fontSize}",
+        "fonts_fontWeight_demibold": "{typography.heading.lg.fontWeight}",
+        "fonts_lineHeight_250": "{typography.caption.lineHeight}",
+        "fonts_lineHeight_300": "{typography.label.sm.lineHeight}",
+        "fonts_lineHeight_500": "{typography.body.md.lineHeight}",
+        "fonts_lineHeight_550": "{typography.body.lg.lineHeight}"
       },
       "colorScheme": {
         "light": {
           "root": {
-            "background": "{surface.200}",
-            "hoverBackground": "{surface.300}",
-            "borderColor": "{surface.200}",
-            "color": "{text.color}",
-            "hoverColor": "{text.color}",
-            "checkedBackground": "{surface.900}",
-            "checkedColor": "{text.extend.colorInverted}",
-            "checkedBorderColor": "{surface.900}",
-            "disabledBackground": "{form.disabledBackground}",
-            "disabledBorderColor": "{form.disabledBackground}",
-            "disabledColor": "{form.disabledColor}",
-            "invalidBorderColor": "{form.invalidBorderColor}"
+            "background": "{background.disabled}",
+            "hoverBackground": "{text.disabled}",
+            "borderColor": "{border.subtle}",
+            "color": "{text.default}",
+            "hoverColor": "{text.default}",
+            "checkedBackground": "{background.selected}",
+            "checkedColor": "{text.onBold}",
+            "checkedBorderColor": "{border.strong}",
+            "disabledBackground": "{background.disabled}",
+            "disabledBorderColor": "{border.subtle}",
+            "disabledColor": "{text.muted}",
+            "invalidBorderColor": "{border.danger}"
           },
           "icon": {
-            "color": "{text.color}",
-            "hoverColor": "{text.color}",
-            "checkedColor": "{text.extend.colorInverted}",
-            "disabledColor": "{form.disabledColor}"
+            "color": "{icon.strong}",
+            "hoverColor": "{icon.strong}",
+            "checkedColor": "{icon.onBold}",
+            "disabledColor": "{icon.subtle}"
           },
           "content": {
-            "checkedBackground": "{transparent}"
+            "checkedBackground": "{background.transparent}"
           }
         }
       },
       "root": {
-        "padding": "{form.padding.200} {form.padding.400}",
-        "borderRadius": "{form.borderRadius.300}",
-        "gap": "{form.gap.200}",
-        "fontWeight": "{fonts.fontWeight.demibold}",
+        "padding": "{dimension.space.200} {dimension.space.400}",
+        "borderRadius": "{dimension.radius.max}",
+        "gap": "{dimension.space.200}",
+        "fontWeight": "{typography.heading.lg.fontWeight}",
         "focusRing": {
-          "width": "{form.focusRing.width}",
-          "style": "{form.focusRing.style}",
-          "color": "{form.focusRing.color}",
-          "offset": "{form.focusRing.offset}",
-          "shadow": "{focusRing.shadow}"
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
+          "shadow": "{shadow.200}"
         },
         "sm": {
-          "fontSize": "{fonts.fontSize.200}",
-          "padding": "{form.padding.100} {form.padding.300}"
+          "fontSize": "{typography.body.sm.fontSize}",
+          "padding": "{dimension.space.100} {dimension.space.300}"
         },
         "lg": {
-          "fontSize": "{fonts.fontSize.500}",
-          "padding": "{form.padding.400} {form.padding.600}"
+          "fontSize": "{typography.heading.sm.fontSize}",
+          "padding": "{dimension.space.400} {dimension.space.600}"
         },
-        "transitionDuration": "{form.transitionDuration}"
+        "transitionDuration": "{dimension.duration.200}"
       },
       "content": {
         "checkedShadow": "none",
@@ -4968,105 +4757,116 @@
       "colorScheme": {
         "light": {
           "root": {
-            "background": "{surface.400}",
-            "hoverBackground": "{surface.500}",
-            "disabledBackground": "{form.disabledBackground}",
-            "checkedBackground": "{surface.900}",
-            "checkedHoverBackground": "{surface.800}"
+            "background": "{text.hover.subtle}",
+            "hoverBackground": "{background.neutral.bold}",
+            "disabledBackground": "{background.disabled}",
+            "checkedBackground": "{background.selected}",
+            "checkedHoverBackground": "{background.surface.inverse}"
           },
           "handle": {
-            "background": "{form.backgroundHandler}",
-            "hoverBackground": "{form.backgroundHandler}",
-            "disabledBackground": "{form.disabledColor}",
-            "checkedBackground": "{surface.0}",
-            "checkedHoverBackground": "{surface.0}",
-            "color": "{text.color}",
-            "hoverColor": "{text.color}",
-            "checkedColor": "{text.color}",
-            "checkedHoverColor": "{text.color}"
+            "background": "{text.staticLight}",
+            "hoverBackground": "{text.staticLight}",
+            "disabledBackground": "{background.neutral.bold}",
+            "checkedBackground": "{background.surface.canvas}",
+            "checkedHoverBackground": "{background.surface.canvas}",
+            "color": "{text.default}",
+            "hoverColor": "{text.default}",
+            "checkedColor": "{text.default}",
+            "checkedHoverColor": "{text.default}"
           }
         }
       },
       "root": {
-        "width": "{form.size.600}",
-        "height": "{form.size.400}",
-        "borderRadius": "{form.borderRadius.300}",
-        "gap": "{form.gap.100}",
-        "borderWidth": "{form.borderWidth}",
+        "width": "{dimension.size.600}",
+        "height": "{dimension.size.400}",
+        "borderRadius": "{dimension.radius.max}",
+        "gap": "{dimension.space.100}",
+        "borderWidth": "{dimension.borderWidth.100}",
         "shadow": "none",
         "focusRing": {
-          "width": "{form.focusRing.width}",
-          "style": "{form.focusRing.style}",
-          "color": "{form.focusRing.color}",
-          "offset": "{form.focusRing.offset}",
+          "width": "{dimension.borderWidth.300}",
+          "style": "{dimension.focusRing.style}",
+          "color": "{background.success.subtleHover}",
+          "offset": "{dimension.focusRing.offset}",
           "shadow": "0"
         },
-        "borderColor": "{transparent}",
-        "hoverBorderColor": "{transparent}",
-        "checkedBorderColor": "{transparent}",
-        "checkedHoverBorderColor": "{transparent}",
-        "invalidBorderColor": "{form.invalidBorderColor}",
-        "transitionDuration": "{form.transitionDuration}",
-        "slideDuration": "{form.transitionDuration}"
+        "borderColor": "{border.transparent}",
+        "hoverBorderColor": "{border.transparent}",
+        "checkedBorderColor": "{border.transparent}",
+        "checkedHoverBorderColor": "{border.transparent}",
+        "invalidBorderColor": "{border.danger}",
+        "transitionDuration": "{dimension.duration.200}",
+        "slideDuration": "{dimension.duration.200}"
       },
       "handle": {
-        "borderRadius": "{form.borderRadius.300}",
-        "size": "{form.size.300}"
+        "borderRadius": "{dimension.radius.max}",
+        "size": "{dimension.size.300}"
+      },
+      "extend": {
+        "focusRing_invalid": "{focusRing.invalid}",
+        "focusRing_success": "{focusRing.success}",
+        "focusRing_width": "{dimension.space.100}"
       }
     },
     "tooltip": {
       "colorScheme": {
         "light": {
           "root": {
-            "background": "{surface.900}",
-            "color": "{text.extend.colorInverted}"
+            "background": "{background.selected}",
+            "color": "{text.onBold}"
           }
         }
       },
       "root": {
-        "maxWidth": "{overlay.width}",
-        "gutter": "{feedback.gap.100}",
-        "shadow": "{overlay.popover.shadow}",
-        "padding": "{feedback.padding.100} {feedback.padding.200} ",
-        "borderRadius": "{overlay.popover.borderRadius}"
+        "maxWidth": "{dimension.overlayWidth.base}",
+        "gutter": "{dimension.space.100}",
+        "shadow": "{shadow.400}",
+        "padding": "{dimension.space.200} {dimension.space.400} ",
+        "borderRadius": "{dimension.radius.200}"
+      },
+      "extend": {
+        "fonts_fontFamily_base": "{typography.body.lg.fontFamily}",
+        "fonts_fontSize_200": "{typography.body.sm.fontSize}",
+        "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}",
+        "fonts_lineHeight_300": "{typography.label.sm.lineHeight}"
       }
     },
     "tree": {
       "root": {
-        "background": "{content.background}",
-        "color": "{content.color}",
-        "padding": "{data.padding.400}",
-        "gap": "{data.gap.100}",
-        "indent": "{data.padding.400}"
+        "background": "{background.surface.raised}",
+        "color": "{text.default}",
+        "padding": "{dimension.space.400}",
+        "gap": "{dimension.space.100}",
+        "indent": "{dimension.space.400}"
       },
       "node": {
-        "padding": "{data.padding.200} {data.padding.300}",
-        "color": "{text.color}",
-        "selectedColor": "{text.extend.colorInverted}",
-        "gap": "{data.gap.100}"
+        "padding": "{dimension.space.200} {dimension.space.300}",
+        "color": "{text.default}",
+        "selectedColor": "{text.onBold}",
+        "gap": "{dimension.space.100}"
       },
       "nodeIcon": {
-        "selectedColor": "{text.extend.colorInverted}"
+        "selectedColor": "{icon.onBold}"
       },
       "nodeToggleButton": {
-        "borderRadius": "{data.borderRadius}",
-        "size": "{data.icon.size.400}",
-        "selectedHoverBackground": "{surface.900}"
+        "borderRadius": "{dimension.radius.100}",
+        "size": "{dimension.size.450}",
+        "selectedHoverBackground": "{background.selected}"
       },
       "loadingIcon": {
-        "size": "{data.icon.size.100}"
+        "size": "{dimension.size.300}"
       },
       "filter": {
-        "margin": "0 0 {data.padding.200} 0"
+        "margin": "0 0 {dimension.space.200} 0"
       }
     },
     "overlaybadge": {
       "root": {
         "outline": {
           "width": "0rem",
-          "color": "{transparent}"
+          "color": "{text.transparent}"
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/lib/shared/index.ts b/src/lib/shared/index.ts
new file mode 100644
index 00000000..4aaf8f92
--- /dev/null
+++ b/src/lib/shared/index.ts
@@ -0,0 +1 @@
+export * from './public_api';
diff --git a/tsconfig.json b/tsconfig.json
index 28fa071e..cb8928d7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,6 +14,7 @@
     "importHelpers": true,
     "target": "ES2022",
     "module": "preserve",
+    "baseUrl": ".",
     "paths": {
       "@cdek-it/angular-ui-kit": ["src/lib/public_api.ts"],
       "@cdek-it/angular-ui-kit/*": ["src/lib/*/public_api.ts"]