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

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

@@ -0,0 +1,254 @@
+# CdsFunctionalButton — 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 functional button is a utility action next to the content: download a file in a row of a list, reveal a password in a field, collapse a block, open the menu of a record. It is a [CdsButton](../cds-button/api.md) with `size="sm"` and `appearance="tertiary"` fixed in place: the background is transparent and appears only on hover, so the button does not compete for attention with the content it stands next to.
+
+## Icon
+
+The `icon` prop sets the icon — the usual look of a functional button. Such a button has no text, so add an `aria-label`: it stays the only name of the action.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFunctionalButton } from '@central-design-system/components';
+
+const actions = [
+  { icon: 'edit', label: 'Редактировать' },
+  { icon: 'copy', label: 'Дублировать' },
+  { icon: 'download', label: 'Скачать' },
+  { icon: 'delete', label: 'Удалить' },
+  { icon: 'overflow-menu-vertical', label: 'Ещё' }
+];
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-center gap-2">
+    <CdsFunctionalButton v-for="action of actions" :key="action.icon" :icon="action.icon" :aria-label="action.label" />
+  </div>
+</template>
+```
+
+## Content
+
+The `default` slot replaces the icon with your own content — a short label for an action that an icon cannot explain, for example.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFunctionalButton } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-center gap-2">
+    <CdsFunctionalButton>Показать все</CdsFunctionalButton>
+    <CdsFunctionalButton>+3</CdsFunctionalButton>
+  </div>
+</template>
+```
+
+## States
+
+The `loading` prop shows the progress of an operation instead of the icon, `disabled` dims the button and forbids pressing it, and `readonly` keeps the button looking regular but takes it out of the focus order and blocks the click.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFunctionalButton } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-center gap-4">
+    <CdsFunctionalButton icon="save" aria-label="Сохранить" />
+    <CdsFunctionalButton icon="save" aria-label="Сохранение" loading />
+    <CdsFunctionalButton icon="save" aria-label="Сохранить" disabled />
+    <CdsFunctionalButton icon="save" aria-label="Сохранить" readonly />
+  </div>
+</template>
+```
+
+## Button as a link
+
+Pass `href` (or `to` with a `RouteLocationRaw` object from vue-router) — the button renders as an `a` tag with all the link attributes, keeping its look.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFunctionalButton } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsFunctionalButton
+      icon="external"
+      href="https://github.com"
+      target="_blank"
+      rel="noreferrer"
+      aria-label="Открыть исходный код"
+    />
+  </div>
+</template>
+```
+
+## Actions in a row of a list
+
+Download and delete are actions on a particular record, not on the screen. The buttons stand at the right edge of the row, and an `aria-label` with the name of the document tells the buttons of the neighboring rows apart.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFunctionalButton, CdsIcon } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const documents = ref([
+  { id: 1, name: 'Договор поставки № 42.pdf', size: '340 КБ' },
+  { id: 2, name: 'Спецификация.xlsx', size: '82 КБ' },
+  { id: 3, name: 'Акт сверки за март.pdf', size: '128 КБ' }
+]);
+
+const remove = (id: number) => {
+  documents.value = documents.value.filter((document) => document.id !== id);
+};
+</script>
+
+<template>
+  <div class="m-auto flex w-[360px] flex-col gap-2">
+    <div v-for="document of documents" :key="document.id" class="flex items-center gap-2">
+      <CdsIcon icon="doc" size="lg" color="content-secondary" />
+
+      <div class="flex min-w-0 flex-col">
+        <span class="truncate">{{ document.name }}</span>
+        <span class="text-100 text-content-secondary">{{ document.size }}</span>
+      </div>
+
+      <div class="ml-auto flex gap-1">
+        <CdsFunctionalButton icon="download" :aria-label="`Скачать ${document.name}`" />
+        <CdsFunctionalButton icon="delete" :aria-label="`Удалить ${document.name}`" @click="remove(document.id)" />
+      </div>
+    </div>
+
+    <span v-if="!documents.length" class="text-content-secondary">Все документы удалены</span>
+  </div>
+</template>
+```
+
+## A button inside an input
+
+In the `append-inner` and `prepend-inner` slots of the inputs a functional button fits the size of the field exactly. Here it toggles `type` between `password` and `text`, and the `aria-label` changes together with the icon.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFunctionalButton, CdsTextInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const password = ref('qwerty123');
+const visible = ref(false);
+</script>
+
+<template>
+  <CdsTextInput
+    v-model="password"
+    class="m-auto w-full max-w-md"
+    label="Пароль"
+    :type="visible ? 'text' : 'password'"
+    hint="Минимум 8 символов"
+  >
+    <template #append-inner>
+      <CdsFunctionalButton
+        :icon="visible ? 'visibility-off' : 'visibility-on'"
+        :aria-label="visible ? 'Скрыть пароль' : 'Показать пароль'"
+        @click="visible = !visible"
+      />
+    </template>
+  </CdsTextInput>
+</template>
+```
+
+## Copying a value
+
+A button next to a value copies it into the clipboard: `loading` shows the short operation, and the `check` icon confirms the result and turns back into `copy` a couple of seconds later.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFunctionalButton } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const account = '40702810900000012345';
+
+const loading = ref(false);
+const copied = ref(false);
+
+const copy = () => {
+  loading.value = true;
+
+  setTimeout(() => {
+    loading.value = false;
+    copied.value = true;
+
+    setTimeout(() => (copied.value = false), 2000);
+  }, 600);
+};
+</script>
+
+<template>
+  <div class="m-auto flex w-[320px] items-center gap-2">
+    <div class="flex min-w-0 flex-col">
+      <span class="text-100 text-content-secondary">Расчётный счёт</span>
+      <span class="truncate">{{ account }}</span>
+    </div>
+
+    <CdsFunctionalButton
+      class="ml-auto"
+      :icon="copied ? 'check' : 'copy'"
+      :loading="loading"
+      :aria-label="copied ? 'Номер скопирован' : 'Скопировать номер счёта'"
+      @click="copy"
+    />
+  </div>
+</template>
+```
+
+## Collapsing a block
+
+A chevron expands and collapses a section: the icon changes together with the state, and `aria-expanded` reports it to the screen reader.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFunctionalButton } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const expanded = ref(true);
+</script>
+
+<template>
+  <div class="m-auto flex w-[360px] flex-col gap-2">
+    <div class="flex items-center gap-2">
+      <span class="font-bold">Условия оплаты</span>
+
+      <CdsFunctionalButton
+        class="ml-auto"
+        :icon="expanded ? 'chevron-up' : 'chevron-down'"
+        :aria-expanded="expanded"
+        :aria-label="expanded ? 'Свернуть условия оплаты' : 'Развернуть условия оплаты'"
+        @click="expanded = !expanded"
+      />
+    </div>
+
+    <p v-if="expanded" class="text-content-secondary">
+      Оплата в течение 15 рабочих дней после подписания акта. Аванс — 30% от суммы договора.
+    </p>
+  </div>
+</template>
+```

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

