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

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

@@ -0,0 +1,516 @@
+# CdsModal — 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 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.
+
+## Activators
+
+the page, even a distant one in the markup.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsModal } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const slotModal = ref(false);
+const parentModal = ref(false);
+const siblingModal = ref(false);
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-2">
+    <CdsModal v-model="slotModal">
+      <template #activator="{ props }">
+        <CdsButton v-bind="props">Активатор в слоте</CdsButton>
+      </template>
+
+      <span class="h4">Заголовок</span>
+      <p>Модальное окно открыто активатором из слота</p>
+
+      <div class="mt-4 flex justify-end">
+        <CdsButton @click="slotModal = false">Закрыть</CdsButton>
+      </div>
+    </CdsModal>
+
+    <CdsButton>
+      Родительский элемент
+
+      <CdsModal v-model="parentModal" activator="parent">
+        <span class="h4">Заголовок</span>
+        <p>Модальное окно открыто родительским элементом</p>
+
+        <div class="mt-4 flex justify-end">
+          <CdsButton @click="parentModal = false">Закрыть</CdsButton>
+        </div>
+      </CdsModal>
+    </CdsButton>
+
+    <CdsButton id="modal-activator">Соседний элемент</CdsButton>
+    <CdsModal v-model="siblingModal" activator="#modal-activator">
+      <span class="h4">Заголовок</span>
+      <p>Модальное окно открыто соседним элементом по CSS-селектору</p>
+
+      <div class="mt-4 flex justify-end">
+        <CdsButton @click="siblingModal = false">Закрыть</CdsButton>
+      </div>
+    </CdsModal>
+  </div>
+</template>
+```
+
+## Using v-model
+
+The state of the modal can be controlled directly through `v-model` — without an activator. This is how you open a modal from code: on a server response, from a handler in a table, from a store.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsFunctionalButton, CdsModal } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const modal = ref(false);
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <CdsButton @click="modal = true">Открыть модальное окно</CdsButton>
+
+    <CdsModal v-model="modal">
+      <div class="flex items-center justify-between">
+        <span class="h4">Заголовок</span>
+        <CdsFunctionalButton icon="remove" aria-label="Закрыть" @click="modal = false" />
+      </div>
+
+      <p>Модальное окно без активатора: состоянием управляет v-model</p>
+    </CdsModal>
+
+    <div class="text-content-primary"><strong>v-model:</strong> {{ modal }}</div>
+  </div>
+</template>
+```
+
+## Sizes
+
+The `size` prop sets the width of the modal: `xs` (250), `sm` (350), `md` (500, the default), `lg` (700), `xl` — almost the full width of the screen. A number instead of an alias is an exact width in pixels. The height always adapts to the content, and `width` and `max-width` override the size when you need a non-standard grid.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsModal, type Size } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const sizes: Size[] = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+const size = ref<Size>('md');
+const modal = ref(false);
+
+const open = (value: Size) => {
+  size.value = value;
+  modal.value = true;
+};
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-2">
+    <CdsButton v-for="item in sizes" :key="item" appearance="secondary" @click="open(item)">
+      {{ item }}
+    </CdsButton>
+
+    <CdsModal v-model="modal" :size="size">
+      <span class="h4">Размер {{ size }}</span>
+      <p>Ширина окна задана пропом <code>size</code></p>
+
+      <div class="mt-4 flex justify-end">
+        <CdsButton @click="modal = false">Закрыть</CdsButton>
+      </div>
+    </CdsModal>
+  </div>
+</template>
+```
+
+## Persistent modals
+
+The `persistent` prop turns off closing by a click outside the modal and by the `Esc` key — the modal can only be closed with the buttons inside it. A click outside shakes the modal, hinting that an answer is still required; the animation is removed by `no-click-animation`. Take `persistent` when closing would lose data or when the user has to make a choice.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsModal } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const modal = ref(false);
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsModal v-model="modal" persistent size="sm">
+      <template #activator="{ props }">
+        <CdsButton v-bind="props">Открыть модальное окно</CdsButton>
+      </template>
+
+      <span class="h4">Подтвердите действие</span>
+      <p>Клик мимо окна и клавиша <code>Esc</code> его не закроют — ответьте одной из кнопок.</p>
+
+      <div class="mt-4 flex justify-end gap-3">
+        <CdsButton appearance="tertiary" @click="modal = false">Отменить</CdsButton>
+        <CdsButton @click="modal = false">Подтвердить</CdsButton>
+      </div>
+    </CdsModal>
+  </div>
+</template>
+```
+
+## Scrolling inside the modal
+
+By default long content scrolls together with the whole modal. The `scrollable` prop pins the header and the buttons and scrolls only the middle — for that the content is assembled from [CdsCard](../cds-card/api.md): the card becomes the surface of the modal, and the scrolling area is its `CdsCardText`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsButton,
+  CdsCard,
+  CdsCardActions,
+  CdsCardText,
+  CdsDivider,
+  CdsModal,
+  CdsRadio,
+  CdsRadioGroup
+} from '@central-design-system/components';
+import { ref } from 'vue';
+
+const modal = ref(false);
+const country = ref(null);
+
+const countries = [
+  'Австрия',
+  'Бельгия',
+  'Болгария',
+  'Венгрия',
+  'Германия',
+  'Греция',
+  'Дания',
+  'Ирландия',
+  'Испания',
+  'Италия',
+  'Латвия',
+  'Литва',
+  'Нидерланды',
+  'Норвегия',
+  'Польша',
+  'Португалия',
+  'Румыния',
+  'Сербия',
+  'Словакия',
+  'Финляндия',
+  'Франция',
+  'Хорватия',
+  'Чехия',
+  'Швейцария',
+  'Швеция',
+  'Эстония'
+];
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsModal v-model="modal" scrollable size="sm">
+      <template #activator="{ props }">
+        <CdsButton v-bind="props">Выбрать страну</CdsButton>
+      </template>
+
+      <template #default="{ isActive }">
+        <CdsCard prepend-icon="search" title="Выберите страну">
+          <CdsDivider />
+
+          <CdsCardText class="h-[300px]">
+            <CdsRadioGroup v-model="country">
+              <CdsRadio v-for="item of countries" :key="item" :label="item" :value="item" />
+            </CdsRadioGroup>
+          </CdsCardText>
+
+          <CdsDivider />
+
+          <CdsCardActions class="justify-end gap-2">
+            <CdsButton text="Сохранить" @click="isActive.value = false" />
+          </CdsCardActions>
+        </CdsCard>
+      </template>
+    </CdsModal>
+  </div>
+</template>
+```
+
+## Fullscreen
+
+The `fullscreen` prop expands the modal to the whole screen: the size props are ignored, the paddings and the rounded corners are removed. It fits document viewing and complex forms on small screens.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsFunctionalButton, CdsModal } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const modal = ref(false);
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsModal v-model="modal" fullscreen>
+      <template #activator="{ props }">
+        <CdsButton v-bind="props">Открыть на весь экран</CdsButton>
+      </template>
+
+      <div class="flex items-center justify-between">
+        <span class="h4">Окно на весь экран</span>
+        <CdsFunctionalButton icon="remove" aria-label="Закрыть" @click="modal = false" />
+      </div>
+
+      <p class="mt-2">
+        Проп <code>fullscreen</code> разворачивает окно на весь экран: пропсы размеров игнорируются, скругления и
+        отступы от краёв убираются. Такой режим подходит для просмотра документов и сложных форм на небольших экранах.
+      </p>
+
+      <div class="mt-auto flex justify-end">
+        <CdsButton @click="modal = false">Закрыть</CdsButton>
+      </div>
+    </CdsModal>
+  </div>
+</template>
+```
+
+## Animations
+
+By default the modal grows out of the activator and shrinks back — so you can see where it came from. The `transition` prop changes the animation: the ready `modal-transition-top` and `modal-transition-bottom` slide the modal in from the edge of the screen, and any custom CSS animation works too.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsModal } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const modalTop = ref(false);
+const modalBottom = ref(false);
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-2">
+    <CdsModal v-model="modalTop" transition="modal-transition-top" size="sm">
+      <template #activator="{ props }">
+        <CdsButton v-bind="props">Сверху</CdsButton>
+      </template>
+
+      <span class="h4">Заголовок</span>
+      <p>Окно выезжает сверху</p>
+
+      <div class="mt-4 flex justify-end">
+        <CdsButton @click="modalTop = false">Закрыть</CdsButton>
+      </div>
+    </CdsModal>
+
+    <CdsModal v-model="modalBottom" transition="modal-transition-bottom" size="sm">
+      <template #activator="{ props }">
+        <CdsButton v-bind="props">Снизу</CdsButton>
+      </template>
+
+      <span class="h4">Заголовок</span>
+      <p>Окно выезжает снизу</p>
+
+      <div class="mt-4 flex justify-end">
+        <CdsButton @click="modalBottom = false">Закрыть</CdsButton>
+      </div>
+    </CdsModal>
+  </div>
+</template>
+```
+
+## Delete confirmation
+
+An irreversible action is confirmed with a compact `size="sm"` modal: the title names the action, the text specifies what exactly will be deleted, the main button repeats the verb from the title. One modal serves the whole list — the selected record is put into it right before opening.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsFunctionalButton, CdsList, CdsListItem, CdsModal } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const initial = ['Договор поставки № 42', 'Смета на монтаж', 'Акт сверки за июнь'];
+
+const drafts = ref([...initial]);
+const modal = ref(false);
+const pending = ref('');
+
+const askDelete = (draft: string) => {
+  pending.value = draft;
+  modal.value = true;
+};
+
+const confirmDelete = () => {
+  drafts.value = drafts.value.filter((draft) => draft !== pending.value);
+  modal.value = false;
+};
+</script>
+
+<template>
+  <div class="m-auto flex w-[360px] flex-col items-center gap-2">
+    <CdsList v-if="drafts.length" class="w-full">
+      <CdsListItem v-for="draft in drafts" :key="draft" :title="draft">
+        <template #append>
+          <CdsFunctionalButton icon="delete" :aria-label="`Удалить: ${draft}`" @click="askDelete(draft)" />
+        </template>
+      </CdsListItem>
+    </CdsList>
+
+    <CdsButton v-else appearance="secondary" @click="drafts = [...initial]">Восстановить список</CdsButton>
+
+    <CdsModal v-model="modal" size="sm">
+      <span class="h4">Удалить черновик?</span>
+      <p class="mt-2">«{{ pending }}» будет удалён без возможности восстановления.</p>
+
+      <div class="mt-4 flex justify-end gap-3">
+        <CdsButton appearance="tertiary" @click="modal = false">Отмена</CdsButton>
+        <CdsButton @click="confirmDelete">Удалить</CdsButton>
+      </div>
+    </CdsModal>
+  </div>
+</template>
+```
+
+## A form in a modal
+
+A short form is opened on top of the list so that the user is not taken away to a separate page. `persistent` protects what has been typed from an accidental click outside, the submit button shows `loading`, and "Cancel" is blocked while the request is running. The fields are reset in the `after-leave` event — after the closing animation, so that the values do not flash in a still visible modal.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsButton,
+  CdsCard,
+  CdsCardActions,
+  CdsCardText,
+  CdsDivider,
+  CdsForm,
+  CdsModal,
+  CdsTextInput
+} from '@central-design-system/components';
+import { ref } from 'vue';
+
+const modal = ref(false);
+const loading = ref(false);
+const name = ref('');
+const email = ref('');
+
+const submit = async () => {
+  loading.value = true;
+
+  // Имитация запроса к серверу
+  await new Promise((resolve) => setTimeout(resolve, 1500));
+
+  loading.value = false;
+  modal.value = false;
+};
+
+const reset = () => {
+  name.value = '';
+  email.value = '';
+};
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsModal v-model="modal" persistent size="sm" @after-leave="reset">
+      <template #activator="{ props }">
+        <CdsButton v-bind="props">Пригласить сотрудника</CdsButton>
+      </template>
+
+      <CdsForm @submit.prevent="submit">
+        <CdsCard title="Пригласить сотрудника">
+          <CdsDivider />
+
+          <CdsCardText class="flex flex-col gap-2">
+            <CdsTextInput v-model="name" label="Имя" />
+            <CdsTextInput v-model="email" label="Рабочая почта" placeholder="name@company.ru" />
+          </CdsCardText>
+
+          <CdsDivider />
+
+          <CdsCardActions class="justify-end gap-2">
+            <CdsButton appearance="tertiary" :disabled="loading" @click="modal = false">Отмена</CdsButton>
+            <CdsButton type="submit" :loading="loading">Отправить приглашение</CdsButton>
+          </CdsCardActions>
+        </CdsCard>
+      </CdsForm>
+    </CdsModal>
+  </div>
+</template>
+```
+
+## An agreement with scrolling
+
+A document that requires an explicit answer is shown in a modal with `persistent` and `scrollable`: the text scrolls, and the "Accept" and "Decline" buttons are always in sight. Closing the modal without answering is not possible — the decision is recorded only with the buttons.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsButton,
+  CdsCard,
+  CdsCardActions,
+  CdsCardText,
+  CdsDivider,
+  CdsModal
+} from '@central-design-system/components';
+import { ref } from 'vue';
+
+const modal = ref(false);
+const accepted = ref<boolean | null>(null);
+
+const answer = (value: boolean) => {
+  accepted.value = value;
+  modal.value = false;
+};
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <CdsButton @click="modal = true">Открыть условия</CdsButton>
+
+    <div v-if="accepted !== null" class="text-content-primary">
+      {{ accepted ? 'Условия приняты' : 'Условия отклонены' }}
+    </div>
+
+    <CdsModal v-model="modal" persistent scrollable size="sm">
+      <CdsCard title="Условия использования">
+        <CdsDivider />
+
+        <CdsCardText class="h-[300px]">
+          <p v-for="n in 6" :key="n" class="mb-2">
+            {{ n }}. Стороны признают юридическую силу документов, подписанных в системе, и обязуются соблюдать
+            конфиденциальность учётных данных. Оператор вправе обновлять условия, уведомив пользователей заранее.
+          </p>
+        </CdsCardText>
+
+        <CdsDivider />
+
+        <CdsCardActions class="justify-end gap-2">
+          <CdsButton appearance="tertiary" @click="answer(false)">Отклонить</CdsButton>
+          <CdsButton @click="answer(true)">Принять</CdsButton>
+        </CdsCardActions>
+      </CdsCard>
+    </CdsModal>
+  </div>
+</template>
+```

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

