<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GNexus UI Kit</title>
<link rel="stylesheet" href="/assets/fonts/phosphor-icons/src/css/icons.css">
<link rel="stylesheet" href="/assets/libs/highlight/styles/base16/summerfruit-dark.min.css">
<link rel="stylesheet" href="/css/demo.css">
<link rel="icon" type="image/svg+xml" href="/assets/imgs/gnexus-mark.svg">
<meta name="theme-color" content="#16161E">
</head>
<body>
<header class="nav-topbar">
<button class="nav-topbar-toggle" type="button" data-navigation-toggle aria-controls="docs-navigation" aria-expanded="false">
<i class="ph ph-sidebar-simple"></i>
<span>Menu</span>
</button>
<div class="nav-topbar-brand">
<img src="/assets/imgs/gnexus-mark.svg" alt="" aria-hidden="true">
<span>GNexus UI Kit</span>
</div>
<div class="nav-topbar-current" data-docs-current-section>Typography</div>
</header>
<main class="container docs-page">
<header class="section docs-intro">
<h1 class="contrast">GNexus UI Kit</h1>
<p>Набор базовых элементов интерфейса.</p>
</header>
<div class="docs-layout">
<div class="nav-drawer-backdrop" data-navigation-close></div>
<aside class="nav-drawer" id="docs-navigation" data-navigation-drawer aria-label="Навигация по UI kit" aria-hidden="true" inert>
<header class="nav-drawer-header">
<div>
<div class="nav-drawer-title">Sections</div>
<div class="nav-drawer-subtitle">Component library</div>
</div>
<button class="nav-drawer-close" type="button" data-navigation-close aria-label="Close navigation">
<i class="ph ph-x"></i>
</button>
</header>
<nav class="nav-drawer-body">
<ul class="list list-nav">
<li class="list-item list-item-active">
<a class="list-action" href="#typography">
<span class="list-label"><i class="ph ph-text-aa"></i> Typography</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#colors">
<span class="list-label"><i class="ph ph-palette"></i> Palette</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#buttons">
<span class="list-label"><i class="ph ph-hand-pointing"></i> Buttons</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#forms">
<span class="list-label"><i class="ph ph-textbox"></i> Forms</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#utilities">
<span class="list-label"><i class="ph ph-ruler"></i> Utilities</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#editable-string">
<span class="list-label"><i class="ph ph-pencil-simple"></i> Editable String</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#navigation-overlays">
<span class="list-label"><i class="ph ph-stack"></i> Navigation & Overlays</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#navigation-shell">
<span class="list-label"><i class="ph ph-sidebar-simple"></i> Navigation Shell</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#lists">
<span class="list-label"><i class="ph ph-list-bullets"></i> Lists</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#badges">
<span class="list-label"><i class="ph ph-tag"></i> Badges</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#alerts">
<span class="list-label"><i class="ph ph-warning"></i> Alerts</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#tables">
<span class="list-label"><i class="ph ph-table"></i> Tables</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#data-patterns">
<span class="list-label"><i class="ph ph-chart-bar"></i> Data Patterns</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#page-header">
<span class="list-label"><i class="ph ph-browser"></i> Page Header</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#description-list">
<span class="list-label"><i class="ph ph-list-dashes"></i> Key-Value</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#progress">
<span class="list-label"><i class="ph ph-activity"></i> Progress</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#steps">
<span class="list-label"><i class="ph ph-list-numbers"></i> Steps</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#chips">
<span class="list-label"><i class="ph ph-tag"></i> Chips</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#avatar">
<span class="list-label"><i class="ph ph-user-circle"></i> Avatar</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#timeline">
<span class="list-label"><i class="ph ph-clock"></i> Timeline</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#accordion">
<span class="list-label"><i class="ph ph-caret-down"></i> Accordion</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#tabs">
<span class="list-label"><i class="ph ph-tabs"></i> Tabs</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#drawer">
<span class="list-label"><i class="ph ph-sidebar"></i> Drawer</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#toasts">
<span class="list-label"><i class="ph ph-notification"></i> Toasts</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#cards">
<span class="list-label"><i class="ph ph-squares-four"></i> Cards</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#modals">
<span class="list-label"><i class="ph ph-browser"></i> Modals</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#confirm-dialog">
<span class="list-label"><i class="ph ph-warning"></i> Confirm Dialog</span>
</a>
</li>
</ul>
</nav>
<footer class="nav-drawer-footer">
<span>GNexus UI Kit v0.2</span>
<span>© GNexus</span>
</footer>
</aside>
<div class="docs-content">
<section class="section docs-section" id="typography">
<h2 class="section-title">Typography</h2>
<p class="docs-section-description">
Базовая типографика задаёт размеры заголовков, текстовые состояния и моноширинный код.
Используй семантические теги, а служебные классы добавляй для вариаций текста.
</p>
<div class="block">
<h1>Heading H1</h1>
<h2>Heading H2</h2>
<h3>Heading H3</h3>
<h4>Heading H4</h4>
<h5>Heading H5</h5>
<h6>Heading H6</h6>
</div>
<div class="block">
<span class="eyebrow">System label</span>
<p class="text-lead">
Lead text выделяет вводный абзац, описание страницы или важный контекст перед набором действий.
</p>
<p class="text-primary">
Основной текст интерфейса. Используется для контента.
</p>
<p class="text-secondary">
Вторичный текст, комментарии, подписи.
</p>
<p class="text-muted">
Приглушённый текст, подсказки.
</p>
<p class="caption">
Caption text для технических подписей, footnote и compact metadata.
</p>
</div>
<div class="block">
<p>
Состояния текста:
<span class="text-success">success</span>,
<span class="text-warning">warning</span>,
<span class="text-danger">danger</span>,
<span class="text-info">info</span>.
</p>
<p>
Inline code <code class="code">npm run build</code> и keyboard hint <span class="kbd">esc</span>.
</p>
</div>
<div class="block">
<blockquote class="quote">
Интерфейс должен оставаться читаемым даже в плотных технических сценариях.
<cite>GNexus UI Kit</cite>
</blockquote>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Typography HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><h1 class="contrast">Dashboard</h1>
<span class="eyebrow">System label</span>
<p class="text-lead">Вводный текст страницы.</p>
<p class="text-primary">Основной текст интерфейса.</p>
<p class="text-muted">Приглушённая подсказка.</p>
<code class="code">npm run build</code>
<span class="kbd">esc</span></code></pre>
</div>
</section>
<section class="section docs-section" id="colors">
<h2 class="section-title">Color Palette</h2>
<p class="docs-section-description">
Палитра построена вокруг тёмной базы, светлого primary-текста и ярких статусных цветов.
Классы `bg-*` нужны для быстрых цветовых маркеров и демонстрации токенов.
</p>
<div class="palette">
<div class="color">
<div class="color-box bg-primary"></div>
<span>Primary</span>
</div>
<div class="color">
<div class="color-box bg-secondary"></div>
<span>Secondary</span>
</div>
<div class="color">
<div class="color-box bg-accent"></div>
<span>Accent</span>
</div>
<div class="color">
<div class="color-box bg-info"></div>
<span>Info</span>
</div>
<div class="color">
<div class="color-box bg-success"></div>
<span>Success</span>
</div>
<div class="color">
<div class="color-box bg-warning"></div>
<span>Warning</span>
</div>
<div class="color">
<div class="color-box bg-error"></div>
<span>Error</span>
</div>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Palette HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="color-box bg-primary"></div>
<div class="color-box bg-secondary"></div>
<div class="color-box bg-success"></div>
<div class="color-box bg-warning"></div>
<div class="color-box bg-error"></div></code></pre>
</div>
</section>
<section class="section docs-section" id="buttons">
<h2 class="section-title">Buttons</h2>
<p class="docs-section-description">
Кнопки собираются из базового класса `.btn`, цветового модификатора и опционального размера.
Для иконок добавляй `.with-icon`, а состояние загрузки помечай `.loading-state`.
</p>
<div class="block demo-actions">
<button class="btn btn-primary">Primary</button>
<button class="btn btn-primary with-icon"><i class="ph ph-house"></i> Primary</button>
<button class="btn btn-secondary with-icon"><i class="ph ph-code"></i> Secondary</button>
<button class="btn btn-accent with-icon"><i class="ph ph-envelope-simple"></i> Accent</button>
<button class="btn btn-info with-icon"><i class="ph ph-question"></i> Info</button>
<button class="btn btn-danger with-icon"><i class="ph ph-brackets-curly"></i> Danger</button>
<button class="btn btn-warning with-icon"><i class="ph ph-warning"></i> Warning</button>
<button class="btn btn-success with-icon"><i class="ph ph-codepen-logo"></i> Success</button>
</div>
<div class="block demo-actions">
<button class="btn btn-primary btn-small">Small</button>
<button class="btn btn-primary with-icon btn-small"><i class="ph ph-warning"></i> Small</button>
<button class="btn btn-warning btn-small with-icon"><i class="ph ph-warning"></i> Small</button>
<button class="btn btn-primary">Normal</button>
<button class="btn btn-primary btn-large">Large</button>
</div>
<div class="block demo-actions">
<button class="btn btn-primary" disabled>Disabled</button>
<button class="btn btn-primary with-icon" disabled>
<i class="ph ph-warning"></i> Disabled
</button>
<button class="btn btn-success btn-small with-icon loading-state" disabled><i class="ph-bold ph-spinner"></i> Loading</button>
<button class="btn btn-warning with-icon loading-state" disabled><i class="ph-bold ph-spinner"></i> Loading</button>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Buttons HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary with-icon">
<i class="ph ph-code"></i>
Secondary
</button>
<button class="btn btn-warning btn-small">Small</button>
<button class="btn btn-success with-icon loading-state" disabled>
<i class="ph-bold ph-spinner"></i>
Loading
</button></code></pre>
</div>
</section>
<section class="section docs-section" id="forms">
<h2 class="section-title">Forms</h2>
<p class="docs-section-description">
Формы используют `.form-group`, `.label` и `.input`.
Ошибки задаются на label через `.error`, а пояснение выводится соседним `.input-info`.
</p>
<div class="block form-group">
<label class="label">
Text input
<input type="text" class="input" placeholder="Введите текст">
</label>
</div>
<div class="block form-group">
<label class="label error">
Text input
<i class="ph ph-user"></i>
<input type="text" class="input" placeholder="Введите текст">
</label>
<div class="input-info"><i class="ph ph-warning-circle"></i> Field cannot be empty</div>
</div>
<div class="block form-group">
<label class="label">
Password
<input type="password" class="input" placeholder="••••••">
</label>
</div>
<div class="block form-grid">
<div class="form-group">
<label class="label success">
Validated
<input type="text" class="input" value="Release Plan">
</label>
<div class="input-info"><i class="ph ph-check-circle"></i> Looks good</div>
</div>
<div class="form-group">
<label class="label warning">
Needs review
<input type="text" class="input" value="Draft">
</label>
<div class="input-info"><i class="ph ph-warning-circle"></i> Check before publishing</div>
</div>
<div class="form-group">
<label class="label">
Readonly
<input type="text" class="input" value="run_1048" readonly>
</label>
</div>
<div class="form-group">
<label class="label">
Disabled
<input type="text" class="input" value="Locked" disabled>
</label>
</div>
</div>
<div class="block form-grid">
<div class="form-group">
<label class="label">
Search
<i class="ph ph-magnifying-glass"></i>
<input type="search" class="input" value="release" placeholder="Search">
</label>
</div>
<div class="form-group">
<label class="label">
Number
<input type="number" class="input" value="42" min="0" max="100">
</label>
</div>
</div>
<div class="block">
<fieldset class="fieldset">
<legend class="legend">Date & Time</legend>
<div class="form-grid">
<div class="form-group">
<label class="label">
Date
<i class="ph ph-calendar-blank"></i>
<input type="date" class="input input-date" value="2026-04-23" data-date-picker>
</label>
</div>
<div class="form-group">
<label class="label">
Time
<i class="ph ph-clock"></i>
<input type="time" class="input input-time" value="14:30" data-date-picker>
</label>
</div>
<div class="form-group">
<label class="label">
Date & time
<i class="ph ph-calendar-dots"></i>
<input type="datetime-local" class="input input-datetime" value="2026-04-23T14:30" data-date-picker>
</label>
</div>
<div class="form-group">
<label class="label">
Month
<i class="ph ph-calendar"></i>
<input type="month" class="input input-month" value="2026-04" data-date-picker>
</label>
</div>
</div>
</fieldset>
</div>
<div class="block form-group">
<label class="label">
Text Area
<i class="ph ph-text-aa"></i>
<textarea class="input" placeholder="Введите текст"></textarea>
</label>
</div>
<div class="block">
<fieldset class="fieldset">
<legend class="legend">Fieldset</legend>
<div class="form-grid">
<div class="form-group">
<label class="label">
First name
<input type="text" class="input" value="Ada">
</label>
</div>
<div class="form-group">
<label class="label">
Last name
<input type="text" class="input" value="Lovelace">
</label>
</div>
</div>
</fieldset>
</div>
<div class="block">
<label class="file-upload">
<i class="ph ph-upload-simple"></i>
Upload file
<input type="file">
</label>
</div>
<div class="block">
<div class="file-upload-panel">
<form class="file-upload-form" action="#" method="post" enctype="multipart/form-data">
<div class="file-upload-header">
<div class="file-upload-heading">
<h3 class="file-upload-title">Upload files</h3>
<p class="file-upload-description">Attach documents, archives, screenshots or product images for review.</p>
</div>
<span class="badge badge-info">Max 12 MB</span>
</div>
<label class="file-upload-dropzone">
<span class="file-upload-icon" aria-hidden="true">
<i class="ph ph-cloud-arrow-up"></i>
</span>
<span class="file-upload-body">
<span class="file-upload-primary">Choose files</span>
<span class="file-upload-secondary">Images get thumbnails, other files show their type</span>
</span>
<input type="file" name="files" multiple data-file-upload-input>
</label>
<div class="file-upload-preview" data-file-upload-preview hidden></div>
<div class="file-upload-actions">
<button class="btn btn-secondary btn-small" type="reset">Reset</button>
<button class="btn btn-accent btn-small with-icon" type="submit">
<i class="ph ph-upload-simple"></i>
Upload
</button>
</div>
</form>
</div>
</div>
<div class="block range">
<label class="label">
Range
<input type="range" min="0" max="100" value="64">
</label>
</div>
<div class="block form-group">
<label class="label">
Select
<div class="select-wrap">
<select class="input select">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</label>
</div>
<div class="block form-group">
<label class="label">
Select
<i class="ph ph-selection-all"></i>
<div class="select-wrap">
<select class="input select">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</label>
</div>
<div class="block form-group">
<label class="label error">
Advanced Select
<i class="ph ph-user"></i>
<input type="text" class="input advanced-select-input" placeholder="Search">
</label>
<div class="advanced-select-container"></div>
<div class="input-info"><i class="ph ph-warning-circle"></i> Field cannot be empty</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", e => {
setTimeout(() => {
document.querySelector(".advanced-select-container").append(advancedSelect(
document.querySelector(".advanced-select-input"),
{
"name_1": "Joe",
"name_2": "James",
"name_3": "Jack",
"name_4": "Eliza",
"name_5": "Emily",
"name_6": "Eleanor",
"name_7": "Ella",
"name_8": "Ellie",
"name_9": "John",
"name_10": "David"
},
"Nothing found"
));
}, 300);
});
</script>
<div class="block form-group">
<label class="checkbox">
<input type="checkbox">
<span class="checkbox-control" aria-hidden="true"></span>
<span class="checkbox-label">Checkbox 1</span>
</label>
<label class="checkbox mt-3">
<input type="checkbox">
<span class="checkbox-control" aria-hidden="true"></span>
<span class="checkbox-label">Checkbox 2</span>
</label>
<label class="checkbox mt-3">
<input type="checkbox" disabled>
<span class="checkbox-control" aria-hidden="true"></span>
<span class="checkbox-label">Disabled</span>
</label>
<label class="checkbox mt-3">
<input type="checkbox" disabled checked>
<span class="checkbox-control" aria-hidden="true"></span>
<span class="checkbox-label">Disabled & Checked</span>
</label>
</div>
<div class="block form-group">
<label class="radio">
<input type="radio" name="radio-demo">
<span class="radio-control" aria-hidden="true"></span>
<span class="radio-label">Radio 1</span>
</label>
<label class="radio ml-2">
<input type="radio" name="radio-demo">
<span class="radio-control" aria-hidden="true"></span>
<span class="radio-label">Radio 2</span>
</label>
<label class="radio ml-2">
<input type="radio" name="radio-demo" disabled>
<span class="radio-control" aria-hidden="true"></span>
<span class="radio-label">Radio 3</span>
</label>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Forms HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="form-group">
<label class="label error">
Project name
<i class="ph ph-user"></i>
<input class="input" type="text" placeholder="Launch Plan">
</label>
<div class="input-info">
<i class="ph ph-warning-circle"></i>
Field cannot be empty
</div>
</div>
<fieldset class="fieldset">
<legend class="legend">Fieldset</legend>
<label class="label success">
Validated
<input class="input" type="text" value="Release Plan">
</label>
</fieldset>
<label class="file-upload">
Upload file
<input type="file">
</label>
<fieldset class="fieldset">
<legend class="legend">Date & Time</legend>
<div class="form-grid">
<label class="label">
Date
<i class="ph ph-calendar-blank"></i>
<input class="input input-date" type="date" value="2026-04-23" data-date-picker>
</label>
<label class="label">
Time
<i class="ph ph-clock"></i>
<input class="input input-time" type="time" value="14:30" data-date-picker>
</label>
<label class="label">
Date & time
<i class="ph ph-calendar-dots"></i>
<input class="input input-datetime" type="datetime-local" value="2026-04-23T14:30" data-date-picker>
</label>
</div>
</fieldset>
<div class="file-upload-panel">
<form class="file-upload-form" enctype="multipart/form-data">
<div class="file-upload-header">
<div class="file-upload-heading">
<h3 class="file-upload-title">Upload files</h3>
<p class="file-upload-description">Attach documents, archives or images.</p>
</div>
<span class="badge badge-info">Max 12 MB</span>
</div>
<label class="file-upload-dropzone">
<span class="file-upload-icon" aria-hidden="true">
<i class="ph ph-cloud-arrow-up"></i>
</span>
<span class="file-upload-body">
<span class="file-upload-primary">Choose files</span>
<span class="file-upload-secondary">Images get thumbnails, other files show their type</span>
</span>
<input type="file" name="files" multiple data-file-upload-input>
</label>
<div class="file-upload-preview" data-file-upload-preview hidden></div>
<div class="file-upload-actions">
<button class="btn btn-secondary btn-small" type="reset">Reset</button>
<button class="btn btn-accent btn-small" type="submit">Upload</button>
</div>
</form>
</div></code></pre>
</div>
</section>
<section class="section docs-section" id="utilities">
<h2 class="section-title">Utilities</h2>
<p class="docs-section-description">
Utilities дают предсказуемую систему отступов, размеров, раскладки и текстовых правок без создания новых компонентов.
Spacing scale используется и в SCSS-переменных, и в utility-классах.
</p>
<div class="block">
<h3 class="block-title">Spacing scale</h3>
<div class="table-wrapper">
<table class="table table-compact">
<caption class="table-caption">Spacing tokens</caption>
<thead class="table-head">
<tr class="table-row">
<th>Token</th>
<th>Value</th>
<th>Alias</th>
<th>Utility examples</th>
</tr>
</thead>
<tbody class="table-body">
<tr class="table-row">
<td><code class="code">$space-0</code></td>
<td>0</td>
<td>-</td>
<td><code class="code">m-0</code> <code class="code">p-0</code> <code class="code">g-0</code></td>
</tr>
<tr class="table-row">
<td><code class="code">$space-1</code></td>
<td>5px</td>
<td><code class="code">$space-xs</code></td>
<td><code class="code">mt-1</code> <code class="code">px-1</code></td>
</tr>
<tr class="table-row">
<td><code class="code">$space-2</code></td>
<td>8px</td>
<td><code class="code">$space-sm</code></td>
<td><code class="code">mb-2</code> <code class="code">g-2</code></td>
</tr>
<tr class="table-row">
<td><code class="code">$space-3</code></td>
<td>12px</td>
<td>-</td>
<td><code class="code">p-3</code> <code class="code">gy-3</code></td>
</tr>
<tr class="table-row">
<td><code class="code">$space-4</code></td>
<td>15px</td>
<td><code class="code">$space-md</code></td>
<td><code class="code">mx-4</code> <code class="code">gx-4</code></td>
</tr>
<tr class="table-row">
<td><code class="code">$space-5</code></td>
<td>18px</td>
<td>-</td>
<td><code class="code">pt-5</code> <code class="code">pb-5</code></td>
</tr>
<tr class="table-row">
<td><code class="code">$space-6</code></td>
<td>22px</td>
<td><code class="code">$space-lg</code></td>
<td><code class="code">my-6</code> <code class="code">g-6</code></td>
</tr>
<tr class="table-row">
<td><code class="code">$space-8</code></td>
<td>34px</td>
<td><code class="code">$space-xl</code></td>
<td><code class="code">mt-8</code> <code class="code">p-8</code></td>
</tr>
<tr class="table-row">
<td><code class="code">$space-10</code></td>
<td>48px</td>
<td><code class="code">$space-xxl</code></td>
<td><code class="code">mb-10</code> <code class="code">py-10</code></td>
</tr>
<tr class="table-row">
<td><code class="code">$space-12</code></td>
<td>80px</td>
<td>-</td>
<td><code class="code">mt-12</code> <code class="code">pb-12</code></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="block">
<h3 class="block-title">Utility groups</h3>
<dl class="description-list">
<div class="description-list-row">
<dt class="description-list-term">Margin</dt>
<dd class="description-list-value">
<code class="code">m-*</code>
<code class="code">mt-*</code>
<code class="code">mr-*</code>
<code class="code">mb-*</code>
<code class="code">ml-*</code>
<code class="code">mx-*</code>
<code class="code">my-*</code>
</dd>
</div>
<div class="description-list-row">
<dt class="description-list-term">Padding</dt>
<dd class="description-list-value">
<code class="code">p-*</code>
<code class="code">pt-*</code>
<code class="code">pr-*</code>
<code class="code">pb-*</code>
<code class="code">pl-*</code>
<code class="code">px-*</code>
<code class="code">py-*</code>
</dd>
</div>
<div class="description-list-row">
<dt class="description-list-term">Gap</dt>
<dd class="description-list-value">
<code class="code">g-*</code>
<code class="code">gx-*</code>
<code class="code">gy-*</code>
</dd>
</div>
<div class="description-list-row">
<dt class="description-list-term">Layout</dt>
<dd class="description-list-value">
<code class="code">row</code>
<code class="code">column</code>
<code class="code">f-grid</code>
<code class="code">grid</code>
<code class="code">grid-2</code>
<code class="code">grid-3</code>
</dd>
</div>
<div class="description-list-row">
<dt class="description-list-term">Alignment</dt>
<dd class="description-list-value">
<code class="code">items-center</code>
<code class="code">justify-between</code>
<code class="code">justify-end</code>
</dd>
</div>
<div class="description-list-row">
<dt class="description-list-term">Text</dt>
<dd class="description-list-value">
<code class="code">fs-sm</code>
<code class="code">text-center</code>
<code class="code">text-uppercase</code>
<code class="code">text-nowrap</code>
</dd>
</div>
</dl>
</div>
<div class="block">
<h3 class="block-title">Spacing preview</h3>
<div class="grid-3 g-4">
<div class="alert alert-secondary m-0">g-4</div>
<div class="alert alert-primary m-0 p-5">p-5</div>
<div class="alert alert-warning m-0 px-6 py-3">px-6 py-3</div>
</div>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Utilities HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="grid-2 g-4 items-center">
<div class="p-5">Panel</div>
<div class="px-6 py-3 text-right">Actions</div>
</div></code></pre>
</div>
</section>
<section class="section docs-section" id="editable-string">
<h2 class="section-title">Editable String</h2>
<p class="docs-section-description">
Editable String превращает обычный контейнер с текстом в inline-редактор.
Компонент возвращает DOM-элемент с API `editableString`.
</p>
<div class="block">
<div class="editable-example fs-lg">Hello world</div>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Editable String HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="editable-example">Hello world</div></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Editable String JS</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-javascript">const editor = editableString(document.querySelector(".editable-example"));
editor.editableString.onChange(component => {
console.log(component.value);
});</code></pre>
</div>
</section>
<script>
document.addEventListener("DOMContentLoaded", e => {
setTimeout(() => {
const edstr = editableString(document.querySelector(".editable-example"));
edstr.editableString.onSwitch(component => {
console.log("SWITCH", component);
});
edstr.editableString.onChange(component => {
console.log("onChange", component.value);
});
}, 100);
});
</script>
<section class="section docs-section" id="navigation-overlays">
<h2 class="section-title">Navigation & Overlays</h2>
<p class="docs-section-description">
Tabs переключают близкие представления, dropdown подходит для коротких action-menu,
tooltip дает компактную подсказку, popover раскрывает небольшой контекстный блок.
</p>
<div class="block">
<div class="tabs" role="tablist" aria-label="View mode">
<button class="tab tab-active" type="button" role="tab" aria-selected="true">Overview</button>
<button class="tab" type="button" role="tab" aria-selected="false">Activity</button>
<button class="tab" type="button" role="tab" aria-selected="false">Settings</button>
</div>
<div class="demo-actions">
<div class="dropdown">
<button class="btn btn-secondary with-icon" type="button" data-dropdown-toggle aria-expanded="false">
<i class="ph ph-dots-three-outline"></i>
Actions
</button>
<div class="dropdown-menu" role="menu">
<button class="dropdown-item" type="button" role="menuitem">
<i class="ph ph-pencil-simple"></i>
Edit
</button>
<button class="dropdown-item" type="button" role="menuitem">
<i class="ph ph-copy"></i>
Duplicate
</button>
<button class="dropdown-item dropdown-item-danger" type="button" role="menuitem">
<i class="ph ph-trash"></i>
Delete
</button>
</div>
</div>
<span class="tooltip">
<button class="btn btn-primary with-icon" type="button" data-tooltip-toggle>
<i class="ph ph-question"></i>
Help
</button>
<span class="tooltip-panel" role="tooltip">
Short contextual hint for compact controls.
</span>
</span>
<div class="popover">
<button class="btn btn-accent with-icon" type="button" data-popover-toggle aria-expanded="false">
<i class="ph ph-info"></i>
Details
</button>
<div class="popover-panel">
<h3 class="popover-title">Context</h3>
<p class="popover-text">
Use popover for short forms, metadata, previews, and low-risk contextual actions.
</p>
</div>
</div>
</div>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Tabs HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="tabs" role="tablist" aria-label="View mode">
<button class="tab tab-active" type="button" role="tab" aria-selected="true">Overview</button>
<button class="tab" type="button" role="tab" aria-selected="false">Activity</button>
<button class="tab" type="button" role="tab" aria-selected="false">Settings</button>
</div></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Dropdown HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="dropdown">
<button class="btn btn-secondary with-icon" type="button" data-dropdown-toggle aria-expanded="false">
<i class="ph ph-dots-three-outline"></i>
Actions
</button>
<div class="dropdown-menu" role="menu">
<button class="dropdown-item" type="button" role="menuitem">Edit</button>
<button class="dropdown-item" type="button" role="menuitem">Duplicate</button>
<button class="dropdown-item dropdown-item-danger" type="button" role="menuitem">Delete</button>
</div>
</div></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Tooltip HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><span class="tooltip">
<button class="btn btn-primary with-icon" type="button" data-tooltip-toggle>
<i class="ph ph-question"></i>
Help
</button>
<span class="tooltip-panel" role="tooltip">
Short contextual hint for compact controls.
</span>
</span></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Popover HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="popover">
<button class="btn btn-accent with-icon" type="button" data-popover-toggle aria-expanded="false">
<i class="ph ph-info"></i>
Details
</button>
<div class="popover-panel">
<h3 class="popover-title">Context</h3>
<p class="popover-text">Use popover for short forms, metadata, previews, and low-risk contextual actions.</p>
</div>
</div></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Overlays JS</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-js">Overlays.init();
// Available on the global namespace too:
GNexusUIKit.Overlays.closeAll();</code></pre>
</div>
</section>
<section class="section docs-section" id="navigation-shell">
<h2 class="section-title">Navigation Shell</h2>
<p class="docs-section-description">
Navigation Shell объединяет верхнюю панель, кнопку меню, left drawer и footer.
Компонент подходит для docs, dashboards и внутренних инструментов с длинной навигацией.
</p>
<div class="block">
<div class="nav-shell-preview">
<header class="nav-topbar nav-shell-preview-topbar">
<button class="nav-topbar-toggle" type="button" aria-expanded="false">
<i class="ph ph-sidebar-simple"></i>
<span>Menu</span>
</button>
<div class="nav-topbar-brand">
<img src="/assets/imgs/gnexus-mark.svg" alt="" aria-hidden="true">
<span>Product Console</span>
</div>
<div class="nav-topbar-current">Overview</div>
</header>
<div class="nav-shell-preview-body">
<aside class="nav-drawer nav-shell-preview-drawer">
<header class="nav-drawer-header">
<div>
<div class="nav-drawer-title">Navi</div>
<div class="nav-drawer-subtitle">Workspace</div>
</div>
<button class="nav-drawer-close" type="button" aria-label="Close navigation">
<i class="ph ph-x"></i>
</button>
</header>
<nav class="nav-drawer-body">
<ul class="list list-nav">
<li class="list-item list-item-active">
<a class="list-action" href="#navigation-shell">
<span class="list-label"><i class="ph ph-house"></i> Overview</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#navigation-shell">
<span class="list-label"><i class="ph ph-table"></i> Records</span>
</a>
</li>
<li class="list-item">
<a class="list-action" href="#navigation-shell">
<span class="list-label"><i class="ph ph-gear"></i> Settings</span>
</a>
</li>
</ul>
</nav>
<footer class="nav-drawer-footer">
<span>Version 0.2</span>
<span>© GNexus</span>
</footer>
</aside>
<div class="nav-shell-preview-content">
<h3>Shell content</h3>
<p>Topbar stays visible. Drawer opens from the left and keeps its footer pinned.</p>
</div>
</div>
</div>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Navigation Shell HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><header class="nav-topbar">
<button class="nav-topbar-toggle" type="button" data-navigation-toggle
aria-controls="app-navigation" aria-expanded="false">
<i class="ph ph-sidebar-simple"></i>
<span>Menu</span>
</button>
<div class="nav-topbar-brand">
<img src="/assets/imgs/gnexus-mark.svg" alt="" aria-hidden="true">
<span>Product Console</span>
</div>
<div class="nav-topbar-current">Overview</div>
</header>
<div class="nav-drawer-backdrop" data-navigation-close></div>
<aside class="nav-drawer" id="app-navigation" data-navigation-drawer
aria-label="Main navigation" aria-hidden="true" inert>
<header class="nav-drawer-header">
<div>
<div class="nav-drawer-title">Navi</div>
<div class="nav-drawer-subtitle">Workspace</div>
</div>
<button class="nav-drawer-close" type="button" data-navigation-close aria-label="Close navigation">
<i class="ph ph-x"></i>
</button>
</header>
<nav class="nav-drawer-body">
<ul class="list list-nav">
<li class="list-item list-item-active">
<a class="list-action" href="/overview" data-navigation-link>
<span class="list-label"><i class="ph ph-house"></i> Overview</span>
</a>
</li>
</ul>
</nav>
<footer class="nav-drawer-footer">
<span>Version 0.2</span>
<span>© GNexus</span>
</footer>
</aside></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Navigation Shell JS</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-js">NavigationShell.init();
// Available on the global namespace too:
GNexusUIKit.NavigationShell.init();</code></pre>
</div>
</section>
<!-- =========================
LISTS
========================= -->
<section class="section docs-section" id="lists">
<h2 class="section-title">Lists</h2>
<p class="docs-section-description">
Списки покрывают обычные перечни, навигацию, definition list и строки с действиями.
Для интерактивных пунктов используй `.list-nav`, `.list-action`, `.list-label` и `.list-meta`.
</p>
<!-- Basic unordered list -->
<div class="block">
<h3 class="block-title">Unordered list</h3>
<ul class="list">
<li class="list-item">Dashboard</li>
<li class="list-item">Projects</li>
<li class="list-item">Reports</li>
<li class="list-item">Automations</li>
<li class="list-item">Settings</li>
</ul>
</div>
<!-- Ordered list -->
<div class="block">
<h3 class="block-title">Ordered list</h3>
<ol class="list list-ordered">
<li class="list-item">Create workspace</li>
<li class="list-item">Invite team</li>
<li class="list-item">Configure permissions</li>
<li class="list-item">Verify status</li>
</ol>
</div>
<!-- List with icons / markers -->
<div class="block">
<h3 class="block-title">List with icons</h3>
<ul class="list with-icons">
<li class="list-item">
<i class="ph ph-bathtub"></i>
Bathroom
</li>
<li class="list-item">
<i class="ph ph-toilet"></i>
Toilet
</li>
<li class="list-item">
<i class="ph ph-planet"></i>
Workspace
</li>
</ul>
</div>
<!-- Definition list -->
<div class="block">
<h3 class="block-title">Definition list</h3>
<dl class="list list-definition">
<div class="list-row">
<dt class="list-term">Item</dt>
<dd class="list-desc">Базовая сущность интерфейса</dd>
</div>
<div class="list-row">
<dt class="list-term">Group</dt>
<dd class="list-desc">Логическая группа элементов</dd>
</div>
<div class="list-row">
<dt class="list-term">Flow</dt>
<dd class="list-desc">Набор действий, выполняемых последовательно</dd>
</div>
</dl>
</div>
<!-- Interactive / navigation list -->
<div class="block">
<h3 class="block-title">Navigation / interactive list</h3>
<ul class="list list-nav">
<li class="list-item list-item-active">
<button class="list-action" type="button">
<span class="list-label">Overview</span>
</button>
</li>
<li class="list-item">
<button class="list-action" type="button">
<span class="list-label"><i class="ph ph-stack"></i> Projects</span>
<span class="list-meta">12</span>
</button>
</li>
<li class="list-item">
<button class="list-action" type="button">
<span class="list-label">Logs</span>
</button>
</li>
<li class="list-item list-item-disabled">
<button class="list-action" type="button" disabled>
<span class="list-label">Advanced</span>
</button>
</li>
</ul>
</div>
<!-- List with actions -->
<div class="block">
<h3 class="block-title">List with actions</h3>
<ul class="list list-actions">
<li class="list-item">
<div class="list-content">
<div class="list-title">Release Plan</div>
<div class="list-subtitle">
<span class="text-color-success">•</span>
192.168.2.21
</div>
</div>
<div class="list-controls">
<button class="btn btn-small btn-secondary" type="button">Open</button>
<button class="btn btn-small btn-accent" type="button">Toggle</button>
</div>
</li>
<li class="list-item">
<div class="list-content">
<div class="list-title">Analytics Sync</div>
<div class="list-subtitle">
<span class="text-color-success">•</span>
192.168.2.34
</div>
</div>
<div class="list-controls">
<button class="btn btn-small btn-secondary" type="button">Open</button>
<button class="btn btn-small btn-danger with-icon" type="button">
<i class="ph ph-arrow-clockwise"></i>
Restart
</button>
</div>
</li>
<li class="list-item list-item-muted">
<div class="list-content">
<div class="list-title">Archive Job</div>
<div class="list-subtitle">
<span class="text-color-warning">•</span> Offline
</div>
</div>
<div class="list-controls">
<button class="btn btn-small btn-secondary" type="button" disabled>Open</button>
<button class="btn btn-small btn-accent" type="button" disabled>Toggle</button>
</div>
</li>
</ul>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Navigation List HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><ul class="list list-nav">
<li class="list-item list-item-active">
<button class="list-action" type="button">
<span class="list-label">
<i class="ph ph-lightbulb"></i>
Projects
</span>
<span class="list-meta">12</span>
</button>
</li>
</ul></code></pre>
</div>
</section>
<section class="section docs-section" id="badges">
<h2 class="section-title">Badges & Status</h2>
<p class="docs-section-description">
Badges используются для коротких статусов, счётчиков и меток состояния.
Цветовой модификатор выбирается по смыслу: success, warning, error, info и так далее.
</p>
<div class="block">
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-error">Error</span>
<span class="badge badge-info">Info</span>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Badges HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><span class="badge badge-success">Online</span>
<span class="badge badge-warning">Degraded</span>
<span class="badge badge-error">Offline</span>
<span class="badge badge-info">Info</span></code></pre>
</div>
</section>
<section class="section docs-section" id="alerts">
<h2 class="section-title">Alerts</h2>
<p class="docs-section-description">
Alerts подходят для заметных системных сообщений внутри контента.
Используй `.alert` и один цветовой модификатор.
</p>
<div class="alert alert-primary">This is a primary alert—check it out!</div>
<div class="alert alert-success">This is a success alert—check it out!</div>
<div class="alert alert-secondary">This is a secondary alert—check it out!</div>
<div class="alert alert-info">This is a info alert—check it out!</div>
<div class="alert alert-warning">This is a warning alert—check it out!</div>
<div class="alert alert-error">This is a error/danger alert—check it out!</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Alerts HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="alert alert-primary">Primary message</div>
<div class="alert alert-success">Operation completed</div>
<div class="alert alert-warning">Check settings</div>
<div class="alert alert-error">Action failed</div></code></pre>
</div>
</section>
<section class="section docs-section" id="tables">
<h2 class="section-title">Tables</h2>
<p class="docs-section-description">
Таблицы используют базовый класс `.table`, semantic table markup и дополнительные элементы:
`.table-caption`, `.table-head`, `.table-body`, `.table-foot`.
</p>
<div class="block">
<h3 class="block-title">Basic table</h3>
<table class="table">
<caption class="table-caption">Projects list</caption>
<thead class="table-head">
<tr class="table-row">
<th scope="col">Project</th>
<th scope="col">Status</th>
<th scope="col">Owner</th>
<th scope="col">Updated</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody class="table-body">
<tr class="table-row">
<td>Website Redesign</td>
<td>
<span class="badge badge-success">Online</span>
</td>
<td>
<code class="code">@design</code>
</td>
<td>2 min ago</td>
<td>
<button class="btn btn-secondary btn-small" type="button">Open</button>
<button class="btn btn-accent btn-small" type="button">Toggle</button>
</td>
</tr>
<tr class="table-row">
<td>Billing API</td>
<td>
<span class="badge badge-warning">Degraded</span>
</td>
<td>
<code class="code">@backend</code>
</td>
<td>1 hour ago</td>
<td>
<button class="btn btn-secondary btn-small" type="button">Open</button>
<button class="btn btn-danger btn-small" type="button">Restart</button>
</td>
</tr>
<tr class="table-row table-row-muted">
<td>Archive Import</td>
<td>
<span class="badge badge-error">Offline</span>
</td>
<td>
<code class="code">@ops</code>
</td>
<td>Yesterday</td>
<td>
<button class="btn btn-secondary btn-small" type="button" disabled>Open</button>
<button class="btn btn-accent btn-small" type="button" disabled>Toggle</button>
</td>
</tr>
</tbody>
<tfoot class="table-foot">
<tr class="table-row">
<td colspan="5">
<span class="table-meta">Total: 3 projects</span>
</td>
</tr>
</tfoot>
</table>
</div>
<div class="block mt-6">
<h3 class="block-title">Compact table</h3>
<div class="table-wrapper">
<table class="table table-compact">
<caption class="table-caption">Recent jobs</caption>
<thead class="table-head">
<tr class="table-row">
<th scope="col">Job</th>
<th scope="col">State</th>
<th scope="col">Runtime</th>
<th scope="col">Run ID</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody class="table-body">
<tr class="table-row">
<td>Sync catalog</td>
<td><span class="badge badge-success">Done</span></td>
<td>18s</td>
<td class="table-cell-mono">run_1048</td>
<td class="table-cell-actions">
<button class="btn btn-secondary btn-small" type="button">Logs</button>
</td>
</tr>
<tr class="table-row">
<td>Import archive</td>
<td><span class="badge badge-warning">Running</span></td>
<td>2m 14s</td>
<td class="table-cell-mono">run_1047</td>
<td class="table-cell-actions">
<button class="btn btn-danger btn-small" type="button">Stop</button>
</td>
</tr>
<tr class="table-row">
<td>Export report</td>
<td><span class="badge badge-error">Failed</span></td>
<td>4s</td>
<td class="table-cell-mono">run_1046</td>
<td class="table-cell-actions">
<button class="btn btn-accent btn-small" type="button">Retry</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Tables HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><table class="table">
<caption class="table-caption">Projects list</caption>
<thead class="table-head">
<tr class="table-row">
<th scope="col">Project</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody class="table-body">
<tr class="table-row">
<td>Website Redesign</td>
<td><span class="badge badge-success">Online</span></td>
</tr>
</tbody>
</table></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Compact Table HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><table class="table table-compact">
<caption class="table-caption">Recent jobs</caption>
<thead class="table-head">
<tr class="table-row">
<th scope="col">Job</th>
<th scope="col">State</th>
<th scope="col">Run ID</th>
</tr>
</thead>
<tbody class="table-body">
<tr class="table-row">
<td>Sync catalog</td>
<td><span class="badge badge-success">Done</span></td>
<td class="table-cell-mono">run_1048</td>
</tr>
</tbody>
</table></code></pre>
</div>
</section>
<section class="section docs-section" id="data-patterns">
<h2 class="section-title">Data Patterns</h2>
<p class="docs-section-description">
Toolbar, search field, pagination, empty state и skeleton закрывают типовые состояния
таблиц, списков и страниц с данными.
</p>
<div class="block">
<div class="toolbar">
<div class="toolbar-group">
<div>
<h3 class="toolbar-title">Projects</h3>
<span class="toolbar-meta">24 items</span>
</div>
</div>
<div class="toolbar-group">
<div class="input-group input-group-compact search-field">
<span class="input-group-addon">
<i class="ph ph-magnifying-glass"></i>
</span>
<input class="input-group-input" type="search" value="release" placeholder="Search">
<button class="input-group-action" type="button" data-input-clear aria-label="Clear search">
<i class="ph ph-x"></i>
</button>
</div>
<button class="btn btn-primary btn-small with-icon" type="button">
<i class="ph ph-funnel"></i>
Filter
</button>
<button class="btn btn-accent btn-small with-icon" type="button">
<i class="ph ph-plus"></i>
Create
</button>
</div>
</div>
</div>
<div class="block">
<div class="input-group">
<span class="input-group-addon">https://</span>
<input class="input-group-input" type="text" value="example.gnexus.local" placeholder="Domain">
<button class="input-group-action" type="button">Save</button>
</div>
</div>
<div class="block">
<nav class="pagination" aria-label="Pagination">
<button class="pagination-item" type="button" disabled>
<i class="ph ph-arrow-left"></i>
</button>
<button class="pagination-item pagination-item-active" type="button" aria-current="page">1</button>
<button class="pagination-item" type="button">2</button>
<button class="pagination-item" type="button">3</button>
<span class="pagination-ellipsis">...</span>
<button class="pagination-item" type="button">12</button>
<button class="pagination-item" type="button">
<i class="ph ph-arrow-right"></i>
</button>
</nav>
</div>
<div class="block">
<div class="empty-state">
<div class="empty-state-icon">
<i class="ph ph-package"></i>
</div>
<h3 class="empty-state-title">No results</h3>
<p class="empty-state-text">
Nothing matched the current filters. Reset the query or create a new item.
</p>
<div class="empty-state-actions">
<button class="btn btn-secondary btn-small" type="button">Reset</button>
<button class="btn btn-accent btn-small" type="button">Create</button>
</div>
</div>
</div>
<div class="block">
<div class="skeleton-stack" aria-label="Loading preview">
<span class="skeleton skeleton-title"></span>
<span class="skeleton skeleton-line"></span>
<span class="skeleton skeleton-line" style="width: 84%"></span>
<span class="skeleton skeleton-line" style="width: 68%"></span>
<span class="skeleton skeleton-block"></span>
</div>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Toolbar HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="toolbar">
<div class="toolbar-group">
<div>
<h3 class="toolbar-title">Projects</h3>
<span class="toolbar-meta">24 items</span>
</div>
</div>
<div class="toolbar-group">
<div class="input-group input-group-compact search-field">
<span class="input-group-addon"><i class="ph ph-magnifying-glass"></i></span>
<input class="input-group-input" type="search" placeholder="Search">
<button class="input-group-action" type="button" data-input-clear aria-label="Clear search">
<i class="ph ph-x"></i>
</button>
</div>
<button class="btn btn-accent btn-small">Create</button>
</div>
</div></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Input Group HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="input-group">
<span class="input-group-addon">https://</span>
<input class="input-group-input" type="text" placeholder="Domain">
<button class="input-group-action" type="button">Save</button>
</div></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Pagination HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><nav class="pagination" aria-label="Pagination">
<button class="pagination-item" type="button" disabled>Prev</button>
<button class="pagination-item pagination-item-active" type="button" aria-current="page">1</button>
<button class="pagination-item" type="button">2</button>
<span class="pagination-ellipsis">...</span>
<button class="pagination-item" type="button">12</button>
<button class="pagination-item" type="button">Next</button>
</nav></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Empty State HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="empty-state">
<div class="empty-state-icon"><i class="ph ph-package"></i></div>
<h3 class="empty-state-title">No results</h3>
<p class="empty-state-text">Nothing matched the current filters.</p>
<div class="empty-state-actions">
<button class="btn btn-secondary btn-small">Reset</button>
<button class="btn btn-accent btn-small">Create</button>
</div>
</div></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Skeleton HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="skeleton-stack" aria-label="Loading preview">
<span class="skeleton skeleton-title"></span>
<span class="skeleton skeleton-line"></span>
<span class="skeleton skeleton-line" style="width: 84%"></span>
<span class="skeleton skeleton-block"></span>
</div></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Input Patterns JS</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-js">InputPatterns.init();
// Available on the global namespace too:
GNexusUIKit.InputPatterns.init();</code></pre>
</div>
</section>
<section class="section docs-section" id="page-header">
<h2 class="section-title">Page Header</h2>
<p class="docs-section-description">
Page Header собирает заголовок экрана, короткое описание, статусные метки и основные действия.
</p>
<div class="block">
<header class="page-header">
<div class="page-header-content">
<span class="page-header-kicker">Workspace</span>
<h3 class="page-header-title">Projects overview</h3>
<p class="page-header-subtitle">
Track active work, review critical states, and open the next action without leaving the page.
</p>
<div class="page-header-meta">
<span class="badge badge-success">Healthy</span>
<span>Updated 2 min ago</span>
</div>
</div>
<div class="page-header-actions">
<button class="btn btn-secondary btn-small" type="button">Export</button>
<button class="btn btn-accent btn-small with-icon" type="button">
<i class="ph ph-plus"></i>
Create
</button>
</div>
</header>
</div>
<div class="block">
<header class="page-header page-header-compact page-header-accent">
<div class="page-header-content">
<h3 class="page-header-title">Billing settings</h3>
<div class="page-header-meta">
<span class="badge badge-warning">Pending</span>
<span>3 changes waiting</span>
</div>
</div>
<div class="page-header-actions">
<button class="btn btn-primary btn-small" type="button">Review</button>
<button class="btn btn-danger btn-small" type="button">Discard</button>
</div>
</header>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Page Header HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><header class="page-header">
<div class="page-header-content">
<span class="page-header-kicker">Workspace</span>
<h1 class="page-header-title">Projects overview</h1>
<p class="page-header-subtitle">
Track active work and open the next action without leaving the page.
</p>
<div class="page-header-meta">
<span class="badge badge-success">Healthy</span>
<span>Updated 2 min ago</span>
</div>
</div>
<div class="page-header-actions">
<button class="btn btn-secondary btn-small" type="button">Export</button>
<button class="btn btn-accent btn-small" type="button">Create</button>
</div>
</header></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Compact Header HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><header class="page-header page-header-compact page-header-accent">
<div class="page-header-content">
<h2 class="page-header-title">Billing settings</h2>
<div class="page-header-meta">
<span class="badge badge-warning">Pending</span>
<span>3 changes waiting</span>
</div>
</div>
<div class="page-header-actions">
<button class="btn btn-primary btn-small" type="button">Review</button>
<button class="btn btn-danger btn-small" type="button">Discard</button>
</div>
</header></code></pre>
</div>
</section>
<section class="section docs-section" id="description-list">
<h2 class="section-title">Key-Value</h2>
<p class="docs-section-description">
Description List подходит для read-only деталей сущности: ID, владельцы, статусы, даты и короткие metadata values.
</p>
<div class="block">
<dl class="description-list">
<div class="description-list-row">
<dt class="description-list-term">Project</dt>
<dd class="description-list-value">Website Redesign</dd>
</div>
<div class="description-list-row">
<dt class="description-list-term">Status</dt>
<dd class="description-list-value">
<span class="badge badge-success">Online</span>
<span class="description-list-value-muted">All checks passed</span>
</dd>
</div>
<div class="description-list-row">
<dt class="description-list-term">Owner</dt>
<dd class="description-list-value">
<code class="code">@design</code>
</dd>
</div>
<div class="description-list-row">
<dt class="description-list-term">Updated</dt>
<dd class="description-list-value">2026-04-11 22:12</dd>
</div>
</dl>
</div>
<div class="block">
<dl class="description-list description-list-compact">
<div class="description-list-row">
<dt class="description-list-term">Run ID</dt>
<dd class="description-list-value">
<code class="code">run_1048</code>
</dd>
</div>
<div class="description-list-row">
<dt class="description-list-term">Runtime</dt>
<dd class="description-list-value">18s</dd>
</div>
<div class="description-list-row">
<dt class="description-list-term">Result</dt>
<dd class="description-list-value">
<span class="badge badge-secondary">Queued</span>
</dd>
</div>
</dl>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Description List HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><dl class="description-list">
<div class="description-list-row">
<dt class="description-list-term">Project</dt>
<dd class="description-list-value">Website Redesign</dd>
</div>
<div class="description-list-row">
<dt class="description-list-term">Status</dt>
<dd class="description-list-value">
<span class="badge badge-success">Online</span>
<span class="description-list-value-muted">All checks passed</span>
</dd>
</div>
</dl></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Compact List HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><dl class="description-list description-list-compact">
<div class="description-list-row">
<dt class="description-list-term">Run ID</dt>
<dd class="description-list-value"><code class="code">run_1048</code></dd>
</div>
<div class="description-list-row">
<dt class="description-list-term">Runtime</dt>
<dd class="description-list-value">18s</dd>
</div>
</dl></code></pre>
</div>
</section>
<section class="section docs-section" id="progress">
<h2 class="section-title">Progress</h2>
<p class="docs-section-description">
Progress закрывает загрузку, usage meters и staged progress для операций с понятным состоянием выполнения.
</p>
<div class="block">
<h3 class="block-title">Bars</h3>
<div class="progress" role="progressbar" aria-label="Build progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="64" style="--progress-value: 64%">
<div class="progress-header">
<span>Build</span>
<span class="progress-value">64%</span>
</div>
<div class="progress-track">
<span class="progress-bar"></span>
</div>
</div>
</div>
<div class="block">
<div class="progress progress-warning progress-striped progress-animated" role="progressbar" aria-label="Sync progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="42" style="--progress-value: 42%">
<div class="progress-header">
<span>Sync</span>
<span class="progress-value">42%</span>
</div>
<div class="progress-track">
<span class="progress-bar"></span>
</div>
</div>
</div>
<div class="block">
<div class="usage-meter">
<h3 class="usage-meter-title">
Storage
<span class="usage-meter-value">78%</span>
</h3>
<div class="progress progress-success" role="progressbar" aria-label="Storage usage" aria-valuemin="0" aria-valuemax="100" aria-valuenow="78" style="--progress-value: 78%">
<div class="progress-track">
<span class="progress-bar"></span>
</div>
</div>
<p class="usage-meter-meta">312 GB used from 400 GB limit.</p>
</div>
</div>
<div class="block">
<div class="progress-stages" aria-label="Deploy stages">
<span class="progress-stage progress-stage-complete">Queued</span>
<span class="progress-stage progress-stage-complete">Build</span>
<span class="progress-stage progress-stage-current">Deploy</span>
<span class="progress-stage">Verify</span>
</div>
</div>
<div class="block">
<div class="circle-loader" aria-label="Loading">
<i class="ph ph-spinner"></i>
<span>Loading state</span>
</div>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Progress Bar HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="progress" role="progressbar" aria-label="Build progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="64" style="--progress-value: 64%">
<div class="progress-header">
<span>Build</span>
<span class="progress-value">64%</span>
</div>
<div class="progress-track">
<span class="progress-bar"></span>
</div>
</div></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Usage Meter HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="usage-meter">
<h3 class="usage-meter-title">
Storage
<span class="usage-meter-value">78%</span>
</h3>
<div class="progress progress-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="78" style="--progress-value: 78%">
<div class="progress-track">
<span class="progress-bar"></span>
</div>
</div>
<p class="usage-meter-meta">312 GB used from 400 GB limit.</p>
</div></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Staged Progress HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="progress-stages" aria-label="Deploy stages">
<span class="progress-stage progress-stage-complete">Queued</span>
<span class="progress-stage progress-stage-complete">Build</span>
<span class="progress-stage progress-stage-current">Deploy</span>
<span class="progress-stage">Verify</span>
</div></code></pre>
</div>
</section>
<section class="section docs-section" id="steps">
<h2 class="section-title">Steps</h2>
<p class="docs-section-description">
Steps описывает wizard-flow, onboarding и последовательные процессы с текущим, завершенным и недоступным шагом.
</p>
<div class="block">
<ol class="steps">
<li class="step step-complete">
<span class="step-marker"><i class="ph ph-check"></i></span>
<h3 class="step-title">Account</h3>
<p class="step-text">Basic profile data is ready.</p>
</li>
<li class="step step-complete">
<span class="step-marker"><i class="ph ph-check"></i></span>
<h3 class="step-title">Plan</h3>
<p class="step-text">Billing plan is selected.</p>
</li>
<li class="step step-current" aria-current="step">
<span class="step-marker">3</span>
<h3 class="step-title">Confirm</h3>
<p class="step-text">Review settings before launch.</p>
</li>
<li class="step step-disabled">
<span class="step-marker">4</span>
<h3 class="step-title">Launch</h3>
<p class="step-text">Available after confirmation.</p>
</li>
</ol>
</div>
<div class="block">
<ol class="steps steps-vertical">
<li class="step step-complete">
<span class="step-marker"><i class="ph ph-check"></i></span>
<h3 class="step-title">Queued</h3>
<p class="step-text">Job accepted and waiting for worker slot.</p>
</li>
<li class="step step-current" aria-current="step">
<span class="step-marker">2</span>
<h3 class="step-title">Running</h3>
<p class="step-text">Current task is processing input data.</p>
</li>
<li class="step">
<span class="step-marker">3</span>
<h3 class="step-title">Report</h3>
<p class="step-text">Final summary appears after completion.</p>
</li>
</ol>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Steps HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><ol class="steps">
<li class="step step-complete">
<span class="step-marker"><i class="ph ph-check"></i></span>
<h3 class="step-title">Account</h3>
<p class="step-text">Basic profile data is ready.</p>
</li>
<li class="step step-current" aria-current="step">
<span class="step-marker">2</span>
<h3 class="step-title">Confirm</h3>
<p class="step-text">Review settings before launch.</p>
</li>
<li class="step step-disabled">
<span class="step-marker">3</span>
<h3 class="step-title">Launch</h3>
<p class="step-text">Available after confirmation.</p>
</li>
</ol></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Vertical Steps HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><ol class="steps steps-vertical">
<li class="step step-complete">
<span class="step-marker"><i class="ph ph-check"></i></span>
<h3 class="step-title">Queued</h3>
<p class="step-text">Job accepted and waiting for worker slot.</p>
</li>
<li class="step step-current" aria-current="step">
<span class="step-marker">2</span>
<h3 class="step-title">Running</h3>
<p class="step-text">Current task is processing input data.</p>
</li>
</ol></code></pre>
</div>
</section>
<section class="section docs-section" id="chips">
<h2 class="section-title">Chips</h2>
<p class="docs-section-description">
Chips используются для фильтров, коротких labels, selectable states и removable tokens.
</p>
<div class="block">
<h3 class="block-title">Static chips</h3>
<div class="chip-group">
<span class="chip chip-primary">Primary</span>
<span class="chip chip-secondary">Secondary</span>
<span class="chip chip-success">Success</span>
<span class="chip chip-warning">Warning</span>
<span class="chip chip-danger">Error</span>
<span class="chip chip-secondary">
<i class="ph ph-funnel"></i>
Filtered
</span>
</div>
</div>
<div class="block">
<h3 class="block-title">Selectable chips</h3>
<div class="chip-group" aria-label="Filter chips">
<button class="chip chip-selected" type="button" aria-pressed="true">Active</button>
<button class="chip" type="button" aria-pressed="false">Queued</button>
<button class="chip" type="button" aria-pressed="false">Failed</button>
<button class="chip chip-disabled" type="button" disabled>Archived</button>
</div>
</div>
<div class="block">
<h3 class="block-title">Removable chips</h3>
<div class="chip-group" aria-label="Selected tags">
<span class="chip">
Frontend
<button class="chip-remove" type="button" aria-label="Remove Frontend">
<i class="ph ph-x"></i>
</button>
</span>
<span class="chip chip-success">
Design
<button class="chip-remove" type="button" aria-label="Remove Design">
<i class="ph ph-x"></i>
</button>
</span>
<span class="chip chip-warning">
Review
<button class="chip-remove" type="button" aria-label="Remove Review">
<i class="ph ph-x"></i>
</button>
</span>
</div>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Static Chips HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="chip-group">
<span class="chip chip-primary">Primary</span>
<span class="chip chip-secondary">Secondary</span>
<span class="chip chip-success">Success</span>
<span class="chip">
<i class="ph ph-funnel"></i>
Filtered
</span>
</div></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Selectable Chips HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="chip-group" aria-label="Filter chips">
<button class="chip chip-selected" type="button" aria-pressed="true">Active</button>
<button class="chip" type="button" aria-pressed="false">Queued</button>
<button class="chip" type="button" aria-pressed="false">Failed</button>
</div></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Removable Chips HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><span class="chip">
Frontend
<button class="chip-remove" type="button" aria-label="Remove Frontend">
<i class="ph ph-x"></i>
</button>
</span></code></pre>
</div>
</section>
<section class="section docs-section" id="avatar">
<h2 class="section-title">Avatar</h2>
<p class="docs-section-description">
Avatar и Identity показывают пользователя, команду, сервис или объект с initials, icon, image и status marker.
</p>
<div class="block">
<h3 class="block-title">Avatar variants</h3>
<div class="chip-group">
<span class="avatar avatar-sm">AV</span>
<span class="avatar">GN</span>
<span class="avatar avatar-lg avatar-secondary">UI</span>
<span class="avatar avatar-outline">
<i class="ph ph-user"></i>
</span>
<span class="avatar avatar-success is-online">
<i class="ph ph-check"></i>
<span class="avatar-status"></span>
</span>
<span class="avatar">
<img src="/assets/imgs/gnexus-mark.svg" alt="GNexus mark">
</span>
</div>
</div>
<div class="block">
<h3 class="block-title">Identity row</h3>
<div class="identity">
<span class="avatar avatar-secondary is-online">
AK
<span class="avatar-status"></span>
</span>
<span class="identity-content">
<span class="identity-title">Alex Kim</span>
<span class="identity-meta">Product Designer</span>
</span>
</div>
</div>
<div class="block">
<h3 class="block-title">Avatar stack</h3>
<div class="avatar-stack" aria-label="Assigned users">
<span class="avatar avatar-sm">AK</span>
<span class="avatar avatar-sm avatar-secondary">JS</span>
<span class="avatar avatar-sm avatar-warning">MR</span>
<span class="avatar-stack-count">+4</span>
</div>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Avatar HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><span class="avatar avatar-secondary is-online">
AK
<span class="avatar-status"></span>
</span>
<span class="avatar avatar-outline">
<i class="ph ph-user"></i>
</span>
<span class="avatar">
<img src="/assets/imgs/gnexus-mark.svg" alt="GNexus mark">
</span></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Identity HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="identity">
<span class="avatar avatar-secondary is-online">
AK
<span class="avatar-status"></span>
</span>
<span class="identity-content">
<span class="identity-title">Alex Kim</span>
<span class="identity-meta">Product Designer</span>
</span>
</div></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Avatar Stack HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="avatar-stack" aria-label="Assigned users">
<span class="avatar avatar-sm">AK</span>
<span class="avatar avatar-sm avatar-secondary">JS</span>
<span class="avatar avatar-sm avatar-warning">MR</span>
<span class="avatar-stack-count">+4</span>
</div></code></pre>
</div>
</section>
<section class="section docs-section" id="timeline">
<h2 class="section-title">Timeline</h2>
<p class="docs-section-description">
Timeline и Activity Log показывают историю событий, audit trail, job updates и системные изменения.
</p>
<div class="block">
<ol class="timeline">
<li class="timeline-item timeline-item-success">
<span class="timeline-marker"><i class="ph ph-check-circle"></i></span>
<div class="timeline-content">
<article class="timeline-card">
<div class="timeline-header">
<h3 class="timeline-title">Build completed</h3>
<time class="timeline-time" datetime="2026-04-11T22:24:00">22:24</time>
</div>
<p class="timeline-text">Production bundle finished without warnings.</p>
<div class="timeline-meta">
<span class="chip chip-success">Done</span>
<span class="chip">CI</span>
</div>
</article>
</div>
</li>
<li class="timeline-item timeline-item-warning">
<span class="timeline-marker"><i class="ph ph-warning"></i></span>
<div class="timeline-content">
<article class="timeline-card">
<div class="timeline-header">
<h3 class="timeline-title">Review requested</h3>
<time class="timeline-time" datetime="2026-04-11T22:18:00">22:18</time>
</div>
<p class="timeline-text">Design tokens changed and need one visual pass before release.</p>
<div class="timeline-meta">
<span class="chip chip-warning">Review</span>
</div>
</article>
</div>
</li>
<li class="timeline-item">
<span class="timeline-marker"><i class="ph ph-git-commit"></i></span>
<div class="timeline-content">
<article class="timeline-card">
<div class="timeline-header">
<h3 class="timeline-title">Commit pushed</h3>
<time class="timeline-time" datetime="2026-04-11T22:10:00">22:10</time>
</div>
<p class="timeline-text">Component documentation and demo examples were updated.</p>
</article>
</div>
</li>
</ol>
</div>
<div class="block">
<div class="activity-log">
<div class="activity-log-row">
<time class="activity-log-time" datetime="2026-04-11T22:24:00">22:24</time>
<span class="activity-log-title">Build completed</span>
<span class="badge badge-success">Done</span>
</div>
<div class="activity-log-row">
<time class="activity-log-time" datetime="2026-04-11T22:18:00">22:18</time>
<span class="activity-log-title">Review requested</span>
<span class="badge badge-warning">Pending</span>
</div>
<div class="activity-log-row">
<time class="activity-log-time" datetime="2026-04-11T22:10:00">22:10</time>
<span class="activity-log-title">Commit pushed</span>
<span class="badge badge-secondary">Info</span>
</div>
</div>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Timeline HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><ol class="timeline">
<li class="timeline-item timeline-item-success">
<span class="timeline-marker"><i class="ph ph-check-circle"></i></span>
<div class="timeline-content">
<article class="timeline-card">
<div class="timeline-header">
<h3 class="timeline-title">Build completed</h3>
<time class="timeline-time" datetime="2026-04-11T22:24:00">22:24</time>
</div>
<p class="timeline-text">Production bundle finished without warnings.</p>
</article>
</div>
</li>
</ol></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Activity Log HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="activity-log">
<div class="activity-log-row">
<time class="activity-log-time" datetime="2026-04-11T22:24:00">22:24</time>
<span class="activity-log-title">Build completed</span>
<span class="badge badge-success">Done</span>
</div>
</div></code></pre>
</div>
</section>
<section class="section docs-section" id="accordion">
<h2 class="section-title">Accordion</h2>
<p class="docs-section-description">
Accordion и Disclosure используют native <code class="code"><details></code> / <code class="code"><summary></code>, а раскрытие анимируется через <code class="code">Accordion.init()</code>.
</p>
<div class="block">
<div class="accordion">
<details class="accordion-item" open>
<summary class="accordion-summary">
<span class="accordion-summary-content">
<i class="ph ph-list-checks"></i>
Release checklist
</span>
<i class="ph ph-caret-down accordion-icon"></i>
</summary>
<div class="accordion-panel">
<p>Check component states, copy examples, keyboard focus, and responsive layout before release.</p>
</div>
</details>
<details class="accordion-item">
<summary class="accordion-summary">
<span class="accordion-summary-content">
<i class="ph ph-article"></i>
Documentation notes
</span>
<i class="ph ph-caret-down accordion-icon"></i>
</summary>
<div class="accordion-panel">
<p>Keep component copy short and include code examples for the smallest useful markup.</p>
</div>
</details>
<details class="accordion-item">
<summary class="accordion-summary">
<span class="accordion-summary-content">
<i class="ph ph-activity"></i>
Runtime behavior
</span>
<i class="ph ph-caret-down accordion-icon"></i>
</summary>
<div class="accordion-panel">
<p>Use native disclosure behavior when the component does not need custom animation or async content.</p>
</div>
</details>
</div>
</div>
<div class="block">
<details class="disclosure">
<summary class="accordion-summary">
<span class="accordion-summary-content">Compact disclosure</span>
<i class="ph ph-caret-down accordion-icon"></i>
</summary>
<div class="accordion-panel">
<p>Use this variant for a single expandable group inside forms or metadata blocks.</p>
</div>
</details>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Accordion HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="accordion">
<details class="accordion-item" open>
<summary class="accordion-summary">
<span class="accordion-summary-content">
<i class="ph ph-list-checks"></i>
Release checklist
</span>
<i class="ph ph-caret-down accordion-icon"></i>
</summary>
<div class="accordion-panel">
<p>Check component states, copy examples, keyboard focus, and responsive layout.</p>
</div>
</details>
</div></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Disclosure HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><details class="disclosure">
<summary class="accordion-summary">
<span class="accordion-summary-content">Compact disclosure</span>
<i class="ph ph-caret-down accordion-icon"></i>
</summary>
<div class="accordion-panel">
<p>Use this variant for a single expandable group.</p>
</div>
</details></code></pre>
</div>
</section>
<section class="section docs-section" id="tabs">
<h2 class="section-title">Tabs</h2>
<p class="docs-section-description">
Tabs переключают связанные панели внутри одного контекста. Компонент поддерживает click, keyboard navigation и ARIA state через <code class="code">Tabs.init()</code>.
</p>
<div class="block">
<div class="tabs" data-tabs>
<div class="tabs-list" aria-label="Project sections">
<button class="tab tab-active" type="button" aria-controls="tabs-overview">
<i class="ph ph-chart-bar"></i>
Overview
</button>
<button class="tab" type="button" aria-controls="tabs-activity">
<i class="ph ph-clock"></i>
Activity
</button>
<button class="tab" type="button" aria-controls="tabs-settings">
<i class="ph ph-sliders"></i>
Settings
</button>
</div>
<div class="tabs-panels">
<div class="tab-panel tab-panel-active" id="tabs-overview">
<p>Overview keeps the primary status, totals, and next actions visible without leaving the current screen.</p>
</div>
<div class="tab-panel" id="tabs-activity">
<p>Activity contains the latest events, audit notes, and handoff messages for the same record.</p>
</div>
<div class="tab-panel" id="tabs-settings">
<p>Settings groups secondary options that affect this context but do not need full page navigation.</p>
</div>
</div>
</div>
</div>
<div class="block">
<div class="tabs tabs-compact" data-tabs>
<div class="tabs-list" aria-label="Compact tabs">
<button class="tab tab-active" type="button" aria-controls="tabs-compact-api">API</button>
<button class="tab" type="button" aria-controls="tabs-compact-webhooks">Webhooks</button>
<button class="tab" type="button" aria-controls="tabs-compact-billing" aria-disabled="true">Billing</button>
</div>
<div class="tabs-panels">
<div class="tab-panel tab-panel-active" id="tabs-compact-api">
<p>Use compact tabs in dense panels, settings pages, and narrow metadata blocks.</p>
</div>
<div class="tab-panel" id="tabs-compact-webhooks">
<p>Disabled tabs can stay visible when a feature is unavailable for the current object.</p>
</div>
<div class="tab-panel" id="tabs-compact-billing">
<p>Billing content is disabled in this example.</p>
</div>
</div>
</div>
</div>
<div class="block">
<div class="tabs tabs-vertical" data-tabs>
<div class="tabs-list" aria-label="Vertical tabs">
<button class="tab tab-active" type="button" aria-controls="tabs-profile">Profile</button>
<button class="tab" type="button" aria-controls="tabs-access">Access</button>
<button class="tab" type="button" aria-controls="tabs-notes">Notes</button>
</div>
<div class="tabs-panels">
<div class="tab-panel tab-panel-active" id="tabs-profile">
<p>Vertical tabs work well when labels are longer or the panel needs a stable left rail.</p>
</div>
<div class="tab-panel" id="tabs-access">
<p>Use them for account details, admin records, or focused configuration groups.</p>
</div>
<div class="tab-panel" id="tabs-notes">
<p>On smaller screens the tab rail becomes a horizontal scrollable list.</p>
</div>
</div>
</div>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Tabs HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="tabs" data-tabs>
<div class="tabs-list" aria-label="Project sections">
<button class="tab tab-active" type="button" aria-controls="panel-overview">Overview</button>
<button class="tab" type="button" aria-controls="panel-activity">Activity</button>
</div>
<div class="tabs-panels">
<div class="tab-panel tab-panel-active" id="panel-overview">Overview content</div>
<div class="tab-panel" id="panel-activity">Activity content</div>
</div>
</div></code></pre>
</div>
</section>
<section class="section docs-section" id="drawer">
<h2 class="section-title">Drawer</h2>
<p class="docs-section-description">
Drawer подходит для контекстных деталей, quick edit и длинных вторичных сценариев без ухода со страницы.
По API он близок к Modal, но панель закреплена у края экрана.
</p>
<div class="block">
<h3 class="block-title">Examples</h3>
<div class="drawer-preview">
<div class="drawer-preview-content">
<p class="text">
Используй Drawer, когда нужно сохранить контекст основного экрана и раскрыть боковую область с формой,
метаданными или журналом.
</p>
<div class="demo-actions">
<button class="btn btn-secondary with-icon" type="button" onclick="demoDrawer()">
<i class="ph ph-sidebar"></i>
Open drawer
</button>
<button class="btn btn-primary with-icon" type="button" onclick="demoLeftDrawer()">
<i class="ph ph-sidebar-simple"></i>
Left drawer
</button>
</div>
</div>
<div class="drawer-preview-panel" aria-hidden="true">
<h3 class="drawer-preview-title">Panel shape</h3>
<p class="drawer-preview-text">Fixed edge, hard border, focused action footer.</p>
<span class="chip chip-secondary">Context</span>
</div>
</div>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Drawer JS</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-javascript">Drawer.create("details-drawer", {
title: "Details",
bodyHtml: `
<p class="text">Context content, forms, logs, metadata.</p>
`,
actions: drawer => {
const close = document.createElement("button");
close.className = "btn btn-primary";
close.textContent = "Close";
close.addEventListener("click", () => drawer.close());
return [close];
}
}).show();</code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Left Position</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-javascript">Drawer.create("navigation-drawer", {
title: "Navigation",
position: "left",
bodyText: "Left drawer content"
}).show();</code></pre>
</div>
</section>
<script>
document.addEventListener("DOMContentLoaded", () => {
window.demoDrawer = function() {
Drawer.create("demo-drawer", {
title: "Details",
bodyHtml: `
<p class="text">Context panel for quick edits, metadata, and secondary flows.</p>
<dl class="description-list description-list-compact">
<div class="description-list-row">
<dt>Status</dt>
<dd><span class="chip chip-success">Active</span></dd>
</div>
<div class="description-list-row">
<dt>Owner</dt>
<dd>Design System</dd>
</div>
<div class="description-list-row">
<dt>Updated</dt>
<dd>Today</dd>
</div>
</dl>
`,
actions: drawer => {
const cancel = document.createElement("button");
cancel.className = "btn btn-primary";
cancel.textContent = "Close";
cancel.addEventListener("click", () => drawer.close());
const apply = document.createElement("button");
apply.className = "btn btn-success";
apply.textContent = "Apply";
apply.addEventListener("click", () => {
drawer.close();
Toasts.createSuccess("Saved", "Drawer action completed").show();
});
return [cancel, apply];
}
}).show();
};
window.demoLeftDrawer = function() {
Drawer.create("demo-left-drawer", {
title: "Navigation",
position: "left",
bodyHtml: `
<ul class="list-menu">
<li class="list-item"><button class="list-action" type="button"><span class="list-label">Overview</span></button></li>
<li class="list-item"><button class="list-action" type="button"><span class="list-label">Activity</span></button></li>
<li class="list-item"><button class="list-action" type="button"><span class="list-label">Settings</span></button></li>
</ul>
`
}).show();
};
});
</script>
<section class="section docs-section" id="toasts">
<h2 class="section-title">Toasts</h2>
<p class="docs-section-description">
Toasts создаются из JS и добавляются в `body` вызовом `.show()`.
Для коротких уведомлений доступны методы `createInfo`, `createSuccess`, `createWarning`, `createDanger`.
</p>
<div class="block demo-actions">
<h3 class="block-title">Triggers (demo buttons)</h3>
<button class="btn btn-primary" type="button" onclick="demoToastInfo()">Show info (default)</button>
<button class="btn btn-success" type="button" onclick="demoToastSuccess()">Show success</button>
<button class="btn btn-warning" type="button" onclick="demoToastWarning()">Show warning</button>
<button class="btn btn-danger" type="button" onclick="demoToastDanger()">Show danger</button>
</div>
<!-- <div class="block">
<h3 class="block-title">Toast stack (container)</h3>
<div class="toast-stack" aria-live="polite" aria-relevant="additions">
<article class="toast toast-info" role="status">
<div class="toast-content">
<h4 class="toast-title"><i class="ph ph-info"></i> Info</h4>
<p class="toast-text">Обычное уведомление для пользователя.</p>
</div>
<button class="btn-icon toast-close" type="button" aria-label="Close">✕</button>
</article>
<article class="toast toast-success" role="status">
<div class="toast-content">
<h4 class="toast-title"><i class="ph ph-check-circle"></i> Success</h4>
<p class="toast-text">Операция выполнена успешно.</p>
</div>
<button class="btn-icon toast-close" type="button" aria-label="Close">✕</button>
</article>
<article class="toast toast-warning" role="status">
<div class="toast-content">
<h4 class="toast-title"><i class="ph ph-check-circle"></i> Warning</h4>
<p class="toast-text">Нужна проверка параметров.</p>
</div>
<button class="btn-icon toast-close" type="button" aria-label="Close">✕</button>
</article>
<article class="toast toast-danger" role="alert">
<div class="toast-content">
<h4 class="toast-title"><i class="ph ph-warning-octagon"></i> Danger</h4>
<p class="toast-text">Произошла ошибка. Повтори позже.</p>
</div>
<button class="btn-icon toast-close" type="button" aria-label="Close">✕</button>
</article>
</div>
<p class="hint">
<b>Hint Example.</b>
.toast-stack — фиксируй в углу через CSS (например bottom/right), либо размещай как блок в контенте.
</p>
</div> -->
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Toasts JS</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-javascript">Toasts.createSuccess(
"Success",
"Операция выполнена успешно",
{ lifetime: 4000, alone: true }
).show();
Toasts.createDanger("Error", "Произошла ошибка").show();</code></pre>
</div>
</section>
<script>
document.addEventListener("DOMContentLoaded", e => {
window.demoToastInfo = function () {
Toasts.createInfo(
"Title",
"Произошла ошибка. Повтори позже."
).show();
}
window.demoToastSuccess = function () {
Toasts.createSuccess(
"Success",
"Всё отлично, всё работает, это успех тостера"
).show();
}
window.demoToastWarning = function () {
Toasts.createWarning(
"Warning",
"Произошла ошибка. Повтори позже."
).show();
}
window.demoToastDanger = function () {
Toasts.createDanger(
"Danger",
"Произошла ошибка. Повтори позже."
).show();
}
});
</script>
<section class="section docs-section" id="cards">
<h2 class="section-title">Cards</h2>
<p class="docs-section-description">
Card подходит для компактных виджетов и контентных блоков.
Цветовые состояния карточек задаются модификаторами `card-success`, `card-warning`, `card-error`, `card-info`.
</p>
<div class="cards">
<div class="card">
<h3 class="card-title">Card title</h3>
<div class="card-content">
<img src="/assets/imgs/gnexus-mark.svg" alt="" class="card-thumb">
<p>Карточка для контента, виджетов, статусов.</p>
</div>
<div class="card-footer">
<button class="btn btn-accent">Action</button>
</div>
</div>
</div>
<div class="block mt-6">
<div class="row g-4">
<div class="card status-card card-success">
<span class="card-title">Status title</span>
<div class="card-content">
<div class="status-icon-container">
<div class="status-icon">
<i class="ph ph-check-circle"></i> OK
</div>
</div>
<p class="status-name">Primary status card with a short description.</p>
</div>
</div>
<div class="card status-card card-primary">
<span class="card-title">Default</span>
<div class="card-content">
<div class="status-icon-container">
<div class="status-icon">
<i class="ph ph-stack"></i>
</div>
</div>
<p class="status-name">Neutral card for a module, widget, or section.</p>
</div>
</div>
<div class="card status-card card-warning">
<span class="card-title">Pending</span>
<div class="card-content">
<div class="status-icon-container">
<div class="status-icon">
<i class="ph ph-warning"></i>
</div>
</div>
<p class="status-name">Warning state for items that need attention.</p>
</div>
</div>
<div class="card status-card card-error">
<span class="card-title">Failed</span>
<div class="card-content">
<div class="status-icon-container">
<div class="status-icon">
<i class="ph ph-warning-octagon"></i>
</div>
</div>
<p class="status-name">Error state for failed actions or blocked flows.</p>
</div>
</div>
<div class="card status-card card-info">
<span class="card-title">Info</span>
<div class="card-content">
<div class="status-icon-container">
<div class="status-icon">
<i class="ph ph-info"></i>
</div>
</div>
<p class="status-name">Informational card for contextual metadata.</p>
</div>
</div>
<div class="card status-card card-secondary">
<span class="card-title">Queued</span>
<div class="card-content">
<div class="status-icon-container">
<div class="status-icon">
<i class="ph ph-clock"></i>
</div>
</div>
<p class="status-name">Secondary state for queued or background work.</p>
</div>
</div>
</div>
</div>
<div class="block mt-6">
<div class="card metric-card">
<div class="card-content">
<div class="metric-card-header">
<p class="metric-card-label">Monthly usage</p>
<span class="metric-card-icon">
<i class="ph ph-chart-line-up"></i>
</span>
</div>
<p class="metric-card-value">84.2%</p>
<div class="metric-card-meta">
<span class="metric-card-delta">+12.8%</span>
<span>vs previous period</span>
</div>
</div>
</div>
</div>
<div class="block mt-6">
<div class="card action-card">
<div class="card-content">
<span class="action-card-kicker">Quick action</span>
<h3 class="action-card-title">Create workflow</h3>
<p class="action-card-text">
Use action cards for primary next steps, onboarding prompts, and compact empty state actions.
</p>
<div class="action-card-actions">
<button class="btn btn-secondary btn-small" type="button">Preview</button>
<button class="btn btn-accent btn-small" type="button">Create</button>
</div>
</div>
</div>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Cards HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="card status-card card-success">
<span class="card-title">Status title</span>
<div class="card-content">
<div class="status-icon-container">
<div class="status-icon">
<i class="ph ph-check-circle"></i>
OK
</div>
</div>
<p class="status-name">Primary status card.</p>
</div>
</div></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Metric Card HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="card metric-card">
<div class="card-content">
<div class="metric-card-header">
<p class="metric-card-label">Monthly usage</p>
<span class="metric-card-icon"><i class="ph ph-chart-line-up"></i></span>
</div>
<p class="metric-card-value">84.2%</p>
<div class="metric-card-meta">
<span class="metric-card-delta">+12.8%</span>
<span>vs previous period</span>
</div>
</div>
</div></code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Action Card HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="card action-card">
<div class="card-content">
<span class="action-card-kicker">Quick action</span>
<h3 class="action-card-title">Create workflow</h3>
<p class="action-card-text">
Use action cards for primary next steps and compact empty state actions.
</p>
<div class="action-card-actions">
<button class="btn btn-secondary btn-small">Preview</button>
<button class="btn btn-accent btn-small">Create</button>
</div>
</div>
</div></code></pre>
</div>
</section>
<section class="section docs-section" id="modals">
<h2 class="section-title">Modals</h2>
<p class="docs-section-description">
Modal создаётся из JS через `Modals.create`.
Для обычного текста используй `bodyText`; HTML-контент передавай явно через `bodyHtml` или DOM-элемент.
</p>
<div class="block">
<h3 class="block-title">Open triggers</h3>
<button class="btn btn-primary" type="button" onclick="demoModal()">Open modal</button>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Modals JS</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-javascript">Modals.create("demo-modal", {
title: "Demo modal",
bodyText: "Modal content",
actions: modal => {
const close = document.createElement("button");
close.className = "btn btn-primary";
close.textContent = "Close";
close.addEventListener("click", () => modal.close());
return [close];
}
}).show();</code></pre>
</div>
</section>
<script>
document.addEventListener("DOMContentLoaded", e => {
window.demoModal = function() {
Modals.create("demo-modals", {
title: "Demo modal window",
footer: "<p>Footer text</p>",
actions: modal => {
const buttonCancel = document.createElement("button");
buttonCancel.classList.add("btn");
buttonCancel.classList.add("btn-primary");
buttonCancel.textContent = "Cancel";
buttonCancel.addEventListener("click", e => {
modal.close();
});
const buttonApply = document.createElement("button");
buttonApply.classList.add("btn");
buttonApply.classList.add("btn-success");
buttonApply.textContent = "Apply";
buttonApply.addEventListener("click", e => {
modal.close();
setTimeout(() => {
Toasts.createSuccess(
"Success",
"Всё отлично, всё работает, это успех"
).show();
}, 300);
});
return [ buttonCancel, buttonApply ];
},
bodyHtml: `
<p class="text">Любой контент: текст, формы, списки.</p>
<div class="form-group">
<label class="label" for="modal-project-name">
Project name
<input class="input" id="modal-project-name" type="text" placeholder="Launch Plan">
</label>
</div>
<div class="form-group">
<label class="label" for="modal-project-desc">
Description
<textarea class="input" id="modal-project-desc" rows="3" placeholder="Optional"></textarea>
</label>
</div>
`
}).show();
}
});
</script>
<section class="section docs-section" id="confirm-dialog">
<h2 class="section-title">Confirm Dialog</h2>
<p class="docs-section-description">
Confirm Dialog использует существующий `confirmPopup` поверх Modal. Он нужен для коротких подтверждений перед
опасными или необратимыми действиями.
</p>
<div class="block">
<h3 class="block-title">Trigger</h3>
<div class="demo-actions">
<button class="btn btn-warning with-icon" type="button" onclick="demoConfirmDialog()">
<i class="ph ph-warning"></i>
Open confirm
</button>
</div>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Confirm JS</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-javascript">confirmPopup(
"This action cannot be undone.",
() => Toasts.createSuccess("Confirmed", "Action accepted").show(),
() => Toasts.createInfo("Canceled", "Action skipped").show()
);</code></pre>
</div>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Global Namespace</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-javascript">GNexusUIKit.confirmPopup(
"Apply this change?",
() => console.log("confirmed"),
() => console.log("canceled")
);</code></pre>
</div>
</section>
<script>
document.addEventListener("DOMContentLoaded", () => {
window.demoConfirmDialog = function() {
confirmPopup(
"Apply this change? This action requires confirmation.",
() => Toasts.createSuccess("Confirmed", "Action accepted").show(),
() => Toasts.createInfo("Canceled", "Action skipped").show()
);
};
});
</script>
</div>
</div>
</main>
<script src="/assets/libs/highlight/highlight.min.js"></script>
<script src="/js/gnexus-ui-kit.js"></script>
</body>
</html>
