@central-design-system/components 4.0.0-alpha.0 → 4.0.0-alpha.10

package/llms/llms.txt

@@ -1,24 +1,24 @@
 # Central Design System (CDS 4)
 
-> Версия: 4.0.0-alpha.0. Модульная библиотека Vue 3 UI-компонентов `@central-design-system/components`.
-> Этот файл — индекс для AI-агентов, собирающих продуктовый UI на CDS.
-> Сгенерировано автоматически (`bun run generate:meta` → `bun run generate:llms`). Не редактировать вручную.
+> Version: 4.0.0-alpha.10. A modular Vue 3 UI component library, `@central-design-system/components`.
+> This file is an index for AI agents building product UI with CDS.
+> Generated automatically (`bun run generate:meta` → `bun run generate:llms`). Do not edit manually.
 
-## Наборы документации
+## Documentation sets
 
-- [llms-full.txt](https://cds.b2b-center.ru/llms-full.txt): полная документация одним файлом: гайды, токены, компоненты, миграция
-- [llms-components.txt](https://cds.b2b-center.ru/llms-components.txt): только компоненты: назначение, примеры и контракт API
-- [llms-tokens.txt](https://cds.b2b-center.ru/llms-tokens.txt): только токены и темы
-- [llms-guides.txt](https://cds.b2b-center.ru/llms-guides.txt): только гайды: подключение, конвенции, формы, тематизация, Tailwind, tree-shaking
-- [llms-migration.txt](https://cds.b2b-center.ru/llms-migration.txt): только миграция CDS 3 → CDS 4
+- [llms-full.txt](https://cds.b2b-center.ru/llms-full.txt): the full documentation in one file: guides, tokens, components, migration
+- [llms-components.txt](https://cds.b2b-center.ru/llms-components.txt): components only: purpose, examples, and the API contract
+- [llms-tokens.txt](https://cds.b2b-center.ru/llms-tokens.txt): tokens and themes only
+- [llms-guides.txt](https://cds.b2b-center.ru/llms-guides.txt): guides only: setup, conventions, forms, theming, Tailwind, tree-shaking
+- [llms-migration.txt](https://cds.b2b-center.ru/llms-migration.txt): CDS 3 → CDS 4 migration only
 
-Берите узкий срез, если контекст ограничен: компоненты, токены, гайды и миграция
-разделены, полный каталог нужен редко.
+Take a narrow slice when context is limited: components, tokens, guides, and
+migration are split apart; the full catalog is rarely needed.
 
-Для Claude Code и совместимых агентов есть Agent Skills — они точнее плоского
-каталога: https://cds.b2b-center.ru/guide/ai/skills
+For Claude Code and compatible agents there are Agent Skills — more precise than
+the flat catalog: https://cds.b2b-center.ru/guide/ai/skills
 
-## Подключение
+## Setup
 
 ```ts
 import { createApp } from 'vue';
@@ -30,123 +30,125 @@ const cds = createCds({ components, directives });
 createApp(App).use(cds).mount('#app');
 ```
 
-Использование: `<CdsButton appearance="primary">Нажми меня</CdsButton>`.
+Usage: `<CdsButton appearance="primary">Click me</CdsButton>`.
 
-Это полная регистрация: namespace-импорт `components` и агрегат `styles` удерживают
-в бандле всю библиотеку. Она удобна там, где набор компонентов заранее неизвестен
-(админки, песочницы, документация). Для продуктовых приложений регистрируй компоненты
-точечно — `createCds({ components: { CdsButton } })` плюс базовый слой
-`@central-design-system/components/styles/common.css`; подробности в гайде «Tree-shaking».
+This is full registration: the `components` namespace import and the `styles`
+aggregate keep the entire library in the bundle. It suits places where the set of
+components is not known upfront (admin panels, sandboxes, documentation). In product
+applications register components individually — `createCds({ components: { CdsButton } })`
+plus the base style layer `@central-design-system/components/styles/common.css`;
+see the "Tree-shaking" guide for details.
 
-## Конвенции
+## Conventions
 
-- **Единые пропсы.** `size`, `color` / `bgColor`, `appearance`, `disabled`, `loading`,
-  `width` / `height` ведут себя одинаково во всех компонентах (общие composable-фабрики).
-- **Токены, не raw-значения.** Цвета задаются через проп `color`, а не произвольным CSS.
-- **Atomic Design.** Сложный UI собирается из атомов (например форма:
+- **Uniform props.** `size`, `color` / `bgColor`, `appearance`, `disabled`, `loading`,
+  `width` / `height` behave the same across all components (shared composable factories).
+- **Tokens, not raw values.** Colors are set via the `color` prop, not arbitrary CSS.
+- **Atomic Design.** Complex UI is assembled from atoms (e.g. a form:
   `CdsField` + `CdsLabel` + `CdsDescription` + `CdsMessages` + `CdsInput`).
-- Полный гайд миграции CDS 3 → CDS 4 — в `MIGRATION.md`.
+- The full CDS 3 → CDS 4 migration guide lives in `MIGRATION.md`.
 
-## Компоненты (78)
+## Components (79)
 
-Ниже — назначение каждого компонента. Полный контракт (props / events / slots /
-exposed) и примеры — в llms-components.txt.
+Below is the purpose of every component. The full contract (props / events /
+slots / exposed) and examples are in llms-components.txt.
 
 ### Atoms (15)
 
-- **CdsCounter** — Счётчик показывает, сколько символов уже введено и сколько разрешено: `42 / 100`.
-- **CdsDescription** — Описание — приглушённый текст под меткой поля.
-- **CdsDivider** — Разделитель — тонкая линия между смысловыми частями интерфейса: секциями формы, строками списка, блоками карточки.
-- **CdsField** — Рамка поля ввода: фон, граница, состояния фокуса и ошибки, внутренние иконки, кнопка очистки и индикатор загрузки.
-- **CdsFunctionalButton** — Функциональная кнопка — служебное действие рядом с контентом: скачать файл в строке списка, показать пароль в поле, свернуть блок, открыть меню записи.
-- **CdsHighlight** — Подсветка объясняет, почему строка попала в выдачу: компонент находит в тексте совпадения с запросом (`query`) или с готовыми диапазонами (`matches`) и оборачивает их в `mark`.
-- **CdsInput** — Обвязка поля ввода: метка, описание, внешние иконки, блок сообщений и валидация по правилам.
-- **CdsLabel** — Метка называет поле — говорит, что от пользователя ждут.
-- **CdsMessages** — Блок сообщений под полем ввода: подсказка, пояснение или ошибка валидации.
-- **CdsResponsive** — Рамка с постоянными пропорциями.
-- **CdsSelectionControl** — Основа контролов выбора: нативный `input` с иконками состояний, метка и описание.
-- **CdsSelectionControlGroup** — Контейнер для набора контролов выбора: хранит общее значение, раздаёт вложенным CdsSelectionControl тип, иконки, цвета и состояния и связывает их одним атрибутом `name`.
-- **CdsSlideGroup** — Слайд-группа укладывает набор элементов в одну линию с прокруткой: когда элементы не помещаются, лента листается стрелками.
-- **CdsSlideView** — Слайд-вью показывает один слайд из набора и переключает их с анимацией сдвига: стрелки, свайпы и `v-model` листают вперёд и назад.
-- **CdsSurface** — Поверхность — контейнер с фоном из токенов, размерами, позиционированием и собственной темой.
+- **CdsCounter** — The counter shows how many characters are already typed and how many are allowed: `42 / 100`.
+- **CdsDescription** — A description is muted text under the label of a field.
+- **CdsDivider** — A divider is a thin line between the meaningful parts of an interface: the sections of a form, the rows of a list, the blocks of a card.
+- **CdsField** — The frame of an input: the background, the border, the focus and error states, the inner icons, the clear button and the loading indicator.
+- **CdsFunctionalButton** — A functional button is a utility action next to the content: download a file in a row of a list, reveal a password in a field, collapse a block, open the menu of a record.
+- **CdsHighlight** — Highlighting explains why a row made it into the results: the component finds the matches with the query (`query`) or with ready ranges (`matches`) in the text and wraps them into `mark`.
+- **CdsInput** — The wrapper of an input: the label, the description, the outer icons, the block of messages and the validation by rules.
+- **CdsLabel** — A label names a field — it says what is expected from the user.
+- **CdsMessages** — The block of messages under an input: a hint, an explanation or a validation error.
+- **CdsResponsive** — A frame with constant proportions.
+- **CdsSelectionControl** — The base of the selection controls: a native `input` with state icons, a label and a description.
+- **CdsSelectionControlGroup** — A container for a set of selection controls: it holds the shared value, hands the nested CdsSelectionControl the type, the icons, the colors and the states, and ties them together with a single `name` attribute.
+- **CdsSlideGroup** — A slide group lays a set of elements out in a single scrollable line: when the elements do not fit, the strip is paged with arrows.
+- **CdsSlideView** — A slide view shows one slide out of a set and switches them with a shift animation: arrows, swipes and `v-model` page forward and backward.
+- **CdsSurface** — A surface is a container with a background from the tokens, sizes, positioning and a theme of its own.
 
 ### Content (19)
 
-- **CdsAvatar** — Аватар показывает пользователя, команду или компанию: фотографию, инициалы или иконку в круглом контейнере.
-- **CdsButton** — Кнопка — основной способ запустить действие: отправить форму, открыть модальное окно, подтвердить выбор.
-- **CdsButtonGroup** — Группа кнопок объединяет несколько CdsButton в один блок: кнопки прижимаются вплотную, скругление остаётся только по краям, а общие свойства задаются один раз на группе.
-- **CdsButtonToggle** — Toggle-группа собирает кнопки CdsButton в переключатель: нажатая кнопка остаётся выбранной, а выбор доступен через `v-model`.
-- **CdsCard** — Карточка собирает связанный контент — заголовок, текст, изображение, действия — в один блок с рамкой.
-- **CdsCarousel** — Карусель показывает изображения или произвольный контент слайд за слайдом: промо-баннеры, фотогалереи, шаги онбординга.
-- **CdsExpandablePanel** — Раскрывающаяся панель прячет подробности за заголовком: пользователь видит список тем и открывает только ту, что ему нужна.
-- **CdsIcon** — Иконка — короткий визуальный знак рядом с текстом: статус записи, тип файла, направление перехода.
-- **CdsImage** — Изображение, которое умеет ждать.
-- **CdsList** — Список показывает набор однотипных записей — разделы меню, документы, сотрудников, настройки — так, чтобы нужную было легко найти и выбрать.
-- **CdsMenu** — Меню всплывает рядом с элементом-активатором и показывает список действий или разделов: «ещё» в строке таблицы, меню пользователя в шапке, контекстное меню по правому клику.
-- **CdsModal** — Модальное окно открывается поверх страницы и держит фокус на одной задаче: подтвердить действие, заполнить короткую форму, показать детали — не уводя пользователя с текущего экрана.
-- **CdsOverlay** — Оверлей показывает контент поверх страницы: затемняет её подложкой, считает позицию относительно активатора и управляет порядком наложения открытых слоёв.
-- **CdsTable** — Таблица выводит большие наборы записей в колонках и берёт на себя работу с данными: сортировку, фильтры, пагинацию, выбор и раскрытие строк, фиксацию шапки и колонок.
-- **CdsTag** — Тег — компактная метка рядом с объектом: статус заявки, категория товара, выбранный фильтр.
-- **CdsTagGroup** — Группа тегов превращает набор CdsTag в переключатель: выбранный тег подсвечивается, значение доступно через `v-model`, а не поместившиеся теги уезжают в горизонтальную прокрутку.
-- **CdsTooltip** — Всплывающая подсказка коротко поясняет элемент интерфейса при наведении или фокусе: называет кнопку-иконку, показывает полный текст обрезанной строки, объясняет, почему действие недоступно.
-- **CdsTree** — Дерево показывает иерархию: разделы каталога, файлы проекта, структуру организации.
-- **CdsVirtualScroll** — Виртуальный скролл держит длинные списки быстрыми: в DOM попадают только видимые строки, а не весь массив.
-
-### Controls (17)
-
-- **CdsAutocomplete** — Автокомплит — поле выбора из длинного списка: пользователь вводит запрос, список фильтруется на лету, совпадения подсвечиваются.
-- **CdsCheckbox** — Чекбокс включает и выключает независимую опцию: согласие с условиями, пункт в списке фильтров, настройку профиля.
-- **CdsCheckboxButton** — Контрол чекбокса без лейбла и блока сообщений — атом, на котором собран CdsCheckbox.
-- **CdsCombobox** — Комбобокс — поле с выпадающим списком и свободным вводом: значение можно выбрать из предложенных или ввести своё — текст сам становится значением.
-- **CdsDateInput** — Поле ввода даты: текстовое поле с иконкой календаря, по клику раскрывающее CdsDatePicker в выпадающем меню.
-- **CdsDatePicker** — Календарь для выбора даты — одной, нескольких или диапазона.
-- **CdsFileInput** — Поле выбора файлов: пользователь прикладывает документы кликом, перетаскиванием или вставкой из буфера обмена.
-- **CdsFileUpload** — Зона загрузки файлов: принимает файлы перетаскиванием, вставкой из буфера обмена и через системный диалог, а выбранное показывает списком с превью изображений.
-- **CdsForm** — Форма объединяет поля в одну группу: собирает их валидацию в общий статус, перехватывает отправку и умеет сбрасывать значения.
-- **CdsRadio** — Радиокнопка — один вариант взаимоисключающего выбора.
-- **CdsRadioGroup** — Группа радиокнопок — выбор одного варианта из короткого взаимоисключающего набора: способ оплаты, тариф, период отчёта.
-- **CdsSelect** — Селект открывает выпадающий список и позволяет выбрать одно или несколько значений из заранее известного набора: страну, статус, категорию.
-- **CdsTextArea** — Текстовая область — поле для многострочного текста: комментария, описания, обращения в поддержку.
-- **CdsTextInput** — Текстовое поле — базовый способ получить данные от пользователя: имя, почту, сумму, поисковый запрос.
-- **CdsTimePicker** — Выбор времени: часы, минуты и — по желанию — секунды.
-- **CdsToggle** — Тумблер — переключатель настройки «вкл/выкл», который срабатывает сразу, без кнопки «Сохранить»: уведомления, автопродление, видимость профиля.
-- **CdsUploader** — Загрузчик отправляет файлы на сервер прямо из интерфейса: пользователь выбирает их в системном диалоге или перетаскивает на кнопку, а компонент показывает список загруженного — со статусом, прогрессом, скачиванием и удалением.
+- **CdsAvatar** — An avatar shows a person, a team or a company: a photo, initials or an icon inside a round container.
+- **CdsButton** — A button is the primary way to trigger an action: submit a form, open a modal, confirm a choice.
+- **CdsButtonGroup** — A button group joins several CdsButton into one block: the buttons sit flush against each other, only the outer corners stay rounded, and shared props are set once on the group.
+- **CdsButtonToggle** — A toggle group turns CdsButton into a switch: the pressed button stays selected, and the choice is available through `v-model`.
+- **CdsCard** — A card gathers related content — a title, text, an image, actions — into one bordered block.
+- **CdsCarousel** — A carousel shows images or arbitrary content slide by slide: promo banners, photo galleries, onboarding steps.
+- **CdsExpandablePanel** — An expandable panel hides the details behind a title: you see the list of topics and open only the one you need.
+- **CdsIcon** — An icon is a short visual mark next to the text: the status of a record, the type of a file, the direction of a transition.
+- **CdsImage** — An image that knows how to wait.
+- **CdsList** — A list shows a set of records of the same kind — menu sections, documents, employees, settings — so that the one you need is easy to find and pick.
+- **CdsMenu** — A menu pops up next to an activator element and shows a list of actions or sections: the "more" button in a table row, the user menu in the header, a context menu on right click.
+- **CdsModal** — A modal opens on top of the page and keeps the focus on a single task: confirm an action, fill in a short form, look at the details — without taking you away from the current screen.
+- **CdsOverlay** — An overlay shows content on top of the page: it dims the page with a scrim, computes the position relative to an activator and manages the stacking order of the open layers.
+- **CdsTable** — A table shows large sets of records in columns and takes the data work off your hands: sorting, filters, pagination, row selection and expansion, a pinned header and pinned columns.
+- **CdsTag** — A tag is a compact label next to an object: the status of a request, a product category, a selected filter.
+- **CdsTagGroup** — A tag group turns a set of CdsTag into a toggle: the selected tag is highlighted, the value is available through `v-model`, and the tags that do not fit move into a horizontal scroll.
+- **CdsTooltip** — A tooltip briefly explains an interface element on hover or focus: it names an icon button, shows the full text of a truncated line, explains why an action is unavailable.
+- **CdsTree** — A tree shows a hierarchy: catalog sections, project files, an org structure.
+- **CdsVirtualScroll** — Virtual scrolling keeps long lists fast: only the visible rows get into the DOM, not the whole array.
+
+### Controls (18)
+
+- **CdsAutocomplete** — An autocomplete is a field for picking from a long list: the user types a query, the list is filtered on the fly and the matches are highlighted.
+- **CdsCheckbox** — A checkbox turns an independent option on and off: consent to terms, an entry in a filter list, a profile setting.
+- **CdsCheckboxButton** — The checkbox control without a label and a messages block — the atom CdsCheckbox is built on.
+- **CdsCombobox** — A combobox is a field with a dropdown list and free input: the value can be picked from the offered ones or typed in — the text itself becomes the value.
+- **CdsDateInput** — A date field: a text field with a calendar icon that opens CdsDatePicker in a dropdown menu on click.
+- **CdsDatePicker** — A calendar for picking a date — a single one, several or a range.
+- **CdsFileInput** — A file field: the user attaches documents by a click, by dragging or by pasting from the clipboard.
+- **CdsFileUpload** — A file upload zone: it accepts files by dragging, by pasting from the clipboard and through the system dialog, and shows the selection as a list with image previews.
+- **CdsForm** — A form joins fields into one group: it collects their validation into a common status, intercepts the submission and can reset the values.
+- **CdsOtpInput** — A field for entering a one-time code — from an SMS, an email or an authenticator app.
+- **CdsRadio** — A radio button is one option of a mutually exclusive choice.
+- **CdsRadioGroup** — A radio group is a choice of one option out of a short mutually exclusive set: a payment method, a plan, a report period.
+- **CdsSelect** — A select opens a dropdown list and lets you pick one or several values from a known set: a country, a status, a category.
+- **CdsTextArea** — A text area is a field for multiline text: a comment, a description, a support request.
+- **CdsTextInput** — A text field is the basic way to get data from the user: a name, an email, an amount, a search query.
+- **CdsTimePicker** — Time selection: hours, minutes and — if you want — seconds.
+- **CdsToggle** — A toggle is an on/off switch for a setting that applies immediately, without a "Save" button: notifications, auto-renewal, profile visibility.
+- **CdsUploader** — The uploader sends files to the server right from the interface: the user picks them in the system dialog or drags them onto the button, and the component shows the list of what was uploaded — with a status, progress, downloading and removal.
 
 ### Feedback (12)
 
-- **CdsBadge** — Бейдж — маленькая метка в углу элемента или рядом с ним: счётчик непрочитанных сообщений, точка «есть новое», короткая пометка.
-- **CdsEmptyState** — Пустое состояние объясняет, почему на экране нет контента, и подсказывает следующий шаг: нет результатов поиска, пустой список, ошибка загрузки.
-- **CdsLoader** — Круговой индикатор неопределённой загрузки — вращающееся кольцо без отображения прогресса.
-- **CdsNotification** — Уведомление — блок с сообщением о событии или состоянии: успешное сохранение, предупреждение о лимите, ошибка загрузки.
-- **CdsNotificationAlert** — Всплывающее уведомление поверх страницы — аналог `CdsNotificationAlert` из CDS 3.
-- **CdsProgressBar** — Линейный индикатор прогресса — горизонтальная шкала хода операции: загрузки файла, шагов мастера, воспроизведения медиа.
-- **CdsProgressCircle** — Круговой индикатор прогресса показывает ход операции: загрузку файла, обработку данных, заполнение лимита.
-- **CdsSkeletonLoader** — Скелет показывает форму будущего контента, пока данные загружаются: вместо пустого экрана пользователь сразу видит, где появятся заголовок, текст и кнопки.
-- **CdsStages** — Шкала этапов показывает ход бизнес-процесса: какие этапы позади, какой идёт сейчас и где процесс остановился из-за ошибки.
-- **CdsStatus** — Статус — не-интерактивный индикатор состояния объекта: заявка оплачена, документ на проверке, платёж просрочен.
-- **CdsToast** — Тост — всплывающее уведомление о результате действия: изменения сохранены, файл загружен, запрос не прошёл.
-- **CdsToastQueue** — Очередь всплывающих уведомлений на основе CdsToast.
+- **CdsBadge** — A badge is a small marker in the corner of an element or next to it: a counter of unread messages, a "there is something new" dot, a short label.
+- **CdsEmptyState** — An empty state explains why there is no content on the screen and suggests the next step: no search results, an empty list, a loading error.
+- **CdsLoader** — A circular indeterminate loading indicator — a spinning ring without progress.
+- **CdsNotification** — A notification is a block with a message about an event or a state: a successful save, a warning about a limit, a loading error.
+- **CdsNotificationAlert** — A pop-up notification above the page — the counterpart of `CdsNotificationAlert` from CDS 3.
+- **CdsProgressBar** — A linear progress indicator — a horizontal bar for the course of an operation: a file upload, the steps of a wizard, media playback.
+- **CdsProgressCircle** — A circular progress indicator shows the course of an operation: a file upload, data processing, a filling quota.
+- **CdsSkeletonLoader** — A skeleton shows the shape of the future content while the data is loading: instead of an empty screen the user immediately sees where the heading, the text and the buttons will appear.
+- **CdsStages** — A stage bar shows the course of a business process: which stages are behind, which one is running now and where the process stopped because of an error.
+- **CdsStatus** — A status is a non-interactive indicator of the state of an object: the request is paid, the document is under review, the payment is overdue.
+- **CdsToast** — A toast is a pop-up notification about the result of an action: the changes are saved, the file is uploaded, the request failed.
+- **CdsToastQueue** — A queue of pop-up notifications built on CdsToast.
 
 ### Layouts (8)
 
-- **CdsDrawer** — Боковая панель приложения: разделы навигации слева, контекст записи или фильтры справа.
-- **CdsFooter** — Подвал приложения: копирайт и служебные ссылки на обычных страницах, панель действий — на формах.
-- **CdsGrid** — Адаптивная модульная сетка: `CdsGrid`, `CdsRow` и `CdsCol` раскладывают контент по колонкам — от 4 на телефоне до 16 на широких экранах.
-- **CdsHeader** — Шапка приложения: название, глобальный поиск, уведомления, профиль — всё, что должно быть под рукой на любом экране.
-- **CdsLayout** — Каркас приложения: `CdsLayout` расставляет шапку, боковые панели, контент и подвал, считает их размеры и берёт на себя скролл.
-- **CdsMain** — Основная область приложения: `CdsMain` — то место, куда попадает контент страницы.
-- **CdsPage** — Страница внутри макета: `CdsPage` задаёт содержимому минимальную высоту с учётом шапки и подвала, поэтому короткая страница занимает весь экран, а не повисает узкой полосой сверху.
-- **CdsToolbar** — Горизонтальная полоса с заголовком и действиями: наполняет шапку и подвал приложения, а на странице собирает заголовок раздела с кнопками.
+- **CdsDrawer** — The side panel of the application: navigation sections on the left, the context of a record or filters on the right.
+- **CdsFooter** — The footer of the application: a copyright notice and utility links on regular pages, an action bar on forms.
+- **CdsGrid** — A responsive modular grid: `CdsGrid`, `CdsRow` and `CdsCol` lay the content out in columns — from 4 on a phone to 16 on wide screens.
+- **CdsHeader** — The header of the application: the title, the global search, notifications, the profile — everything that has to be at hand on any screen.
+- **CdsLayout** — The frame of the application: `CdsLayout` places the header, the side drawers, the content and the footer, measures their sizes and takes the scrolling over.
+- **CdsMain** — The main area of the application: `CdsMain` is the place where the content of the page lands.
+- **CdsPage** — A page inside the layout: `CdsPage` gives the content a minimum height that accounts for the header and the footer, so a short page fills the whole screen instead of hanging as a narrow strip at the top.
+- **CdsToolbar** — A horizontal bar with a title and actions: it fills the header and the footer of the application, and on a page it assembles the title of a section together with its buttons.
 
 ### Navigation (5)
 
-- **CdsBreadcrumbs** — Хлебные крошки показывают путь до текущей страницы в иерархии разделов и возвращают на любой уровень выше одним кликом.
-- **CdsLink** — Ссылка отправляет пользователя в другое место: на соседнюю страницу приложения, во внешний сервис или к почте.
-- **CdsPagination** — Пагинация делит большой набор данных на страницы и помогает перейти к нужной: кнопки с номерами, стрелки «назад» и «вперёд», переход к первой и последней странице и поле быстрого перехода.
-- **CdsSteps** — Степпер проводит пользователя через многошаговый процесс: показывает, какие шаги пройдены, какой активен и сколько осталось.
-- **CdsTabs** — Табы делят экран на равнозначные разделы и переключают их на месте, без перехода на другую страницу.
+- **CdsBreadcrumbs** — Breadcrumbs show the path to the current page in the hierarchy of sections and take you back to any level above in one click.
+- **CdsLink** — A link sends the user somewhere else: to a neighboring page of the application, to an external service or to an email address.
+- **CdsPagination** — Pagination splits a large data set into pages and helps you jump to the one you need: numbered buttons, "back" and "forward" arrows, jumps to the first and the last page, and a quick jump field.
+- **CdsSteps** — The stepper walks the user through a multi-step process: it shows which steps are done, which one is active and how many are left.
+- **CdsTabs** — Tabs split the screen into sections of equal weight and switch between them in place, without going to another page.
 
-### Прочее (2)
+### Other (2)
 
-- **CdsApp** — описание не заполнено.
-- **CdsDefaultsProvider** — описание не заполнено.
+- **CdsApp** — no description yet.
+- **CdsDefaultsProvider** — no description yet.

package/package.json

@@ -1,32 +1,42 @@
 {
   "name": "@central-design-system/components",
-  "version": "4.0.0-alpha.0",
+  "version": "4.0.0-alpha.10",
   "author": "magersoft",
   "description": "Luma Design System - Vue 3 UI Framework",
   "homepage": "https://cds.b2b-center.ru/",
   "repository": {
     "type": "git",
-    "url": "git+https://gitlab.b2b-center.ru/cds/central-design-system.git"
+    "url": "https://gitlab.b2b-center.ru/cds/central-design-system.git"
   },
   "type": "module",
   "main": "dist/cjs/entry.js",
   "module": "dist/es/entry.js",
   "jsdelivr": "dist/iife/entry.js",
   "unpkg": "dist/iife/entry.js",
-  "types": "dist/types/entry.d.ts",
+  "types": "dist/cds.d.ts",
   "exports": {
     ".": {
       "import": {
+        "types": "./dist/cds.d.ts",
         "node": "./dist/esm-node/entry.mjs",
-        "types": "./dist/types/entry.d.ts",
         "default": "./dist/es/entry.js"
       },
-      "require": "./dist/cjs/entry.js"
+      "require": {
+        "types": "./dist/cds.d.ts",
+        "default": "./dist/cjs/entry.js"
+      }
+    },
+    "./iconsets/*": {
+      "import": {
+        "types": "./dist/types/assets/icons/*.d.ts",
+        "node": "./dist/esm-node/src/assets/icons/*.mjs",
+        "default": "./dist/es/src/assets/icons/*.js"
+      }
     },
-    "./css": {
+    "./browser": {
       "import": {
-        "node": "./dist/styles.css",
-        "default": "./dist/styles/index.css"
+        "types": "./dist/cds.d.ts",
+        "default": "./dist/browser/entry.js"
       }
     },
     "./dist/*": "./dist/*",
@@ -42,6 +52,15 @@
       "sass": "./src/styles/utilities.scss",
       "default": "./dist/styles/utilities.css"
     },
+    "./styles/settings": {
+      "sass": "./src/styles/settings/_index.scss"
+    },
+    "./styles/component-settings": {
+      "sass": "./src/styles/component-settings.scss"
+    },
+    "./styles/breakpoints": {
+      "sass": "./src/styles/breakpoints.scss"
+    },
     "./styles/tailwind": {
       "default": "./dist/styles/tailwind.css"
     },
@@ -59,6 +78,9 @@
     "*": {
       "web-components": [
         "dist/types/main.d.ts"
+      ],
+      "iconsets/*": [
+        "dist/types/assets/icons/*"
       ]
     }
   },
@@ -69,6 +91,8 @@
     "dist/es/**/*.map",
     "src/assets/fonts/**",
     "src/styles/**/*.scss",
+    "src/styles/**/*.sass",
+    "src/components/**/*.scss",
     "src/themes",
     "README.md",
     "MIGRATION.md",
@@ -90,20 +114,24 @@
     "node": "^20.19.0 || >=22.12.0"
   },
   "scripts": {
-    "build": "npx tsx build/build.ts",
+    "build": "tsx build/build.ts",
     "build:types": "vue-tsc --project tsconfig.build.json",
     "build:cjs": "vite build --config ./build/configs/vite.cjs.ts",
     "build:es": "vite build --config ./build/configs/vite.es.ts",
     "build:mjs": "vite build --config ./build/configs/vite.mjs.ts",
     "build:iife": "vite build --config ./build/configs/vite.iife.ts",
+    "build:browser": "vite build --config ./build/configs/vite.browser.ts",
     "build:wc": "vite build --config ./build/configs/vite.wc.ts",
     "build:styles": "vite build --config ./build/configs/vite.styles.ts",
-    "generate:meta": "npx tsx build/plugins/generate-component-meta.ts",
-    "generate:llms": "npx tsx build/plugins/generate-llms-txt.ts",
-    "generate:skill": "npx tsx build/plugins/generate-skill/index.ts",
-    "generate:changelog": "npx tsx build/plugins/generate-changelog.ts",
-    "generate:all": "run-s generate:meta generate:llms generate:skill generate:changelog",
-    "test:unit": "vitest",
+    "generate:meta": "tsx build/plugins/generate-component-meta.ts",
+    "generate:settings": "tsx build/plugins/generate-component-settings.ts",
+    "generate:llms": "tsx build/plugins/generate-llms-txt.ts",
+    "generate:skill": "tsx build/plugins/generate-skill/index.ts",
+    "generate:mcp": "tsx build/plugins/generate-mcp-data.ts",
+    "generate:changelog": "tsx build/plugins/generate-changelog.ts",
+    "generate:i18n-check": "bun run --cwd ../../apps/docs docs:i18n-check",
+    "generate:all": "run-s generate:meta generate:settings generate:llms generate:skill generate:mcp generate:changelog generate:i18n-check",
+    "test:unit": "vitest run",
     "test:e2e": "playwright test",
     "build-only": "vite build",
     "check-types": "vue-tsc --noEmit -p tsconfig.app.json",
@@ -115,10 +143,10 @@
     "clean": "rm -rf dist node_modules .turbo"
   },
   "devDependencies": {
-    "@central-design-system/eslint-config": "workspace:*",
-    "@central-design-system/prettier-config": "workspace:*",
-    "@central-design-system/stylelint-config": "workspace:*",
-    "@central-design-system/tsconfig": "workspace:*",
+    "@central-design-system/eslint-config": "0.0.0",
+    "@central-design-system/prettier-config": "0.0.0",
+    "@central-design-system/stylelint-config": "0.0.0",
+    "@central-design-system/tsconfig": "0.0.0",
     "@playwright/test": "^1.58.1",
     "@types/jsdom": "^27.0.0",
     "@types/listr": "^0.14.10",
@@ -138,7 +166,10 @@
     "listr": "^0.14.3",
     "npm-run-all2": "^8.0.4",
     "oxlint": "~1.42.0",
+    "rollup": "^4.61.1",
+    "rollup-plugin-dts": "^6.2.3",
     "sass-embedded": "^1.97.3",
+    "tsx": "4.23.13",
     "unplugin-auto-import": "^21.0.0",
     "vite": "^5.4.21",
     "vite-plugin-banner": "^0.8.1",
@@ -146,6 +177,7 @@
     "vite-tsconfig-paths": "^6.1.0",
     "vitest": "^4.0.18",
     "vue": "3.5.27",
+    "vue-component-meta": "3.3.11",
     "vue-macros": "^3.1.2",
     "vue-router": "5.0.1",
     "vue-tsc": "3.2.4"

package/src/components/CdsApp/CdsApp.scss

@@ -0,0 +1,43 @@
+@use '../../styles/tools';
+@use './styles/CdsApp.variables' as *;
+
+@include tools.layer('components') {
+  .cds-app {
+    display: flex;
+    color: $application-color;
+    background: $application-background;
+
+    &__wrapper {
+      position: relative;
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+      max-width: 100%;
+      backface-visibility: hidden;
+    }
+
+    &--storybook {
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+
+      .cds-app__wrapper {
+        display: block;
+        flex: 1 1 auto;
+        max-width: 100%;
+        padding: var(--cds-spacing-600) var(--cds-spacing-400);
+      }
+
+      &.cds-app--storybook-fluid {
+        align-items: normal;
+        justify-content: normal;
+
+        .cds-app__wrapper {
+          display: flex;
+          flex: 1 1 auto;
+        }
+      }
+    }
+  }
+}

package/src/components/CdsApp/styles/_CdsApp.variables.scss

@@ -0,0 +1,2 @@
+$application-background: rgb(var(--cds-color-page-primary)) !default;
+$application-color: rgb(var(--cds-color-content-primary)) !default;