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

package/skills/cds-builder/references/components/cds-empty-state/examples.md

@@ -0,0 +1,330 @@
+# CdsEmptyState — 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.
+
+An empty state explains why there is no content on the screen and suggests the next step: no search results, an empty list, a loading error. It is assembled from a media area, headings, a description and an action button.
+
+## Content
+
+Every text zone has its own prop: `headline` is the large accent ("404", "Empty"), `title` states the situation, `text` gives the details and hints what to do. The width of the text is capped by `text-width` (500 by default), so a long description does not stretch across the whole screen.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsEmptyState } from '@central-design-system/components';
+</script>
+
+<template>
+  <CdsEmptyState
+    icon="list-search"
+    headline="Пусто"
+    title="Ничего не найдено"
+    text="Попробуйте изменить запрос или сбросить фильтры, чтобы увидеть больше результатов"
+  />
+</template>
+```
+
+## Media
+
+The `icon` prop shows an icon, `image` shows an image (it wins over the icon). The size of the media comes from `size`: 96 for an icon and 200 for an image by default. The color of the icon is changed by the `color` prop.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsEmptyState } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex gap-4">
+    <CdsEmptyState
+      icon="list-search"
+      title="Ничего не найдено"
+      text="Попробуйте изменить запрос или сбросить фильтры"
+      class="flex-1"
+    />
+    <CdsEmptyState
+      image="/images/temp/girl.webp"
+      title="Ничего не найдено"
+      text="Попробуйте изменить запрос или сбросить фильтры"
+      class="flex-1"
+    />
+  </div>
+</template>
+```
+
+## Illustrations
+
+Legacy illustrations from the `@central-design-system/illustrations` package (CDS 3): the `illustration` prop accepts the kebab-case name of a globally registered component (they are registered through the `illustrations` option of `createCds`). You can render your own illustration through the `illustration` slot.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsEmptyState } from '@central-design-system/components';
+</script>
+
+<template>
+  <CdsEmptyState
+    illustration="search-interface"
+    title="Ничего не найдено"
+    text="Попробуйте изменить запрос или сбросить фильтры"
+  />
+</template>
+```
+
+## Alignment
+
+The `justify` prop pushes the content to the edge of the container: `start`, `center` (default) or `end`. The dashed frame in the demo shows the bounds of the container.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsEmptyState } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <CdsEmptyState
+      justify="start"
+      icon="list-search"
+      title="Выравнивание start"
+      text="Контент прижат к левому краю контейнера"
+      class="justify-demo"
+    />
+    <CdsEmptyState
+      justify="end"
+      icon="list-search"
+      title="Выравнивание end"
+      text="Контент прижат к правому краю контейнера"
+      class="justify-demo"
+    />
+  </div>
+</template>
+
+<style scoped>
+.justify-demo {
+  border: 1px dashed rgb(var(--cds-color-line-primary));
+  border-radius: var(--cds-border-radius-200);
+}
+</style>
+```
+
+## Actions
+
+The `action-text` prop adds a button below the content; a click on it arrives as the `click:action` event. When there is more than one action, render your own buttons in the `actions` slot — bind `props.onClick` from the slot to the main button so that the `click:action` event keeps working.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsEmptyState } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex gap-4">
+    <CdsEmptyState
+      icon="list-search"
+      title="Ничего не найдено"
+      text="Попробуйте изменить запрос или сбросить фильтры"
+      action-text="Сбросить фильтры"
+      class="flex-1"
+    />
+    <CdsEmptyState
+      icon="list-search"
+      title="Ничего не найдено"
+      text="Попробуйте изменить запрос или сбросить фильтры"
+      class="flex-1"
+    >
+      <template #actions="{ props }">
+        <CdsButton appearance="secondary">Назад</CdsButton>
+        <CdsButton v-bind="props">Сбросить фильтры</CdsButton>
+      </template>
+    </CdsEmptyState>
+  </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 { CdsButton, CdsEmptyState, CdsImage } from '@central-design-system/components';
+</script>
+
+<template>
+  <CdsEmptyState>
+    <template #media>
+      <CdsImage src="/images/temp/girl.webp" />
+    </template>
+    <template #title> Заголовок пустого состояния </template>
+    <template #text>
+      Описание пустого состояния, которое может быть длинным и содержать много текста. Также может описывать варианты
+      решения проблемы.
+    </template>
+    <template #actions="{ props }">
+      <CdsButton v-bind="props" text="Добавить данные" />
+    </template>
+  </CdsEmptyState>
+</template>
+```
+
+## Search with no results
+
+When nothing matches the query, an empty state replaces the list. The button from `action-text` clears the query on `click:action` — the user returns to the full list in one click. Try typing a query that is not in the list.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsEmptyState, CdsTextInput } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const query = ref('стол');
+
+const items = ['Кресло офисное', 'Шкаф для документов', 'Стеллаж металлический', 'Лампа настольная'];
+
+const filtered = computed(() => items.filter((item) => item.toLowerCase().includes(query.value.trim().toLowerCase())));
+</script>
+
+<template>
+  <div class="m-auto flex w-[350px] flex-col gap-2">
+    <CdsTextInput v-model="query" placeholder="Поиск по каталогу" prepend-inner-icon="search" clearable />
+
+    <ul v-if="filtered.length" class="m-0 flex list-none flex-col gap-2 p-0">
+      <li v-for="item in filtered" :key="item">{{ item }}</li>
+    </ul>
+
+    <CdsEmptyState
+      v-else
+      icon="list-search"
+      title="Ничего не найдено"
+      text="Попробуйте изменить запрос или очистить поиск"
+      action-text="Очистить поиск"
+      @click:action="query = ''"
+    />
+  </div>
+</template>
+```
+
+## Empty list
+
+The first visit to a section is a reason not to apologize for the emptiness but to help the user start: `title` names the situation, `text` promises a result, and the button from `action-text` creates the first record. Once a record is added, the list replaces the placeholder.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsEmptyState } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const documents = ref<string[]>([]);
+let counter = 0;
+
+function addDocument() {
+  counter += 1;
+  documents.value.push(`Договор поставки № ${counter}`);
+}
+
+function removeDocument(index: number) {
+  documents.value.splice(index, 1);
+}
+</script>
+
+<template>
+  <div class="m-auto w-[350px]">
+    <CdsEmptyState
+      v-if="!documents.length"
+      icon="doc"
+      title="У вас пока нет документов"
+      text="Добавьте первый документ — он появится в этом списке"
+      action-text="Добавить документ"
+      @click:action="addDocument"
+    />
+
+    <div v-else class="flex flex-col gap-2">
+      <div v-for="(doc, index) in documents" :key="doc" class="flex items-center justify-between gap-2">
+        <span>{{ doc }}</span>
+        <CdsButton appearance="tertiary" size="sm" icon="delete" aria-label="Удалить" @click="removeDocument(index)" />
+      </div>
+
+      <div class="flex justify-center mt-2">
+        <CdsButton appearance="secondary" size="sm" prepend-icon="add" text="Добавить ещё" @click="addDocument" />
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+## Loading error
+
+If the data failed to load, explain the reason and let the user retry right there. The button in the `actions` slot shows `loading` while the retry is in flight, and `props.onClick` from the slot keeps the `click:action` event.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsEmptyState } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const state = ref<'error' | 'loading' | 'success'>('error');
+
+async function retry() {
+  state.value = 'loading';
+
+  await new Promise((resolve) => setTimeout(resolve, 1500));
+
+  state.value = 'success';
+}
+</script>
+
+<template>
+  <div class="m-auto w-[350px]">
+    <CdsEmptyState
+      v-if="state !== 'success'"
+      icon="error"
+      title="Не удалось загрузить данные"
+      text="Проверьте соединение с интернетом и попробуйте ещё раз"
+      @click:action="retry"
+    >
+      <template #actions="{ props }">
+        <CdsButton v-bind="props" :loading="state === 'loading'" text="Повторить" />
+      </template>
+    </CdsEmptyState>
+
+    <div v-else class="flex flex-col items-center gap-2">
+      <span>Данные успешно загружены</span>
+      <CdsButton appearance="tertiary" size="sm" text="Сбросить демо" @click="state = 'error'" />
+    </div>
+  </div>
+</template>
+```
+
+## 404 page
+
+`headline` prints the large error code, and `href` (or `to` for vue-router) is passed to the action button — it works as a link and takes the user away from the dead-end page.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsEmptyState } from '@central-design-system/components';
+</script>
+
+<template>
+  <CdsEmptyState
+    headline="404"
+    title="Страница не найдена"
+    text="Возможно, страница переехала или в адресе опечатка. Начните с главной страницы"
+    action-text="На главную"
+    href="/"
+  />
+</template>
+```

