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

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

@@ -0,0 +1,158 @@
+# CdsCombobox — 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 combobox is a field with a dropdown list and free input: the value can be picked from the offered ones or typed in — the text itself becomes the value. The field is built on [CdsTextInput](../cds-text-input/api.md), and the menu and the list are the same as in [CdsSelect](../cds-select/api.md), so the label, the messages, validation and the menu behave identically.
+
+## CdsCombobox
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `active` | `boolean \| undefined` | — | no | Active state of the field |
+| `activeColor` | `string \| undefined` | — | no | Color of the component in its active state |
+| `alwaysFilter` | `boolean \| undefined` | — | no | Filters the list even when the search query has not changed since the last selection. |
+| `appendIcon` | `IconValue \| undefined` | — | no | Icon in the append slot, after the content |
+| `appendInnerIcon` | `IconValue \| undefined` | — | no | Icon in the inner append slot, after the content of the field |
+| `autocomplete` | `string \| undefined` | `'off'` | no | Helps to influence browser suggestions. The `suppress` value changes the name attribute of the fields, and `off` relies on the browser to stop suggesting values on its own. Any other value is passed to the built-in autocomplete of the corresponding element. |
+| `autofocus` | `boolean \| undefined` | — | no | Enables autofocus |
+| `autoSelectFirst` | `boolean \| "exact" \| undefined` | — | no | Highlights the first matching item as you type; Enter or Tab select it. The `exact` value highlights it only on a full match of the search query with the item title. |
+| `baseColor` | `string \| undefined` | — | no | Color of the component in its inactive state |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `centerAffix` | `boolean \| undefined` | — | no | Vertically center the appendInner, prependInner, clearIcon and label elements. |
+| `chips` | `boolean \| undefined` | — | no | Shows the selected values as removable chips (CdsTag). |
+| `clearable` | `boolean \| undefined` | — | no | Shows the clear button |
+| `clearIcon` | `IconValue \| undefined` | `'remove'` | no | Icon of the clear button |
+| `clearOnSelect` | `boolean \| undefined` | `true` | no | Clears the search query after an item is selected (relevant for `multiple`). |
+| `closableChips` | `boolean \| undefined` | — | no | Adds a remove button to the chips (relevant together with `chips`). |
+| `closeText` | `string \| undefined` | `'$cds.close'` | no | Text for screen readers describing the close action of the menu. |
+| `color` | `string \| undefined` | — | no | Component color |
+| `counter` | `string \| number \| boolean \| undefined` | — | no | Character counter. Accepts a boolean, a number or a string |
+| `counterValue` | `number \| ((value: any) => number) \| undefined` | — | no | Custom counter value. Either a number or a function computing it from the current value |
+| `customFilter` | `FilterFunction \| undefined` | — | no | Your own value filtering function. Receives the value, the search query and the item, returns a match or `-1` |
+| `customKeyFilter` | `FilterKeyFunctions \| undefined` | — | no | Separate filtering functions for specific item keys — an object of the form `{ key: function }` |
+| `delimiters` | `readonly string[] \| undefined` | — | no | Delimiter characters: typing or pasting a string containing them splits it into several values (for `multiple` only). |
+| `description` | `string \| undefined` | — | no | Description of the component, shown under the label |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `eager` | `boolean \| undefined` | — | no | Renders the menu content upfront, without waiting for the first opening. |
+| `ellipsis` | `boolean \| undefined` | — | no | In multiple mode keeps the selected values on a single line with an ellipsis |
+| `error` | `boolean \| undefined` | — | no | 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. |
+| `filterKeys` | `FilterKeys \| undefined` | `['title']` | no | Item keys the search runs over. By default filtering goes by the item title |
+| `filterMode` | `FilterMode \| undefined` | `'intersection'` | no | How the results of `customKeyFilter` and of the general filtering are combined: by intersection, by union or by replacement |
+| `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 |
+| `hideNoData` | `boolean \| undefined` | `true` | no | Hides the menu and the "no data" placeholder when the item list is empty. |
+| `hideSelected` | `boolean \| undefined` | — | no | Hides the already selected items from the menu list. |
+| `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 |
+| `isSelectAll` | `string \| boolean \| undefined` | `false` | no | Adds a "select all" entry as the first item of the list (for `multiple` only). `true` uses the default `$cds.selectAll` caption, a string sets your own caption. |
+| `itemChildren` | `SelectItemKey` | `false` | no | Object field that holds the child items, or a function that returns them |
+| `itemColor` | `string \| undefined` | — | no | Color of the selected items in the menu list. `color` is used by default. |
+| `itemProps` | `SelectItemKey` | `'props'` | no | Object field that holds the props of the item, or a function that returns them |
+| `items` | `any[] \| undefined` | `[]` | no | Array of items to display |
+| `itemTitle` | `SelectItemKey` | `'title'` | no | Object field used as the item title, or a function that returns it |
+| `itemType` | `SelectItemKey` | `'type'` | no | Object field that defines the item type (`item`, `divider`, `subheader`), or a function that returns it |
+| `itemValue` | `SelectItemKey` | `'value'` | no | Object field used as the item value, or a function that returns it |
+| `label` | `string \| undefined` | — | no | Label text of the component |
+| `listProps` | `CdsListProps \| undefined` | — | no | Props passed through to the inner CdsList component. |
+| `loading` | `string \| boolean \| undefined` | — | no | Loading indicator for the component |
+| `maxErrors` | `string \| number \| undefined` | `1` | no | Maximum number of validation errors shown |
+| `maxWidth` | `string \| number \| undefined` | — | no | Maximum component width |
+| `menu` | `boolean \| undefined` | — | no | Controls the open state of the dropdown menu (v-model:menu). |
+| `menuHeight` | `string \| number \| undefined` | `178` | no | Maximum height of the dropdown menu. |
+| `menuIcon` | `IconValue \| undefined` | `'chevron-down'` | no | Icon indicating that the menu can be expanded. |
+| `menuProps` | `CdsMenuProps \| undefined` | — | no | Props passed through to the inner CdsMenu component. |
+| `messages` | `string \| readonly string[] \| undefined` | `[]` | no | Messages shown under the input |
+| `minWidth` | `string \| number \| undefined` | — | no | Minimum component width |
+| `modelModifiers` | `Record<string, boolean> \| undefined` | — | no | v-model modifiers passed by Vue to process the field value |
+| `modelValue` | `any` | `null` | no | Value of the component in v-model. If the component supports the multiple prop, an empty array is used by default. |
+| `multiple` | `boolean \| undefined` | — | no | Allows selecting several values. The selected items are shown as chips or as a list. |
+| `name` | `string \| undefined` | — | no | Name of the input |
+| `noDataText` | `string \| undefined` | `'$cds.noDataText'` | no | Text shown in the menu when the item list is empty. |
+| `noFilter` | `boolean \| undefined` | — | no | Turns off the built-in filtering — the list is shown as is, the search is handled outside |
+| `openOnClear` | `boolean \| undefined` | — | no | Opens the menu after the value is cleared. |
+| `openText` | `string \| undefined` | `'$cds.open'` | no | Text for screen readers describing the open action of the menu. |
+| `persistentClearable` | `boolean \| undefined` | — | no | Always show the clear button, not only on hover or focus |
+| `persistentCounter` | `boolean \| undefined` | — | no | Always show the counter, not only while the field is in use |
+| `persistentHint` | `boolean \| undefined` | — | no | Always show the hint, not only on focus |
+| `persistentPlaceholder` | `boolean \| undefined` | — | no | Always show the placeholder instead of hiding it while the field is in use |
+| `placeholder` | `string \| undefined` | — | no | Placeholder text shown in an empty field |
+| `prefix` | `string \| undefined` | — | no | Text prefix shown before the field value |
+| `prependIcon` | `IconValue \| undefined` | — | no | Icon in the prepend slot, before the content |
+| `prependInnerIcon` | `IconValue \| undefined` | — | no | Icon in the inner prepend slot, before the content of the field |
+| `readonly` | `boolean \| null \| undefined` | `null` | no | Read-only state |
+| `returnObject` | `boolean \| undefined` | `true` | no | Return an object in the model value instead of an array |
+| `reverse` | `boolean \| undefined` | — | no | Reverses the order of the elements inside the field |
+| `role` | `string \| undefined` | `'combobox'` | no | ARIA role for the native input element |
+| `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 |
+| `suffix` | `string \| undefined` | — | no | Text suffix shown after the field value |
+| `textColor` | `string \| undefined` | — | no | Text color of the component |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `transition` | `string \| boolean \| (TransitionProps & { component?: Component \| undefined; }) \| { component: Component; } \| null \| undefined` | `{ component: CdsModalTransition }` | no | Transition animation |
+| `type` | `string \| undefined` | `'text'` | no | Type of the native input |
+| `validateOn` | `ValidateOn \| undefined` | — | no | Changes the type of the event that triggers validation |
+| `valueComparator` | `ValueComparator \| undefined` | — | no | Function that compares item values to determine the selected state |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `update:focused` | `[focused: boolean]` | The focus state of the component changed (v-model:focused). |
+| `update:menu` | `[value: boolean]` | The open state of the dropdown menu changed (v-model:menu). |
+| `update:modelValue` | `[value: any]` | The selected value changed (v-model). |
+| `update:search` | `[value: string]` | The search query changed. |
+| `update:selectedAll` | `[value: boolean]` | The "all selected" state changed (for `multiple` + `isSelectAll` only). |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `append` | `CdsInputSlot` | Adds an element after the input |
+| `append-inner` | `CdsInputDefaultSlot` | Slot added at the end of the input |
+| `append-item` | `any` | Content after the item list in the menu. |
+| `chip` | `{ item: any; internalItem: ListItem<any>; index: number; props: Record<string, unknown>; }` | Custom rendering of the chip of a selected value (relevant together with `chips`). |
+| `clear` | `CdsInputDefaultSlot & { props: Record<string, any>; }` | Slot for a custom clear icon (shown when the clearable prop is true). |
+| `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 |
+| `divider` | `{ props: Record<string, unknown>; index: number; }` | Custom rendering of a divider in the menu list. |
+| `item` | `{ item: any; internalItem: ListItem<any>; index: number; props: Record<string, unknown>; }` | Custom rendering of an item of the menu list. |
+| `label` | `{ label: string \| undefined; props: Record<string, any>; }` | Default slot of the CdsLabel component |
+| `loader` | `LoaderSlotProps` | Slot for a custom loader (shown when the loading prop is true). |
+| `menu-footer` | `{ search: Ref<string \| undefined, string \| undefined>; filteredItems: ListItem<any>[]; }` | Content of the menu footer. Receives the current search query and the filtered items. |
+| `menu-header` | `{ search: Ref<string \| undefined, string \| undefined>; filteredItems: ListItem<any>[]; }` | Content of the menu header. Receives the current search query and the filtered items. |
+| `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 |
+| `no-data` | `any` | Content shown in the menu when the item list is empty. |
+| `prepend` | `CdsInputSlot` | Adds an element before the input |
+| `prepend-inner` | `CdsInputDefaultSlot` | Slot added at the start of the input |
+| `prepend-item` | `any` | Content before the item list in the menu. |
+| `selection` | `{ item: any; internalItem: ListItem<any>; index: number; }` | Custom rendering of the selected value inside the field. |
+| `subheader` | `{ props: Record<string, unknown>; index: number; }` | Custom rendering of a group subheader in the menu list. |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `controlRef` | `HTMLElement \| undefined` | Ref to the control of the input |
+| `fieldIconColor` | `string \| undefined` | Icon color |
+| `filteredItems` | `ListItem<any>[]` | Items filtered by the current search query. |
+| `isDirty` | `boolean` | Whether the input is dirty |
+| `isDisabled` | `boolean` | Whether the input is disabled |
+| `isFocused` | `boolean` | Whether the component is focused. |
+| `isPure` | `boolean` | Whether the search query has not changed since the last selection. |
+| `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 |
+| `search` | `string` | Current value of the search query. |
+| `selectAll` | `() => void` | Toggle the selection of all available items (for `multiple` + `isSelectAll` only). |
+| `selectionIndex` | `number` | Index of the selected value highlighted by the arrow keys during navigation. |
+| `validate` | `(silent?: boolean) => Promise<string[]>` | Validates the input |

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

