@central-design-system/skills 4.0.0-alpha.6

package/skills/cds-builder/references/components/cds-toast/examples.md

@@ -0,0 +1,296 @@
+# CdsToast — usage examples
+
+> Extracted from Storybook stories (`docs/*.stories.ts`) by `bun run generate:skill`. Do not edit manually.
+> The full component contract is in [api.md](api.md). `v-bind="args"` in templates refers to the props from the **Args** block of the corresponding example.
+
+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.
+
+## Controlling the visibility
+
+Show the toast through `v-model` or the `activator` slot — in the second case the component manages its own state. The toast closes automatically after `timeout` (5000 ms by default); hovering the cursor or focusing inside the toast pauses the countdown, and on touch screens the toast can be swiped away.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsToast } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const visible = ref(false);
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-2">
+    <CdsButton text="Открыть через v-model" @click="visible = true" />
+    <CdsToast v-model="visible" text="Изменения сохранены" />
+
+    <CdsToast text="Черновик восстановлен">
+      <template #activator="{ props }">
+        <CdsButton text="Открыть через activator" appearance="secondary" v-bind="props" />
+      </template>
+    </CdsToast>
+  </div>
+</template>
+```
+
+## Status
+
+The `status` prop picks the color and the icon by the meaning of the message: `info`, `success`, `warning`, `danger`, `progress`. The icon can be replaced by the `icon` prop or hidden with the value `false`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsToast } from '@central-design-system/components';
+
+const statuses = ['info', 'success', 'warning', 'danger', 'progress'] as const;
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-2">
+    <CdsButton v-for="status in statuses" :key="status" :color="`status-${status}-surface`" appearance="secondary">
+      {{ status }}
+      <CdsToast activator="parent" :status="status" :text="`Уведомление со статусом ${status}`" />
+    </CdsButton>
+  </div>
+</template>
+```
+
+## Timer
+
+The `timeout` prop sets the delay before auto-closing in milliseconds, and `-1` turns it off. The bar of the remaining time is enabled by the `timer` prop (`true`/`top` — on top, `bottom` — at the bottom), `reverse-timer` flips its direction and `timer-color` changes its color.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsToast } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-2">
+    <CdsToast timer :timeout="4000" text="Тост закроется через 4 секунды">
+      <template #activator="{ props }">
+        <CdsButton text="Таймер сверху" v-bind="props" />
+      </template>
+    </CdsToast>
+
+    <CdsToast timer="bottom" reverse-timer :timeout="4000" text="Обратная шкала снизу">
+      <template #activator="{ props }">
+        <CdsButton text="Таймер снизу" appearance="secondary" v-bind="props" />
+      </template>
+    </CdsToast>
+  </div>
+</template>
+```
+
+## Position
+
+The `location` prop puts the toast into one of the six positions: the side (`top`, `bottom`) plus the alignment (`left`, `center`, `right`). The toast is rendered above the page content by [CdsOverlay](../cds-overlay/api.md).
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsToast } from '@central-design-system/components';
+
+const locations = ['top left', 'top center', 'top right', 'bottom left', 'bottom center', 'bottom right'] as const;
+</script>
+
+<template>
+  <div class="grid grid-cols-3 justify-items-center gap-2">
+    <CdsButton v-for="location in locations" :key="location" appearance="tertiary">
+      {{ location }}
+      <CdsToast activator="parent" :location="location" :text="`Тост в позиции ${location}`" />
+    </CdsButton>
+  </div>
+</template>
+```
+
+## Content and actions
+
+The heading and the text come from the `title` and `text` props, the avatar before the content from `prepend-avatar`, and `loading` replaces the icon with a loading indicator. The `actions` slot adds buttons: inside it they get `appearance="inverse"` and `size="sm"` by default. The vertical layout (`vertical`) moves the actions below the content.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsToast } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-2">
+    <CdsToast
+      title="Черновик удалён"
+      text="Черновик заявки №42 удалён без возможности восстановления"
+      status="warning"
+      :timeout="8000"
+    >
+      <template #activator="{ props }">
+        <CdsButton text="С заголовком и действиями" v-bind="props" />
+      </template>
+      <template #actions="{ isActive }">
+        <CdsButton text="Отменить" appearance="tertiary" @click="isActive.value = false" />
+      </template>
+    </CdsToast>
+
+    <CdsToast
+      prepend-avatar="https://i.pravatar.cc/80?img=32"
+      title="Ирина Соколова"
+      text="Добавила комментарий к заказу"
+    >
+      <template #activator="{ props }">
+        <CdsButton text="С аватаром" appearance="secondary" v-bind="props" />
+      </template>
+    </CdsToast>
+
+    <CdsToast vertical title="Файл загружается" text="Не закрывайте вкладку до завершения" loading :timeout="-1">
+      <template #activator="{ props }">
+        <CdsButton text="Вертикальный с загрузкой" appearance="secondary" v-bind="props" />
+      </template>
+      <template #actions="{ isActive }">
+        <CdsButton text="Скрыть" appearance="tertiary" @click="isActive.value = false" />
+      </template>
+    </CdsToast>
+  </div>
+</template>
+```
+
+## Undoing an action
+
+The toast confirms the deletion and gives time to change one's mind: the "Отменить" button in the `actions` slot brings the document back, and the `timer` bar shows how much time is left to decide.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsToast } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const documents = ref(['Договор поставки', 'Счёт №112', 'Акт сверки']);
+const visible = ref(false);
+const removed = ref<{ name: string; index: number } | null>(null);
+
+const remove = (index: number) => {
+  removed.value = { name: documents.value[index], index };
+  documents.value.splice(index, 1);
+  visible.value = true;
+};
+
+const undo = () => {
+  if (removed.value) {
+    documents.value.splice(removed.value.index, 0, removed.value.name);
+  }
+  visible.value = false;
+};
+</script>
+
+<template>
+  <div class="flex w-[320px] m-auto flex-col gap-2">
+    <div v-for="(name, index) in documents" :key="name" class="flex items-center justify-between">
+      {{ name }}
+      <CdsButton icon="delete" appearance="tertiary" size="sm" :aria-label="`Удалить ${name}`" @click="remove(index)" />
+    </div>
+
+    <CdsToast v-model="visible" timer :timeout="6000" :text="removed ? `Документ «${removed.name}» удалён` : ''">
+      <template #actions>
+        <CdsButton text="Отменить" @click="undo" />
+      </template>
+    </CdsToast>
+  </div>
+</template>
+```
+
+## A background task
+
+A single toast accompanies the task from the start to the result. While the processing runs, `loading` shows the indicator and `timeout: -1` keeps the notification from disappearing; once it is done the same toast switches to `status="success"` and closes itself.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsToast } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const visible = ref(false);
+const loading = ref(false);
+
+const generate = () => {
+  visible.value = true;
+  loading.value = true;
+
+  setTimeout(() => {
+    loading.value = false;
+  }, 2500);
+};
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsButton text="Сформировать отчёт" :disabled="visible && loading" @click="generate" />
+
+    <CdsToast
+      v-model="visible"
+      :loading="loading"
+      :status="loading ? undefined : 'success'"
+      :timeout="loading ? -1 : 4000"
+      :title="loading ? 'Формируем отчёт' : 'Отчёт готов'"
+      :text="loading ? 'Это займёт несколько секунд' : 'Файл сохранён в разделе «Документы»'"
+    />
+  </div>
+</template>
+```
+
+## An error with a retry
+
+Do not hide an error automatically: `timeout: -1` keeps the toast until the user reacts, and the "Повторить" button in `actions` runs the request again.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsToast } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const sending = ref(false);
+const failed = ref(false);
+const sent = ref(false);
+let attempt = 0;
+
+const send = () => {
+  sending.value = true;
+  failed.value = false;
+
+  setTimeout(() => {
+    sending.value = false;
+    attempt += 1;
+
+    if (attempt % 2 === 1) {
+      failed.value = true;
+    } else {
+      sent.value = true;
+    }
+  }, 1500);
+};
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsButton text="Отправить заявку" :loading="sending" @click="send" />
+
+    <CdsToast
+      v-model="failed"
+      status="danger"
+      :timeout="-1"
+      title="Не удалось отправить заявку"
+      text="Сервер не ответил. Попробуйте ещё раз"
+    >
+      <template #actions>
+        <CdsButton text="Повторить" @click="send" />
+      </template>
+    </CdsToast>
+
+    <CdsToast v-model="sent" status="success" text="Заявка отправлена" />
+  </div>
+</template>
+```