package/skills/cds-builder/references/components/cds-empty-state/guidelines.md

@@ -0,0 +1,9 @@
+# CdsEmptyState — 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 text explains why the screen is empty, and the button offers a way out. | «Нет данных» не объясняет причину и не подсказывает, что делать дальше. |
+| One primary action: it is clear what to do first. | Several equally weighted buttons make the user choose instead of act. |

package/skills/cds-builder/references/components/cds-empty-state/tokens.md

@@ -0,0 +1,25 @@
+# CdsEmptyState — 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.
+
+## _CdsEmptyState.variables.scss
+
+```scss
+@use '../../../styles/tools';
+
+$empty-state-min-height: 100% !default;
+$empty-state-illustration-size: tools.to-rem(96px) !default;
+$empty-state-padding: var(--cds-spacing-400) !default;
+$empty-state-gap: var(--cds-spacing-400) !default;
+$empty-state-media-color: rgb(var(--cds-color-content-primary)) !default;
+$empty-state-headline-color: rgb(var(--cds-color-content-primary)) !default;
+$empty-state-headline-margin-bottom: var(--cds-spacing-400) !default;
+$empty-state-headline-mobile-font-size: var(--cds-font-size-700) !default;
+$empty-state-title-margin-bottom: var(--cds-spacing-200) !default;
+$empty-state-text-padding: 0 var(--cds-spacing-400) !default;
+$empty-state-content-padding: var(--cds-spacing-600) 0 !default;
+$empty-state-actions-gap: var(--cds-spacing-200) !default;
+$empty-state-actions-padding: var(--cds-spacing-400) !default;
+```

