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

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

@@ -0,0 +1,324 @@
+# CdsButton — 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 button is the primary way to trigger an action: submit a form, open a modal, confirm a choice. Its appearance signals the role it plays: `primary` is the main action on the screen, `secondary` and `tertiary` are the supporting ones.
+
+## Appearance
+
+The `appearance` prop sets the visual role of the button — from the most contrasting `primary` to `inverse` for dark backgrounds.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton } from '@central-design-system/components';
+
+const { appearances } = CdsButton.constants;
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-4">
+    <CdsButton v-for="appearance of appearances" :key="appearance" :text="appearance" :appearance="appearance" />
+  </div>
+</template>
+```
+
+## Sizes
+
+The `size` prop changes the height and the paddings of the button. The default size is `md`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton } from '@central-design-system/components';
+
+const { sizes } = CdsButton.constants;
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-4">
+    <CdsButton v-for="size of sizes" :key="size" :text="'Button ' + size" :size="size" />
+  </div>
+</template>
+```
+
+## Icons
+
+The `prepend-icon` and `append-icon` props add an icon before and after the text from `text`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton } from '@central-design-system/components';
+
+const { appearances } = CdsButton.constants;
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-4">
+    <CdsButton
+      v-for="appearance of appearances"
+      :key="appearance"
+      prepend-icon="add"
+      append-icon="settings"
+      :text="appearance"
+      :appearance="appearance"
+    />
+  </div>
+</template>
+```
+
+## Icons
+
+The `icon` prop turns the button into an icon button: the text is hidden and a square button with a single icon remains.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton } from '@central-design-system/components';
+
+const { appearances } = CdsButton.constants;
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-4">
+    <CdsButton
+      v-for="appearance of appearances"
+      :key="appearance"
+      icon="copy"
+      :text="appearance"
+      :appearance="appearance"
+    />
+  </div>
+</template>
+```
+
+## Layout
+
+The `block` prop stretches the button to the full width of its parent container.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col m-auto items-start gap-4 w-[400px]">
+    <CdsButton block text="Block button" />
+    <CdsButton block prepend-icon="add" append-icon="settings" text="Block button with icons" />
+    <CdsButton text="Обычная кнопка" />
+  </div>
+</template>
+```
+
+## Layout
+
+The `stacked` prop places the icon above the text. Such a button is twice as tall as a regular one of the same size, and its minimum width equals its height.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton } from '@central-design-system/components';
+
+const { sizes } = CdsButton.constants;
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-4">
+    <CdsButton
+      v-for="size of sizes"
+      :key="size"
+      stacked
+      appearance="tertiary"
+      prepend-icon="settings"
+      :text="'Button ' + size"
+      :size="size"
+    />
+  </div>
+</template>
+```
+
+## Layout
+
+The `spaced` prop pushes the `prepend` and `append` slots to the edges of the button. The value decides on which side of the content the free space appears: `start` moves the content towards `append`, `end` moves it towards `prepend`, `both` keeps it centered. The effect shows up only when the button is wider than its content, so `spaced` usually goes together with `block` or an explicit width.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col m-auto gap-4 w-[320px]">
+    <CdsButton
+      block
+      appearance="tertiary"
+      prepend-icon="add"
+      append-icon="settings"
+      spaced="start"
+      text="spaced=start"
+    />
+    <CdsButton block appearance="tertiary" prepend-icon="add" append-icon="settings" spaced="end" text="spaced=end" />
+    <CdsButton block appearance="tertiary" prepend-icon="add" append-icon="settings" spaced="both" text="spaced=both" />
+    <CdsButton block appearance="tertiary" prepend-icon="add" append-icon="settings" text="без spaced" />
+  </div>
+</template>
+```
+
+## Slots
+
+Slots replace the content coming from props when you need full control over the markup.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsIcon, CdsProgressCircle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const loading = ref(false);
+
+const onClick = async () => {
+  loading.value = true;
+
+  await new Promise((resolve) =>
+    setTimeout(() => {
+      loading.value = false;
+      resolve(true);
+    }, 3000)
+  );
+};
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsButton appearance="tertiary" :loading="loading" @click="onClick">
+      <template #prepend>
+        <CdsIcon icon="settings" color="green" />
+      </template>
+
+      <span class="text-purple-500 font-bold">Click me</span>
+
+      <template #append>
+        <CdsIcon icon="copy" color="red" />
+      </template>
+
+      <template #loader>
+        <CdsProgressCircle indeterminate color="yellow-light-500" />
+      </template>
+    </CdsButton>
+  </div>
+</template>
+```
+
+## Link button
+
+Pass `href` (or `to` with a `RouteLocationRaw` object from vue-router) and the button renders as an `a` tag with all the link attributes, keeping the look and the props of a button.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsButton href="https://www.google.com" target="_blank" text="External Link" />
+  </div>
+</template>
+```
+
+## Submitting a form
+
+The primary button triggers the main action of the form. The `loading` prop shows the request in progress and guards against a double submit, while the neighboring `tertiary` button gives a way to back out.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsTextInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const email = ref('');
+const loading = ref(false);
+
+const submit = async () => {
+  loading.value = true;
+
+  await new Promise((resolve) => setTimeout(resolve, 1500));
+
+  loading.value = false;
+};
+</script>
+
+<template>
+  <form class="flex w-full max-w-md flex-col gap-4" @submit.prevent="submit">
+    <CdsTextInput v-model="email" label="Рабочая почта" placeholder="name@company.ru" hint="Пришлём ссылку для входа" />
+
+    <div class="flex gap-3">
+      <CdsButton type="submit" text="Отправить приглашение" :loading="loading" />
+      <CdsButton appearance="tertiary" text="Отмена" :disabled="loading" />
+    </div>
+  </form>
+</template>
+```
+
+## Action bar
+
+Repeating actions on a record — edit, duplicate, delete — fit nicely into a compact bar of icon buttons. The `icon` prop drops the text and `size="sm"` saves space. Do not forget `aria-label`: without text it stays the only name of the action.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex w-full max-w-md items-center justify-between gap-4">
+    <span>Шаблон отчёта за квартал</span>
+
+    <div class="flex gap-2">
+      <CdsButton appearance="tertiary" size="sm" icon="edit" aria-label="Редактировать" />
+      <CdsButton appearance="tertiary" size="sm" icon="copy" aria-label="Дублировать" />
+      <CdsButton appearance="tertiary" size="sm" icon="delete" aria-label="Удалить" />
+    </div>
+  </div>
+</template>
+```
+
+## Step navigation
+
+In wizards and multi-step forms the primary button moves forward and the secondary one moves back. Chevron icons in `prepend-icon` and `append-icon` reinforce the direction, and `disabled` blocks moving past the first and the last step.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const step = ref(2);
+const totalSteps = 4;
+</script>
+
+<template>
+  <div class="flex w-full max-w-md items-center justify-between m-auto gap-4">
+    <CdsButton appearance="secondary" prepend-icon="chevron-left" text="Назад" :disabled="step === 1" @click="step--" />
+
+    <span>Шаг {{ step }} из {{ totalSteps }}</span>
+
+    <CdsButton append-icon="chevron-right" text="Далее" :disabled="step === totalSteps" @click="step++" />
+  </div>
+</template>
+```

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

