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

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

@@ -0,0 +1,93 @@
+# CdsCheckbox — 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 checkbox turns an independent option on and off: consent to terms, an entry in a filter list, a profile setting. Every checkbox in a group is selected on its own, which makes it right for multiple choice.
+
+## CdsCheckbox
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `activeColor` | `string \| undefined` | — | no | Color of the component in its active state |
+| `appendIcon` | `IconValue \| undefined` | — | no | Icon in the append slot, after the content |
+| `baseColor` | `string \| undefined` | — | no | Color of the component in its inactive state |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `centerAffix` | `boolean \| undefined` | `true` | no | Vertically center the appendInner, prependInner, clearIcon and label elements. |
+| `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 |
+| `errorMessages` | `string \| readonly string[] \| null \| undefined` | `[]` | no | Puts the component into the error state and passes custom error messages. They are merged with any checks defined in the `rules` prop. This field does not trigger validation. |
+| `falseIcon` | `IconValue \| undefined` | `'checkbox-off'` | no | Icon of the unselected state |
+| `falseValue` | `any` | — | no | Value for the false state. |
+| `focused` | `boolean \| undefined` | — | no | Controls the focus state of the component. When `true`, the component is considered focused and may apply the corresponding styles or behavior. |
+| `hideDetails` | `boolean \| "auto" \| undefined` | — | no | Hides the details block (messages and hints). With the 'auto' value the block is hidden when there are no messages |
+| `hideMessages` | `boolean \| undefined` | — | no | Hide the messages under the input |
+| `hint` | `string \| undefined` | — | no | Hint text shown under the input |
+| `iconColor` | `string \| boolean \| undefined` | — | no | Icon color. Accepts a boolean or a color string |
+| `id` | `string \| undefined` | — | no | Unique identifier of the component |
+| `indeterminate` | `boolean \| undefined` | — | no | Indeterminate state of the checkbox. |
+| `indeterminateIcon` | `IconValue \| undefined` | `'checkbox-indeterminate'` | no | Icon shown in the indeterminate state. |
+| `label` | `string \| undefined` | — | no | Label text of the component |
+| `maxErrors` | `string \| number \| undefined` | `1` | no | Maximum number of validation errors shown |
+| `maxWidth` | `string \| number \| undefined` | — | no | Maximum component width |
+| `messages` | `string \| readonly string[] \| undefined` | `[]` | no | Messages shown under the input |
+| `minWidth` | `string \| number \| undefined` | — | no | Minimum component 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 |
+| `persistentHint` | `boolean \| undefined` | — | no | Always show the hint, not only on focus |
+| `prependIcon` | `IconValue \| undefined` | — | no | Icon in the prepend slot, before the content |
+| `readonly` | `boolean \| null \| undefined` | `null` | no | Read-only state |
+| `rules` | `readonly ValidationRule[] \| undefined` | `[]` | no | Accepts an array of items of different types: functions, booleans and strings. Functions take the input value as an argument and must return either true / false, or a string with an error message. The input goes into the error state if a function returns false (or any value in the array is false) or is a string. |
+| `size` | `number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined` | `'md'` | no | Size of the component |
+| `textColor` | `string \| undefined` | — | no | Text color of the component |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `trueIcon` | `IconValue \| undefined` | `'checkbox-on'` | 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 |
+| `validateOn` | `ValidateOn \| undefined` | — | no | Changes the type of the event that triggers validation |
+| `validationValue` | `any` | — | no | Value used when applying the validation rules |
+| `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 |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `update:focused` | `[focused: boolean]` | Fires when the focus state of the component changes. |
+| `update:modelValue` | `[value: any]` | Fires when the model of the component changes. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `append` | `CdsInputSlot` | Adds an element after the input |
+| `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 |
+| `details` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
+| `input` | `SelectionControlSlot` | Slot for the default input element. |
+| `label` | `{ label: string \| undefined; props: Record<string, any>; }` | Default slot of the CdsLabel component |
+| `message` | `CdsMessagesSlots` | Slot for customizing the content of a message |
+| `messages` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
+| `prepend` | `CdsInputSlot` | Adds an element before the input |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `isDirty` | `boolean` | Whether the input is dirty |
+| `isDisabled` | `boolean` | Whether the input is disabled |
+| `isPure` | `boolean` | Whether the input is pure |
+| `isReadonly` | `boolean` | Whether the input is read-only |
+| `isValid` | `boolean \| null` | Whether the input is valid |
+| `isValidating` | `boolean` | Whether the input is being validated |
+| `reset` | `() => Promise<void>` | Resets the input to its initial state |
+| `resetValidation` | `() => Promise<void>` | Resets the validation of the input |
+| `validate` | `(silent?: boolean) => Promise<string[]>` | Validates the input |

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

@@ -0,0 +1,319 @@
+# CdsCheckbox — 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 checkbox turns an independent option on and off: consent to terms, an entry in a filter list, a profile setting. Every checkbox in a group is selected on its own, which makes it right for multiple choice.
+
+## Label and description
+
+The `label` prop names the option, `description` adds an explanation under the label. The slots of the same name accept arbitrary markup — a link to the terms, for example (see the "Consent in a form" scenario).
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCheckbox } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const completed = ref(true);
+const autoRenew = ref(false);
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 w-[350px] m-auto">
+    <CdsCheckbox v-model="completed" label="Показывать завершённые задачи" hide-details />
+    <CdsCheckbox
+      v-model="autoRenew"
+      label="Автоматическое продление"
+      description="Подписка продлится в день окончания текущего периода"
+      hide-details
+    />
+  </div>
+</template>
+```
+
+## States
+
+`disabled` blocks the checkbox and lowers the contrast, `readonly` forbids changes but does not change the appearance.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCheckbox } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 w-[350px] m-auto">
+    <CdsCheckbox label="Disabled" disabled hide-details />
+    <CdsCheckbox :model-value="true" label="Disabled, выбран" disabled hide-details />
+    <CdsCheckbox :model-value="true" label="Readonly" readonly hide-details />
+  </div>
+</template>
+```
+
+## Indeterminate state
+
+The `indeterminate` prop shows an intermediate state — usually on a parent checkbox when only some of the nested entries are selected. This is a visual flag: it does not change the model value, and the icon is set by `indeterminate-icon`. A live example is in the "Select all" scenario.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCheckbox } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 w-[350px] m-auto">
+    <CdsCheckbox indeterminate label="Выбрана часть вложенных пунктов" hide-details />
+    <CdsCheckbox :model-value="true" label="Выбран" hide-details />
+    <CdsCheckbox label="Не выбран" hide-details />
+  </div>
+</template>
+```
+
+## Sizes
+
+The `size` prop accepts values from `xs` to `xl`, `md` by default. The label and the description scale together with the control.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCheckbox } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 w-[350px] m-auto">
+    <CdsCheckbox :model-value="true" size="xs" label="Размер xs" hide-details />
+    <CdsCheckbox :model-value="true" size="sm" label="Размер sm" hide-details />
+    <CdsCheckbox :model-value="true" size="md" label="Размер md" hide-details />
+    <CdsCheckbox :model-value="true" size="lg" label="Размер lg" hide-details />
+    <CdsCheckbox :model-value="true" size="xl" label="Размер xl" hide-details />
+  </div>
+</template>
+```
+
+## Colors
+
+The `color` prop sets the color of a selected checkbox, `base-color` — the color of an unselected one.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCheckbox } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 w-[350px] m-auto">
+    <CdsCheckbox :model-value="true" color="green" label="Зелёный при выборе (color)" hide-details />
+    <CdsCheckbox :model-value="true" color="purple" label="Фиолетовый при выборе (color)" hide-details />
+    <CdsCheckbox base-color="purple" label="Фиолетовый до выбора (base-color)" hide-details />
+  </div>
+</template>
+```
+
+## Messages and errors
+
+`messages` shows a supporting text under the checkbox, `error-messages` — a ready error message (the one coming from the server, for example) together with the error state. Validation rules through `rules` are in the "Consent in a form" scenario.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCheckbox } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const notifications = ref(true);
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 w-[350px] m-auto">
+    <CdsCheckbox v-model="notifications" label="Уведомления о торгах" messages="Можно отключить в любой момент" />
+    <CdsCheckbox label="Передача данных партнёрам" error-messages="Для участия в торгах разрешите передачу данных" />
+  </div>
+</template>
+```
+
+## Your own values
+
+By default the model keeps `true` or `false`. The `true-value` and `false-value` props replace them with your own values — handy when the API expects strings or codes.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCheckbox } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const subscription = ref('subscribed');
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsCheckbox
+      v-model="subscription"
+      true-value="subscribed"
+      false-value="unsubscribed"
+      label="Получать рассылку"
+      hide-details
+    />
+
+    <p>Значение модели: {{ subscription }}</p>
+  </div>
+</template>
+```
+
+## A group of checkboxes
+
+To build a group, pass the same array in `v-model` to all the checkboxes and give them unique `value`s — the selected values are collected into the array. `hide-details` removes the bottom block and the rows sit right next to each other; the common heading and description of the group are set by [CdsLabel](../cds-label/api.md) and [CdsDescription](../cds-description/api.md).
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCheckbox, CdsDescription, CdsLabel } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const selected = ref(['email']);
+</script>
+
+<template>
+  <div class="w-[350px] m-auto">
+    <CdsLabel class="text-sm mb-1">Способы связи</CdsLabel>
+    <CdsDescription class="text-xs mb-2">Как связаться с вами по заявке</CdsDescription>
+    <div class="flex flex-col gap-2">
+      <CdsCheckbox v-model="selected" label="Электронная почта" hide-details value="email" />
+      <CdsCheckbox v-model="selected" label="Телефон" hide-details value="phone" />
+      <CdsCheckbox v-model="selected" label="Telegram" hide-details value="telegram" />
+    </div>
+
+    <p>Выбрано: {{ selected }}</p>
+  </div>
+</template>
+```
+
+## Select all
+
+The parent checkbox controls the group: a computed model checks and unchecks all the entries at once, and `indeterminate` turns on while only some of them are selected.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCheckbox } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const options = ['Договоры', 'Счета', 'Акты сверки'];
+const selected = ref(['Договоры']);
+
+const allSelected = computed({
+  get: () => selected.value.length === options.length,
+  set: (value) => {
+    selected.value = value ? [...options] : [];
+  }
+});
+
+const partiallySelected = computed(() => selected.value.length > 0 && selected.value.length < options.length);
+</script>
+
+<template>
+  <div class="w-[350px] m-auto">
+    <CdsCheckbox v-model="allSelected" :indeterminate="partiallySelected" label="Выбрать всё" hide-details />
+    <div class="flex flex-col gap-1 mt-1 pl-4">
+      <CdsCheckbox
+        v-for="option in options"
+        :key="option"
+        v-model="selected"
+        :value="option"
+        :label="option"
+        hide-details
+      />
+    </div>
+  </div>
+</template>
+```
+
+## Consent in a form
+
+A required consent is a rule in `rules` that returns the error text while the checkbox is unchecked. The `label` slot adds a link to the terms into the label, and the button starts the check through the `validate()` of the [CdsForm](../cds-form/api.md).
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsCheckbox, CdsForm, CdsLink } from '@central-design-system/components';
+import { ref, unref } from 'vue';
+
+const consent = ref(false);
+const sending = ref(false);
+const formRef = ref<InstanceType<typeof CdsForm>>();
+
+const rules = [(value: boolean) => !!value || 'Для регистрации примите условия сервиса'];
+
+async function submit() {
+  const form = unref(formRef);
+  if (!form) return;
+
+  const { valid } = await form.validate();
+  if (!valid) return;
+
+  sending.value = true;
+  setTimeout(() => {
+    sending.value = false;
+  }, 1500);
+}
+</script>
+
+<template>
+  <CdsForm ref="formRef" class="flex flex-col gap-2 w-[350px] m-auto">
+    <CdsCheckbox v-model="consent" :rules="rules">
+      <template #label> Принимаю <CdsLink href="#">условия сервиса</CdsLink> </template>
+    </CdsCheckbox>
+
+    <CdsButton text="Зарегистрироваться" :loading="sending" @click="submit" />
+  </CdsForm>
+</template>
+```
+
+## Filtering a list
+
+A group of checkboxes with an array in `v-model` filters the list on the fly: a computed keeps the documents of the selected types, and an empty selection means "show everything".
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCheckbox } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const documents = [
+  { name: 'Договор поставки № 14', type: 'Договор' },
+  { name: 'Счёт № 209', type: 'Счёт' },
+  { name: 'Акт сверки за июнь', type: 'Акт' },
+  { name: 'Договор аренды № 7', type: 'Договор' },
+  { name: 'Счёт № 218', type: 'Счёт' }
+];
+
+const types = ['Договор', 'Счёт', 'Акт'];
+const selectedTypes = ref<string[]>([]);
+
+const filtered = computed(() =>
+  selectedTypes.value.length ? documents.filter((document) => selectedTypes.value.includes(document.type)) : documents
+);
+</script>
+
+<template>
+  <div class="flex w-[350px] flex-col gap-2 m-auto">
+    <div class="flex flex-wrap gap-3">
+      <CdsCheckbox v-for="type in types" :key="type" v-model="selectedTypes" :value="type" :label="type" hide-details />
+    </div>
+
+    <ul class="m-0 flex list-none flex-col gap-1 p-0">
+      <li v-for="document in filtered" :key="document.name">{{ document.name }}</li>
+    </ul>
+  </div>
+</template>
+```

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

