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

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

@@ -0,0 +1,29 @@
+# CdsDivider — 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 divider is a thin line between the meaningful parts of an interface: the sections of a form, the rows of a list, the blocks of a card. It does nothing and asks for no attention, it only shows the border where the paddings are no longer enough. A short caption can go into its slot — "or" between two ways of doing something, for example.
+
+## CdsDivider
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `color` | `string \| undefined` | — | no | Color of the divider. |
+| `contentOffset` | `string \| number \| (string \| number)[] \| undefined` | — | no | Increases the spacing between the content and the lines. When passed as an array, the second value shifts the slot content down (or right when vertical = true). |
+| `gradient` | `boolean \| undefined` | — | no | Adds a fade-out effect on both ends. |
+| `inset` | `boolean \| undefined` | — | no | Adds an indent to horizontal dividers and reduces the maximum height of vertical ones. |
+| `length` | `string \| number \| undefined` | — | no | Length of the divider. Defaults to pixels. |
+| `opacity` | `string \| number \| undefined` | — | no | Opacity of the divider. |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `thickness` | `string \| number \| undefined` | — | no | Thickness of the divider. Defaults to pixels. |
+| `variant` | `"dotted" \| "dashed" \| "solid" \| "double" \| undefined` | `'solid'` | no | Visual variant of the divider |
+| `vertical` | `boolean \| undefined` | — | no | Renders the divider vertically |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Text or content placed in the gap of the divider |

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