@@ -0,0 +1,264 @@
+# CdsCombobox — 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 combobox is a field with a dropdown list and free input: the value can be picked from the offered ones or typed in — the text itself becomes the value. The field is built on [CdsTextInput](../cds-text-input/api.md), and the menu and the list are the same as in [CdsSelect](../cds-select/api.md), so the label, the messages, validation and the menu behave identically.
+
+## List items
+
+The list is set by the `items` prop — an array of strings or of objects with the same interface as in [CdsList](../cds-list/api.md). The input filters the list but does not have to match an item: the typed text goes into the model right away — there is no need to press Enter or to pick an item.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCombobox } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const items = ['Git', 'GraphQL', 'Node.js', 'Python', 'TypeScript', 'Vue'];
+
+const selected = ref(null);
+</script>
+
+<template>
+  <div class="w-[350px] m-auto">
+    <CdsCombobox
+      v-model="selected"
+      :items="items"
+      label="Ключевой навык"
+      placeholder="Выберите или введите свой"
+      description="Введённый текст сам становится значением"
+    />
+  </div>
+</template>
+```
+
+## Multiple selection and chips
+
+The `multiple` prop allows selecting several values, `chips` shows them as [CdsTag](../cds-tag/api.md) tags, and `closable-chips` adds a cross — the value is removed right in the field. Your own value is added with the Enter key — like "Медиация" in the example, which is not in the list. The search query is cleared automatically after every selection (`clear-on-select` is on by default).
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCombobox } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const items = ref([
+  'C#',
+  'CSS',
+  'Docker',
+  'Figma',
+  'Git',
+  'GraphQL',
+  'HTML',
+  'Java',
+  'JavaScript',
+  'Kotlin',
+  'Node.js',
+  'PHP',
+  'Python',
+  'Rust',
+  'SQL',
+  'Swift',
+  'TypeScript',
+  'Vue'
+]);
+
+const selected = ref(['TypeScript', 'Медиация']);
+</script>
+
+<template>
+  <CdsCombobox
+    v-model="selected"
+    class="w-[350px] m-auto"
+    multiple
+    chips
+    closable-chips
+    :items="items"
+    label="Навыки"
+    placeholder="Введите значение и нажмите Enter"
+  />
+</template>
+```
+
+## Delimiters
+
+The `delimiters` prop sets the delimiter characters: typing or pasting a string containing them splits it into separate values. It works together with `multiple` only; a line break is always a delimiter, so a multiline list from the clipboard turns into a set of values even without any configuration.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCombobox } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const items = ['аналитика', 'дизайн', 'разработка', 'тестирование'];
+
+const selected = ref(['дизайн']);
+</script>
+
+<template>
+  <CdsCombobox
+    v-model="selected"
+    class="w-[350px] m-auto"
+    multiple
+    chips
+    closable-chips
+    :delimiters="[',', ';']"
+    :items="items"
+    label="Ключевые слова"
+    placeholder="Несколько значений — через запятую"
+    description="Вставьте список из буфера — он разобьётся на отдельные значения"
+  />
+</template>
+```
+
+## Recipients of a letter
+
+The combination of `multiple`, `chips` and `closable-chips` collects the recipients as tags, and `delimiters` splits a pasted list of addresses by commas and semicolons. `filter-keys` searches both by email and by name, `hide-selected` removes the already added ones from the list, and the `item` slot shows the avatar and the address. An address that is not in the reference book becomes a chip as is — external participants can be invited without being written into the contacts first.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsAvatar, CdsCombobox, CdsListItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const people = [
+  { name: 'Анна Смирнова', email: 'a.smirnova@example.com', image: 'https://i.pravatar.cc/80?img=47' },
+  { name: 'Дмитрий Орлов', email: 'd.orlov@example.com', image: 'https://i.pravatar.cc/80?img=12' },
+  { name: 'Елена Васильева', email: 'e.vasileva@example.com', image: 'https://i.pravatar.cc/80?img=44' },
+  { name: 'Игорь Крылов', email: 'i.krylov@example.com', image: 'https://i.pravatar.cc/80?img=32' },
+  { name: 'Мария Соколова', email: 'm.sokolova@example.com', image: 'https://i.pravatar.cc/80?img=26' },
+  { name: 'Павел Зайцев', email: 'p.zaycev@example.com', image: 'https://i.pravatar.cc/80?img=59' }
+];
+
+const selected = ref(['a.smirnova@example.com']);
+</script>
+
+<template>
+  <div class="w-[350px] m-auto">
+    <CdsCombobox
+      v-model="selected"
+      multiple
+      chips
+      closable-chips
+      hide-selected
+      :items="people"
+      item-title="email"
+      item-value="email"
+      :return-object="false"
+      :filter-keys="['title', 'raw.name']"
+      :delimiters="[',', ';']"
+      label="Получатели"
+      placeholder="Почта или имя коллеги"
+    >
+      <template #item="{ item, props }">
+        <CdsListItem v-bind="props" :title="item.name">
+          <template #prepend>
+            <CdsAvatar :image="item.image" size="sm" class="mr-3" />
+          </template>
+          <template #description>{{ item.email }}</template>
+        </CdsListItem>
+      </template>
+    </CdsCombobox>
+  </div>
+</template>
+```
+
+## Growing the reference book
+
+The combobox extends the reference book gently: the user picks the usual values from the list and types the rare ones. The `@update:focused` handler adds the new value to `items` when the field is left — next time it will be found by search. Enter your own unit of measurement and click outside the field — the counter in the hint will grow.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCombobox } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const items = ref(['Килограмм', 'Литр', 'Метр', 'Упаковка', 'Штука']);
+
+const selected = ref('Штука');
+
+const messages = computed(() => `В справочнике ${items.value.length} единиц`);
+
+function onFocused(focused: boolean) {
+  if (focused) return;
+
+  const value = selected.value?.trim();
+  if (value && !items.value.includes(value)) {
+    items.value = [...items.value, value].sort((a, b) => a.localeCompare(b));
+  }
+}
+</script>
+
+<template>
+  <div class="w-[350px] m-auto">
+    <CdsCombobox
+      v-model="selected"
+      :items="items"
+      :messages="messages"
+      label="Единица измерения"
+      placeholder="Выберите или введите свою"
+      @update:focused="onFocused"
+    />
+  </div>
+</template>
+```
+
+## Submitting a form
+
+The combobox takes part in [CdsForm](../cds-form/api.md) validation on a par with text fields: `rules` will not let the form through without a job title. Unlike in the autocomplete, it is exactly the typed text that is checked — the value goes into the model right away, picking a list item is not required.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsCombobox, CdsForm, CdsTextInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const positions = ['Аналитик', 'Дизайнер', 'Инженер', 'Менеджер проектов', 'Разработчик', 'Тестировщик'];
+
+const valid = ref(false);
+const position = ref(null);
+const department = ref('');
+const loading = ref(false);
+const sent = ref(false);
+
+const rules = [(value: string) => !!value || 'Укажите должность'];
+
+async function submit() {
+  if (!valid.value) return;
+
+  try {
+    loading.value = true;
+    sent.value = false;
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+    sent.value = true;
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <CdsForm v-model="valid" class="flex flex-col gap-2 w-[350px] m-auto" @submit.prevent="submit">
+    <CdsCombobox
+      v-model="position"
+      :items="positions"
+      :rules="rules"
+      label="Должность"
+      placeholder="Выберите или введите свою"
+    />
+
+    <CdsTextInput v-model="department" label="Отдел" placeholder="Отдел разработки" />
+
+    <CdsButton type="submit" :loading="loading" text="Создать вакансию" />
+
+    <p v-if="sent" class="text-sm text-center">Вакансия создана</p>
+  </CdsForm>
+</template>
+```

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

