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

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

@@ -0,0 +1,170 @@
+# CdsStatus — 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 status is a non-interactive indicator of the state of an object: the request is paid, the document is under review, the payment is overdue. The `status` prop sets the semantics — the color and the icon — while `variant` sets the display mode: a prominent filled badge or compact text with a colored icon.
+
+## Statuses
+
+The `status` prop sets one of the five semantic statuses. Assign the values to the states of the object: `info` — neutral, `progress` — the process is running, `warning` — needs attention, `success` — success, `danger` — a problem.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsStatus } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-center gap-2">
+    <CdsStatus text="Новый" />
+    <CdsStatus status="progress" text="В обработке" />
+    <CdsStatus status="warning" text="Требует внимания" />
+    <CdsStatus status="success" text="Оплачен" />
+    <CdsStatus status="danger" text="Просрочен" />
+  </div>
+</template>
+```
+
+## Display mode
+
+A similar "colored icon + text" pair can be assembled by hand — from [CdsIcon](../cds-icon/api.md) with the `color` prop and text next to it. That way you are free to pick the icon and the color; `variant="text"`, on the other hand, guarantees that the icon and the color always match the semantics of the status.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsStatus } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <div class="flex items-center gap-2">
+      <span class="w-[48px] text-100 text-content-secondary">fill</span>
+      <CdsStatus status="success" text="Оплачен" />
+    </div>
+    <div class="flex items-center gap-2">
+      <span class="w-[48px] text-100 text-content-secondary">text</span>
+      <CdsStatus status="success" text="Оплачен" variant="text" />
+    </div>
+  </div>
+</template>
+```
+
+## Text
+
+The text comes from the `text` prop. When you need markup — emphasis, non-breaking spaces — use the `default` slot: it replaces the text from the prop.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsStatus } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsStatus status="progress" variant="text">На проверке до <b>15&nbsp;августа</b></CdsStatus>
+  </div>
+</template>
+```
+
+## Statuses of records in a list
+
+In lists and tables a `fill` badge shows the state of a record at first glance. Keep the vocabulary of statuses short and consistent across the whole section — then the column can be scanned by color, without reading it.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsStatus } from '@central-design-system/components';
+
+const orders = [
+  { id: 4821, title: 'Поставка серверов', status: 'success', text: 'Оплачен' },
+  { id: 4820, title: 'Закупка ноутбуков', status: 'progress', text: 'В обработке' },
+  { id: 4819, title: 'Аренда склада', status: 'warning', text: 'Ждёт оплаты' },
+  { id: 4818, title: 'Ремонт офиса', status: 'danger', text: 'Просрочен' }
+] as const;
+</script>
+
+<template>
+  <div class="m-auto flex w-[360px] flex-col gap-2">
+    <div v-for="order in orders" :key="order.id" class="flex items-center justify-between gap-4">
+      <span>{{ order.title }}</span>
+      <CdsStatus :status="order.status" :text="order.text" />
+    </div>
+  </div>
+</template>
+```
+
+## Tracking a process
+
+The status reflects the course of an asynchronous process: after being sent for review the object moves to `progress`, and once it is done — to `success`. The user sees the current state without reloading the page.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsStatus } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const step = ref<'draft' | 'review' | 'done'>('draft');
+
+const current = computed(() => {
+  if (step.value === 'review') return { status: 'progress', text: 'На проверке' } as const;
+  if (step.value === 'done') return { status: 'success', text: 'Согласован' } as const;
+
+  return { status: 'info', text: 'Черновик' } as const;
+});
+
+const send = () => {
+  step.value = 'review';
+
+  setTimeout(() => {
+    step.value = 'done';
+  }, 2000);
+};
+</script>
+
+<template>
+  <div class="m-auto flex w-[360px] items-center justify-between gap-4">
+    <div class="flex items-center gap-2">
+      <span>Договор № 4821</span>
+      <CdsStatus :status="current.status" :text="current.text" />
+    </div>
+
+    <CdsButton v-if="step !== 'done'" size="sm" text="На проверку" :loading="step === 'review'" @click="send" />
+    <CdsButton v-else appearance="tertiary" size="sm" text="Заново" @click="step = 'draft'" />
+  </div>
+</template>
+```
+
+## A status in a details block
+
+In a dense info block — an invoice card, a panel of details — the `fill` background pulls attention away. The `text` variant sits in line with the rest of the data: the colored icon keeps the semantics, and the text stays neutral.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsStatus } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="m-auto flex w-[320px] flex-col gap-1">
+    <div class="flex items-center justify-between">
+      <span class="text-content-secondary">Счёт № 4821</span>
+      <CdsStatus status="success" text="Оплачен" variant="text" />
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-content-secondary">Сумма</span>
+      <span>124 500 ₽</span>
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-content-secondary">Срок оплаты</span>
+      <span>15 августа</span>
+    </div>
+  </div>
+</template>
+```

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

