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

package/llms/llms-components.txt

@@ -1,6 +1,6 @@
 # Central Design System (CDS 4) — components
 
-> Version: 4.0.0-alpha.10
+> Version: 4.0.0-alpha.12
 > Documentation for all `@central-design-system/components` components: purpose, examples, and the full API contract.
 > Generated automatically (`bun run generate:meta` → `bun run generate:llms`). Do not edit manually.
 
@@ -42,6 +42,8 @@ see the "Tree-shaking" guide for details.
 
 _Category: Other_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 ## API
 
 ### CdsApp
@@ -65,6 +67,8 @@ _Category: Other_
 
 _Category: Controls · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. The field is built on CdsTextInput, and the menu and the list are the same as in CdsSelect, so the label, the messages, validation and the menu behave identically.
 
 **See also:** If there are few options and search is not needed, take CdsSelect. If the user may enter values outside the list — CdsCombobox.
@@ -701,7 +705,7 @@ const selected = ref(null);
 | `loader` | `LoaderSlotProps` | Slot for a custom loader (shown when the loading prop is true). |
 | `menu-footer` | `{ search: Ref<string \| undefined, string \| undefined>; filteredItems: ListItem<any>[]; }` | Content of the menu footer. Receives the current search query and the filtered items. |
 | `menu-header` | `{ search: Ref<string \| undefined, string \| undefined>; filteredItems: ListItem<any>[]; }` | Content of the menu header. Receives the current search query and the filtered items. |
-| `message` | `CdsMessagesSlots` | Slot for customizing the content of a message |
+| `message` | `CdsMessageSlot` | Slot for customizing the content of a message |
 | `messages` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
 | `no-data` | `any` | Content shown in the menu when the item list is empty. |
 | `prepend` | `CdsInputSlot` | Adds an element before the input |
@@ -735,6 +739,8 @@ const selected = ref(null);
 
 _Category: Content · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 An avatar shows a person, a team or a company: a photo, initials or an icon inside a round container. Use it in member lists, comments and profile headers — anywhere the reader needs to recognize "who is this" at a glance.
 
 **See also:** The built-in badge shows a status or a counter right on the avatar; for a marker on arbitrary content take CdsBadge, and for a text label inside a line — CdsTag.