@@ -0,0 +1,10 @@
+# CdsButton — 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 |
+| --- | --- |
+| One primary action per screen; everything else stays less prominent. | Several primary buttons compete for attention, and the main action gets lost. |
+| The label names the action and its outcome. | По «Да» и «ОК» не понятно, что именно произойдёт. |
+| Use an icon button only for widely understood actions: edit, copy, delete. | A rare operation is impossible to guess from an icon alone — give the button a label. |

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

@@ -0,0 +1,190 @@
+# CdsButton — 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.
+
+## _CdsButton.variables.scss
+
+```scss
+@use 'sass:map';
+@use '../../../styles/tools';
+@use '../../../styles/settings';
+
+// ======================= Variables =======================
+$button-border: var(--cds-border-100) solid !default;
+$button-outline: var(--cds-border-200) solid !default;
+$button-outline-offset: var(--cds-spacing-50) !default;
+$button-border-radius: var(--cds-border-radius-200) !default;
+$button-white-space: nowrap !default;
+$button-content-transition: transform, opacity .2s settings.$standard-easing !default;
+$button-stacked-gap: var(--cds-spacing-100) !default;
+
+// ======================= Appearances =======================
+$button-appearances: (
+  primary: (
+    default: (
+      'background': rgb(var(--cds-color-brand-primary)),
+      'border': rgb(var(--cds-color-brand-primary)),
+      'content': rgb(var(--cds-color-content-on-dark)),
+    ),
+    hover: (
+      'background': rgb(var(--cds-color-brand-primary-hover)),
+      'border': rgb(var(--cds-color-brand-primary-hover)),
+      'content': rgb(var(--cds-color-content-on-dark)),
+    ),
+    active: (
+      'background': rgb(var(--cds-color-brand-primary-active)),
+      'border': rgb(var(--cds-color-brand-primary-active)),
+      'content': rgb(var(--cds-color-content-on-dark)),
+    ),
+    disabled: (
+      'background': rgb(var(--cds-color-fill-disable)),
+      'border': rgb(var(--cds-color-fill-disable)),
+      'content': rgb(var(--cds-color-content-disable)),
+    ),
+    focus: (
+      'outline': rgb(var(--cds-color-line-focus-outline))
+    ),
+  ),
+  secondary: (
+    default: (
+      'background': rgb(var(--cds-color-brand-secondary)),
+      'border': rgb(var(--cds-color-brand-secondary-border)),
+      'content': rgb(var(--cds-color-brand-primary-content)),
+    ),
+    hover: (
+      'background': rgb(var(--cds-color-brand-secondary-hover)),
+      'border': rgb(var(--cds-color-brand-secondary-hover)),
+      'content': rgb(var(--cds-color-brand-primary-content)),
+    ),
+    active: (
+      'background': rgb(var(--cds-color-brand-secondary-active)),
+      'border': rgb(var(--cds-color-brand-secondary-active)),
+      'content': rgb(var(--cds-color-brand-primary-content)),
+    ),
+    disabled: (
+      'background': rgb(var(--cds-color-fill-disable)),
+      'border': rgb(var(--cds-color-fill-disable)),
+      'content': rgb(var(--cds-color-content-disable)),
+    ),
+    focus: (
+      'outline': rgb(var(--cds-color-line-focus-outline))
+    ),
+  ),
+  tertiary: (
+    default: (
+      'background': rgb(var(--cds-color-fill-secondary)),
+      'border': rgb(var(--cds-color-fill-secondary)),
+      'content': rgb(var(--cds-color-content-primary)),
+    ),
+    hover: (
+      'background': rgb(var(--cds-color-fill-secondary-hover)),
+      'border': rgb(var(--cds-color-fill-secondary-hover)),
+      'content': rgb(var(--cds-color-content-primary)),
+    ),
+    active: (
+      'background': rgb(var(--cds-color-fill-secondary-active)),
+      'border': rgb(var(--cds-color-fill-secondary-active)),
+      'content': rgb(var(--cds-color-content-primary)),
+    ),
+    disabled: (
+      'background': rgb(var(--cds-color-fill-disable)),
+      'border': rgb(var(--cds-color-fill-disable)),
+      'content': rgb(var(--cds-color-content-disable)),
+    ),
+    focus: (
+      'outline': rgb(var(--cds-color-line-focus-outline))
+    ),
+  ),
+  inverse: (
+    default: (
+      'background': rgb(var(--cds-color-fill-primary)),
+      'border': transparent,
+      'content': rgb(var(--cds-color-content-primary)),
+    ),
+    hover: (
+      'background': rgb(var(--cds-color-fill-primary-hover)),
+      'border': transparent,
+      'content': rgb(var(--cds-color-content-primary)),
+    ),
+    active: (
+      'background': rgb(var(--cds-color-fill-primary-active)),
+      'border': transparent,
+      'content': rgb(var(--cds-color-content-primary)),
+    ),
+    disabled: (
+      'background': rgb(var(--cds-color-fill-disable)),
+      'border': rgb(var(--cds-color-fill-disable)),
+      'content': rgb(var(--cds-color-content-disable)),
+    ),
+    focus: (
+      'outline': rgb(var(--cds-color-line-focus-outline))
+    ),
+  )
+) !default;
+
+// ======================= Sizes =======================
+$button-sizes: (
+  xs: (
+    'height': tools.to-rem(20px),
+    'padding': var(--cds-spacing-100),
+    'gap': var(--cds-spacing-100),
+    'font-size': '100',
+    'loader': tools.to-rem(12px)
+  ),
+  sm: (
+    'height': tools.to-rem(24px),
+    'padding': var(--cds-spacing-200),
+    'gap': var(--cds-spacing-200),
+    'font-size': '200',
+    'loader': tools.to-rem(16px)
+  ),
+  md: (
+    'height': tools.to-rem(32px),
+    'padding': var(--cds-spacing-400),
+    'gap': var(--cds-spacing-200),
+    'font-size': '200',
+    'loader': tools.to-rem(20px)
+  ),
+  lg: (
+    'height': tools.to-rem(48px),
+    'padding': var(--cds-spacing-500),
+    'gap': var(--cds-spacing-300),
+    'font-size': '400',
+    'loader': tools.to-rem(24px)
+  ),
+  xl: (
+    'height': tools.to-rem(64px),
+    'padding': var(--cds-spacing-600),
+    'gap': var(--cds-spacing-400),
+    'font-size': '600',
+    'loader': tools.to-rem(32px)
+  ),
+) !default;
+
+// ======================= Stacked sizes =======================
+// Высота удвоена относительно обычной кнопки, чтобы вместить иконку над текстом.
+$button-stacked-sizes: (
+  xs: (
+    'height': tools.to-rem(40px),
+    'padding': var(--cds-spacing-100)
+  ),
+  sm: (
+    'height': tools.to-rem(48px),
+    'padding': var(--cds-spacing-200)
+  ),
+  md: (
+    'height': tools.to-rem(64px),
+    'padding': var(--cds-spacing-300)
+  ),
+  lg: (
+    'height': tools.to-rem(96px),
+    'padding': var(--cds-spacing-400)
+  ),
+  xl: (
+    'height': tools.to-rem(128px),
+    'padding': var(--cds-spacing-500)
+  ),
+) !default;
+```