package/skills/cds-builder/references/components/cds-expandable-panel/api.md

@@ -0,0 +1,157 @@
+# CdsExpandablePanel — 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)
+
+An expandable panel hides the details behind a title: you see the list of topics and open only the one you need. Take it for FAQs, optional settings and long descriptions that turn a page into an endless feed.
+
+Family: [CdsExpandablePanel](#cdsexpandablepanel) + subcomponents: [CdsExpandablePanelContent](#cdsexpandablepanelcontent), [CdsExpandablePanels](#cdsexpandablepanels), [CdsExpandablePanelTitle](#cdsexpandablepaneltitle).
+
+## CdsExpandablePanel
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `collapseIcon` | `IconValue \| undefined` | `'chevron-up'` | no | Icon shown when the panel is expanded and can be collapsed |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `eager` | `boolean \| undefined` | — | no | Renders the content of the component right away. Useful when you have content that is not in the DOM but has to be indexed for SEO. |
+| `expandIcon` | `IconValue \| undefined` | `'chevron-down'` | no | Icon shown when the panel is collapsed and can be expanded |
+| `focusable` | `boolean \| undefined` | — | no | Highlights the title with a background on focus |
+| `height` | `string \| number \| undefined` | — | no | Component height |
+| `hideActions` | `boolean \| undefined` | — | no | Hides the expand/collapse icon |
+| `hover` | `boolean \| undefined` | `true` | no | Highlights the title with a background on hover |
+| `maxHeight` | `string \| number \| undefined` | — | no | Maximum component height |
+| `maxWidth` | `string \| number \| undefined` | — | no | Maximum component width |
+| `minHeight` | `string \| number \| undefined` | — | no | Minimum component height |
+| `minWidth` | `string \| number \| undefined` | — | no | Minimum component width |
+| `readonly` | `boolean \| null \| undefined` | `null` | no | Read-only state |
+| `selectedClass` | `string \| undefined` | — | no | CSS class applied in the selected state |
+| `static` | `boolean \| undefined` | — | no | Turns off the animation of the title |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+| `text` | `string \| undefined` | — | no | Text of the expandable content of the panel |
+| `title` | `string \| undefined` | — | no | Text of the panel title |
+| `value` | `any` | — | no | Value of the component within the group |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `group:selected` | `[value: { value: boolean; }]` | Fires when the panel is expanded or collapsed. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Arbitrary content of the panel. |
+| `text` | `any` | Expandable content of the panel. |
+| `title` | `any` | Content of the panel title. |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `isSelected` | `boolean` | The panel is expanded |
+| `select` | `(value: boolean) => void` | Expands or collapses the panel |
+| `toggle` | `() => void` | Toggles the expansion of the panel |
+
+---
+
+## CdsExpandablePanelContent
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `eager` | `boolean \| undefined` | — | no | Renders the content of the component right away. Useful when you have content that is not in the DOM but has to be indexed for SEO. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Expandable content of the panel. |
+
+---
+
+## CdsExpandablePanels
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `appearance` | `"primary" \| "secondary" \| "transparent" \| undefined` | `'primary'` | no | Appearance of the panels |
+| `collapseIcon` | `IconValue \| undefined` | `'chevron-up'` | no | Icon shown when the panel is expanded and can be collapsed |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `eager` | `boolean \| undefined` | — | no | Renders the content of the component right away. Useful when you have content that is not in the DOM but has to be indexed for SEO. |
+| `expandIcon` | `IconValue \| undefined` | `'chevron-down'` | no | Icon shown when the panel is collapsed and can be expanded |
+| `focusable` | `boolean \| undefined` | — | no | Highlights the title with a background on focus |
+| `gap` | `string \| number \| undefined` | — | no | Spacing between the panels |
+| `hideActions` | `boolean \| undefined` | — | no | Hides the expand/collapse icon |
+| `hover` | `boolean \| undefined` | `true` | no | Highlights the title with a background on hover |
+| `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 |
+| `modelValue` | `any` | — | no | Value of the selected items of the group |
+| `multiple` | `boolean \| undefined` | — | no | Allows selecting several items at once |
+| `readonly` | `boolean \| null \| undefined` | `null` | no | Read-only state |
+| `required` | `boolean \| "force" \| undefined` | — | no | Requires at least one item to stay selected |
+| `selectedClass` | `string \| undefined` | — | no | CSS class applied in the selected state |
+| `static` | `boolean \| undefined` | — | no | Turns off the animation of the title |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `variant` | `"default" \| "accordion" \| undefined` | `'default'` | no | Display variant of the panel group |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `update:modelValue` | `[value: unknown]` | Fires when the set of selected panels changes. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `CdsExpandablePanelsSlotProps` | Panels of the group. The slot props carry the navigation between panels. |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `next` | `() => void` | Expands the next panel |
+| `prev` | `() => void` | Expands the previous panel |
+
+---
+
+## CdsExpandablePanelTitle
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `collapseIcon` | `IconValue \| undefined` | `'chevron-up'` | no | Icon shown when the panel is expanded and can be collapsed |
+| `expandIcon` | `IconValue \| undefined` | `'chevron-down'` | no | Icon shown when the panel is collapsed and can be expanded |
+| `focusable` | `boolean \| undefined` | — | no | Highlights the title with a background on focus |
+| `height` | `string \| number \| undefined` | — | no | Component height |
+| `hideActions` | `boolean \| undefined` | — | no | Hides the expand/collapse icon |
+| `hover` | `boolean \| undefined` | `true` | no | Highlights the title with a background on hover |
+| `maxHeight` | `string \| number \| undefined` | — | no | Maximum component height |
+| `maxWidth` | `string \| number \| undefined` | — | no | Maximum component width |
+| `minHeight` | `string \| number \| undefined` | — | no | Minimum component height |
+| `minWidth` | `string \| number \| undefined` | — | no | Minimum component width |
+| `readonly` | `boolean \| null \| undefined` | `null` | no | Read-only state |
+| `static` | `boolean \| undefined` | — | no | Turns off the animation of the title |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `action` | `CdsExpandablePanelTitleSlotProps` | Expand/collapse icon. The slot props carry the state of the panel. |
+| `default` | `CdsExpandablePanelTitleSlotProps` | Content of the title. The slot props carry the state of the panel. |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `isSelected` | `boolean` | The panel is expanded |
+| `toggle` | `() => void` | Toggles the expansion of the panel |