@@ -0,0 +1,10 @@
+# CdsCombobox — 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 combobox fits when custom values are allowed: labels, keywords, units of measurement. | A strict reference book does not tolerate free input: typos create duplicates. Take CdsAutocomplete. |
+| Tell the user that the field accepts custom values and how to add them. | A “Pick from the list” placeholder hides the main skill of a combobox — free input. |
+| Chips with a cross show the collected values and let any of them be removed in one click. | Without chips the values merge into one string, and only the last one can be removed — with the Backspace key. |

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

@@ -0,0 +1,19 @@
+# CdsCombobox — 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.
+
+## _CdsCombobox.variables.scss
+
+```scss
+@use '../../../styles/settings';
+
+$combobox-content-border-radius: var(--cds-border-radius-200) !default;
+$combobox-content-padding-inline: var(--cds-spacing-100) !default;
+$combobox-focused-input-min-width: 64px !default;
+$combobox-mask-background: rgb(var(--cds-color-content-placeholder)) !default;
+$combobox-selection-inline-gap: var(--cds-spacing-50) !default;
+$combobox-unselected-opacity: var(--cds-medium-emphasis-opacity) !default;
+$combobox-transition: .2s settings.$standard-easing !default;
+```

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

@@ -0,0 +1,24 @@
+# CdsCounter — 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 counter shows how many characters are already typed and how many are allowed: `42 / 100`. When the value exceeds the maximum, the counter turns red — the user sees the problem before submitting the form.
+
+## CdsCounter
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `active` | `boolean \| undefined` | — | no | Active state |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `max` | `string \| number \| undefined` | — | no | Maximum value |
+| `transition` | `string \| boolean \| (TransitionProps & { component?: Component \| undefined; }) \| { component: Component; } \| null \| undefined` | `{ component: slide-transition-y }` | no | Transition animation |
+| `value` | `string \| number \| undefined` | `0` | no | Value of the counter |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `CdsCounterSlot` | Your own look for the counter. The slot props carry the ready counter string, the current and the maximum number of characters |

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

