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

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

@@ -0,0 +1,10 @@
+# CdsSelect — 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 |
+| --- | --- |
+| Show two or three options as radio buttons — every option is visible without a click. | A select hides a short list behind an extra click. |
+| The label names the field and stays visible after the choice. | Without a label the selected value does not explain what the field is. |
+| A select picks a value. Leave actions to buttons or to a menu. | Commands inside a select look like a field value: it is unclear what will happen after the choice. |

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

@@ -0,0 +1,17 @@
+# CdsSelect — 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.
+
+## _CdsSelect.variables.scss
+
+```scss
+@use '../../../styles/settings';
+
+$select-content-border-radius: var(--cds-border-radius-200) !default;
+$select-content-padding-inline: var(--cds-spacing-100) !default;
+$select-mask-background: rgb(var(--cds-color-content-placeholder)) !default;
+$select-selection-inline-gap: var(--cds-spacing-50) !default;
+$select-transition: .2s settings.$standard-easing !default;
+```

package/skills/cds-builder/references/components/cds-selection-control/api.md

@@ -0,0 +1,60 @@
+# CdsSelectionControl — API
+
+> Generated from meta.json by `bun run generate:skill`. Do not edit manually.
+> Examples: [examples.md](examples.md)
+
+The base of the selection controls: a native `input` with state icons, a label and a description. The component holds the value, can work with its own `true`/`false` values and with multiple selection, and picks up the settings of [CdsSelectionControlGroup](../cds-selection-control-group/api.md). The checkboxes, radio buttons and toggles of the design system are built on it.
+
+## CdsSelectionControl
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `activeColor` | `string \| undefined` | — | no | Color of the component in its active state |
+| `baseColor` | `string \| undefined` | — | no | Color of the component in its inactive state |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `color` | `string \| undefined` | — | no | Component color |
+| `defaultsTarget` | `string \| undefined` | — | no | Name of the child component the group prop values are passed to as defaults |
+| `description` | `string \| undefined` | — | no | Description of the component, shown under the label |
+| `direction` | `"horizontal" \| "vertical" \| undefined` | `'horizontal'` | no | Switches the component between horizontal and vertical layout. |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `error` | `boolean \| undefined` | — | no | Puts the component into the visual error state |
+| `falseIcon` | `IconValue \| undefined` | — | no | Icon of the unselected state |
+| `falseValue` | `any` | — | no | Value for the false state. |
+| `id` | `string \| undefined` | — | no | Unique identifier of the component |
+| `inline` | `boolean \| undefined` | — | no | Renders the control as an inline element — the container does not stretch to the full width |
+| `label` | `string \| undefined` | — | no | Label text of the component |
+| `modelValue` | `any` | — | no | Value of the component (v-model). In a group it is the value of the selected control, with `multiple` — an array of the selected values |
+| `multiple` | `boolean \| null \| undefined` | `null` | no | Allows selecting several values — the model becomes an array. Turns on automatically when an array is passed to `modelValue` |
+| `name` | `string \| undefined` | — | no | The `name` attribute of the native input element. In a group one name joins all the nested controls |
+| `readonly` | `boolean \| null \| undefined` | `null` | no | Read-only state |
+| `textColor` | `string \| undefined` | — | no | Text color of the component |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `trueIcon` | `IconValue \| undefined` | — | no | Icon of the selected state |
+| `trueValue` | `any` | — | no | Value for the true state. |
+| `type` | `string \| undefined` | — | no | Type of the native input element — `radio` or `checkbox`, for example |
+| `value` | `any` | — | no | Value used when the component is selected inside a group. When it is not set, a unique identifier is used. |
+| `valueComparator` | `ValueComparator \| undefined` | `true` | no | Function comparing the model value with the `value` of the control. Deep comparison by default |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `update:modelValue` | `[value: any]` | Fires when the model of the component changes. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `{ backgroundColorClasses: Ref<string[], string[]>; backgroundColorStyles: Ref<CSSProperties, CSSProperties>; }` | Default slot |
+| `description` | `{ description: string \| undefined; props: Record<string, any>; }` | Default slot of the CdsDescription component |
+| `input` | `SelectionControlSlot` | Slot for the default input element. |
+| `label` | `{ label: string \| undefined; props: Record<string, any>; }` | Default slot of the CdsLabel component |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `input` | `HTMLInputElement \| undefined` | Ref to the native `input` element — a checkbox or a radio button. |
+| `isFocused` | `boolean` | Whether the control is focused. |

package/skills/cds-builder/references/components/cds-selection-control/examples.md