package/skills/cds-builder/references/components/cds-button-group/api.md

@@ -0,0 +1,27 @@
+# CdsButtonGroup — 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 button group joins several [CdsButton](../cds-button/api.md) into one block: the buttons sit flush against each other, only the outer corners stay rounded, and shared props are set once on the group. This is how you present sets of related actions — a toolbar over a record or zoom controls.
+
+## CdsButtonGroup
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `appearance` | `"primary" \| "secondary" \| "tertiary" \| "inverse" \| undefined` | `'primary'` | no | Visual appearance of the component |
+| `baseColor` | `string \| undefined` | — | no | Color of the component in its inactive state |
+| `color` | `string \| undefined` | — | no | Component color |
+| `direction` | `"horizontal" \| "vertical" \| undefined` | `'horizontal'` | no | Switches the component between horizontal and vertical layout. |
+| `divided` | `boolean \| undefined` | — | no | Adds dividers between the buttons of the group. |
+| `size` | `number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined` | `'md'` | no | Size of the component |
+| `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` | `any` | Buttons of the group. |

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

@@ -0,0 +1,33 @@
+# CdsButtonGroup — 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 button group joins several [CdsButton](../cds-button/api.md) into one block: the buttons sit flush against each other, only the outer corners stay rounded, and shared props are set once on the group. This is how you present sets of related actions — a toolbar over a record or zoom controls.
+
+## Variations
+
+The group passes the `appearance`, `size` and `color` props down to every button inside — you do not need to repeat them on each button. The `divided` prop adds dividers between the buttons, and `direction="vertical"` turns the group into a column.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsButtonGroup } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-center gap-4">
+    <CdsButtonGroup appearance="tertiary" divided>
+      <CdsButton text="Копировать" prepend-icon="copy" />
+      <CdsButton text="Переместить" prepend-icon="insert" />
+      <CdsButton text="Удалить" prepend-icon="delete" />
+    </CdsButtonGroup>
+
+    <CdsButtonGroup appearance="secondary" direction="vertical" divided>
+      <CdsButton icon="plus" aria-label="Приблизить" />
+      <CdsButton icon="minus" aria-label="Отдалить" />
+    </CdsButtonGroup>
+  </div>
+</template>
+```

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

@@ -0,0 +1,17 @@
+# CdsButtonGroup — 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.
+
+## _CdsButtonGroup.variables.scss
+
+```scss
+@use '../../../styles/settings';
+@use '../../CdsButton/styles/CdsButton.variables' as button;
+
+$button-group-border-radius: button.$button-border-radius !default;
+$button-group-divider-border-width: var(--cds-border-100) !default;
+$button-group-divider-border-style: settings.$border-style-root !default;
+$button-group-divider-border-color: rgb(var(--cds-color-line-tertiary)) !default;
+```

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

@@ -0,0 +1,51 @@
+# CdsButtonToggle — 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 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.
+
+## CdsButtonToggle
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `activeColor` | `string \| undefined` | — | no | Color of the component in its active state |
+| `appearance` | `"primary" \| "secondary" \| "tertiary" \| "inverse" \| undefined` | `'primary'` | no | Visual appearance of the component |
+| `baseColor` | `string \| undefined` | — | no | Color of the component in its inactive state |
+| `color` | `string \| undefined` | — | no | Component color |
+| `direction` | `"horizontal" \| "vertical" \| undefined` | `'horizontal'` | no | Switches the component between horizontal and vertical layout. |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `divided` | `boolean \| undefined` | — | no | Adds dividers between the buttons of the group. |
+| `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` | — | no | CSS class applied in the selected state |
+| `size` | `number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined` | `'md'` | no | Size of the component |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+| `theme` | `string \| undefined` | — | no | Component theme |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `update:modelValue` | `[value: unknown]` | Fires when the selected value changes. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `CdsButtonToggleSlotProps` | Buttons of the toggle group. The slot props expose the state of the group (selection, navigation). |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `isSelected` | `(id: string) => boolean` | Checks whether the button with this id is selected |
+| `next` | `() => void` | Selects the next button |
+| `prev` | `() => void` | Selects the previous button |
+| `select` | `(id: string, value: boolean) => void` | Selects a button by its id |
+| `selected` | `readonly string[]` | Ids of the selected buttons |