@@ -0,0 +1,374 @@
+# CdsDivider — 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 divider is a thin line between the meaningful parts of an interface: the sections of a form, the rows of a list, the blocks of a card. It does nothing and asks for no attention, it only shows the border where the paddings are no longer enough. A short caption can go into its slot — "or" between two ways of doing something, for example.
+
+## Appearance
+
+The `variant` prop sets the style of the line: `solid` by default, while `dashed`, `dotted` and `double` mark the border as temporary or technical.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDivider } from '@central-design-system/components';
+
+const { variants } = CdsDivider.constants;
+</script>
+
+<template>
+  <div class="m-auto flex w-[320px] flex-col gap-3">
+    <div v-for="variant of variants" :key="variant" class="flex flex-col gap-1">
+      <span class="text-100 text-content-secondary">{{ variant }}</span>
+      <CdsDivider :variant="variant" :thickness="variant === 'double' ? 3 : undefined" />
+    </div>
+  </div>
+</template>
+```
+
+## Thickness and length
+
+The `thickness` prop sets the thickness of the line in pixels, `length` sets its length. Without `length` the divider takes the whole width of its parent (or its whole height when the divider is vertical).
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDivider } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="m-auto flex w-[320px] flex-col gap-3">
+    <CdsDivider />
+    <CdsDivider :thickness="2" />
+    <CdsDivider :thickness="4" />
+  </div>
+</template>
+```
+
+## Thickness and length
+
+Свойство `length` задаёт длину линии. Без него разделитель занимает всю ширину родителя.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDivider } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="m-auto flex w-[320px] flex-col items-center gap-3">
+    <CdsDivider length="80" />
+    <CdsDivider length="180" />
+    <CdsDivider length="100%" />
+  </div>
+</template>
+```
+
+## Color and opacity
+
+The `color` prop accepts a color alias (`green`, `red`, `purple`) or a design system token, `opacity` accepts a value from 0 to 1. Color is appropriate when the line carries meaning: the border of an overdue period, a gap in the history of events.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDivider } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="m-auto flex w-[320px] flex-col gap-3">
+    <div class="flex flex-col gap-1">
+      <span class="text-100 text-content-secondary">По умолчанию</span>
+      <CdsDivider :thickness="2" />
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <span class="text-100 text-content-secondary">color="green"</span>
+      <CdsDivider color="green" :thickness="2" />
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <span class="text-100 text-content-secondary">color="brand-primary"</span>
+      <CdsDivider color="brand-primary" :thickness="2" />
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <span class="text-100 text-content-secondary">opacity="0.3"</span>
+      <CdsDivider :thickness="2" opacity="0.3" />
+    </div>
+  </div>
+</template>
+```
+
+## Inset
+
+The `inset` prop shifts a horizontal divider 72 px from the start of the row — so the line starts under the text rather than under the icon or the avatar. On a vertical divider `inset` shortens the line from the top and the bottom.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDivider } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="m-auto flex w-[320px] flex-col gap-4">
+    <div class="flex flex-col gap-3">
+      <span class="text-100 text-content-secondary">Горизонтальный: отступ слева</span>
+      <CdsDivider />
+      <CdsDivider inset />
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <span class="text-100 text-content-secondary">Вертикальный: линия короче</span>
+      <div class="flex h-[64px] justify-center gap-4">
+        <CdsDivider vertical />
+        <CdsDivider vertical inset />
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+## Fading
+
+The `gradient` prop dissolves the line towards its edges. Such a divider is softer than the regular one and looks good inside dense blocks where a sharp border would read as a frame.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDivider } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="m-auto flex w-[320px] flex-col gap-4">
+    <CdsDivider gradient :thickness="2" />
+
+    <div class="flex h-[96px] justify-center">
+      <CdsDivider gradient vertical :thickness="2" />
+    </div>
+  </div>
+</template>
+```
+
+## Orientation
+
+The `vertical` prop turns the divider. A vertical line stretches to the height of its neighbors, so its parent needs a height — usually a `display: flex` row.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDivider } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="m-auto flex h-[56px] items-center justify-center gap-4">
+    <div class="flex flex-col gap-0.5">
+      <span class="text-100 text-content-secondary">Заявок</span>
+      <span class="text-500">128</span>
+    </div>
+
+    <CdsDivider vertical />
+
+    <div class="flex flex-col gap-0.5">
+      <span class="text-100 text-content-secondary">В работе</span>
+      <span class="text-500">34</span>
+    </div>
+  </div>
+</template>
+```
+
+## Content
+
+The content of the `default` slot stands in the break of the line: the divider turns into a caption of the border — "or", a date, the name of a section.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDivider } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="m-auto flex w-[320px] flex-col gap-4">
+    <CdsDivider>или</CdsDivider>
+
+    <CdsDivider gradient>12 мая</CdsDivider>
+
+    <div class="flex h-[120px] justify-center">
+      <CdsDivider vertical>или</CdsDivider>
+    </div>
+  </div>
+</template>
+```
+
+## Content
+
+The `content-offset` prop increases the distance from the content to the line. An array of two values additionally shifts the content itself: downwards on a horizontal divider, to the right on a vertical one.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDivider } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="m-auto flex w-[320px] flex-col gap-4">
+    <div class="flex flex-col gap-1">
+      <span class="text-100 text-content-secondary">content-offset="32"</span>
+      <CdsDivider content-offset="32">или</CdsDivider>
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <span class="text-100 text-content-secondary">:content-offset="[32, -10]"</span>
+      <CdsDivider :content-offset="[32, -10]">или</CdsDivider>
+    </div>
+  </div>
+</template>
+```
+
+## An alternative way to sign in
+
+A divider with the "or" caption sets two equal paths apart and explains that the second one is not a continuation of the first. `content-offset` gives the caption some air so it does not blend with the buttons.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsDivider, CdsTextInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const email = ref('');
+const loading = ref(false);
+
+const sendLink = async () => {
+  loading.value = true;
+
+  await new Promise((resolve) => setTimeout(resolve, 1500));
+
+  loading.value = false;
+};
+</script>
+
+<template>
+  <div class="m-auto flex w-[320px] flex-col gap-2">
+    <CdsTextInput v-model="email" label="Рабочая почта" placeholder="name@company.ru" hide-details />
+
+    <CdsButton block text="Прислать ссылку для входа" :loading="loading" @click="sendLink" />
+
+    <CdsDivider content-offset="8">или</CdsDivider>
+
+    <CdsButton appearance="secondary" block text="Войти по паролю" />
+  </div>
+</template>
+```
+
+## Rows of a list
+
+Between the rows of a list a divider replaces the frames: the borders are visible, but the list does not turn into a table. The line goes between the items rather than after each one — the first and the last row do not have it.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDivider, CdsTextInput } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const query = ref('');
+
+const documents = [
+  { title: 'Договор поставки №1024', date: '12 мая' },
+  { title: 'Договор аренды №87', date: '30 апреля' },
+  { title: 'Акт сверки за I квартал', date: '14 апреля' },
+  { title: 'Счёт на оплату №5512', date: '2 апреля' }
+];
+
+const filtered = computed(() =>
+  documents.filter((document) => document.title.toLowerCase().includes(query.value.trim().toLowerCase()))
+);
+</script>
+
+<template>
+  <div class="m-auto flex w-[360px] flex-col gap-2">
+    <CdsTextInput v-model="query" placeholder="Поиск по документам" hide-details />
+
+    <div class="flex flex-col">
+      <template v-for="(document, index) of filtered" :key="document.title">
+        <CdsDivider v-if="index" />
+
+        <div class="flex items-center justify-between gap-2 py-2">
+          <span>{{ document.title }}</span>
+          <span class="text-100 text-content-secondary">{{ document.date }}</span>
+        </div>
+      </template>
+
+      <span v-if="!filtered.length" class="py-2 text-content-secondary">Ничего не найдено</span>
+    </div>
+  </div>
+</template>
+```
+
+## Metadata of a record
+
+Vertical dividers break up a row of facts — status, date, author — taking almost no space. A `display: flex` and a height are enough for the parent row to make the lines stretch along the text.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDivider } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="m-auto flex w-[360px] flex-col gap-1">
+    <span class="text-300">Договор поставки №1024</span>
+
+    <div class="text-100 text-content-secondary flex h-[16px] items-center gap-2">
+      <span>На согласовании</span>
+      <CdsDivider vertical />
+      <span>12 мая</span>
+      <CdsDivider vertical />
+      <span>Иван Петров</span>
+    </div>
+  </div>
+</template>
+```
+
+## Sections of a form
+
+A divider with a caption in the slot names a new group of fields. It is calmer than a heading: the rest of the form reads as a continuation rather than as the start of another form.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDivider, CdsForm, CdsTextInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const company = ref('');
+const inn = ref('');
+const email = ref('');
+const phone = ref('');
+</script>
+
+<template>
+  <CdsForm class="m-auto flex w-[350px] flex-col gap-2" @submit.prevent>
+    <CdsTextInput v-model="company" label="Название компании" hide-details />
+    <CdsTextInput v-model="inn" label="ИНН" hide-details />
+
+    <div class="my-2">
+      <CdsDivider content-offset="8">Контакты</CdsDivider>
+    </div>
+
+    <CdsTextInput v-model="email" label="Почта" hide-details />
+    <CdsTextInput v-model="phone" label="Телефон" hide-details />
+  </CdsForm>
+</template>
+```

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

