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

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

@@ -0,0 +1,64 @@
+# CdsTag — 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 tag is a compact label next to an object: the status of a request, a product category, a selected filter. It takes a color from the palette, carries an icon or an avatar, can be closed with a cross and can work as a link.
+
+## CdsTag
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `activeClass` | `string \| undefined` | — | no | CSS class applied to the active (selected) link tag. |
+| `activeColor` | `string \| undefined` | — | no | Color of the component in its active state |
+| `appendAvatar` | `string \| undefined` | — | no | Avatar displayed after (to the right of) the tag content. |
+| `appendIcon` | `IconValue \| undefined` | — | no | Icon displayed after (to the right of) the tag content. |
+| `closable` | `boolean \| undefined` | — | no | Adds a close button that hides the tag. |
+| `closeIcon` | `IconValue \| undefined` | `'remove'` | no | Icon of the close button. |
+| `closeLabel` | `string \| undefined` | `'$cds.close'` | no | Accessible label (aria-label) for the close button. |
+| `color` | `string \| undefined` | — | no | Component color |
+| `content` | `string \| number \| undefined` | — | no | Content displayed in the component. |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `draggable` | `boolean \| undefined` | — | no | Makes the tag draggable (native drag-and-drop). |
+| `exact` | `boolean \| undefined` | — | no | If true, the active state applies only on an exact route match |
+| `filter` | `boolean \| undefined` | — | no | Shows the selection indicator icon when the tag is used inside a group (CdsTagGroup). |
+| `filterIcon` | `IconValue \| undefined` | `'check-fill'` | no | Icon of the selection indicator (relevant together with `filter`). |
+| `href` | `string \| undefined` | — | no | The `href` attribute of the link. When set, the component behaves as a regular link |
+| `label` | `boolean \| undefined` | — | no | Applies the “label” style with a smaller corner radius. |
+| `link` | `boolean \| undefined` | — | no | Gives the tag the styles and the behavior of a link. |
+| `modelValue` | `boolean \| undefined` | `true` | no | Visibility of the tag (v-model). When `false` the tag is not rendered. |
+| `pill` | `boolean \| undefined` | — | no | Makes the corners of the tag fully rounded. |
+| `prependAvatar` | `string \| undefined` | — | no | Avatar displayed before (to the left of) the tag content. |
+| `prependIcon` | `IconValue \| undefined` | — | no | Icon displayed before (to the left of) the tag content. |
+| `removable` | `boolean \| undefined` | — | no | Adds a remove button (alias for `closable`). |
+| `replace` | `boolean \| undefined` | — | no | If true, navigation replaces the current history entry instead of pushing a new one |
+| `selectedClass` | `string \| undefined` | — | no | CSS class applied in the selected state |
+| `size` | `number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined` | `'md'` | no | Size of the component |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'span'` | no | Custom HTML tag or component to render |
+| `text` | `string \| number \| undefined` | — | no | Text displayed in the component. |
+| `textColor` | `string \| undefined` | — | no | Text color of the component |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `to` | `LinkTo \| undefined` | — | no | Target route or route location object for RouterLink. When set, the component behaves as a RouterLink |
+| `value` | `any` | — | no | Value of the component within the group |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `click` | `[e: MouseEvent \| KeyboardEvent]` | Click on the tag (with a mouse or from the keyboard). |
+| `click:close` | `[e: MouseEvent]` | Click on the close button of the tag. |
+| `group:selected` | `[value: { value: boolean; }]` | Change of the tag selection state inside a group. |
+| `update:modelValue` | `[value: boolean]` | Change of the tag visibility (v-model). |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `append` | `any` | Content after the main content (in place of the append icon/avatar). |
+| `close` | `any` | Custom content of the close button. |
+| `default` | `{ isSelected: boolean \| undefined; selectedClass: boolean \| (string \| undefined)[] \| undefined; select: ((value: boolean) => void) \| undefined; toggle: (() => void) \| undefined; value: unknown; disabled: boolean; }` | Default content of the tag. The slot props expose the group state (selection, toggling). |
+| `filter` | `any` | Custom content of the selection indicator (relevant together with `filter`). |
+| `label` | `any` | Content of the tag label. |
+| `prepend` | `any` | Content before the main content (in place of the prepend icon/avatar). |

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

@@ -0,0 +1,278 @@
+# CdsTag — 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 tag is a compact label next to an object: the status of a request, a product category, a selected filter. It takes a color from the palette, carries an icon or an avatar, can be closed with a cross and can work as a link.
+
+## Colors
+
+The `color` prop paints the tag in one of the 11 palette aliases; without it the tag stays neutral gray. The text color can be overridden with `text-color` when needed. The `disabled` prop swaps the tag colors for the service colors of the disabled state and removes the reaction to clicks.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTagConstants } from '@cds/components/CdsTag/api/CdsTag.constants';
+import { CdsTag } from '@central-design-system/components';
+
+const colors = CdsTagConstants.colors;
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-2">
+    <CdsTag v-for="color in colors" :key="color" :text="color" :color="color" />
+  </div>
+</template>
+```
+
+## Sizes
+
+The `size` prop offers five sizes from `xs` to `xl`. The default size is `md`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTagConstants } from '@cds/components/CdsTag/api/CdsTag.constants';
+import { CdsTag } from '@central-design-system/components';
+
+const sizes = CdsTagConstants.sizes;
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-center gap-2">
+    <CdsTag v-for="size in sizes" :key="size" :text="size" :size="size" />
+  </div>
+</template>
+```
+
+## Shape
+
+The `pill` prop rounds the corners completely — this shape emphasizes that the label stands on its own and looks good in a tag cloud.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTag } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex justify-center gap-2">
+    <CdsTag text="Обычный тег" />
+    <CdsTag pill text="Тег pill" />
+  </div>
+</template>
+```
+
+## Icons and avatars
+
+The `prepend-icon` and `append-icon` props add an icon before and after the text, `prepend-avatar` and `append-avatar` add a round avatar. The size of the icon and the avatar follows the size of the tag.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTag } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-center gap-2">
+    <CdsTag prepend-icon="star" text="Избранное" />
+    <CdsTag append-icon="external" text="b2b-center.ru" />
+    <CdsTag prepend-avatar="https://i.pravatar.cc/80?img=12" text="Анна Ветрова" pill />
+  </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 { CdsIcon, CdsTag } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-2">
+    <CdsTag color="green">Скидка <b>−20%</b></CdsTag>
+    <CdsTag text="Избранное">
+      <template #prepend>
+        <CdsIcon icon="star-fill" start />
+      </template>
+    </CdsTag>
+    <CdsTag text="Черновик" closable>
+      <template #close>
+        <CdsIcon icon="delete" />
+      </template>
+    </CdsTag>
+  </div>
+</template>
+```
+
+## Link tag
+
+Pass `href` (or `to` with a `RouteLocationRaw` object from vue-router) and the tag renders as an `a` tag: it gets a cursor, keyboard focus and navigation on Enter, keeping the look of a tag.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTag } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-2">
+    <CdsTag href="https://www.b2b-center.ru" target="_blank" append-icon="external" text="b2b-center.ru" />
+    <CdsTag href="#" pill text="vue" />
+    <CdsTag href="#" pill text="design-system" />
+  </div>
+</template>
+```
+
+## Closing
+
+The `closable` prop (or its alias `removable`) adds a close button. A click on it hides the tag and emits the `click:close` event, and the visibility can be controlled from the outside through `v-model`. The `close-icon` prop changes the icon of the button, `close-label` changes the accessible label.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsTag } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const visible = ref(true);
+</script>
+
+<template>
+  <div class="flex items-center justify-center gap-4">
+    <CdsTag v-model="visible" closable text="Закрываемый тег" />
+    <CdsButton v-if="!visible" appearance="secondary" size="sm" text="Вернуть тег" @click="visible = true" />
+  </div>
+</template>
+```
+
+## Selection in a group
+
+The color of the selected tag comes from `active-color`: without it the group itself paints the selection with the brand color, and `color` stays the color of the unselected tag.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTag, CdsTagGroup } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const statuses = ['Черновики', 'На проверке', 'Опубликованные'];
+const selected = ref('На проверке');
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsTagGroup v-model="selected" filter>
+      <CdsTag v-for="status in statuses" :key="status" :value="status" :text="status" />
+    </CdsTagGroup>
+
+    <span class="text-100 text-content-secondary">Выбрано: {{ selected ?? '—' }}</span>
+  </div>
+</template>
+```
+
+## Selected filters
+
+Applied search filters read well as a row of closable tags: each tag removes its own filter on `click:close`, and the neighboring `tertiary` button resets everything at once.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsTag } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const initial = ['Электроника', 'До 10 000 ₽', 'В наличии', 'Доставка завтра', 'Рейтинг 4+'];
+const filters = ref([...initial]);
+
+const remove = (filter: string) => {
+  filters.value = filters.value.filter((item) => item !== filter);
+};
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-center gap-2">
+    <CdsTag v-for="filter in filters" :key="filter" :text="filter" closable @click:close="remove(filter)" />
+    <CdsButton v-if="filters.length" appearance="tertiary" size="sm" text="Сбросить всё" @click="filters = []" />
+    <CdsButton v-else appearance="secondary" size="sm" text="Вернуть фильтры" @click="filters = [...initial]" />
+  </div>
+</template>
+```
+
+## Record statuses
+
+In lists and tables a colored tag shows the state of a record instantly. Assign colors to statuses once: `green` — success, `lemon` — pending, `red` — rejection, `neutral` — draft. The compact `size="sm"` does not compete with the text of the row.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTag } from '@central-design-system/components';
+
+const requests = [
+  { id: 4821, title: 'Закупка ноутбуков', status: 'Согласована', color: 'green' },
+  { id: 4820, title: 'Ремонт офиса', status: 'На рассмотрении', color: 'lemon' },
+  { id: 4819, title: 'Аренда склада', status: 'Отклонена', color: 'red' },
+  { id: 4818, title: 'Поставка канцелярии', status: 'Черновик', color: 'neutral' }
+];
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 w-[360px] m-auto">
+    <div v-for="request in requests" :key="request.id" class="flex items-center justify-between gap-4">
+      <span>{{ request.title }}</span>
+      <CdsTag :text="request.status" :color="request.color" size="sm" />
+    </div>
+  </div>
+</template>
+```
+
+## Adding labels
+
+An input field together with tags makes a label editor: Enter adds a new label, the cross (`closable` + `click:close`) removes an extra one. Duplicates are cut off before they get into the list.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTag, CdsTextInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const input = ref('');
+const tags = ref(['vue', 'design-system']);
+
+const add = () => {
+  const value = input.value.trim();
+
+  if (value && !tags.value.includes(value)) {
+    tags.value.push(value);
+  }
+
+  input.value = '';
+};
+
+const remove = (tag: string) => {
+  tags.value = tags.value.filter((item) => item !== tag);
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 w-[350px] m-auto">
+    <CdsTextInput v-model="input" label="Метки" placeholder="Введите метку и нажмите Enter" @keydown.enter="add" />
+    <div class="flex flex-wrap gap-2">
+      <CdsTag v-for="tag in tags" :key="tag" :text="tag" closable @click:close="remove(tag)" />
+    </div>
+  </div>
+</template>
+```

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

@@ -0,0 +1,10 @@
+# CdsTag — 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 label is one or two words: it reads at a glance and does not break the line. | A long phrase turns the label into a sentence and gets cut off on narrow screens. |
+| Tie a color to a meaning: one status — one color across the whole interface. | Random colors make people guess whether the coloring means anything at all. |
+| A tag labels an object, while the action stays with the button. | A tag named after an action looks clickable but does nothing. |

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

@@ -0,0 +1,67 @@
+# CdsTag — 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.
+
+## _CdsTag.variables.scss
+
+```scss
+@use '../../../styles/tools';
+
+$tag-max-width: 100% !default;
+$tag-white-space: nowrap !default;
+$tag-background: rgb(var(--cds-color-fill-secondary)) !default;
+$tag-color: rgb(var(--cds-color-content-primary)) !default;
+$tag-disabled-background: rgb(var(--cds-color-fill-disable)) !default;
+$tag-disabled-color: rgb(var(--cds-color-content-disable)) !default;
+$tag-border-radius: var(--cds-border-radius-300) !default;
+$tag-pill-border-radius: tools.to-rem(9999px) !default;
+
+// ======================= Sizes =======================
+// Каждый размер: высота, внутренние отступы по горизонтали, промежуток между элементами,
+// размерный токен шрифта, размер кнопки закрытия и размер аватара
+// (высота тега минус 6px; у модификатора pill аватар занимает полную высоту).
+$tag-sizes: (
+  xs: (
+    'height': tools.to-rem(16px),
+    'padding-inline': var(--cds-spacing-100),
+    'gap': var(--cds-spacing-50),
+    'font-size': '50',
+    'close-size': tools.to-rem(12px),
+    'avatar-size': tools.to-rem(10px)
+  ),
+  sm: (
+    'height': tools.to-rem(20px),
+    'padding-inline': var(--cds-spacing-100),
+    'gap': var(--cds-spacing-50),
+    'font-size': '100',
+    'close-size': tools.to-rem(14px),
+    'avatar-size': tools.to-rem(14px)
+  ),
+  md: (
+    'height': tools.to-rem(24px),
+    'padding-inline': var(--cds-spacing-200),
+    'gap': var(--cds-spacing-100),
+    'font-size': '100',
+    'close-size': tools.to-rem(16px),
+    'avatar-size': tools.to-rem(18px)
+  ),
+  lg: (
+    'height': tools.to-rem(28px),
+    'padding-inline': var(--cds-spacing-200),
+    'gap': var(--cds-spacing-100),
+    'font-size': '200',
+    'close-size': tools.to-rem(18px),
+    'avatar-size': tools.to-rem(22px)
+  ),
+  xl: (
+    'height': tools.to-rem(32px),
+    'padding-inline': var(--cds-spacing-300),
+    'gap': var(--cds-spacing-100),
+    'font-size': '200',
+    'close-size': tools.to-rem(20px),
+    'avatar-size': tools.to-rem(26px)
+  )
+) !default;
+```

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

@@ -0,0 +1,58 @@
+# CdsTagGroup — 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 tag group turns a set of [CdsTag](../cds-tag/api.md) into a toggle: the selected tag is highlighted, the value is available through `v-model`, and the tags that do not fit move into a horizontal scroll. Fits catalog filters, category pickers and quick period switches.
+
+## CdsTagGroup
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `activeColor` | `string \| undefined` | — | no | Color of the component in its active state |
+| `centerActive` | `boolean \| undefined` | — | no | Forces the active component to be aligned to the center. |
+| `color` | `string \| undefined` | — | no | Component color |
+| `column` | `boolean \| undefined` | — | no | Lays the tags out in several rows with wrapping instead of a horizontal scroll. |
+| `contentClass` | `any` | — | no | Adds classes to the slide group container |
+| `contentStyle` | `any` | — | no | Adds inline styles to the slide group container |
+| `direction` | `"horizontal" \| "vertical" \| undefined` | `'horizontal'` | no | Switches the component between horizontal and vertical layout. |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `filter` | `boolean \| undefined` | — | no | Shows a check icon on the selected tags (passed down to `CdsTag`). |
+| `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 |
+| `mobile` | `boolean \| null \| undefined` | `null` | no | Determines the display mode of the component: `true` renders it in mobile mode, `false` in desktop mode, `null` makes the mode depend on the current breakpoint. |
+| `mobileBreakpoint` | `number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined` | — | no | Sets the breakpoint at which the component switches to mobile mode. Accepts a number (for example, 600) or the name of a predefined breakpoint (`xs`, `sm`, `md`, `lg`, `xl`). |
+| `modelValue` | `any` | — | no | Value of the selected items of the group |
+| `multiple` | `boolean \| undefined` | — | no | Allows selecting several items at once |
+| `nextIcon` | `IconValue \| undefined` | `'next'` | no | Icon for the “next” button. |
+| `prevIcon` | `IconValue \| undefined` | `'prev'` | no | Icon for the “previous” button. |
+| `required` | `boolean \| "force" \| undefined` | — | no | Requires at least one item to stay selected |
+| `scrollToActive` | `boolean \| undefined` | `false` | no | When `true`, the container scrolls the active component into view whenever it changes. |
+| `selectedClass` | `string \| undefined` | `'cds-tag--selected'` | no | CSS class applied in the selected state |
+| `showArrows` | `string \| boolean \| undefined` | — | no | Changes how the arrows are shown. By default the arrows appear on desktop devices when the container overflows and stay hidden on mobile devices. `true` also shows them on mobile on overflow, `desktop` always shows them on desktop, `mobile` always on mobile, `always` on both, and `never` disables the arrows. |
+| `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` | `CdsTagGroupSlotProps` | Tags of the group. The slot props expose the group state (selection, navigation). |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `isSelected` | `(id: string) => boolean` | Check whether a tag with the given id is selected |
+| `next` | `() => void` | Select the next tag |
+| `prev` | `() => void` | Select the previous tag |
+| `select` | `(id: string, value: boolean) => void` | Select a tag by id |
+| `selected` | `readonly string[]` | Ids of the selected tags |