@@ -0,0 +1,10 @@
+# CdsCheckbox — 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 |
+| --- | --- |
+| Checkboxes are for independent options: each one can be turned on and off separately. | Checkboxes do not fit mutually exclusive options — use radio buttons. |
+| The label is phrased positively: a checked checkbox means the option is on. | A negation in the label makes the user guess what an unchecked box means. |
+| A short label names the option, the details go into the description. | In a long label the point of the option drowns in details. |

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

@@ -0,0 +1,18 @@
+# CdsCheckbox — 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.
+
+## _CdsCheckbox.variables.scss
+
+```scss
+// ======================= Sizes =======================
+$checkbox-label-margins: (
+  xs: 0,
+  sm: var(--cds-spacing-50),
+  md: var(--cds-spacing-50),
+  lg: var(--cds-spacing-50),
+  xl: var(--cds-spacing-100)
+) !default;
+```

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

@@ -0,0 +1,56 @@
+# CdsCheckboxButton — API
+
+> Generated from meta.json by `bun run generate:skill`. Do not edit manually.
+> Examples: [examples.md](examples.md) · Tokens: [tokens.md](tokens.md)
+
+The checkbox control without a label and a messages block — the atom [CdsCheckbox](../cds-checkbox/api.md) is built on. Use it where the caption is not needed or lives outside: in a table cell, a list row, a card.
+
+## CdsCheckboxButton
+
+**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` | `'checkbox-off'` | no | Icon of the unselected state |
+| `falseValue` | `any` | — | no | Value for the false state. |
+| `id` | `string \| undefined` | — | no | Unique identifier of the component |
+| `indeterminate` | `boolean \| undefined` | — | no | Indeterminate state of the checkbox. |
+| `indeterminateIcon` | `IconValue \| undefined` | `'checkbox-indeterminate'` | no | Icon shown in the indeterminate state. |
+| `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` | `'checkbox-on'` | 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:indeterminate` | `[value: boolean]` | Fired when the indeterminate state of the checkbox changed |
+| `update:modelValue` | `[value: boolean]` | Fired when the checkbox was toggled. Passes the new state |
+
+**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 |

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