package/skills/cds-builder/references/components/cds-toast/guidelines.md

@@ -0,0 +1,10 @@
+# CdsToast — guidelines
+
+> Extracted from `docs/demos/Guidelines.vue` by `bun run generate:skill`. Do not edit manually.
+> The full component contract is in [api.md](api.md).
+
+| ✅ Do | ❌ Don't |
+| --- | --- |
+| The toast text is a short summary of the action, readable in a second. | Details and instructions cannot be read before the toast closes itself. |
+| A toast reports an action that already happened and offers to undo it. | A toast does not wait for an answer — ask questions that need a decision in a modal. |
+| An error stays on the screen (timeout: -1) until the user reacts. | An error with a timer disappears before the user can deal with it. |

package/skills/cds-builder/references/components/cds-toast/tokens.md

@@ -0,0 +1,26 @@
+# CdsToast — tokens (level 3)
+
+> Copy of the component's `styles/*.variables.scss`, taken by `bun run generate:skill`. Do not edit manually.
+> `--cds-*` are global level-2 tokens whose values come from the active theme: see [themes.md](../../tokens/themes.md).
+> Variables marked `!default` can be overridden at build time via SCSS.
+
+## _CdsToast.variables.scss
+
+```scss
+@use '../../../styles/settings';
+@use '../../../styles/tools';
+
+$toast-z-index: 10000 !default;
+$toast-margin: var(--cds-spacing-400) !default;
+$toast-border: var(--cds-border-100) solid !default;
+$toast-border-radius: var(--cds-border-radius-200) !default;
+$toast-max-width: tools.to-rem(672px) !default;
+$toast-min-width: tools.to-rem(344px) !default;
+$toast-min-height: tools.to-rem(48px) !default;
+$toast-padding: var(--cds-spacing-300) !default;
+$toast-prepend-height: var(--cds-font-line-height-400) !default;
+$toast-content-padding: 0 var(--cds-spacing-400) !default;
+$toast-action-gap: var(--cds-spacing-400) !default;
+$toast-action-offset: var(--cds-spacing-300) !default;
+$toast-transition-scale: 0.8 !default;
+```