@@ -0,0 +1,10 @@
+# CdsModal — 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 title names the action and the buttons answer it — you decide without rereading the text. | “Are you sure?” with “Yes / No” forces you to read the text closely to understand what will happen. |
+| There is always a way back from the modal: a cancel button next to the main action and a close icon in the corner. | A single “Accept” button leaves no choice — the user is locked inside the modal. |
+| The size of the modal matches its content: a short confirmation lives in a compact modal. | In a wide modal a single line of text gets lost and the eye wanders between the text and the buttons. |

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

@@ -0,0 +1,22 @@
+# CdsModal — 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.
+
+## _CdsModal.variables.scss
+
+```scss
+@use 'sass:map';
+@use '../../../styles/tools';
+@use '../../../styles/settings';
+
+$modal-margin: var(--cds-spacing-400) !default;
+$modal-padding: var(--cds-spacing-400) !default;
+$modal-border-radius: var(--cds-border-radius-300) !default;
+$modal-border: var(--cds-border-100) solid !default;
+$modal-colors: (
+  'background': rgb(var(--cds-color-surface-elevated)),
+  'border': rgb(var(--cds-color-line-elevated))
+) !default;
+```

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

@@ -0,0 +1,46 @@
+# CdsNotification — API
+
+> Generated from meta.json by `bun run generate:skill`. Do not edit manually.
+> Examples: [examples.md](examples.md) · Guidelines: [guidelines.md](guidelines.md) · Tokens: [tokens.md](tokens.md)
+
+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.
+
+## CdsNotification
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `closable` | `boolean \| undefined` | — | no | Adds a close button that hides the notification. |
+| `closeIcon` | `IconValue \| undefined` | `'remove'` | no | Icon of the close button. |
+| `closeLabel` | `string \| undefined` | `'$cds.close'` | no | Accessible label (aria-label) for the close button. |
+| `content` | `string \| number \| undefined` | — | no | Content displayed in the component. |
+| `icon` | `false \| IconValue \| undefined` | `null` | no | Icon before the content. Taken from `status` by default; `false` hides the icon. |
+| `modelValue` | `boolean \| undefined` | `true` | no | Visibility of the notification (v-model). When `false`, the notification is not rendered. |
+| `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 |
+| `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 |
+| `title` | `string \| undefined` | — | no | Notification heading. |
+| `variant` | `"default" \| "flat" \| "compact" \| "important" \| undefined` | `'default'` | no | Display mode: `default` — regular; `flat` — borderless; `compact` — single line without a heading; `important` — neutral background and a shadow, where the status only drives the content colors. |
+
+**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. |
+| `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). |