@@ -0,0 +1,29 @@
+# CdsCheckboxButton — 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 checkbox control without a label and a messages block — the atom [CdsCheckbox](../cds-checkbox/api.md) is built on. Use it where the caption is not needed or lives outside: in a table cell, a list row, a card.
+
+## Basic example
+
+The control is driven through `v-model`, `indeterminate` shows the intermediate state, `disabled` blocks the choice. There is no visible label, so add an `aria-label` — that way the control stays clear for screen readers.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCheckboxButton } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const checked = ref(true);
+</script>
+
+<template>
+  <div class="flex justify-center items-center gap-2">
+    <CdsCheckboxButton v-model="checked" aria-label="Выбрать элемент" />
+    <CdsCheckboxButton indeterminate aria-label="Выбрана часть элементов" />
+    <CdsCheckboxButton :model-value="true" disabled aria-label="Выбор недоступен" />
+  </div>
+</template>
+```

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

@@ -0,0 +1,56 @@
+# CdsCheckboxButton — 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.
+
+## _CdsCheckboxButton.variables.scss
+
+```scss
+@use "../../../styles/tools";
+
+// Checkbox
+$checkbox-button-size: tools.to-rem(20px) !default;
+$checkbox-control-spacing: var(--cds-spacing-200) !default;
+$checkbox-button-outline: var(--cds-border-200) solid !default;
+$checkbox-button-border-radius: var(--cds-border-radius-200) !default;
+$checkbox-transition-base: (tools.$cds-duration-fast + ms) tools.get-motion('ease-in-out', 'basic') !default;
+$checkbox-transition-accent: (tools.$cds-duration-fast + ms) tools.get-motion('ease-in-out', 'accent') !default;
+
+// ======================= Sizes =======================
+$checkbox-button-sizes: (
+  xs: tools.to-rem(16px),
+  sm: tools.to-rem(18px),
+  md: tools.to-rem(20px),
+  lg: tools.to-rem(24px),
+  xl: tools.to-rem(28px)
+) !default;
+$checkbox-control-spacings: (
+  xs: var(--cds-spacing-100),
+  sm: var(--cds-spacing-100),
+  md: var(--cds-spacing-200),
+  lg: var(--cds-spacing-200),
+  xl: var(--cds-spacing-300)
+) !default;
+
+// Selection Field
+$checkbox-selection-control-size: calc(var(--cds-checkbox-button-size) + var(--cds-checkbox-control-spacing)) !default;
+
+// Colors
+$checkbox-button-colors: (
+  'unselected': (
+    default: rgb(var(--cds-color-line-primary)),
+    error: rgb(var(--cds-color-status-danger-line))
+  ),
+  'selected': (
+    default: rgb(var(--cds-color-line-selected)),
+    error: rgb(var(--cds-color-status-danger-line))
+  ),
+  'disabled': (
+    default: rgb(var(--cds-color-line-disable))
+  ),
+  'focus': (
+    default: rgb(var(--cds-color-line-focus-outline))
+  )
+) !default;
+```