package/skills/cds-builder/references/components/cds-toast-queue/api.md

@@ -0,0 +1,86 @@
+# CdsToastQueue — API
+
+> Generated from meta.json by `bun run generate:skill`. Do not edit manually.
+> Examples: [examples.md](examples.md)
+
+A queue of pop-up notifications built on [CdsToast](../cds-toast/api.md). 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.
+
+## CdsToastQueue
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `absolute` | `boolean \| undefined` | — | no | Positions the element absolutely instead of fixed. This is useful for overlays that must stay inside a certain area, for example inside a container with `position: relative`. |
+| `activator` | `(string & {}) \| Element \| "parent" \| ComponentPublicInstance \| undefined` | — | no | The element that activates the component |
+| `activatorProps` | `Record<string, any> \| undefined` | `{}` | no | Props for the activator element |
+| `attach` | `string \| boolean \| Element \| undefined` | — | no | Sets the DOM element the overlay content is moved to. It accepts a direct element reference, a querySelector string, or true to disable moving. By default the body element is used. Changing this prop is usually not recommended except for edge cases: the default positioning algorithm handles most scenarios better than it can without moving, and unexpected behavior may appear if the menu ends up being a child of its activator. |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `closable` | `string \| boolean \| undefined` | — | no | Adds a close button to every toast. A string value sets the color of the button. |
+| `closeDelay` | `string \| number \| undefined` | — | no | Delay in milliseconds before the component closes. Works only together with open-on-hover. |
+| `closeOnBack` | `boolean \| undefined` | `false` | no | Closes the overlay content when the browser Back button is pressed or $router.back() is called, cancelling the original navigation. `persistent` overlays cancel the navigation and animate as if they were clicked outside instead of closing. |
+| `closeOnContentClick` | `boolean \| undefined` | — | no | Hide the component on a click on the content |
+| `closeText` | `string \| undefined` | `'$cds.dismiss'` | no | Text of the close button. |
+| `collapsed` | `boolean \| undefined` | — | no | Folds the inactive toasts into a stack under the last visible one. |
+| `contained` | `boolean \| undefined` | — | no | Limits the size of the component and of its grid to the offset parent. Implies the `absolute` and `attach` props. (Note: the parent element must have `position: relative`.) |
+| `content` | `string \| number \| undefined` | — | no | Content displayed in the component. |
+| `contentClass` | `any` | — | no | Applies a custom class to the content element. This is handy because the content is moved to the beginning of the cds-app component (unless `attach` is set) and cannot be selected with classes passed to the component directly. |
+| `contentProps` | `any` | — | no | Applies custom props to the moved content |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `displayStrategy` | `"overflow" \| "hold" \| undefined` | `'hold'` | no | Strategy when `totalVisible` is exceeded: `hold` — wait until a toast closes, `overflow` — push the oldest ones out. |
+| `eager` | `boolean \| undefined` | — | no | Renders the content of the component right away. Useful when you have content that is not in the DOM but has to be indexed for SEO. |
+| `gap` | `string \| number \| undefined` | `8` | no | Gap between the toasts, in pixels. |
+| `height` | `string \| number \| undefined` | — | no | Component height |
+| `icon` | `false \| IconValue \| undefined` | `null` | no | Icon before the content. Taken from `status` by default; `false` hides the icon. |
+| `loading` | `boolean \| undefined` | — | no | Shows a loading indicator instead of the icon. |
+| `location` | `Anchor \| null \| undefined` | `'top center'` | no | Position of the element relative to its container, for example "top left", "center", "bottom right". |
+| `locationStrategy` | `"static" \| "connected" \| LocationStrategyFunction \| undefined` | `'static'` | no | Sets the way the overlay content is positioned. By default static is used, which centers the content in its container. Use connected to attach the content to the activator element. |
+| `maxHeight` | `string \| number \| undefined` | — | no | Maximum component height |
+| `maxWidth` | `string \| number \| undefined` | — | no | Maximum component width |
+| `minHeight` | `string \| number \| undefined` | — | no | Minimum component height |
+| `minWidth` | `string \| number \| undefined` | — | no | Minimum component width |
+| `modelValue` | `readonly ToastMessage[] \| undefined` | `[]` | no | The queue of messages (v-model). A string or an object with toast props. |
+| `opacity` | `string \| number \| undefined` | — | no | Opacity of the scrim element. Applies only when `scrim=true`. |
+| `openDelay` | `string \| number \| undefined` | — | no | Delay in milliseconds before the component opens. Works only together with open-on-hover. |
+| `openOnClick` | `boolean \| undefined` | — | no | Show the component on a click on the activator |
+| `openOnFocus` | `boolean \| undefined` | — | no | Show the component when the activator gets focus |
+| `openOnHover` | `boolean \| undefined` | — | no | Show the component on hover over the activator |
+| `origin` | `Anchor \| "auto" \| "overlap" \| undefined` | `'auto'` | no | Sets the anchor point of the overlay content that is aligned with the `location` anchor of the target. With "auto" the opposite side of the `location` point is used. With "overlap" the same anchor point is used, so the overlay overlaps the target. It also sets the CSS `transform-origin` property for the enter/leave transitions. |
+| `position` | `"absolute" \| "static" \| "fixed" \| "relative" \| "sticky" \| undefined` | — | no | CSS positioning of the component — the value of the `position` property |
+| `prependAvatar` | `string \| undefined` | — | no | Source of the avatar image before the content. Takes priority over the icon. |
+| `reverseTimer` | `boolean \| undefined` | — | no | Reverses the timer bar: it fills up instead of draining. |
+| `status` | `"progress" \| "success" \| "danger" \| "warning" \| "info" \| undefined` | `'info'` | no | Semantic status — drives the color and the default icon. |
+| `target` | `(string & {}) \| Element \| "parent" \| ComponentPublicInstance \| "cursor" \| [x: number, y: number] \| undefined` | — | no | When `locationStrategy` is set to "connected", specify the element or the array of x, y coordinates the overlay is positioned against. By default the activator element is used. |
+| `text` | `string \| number \| undefined` | — | no | Text displayed in the component. |
+| `textColor` | `string \| undefined` | — | no | Text color of the component |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `timeout` | `string \| number \| undefined` | `5000` | no | Delay in milliseconds before the toast hides automatically. The value `-1` turns auto-closing off. |
+| `timer` | `boolean \| "top" \| "bottom" \| undefined` | `false` | no | Shows the timer bar until auto-closing: `true`/`top` — on top, `bottom` — at the bottom. |
+| `timerColor` | `string \| undefined` | — | no | Color of the timer bar. |
+| `title` | `string \| undefined` | — | no | Heading of the toast. |
+| `totalVisible` | `string \| number \| undefined` | `1` | no | Maximum number of simultaneously visible toasts. |
+| `transition` | `string \| boolean \| (TransitionProps & { component?: Component \| undefined; }) \| null \| undefined` | `'cds-toast-transition'` | no | Transition animation |
+| `vertical` | `boolean \| undefined` | — | no | Vertical layout: the actions move below the content. |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+| `zIndex` | `string \| number \| undefined` | `2000` | no | The z-index value of the component. |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `update:modelValue` | `[value: ToastMessage[]]` | The queue of messages changed. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `actions` | `{ item: ToastMessage; props: { onClick: () => void; }; }` | Slot for the actions of the toast. |
+| `header` | `{ item: ToastMessage; }` | Slot for the header of the toast. |
+| `item` | `{ item: ToastMessage; }` | Slot that fully replaces the toast. The toast props are passed through CdsDefaultsProvider. |
+| `text` | `{ item: ToastMessage; }` | Slot for the text of the toast. |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `clear` | `() => void` | Empties the queue and closes all the visible toasts. |

