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

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

@@ -0,0 +1,314 @@
+# CdsNotification — 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 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.
+
+## Statuses
+
+The `status` prop sets the semantics of the message — its color and its icon. The default status is `info`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsNotification } from '@central-design-system/components';
+
+const statuses = CdsNotification.constants.statuses;
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 max-w-[640px] m-auto">
+    <CdsNotification
+      v-for="status in statuses"
+      :key="status"
+      :status="status"
+      title="Заголовок уведомления"
+      text="Описание события, на которое стоит обратить внимание"
+    />
+  </div>
+</template>
+```
+
+## Display modes
+
+The `variant` prop changes the styling: `default` — with a border, `flat` — without a border, `compact` — a single line, `important` — a neutral background and a shadow for showing above the content.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsNotification } from '@central-design-system/components';
+
+const variants = CdsNotification.constants.variants;
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 max-w-[720px] m-auto">
+    <div v-for="variant in variants" :key="variant" class="flex items-center gap-2">
+      <span class="w-[96px] text-content-secondary text-100">{{ variant }}</span>
+      <CdsNotification
+        :variant="variant"
+        title="Заголовок уведомления"
+        text="Описание события, на которое стоит обратить внимание"
+        closable
+        class="flex-1"
+      />
+    </div>
+  </div>
+</template>
+```
+
+## Display modes
+
+`variant="compact"` puts the icon, the text and the actions on one line and hides the heading. It fits tight places: a filter panel, a table row, the footer of a card.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsNotification } from '@central-design-system/components';
+
+const statuses = CdsNotification.constants.statuses;
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 w-[415px] m-auto">
+    <CdsNotification
+      v-for="status in statuses"
+      :key="status"
+      :status="status"
+      variant="compact"
+      text="Текст уведомления"
+      closable
+    >
+      <template #actions>
+        <CdsButton size="sm" text="Кнопка" />
+      </template>
+    </CdsNotification>
+  </div>
+</template>
+```
+
+## Icons
+
+By default the icon matches the status. The `icon` prop replaces it with any icon from the pack, and the value `false` removes it altogether.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsNotification } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 max-w-[640px] m-auto">
+    <CdsNotification
+      status="success"
+      icon="winner"
+      title="Вы выиграли торги"
+      text="Иконка задана пропом icon вместо иконки статуса"
+    />
+    <CdsNotification :icon="false" title="Без иконки" text="Значение icon: false скрывает иконку статуса" />
+  </div>
+</template>
+```
+
+## Closing
+
+The `closable` prop adds a close button; the visibility of the notification is controlled through `v-model`. A click on the button also emits `click:close`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsNotification } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const active = ref(true);
+</script>
+
+<template>
+  <div class="flex justify-center max-w-[640px] m-auto">
+    <CdsNotification
+      v-model="active"
+      title="Заголовок уведомления"
+      text="Кнопка закрытия скрывает уведомление и обновляет v-model"
+      closable
+    />
+    <CdsButton v-if="!active" text="Показать уведомление" @click="active = true" />
+  </div>
+</template>
+```
+
+## Slots
+
+Slots replace the content coming from props when you need your own markup.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsFunctionalButton, CdsNotification } from '@central-design-system/components';
+</script>
+
+<template>
+  <CdsNotification class="max-w-[640px] m-auto">
+    <template #title> Заголовок уведомления </template>
+    <template #text> Описание уведомления, на которое пользователь <strong>должен обратить внимание</strong> </template>
+    <template #actions>
+      <CdsButton text="Опубликовать" />
+    </template>
+    <template #close="{ props }">
+      <CdsFunctionalButton v-bind="props" />
+    </template>
+  </CdsNotification>
+</template>
+```
+
+## Form submission result
+
+After a successful request a notification with the `success` status appears through `v-model` and confirms the result. The `closable` prop lets the user dismiss the message once it is read.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsForm, CdsNotification, CdsTextInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const email = ref('');
+const loading = ref(false);
+const sent = ref(false);
+
+async function submit() {
+  loading.value = true;
+  sent.value = false;
+
+  // Имитация запроса к серверу
+  await new Promise((resolve) => setTimeout(resolve, 1200));
+
+  loading.value = false;
+  sent.value = true;
+}
+</script>
+
+<template>
+  <CdsForm class="flex flex-col gap-2 w-[350px] m-auto" @submit.prevent="submit">
+    <CdsNotification
+      v-model="sent"
+      status="success"
+      title="Приглашение отправлено"
+      :text="`Письмо со ссылкой ушло на ${email || 'указанную почту'}`"
+      closable
+    />
+
+    <CdsTextInput v-model="email" label="Рабочая почта" placeholder="name@company.ru" />
+
+    <CdsButton class="self-start" type="submit" text="Отправить приглашение" :loading="loading" />
+  </CdsForm>
+</template>
+```
+
+## A warning with an action
+
+A `warning` notification does not just report a problem — it offers a solution right away with a button in the `actions` slot. On click the status changes to `progress`, and after the server responds — to `success`: the user sees the whole course of the operation in a single block.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsNotification } from '@central-design-system/components';
+import { ref } from 'vue';
+
+type Step = 'warning' | 'progress' | 'success';
+
+const step = ref<Step>('warning');
+
+const content: Record<Step, { title: string; text: string }> = {
+  warning: {
+    title: 'Почта не подтверждена',
+    text: 'Подтвердите почту, чтобы получать уведомления о ходе торгов'
+  },
+  progress: {
+    title: 'Отправляем письмо…',
+    text: 'Обычно это занимает меньше минуты'
+  },
+  success: {
+    title: 'Письмо отправлено',
+    text: 'Проверьте входящие на name@company.ru и перейдите по ссылке'
+  }
+};
+
+async function resend() {
+  step.value = 'progress';
+
+  // Имитация запроса к серверу
+  await new Promise((resolve) => setTimeout(resolve, 1500));
+
+  step.value = 'success';
+}
+</script>
+
+<template>
+  <div class="max-w-[640px] m-auto">
+    <CdsNotification :status="step" :title="content[step].title" :text="content[step].text">
+      <template v-if="step === 'warning'" #actions>
+        <CdsButton size="sm" appearance="secondary" text="Отправить письмо ещё раз" @click="resend" />
+      </template>
+    </CdsNotification>
+  </div>
+</template>
+```
+
+## Loading error with a retry
+
+If the data failed to load, a `danger` notification explains what happened and offers to repeat the request. The `progress` status shows that the retry is already running.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsNotification } from '@central-design-system/components';
+import { ref } from 'vue';
+
+type Step = 'danger' | 'progress' | 'success';
+
+const step = ref<Step>('danger');
+
+const content: Record<Step, { title: string; text: string }> = {
+  danger: {
+    title: 'Не удалось загрузить список закупок',
+    text: 'Сервер не ответил вовремя — данные могли устареть'
+  },
+  progress: {
+    title: 'Обновляем данные…',
+    text: 'Запрашиваем актуальный список закупок'
+  },
+  success: {
+    title: 'Данные обновлены',
+    text: 'Список закупок актуален'
+  }
+};
+
+async function retry() {
+  step.value = 'progress';
+
+  // Имитация повторного запроса
+  await new Promise((resolve) => setTimeout(resolve, 1500));
+
+  step.value = 'success';
+}
+</script>
+
+<template>
+  <div class="max-w-[640px] m-auto">
+    <CdsNotification :status="step" :title="content[step].title" :text="content[step].text">
+      <template v-if="step === 'danger'" #actions>
+        <CdsButton size="sm" appearance="secondary" text="Повторить" @click="retry" />
+      </template>
+    </CdsNotification>
+  </div>
+</template>
+```

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

@@ -0,0 +1,10 @@
+# CdsNotification — 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 status matches the meaning of the message: success — the action went through. | Danger for neutral news is alarming: the reader looks for an error that is not there. |
+| The heading names the event briefly, the details go into the text. | A long heading with no text is hard to read, and the event gets lost. |
+| One or two secondary actions help the user react to the event. | Primary buttons inside a notification compete with the main action of the screen. |

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

@@ -0,0 +1,23 @@
+# CdsNotification — 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.
+
+## _CdsNotification.variables.scss
+
+```scss
+@use '../../../styles/tools';
+
+$notification-border: var(--cds-border-100) solid !default;
+$notification-border-radius: var(--cds-border-radius-200) !default;
+$notification-min-width: tools.to-rem(348px) !default;
+$notification-padding: var(--cds-spacing-300) !default;
+$notification-prepend-height: var(--cds-font-line-height-400) !default;
+$notification-content-padding: 0 var(--cds-spacing-200) !default;
+$notification-action-offset: var(--cds-spacing-300) !default;
+$notification-action-gap: var(--cds-spacing-400) !default;
+$notification-append-padding: var(--cds-spacing-300) var(--cds-spacing-200) !default;
+$notification-close-button-size: tools.to-rem(16px) !default;
+$notification-important-background: rgb(var(--cds-color-surface-elevated)) !default;
+```

package/skills/cds-builder/references/components/cds-notification-alert/api.md

@@ -0,0 +1,93 @@
+# CdsNotificationAlert — API
+
+> Generated from meta.json by `bun run generate:skill`. Do not edit manually.
+> Examples: [examples.md](examples.md) · Tokens: [tokens.md](tokens.md)
+
+A pop-up notification above the page — the counterpart of `CdsNotificationAlert` from CDS 3. It is assembled from [CdsOverlay](../cds-overlay/api.md) and [CdsNotification](../cds-notification/api.md) in the `important` variant; it hides automatically after `timeout`, while hovering the cursor or focusing inside pauses the timer.
+
+## CdsNotificationAlert
+
+**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` | `boolean \| undefined` | — | no | Adds a close button that hides the notification. |
+| `closeDelay` | `string \| number \| undefined` | — | no | Delay in milliseconds before the component closes. Works only together with open-on-hover. |
+| `closeIcon` | `IconValue \| undefined` | `'remove'` | no | Icon of the close button. |
+| `closeLabel` | `string \| undefined` | `'$cds.close'` | no | Accessible label (aria-label) for the close button. |
+| `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 |
+| `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 |
+| `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. |
+| `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. |
+| `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` | `boolean \| undefined` | — | no | The v-model value of the component. If the component supports the **multiple** prop, an empty array is used by default. |
+| `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 |
+| `status` | `"progress" \| "success" \| "danger" \| "warning" \| "info" \| undefined` | `'info'` | no | Semantic status — drives the color and the default icon. |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+| `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 notification hides automatically. The values `-1` and `0` turn auto-closing off. |
+| `title` | `string \| undefined` | — | no | Notification heading. |
+| `transition` | `string \| boolean \| (TransitionProps & { component?: Component \| undefined; }) \| null \| undefined` | `'notification-transition'` | no | Transition animation |
+| `variant` | `"default" \| "flat" \| "compact" \| "important" \| undefined` | `'important'` | no | Appearance of the notification. `important` by default — an elevated surface with a shadow (the CdsNotificationAlert look). |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+| `zIndex` | `string \| number \| undefined` | `2000` | no | The z-index value of the component. |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `click:close` | `[event: MouseEvent]` | Click on the close button. |
+| `update:modelValue` | `[value: boolean]` | The visibility of the notification changed. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `actions` | `any` | Slot for actions (buttons, links) below the text. |
+| `activator` | `{ isActive: boolean; props: Record<string, any>; }` | Activator slot that controls the display of the notification. |
+| `append` | `any` | Slot after the content. |
+| `close` | `{ props: Record<string, any>; }` | Close button slot; receives `props` to bind to your own element. |
+| `default` | `any` | Main content of the notification (complements `text`). |
+| `prepend` | `any` | Slot before the content (the status icon by default). |
+| `text` | `any` | Text slot (instead of the `text` prop). |
+| `title` | `any` | Heading slot (instead of the `title` prop). |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `activatorEl` | `HTMLElement \| undefined` | The DOM element of the activator. |
+| `activatorRef` | `TemplateRef` | Template ref for assigning the activator manually. |
+| `animateClick` | `() => void` | Runs the bounce animation of the content — the same as on a click outside a `persistent` overlay. |
+| `contentEl` | `HTMLElement \| undefined` | The DOM element of the overlay content. |
+| `globalTop` | `boolean` | Whether the overlay is the top one in the global stack of open overlays. |
+| `rootEl` | `HTMLElement \| undefined` | The root DOM element of the overlay. |
+| `scrimEl` | `HTMLElement \| undefined` | The DOM element of the scrim that dims the page. |
+| `targetEl` | `HTMLElement \| undefined` | The DOM element of the positioning target. |
+| `targetRef` | `TemplateRef` | Template ref for assigning the positioning target manually. |
+| `updateLocation` | `((e: Event) => void) \| undefined` | Recalculates the position of the content relative to the target. |