@@ -0,0 +1,10 @@
+# CdsDivider — 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 divider sets the meaningful groups apart: the details separately, the contacts separately. | A line after every row creates noise and does not help reading the list. |
+| A caption in a divider is one or two words: it names the border instead of explaining it. | A long phrase breaks the line and pulls the attention onto itself. |
+| A thin neutral line: the border is visible and the attention stays on the content. | A thick colored divider reads as an interface element in its own right. |

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

@@ -0,0 +1,38 @@
+# CdsDivider — 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.
+
+## _CdsDivider.variables.scss
+
+```scss
+@use '../../../styles/settings';
+
+$divider-color: rgb(var(--cds-color-line-tertiary)) !default;
+$divider-margin: var(--cds-spacing-200) !default;
+$divider-opacity: var(--cds-border-opacity) !default;
+$divider-border-color: null !default;
+$divider-border-style: settings.$border-style-root !default;
+$divider-border-width: thin 0 0 0 !default;
+$divider-inset-margin: 72px !default;
+$divider-inset-max-width: calc(100% - #{$divider-inset-margin}) !default;
+$divider-content-padding: 0 var(--cds-spacing-400) !default;
+$divider-gradient-mask: linear-gradient(90deg, transparent, #000, transparent) !default;
+
+// Divider vertical
+$divider-vertical-inset-margin-bottom: $divider-margin !default;
+$divider-vertical-inset-margin-top: $divider-margin !default;
+$divider-vertical-inset-max-height: calc(100% - #{$divider-margin} * 2) !default;
+$divider-vertical-border-width: 0 thin 0 0 !default;
+$divider-vertical-margin-left: -1px !default;
+$divider-content-vertical-padding: var(--cds-spacing-100) 0 !default;
+$divider-vertical-gradient-mask: linear-gradient(0deg, transparent, #000, transparent) !default;
+
+// Lists
+$divider-border: (
+  $divider-border-color,
+  $divider-border-style,
+  $divider-border-width
+) !default;
+```

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

@@ -0,0 +1,53 @@
+# CdsDrawer — 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)
+
+The side panel of the application: navigation sections on the left, the context of a record or filters on the right. Inside `CdsLayout` the drawer takes its place in the layout and pushes the content aside, and in temporary mode it slides out over it.
+
+## CdsDrawer
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `border` | `boolean \| undefined` | `false` | no | Adds borders between the sections (prepend/append). |
+| `color` | `string \| undefined` | — | no | Component color |
+| `fixed` | `boolean \| undefined` | `false` | no | Applies `position: fixed`. |
+| `fixedSlots` | `boolean \| undefined` | `false` | no | Uses an inner scroll for the content section. |
+| `height` | `string \| number \| undefined` | — | no | Component height |
+| `maxHeight` | `string \| number \| undefined` | — | no | Maximum component height |
+| `maxWidth` | `string \| number \| undefined` | — | no | Maximum component width |
+| `minHeight` | `string \| number \| undefined` | — | no | Minimum component height |
+| `minified` | `boolean \| undefined` | `false` | no | Minified look (icons only) until the mouse hovers over it. |
+| `minWidth` | `string \| number \| undefined` | — | no | Minimum component width |
+| `modelValue` | `boolean \| null \| undefined` | `null` | no | Shows/hides the drawer (v-model). |
+| `permanent` | `boolean \| undefined` | `false` | no | Always visible, regardless of the screen size. |
+| `right` | `boolean \| undefined` | `false` | no | Positions the drawer on the right. |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'aside'` | no | Custom HTML tag or component to render |
+| `temporary` | `boolean \| undefined` | `false` | no | Temporary drawer: opens through v-model and closes on the overlay. |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `closed` | `[value: boolean]` | The drawer has closed. |
+| `opened` | `[value: boolean]` | The drawer has opened. |
+| `update:modelValue` | `[value: boolean]` | The v-model value has changed. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `append` | `any` | Content after the navigation. |
+| `default` | `any` | Navigation items (`CdsList`). |
+| `prepend` | `any` | Content before the navigation. |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `drawerRef` | `HTMLElement \| undefined` | Ref to the root DOM element of the drawer. |