package/skills/cds-builder/references/components/cds-toast-queue/examples.md

@@ -0,0 +1,227 @@
+# CdsToastQueue — usage examples
+
+> Extracted from Storybook stories (`docs/*.stories.ts`) by `bun run generate:skill`. Do not edit manually.
+> The full component contract is in [api.md](api.md). `v-bind="args"` in templates refers to the props from the **Args** block of the corresponding example.
+
+A queue of pop-up notifications built on [CdsToast](../cds-toast/api.md). 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.
+
+## The message queue
+
+A message is a string or an object with toast props. Add messages to the `v-model` array: the queue shows them one by one, and the rest wait for their place. The `closable` prop adds a close button with the `close-text` label to every toast. Props shared by the toasts — `location`, `timer`, `status` and others — are set right on the queue: they apply to every message. While the browser tab is hidden, auto-closing is paused.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { ToastMessage } from '@central-design-system/components';
+import { CdsButton, CdsToastQueue } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const messages = ref<ToastMessage[]>([]);
+let count = 0;
+
+const push = () => {
+  messages.value = [...messages.value, `Сообщение №${++count}`];
+};
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsButton text="Добавить сообщение" @click="push" />
+    <CdsToastQueue v-model="messages" closable />
+  </div>
+</template>
+```
+
+## Limit and overflow
+
+The `total-visible` prop caps the number of simultaneously visible toasts: a new one takes the place at the edge of the screen and pushes the previous ones aside. The `display-strategy` prop decides what to do with the extra ones: `hold` (the default) keeps them in the queue until a place frees up, `overflow` closes the oldest ones.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { ToastMessage } from '@central-design-system/components';
+import { CdsButton, CdsRadio, CdsRadioGroup, CdsToastQueue } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const strategy = ref<'hold' | 'overflow'>('hold');
+const messages = ref<ToastMessage[]>([]);
+let count = 0;
+
+const push = () => {
+  messages.value = [...messages.value, { text: `Сообщение №${++count}`, timeout: 8000 }];
+};
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <CdsRadioGroup v-model="strategy" label="Стратегия переполнения" direction="horizontal" hide-details>
+      <CdsRadio value="hold" label="hold — ждать места" />
+      <CdsRadio value="overflow" label="overflow — вытеснять старые" />
+    </CdsRadioGroup>
+
+    <CdsButton text="Добавить сообщение" @click="push" />
+    <CdsToastQueue v-model="messages" :total-visible="3" :display-strategy="strategy" closable />
+  </div>
+</template>
+```
+
+## The stack
+
+The `collapsed` prop folds all the toasts except the last one into a compact stack. Hover the cursor — the stack unfolds, and the timers pause while the cursor is inside.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { ToastMessage } from '@central-design-system/components';
+import { CdsButton, CdsToastQueue } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const messages = ref<ToastMessage[]>([]);
+let count = 0;
+
+const push = () => {
+  messages.value = [
+    ...messages.value,
+    {
+      title: `Событие №${++count}`,
+      text: 'Описание события в очереди',
+      status: 'success'
+    }
+  ];
+};
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsButton text="Добавить в стопку" @click="push" />
+    <CdsToastQueue v-model="messages" collapsed closable :total-visible="10" :timeout="6000" location="bottom right" />
+  </div>
+</template>
+```
+
+## Background operations
+
+Pass a `promise` in the message — the toast gets a loading indicator and does not close until the operation is done. The `success` and `error` callbacks return the toast props for the result: the status, the text and the auto-close delay.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { ToastMessage } from '@central-design-system/components';
+import { CdsButton, CdsToastQueue } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const messages = ref<ToastMessage[]>([]);
+
+const save = (shouldFail: boolean) => {
+  const request = new Promise((resolve, reject) => {
+    setTimeout(() => (shouldFail ? reject(new Error('Сервер не ответил')) : resolve(undefined)), 2000);
+  });
+
+  messages.value = [
+    ...messages.value,
+    {
+      text: 'Сохраняем изменения…',
+      promise: request,
+      success: () => ({ status: 'success', text: 'Изменения сохранены', timeout: 4000 }),
+      error: (err) => ({ status: 'danger', text: err?.message ?? 'Не удалось сохранить', timeout: 6000 })
+    }
+  ];
+};
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-2">
+    <CdsButton text="Успешное сохранение" @click="save(false)" />
+    <CdsButton text="Сохранение с ошибкой" appearance="secondary" @click="save(true)" />
+    <CdsToastQueue v-model="messages" :total-visible="3" />
+  </div>
+</template>
+```
+
+## Notification center
+
+The events of the application pile up into a single queue in the corner of the screen: `location="bottom right"` moves the toasts out of the working area, `collapsed` hides the older ones in a stack, and `closable` lets the user close every notification.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { ToastMessage } from '@central-design-system/components';
+import { CdsButton, CdsToastQueue } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const events: ToastMessage[] = [
+  { title: 'Новый заказ', text: 'Заказ №1042 ожидает подтверждения', status: 'info' },
+  { title: 'Оплата получена', text: 'Счёт №112 оплачен полностью', status: 'success' },
+  { title: 'Заканчивается место', text: 'Хранилище заполнено на 90%', status: 'warning' },
+  { title: 'Сбой синхронизации', text: 'Не удалось обновить данные. Повторим автоматически', status: 'danger' }
+];
+
+const messages = ref<ToastMessage[]>([]);
+let next = 0;
+
+const push = () => {
+  messages.value = [...messages.value, events[next++ % events.length]];
+};
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsButton text="Новое событие" @click="push" />
+    <CdsToastQueue v-model="messages" location="bottom right" collapsed closable :total-visible="5" :timeout="8000" />
+  </div>
+</template>
+```
+
+## Controlling the queue
+
+The `onDismiss` callback of a message receives the reason it was closed — `auto`, `dismissed`, `overflow` or `cleared` — and the exposed `clear()` method closes all the toasts and empties the queue.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { ToastMessage } from '@central-design-system/components';
+import { CdsButton, CdsToastQueue } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const queue = ref<InstanceType<typeof CdsToastQueue>>();
+const messages = ref<ToastMessage[]>([]);
+const log = ref<string[]>([]);
+let count = 0;
+
+const push = () => {
+  const id = ++count;
+
+  messages.value = [
+    ...messages.value,
+    {
+      text: `Задача №${id} выполнена`,
+      status: 'success',
+      onDismiss: (reason) => {
+        log.value = [`Тост №${id} закрыт: ${reason}`, ...log.value].slice(0, 4);
+      }
+    }
+  ];
+};
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <div class="flex gap-2">
+      <CdsButton text="Добавить" @click="push" />
+      <CdsButton text="Закрыть все" appearance="tertiary" @click="queue?.clear()" />
+    </div>
+
+    <div class="h-[96px] text-center">
+      <div v-for="line in log" :key="line">{{ line }}</div>
+    </div>
+
+    <CdsToastQueue ref="queue" v-model="messages" :total-visible="3" closable />
+  </div>
+</template>
+```