package/skills/cds-builder/references/components/cds-notification-alert/examples.md

@@ -0,0 +1,202 @@
+# CdsNotificationAlert — 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 pop-up notification above the page — the counterpart of `CdsNotificationAlert` from CDS 3. It is assembled from [CdsOverlay](../cds-overlay/api.md) and [CdsNotification](../cds-notification/api.md) in the `important` variant; it hides automatically after `timeout`, while hovering the cursor or focusing inside pauses the timer.
+
+## Controlling the display
+
+Visibility is controlled through `v-model` or the `activator` slot — the element inside the slot opens the notification on click. The text comes from the `text` prop.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsNotificationAlert } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsNotificationAlert text="Изменения сохранены">
+      <template #activator="{ props }">
+        <CdsButton text="Показать уведомление" v-bind="props" />
+      </template>
+    </CdsNotificationAlert>
+  </div>
+</template>
+```
+
+## Statuses
+
+The `status` prop sets the color of the content and the icon: `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, CdsNotificationAlert } from '@central-design-system/components';
+
+const statuses = CdsNotificationAlert.constants.statuses;
+</script>
+
+<template>
+  <div class="flex justify-center gap-2">
+    <CdsButton v-for="status in statuses" :key="status" :color="'status-' + status + '-surface'" appearance="secondary">
+      {{ status }}
+      <CdsNotificationAlert activator="parent" :status="status" :text="'Уведомление со статусом ' + status" />
+    </CdsButton>
+  </div>
+</template>
+```
+
+## Positions
+
+The `location` prop sets the position on the screen: the side (`top`, `bottom`) and the alignment (`left`, `center`, `right`).
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsNotificationAlert } 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 }}
+      <CdsNotificationAlert activator="parent" :location="location" :text="'Уведомление в позиции ' + location" />
+    </CdsButton>
+  </div>
+</template>
+```
+
+## Auto-closing
+
+The `timeout` prop controls the auto-close delay in milliseconds, 5000 by default. The values `-1` and `0` turn auto-closing off — the notification stays until the user closes it (`closable`). Hovering the cursor and focusing inside pause the countdown.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsNotificationAlert } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex justify-center gap-2">
+    <CdsNotificationAlert :timeout="4000" text="Уведомление закроется через 4 секунды">
+      <template #activator="{ props }">
+        <CdsButton text="Закроется через 4 секунды" v-bind="props" />
+      </template>
+    </CdsNotificationAlert>
+    <CdsNotificationAlert :timeout="-1" closable status="info" text="Останется до закрытия вручную">
+      <template #activator="{ props }">
+        <CdsButton text="Без автозакрытия" appearance="secondary" v-bind="props" />
+      </template>
+    </CdsNotificationAlert>
+  </div>
+</template>
+```
+
+## Undoing an action
+
+After an irreversible operation the notification gives a short window to undo it: the button in the `actions` slot closes it through `v-model`, and an increased `timeout` leaves time to change one's mind.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsNotificationAlert } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const isActive = ref(false);
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsButton text="Удалить черновик" appearance="secondary" @click="isActive = true" />
+    <CdsNotificationAlert
+      v-model="isActive"
+      title="Черновик удалён"
+      text="Черновик заявки №42 удалён без возможности восстановления"
+      status="warning"
+      closable
+      :timeout="8000"
+    >
+      <template #actions>
+        <CdsButton text="Отменить" appearance="tertiary" @click="isActive = false" />
+      </template>
+    </CdsNotificationAlert>
+  </div>
+</template>
+```
+
+## A stack of notifications
+
+Every instance is an independent overlay: notifications sharing a position pile up into a vertical stack. On close (`update:model-value` → `false`) remove the item from the list.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { Anchor } from '@central-design-system/components';
+import { CdsButton, CdsNotificationAlert } from '@central-design-system/components';
+import { reactive } from 'vue';
+
+const statuses = CdsNotificationAlert.constants.statuses;
+
+type Notification = {
+  id: string;
+  modelValue: boolean;
+  status: (typeof statuses)[number];
+  text: string;
+  location: Anchor;
+  closable: boolean;
+};
+
+const notifications = reactive<Notification[]>([]);
+let uid = 0;
+
+function addNotification(text: string, location: Anchor) {
+  notifications.push({
+    id: String(uid++),
+    modelValue: true,
+    status: statuses[Math.floor(Math.random() * statuses.length)],
+    text,
+    location,
+    closable: true
+  });
+}
+
+function onUpdateModelValue(value: boolean, id: string) {
+  if (value) return;
+
+  const index = notifications.findIndex((notification) => notification.id === id);
+  if (index !== -1) notifications.splice(index, 1);
+}
+</script>
+
+<template>
+  <div class="flex gap-4 justify-around">
+    <CdsButton text="Сверху слева" @click="addNotification('Тестовое уведомление', 'top left')" />
+    <CdsButton
+      text="Снизу справа"
+      appearance="secondary"
+      @click="addNotification('Тестовое уведомление', 'bottom right')"
+    />
+    <CdsNotificationAlert
+      v-for="notification in notifications"
+      :key="notification.id"
+      title="Заголовок"
+      v-bind="notification"
+      @update:model-value="(value) => onUpdateModelValue(value, notification.id)"
+    >
+      <template #actions>
+        <CdsButton text="Кнопка" appearance="tertiary" />
+      </template>
+    </CdsNotificationAlert>
+  </div>
+</template>
+```

package/skills/cds-builder/references/components/cds-notification-alert/tokens.md

@@ -0,0 +1,15 @@
+# CdsNotificationAlert — 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.
+
+## _CdsNotificationAlert.variables.scss
+
+```scss
+@use '../../../styles/settings';
+
+$notification-alert-z-index: 10000 !default;
+$notification-alert-margin: var(--cds-spacing-400) !default;
+$notification-alert-transition: 0.2s settings.$standard-easing !default;
+```