@@ -0,0 +1,10 @@
+# CdsStatus — 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 color of the status matches its meaning: success is green, a problem is red. | The color contradicts the meaning — the user reads the signal before the text and draws the wrong conclusion. |
+| The status text is one or two words, so the state is read instantly. | A long phrase does not fit and gets truncated with an ellipsis. Move the details into the text next to it. |
+| One display mode per list: the statuses are easy to compare across rows. | Mixing fill and text in neighboring rows looks like equal states have different importance. |

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

@@ -0,0 +1,17 @@
+# CdsStatus — 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.
+
+## _CdsStatus.variables.scss
+
+```scss
+@use '../../../styles/tools';
+
+$status-padding: 0 var(--cds-spacing-100) !default;
+$status-border-radius: var(--cds-border-radius-100) !default;
+$status-gap: var(--cds-spacing-100) !default;
+$status-height: tools.to-rem(20px) !default;
+$status-max-width: 100% !default;
+```

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

@@ -0,0 +1,176 @@
+# CdsSteps — 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)
+
+The stepper walks the user through a multi-step process: it shows which steps are done, which one is active and how many are left. It can switch the content of the steps and renders the "Back" / "Next" buttons out of the box, while a header without content works as a status tracker.
+
+Family: [CdsSteps](#cdssteps) + subcomponents: [CdsStepsActions](#cdsstepsactions), [CdsStepsItem](#cdsstepsitem), [CdsStepsView](#cdsstepsview), [CdsStepsViewItem](#cdsstepsviewitem).
+
+## CdsSteps
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `hideActions` | `boolean \| undefined` | — | no | Hides the step navigation buttons |
+| `interactive` | `boolean \| undefined` | — | no | Allows jumping to a step by click |
+| `itemProps` | `SelectItemKey` | `'props'` | no | Object field that holds the props of the item, or a function that returns them |
+| `items` | `any[] \| undefined` | `[]` | no | Array of items to display |
+| `itemText` | `SelectItemKey` | `'text'` | no | Key of the step description in an items element object |
+| `itemTitle` | `SelectItemKey` | `'title'` | no | Object field used as the item title, or a function that returns it |
+| `itemValue` | `SelectItemKey` | `'value'` | no | Object field used as the item value, or a function that returns it |
+| `mandatory` | `boolean \| "force" \| undefined` | `'force'` | no | Requires at least one item to stay selected |
+| `max` | `number \| undefined` | — | no | Maximum number of items that can be selected |
+| `modelValue` | `any` | — | no | Value of the selected items of the group |
+| `multiple` | `boolean \| undefined` | — | no | Allows selecting several items at once |
+| `nextText` | `string \| undefined` | `'$cds.steps.next'` | no | Text of the next step button |
+| `prevText` | `string \| undefined` | `'$cds.steps.prev'` | no | Text of the previous step button |
+| `readonly` | `boolean \| null \| undefined` | `null` | no | Read-only state |
+| `required` | `boolean \| "force" \| undefined` | `'force'` | no | Requires at least one item to stay selected |
+| `selectedClass` | `string \| undefined` | `'cds-steps-item--current'` | no | CSS class applied in the selected state |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `vertical` | `boolean \| undefined` | — | no | Vertical layout |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `update:modelValue` | `[value: unknown]` | Fired when the v-model value changes |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `actions` | `CdsStepsSlot` | Custom navigation buttons |
+| `default` | `CdsStepsSlot` | Header content: custom CdsStepsItem (used when items is not set) |
+| `header-item` | `CdsStepsItemSlot` | Custom rendering of every step content in the header |
+| `item` | `CdsStepsInternalItem` | Step content in the content area |
+| `next` | `CdsStepsActionsSlot` | Custom next step button |
+| `prev` | `CdsStepsActionsSlot` | Custom previous step button |
+| `text` | `CdsStepsItemSlot` | Custom description of every step |
+| `title` | `CdsStepsItemSlot` | Custom title of every step |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `next` | `() => void` | Moves to the next step. |
+| `prev` | `() => void` | Moves to the previous step. |
+
+---
+
+## CdsStepsActions
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `disabled` | `boolean \| "next" \| "prev" \| undefined` | `false` | no | Disables the navigation buttons: both or a specific one |
+| `nextText` | `string \| undefined` | `'$cds.steps.next'` | no | Text of the next step button |
+| `prevText` | `string \| undefined` | `'$cds.steps.prev'` | no | Text of the previous step button |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `click:next` | `[]` | Click on the next step button |
+| `click:prev` | `[]` | Click on the previous step button |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `next` | `CdsStepsActionsSlot` | Custom next step button |
+| `prev` | `CdsStepsActionsSlot` | Custom previous step button |
+
+---
+
+## CdsStepsItem
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `error` | `boolean \| undefined` | — | no | The step finished with an error |
+| `interactive` | `boolean \| undefined` | — | no | Allows jumping to a step by click |
+| `readonly` | `boolean \| null \| undefined` | `null` | no | Read-only state |
+| `selectedClass` | `string \| undefined` | — | no | CSS class applied in the selected state |
+| `text` | `string \| undefined` | — | no | Step description |
+| `title` | `string \| undefined` | — | no | Step title |
+| `value` | `any` | — | no | Value of the component within the group |
+| `warning` | `boolean \| undefined` | — | no | The step needs attention |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `group:selected` | `[value: { value: boolean; }]` | Fired when the selected state of the step inside the group changes |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `CdsStepsItemSlot` | Extra step content after the title and the description |
+| `text` | `CdsStepsItemSlot` | Custom step description |
+| `title` | `CdsStepsItemSlot` | Custom step title |
+
+---
+
+## CdsStepsView
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `crossfade` | `boolean \| undefined` | — | no | Slides change with a smooth crossfade instead of a shift |
+| `direction` | `"horizontal" \| "vertical" \| undefined` | `'horizontal'` | no | Switches the component between horizontal and vertical layout. |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `max` | `number \| undefined` | — | no | Maximum number of items that can be selected |
+| `modelValue` | `any` | — | no | Value of the selected items of the group |
+| `multiple` | `boolean \| undefined` | — | no | Allows selecting several items at once |
+| `reverse` | `boolean \| undefined` | — | no | Inverts the direction of the transition animation between slides |
+| `selectedClass` | `string \| undefined` | — | no | CSS class applied in the selected state |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `transitionDuration` | `number \| undefined` | — | no | Duration of the transition animation between slides, in milliseconds |
+| `verticalArrows` | `boolean \| "left" \| "right" \| undefined` | — | no | Places the navigation arrows vertically: `'left'` or `'right'` — the side, `true` — the default side |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `update:modelValue` | `[value: any]` | Fired when the v-model value changes |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `additional` | `{ group: GroupProvide; }` | Extra content above the slides — indicator dots or your own navigation, for example |
+| `default` | `{ group: GroupProvide; }` | Slides. The slot props carry the group state for controlling the active slide |
+| `next` | `{ props: ControlProps; }` | Button that moves to the next slide. The slot props are ready to bind to your own button |
+| `prev` | `{ props: ControlProps; }` | Button that moves to the previous slide. The slot props are ready to bind to your own button |
+
+---
+
+## CdsStepsViewItem
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `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. |
+| `reverseTransition` | `string \| boolean \| undefined` | — | no | Transition used when the slide appears in the reverse direction. A transition component name, or `false` to turn the animation off |
+| `selectedClass` | `string \| undefined` | — | no | CSS class applied in the selected state |
+| `transition` | `string \| boolean \| undefined` | — | no | Transition used when the slide appears in the forward direction. A transition component name, or `false` to turn the animation off |
+| `value` | `any` | — | no | Value of the component within the group |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Content of the slide |