@@ -0,0 +1,10 @@
+# CdsFunctionalButton — 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 |
+| --- | --- |
+| The primary action of the screen is a regular button: it is visible and hard to miss. | A functional button blends into the text and does not read as the primary action. |
+| Два-три частых действия рядом, остальные — под кнопкой «Ещё». | A row of identical icons takes long to read, and the right one has to be found by trial. |
+| A button without text has an aria-label — the screen reader names the action. | Без подписи кнопка звучит как «кнопка», а редкое действие не угадать и по иконке. |

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

@@ -0,0 +1,35 @@
+# CdsFunctionalButton — 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.
+
+## _CdsFunctionalButton.variables.scss
+
+```scss
+$cds-functional-button-colors: (
+  default: (
+    'background': transparent,
+    'border': transparent,
+    'content': rgb(var(--cds-color-content-primary)),
+  ),
+  hover: (
+    'background': rgb(var(--cds-color-fill-primary-hover)),
+    'border': transparent,
+    'content': rgb(var(--cds-color-content-primary)),
+  ),
+  active: (
+    'background': rgb(var(--cds-color-fill-primary-active)),
+    'border': transparent,
+    'content': rgb(var(--cds-color-content-primary)),
+  ),
+  disabled: (
+    'background': transparent,
+    'border': transparent,
+    'content': rgb(var(--cds-color-content-disable)),
+  ),
+  focus: (
+    'outline': rgb(var(--cds-color-line-focus-outline))
+  ),
+)
+```

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

@@ -0,0 +1,66 @@
+# CdsGrid — API
+
+> Generated from meta.json by `bun run generate:skill`. Do not edit manually.
+> Examples: [examples.md](examples.md) · Guidelines: [guidelines.md](guidelines.md)
+
+A responsive modular grid: `CdsGrid`, `CdsRow` and `CdsCol` lay the content out in columns — from 4 on a phone to 16 on wide screens. The grid works in two modes — Flexbox (the default) and CSS Grid — and the whole markup is also available as ready-made CSS classes, without a single component.
+
+Family: [CdsGrid](#cdsgrid) + subcomponents: [CdsCol](#cdscol), [CdsRow](#cdsrow).
+
+## CdsGrid
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `condensed` | `boolean \| undefined` | — | no | Condensed grid. The gap is reduced to 1px on both sides |
+| `narrow` | `boolean \| undefined` | — | no | Narrow grid |
+| `subgrid` | `boolean \| undefined` | — | no | Only CSS Grid supported. A nested grid |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+| `wide` | `boolean \| undefined` | — | no | Removes the default max-width and stretches the grid across the whole width of the container |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Rows of the grid — `CdsRow` |
+
+---
+
+## CdsCol
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `lg` | `ColumnBreakpoint<ColumnGridBreakpoint \| ColumnFlexBreakpoint>` | — | no | >1312px |
+| `md` | `ColumnBreakpoint<ColumnGridBreakpoint \| ColumnFlexBreakpoint>` | — | no | >1056px |
+| `sm` | `ColumnBreakpoint<ColumnGridBreakpoint \| ColumnFlexBreakpoint>` | — | no | >672px |
+| `span` | `string \| number \| ColumnSpanType \| undefined` | — | no | Only CSS Grid supported. A permanent column range, start or end values that never change. |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+| `xl` | `ColumnBreakpoint<ColumnGridBreakpoint \| ColumnFlexBreakpoint>` | — | no | >1584px |
+| `xs` | `ColumnBreakpoint<ColumnGridBreakpoint \| ColumnFlexBreakpoint>` | — | no | >320px |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Content of the column |
+
+---
+
+## CdsRow
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `condensed` | `boolean \| undefined` | — | no | Condensed grid. The gap is reduced to 1px on both sides |
+| `narrow` | `boolean \| undefined` | — | no | Narrow grid |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Columns of the row — `CdsCol` |