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

package/skills/cds-builder/references/components/cds-button-toggle/examples.md

@@ -0,0 +1,278 @@
+# CdsButtonToggle — 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 toggle group turns [CdsButton](../cds-button/api.md) into a switch: the pressed button stays selected, and the choice is available through `v-model`. Use it for modes and filters that are visible right away — the layout of a list, the period of a report, formatting options.
+
+## Selection
+
+By default a single button is selected, and clicking it again clears the choice. `v-model` receives the `value` of the button, or its index when no value is set.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsButtonToggle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const model = ref();
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsButtonToggle v-model="model" appearance="tertiary">
+      <CdsButton text="Один" />
+      <CdsButton text="Два" />
+      <CdsButton text="Три" />
+    </CdsButtonToggle>
+    <span class="text-content-secondary">Выбрано: {{ model ?? '—' }}</span>
+  </div>
+</template>
+```
+
+## Multiple selection
+
+The `multiple` prop allows selecting several buttons — `v-model` becomes an array of values.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsButtonToggle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const model = ref([]);
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsButtonToggle v-model="model" appearance="tertiary" multiple>
+      <CdsButton text="Жирный" />
+      <CdsButton text="Курсив" />
+      <CdsButton text="Подчёркнутый" />
+    </CdsButtonToggle>
+    <span class="text-content-secondary">Выбрано: {{ model.length ? model : '—' }}</span>
+  </div>
+</template>
+```
+
+## Multiple selection
+
+The `max` prop limits the number of selected buttons: once the limit is reached, clicks on the remaining buttons add nothing to the selection.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsButtonToggle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const model = ref([]);
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsButtonToggle v-model="model" appearance="tertiary" multiple :max="2">
+      <CdsButton text="Утро" />
+      <CdsButton text="День" />
+      <CdsButton text="Вечер" />
+      <CdsButton text="Ночь" />
+    </CdsButtonToggle>
+    <span class="text-content-secondary">Выбрано: {{ model.length }} из 2</span>
+  </div>
+</template>
+```
+
+## Mandatory selection
+
+The `mandatory` prop keeps the last choice from being cleared — the group always stays in some state. With the `'force'` value the first available button is selected automatically, even when `v-model` is empty.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsButtonToggle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const model = ref('left');
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsButtonToggle v-model="model" appearance="tertiary" mandatory>
+      <CdsButton text="Слева" value="left" />
+      <CdsButton text="По центру" value="center" />
+      <CdsButton text="Справа" value="right" />
+    </CdsButtonToggle>
+  </div>
+</template>
+```
+
+## Color of the active button
+
+The `active-color` prop repaints the selected buttons — the choice stands out on panels crowded with controls.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsButtonToggle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const model = ref(0);
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsButtonToggle v-model="model" appearance="tertiary" active-color="green">
+      <CdsButton text="День" />
+      <CdsButton text="Неделя" />
+      <CdsButton text="Месяц" />
+    </CdsButtonToggle>
+  </div>
+</template>
+```
+
+## Group props
+
+CdsButtonToggle is built on [CdsButtonGroup](../cds-button-group/api.md) and accepts all of its props: `appearance`, `size` and `color` apply to every button at once, `divided` adds dividers, and `direction="vertical"` turns the group into a column.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsButtonToggle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const horizontal = ref();
+const vertical = ref();
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-center gap-4">
+    <CdsButtonToggle v-model="horizontal" appearance="tertiary" divided>
+      <CdsButton text="Один" />
+      <CdsButton text="Два" />
+      <CdsButton text="Три" />
+    </CdsButtonToggle>
+
+    <CdsButtonToggle v-model="vertical" appearance="tertiary" direction="vertical" divided>
+      <CdsButton text="Один" />
+      <CdsButton text="Два" />
+      <CdsButton text="Три" />
+    </CdsButtonToggle>
+  </div>
+</template>
+```
+
+## View mode
+
+The classic toggle group — switching between a list and a grid. Icon buttons with `aria-label` save space, `mandatory` guarantees that the list is always shown in one of the modes, and `appearance="tertiary"` with `size="sm"` keeps the control from stealing attention from the content.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsButtonToggle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const view = ref('list');
+
+const items = ['Ноутбук', 'Монитор', 'Клавиатура', 'Мышь'];
+</script>
+
+<template>
+  <div class="m-auto flex w-full max-w-md flex-col gap-2">
+    <div class="flex items-center justify-between">
+      <span class="text-content-primary">Товары</span>
+
+      <CdsButtonToggle v-model="view" mandatory appearance="tertiary" size="sm">
+        <CdsButton icon="list" value="list" aria-label="Список" />
+        <CdsButton icon="data-cards" value="cards" aria-label="Плитка" />
+      </CdsButtonToggle>
+    </div>
+
+    <ul v-if="view === 'list'" class="flex flex-col gap-1">
+      <li v-for="item in items" :key="item" class="rounded-200 bg-surface-secondary px-2 py-1">{{ item }}</li>
+    </ul>
+
+    <div v-else class="grid grid-cols-2 gap-1">
+      <div v-for="item in items" :key="item" class="rounded-200 bg-surface-secondary p-4 text-center">
+        {{ item }}
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+## Formatting toolbar
+
+Text styles are independent of each other, so the group works with `multiple`: each button turns its own style on and off, and `v-model` collects the selected values into an array.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsButtonToggle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const format = ref<string[]>([]);
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsButtonToggle v-model="format" appearance="tertiary" multiple divided>
+      <CdsButton icon="bold" value="bold" aria-label="Жирный" />
+      <CdsButton icon="italic" value="italic" aria-label="Курсив" />
+      <CdsButton icon="underline" value="underline" aria-label="Подчёркнутый" />
+    </CdsButtonToggle>
+
+    <p
+      :class="{
+        'font-bold': format.includes('bold'),
+        italic: format.includes('italic'),
+        underline: format.includes('underline')
+      }"
+    >
+      Съешьте ещё этих мягких французских булок
+    </p>
+  </div>
+</template>
+```
+
+## Period filter
+
+Give the buttons a `value` — and `v-model` returns a meaningful value to query the data with. `mandatory` keeps the user from ending up without a period: the numbers always belong to the selected range.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsButtonToggle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const period = ref<'day' | 'week' | 'month'>('week');
+
+const stats = {
+  day: { orders: 12, sum: '48 000 ₽' },
+  week: { orders: 84, sum: '316 000 ₽' },
+  month: { orders: 367, sum: '1,4 млн ₽' }
+};
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsButtonToggle v-model="period" appearance="tertiary" mandatory>
+      <CdsButton text="День" value="day" />
+      <CdsButton text="Неделя" value="week" />
+      <CdsButton text="Месяц" value="month" />
+    </CdsButtonToggle>
+
+    <div class="flex w-[240px] flex-col items-center rounded-200 bg-surface-secondary p-4">
+      <span class="text-900">{{ stats[period].orders }}</span>
+      <span class="text-content-secondary">заказов на {{ stats[period].sum }}</span>
+    </div>
+  </div>
+</template>
+```

