Эта страница собирается из structured catalog в packages/vue/src/data/gmosComponentCatalog.ts. Каждый элемент обязан иметь контракт, текст применения, код и live-preview.
Токены, темы и базовые правила композиции, от которых зависят все компоненты.
tokens.cssЦвета, spacing, radius, shadows, typography, z-index, motion.
Подключаются пакетом `@gmos-ui/tokens` и не переопределяются локально в проектах.
import '@gmos-ui/vue/style.css'
:root {
--gmos-container-width: 1600px;
}GmosShellactive, basePath, containerWidth, слот страницы и общий overlay-контур.
Оборачивает GMOS-страницу, подключает header, sidebar, тему, lightbox и modal host.
<GmosShell active="docs" container-width="1600px">
<GmosDocsPage />
</GmosShell>GmosHeaderactive, basePath, theme, события toggleTheme/openLightbox/openRequest.
Не хранит бизнес-логику, только навигацию, тему и запуск общих overlay-компонентов.
<GmosHeader
active="docs"
base-path="/gmos-ui"
theme="light"
@open-lightbox="openLightbox"
/>Минимальные интерактивные части интерфейса со всеми состояниями.
Buttonprimary, glass, quiet, danger, success, warning, loading, disabled.
Команды, CTA, подтверждения и опасные действия.
<button class="button button--primary" type="button">
<GmosIcon name="sparkles" />
<span>Главная</span>
</button>IconButtonvariant, aria-label, disabled, active.
Компактные действия в toolbar, input, modal, lightbox и таблицах.
<button class="icon-button icon-button--glass" type="button" aria-label="Настройки">
<GmosIcon name="settings" />
</button>Inputtext, phone, email, password, date, number, mask, validation state.
Формы, фильтры, поиск, заявки и настройки.
<label class="field field--success">
<span class="field__label">Email</span>
<span class="input-shell">
<GmosIcon name="mail" />
<input type="email" value="hello@gmos.dev" />
</span>
</label>Switchchecked, unchecked, hover, focus, disabled.
Бинарные настройки без локальных кастомных чекбоксов.
<label class="switch">
<input v-model="enabled" type="checkbox" />
<span class="switch__track" :class="{ 'is-checked': enabled }"><span /></span>
<span>ИИ-помощник</span>
</label>Segmenteditems, selected, aria group, hover, active.
Переключение режима, периода, плотности и фильтров.
<div class="segmented" role="group" aria-label="Период">
<button class="is-selected" type="button">День</button>
<button type="button">Неделя</button>
</div>SelectAtomoptions, selected, open, option state.
Выбор темы, режима, статуса и других перечислений.
<div class="select-atom is-open">
<button class="select-atom__button" type="button">
<span>Ночная Windows</span>
<GmosIcon name="chevron-down" />
</button>
</div>Поверхности поверх страницы: modal, lightbox, меню, backdrop и z-index.
GmosLightboxGalleryitems, autoBind, open(index), close(), next(), prev(), swipe, keyboard.
Все `img` внутри GMOS shell открываются по клику, если явно не стоит `data-gmos-lightbox="off"`.
<GmosLightboxGallery :items="galleryItems" auto-bind />
<img src="/image.webp" alt="Превью" />
GmosRequestModalopen(), close(), поля заявки, basic validation, submitted state.
Универсальная форма заявки без бизнес-логики отправки.
<GmosRequestModal ref="requestModal" />
<button class="button button--primary" @click="requestModal.open()">
Открыть модалку
</button>Dropdown/Menutrigger, nested items, active item, compact mode, viewport-safe width.
Навигация, context menu и action menu.
<button class="menu-item" type="button">
<GmosIcon name="pencil" />
Переименовать
</button>Таблицы, вкладки, пагинация, статусы и карточки данных.
Tabsitems, selected, icon, label, keyboard-ready markup.
Переключение представлений без смены страницы.
<nav class="tabs" aria-label="Вкладки">
<button class="is-selected" type="button">Обзор</button>
<button type="button">Метрики</button>
</nav>Paginationpages, selected, prev, next.
Таблицы, списки, каталоги и журналы.
<div class="pagination" aria-label="Пагинация">
<button type="button">1</button>
<button class="is-selected" type="button">2</button>
</div>TableAtomsrow, header cell, numeric cell, copy action, resize handle, status cell.
База для будущего полноценного DataTable.
<div class="table-strip" role="table">
<div class="table-strip__row">
<span class="table-cell">ООО Север</span>
<span class="table-cell table-cell--numeric">128 400 ₽</span>
</div>
</div>GmosThreadListid, title, subtitle, meta, icon, badge, active, actions.
Чат, CRM, проекты, файлы и любые списки с активным элементом.
<GmosThreadList :items="threads" active-id="main" />Изображения, загрузки, превью, fallback и файловые действия.
ImageFramesrc, alt, caption, loading, lightbox opt-out.
По умолчанию кликабельное изображение открывается через `GmosLightboxGallery`.
<figure class="media-frame">
<div class="media-thumb">
<img src="/preview.webp" alt="Превью" />
</div>
<figcaption class="caption-atom">Компоненты</figcaption>
</figure>UploadAtomidle, hover, progress, empty, fallback.
База для file uploader и drag-and-drop зон.
<span class="upload-atom">
<GmosIcon name="upload" />
Загрузить файл
</span>Carouselitems, activeIndex, swipe, autoplay, controls.
Галереи, product media, onboarding и showcase блоки.
<GmosCarousel :items="media" swipe controls />Это базовый список атомов, который стоит довести до production-ready состояния: props, состояния, keyboard/focus, темы, документация и smoke-проверки.