@@ -0,0 +1,468 @@
+# CdsSelectionControl — 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 base of the selection controls: a native `input` with state icons, a label and a description. The component holds the value, can work with its own `true`/`false` values and with multiple selection, and picks up the settings of [CdsSelectionControlGroup](../cds-selection-control-group/api.md). The checkboxes, radio buttons and toggles of the design system are built on it.
+
+## Type and icons
+
+The `type` prop sets the type of the native `input` — the behavior and the accessibility depend on it: a `checkbox` is turned on and off, a `radio` is only selected. The state icons come from `true-icon` and `false-icon`; without them the control has no visible part.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSelectionControl } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const checkbox = ref(true);
+const radio = ref(true);
+const star = ref(true);
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-center gap-4">
+    <CdsSelectionControl
+      v-model="checkbox"
+      type="checkbox"
+      true-icon="checkbox-on"
+      false-icon="checkbox-off"
+      label="Чекбокс"
+      class="gap-x-2"
+    />
+
+    <CdsSelectionControl
+      v-model="radio"
+      type="radio"
+      true-icon="radio-on"
+      false-icon="radio-off"
+      label="Радиокнопка"
+      class="gap-x-2"
+    />
+
+    <CdsSelectionControl
+      v-model="star"
+      type="checkbox"
+      true-icon="star-fill"
+      false-icon="star"
+      label="Своя пара иконок"
+      class="gap-x-2"
+    />
+  </div>
+</template>
+```
+
+## Label and description
+
+The `label` prop names the option, `description` explains it. Name the option briefly in the label, and move the details — the price, the deadlines, the limitations — into the description.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSelectionControl } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const digest = ref(true);
+const report = ref(false);
+</script>
+
+<template>
+  <div class="m-auto flex w-[350px] flex-col gap-3">
+    <CdsSelectionControl
+      v-model="digest"
+      type="checkbox"
+      true-icon="checkbox-on"
+      false-icon="checkbox-off"
+      label="Еженедельный дайджест"
+      description="Письмо с новыми закупками по понедельникам"
+      class="gap-x-2"
+    />
+
+    <CdsSelectionControl
+      v-model="report"
+      type="checkbox"
+      true-icon="checkbox-on"
+      false-icon="checkbox-off"
+      label="Отчёт по заявкам"
+      class="gap-x-2"
+    />
+  </div>
+</template>
+```
+
+## Values
+
+By default the model holds `true` or `false`. The `true-value` and `false-value` props replace them with your own values — handy when what goes to the server is not a boolean.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSelectionControl } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const delivery = ref('pickup');
+</script>
+
+<template>
+  <div class="m-auto flex w-[350px] flex-col gap-2">
+    <CdsSelectionControl
+      v-model="delivery"
+      type="checkbox"
+      true-value="courier"
+      false-value="pickup"
+      true-icon="checkbox-on"
+      false-icon="checkbox-off"
+      label="Доставка курьером"
+      class="gap-x-2"
+    />
+
+    <span class="text-content-secondary">Значение модели: {{ delivery }}</span>
+  </div>
+</template>
+```
+
+## Multiple selection
+
+If the model is an array, the controls work in `multiple` mode: every control adds its `value` to it and removes it when unchecked. The mode is turned on automatically — the `multiple` prop is needed only to set it by hand. Comparing the values is the job of `value-comparator`, a deep comparison by default.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSelectionControl } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const channels = [
+  { value: 'email', label: 'Почта' },
+  { value: 'sms', label: 'SMS' },
+  { value: 'push', label: 'Push-уведомления' }
+];
+
+const selected = ref(['sms']);
+</script>
+
+<template>
+  <div class="m-auto flex w-[350px] flex-col gap-2">
+    <CdsSelectionControl
+      v-for="channel of channels"
+      :key="channel.value"
+      v-model="selected"
+      type="checkbox"
+      :value="channel.value"
+      true-icon="checkbox-on"
+      false-icon="checkbox-off"
+      :label="channel.label"
+      class="gap-x-2"
+    />
+
+    <span class="text-content-secondary">Значение модели: {{ selected }}</span>
+  </div>
+</template>
+```
+
+## States
+
+`disabled` blocks the control and dims its color, `readonly` forbids changing the value while keeping the look. `error` puts the `--error` modifier on the root — the error color is drawn for it by the styles of the particular control, the base component has none.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSelectionControl } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const readonly = ref(true);
+const error = ref(true);
+</script>
+
+<template>
+  <div class="m-auto flex w-[350px] flex-col gap-2">
+    <CdsSelectionControl
+      :model-value="true"
+      color="green"
+      type="checkbox"
+      true-icon="checkbox-on"
+      false-icon="checkbox-off"
+      label="Обычное состояние"
+      class="gap-x-2"
+    />
+
+    <CdsSelectionControl
+      :model-value="true"
+      disabled
+      color="green"
+      type="checkbox"
+      true-icon="checkbox-on"
+      false-icon="checkbox-off"
+      label="Заблокирован (disabled)"
+      class="gap-x-2"
+    />
+
+    <CdsSelectionControl
+      v-model="readonly"
+      readonly
+      color="green"
+      type="checkbox"
+      true-icon="checkbox-on"
+      false-icon="checkbox-off"
+      label="Только для чтения (readonly)"
+      class="gap-x-2"
+    />
+
+    <CdsSelectionControl
+      v-model="error"
+      error
+      color="green"
+      type="checkbox"
+      true-icon="checkbox-on"
+      false-icon="checkbox-off"
+      label="Ошибка (error)"
+      class="gap-x-2"
+    />
+  </div>
+</template>
+```
+
+## Colors
+
+`color` sets the color of the selected control, `base-color` the color of an unselected one. The values are the colors of the design system palette.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSelectionControl } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const selected = ref(true);
+const unselected = ref(false);
+</script>
+
+<template>
+  <div class="m-auto flex w-[350px] flex-col gap-2">
+    <CdsSelectionControl
+      v-model="selected"
+      color="green"
+      base-color="purple"
+      type="checkbox"
+      true-icon="checkbox-on"
+      false-icon="checkbox-off"
+      label="Выбран: цвет из color"
+      class="gap-x-2"
+    />
+
+    <CdsSelectionControl
+      v-model="unselected"
+      color="green"
+      base-color="purple"
+      type="checkbox"
+      true-icon="checkbox-on"
+      false-icon="checkbox-off"
+      label="Не выбран: цвет из base-color"
+      class="gap-x-2"
+    />
+  </div>
+</template>
+```
+
+## Layout
+
+Inside a flex container the control stretches together with its neighbors. The `inline` prop leaves it the width of its content — that way the controls can stand in a row without extra gaps.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSelectionControl } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const stretched = ref(['first']);
+const inline = ref(['first']);
+</script>
+
+<template>
+  <div class="m-auto flex w-[350px] flex-col gap-4">
+    <div class="flex flex-col gap-1">
+      <span class="text-content-secondary">По умолчанию контролы делят ширину поровну</span>
+
+      <div class="flex">
+        <CdsSelectionControl
+          v-model="stretched"
+          value="first"
+          type="checkbox"
+          true-icon="checkbox-on"
+          false-icon="checkbox-off"
+          label="Да"
+          class="gap-x-2"
+        />
+
+        <CdsSelectionControl
+          v-model="stretched"
+          value="second"
+          type="checkbox"
+          true-icon="checkbox-on"
+          false-icon="checkbox-off"
+          label="Нет"
+          class="gap-x-2"
+        />
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <span class="text-content-secondary">С inline контрол занимает ширину своего содержимого</span>
+
+      <div class="flex gap-3">
+        <CdsSelectionControl
+          v-model="inline"
+          inline
+          value="first"
+          type="checkbox"
+          true-icon="checkbox-on"
+          false-icon="checkbox-off"
+          label="Да"
+          class="gap-x-2"
+        />
+
+        <CdsSelectionControl
+          v-model="inline"
+          inline
+          value="second"
+          type="checkbox"
+          true-icon="checkbox-on"
+          false-icon="checkbox-off"
+          label="Нет"
+          class="gap-x-2"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+## Slots
+
+Slots replace the content coming from the props and the markup of the control itself.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsLink, CdsSelectionControl, CdsTag } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const beta = ref(true);
+</script>
+
+<template>
+  <div class="m-auto flex w-[350px] flex-col gap-2">
+    <CdsSelectionControl
+      v-model="beta"
+      type="checkbox"
+      true-icon="checkbox-on"
+      false-icon="checkbox-off"
+      class="gap-x-2"
+    >
+      <template #label>
+        <span class="flex items-center gap-1">
+          Ранний доступ
+          <CdsTag text="beta" size="sm" />
+        </span>
+      </template>
+
+      <template #description> Новые возможности до общего релиза — <CdsLink href="#" text="что входит" /> </template>
+    </CdsSelectionControl>
+  </div>
+</template>
+```
+
+## A selection tile
+
+The `input` slot replaces the icon with your own markup, and the native `input` from `inputNode` stays on top of it and catches the clicks and the focus. The size of the clickable area is set by the `--cds-selection-control-width` and `--cds-selection-control-height` variables, and the state arrives in the slot through `model`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSelectionControl } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const plans = [
+  { value: 'base', title: 'Базовый', price: '0 ₽ в месяц' },
+  { value: 'pro', title: 'Профи', price: '2 900 ₽ в месяц' }
+];
+
+const plan = ref('base');
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-2">
+    <CdsSelectionControl
+      v-for="item of plans"
+      :key="item.value"
+      v-model="plan"
+      inline
+      type="radio"
+      :value="item.value"
+      :aria-label="item.title"
+      :style="{ '--cds-selection-control-width': '170px', '--cds-selection-control-height': '72px' }"
+    >
+      <template #input="{ inputNode, model }">
+        <component :is="inputNode" />
+
+        <div
+          class="flex h-full w-full flex-col justify-center rounded-200 border px-3"
+          :class="model.value ? 'border-line-selected ring-1 ring-line-selected' : 'border-line-primary'"
+        >
+          <span>{{ item.title }}</span>
+          <span class="text-content-secondary">{{ item.price }}</span>
+        </div>
+      </template>
+    </CdsSelectionControl>
+  </div>
+</template>
+```
+
+## Consent before submitting
+
+The control does not show messages — that is the job of the [CdsInput](../cds-input/api.md) wrapper. Without it, render the error text next to the control and pass `error` to it: the modifier will come in handy for your styles.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsLink, CdsSelectionControl } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const agreed = ref(false);
+const touched = ref(false);
+const sent = ref(false);
+
+function submit() {
+  touched.value = true;
+  sent.value = agreed.value;
+}
+</script>
+
+<template>
+  <div class="m-auto flex w-[350px] flex-col gap-2">
+    <CdsSelectionControl
+      v-model="agreed"
+      type="checkbox"
+      true-icon="checkbox-on"
+      false-icon="checkbox-off"
+      :error="touched && !agreed"
+      class="gap-x-2"
+    >
+      <template #label> Согласен с <CdsLink href="#" text="условиями обработки данных" /> </template>
+    </CdsSelectionControl>
+
+    <span v-if="touched && !agreed" class="text-status-danger-content">Без согласия заявку не отправить</span>
+    <span v-else-if="sent" class="text-status-success-content">Заявка отправлена</span>
+
+    <CdsButton text="Отправить заявку" class="self-start" @click="submit" />
+  </div>
+</template>
+```

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

@@ -0,0 +1,45 @@
+# CdsSelectionControlGroup — API
+
+> Generated from meta.json by `bun run generate:skill`. Do not edit manually.
+> Examples: [examples.md](examples.md)
+
+A container for a set of selection controls: it holds the shared value, hands the nested [CdsSelectionControl](../cds-selection-control/api.md) the type, the icons, the colors and the states, and ties them together with a single `name` attribute. The radio button group of the design system is built on it.
+
+## CdsSelectionControlGroup
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `activeColor` | `string \| undefined` | — | no | Color of the component in its active state |
+| `baseColor` | `string \| undefined` | — | no | Color of the component in its inactive state |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `color` | `string \| undefined` | — | no | Component color |
+| `defaultsTarget` | `string \| undefined` | — | no | Name of the child component the group prop values are passed to as defaults |
+| `direction` | `"horizontal" \| "vertical" \| undefined` | `'horizontal'` | no | Switches the component between horizontal and vertical layout. |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `error` | `boolean \| undefined` | — | no | Puts the component into the visual error state |
+| `falseIcon` | `IconValue \| undefined` | — | no | Icon of the unselected state |
+| `id` | `string \| undefined` | — | no | Unique identifier of the component |
+| `inline` | `boolean \| undefined` | — | no | Renders the control as an inline element — the container does not stretch to the full width |
+| `modelValue` | `any` | — | no | Value of the component (v-model). In a group it is the value of the selected control, with `multiple` — an array of the selected values |
+| `multiple` | `boolean \| null \| undefined` | `null` | no | Allows selecting several values — the model becomes an array. Turns on automatically when an array is passed to `modelValue` |
+| `name` | `string \| undefined` | — | no | The `name` attribute of the native input element. In a group one name joins all the nested controls |
+| `readonly` | `boolean \| null \| undefined` | `null` | no | Read-only state |
+| `textColor` | `string \| undefined` | — | no | Text color of the component |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `trueIcon` | `IconValue \| undefined` | — | no | Icon of the selected state |
+| `type` | `string \| undefined` | — | no | Type of the native input element — `radio` or `checkbox`, for example |
+| `valueComparator` | `ValueComparator \| undefined` | `true` | no | Function comparing the model value with the `value` of the control. Deep comparison by default |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `update:modelValue` | `[value: any]` | Fires when the selection inside the group changes. Passes the new value of the group |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | The controls of the group — checkboxes or radio buttons |