@@ -1053,6 +1059,8 @@ const remove = () => {
 
 _Category: Feedback · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. A badge is not interactive — it draws attention to the element it is attached to instead of acting on its own.
 
 **See also:** For a textual object status ("Done", "In progress") take CdsStatus, and CdsAvatar has a built-in `badge` prop for the common indicators on an avatar.
@@ -1461,6 +1469,8 @@ const contacts = [
 
 _Category: Navigation · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 Breadcrumbs show the path to the current page in the hierarchy of sections and take you back to any level above in one click. The list is built from the `items` array or by hand — from `CdsBreadcrumbsItem` and `CdsBreadcrumbsDivider`.
 
 **See also:** To switch between sections of the same level, use CdsTabs; for a link styled as text inside a paragraph, use CdsLink; and to move through the steps of a process, use CdsSteps.
@@ -1800,6 +1810,8 @@ const visible = computed(() => (expanded.value ? path : [path[0], '…', ...path
 
 _Category: Content · since 4.0.0_
 
+_Tests: API 38/38 · 47 unit · 2 e2e · 3 known bugs · lines 97.6% (v4.0.0-alpha.11) · a11y: 11 axe recommendations (v4.0.0-alpha.11)_
+
 A button is the primary way to trigger an action: submit a form, open a modal, confirm a choice. Its appearance signals the role it plays: `primary` is the main action on the screen, `secondary` and `tertiary` are the supporting ones.
 
 **See also:** For a link styled as text inside a paragraph, use CdsLink; to pick one option out of several, use CdsButtonToggle.
@@ -2229,6 +2241,8 @@ const totalSteps = 4;
 
 _Category: Content · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. This is how you present sets of related actions — a toolbar over a record or zoom controls.
 
 **See also:** If the user does not trigger an action but picks one of several options, use CdsButtonToggle — it keeps the selected state.
@@ -2292,6 +2306,8 @@ import { CdsButton, CdsButtonGroup } from '@central-design-system/components';
 
 _Category: Content · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A toggle group turns CdsButton into a switch: the pressed button stays selected, and the choice is available through `v-model`. Use it for modes and filters that are visible right away — the layout of a list, the period of a report, formatting options.
 
 **See also:** If the buttons trigger actions instead of storing a choice, take CdsButtonGroup. To pick from a long list use CdsSelect, and inside forms — CdsRadioGroup.
@@ -2648,6 +2664,8 @@ const stats = {
 
 _Category: Content · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A card gathers related content — a title, text, an image, actions — into one bordered block. Use it when an object (a product, a plan, a document) should read as a whole: a card can act as a link and as a selectable item in a group.
 
 **See also:** For uniform lists of rows use CdsList, for collapsible sections use CdsExpandablePanel, and when you only need a surface without any structure, use CdsSurface.
@@ -3565,6 +3583,8 @@ const photos = [
 
 _Category: Content · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A carousel shows images or arbitrary content slide by slide: promo banners, photo galleries, onboarding steps. Arrows and delimiter dots give you navigation, autoplay flips the slides on its own, and the progress bar shows the current position.
 
 **See also:** To switch content without delimiters and autoplay, take CdsSlideView — the carousel is built on top of it; for a single image take CdsImage.
@@ -4156,6 +4176,8 @@ const isLast = computed(() => slide.value === steps.length - 1);
 
 _Category: Controls · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A checkbox turns an independent option on and off: consent to terms, an entry in a filter list, a profile setting. Every checkbox in a group is selected on its own, which makes it right for multiple choice.
 
 **See also:** To pick one option out of several use CdsRadio, for settings that apply immediately — CdsToggle. If you need the control alone, without a label and messages — in a table cell, for example — take CdsCheckboxButton.
@@ -4587,7 +4609,7 @@ const filtered = computed(() =>
 | `details` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
 | `input` | `SelectionControlSlot` | Slot for the default input element. |
 | `label` | `{ label: string \| undefined; props: Record<string, any>; }` | Default slot of the CdsLabel component |
-| `message` | `CdsMessagesSlots` | Slot for customizing the content of a message |
+| `message` | `CdsMessageSlot` | Slot for customizing the content of a message |
 | `messages` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
 | `prepend` | `CdsInputSlot` | Adds an element before the input |
 
@@ -4611,6 +4633,8 @@ const filtered = computed(() =>
 
 _Category: Controls · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 The checkbox control without a label and a messages block — the atom CdsCheckbox is built on. Use it where the caption is not needed or lives outside: in a table cell, a list row, a card.
 
 **See also:** For a standalone option with a label, a description and validation use CdsCheckbox — states, colors and groups work the same way here and are described in detail on its page.
@@ -4698,6 +4722,8 @@ const checked = ref(true);
 
 _Category: Controls · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. The field is built on CdsTextInput, and the menu and the list are the same as in CdsSelect, so the label, the messages, validation and the menu behave identically.
 
 **See also:** If the value must come from the list only, take CdsAutocomplete. If there are few options and free input is not needed — CdsSelect.
@@ -5154,7 +5180,7 @@ async function submit() {
 | `loader` | `LoaderSlotProps` | Slot for a custom loader (shown when the loading prop is true). |
 | `menu-footer` | `{ search: Ref<string \| undefined, string \| undefined>; filteredItems: ListItem<any>[]; }` | Content of the menu footer. Receives the current search query and the filtered items. |
 | `menu-header` | `{ search: Ref<string \| undefined, string \| undefined>; filteredItems: ListItem<any>[]; }` | Content of the menu header. Receives the current search query and the filtered items. |
-| `message` | `CdsMessagesSlots` | Slot for customizing the content of a message |
+| `message` | `CdsMessageSlot` | Slot for customizing the content of a message |
 | `messages` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
 | `no-data` | `any` | Content shown in the menu when the item list is empty. |
 | `prepend` | `CdsInputSlot` | Adds an element before the input |
@@ -5190,6 +5216,8 @@ async function submit() {
 
 _Category: Atoms · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 The counter shows how many characters are already typed and how many are allowed: `42 / 100`. When the value exceeds the maximum, the counter turns red — the user sees the problem before submitting the form.
 
 **See also:** The ready-made fields already have the counter built in — turn on the `counter` prop of CdsTextInput or CdsTextArea. A standalone `CdsCounter` is needed when you build your own control.
@@ -5317,6 +5345,8 @@ const title = ref('Поставка канцелярских товаров');
 
 _Category: Controls · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A date field: a text field with a calendar icon that opens CdsDatePicker in a dropdown menu on click. The date can be picked with the mouse or typed on the keyboard — the value arrives as a string in the `mask` format (`DD.MM.YYYY` by default).
 
 **See also:** If the calendar is needed right on the page, without a field, take CdsDatePicker. For the time alone — CdsTimePicker, to pick from a ready list — CdsSelect.
@@ -5972,7 +6002,7 @@ const minYearMonth = `${today.getFullYear()}/${pad(today.getMonth() + 1)}`;
 | `details` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
 | `label` | `{ label: string \| undefined; props: Record<string, any>; }` | Default slot of the CdsLabel component |
 | `loader` | `LoaderSlotProps` | Slot for a custom loader (shown when the loading prop is true). |
-| `message` | `CdsMessagesSlots` | Slot for customizing the content of a message |
+| `message` | `CdsMessageSlot` | Slot for customizing the content of a message |
 | `messages` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
 | `picker-description` | `{ year: string \| number \| undefined; }` | Description in the calendar header. |
 | `picker-title` | `{ date: string; }` | Title in the calendar header. |
@@ -6003,6 +6033,8 @@ const minYearMonth = `${today.getFullYear()}/${pad(today.getMonth() + 1)}`;
 
 _Category: Controls · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A calendar for picking a date — a single one, several or a range. It lives right on the page or in a dropdown menu next to a field; the value is a string in the given format (`DD.MM.YYYY` by default), which is convenient to store and to send to the server.
 
 **See also:** If the calendar needs a field, take the ready CdsDateInput — it assembles the very same thing out of a field, a menu and this calendar, adding manual input and time. For picking the time alone there is CdsTimePicker.
@@ -6517,6 +6549,8 @@ const dateTime = ref(`15.${String(now.getMonth() + 1).padStart(2, '0')}.${now.ge
 
 _Category: Other_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 ## API
 
 ### CdsDefaultsProvider
@@ -6543,6 +6577,8 @@ _Category: Other_
 
 _Category: Atoms · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A description is muted text under the label of a field. It clarifies what to enter and in what format, so the label can stay short.
 
 **See also:** Inputs already have the description built in — the `description` prop of CdsTextInput and the other controls. A standalone `CdsDescription` is needed for groups of fields and for your own controls. For the label of a field take CdsLabel, for the messages under a field take CdsMessages.
@@ -6643,6 +6679,8 @@ const channels = ref(['email']);
 
 _Category: Atoms · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. It does nothing and asks for no attention, it only shows the border where the paddings are no longer enough. A short caption can go into its slot — "or" between two ways of doing something, for example.
 
 **See also:** The blocks of a card are separated by the `divider` prop of CdsCard — it draws the same line without adding markup. If the parts of the screen need to be moved onto different surfaces rather than separated, take CdsSurface.
@@ -7074,6 +7112,8 @@ const phone = ref('');
 
 _Category: Layouts · since 4.0.0_
 
+_Tests: API 0/33 · 31 unit · lines 85.3% (v4.0.0-alpha.11) · a11y: 14 axe recommendations (v4.0.0-alpha.11)_
+
 The side panel of the application: navigation sections on the left, the context of a record or filters on the right. Inside `CdsLayout` the drawer takes its place in the layout and pushes the content aside, and in temporary mode it slides out over it.
 
 **See also:** For a list of sections inside the drawer take CdsList; for navigating the subsections of a single page take CdsTabs. The drawer is a part of the CdsLayout frame, but unlike the other parts it also works on its own: with the `fixed` prop it sticks to the window without a layout.
@@ -7831,6 +7871,8 @@ const items = ref([
 
 _Category: Feedback · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. It is assembled from a media area, headings, a description and an action button.
 
 **See also:** For a short message about the result of an operation take CdsToast, and while the data is still loading show CdsSkeletonLoader instead of an empty state.
@@ -8268,6 +8310,8 @@ import { CdsEmptyState } from '@central-design-system/components';
 
 _Category: Content · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 An expandable panel hides the details behind a title: you see the list of topics and open only the one you need. Take it for FAQs, optional settings and long descriptions that turn a page into an endless feed.
 
 **See also:** If the sections are equal in weight and the reader switches between them, take CdsTabs. For a hierarchy of nested nodes take CdsTree, and for a block that simply separates content — CdsCard.
@@ -9045,6 +9089,8 @@ const cities = [
 
 _Category: Atoms · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 The frame of an input: the background, the border, the focus and error states, the inner icons, the clear button and the loading indicator. You put the control itself into the `default` slot — the text fields, selects and autocompletes of the design system are built on `CdsField`.
 
 **See also:** For regular input take the ready-made fields — CdsTextInput, CdsSelect, CdsTextArea. `CdsField` is needed when your control is not in the library. The label, the description and the messages around the frame are added by CdsInput.
@@ -9333,6 +9379,8 @@ function addTag() {
 
 _Category: Controls · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A file field: the user attaches documents by a click, by dragging or by pasting from the clipboard. Around the native `input type="file"` the component gathers everything a form needs: a label, a description, messages, a counter, clearing and a filter by file types.
 
 **See also:** If you need a prominent upload zone with a list of files, take CdsFileUpload; sending the files to the server is the job of CdsUploader.
@@ -9841,7 +9889,7 @@ onBeforeUnmount(() => {
 | `details` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
 | `label` | `{ label: string \| undefined; props: Record<string, any>; }` | Default slot of the CdsLabel component |
 | `loader` | `LoaderSlotProps` | Slot for a custom loader (shown when the loading prop is true). |
-| `message` | `CdsMessagesSlots` | Slot for customizing the content of a message |
+| `message` | `CdsMessageSlot` | Slot for customizing the content of a message |
 | `messages` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
 | `prepend` | `CdsInputSlot` | Adds an element before the input |
 | `prepend-inner` | `CdsInputDefaultSlot` | Slot added at the start of the input |
@@ -9869,6 +9917,8 @@ onBeforeUnmount(() => {
 
 _Category: Controls · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. Around the zone the component gathers everything a form needs: a label, a description, messages and validation.
 
 **See also:** For a compact file field in a form row use CdsFileInput; sending the files to the server is the job of CdsUploader.
@@ -10413,7 +10463,7 @@ watch(
 | `item` | `CdsFileUploadFileSlot` | An item of the list of the chosen files. |
 | `label` | `{ label: string \| undefined; props: Record<string, any>; }` | Default slot of the CdsLabel component |
 | `loader` | `LoaderSlotProps` | The loading indicator. |
-| `message` | `CdsMessagesSlots` | Slot for customizing the content of a message |
+| `message` | `CdsMessageSlot` | Slot for customizing the content of a message |
 | `messages` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
 | `prepend` | `CdsInputSlot` | Adds an element before the input |
 | `single` | `CdsFileUploadFileSlot` | The only chosen file with `insetFileList` and without `multiple`. |
@@ -10625,6 +10675,8 @@ watch(
 
 _Category: Layouts · since 4.0.0_
 
+_Tests: API 0/12 · 3 unit · lines 76.7% (v4.0.0-alpha.11) · a11y: 6 axe recommendations (v4.0.0-alpha.11)_
+
 The footer of the application: a copyright notice and utility links on regular pages, an action bar on forms. The layout measures the height of the footer and reserves the space, so it never covers the last line of the content.
 
 **See also:** The footer works only inside CdsLayout — outside the layout it renders nothing and warns about it in the console. The top bar of the application is built by CdsHeader, and the content of both by CdsToolbar.
@@ -10902,6 +10954,8 @@ function save() {
 
 _Category: Controls · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A form joins fields into one group: it collects their validation into a common status, intercepts the submission and can reset the values. CDS fields with the `rules` prop connect to the form automatically — with no registration and no extra code.
 
 **See also:** The form does not render the fields itself — build them out of CdsTextInput, CdsSelect, CdsCheckbox and other controls. The validation rules are declared on the fields themselves through the `rules` prop.
@@ -11551,6 +11605,8 @@ const submit = () => {
 
 _Category: Atoms · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. It is a CdsButton with `size="sm"` and `appearance="tertiary"` fixed in place: the background is transparent and appears only on hover, so the button does not compete for attention with the content it stands next to.
 
 **See also:** Style the primary action of the screen — "Save", "Submit the request" — with CdsButton, and a navigation inside a paragraph with CdsLink. If the icon triggers nothing and only explains the content, leave it as CdsIcon.
@@ -11864,6 +11920,8 @@ const expanded = ref(true);
 
 _Category: Layouts · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A responsive modular grid: `CdsGrid`, `CdsRow` and `CdsCol` lay the content out in columns — from 4 on a phone to 16 on wide screens. The grid works in two modes — Flexbox (the default) and CSS Grid — and the whole markup is also available as ready-made CSS classes, without a single component.
 
 **See also:** The grid lays out the content inside a page. Build the frame of the application — the header, the drawers and the footer — from CdsLayout.
@@ -12711,6 +12769,8 @@ const filtered = computed(() =>
 
 _Category: Layouts · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 The header of the application: the title, the global search, notifications, the profile — everything that has to be at hand on any screen. The layout measures its height itself and reserves the space, so the content never ends up under the header.
 
 **See also:** The header works only inside CdsLayout — outside the layout it renders nothing and warns about it in the console. The content of the header is laid out by CdsToolbar, and the bottom bar of the application is built by CdsFooter.
@@ -13120,6 +13180,8 @@ const tab = ref('active');
 
 _Category: Atoms · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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`. Take it for search results, autocomplete suggestions and filtered lists.
 
 **See also:** In CdsAutocomplete, CdsCombobox and CdsSelect the highlighting of the matches is already built in — a standalone `CdsHighlight` is not needed there. For a permanent label next to the text take CdsTag, for a counter take CdsBadge.
@@ -13483,6 +13545,8 @@ const search = () => {
 
 _Category: Content · since 4.0.0_
 
+_Tests: API 0/15 · 3 unit · lines 95.5% (v4.0.0-alpha.11) · a11y: 3 axe recommendations (v4.0.0-alpha.11)_
+
 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. The component takes an icon by name from a connected pack and subordinates its size, color and spacing to the design system tokens.
 
 **See also:** Inside other components you do not assemble an icon separately: CdsButton, CdsTextInput, CdsList and others have the `icon`, `prepend-icon` and `append-icon` props. For a standalone action take CdsFunctionalButton — an icon button with a label and states. All the available icons are in the gallery, and connecting your own pack is described in the guide.
@@ -13829,6 +13893,8 @@ import { CdsIcon } from '@central-design-system/components';
 
 _Category: Content · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 An image that knows how to wait. The component reserves space in the layout according to the given proportions, loads the file when the picture enters the viewport, and shows a placeholder while it is on its way. Over the image you can lay a gradient and any content — a caption, a tag, a button.
 
 **See also:** For a photo of a person or a company logo in a round frame take CdsAvatar, for interface pictograms — CdsIcon. If the proportions have to be set not for a picture but for an arbitrary block — a video, a map, an iframe — use CdsResponsive, and a slideshow of several images is assembled by CdsCarousel.
@@ -14401,6 +14467,8 @@ const current = computed(() => photos[active.value]);
 
 _Category: Atoms · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 The wrapper of an input: the label, the description, the outer icons, the block of messages and the validation by rules. You put the control itself into the `default` slot — usually a CdsField with your `input` inside.
 
 **See also:** For regular input take the ready-made fields — CdsTextInput, CdsSelect, CdsTextArea: they are already assembled from `CdsInput` and `CdsField`. `CdsInput` is needed when your control is not in the library.
@@ -14686,7 +14754,7 @@ const rules = [
 | `description` | `{ description: string \| undefined; props: Record<string, any>; }` | Default slot of the CdsDescription component |
 | `details` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
 | `label` | `{ label: string \| undefined; props: Record<string, any>; }` | Default slot of the CdsLabel component |
-| `message` | `CdsMessagesSlots` | Slot for customizing the content of a message |
+| `message` | `CdsMessageSlot` | Slot for customizing the content of a message |
 | `messages` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
 | `prepend` | `CdsInputSlot` | Adds an element before the input |
 
@@ -14710,6 +14778,8 @@ const rules = [
 
 _Category: Atoms · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A label names a field — it says what is expected from the user. It renders as a `label` tag and binds to the control through `for`, so a click on the label moves the focus into the field.
 
 **See also:** The ready-made fields already have the label built in — the `label` prop of CdsTextInput and the other controls. A standalone `CdsLabel` is needed for groups of fields and for your own controls. The explanation under the label is added by CdsDescription.
@@ -14815,6 +14885,8 @@ const agreed = ref(false);
 
 _Category: Layouts · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. The parts of the layout know about each other — the content never slides under the header and never hides behind a drawer.
 
 **See also:** The parts of the layout are described on their own pages: CdsHeader, CdsDrawer, CdsMain, CdsPage, CdsFooter and CdsToolbar. You can assemble the frame with the mouse and copy the ready code in the layout builder.
@@ -15327,6 +15399,8 @@ const statuses = ref<string[]>(['active']);
 
 _Category: Navigation · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A link sends the user somewhere else: to a neighboring page of the application, to an external service or to an email address. Inside the application the path comes from the `to` prop and vue-router takes over the navigation; for outside destinations the address goes into `href`.
 
 **See also:** If the element triggers an action instead of a navigation — saves, deletes, opens a modal — take CdsButton. A button also accepts `href` or `to` when a navigation has to look like a button. The path through the hierarchy of sections is built by CdsBreadcrumbs, and sections of equal weight are switched by CdsTabs.
@@ -15595,6 +15669,8 @@ function requestAccess() {
 
 _Category: Content · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. Build it from an `items` array in a single line, or from `CdsListItem` components when a row is more than a title with an icon.
 
 **See also:** To pick a value in a form, take CdsSelect; for a tree with checkboxes, async loading and drag and drop — CdsTree; for tabular data with columns — CdsTable. Inside CdsMenu, CdsSelect and CdsAutocomplete the list is already in use — there is no need to assemble it by hand.
@@ -16621,6 +16697,8 @@ const filtered = computed(() =>
 
 _Category: Feedback · since 4.0.0 · status: deprecated_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A circular indeterminate loading indicator — a spinning ring without progress. It shows that the data is still loading: as an inline element, as an overlay above a container or above the whole page.
 
 **See also:** The component is deprecated and will be removed in future versions. Use CdsProgressCircle: it covers both indeterminate loading and progress.
@@ -16704,6 +16782,8 @@ function refresh() {
 
 _Category: Layouts · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 The main area of the application: `CdsMain` is the place where the content of the page lands. Inside `CdsLayout` it indents itself by the height of the header and the footer and by the width of the side drawers, so the content never has to be moved by hand.
 
 **See also:** Put the content into CdsPage — it calculates the minimum height of the page. `CdsMain` works only inside CdsLayout: outside the layout it renders nothing and warns about it in the console.
@@ -16782,6 +16862,8 @@ import {
 
 _Category: Content · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. It positions itself — it opens towards the free space and sticks to the activator while the page scrolls.
 
 **See also:** To pick a value in a form, take CdsSelect — it stays visible and gets submitted. For a short hint on hover use CdsTooltip, and for a dialog that demands an answer use CdsModal. The content of a menu is usually built from CdsList.
@@ -17526,6 +17608,8 @@ watch(isOpen, (value) => {
 
 _Category: Atoms · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 The block of messages under an input: a hint, an explanation or a validation error. The messages appear and disappear with an animation, so the line under the field does not jerk the layout.
 
 **See also:** The ready-made fields already have the block of messages built in — the `messages`, `hint` and `error-messages` props of CdsTextInput and the other controls. A standalone `CdsMessages` is needed for groups of fields and for your own controls. For a noticeable notification on the page take CdsNotification.
@@ -17685,6 +17769,8 @@ const isEmpty = computed(() => channels.value.length === 0);
 
 _Category: Content · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. While the modal is open, the page behind it is dimmed, does not scroll and does not accept clicks.
 
 **See also:** For a list of actions on an element take CdsMenu, for a short hint — CdsTooltip, for a notification about the result — CdsToast. Complex modal content — a header, scrollable text and a row of buttons — is assembled from CdsCard.
@@ -18341,6 +18427,8 @@ const answer = (value: boolean) => {
 
 _Category: Feedback · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. The semantic status sets the color and the icon, and the display modes let you embed the message into a form, a card or a list.
 
 **See also:** For pop-up messages above the page that disappear on their own take CdsToast. For a short status label in a row or a card — CdsTag.
@@ -18741,6 +18829,8 @@ async function retry() {
 
 _Category: Feedback · since 4.0.0 · status: deprecated_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A pop-up notification above the page — the counterpart of `CdsNotificationAlert` from CDS 3. It is assembled from CdsOverlay and CdsNotification in the `important` variant; it hides automatically after `timeout`, while hovering the cursor or focusing inside pauses the timer.
 
 **See also:** The component exists only for a smooth migration from CDS 3 and will be removed. For new scenarios use CdsToast.
@@ -19052,6 +19142,8 @@ function onUpdateModelValue(value: boolean, id: string) {
 
 _Category: Controls · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A field for entering a one-time code — from an SMS, an email or an authenticator app. It looks like a row of separate cells, but the input is taken by a single hidden `input`: that is why the SMS autofill, pasting a whole string from the clipboard, selection and the arrow keys all work, and the focus does not have to be jumped between the cells by hand.
 
 **See also:** For an ordinary short text or number take CdsTextInput: `CdsOtpInput` is needed where the length of the input is known upfront and every character is shown in its own cell.
@@ -19536,6 +19628,8 @@ function submit() {
 
 _Category: Content · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. It is the base mechanism behind CdsModal, CdsMenu and CdsTooltip — take it when you need a popup of your own that is not among the ready-made ones.
 
 **See also:** For common tasks there are ready-made components built on the overlay: a dialog — CdsModal, a list of actions next to an activator — CdsMenu, a hint on hover — CdsTooltip, notifications — CdsToast. CdsOverlay is for when none of them fits.
@@ -20087,6 +20181,8 @@ const hint = ref(false);
 
 _Category: Layouts · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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.
 
 **See also:** `CdsPage` lives inside CdsMain — outside it renders nothing and warns about it in the console. The paddings around the whole content area are calculated by CdsLayout.
@@ -20242,6 +20338,8 @@ import {
 
 _Category: Navigation · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. Extra numbers collapse into an ellipsis, and without an explicit limit the number of buttons adapts to the width of the container.
 
 **See also:** Pagination pages through homogeneous data — a list or a table. To switch between sections of the interface use CdsTabs, and to navigate the hierarchy of pages use CdsBreadcrumbs.
@@ -20674,6 +20772,8 @@ watch(query, () => (page.value = 1));
 
 _Category: Feedback · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A linear progress indicator — a horizontal bar for the course of an operation: a file upload, the steps of a wizard, media playback. The value comes from `model-value`, and when the course of the operation is unknown, the `indeterminate` mode turns on a running waiting animation.
 
 **See also:** For progress shown as a ring take CdsProgressCircle, and to dim a container while it loads — CdsOverlay.
@@ -21167,6 +21267,8 @@ const refresh = () => {
 
 _Category: Feedback · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A circular progress indicator shows the course of an operation: a file upload, data processing, a filling quota. The value is set in percent through `model-value`, and when the course of the operation is unknown, the `indeterminate` mode turns on an endless waiting animation.
 
 **See also:** For progress shown as a horizontal bar take CdsProgressBar, and to dim a container while it loads — CdsOverlay.
@@ -21551,6 +21653,8 @@ const generate = () => {
 
 _Category: Controls · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A radio button is one option of a mutually exclusive choice. It is not used on its own: the buttons are joined by CdsRadioGroup — it keeps the selected value, captions the set and shows the messages. The button is left with `value` — the value of the option, `label` and `description` — its caption and details.
 
 **See also:** Examples, guidelines and scenarios are on the CdsRadioGroup page. For an independent on/off option take CdsCheckbox.
@@ -21604,6 +21708,8 @@ A radio button is one option of a mutually exclusive choice. It is not used on i
 
 _Category: Controls · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A radio group is a choice of one option out of a short mutually exclusive set: a payment method, a plan, a report period. The group keeps the selected value, captions the set with a heading and a description, shows messages and errors; the options themselves are CdsRadio components with their own `value`.
 
 **See also:** For independent options that are turned on separately use CdsCheckbox, for an on/off setting that applies immediately — CdsToggle. If there are more than five options, fold the list into CdsSelect.
@@ -22034,7 +22140,7 @@ const items = computed(() =>
 | `description` | `{ description: string \| undefined; props: Record<string, any>; }` | Default slot of the CdsDescription component |
 | `details` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
 | `label` | `{ label: string \| undefined; props: Record<string, any>; }` | Default slot of the CdsLabel component |
-| `message` | `CdsMessagesSlots` | Slot for customizing the content of a message |
+| `message` | `CdsMessageSlot` | Slot for customizing the content of a message |
 | `messages` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
 | `prepend` | `CdsInputSlot` | Adds an element before the input |
 
@@ -22058,6 +22164,8 @@ const items = computed(() =>
 
 _Category: Atoms · since 4.0.0 · status: new_
 
+_Tests: API 0/11 · 5 unit · lines 100% (v4.0.0-alpha.11) · a11y: 1 axe recommendation (v4.0.0-alpha.11)_
+
 A frame with constant proportions. Set `aspect-ratio` and the height of the block is calculated from its width on any screen. Anything that needs a fixed shape goes inside: a video, a map, an `iframe`, a category tile. The space for the content is taken right away, so the layout does not jump while it loads.
 
 **See also:** For photos take CdsImage — it is built on `CdsResponsive` and can also do lazy loading, a placeholder and cropping. If you need the columns of a page rather than the shape of a single block, take CdsGrid.
@@ -22400,6 +22508,8 @@ const ratio = computed(() => ratios[selected.value]);
 
 _Category: Controls · since 4.0.0_
 
+_Tests: API 127/127 · 80 unit · 10 e2e · 11 known bugs · lines 64.1% (v4.0.0-alpha.11) · a11y: 5 axe recommendations (v4.0.0-alpha.11)_
+
 A select opens a dropdown list and lets you pick one or several values from a known set: a country, a status, a category. The field is built on CdsTextInput, so the label, the description, the messages, validation and the states work exactly as in a text field.
 
 **See also:** For two or three options take CdsRadioGroup — the options are visible right away. If the list is long and the user searches by typing, use CdsAutocomplete, and if values outside the list are allowed — CdsCombobox.
@@ -23380,7 +23490,7 @@ const sorted = computed(() => {
 | `loader` | `LoaderSlotProps` | Slot for a custom loader (shown when the loading prop is true). |
 | `menu-footer` | `{ search: Ref<string \| undefined, string \| undefined>; filteredItems: ListItem<any>[]; }` | Content of the menu footer. Receives the current search query and the filtered items. |
 | `menu-header` | `{ search: Ref<string \| undefined, string \| undefined>; filteredItems: ListItem<any>[]; }` | Content of the menu header. Receives the current search query and the filtered items. |
-| `message` | `CdsMessagesSlots` | Slot for customizing the content of a message |
+| `message` | `CdsMessageSlot` | Slot for customizing the content of a message |
 | `messages` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
 | `no-data` | `any` | Content shown in the menu when the item list is empty. |
 | `prepend` | `CdsInputSlot` | Adds an element before the input |
@@ -23414,6 +23524,8 @@ const sorted = computed(() => {
 
 _Category: Atoms · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 The base of the selection controls: a native `input` with state icons, a label and a description. The component holds the value, can work with its own `true`/`false` values and with multiple selection, and picks up the settings of CdsSelectionControlGroup. The checkboxes, radio buttons and toggles of the design system are built on it.
 
 **See also:** For regular selection take the ready-made controls — CdsCheckbox, CdsRadio, CdsToggle: they already have the icons, the sizes, the state colors and the block of messages. `CdsSelectionControl` is needed when the control you want is not in the library.
@@ -23990,6 +24102,8 @@ function submit() {
 
 _Category: Atoms · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. The radio button group of the design system is built on it.
 
 **See also:** For a ready group with a title, a description and messages take CdsRadioGroup: it is assembled from this group and the CdsInput wrapper. `CdsSelectionControlGroup` is needed when you build your own set of controls.
@@ -24408,6 +24522,8 @@ const slot = ref('day');
 
 _Category: Feedback · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. The ready-made types (`type`) are assembled from "bones" — blanks for an avatar, a line of text, a button or a table.
 
 **See also:** A skeleton fits the first load of a block or a page. For waiting inside a single action — submitting a form, saving — take the `loading` prop of CdsButton or CdsProgressCircle. If there is no data at all, show CdsEmptyState.
@@ -24773,6 +24889,8 @@ load();
 
 _Category: Atoms · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. It can also drive a selection through `v-model` — CdsTabs and CdsTagGroup are built on the slide group.
 
 **See also:** For a bar of sections take the ready CdsTabs, for picking tags take CdsTagGroup, and to page through slides one by one take CdsSlideView.
@@ -25193,6 +25311,8 @@ const tools = [
 
 _Category: Atoms · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. It is the base for carousels and step-by-step interfaces — CdsCarousel is built on the slide view.
 
 **See also:** For a carousel of images with dot delimiters and autoplay take the ready CdsCarousel, for sections with a navigation bar take CdsTabs, and for a strip where several elements are visible at once take CdsSlideGroup.
@@ -25635,6 +25755,8 @@ const events = [
 
 _Category: Feedback · since 4.0.0 · status: deprecated_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. The component only displays the status — the stages are not clickable, so the bar fits cards, headers and lists where the state of the process has to be read at a glance.
 
 **See also:** The component is deprecated: do not write new code with it. It keeps working across the whole 4.x line and prints a `[CDS UPGRADE]` warning in the dev console; it will be removed in 5.0. To show the course of a process without step navigation use CdsSteps — without the `interactive` prop the steps are not clickable, and the header without `items` works as a status tracker (see the "Request status" scenario). Mind that the look differs: `CdsStages` is an arrow bar, `CdsSteps` is a row of indicators with a progress line. To switch between equally weighted sections — CdsTabs.
@@ -25929,6 +26051,8 @@ const stagesFor = (order: Order) =>
 
 _Category: Feedback · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. The `status` prop sets the semantics — the color and the icon — while `variant` sets the display mode: a prominent filled badge or compact text with a colored icon.
 
 **See also:** For labels with arbitrary palette colors — categories, filters — take CdsTag; for counters and marker dots in the corner of an element — CdsBadge.
@@ -26154,6 +26278,8 @@ import { CdsStatus } from '@central-design-system/components';
 
 _Category: Navigation · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. It can switch the content of the steps and renders the "Back" / "Next" buttons out of the box, while a header without content works as a status tracker.
 
 **See also:** The stepper shows the progress of a business process without step navigation on its own: without the `interactive` prop the steps are not clickable, and the header without `items` works as a status tracker — see the ["Request status"](#request-status) scenario. The CdsStages component, which used to solve the same task, is deprecated. For sections of equal weight that are switched in any order, use CdsTabs.
@@ -26694,6 +26820,8 @@ import { CdsSteps, CdsStepsItem } from '@central-design-system/components';
 
 _Category: Atoms · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A surface is a container with a background from the tokens, sizes, positioning and a theme of its own. Take it when a block needs a design system background rather than a ready-made component: the backdrop of a panel, a plate, the base of your own component.
 
 **See also:** For a card with a title and actions take CdsCard, for the sections of a page take CdsLayout. `CdsSurface` is the lowest layer, without content or paddings of its own.
@@ -26844,6 +26972,8 @@ const rows = [
 
 _Category: Content · since 4.0.0_
 
+_Tests: API 0/72 · 13 unit · lines 10.9% (v4.0.0-alpha.11) · a11y: 50 axe recommendations (v4.0.0-alpha.11)_
+
 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. Columns are described by the `columns` prop, the records by the `data` prop.
 
 **See also:** For a plain list of similar items without columns, use CdsList; for a hierarchy without tabular data, use CdsTree.
@@ -30045,6 +30175,8 @@ watch(tableDataSwitcher, () => {
 
 _Category: Navigation · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 Tabs split the screen into sections of equal weight and switch between them in place, without going to another page. The bar is built from `CdsTab` components or from an `items` array, and the content of the sections is switched by `CdsTabsView` and `CdsTabsViewItem`.
 
 **See also:** For a sequential process with steps and progress, use CdsSteps; to pick a single value in a form, use CdsButtonToggle.
@@ -30885,6 +31017,8 @@ async function select(item: string) {
 
 _Category: Content · since 4.0.0_
 
+_Tests: API 0/41 · 6 unit · lines 77.2% (v4.0.0-alpha.11) · a11y: 2 axe recommendations (v4.0.0-alpha.11)_
+
 A tag is a compact label next to an object: the status of a request, a product category, a selected filter. It takes a color from the palette, carries an icon or an avatar, can be closed with a cross and can work as a link.
 
 **See also:** To build a toggle or a filter with selection out of tags, take CdsTagGroup. For a counter or a dot indicator on top of another element use CdsBadge, and trigger actions with CdsButton — a tag only labels.
@@ -30908,10 +31042,9 @@ disabled state and removes the reaction to clicks.
 
 ```vue
 <script setup lang="ts">
-import { CdsTagConstants } from '@cds/components/CdsTag/api/CdsTag.constants';
 import { CdsTag } from '@central-design-system/components';
 
-const colors = CdsTagConstants.colors;
+const colors = CdsTag.constants.colors;
 </script>
 
 <template>
@@ -30929,10 +31062,9 @@ The `size` prop offers five sizes from `xs` to `xl`. The default size is `md`.
 
 ```vue
 <script setup lang="ts">
-import { CdsTagConstants } from '@cds/components/CdsTag/api/CdsTag.constants';
 import { CdsTag } from '@central-design-system/components';
 
-const sizes = CdsTagConstants.sizes;
+const sizes = CdsTag.constants.sizes;
 </script>
 
 <template>
@@ -31282,6 +31414,8 @@ const remove = (tag: string) => {
 
 _Category: Content · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. Fits catalog filters, category pickers and quick period switches.
 
 **See also:** If the choice should look like buttons, take CdsButtonToggle. For a choice out of a long list use CdsSelect, and for separate independent tags without selection just use CdsTag.
@@ -31719,6 +31853,8 @@ const group = ref<InstanceType<typeof CdsTagGroup> | null>(null);
 
 _Category: Controls · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A text area is a field for multiline text: a comment, a description, a support request. Around the native `textarea` the component gathers everything a form needs: a label, a description, hints, error messages, clearing and a character counter, and with `auto-grow` it grows together with the text.
 
 **See also:** For a short single-line value use CdsTextInput, to pick from a ready list of options — CdsSelect.
@@ -32173,7 +32309,7 @@ const publish = async () => {
 | `details` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
 | `label` | `{ label: string \| undefined; props: Record<string, any>; }` | Default slot of the CdsLabel component |
 | `loader` | `LoaderSlotProps` | Slot for a custom loader (shown when the loading prop is true). |
-| `message` | `CdsMessagesSlots` | Slot for customizing the content of a message |
+| `message` | `CdsMessageSlot` | Slot for customizing the content of a message |
 | `messages` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
 | `prepend` | `CdsInputSlot` | Adds an element before the input |
 | `prepend-inner` | `CdsInputDefaultSlot` | Slot added at the start of the input |
@@ -32200,6 +32336,8 @@ const publish = async () => {
 
 _Category: Controls · since 4.0.0_
 
+_Tests: API 87/87 · 86 unit · 3 e2e · 6 known bugs · lines 97.2% (v4.0.0-alpha.11) · a11y: 12 axe recommendations (v4.0.0-alpha.11)_
+
 A text field is the basic way to get data from the user: a name, an email, an amount, a search query. Around the native `input` the component gathers everything a form needs: a label, a description, hints, error messages, icons, clearing and a character counter.
 
 **See also:** For multiline text use CdsTextArea, to pick from a ready list of options use CdsSelect.
@@ -32901,7 +33039,7 @@ const sendMessage = () => {
 | `details` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
 | `label` | `{ label: string \| undefined; props: Record<string, any>; }` | Default slot of the CdsLabel component |
 | `loader` | `LoaderSlotProps` | Slot for a custom loader (shown when the loading prop is true). |
-| `message` | `CdsMessagesSlots` | Slot for customizing the content of a message |
+| `message` | `CdsMessageSlot` | Slot for customizing the content of a message |
 | `messages` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
 | `prepend` | `CdsInputSlot` | Adds an element before the input |
 | `prepend-inner` | `CdsInputDefaultSlot` | Slot added at the start of the input |
@@ -32928,6 +33066,8 @@ const sendMessage = () => {
 
 _Category: Controls · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 Time selection: hours, minutes and — if you want — seconds. The value can be typed on the keyboard or stepped through with the arrows, and `v-model` receives a string in the given format (`HH:mm` by default), which is convenient to store and to send to the server.
 
 **See also:** To pick a date use CdsDatePicker, and if you need a field with a date and a time at once — the ready CdsDateInput with the `with-time` prop: it puts this clock under the calendar and brings everything together into one string itself.
@@ -33432,6 +33572,8 @@ const dateTime = ref('01.09.2026 09:30');
 
 _Category: Feedback · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A toast is a pop-up notification about the result of an action: the changes are saved, the file is uploaded, the request failed. It appears above the page, does not interrupt the work and closes itself once `timeout` runs out.
 
 **See also:** For a stream of events where notifications arrive one after another use CdsToastQueue. A message that has to stay on the page belongs in CdsNotification, and a question that requires a decision from the user — in the CdsModal dialog.
@@ -33877,6 +34019,8 @@ const send = () => {
 
 _Category: Feedback · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A queue of pop-up notifications built on CdsToast. Put the messages into the `v-model` array — the queue will show them one by one or as a stack, respect the limit of simultaneously visible toasts and close the ones that are done.
 
 **See also:** For a single notification — a save confirmation, for example — CdsToast is enough.
@@ -34225,6 +34369,8 @@ const push = () => {
 
 _Category: Controls · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A toggle is an on/off switch for a setting that applies immediately, without a "Save" button: notifications, auto-renewal, profile visibility. It is built on CdsInput: it can do a label and a description, messages and errors, loading and the indeterminate state.
 
 **See also:** A toggle changes the setting instantly. If the choice is applied together with the rest of the form by a button, take CdsCheckbox, and to pick one option out of a set — CdsRadioGroup.
@@ -34275,11 +34421,10 @@ Five sizes on the `size` scale — from `xs` to `xl`, `md` by default.
 
 ```vue
 <script setup lang="ts">
-import { CdsToggleConstants } from '@cds/components/CdsToggle/api/CdsToggle.constants';
 import { CdsToggle } from '@central-design-system/components';
 import { ref } from 'vue';
 
-const sizes = CdsToggleConstants.sizes;
+const sizes = CdsToggle.constants.sizes;
 const enabled = ref(true);
 </script>
 
@@ -34678,7 +34823,7 @@ const total = computed(() => options.reduce((sum, option) => sum + (selected.val
 | `input` | `SelectionControlSlot` | Slot for the default input element. |
 | `label` | `{ label: string \| undefined; props: Record<string, any>; }` | Default slot of the CdsLabel component |
 | `loader` | `LoaderSlotProps` | Slot for a custom loading indicator. |
-| `message` | `CdsMessagesSlots` | Slot for customizing the content of a message |
+| `message` | `CdsMessageSlot` | Slot for customizing the content of a message |
 | `messages` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
 | `prepend` | `CdsInputSlot` | Adds an element before the input |
 | `thumb` | `{ icon: IconValue \| undefined; } & CdsToggleSlot` | Slot for the content of the thumb. |
@@ -34705,6 +34850,8 @@ const total = computed(() => options.reduce((sum, option) => sum + (selected.val
 
 _Category: Layouts · since 4.0.0_
 
+_Tests: API 0/10 · 3 unit · lines 72.7% (v4.0.0-alpha.11) · a11y: 5 axe recommendations (v4.0.0-alpha.11)_
+
 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. `CdsToolbarTitle` stretches and pushes the left and the right groups to the edges on its own.
 
 **See also:** The toolbar only lays the content out — the place in the layout is reserved by CdsHeader and CdsFooter. For navigating the subsections take CdsTabs; for an action bar over a record take CdsButtonGroup.
@@ -34963,6 +35110,8 @@ import {
 
 _Category: Content · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. It appears and disappears on its own — the user does not have to press or close anything.
 
 **See also:** A tooltip is for a short text without interaction. A list of actions on click is the job of CdsMenu, and a dialog with a form and buttons is the job of CdsModal.
@@ -35409,6 +35558,8 @@ const active = ref(false);
 
 _Category: Content · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 A tree shows a hierarchy: catalog sections, project files, an org structure. Nodes expand, get selected by a click or with checkboxes, load from the server and can be dragged, while virtual scrolling keeps everything smooth even with thousands of nodes.
 
 **See also:** For a flat set without nesting take CdsList, for navigation between sections take CdsMenu, and for collapsible sections of content take CdsExpandablePanel.
@@ -36409,6 +36560,8 @@ const selectedFile = computed(() => {
 
 _Category: Controls · since 4.0.0_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 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. Every step of the file lifecycle comes with an event.
 
 **See also:** The uploader sends the files over HTTP itself. If the files only have to be picked and sent together with the form, take the CdsFileInput field, and for a drop zone with image previews — CdsFileUpload.
@@ -37119,6 +37272,8 @@ const handlePreview = (file: NUploader.IUploadFile) => {
 
 _Category: Content · since 4.0.0 · status: new_
 
+_Tests: none yet — behavior is not covered by automated tests_
+
 Virtual scrolling keeps long lists fast: only the visible rows get into the DOM, not the whole array. Pass the records to `items`, the markup of a row to the slot, and a list of tens of thousands of positions scrolls as smoothly as a list of ten.
 
 **See also:** The dropdowns of CdsSelect and CdsAutocomplete, as well as the CdsTree tree, already virtualize their items — there is no need to wrap them. Render a short list — up to a couple of hundred rows — with the regular CdsList: virtualization will not pay off there.