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

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

@@ -0,0 +1,35 @@
+# CdsHeader — 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 header of the application: the title, the global search, notifications, the profile — everything that has to be at hand on any screen. The layout measures its height itself and reserves the space, so the content never ends up under the header.
+
+## CdsHeader
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `bordered` | `boolean \| undefined` | `false` | no | Shows the border. |
+| `color` | `string \| undefined` | — | no | Component color |
+| `elevated` | `boolean \| undefined` | `false` | no | Shows the shadow. |
+| `height` | `string \| number \| undefined` | `50` | no | Height of the element. |
+| `modelValue` | `boolean \| undefined` | `true` | no | Visibility of the element in the layout. |
+| `reveal` | `boolean \| undefined` | `false` | no | Floating mode: the element appears/hides on scroll. |
+| `revealOffset` | `number \| undefined` | `250` | no | Scroll threshold (px) up to which the floating element stays visible. |
+| `theme` | `string \| undefined` | — | no | Component theme |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `focusin` | `[event: FocusEvent]` | Focus moved inside the header. |
+| `reveal` | `[value: boolean]` | Visibility of the floating header has changed. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Content of the header (`CdsToolbar` and others). |

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

@@ -0,0 +1,345 @@
+# CdsHeader — 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 header of the application: the title, the global search, notifications, the profile — everything that has to be at hand on any screen. The layout measures its height itself and reserves the space, so the content never ends up under the header.
+
+## Separator
+
+The header overlaps the scrollable content, so its edge is worth marking: `bordered` draws a border, `elevated` casts a shadow. The shadow is more noticeable and suits long lists better, the border suits calm pages.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsHeader,
+  CdsLayout,
+  CdsMain,
+  CdsPage,
+  CdsRadio,
+  CdsRadioGroup,
+  CdsToolbar,
+  CdsToolbarTitle
+} from '@central-design-system/components';
+import { ref } from 'vue';
+
+const separator = ref('bordered');
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <CdsRadioGroup v-model="separator" direction="horizontal" hide-details>
+      <CdsRadio value="none" label="Без разделителя" />
+      <CdsRadio value="bordered" label="Граница" />
+      <CdsRadio value="elevated" label="Тень" />
+    </CdsRadioGroup>
+
+    <div class="h-[240px]">
+      <CdsLayout container>
+        <CdsHeader :bordered="separator === 'bordered'" :elevated="separator === 'elevated'">
+          <CdsToolbar>
+            <CdsToolbarTitle>Заголовок приложения</CdsToolbarTitle>
+          </CdsToolbar>
+        </CdsHeader>
+
+        <CdsMain>
+          <CdsPage padding>
+            <div class="flex flex-col gap-2">
+              <div v-for="n in 6" :key="n" class="rounded-200 bg-surface-secondary p-4 text-content-primary">
+                Блок {{ n }}
+              </div>
+            </div>
+          </CdsPage>
+        </CdsMain>
+      </CdsLayout>
+    </div>
+  </div>
+</template>
+```
+
+## Height
+
+The height comes from the content: the layout measures the header and reserves exactly as much space as it takes. The `height` prop is an initial estimate before the first measurement: set the expected height so the content does not jump on mount.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsHeader,
+  CdsLayout,
+  CdsMain,
+  CdsPage,
+  CdsRadio,
+  CdsRadioGroup,
+  CdsToolbar,
+  CdsToolbarTitle
+} from '@central-design-system/components';
+import { ref } from 'vue';
+
+const size = ref(56);
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <CdsRadioGroup v-model="size" direction="horizontal" hide-details>
+      <CdsRadio :value="40" label="40 px" />
+      <CdsRadio :value="56" label="56 px" />
+      <CdsRadio :value="80" label="80 px" />
+    </CdsRadioGroup>
+
+    <div class="h-[240px]">
+      <CdsLayout container>
+        <CdsHeader bordered :height="size">
+          <CdsToolbar :style="{ height: size + 'px' }">
+            <CdsToolbarTitle>Заголовок приложения</CdsToolbarTitle>
+          </CdsToolbar>
+        </CdsHeader>
+
+        <CdsMain>
+          <CdsPage padding>
+            <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
+              Контент начинается ровно под шапкой: макет замерил её и зарезервировал {{ size }} px.
+            </div>
+          </CdsPage>
+        </CdsMain>
+      </CdsLayout>
+    </div>
+  </div>
+</template>
+```
+
+## Color
+
+The `bg-color` prop paints the background of the header with a palette alias, `color` paints the text and the icons inside. If only the background is set, the text color is picked to be contrasting automatically.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsHeader,
+  CdsLayout,
+  CdsMain,
+  CdsPage,
+  CdsRadio,
+  CdsRadioGroup,
+  CdsToolbar,
+  CdsToolbarTitle
+} from '@central-design-system/components';
+import { ref } from 'vue';
+
+const bgColor = ref('default');
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <CdsRadioGroup v-model="bgColor" direction="horizontal" hide-details>
+      <CdsRadio value="default" label="Цвет темы" />
+      <CdsRadio value="indigo" label="indigo" />
+      <CdsRadio value="teal" label="teal" />
+      <CdsRadio value="neutral" label="neutral" />
+    </CdsRadioGroup>
+
+    <div class="h-[240px]">
+      <CdsLayout container>
+        <CdsHeader :bg-color="bgColor === 'default' ? undefined : bgColor">
+          <CdsToolbar>
+            <CdsToolbarTitle>Заголовок приложения</CdsToolbarTitle>
+          </CdsToolbar>
+        </CdsHeader>
+
+        <CdsMain>
+          <CdsPage padding>
+            <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">Содержимое страницы</div>
+          </CdsPage>
+        </CdsMain>
+      </CdsLayout>
+    </div>
+  </div>
+</template>
+```
+
+## Floating mode
+
+The `reveal` prop hides the header when scrolling down and brings it back when scrolling up — on long lists this gives the screen to the content. The `reveal-offset` prop sets the zone near the top of the page where the header stays in place. The `@reveal` event reports the change of visibility, and moving the keyboard focus inside a hidden header brings it back.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsHeader, CdsLayout, CdsMain, CdsPage, CdsToolbar, CdsToolbarTitle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const revealed = ref(true);
+</script>
+
+<template>
+  <div class="h-[320px]">
+    <CdsLayout container>
+      <CdsHeader reveal elevated :reveal-offset="120" @reveal="revealed = $event">
+        <CdsToolbar>
+          <CdsToolbarTitle>Заголовок приложения</CdsToolbarTitle>
+        </CdsToolbar>
+      </CdsHeader>
+
+      <CdsMain>
+        <CdsPage padding>
+          <div class="mb-2 text-content-secondary">Шапка сейчас {{ revealed ? 'видна' : 'скрыта' }}</div>
+          <div class="flex flex-col gap-2">
+            <div v-for="n in 20" :key="n" class="rounded-200 bg-surface-secondary p-4 text-content-primary">
+              Блок {{ n }}
+            </div>
+          </div>
+        </CdsPage>
+      </CdsMain>
+    </CdsLayout>
+  </div>
+</template>
+```
+
+## Visibility
+
+The `model-value` prop removes the header entirely: the layout stops reserving space for it and the content takes the freed height. This is a handy way to hide the header in full-screen modes — document viewing, a presentation.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsHeader,
+  CdsLayout,
+  CdsMain,
+  CdsPage,
+  CdsToggle,
+  CdsToolbar,
+  CdsToolbarTitle
+} from '@central-design-system/components';
+import { ref } from 'vue';
+
+const visible = ref(true);
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <CdsToggle v-model="visible" label="Показывать шапку" hide-details />
+
+    <div class="h-[240px]">
+      <CdsLayout container>
+        <CdsHeader :model-value="visible" bordered>
+          <CdsToolbar>
+            <CdsToolbarTitle>Заголовок приложения</CdsToolbarTitle>
+          </CdsToolbar>
+        </CdsHeader>
+
+        <CdsMain>
+          <CdsPage padding>
+            <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
+              Когда шапка скрыта, макет освобождает её место — контент поднимается вверх.
+            </div>
+          </CdsPage>
+        </CdsMain>
+      </CdsLayout>
+    </div>
+  </div>
+</template>
+```
+
+## Application header
+
+The basic set: a menu button, a logo, the title in `CdsToolbarTitle` and the actions on the right. `CdsToolbarTitle` stretches and pushes the left and the right groups to the edges, so no extra spacers are needed.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsAvatar,
+  CdsBadge,
+  CdsFunctionalButton,
+  CdsHeader,
+  CdsLayout,
+  CdsMain,
+  CdsPage,
+  CdsToolbar,
+  CdsToolbarTitle
+} from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="h-[280px]">
+    <CdsLayout container>
+      <CdsHeader bordered :height="64">
+        <CdsToolbar class="h-[64px]">
+          <CdsFunctionalButton icon="menu" class="mr-2" aria-label="Открыть навигацию" />
+          <CdsAvatar icon="company" class="mr-2" />
+          <CdsToolbarTitle>Портал закупок</CdsToolbarTitle>
+
+          <CdsFunctionalButton icon="search" aria-label="Поиск" />
+          <CdsBadge :content="3">
+            <CdsFunctionalButton icon="notification" aria-label="Уведомления" />
+          </CdsBadge>
+          <CdsAvatar icon="user-avatar" class="ml-2" />
+        </CdsToolbar>
+      </CdsHeader>
+
+      <CdsMain>
+        <CdsPage padding>
+          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">Содержимое страницы</div>
+        </CdsPage>
+      </CdsMain>
+    </CdsLayout>
+  </div>
+</template>
+```
+
+## Header with tabs
+
+Two `CdsToolbar` components in a row turn the header into a two-level one: the name of the section on top, [CdsTabs](../cds-tabs/api.md) with the subsections below. The tabs stay on the screen together with the header, so you can switch from any point of the list.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsHeader,
+  CdsLayout,
+  CdsMain,
+  CdsPage,
+  CdsTab,
+  CdsTabs,
+  CdsToolbar,
+  CdsToolbarTitle
+} from '@central-design-system/components';
+import { ref } from 'vue';
+
+const tab = ref('active');
+</script>
+
+<template>
+  <div class="h-[280px]">
+    <CdsLayout container>
+      <CdsHeader bordered :height="96">
+        <CdsToolbar>
+          <CdsToolbarTitle>Закупки</CdsToolbarTitle>
+        </CdsToolbar>
+        <CdsToolbar no-gutter="start">
+          <CdsTabs v-model="tab">
+            <CdsTab value="active">Активные</CdsTab>
+            <CdsTab value="draft">Черновики</CdsTab>
+            <CdsTab value="archive">Архив</CdsTab>
+          </CdsTabs>
+        </CdsToolbar>
+      </CdsHeader>
+
+      <CdsMain>
+        <CdsPage padding>
+          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">Вкладка: {{ tab }}</div>
+        </CdsPage>
+      </CdsMain>
+    </CdsLayout>
+  </div>
+</template>
+```

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

@@ -0,0 +1,9 @@
+# CdsHeader — 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 border or a shadow separates the header from the content — while scrolling you can see where it ends. | Without a separator the content slides under the header and blends into it. |
+| The header holds the title and one or two constantly needed actions. | A header crammed with buttons stops being an anchor and squeezes out the title. |

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

@@ -0,0 +1,13 @@
+# CdsHeader — 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.
+
+## _CdsHeader.variables.scss
+
+```scss
+$header-background: rgb(var(--cds-color-surface-elevated)) !default;
+$header-color: rgb(var(--cds-color-content-primary)) !default;
+$header-border-color: rgb(var(--cds-color-line-tertiary)) !default;
+```

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

@@ -0,0 +1,22 @@
+# CdsHighlight — 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)
+
+Highlighting explains why a row made it into the results: the component finds the matches with the query (`query`) or with ready ranges (`matches`) in the text and wraps them into `mark`. Take it for search results, autocomplete suggestions and filtered lists.
+
+## CdsHighlight
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `color` | `string \| undefined` | — | no | Color of the highlighted text. |
+| `ignoreCase` | `boolean \| undefined` | — | no | Ignores the case when searching by `query`. |
+| `markClass` | `string \| undefined` | — | no | Extra CSS class for the `<mark>` element. |
+| `matchAll` | `boolean \| undefined` | — | no | Highlights every occurrence, not just the first one. |
+| `matches` | `readonly MatchRange[] \| undefined` | — | no | Ready match ranges `[start, end]`. They take precedence over `query`. |
+| `opacity` | `string \| number \| undefined` | — | no | Opacity of the highlight background (the `--cds-highlight-opacity` CSS variable). |
+| `query` | `string \| string[] \| undefined` | — | no | Search query: a string or an array of term strings. |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'span'` | no | Custom HTML tag or component to render |
+| `text` | `string \| undefined` | `''` | no | The text the highlighting is performed in. |