@@ -0,0 +1,93 @@
+# CdsCounter — 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 counter shows how many characters are already typed and how many are allowed: `42 / 100`. When the value exceeds the maximum, the counter turns red — the user sees the problem before submitting the form.
+
+## Value and maximum
+
+The `value` prop sets the current number, `max` sets the limit. Without `max` the counter shows a single number, with `max` it shows a fraction. As soon as `value` is greater than `max`, the text turns red.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCounter } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-center gap-4">
+    <CdsCounter active value="42" />
+    <CdsCounter active value="42" max="100" />
+    <CdsCounter active value="120" max="100" />
+  </div>
+</template>
+```
+
+## Appearance
+
+The counter is visible only with `active` — by default it is hidden. Showing and hiding are animated, and the animation is set by the `transition` prop.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsCounter } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const active = ref(true);
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsCounter :active="active" value="42" max="100" />
+
+    <CdsButton size="sm" appearance="secondary" text="Показать / скрыть" @click="active = !active" />
+  </div>
+</template>
+```
+
+## Slot
+
+The `default` slot replaces the text of the counter and receives `value`, `max` and the ready `counter` string.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCounter } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsCounter v-slot="{ value, max }" active value="42" max="100">
+      Осталось {{ Number(max) - Number(value) }} символов
+    </CdsCounter>
+  </div>
+</template>
+```
+
+## Character limit of a field
+
+The `details` slot of an input is the place for a counter next to the messages. Count the length of the value yourself and pass it into `value`: when the text outgrows the limit, the counter turns red.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCounter, CdsTextInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const max = 40;
+const title = ref('Поставка канцелярских товаров');
+</script>
+
+<template>
+  <CdsTextInput v-model="title" label="Название закупки" placeholder="Введите название" class="w-[350px] m-auto">
+    <template #details>
+      <CdsCounter active :value="title.length" :max="max" />
+    </template>
+  </CdsTextInput>
+</template>
+```

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

@@ -0,0 +1,11 @@
+# CdsCounter — 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.
+
+## _CdsCounter.variables.scss
+
+```scss
+$counter-transition-duration: 150ms !default;
+```