package/skills/cds-builder/references/components/cds-button-toggle/guidelines.md

@@ -0,0 +1,10 @@
+# CdsButtonToggle — 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 |
+| --- | --- |
+| A toggle group keeps the choice: the mode or the filter stays pressed. | Actions run once and do not stay selected — those are plain buttons or a CdsButtonGroup. |
+| The screen is always in some mode — mandatory keeps the last choice from being cleared. | Without mandatory the choice can be cleared, and the mode of the screen becomes unclear. |
+| Labels are short and alike — the options read as one row of equals. | Long mismatched labels and a mix of text with icons break the row. |

package/skills/cds-builder/references/components/cds-button-toggle/tokens.md

@@ -0,0 +1,13 @@
+# CdsButtonToggle — 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.
+
+## _CdsButtonToggle.variables.scss
+
+```scss
+@use '../../CdsButton/styles/CdsButton.variables' as button;
+
+$button-toggle-appearances: button.$button-appearances !default;
+```

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

@@ -0,0 +1,221 @@
+# CdsCard — 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 card gathers related content — a title, text, an image, actions — into one bordered block. Use it when an object (a product, a plan, a document) should read as a whole: a card can act as a link and as a selectable item in a group.
+
+Family: [CdsCard](#cdscard) + subcomponents: [CdsCardActions](#cdscardactions), [CdsCardDivider](#cdscarddivider), [CdsCardGroup](#cdscardgroup), [CdsCardItem](#cdscarditem), [CdsCardSubtitle](#cdscardsubtitle), [CdsCardText](#cdscardtext), [CdsCardTitle](#cdscardtitle).
+
+## CdsCard
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `activeColor` | `string \| undefined` | — | no | Color of the component in its active state |
+| `appendAvatar` | `string \| undefined` | — | no | Avatar shown after (to the right of) the content in the card header. |
+| `appendIcon` | `IconValue \| undefined` | — | no | Icon shown after (to the right of) the content in the card header. |
+| `baseColor` | `string \| undefined` | — | no | Color of the component in its inactive state |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `borderless` | `boolean \| undefined` | — | no | Removes the border of the card |
+| `color` | `string \| undefined` | — | no | Component color |
+| `content` | `string \| number \| undefined` | — | no | Content displayed in the component. |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `divider` | `boolean \| undefined` | — | no | Adds a divider between the header and the content |
+| `exact` | `boolean \| undefined` | — | no | If true, the active state applies only on an exact route match |
+| `height` | `string \| number \| undefined` | — | no | Component height |
+| `href` | `string \| undefined` | — | no | The `href` attribute of the link. When set, the component behaves as a regular link |
+| `image` | `string \| undefined` | — | no | URL of the background image of the card. |
+| `itemAlign` | `"start" \| "end" \| "center" \| undefined` | — | no | Alignment of the `prepend` / `append` areas against the header content. Passed to `CdsCardItem` as `align`. |
+| `link` | `boolean \| undefined` | — | no | Gives the card the styles and the behavior of a link. |
+| `loading` | `string \| boolean \| undefined` | — | no | Loading indicator for the component |
+| `location` | `Anchor \| null \| undefined` | — | no | Position of the element relative to its container, for example "top left", "center", "bottom right". |
+| `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 |
+| `position` | `"absolute" \| "static" \| "fixed" \| "relative" \| "sticky" \| undefined` | — | no | CSS positioning of the component — the value of the `position` property |
+| `prependAvatar` | `string \| undefined` | — | no | Avatar shown before (to the left of) the content in the card header. |
+| `prependIcon` | `IconValue \| undefined` | — | no | Icon shown before (to the left of) the content in the card header. |
+| `replace` | `boolean \| undefined` | — | no | If true, navigation replaces the current history entry instead of pushing a new one |
+| `selectedClass` | `string \| undefined` | — | no | CSS class applied in the selected state |
+| `subtitle` | `string \| number \| boolean \| undefined` | — | no | Card subtitle. Rendered inside `CdsCardItem` below the title. |
+| `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 \| number \| boolean \| undefined` | — | no | Card title. Rendered inside `CdsCardItem` above the subtitle. |
+| `to` | `LinkTo \| undefined` | — | no | Target route or route location object for RouterLink. When set, the component behaves as a RouterLink |
+| `value` | `any` | — | no | Value of the component within the group |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `actions` | `any` | Actions bar of the card |
+| `append` | `any` | Content after the main content (in place of the append icon or avatar) |
+| `default` | `any` | Default content inside the card |
+| `image` | `any` | Background image of the card |
+| `item` | `any` | Custom rendering of the card item (CdsCardItem) |
+| `loader` | `LoaderSlotProps` | Slot for a custom loading indicator, shown while the `loading` prop is true. |
+| `prepend` | `any` | Content before the main content (in place of the prepend icon or avatar) |
+| `subtitle` | `any` | Subtitle content |
+| `text` | `any` | Main text content of the card |
+| `title` | `any` | Title content |
+
+---
+
+## CdsCardActions
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `align` | `"start" \| "end" \| "center" \| undefined` | `'start'` | no | Horizontal alignment of the action buttons |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Card actions, usually buttons |
+
+---
+
+## CdsCardDivider
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `color` | `string \| undefined` | — | no | Color of the divider. |
+| `contentOffset` | `string \| number \| (string \| number)[] \| undefined` | — | no | Increases the spacing between the content and the lines. When passed as an array, the second value shifts the slot content down (or right when vertical = true). |
+| `gradient` | `boolean \| undefined` | — | no | Adds a fade-out effect on both ends. |
+| `inset` | `boolean \| undefined` | — | no | Adds an indent to horizontal dividers and reduces the maximum height of vertical ones. |
+| `length` | `string \| number \| undefined` | — | no | Length of the divider. Defaults to pixels. |
+| `opacity` | `string \| number \| undefined` | — | no | Opacity of the divider. |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `thickness` | `string \| number \| undefined` | — | no | Thickness of the divider. Defaults to pixels. |
+| `variant` | `"dotted" \| "dashed" \| "solid" \| "double" \| undefined` | `'solid'` | no | Visual variant of the divider |
+| `vertical` | `boolean \| undefined` | — | no | Renders the divider vertically |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Content of the card divider |
+
+---
+
+## CdsCardGroup
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `direction` | `"horizontal" \| "vertical" \| undefined` | `'horizontal'` | no | Switches the component between horizontal and vertical layout. |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `mandatory` | `boolean \| "force" \| undefined` | — | 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 |
+| `required` | `boolean \| "force" \| undefined` | — | no | Requires at least one item to stay selected |
+| `selectedClass` | `string \| undefined` | `'cds-card--selected'` | 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 |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `GroupProvide` | Cards of the group. The slot props expose the group state (selection, navigation). |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `isSelected` | `(id: string) => boolean` | Checks whether a card with the given id is selected |
+| `next` | `() => void` | Selects the next card |
+| `prev` | `() => void` | Selects the previous card |
+| `select` | `(id: string, value: boolean) => void` | Selects a card by its id |
+| `selected` | `readonly string[]` | Identifiers of the selected cards |
+
+---
+
+## CdsCardItem
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `align` | `"start" \| "end" \| "center" \| undefined` | — | no | Alignment of the `prepend` / `append` areas against the content. |
+| `appendAvatar` | `string \| undefined` | — | no | Avatar shown after (to the right of) the content. |
+| `appendIcon` | `IconValue \| undefined` | — | no | Icon shown after (to the right of) the content. |
+| `prependAvatar` | `string \| undefined` | — | no | Avatar shown before (to the left of) the content. |
+| `prependIcon` | `IconValue \| undefined` | — | no | Icon shown before (to the left of) the content. |
+| `subtitle` | `string \| number \| boolean \| undefined` | — | no | Subtitle of the card item. |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+| `title` | `string \| number \| boolean \| undefined` | — | no | Title of the card item. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `append` | `any` | Content after the main content (in place of the append icon or avatar) |
+| `default` | `any` | Default content inside the body of the card item |
+| `prepend` | `any` | Content before the main content (in place of the prepend icon or avatar) |
+| `subtitle` | `any` | Subtitle content |
+| `title` | `any` | Title content |
+
+---
+
+## CdsCardSubtitle
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `opacity` | `string \| number \| undefined` | — | no | Opacity of the subtitle text. |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Content of the card subtitle |
+
+---
+
+## CdsCardText
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `opacity` | `string \| number \| undefined` | — | no | Opacity of the card text. |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Text content of the card |
+
+---
+
+## CdsCardTitle
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Content of the card title |