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

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

@@ -0,0 +1,119 @@
+# CdsMessages — 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.
+
+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.
+
+## Messages
+
+The `messages` prop accepts a string or an array of strings — every string becomes a separate line, they are not glued together.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsMessages } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-3">
+    <CdsMessages active messages="Введите номер договора" />
+
+    <CdsMessages active :messages="['Минимум 8 символов', 'Хотя бы одна цифра']" />
+  </div>
+</template>
+```
+
+## Color
+
+The `color` prop sets the color of the text — take the status tokens (`status-danger-content` for an error, `status-success-content` for a confirmation). Without a color the messages are muted, like supporting text.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsMessages } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-3">
+    <CdsMessages active messages="Обычное сообщение" />
+    <CdsMessages active color="status-danger-content" messages="Номер договора не найден" />
+    <CdsMessages active color="status-success-content" messages="Договор подтверждён" />
+  </div>
+</template>
+```
+
+## Appearance
+
+The messages are visible only with `active`. Showing and hiding are animated, and the animation is set by the `transition` prop.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsMessages } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const active = ref(true);
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsMessages :active="active" messages="Сообщение появляется и исчезает с анимацией" />
+
+    <CdsButton size="sm" appearance="secondary" text="Показать / скрыть" @click="active = !active" />
+  </div>
+</template>
+```
+
+## Slot
+
+The `message` slot overrides a single message and receives its text — you can add an icon or a link. The `default` slot adds content after all the messages.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsIcon, CdsMessages } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsMessages active color="status-danger-content" :messages="['Файл больше 10 МБ', 'Формат не поддерживается']">
+      <template #message="{ message }">
+        <CdsIcon icon="error-fill" size="sm" start />
+        {{ message }}
+      </template>
+    </CdsMessages>
+  </div>
+</template>
+```
+
+## An error for a group of fields
+
+A group of checkboxes has no validation of its own: assemble it yourself and show the result through `active`. While the selection is empty, the red message hangs under the group and disappears with the very first checkbox.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCheckbox, CdsLabel, CdsMessages } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const channels = ref<string[]>([]);
+const isEmpty = computed(() => channels.value.length === 0);
+</script>
+
+<template>
+  <div class="flex flex-col gap-1 w-[350px] m-auto">
+    <CdsLabel text="Способы связи" />
+
+    <CdsCheckbox v-model="channels" value="email" label="Электронная почта" multiple hide-details />
+    <CdsCheckbox v-model="channels" value="phone" label="Телефон" multiple hide-details />
+
+    <CdsMessages :active="isEmpty" color="status-danger-content" messages="Выберите хотя бы один способ связи" />
+  </div>
+</template>
+```

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

@@ -0,0 +1,15 @@
+# CdsMessages — 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.
+
+## _CdsMessages.variables.scss
+
+```scss
+@use '../../../styles/tools';
+
+$messages-min-height: tools.to-rem(16px) !default;
+$messages-transition-duration: 150ms !default;
+$messages-color: inherit !default;
+```

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

@@ -0,0 +1,86 @@
+# CdsModal — 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 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.
+
+## CdsModal
+
+**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. |
+| `captureFocus` | `boolean \| undefined` | `true` | no | Returns the focus back into the content if it has left it — for example on Tab from the end of the page. A mouse click does not steal the focus. |
+| `closeDelay` | `string \| number \| undefined` | — | no | Delay in milliseconds before the component closes. Works only together with open-on-hover. |
+| `closeOnBack` | `boolean \| undefined` | `true` | 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`.) |
+| `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. |
+| `fullscreen` | `boolean \| undefined` | — | no | Expands the modal to the whole screen. |
+| `height` | `string \| number \| undefined` | — | no | Component height |
+| `location` | `Anchor \| undefined` | `'center center'` | no | Sets the anchor point used to position the component, aligning it horizontally, vertically or in both directions |
+| `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. |
+| `noClickAnimation` | `boolean \| undefined` | — | no | Disables the bounce effect on a click outside the content element when `persistent` is set. |
+| `offset` | `string \| number \| number[] \| undefined` | — | no | Increases the distance to the target. If two numbers are passed, the second one shifts the anchor sideways, away from the target. |
+| `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` | `'center center'` | 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. |
+| `persistent` | `boolean \| undefined` | — | no | A click outside the element or the Esc key does not close it. |
+| `retainFocus` | `boolean \| undefined` | `true` | no | Traps Tab navigation inside the content: from the last focusable element the focus moves to the first one and back. |
+| `scrim` | `string \| boolean \| undefined` | `true` | no | Backdrop shown while the overlay is active. Accepts true/false to toggle the backdrop and a string to set its color. |
+| `scrollable` | `boolean \| undefined` | — | no | Enables scrolling of the content inside the modal. |
+| `scrollStrategy` | `"none" \| "close" \| "block" \| "reposition" \| ScrollStrategyFunction \| undefined` | `'block'` | no | Strategy applied when the component is active and the user scrolls the page. |
+| `size` | `number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined` | `'md'` | no | Size of the component |
+| `stickToTarget` | `boolean \| undefined` | — | no | Lets the overlay content go off screen while scrolling. |
+| `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. |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `transition` | `string \| boolean \| (TransitionProps & { component?: Component \| undefined; }) \| { component: Component; } \| null \| undefined` | `{ component: CdsModalTransition }` | no | Transition animation |
+| `viewportMargin` | `string \| number \| undefined` | `12` | no | Sets a custom viewport margin for the overlay content |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+| `zIndex` | `string \| number \| undefined` | `2400` | no | The z-index value of the component. |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `afterEnter` | `[]` | Fired after the opening animation of the modal has finished. |
+| `afterLeave` | `[]` | Fired after the closing animation of the modal has finished. |
+| `update:modelValue` | `[value: boolean]` | Fired when the state of the modal changes. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `activator` | `{ isActive: boolean; props: Record<string, any>; targetRef: TemplateRef; }` | Slot for the element that acts as the activator of the overlay. |
+| `default` | `{ isActive: Ref<boolean, boolean>; }` | Slot for the overlay content. |
+
+**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. |