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

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

@@ -0,0 +1,610 @@
+# CdsTabs — 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.
+
+Tabs split the screen into sections of equal weight and switch between them in place, without going to another page. The bar is built from `CdsTab` components or from an `items` array, and the content of the sections is switched by `CdsTabsView` and `CdsTabsViewItem`.
+
+## Tabs and content
+
+Sections are declared with `CdsTab` components in the default slot, and the content with `CdsTabsViewItem` components inside `CdsTabsView`. The `value` props bind a tab to its content, and a shared `v-model` keeps the bar and the content area in sync.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTab, CdsTabs, CdsTabsView, CdsTabsViewItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const tab = ref('overview');
+</script>
+
+<template>
+  <div class="m-auto max-w-[470px]">
+    <CdsTabs v-model="tab">
+      <CdsTab value="overview">Обзор</CdsTab>
+      <CdsTab value="docs">Документы</CdsTab>
+      <CdsTab value="history">История</CdsTab>
+    </CdsTabs>
+
+    <CdsTabsView v-model="tab" class="mt-2">
+      <CdsTabsViewItem value="overview"> Сводка по проекту: статус, ответственные и ближайшие сроки. </CdsTabsViewItem>
+      <CdsTabsViewItem value="docs"> Договоры, акты и счета — всего 8 документов. </CdsTabsViewItem>
+      <CdsTabsViewItem value="history"> Хронология изменений за последние 30 дней. </CdsTabsViewItem>
+    </CdsTabsView>
+  </div>
+</template>
+```
+
+## Tabs from an array
+
+Pass an array of strings or `{ text, value }` objects into `items` — the tabs and the content area are rendered automatically. The content of a section comes from the `item.{value}` slots, the label of a tab from the `tab.{value}` slots.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTabs } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const tab = ref('requests');
+const items = [
+  { text: 'Заявки', value: 'requests' },
+  { text: 'Договоры', value: 'contracts' },
+  { text: 'Акты', value: 'acts' }
+];
+</script>
+
+<template>
+  <div class="m-auto max-w-[470px]">
+    <CdsTabs v-model="tab" :items="items">
+      <template #[`item.requests`]>
+        <p class="py-2">Открытые заявки за последний месяц.</p>
+      </template>
+      <template #[`item.contracts`]>
+        <p class="py-2">Действующие договоры с контрагентами.</p>
+      </template>
+      <template #[`item.acts`]>
+        <p class="py-2">Акты, ожидающие подписания.</p>
+      </template>
+    </CdsTabs>
+  </div>
+</template>
+```
+
+## Alignment
+
+The `align` prop pushes the tabs to the start of the bar (the default), to the center or to the end.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsRadio, CdsRadioGroup, CdsTab, CdsTabs } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const align = ref<'start' | 'center' | 'end'>('start');
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsRadioGroup v-model="align" label="Позиционирование (align)" direction="horizontal">
+      <CdsRadio label="start" value="start" />
+      <CdsRadio label="center" value="center" />
+      <CdsRadio label="end" value="end" />
+    </CdsRadioGroup>
+
+    <CdsTabs :align="align" class="w-full">
+      <CdsTab>Москва</CdsTab>
+      <CdsTab>Лиссабон</CdsTab>
+      <CdsTab>Нью-Йорк</CdsTab>
+    </CdsTabs>
+  </div>
+</template>
+```
+
+## Layout
+
+The `grow` prop stretches the tabs across the whole width of the bar — every tab takes an equal share of the free space.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTab, CdsTabs } from '@central-design-system/components';
+</script>
+
+<template>
+  <CdsTabs grow>
+    <CdsTab>Актуальные</CdsTab>
+    <CdsTab>Последние</CdsTab>
+    <CdsTab>Архивные</CdsTab>
+  </CdsTabs>
+</template>
+```
+
+## Layout
+
+The `fixed-tabs` prop also equalizes the width of the tabs, but caps it at 300px and centers the group.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTab, CdsTabs } from '@central-design-system/components';
+</script>
+
+<template>
+  <CdsTabs fixed-tabs>
+    <CdsTab>Все</CdsTab>
+    <CdsTab>Входящие</CdsTab>
+    <CdsTab>Отправленные</CdsTab>
+    <CdsTab>Удаленные</CdsTab>
+  </CdsTabs>
+</template>
+```
+
+## Layout
+
+The `direction="vertical"` prop turns the bar into a column — handy for settings and sections with a long list. The content area is placed next to it with a regular flex row.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCard, CdsCardText, CdsTab, CdsTabs, CdsTabsView, CdsTabsViewItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const tab = ref('company');
+</script>
+
+<template>
+  <CdsCard class="m-auto max-w-[560px]">
+    <div class="flex">
+      <CdsTabs v-model="tab" direction="vertical">
+        <CdsTab value="company" prepend-icon="company">Компания</CdsTab>
+        <CdsTab value="employees" prepend-icon="user-group">Сотрудники</CdsTab>
+        <CdsTab value="requisites" prepend-icon="card-bank">Реквизиты</CdsTab>
+      </CdsTabs>
+
+      <CdsTabsView v-model="tab">
+        <CdsTabsViewItem value="company">
+          <CdsCardText> Название, сфера деятельности и контакты — эти данные видят поставщики в каталоге. </CdsCardText>
+        </CdsTabsViewItem>
+
+        <CdsTabsViewItem value="employees">
+          <CdsCardText> В организации 14 сотрудников. Пригласите коллег и настройте им права доступа. </CdsCardText>
+        </CdsTabsViewItem>
+
+        <CdsTabsViewItem value="requisites">
+          <CdsCardText> ИНН, КПП и расчётный счёт подставляются в документы автоматически. </CdsCardText>
+        </CdsTabsViewItem>
+      </CdsTabsView>
+    </div>
+  </CdsCard>
+</template>
+```
+
+## Icons
+
+A tab accepts the same content props as a button: `prepend-icon` and `append-icon` add an icon next to the text, `icon` leaves only the icon. For an icon tab do not forget `aria-label` — without text it stays the only name of the section.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTab, CdsTabs } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsTabs>
+      <CdsTab prepend-icon="doc">Документы</CdsTab>
+      <CdsTab prepend-icon="comment">Обсуждение</CdsTab>
+      <CdsTab prepend-icon="settings">Настройки</CdsTab>
+    </CdsTabs>
+
+    <CdsTabs>
+      <CdsTab icon="list" aria-label="Списком" />
+      <CdsTab icon="data-cards" aria-label="Карточками" />
+    </CdsTabs>
+  </div>
+</template>
+```
+
+## Icons
+
+The `stacked` prop puts the icon above the text — the tab becomes taller and more noticeable. Such a layout works well with `align="center"` in mobile scenarios.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTab, CdsTabs, CdsTabsView, CdsTabsViewItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const tab = ref('recent');
+</script>
+
+<template>
+  <div class="m-auto max-w-[470px]">
+    <CdsTabs v-model="tab" stacked align="center">
+      <CdsTab value="recent" prepend-icon="clock">Недавние</CdsTab>
+      <CdsTab value="favorites" prepend-icon="star">Избранное</CdsTab>
+      <CdsTab value="nearby" prepend-icon="location">Рядом</CdsTab>
+    </CdsTabs>
+
+    <CdsTabsView v-model="tab" class="mt-2">
+      <CdsTabsViewItem value="recent"> Поставщики, с которыми вы работали за последний месяц. </CdsTabsViewItem>
+      <CdsTabsViewItem value="favorites"> Компании, которые вы добавили в избранное. </CdsTabsViewItem>
+      <CdsTabsViewItem value="nearby"> Поставщики в вашем регионе с доставкой за один день. </CdsTabsViewItem>
+    </CdsTabsView>
+  </div>
+</template>
+```
+
+## States
+
+The `disabled` prop turns a tab off, `loading` shows a loading indicator instead of the content.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTab, CdsTabs } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsTabs>
+      <CdsTab>Активные</CdsTab>
+      <CdsTab disabled>Черновики</CdsTab>
+      <CdsTab loading>Архив</CdsTab>
+    </CdsTabs>
+  </div>
+</template>
+```
+
+## Colors
+
+Tabs accept the color aliases of the palette (`neutral`, `red`, `green`, `cyan`, `purple`…) or any CSS color. The `color` prop paints the text of the tabs, `active-color` the slider of the selected tab, `bg-color` the background of the whole bar, and `base-color` the background of the unselected tabs.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTab, CdsTabs } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsTabs color="purple" active-color="purple">
+      <CdsTab>Обзор</CdsTab>
+      <CdsTab>Аналитика</CdsTab>
+      <CdsTab>Отчёты</CdsTab>
+    </CdsTabs>
+
+    <CdsTabs bg-color="cyan">
+      <CdsTab>Обзор</CdsTab>
+      <CdsTab>Аналитика</CdsTab>
+      <CdsTab>Отчёты</CdsTab>
+    </CdsTabs>
+  </div>
+</template>
+```
+
+## Scrolling
+
+When the tabs do not fit into the bar, it scrolls. The `show-arrows` prop adds scroll arrows, `center-active` keeps the selected tab in the center of the bar.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTab, CdsTabs } from '@central-design-system/components';
+</script>
+
+<template>
+  <CdsTabs center-active show-arrows>
+    <CdsTab v-for="i of 20" :key="i">Раздел {{ i }}</CdsTab>
+  </CdsTabs>
+</template>
+```
+
+## Slider
+
+The `slider-transition` prop picks the animation of the slider under the selected tab: `shift` (the default) moves it to the new tab, `grow` grows it in place, `fade` fades it in. The duration is set through `slider-transition-duration`, and `hide-slider` removes the slider entirely.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsRadio, CdsRadioGroup, CdsTab, CdsTabs } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const transition = ref<'shift' | 'grow' | 'fade'>('shift');
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsRadioGroup v-model="transition" label="Анимация (slider-transition)" direction="horizontal">
+      <CdsRadio label="shift" value="shift" />
+      <CdsRadio label="grow" value="grow" />
+      <CdsRadio label="fade" value="fade" />
+    </CdsRadioGroup>
+
+    <CdsTabs :slider-transition="transition">
+      <CdsTab>Обзор</CdsTab>
+      <CdsTab>Аналитика</CdsTab>
+      <CdsTab>Отчёты</CdsTab>
+    </CdsTabs>
+  </div>
+</template>
+```
+
+## Slots
+
+The `tab` and `item` slots receive the array element and replace the whole component — return `CdsTab` and `CdsTabsViewItem` with your own `value` from them. The `tab.{value}` and `item.{value}` slots replace the content only.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTab, CdsTabs, CdsTabsViewItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const tab = ref('profile');
+const items = [
+  { text: 'Профиль', value: 'profile', icon: 'user-avatar' },
+  { text: 'Уведомления', value: 'notifications', icon: 'notification' },
+  { text: 'Безопасность', value: 'security', icon: 'locked' }
+];
+</script>
+
+<template>
+  <div class="m-auto max-w-[420px]">
+    <CdsTabs v-model="tab" :items="items">
+      <template #tab="{ item }">
+        <CdsTab :value="item.value" :prepend-icon="item.icon">{{ item.text }}</CdsTab>
+      </template>
+
+      <template #item="{ item }">
+        <CdsTabsViewItem :value="item.value">
+          <p class="py-2">Раздел «{{ item.text }}»</p>
+        </CdsTabsViewItem>
+      </template>
+    </CdsTabs>
+  </div>
+</template>
+```
+
+## Card sections
+
+Classic tabs: a product card with sections and a shared `v-model`. The review counter is a `CdsBadge` with the `inline` prop right inside the tab slot.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsBadge,
+  CdsCard,
+  CdsCardText,
+  CdsTab,
+  CdsTabs,
+  CdsTabsView,
+  CdsTabsViewItem
+} from '@central-design-system/components';
+import { ref } from 'vue';
+
+const tab = ref('description');
+</script>
+
+<template>
+  <CdsCard class="m-auto max-w-[560px]">
+    <CdsTabs v-model="tab">
+      <CdsTab value="description">Описание</CdsTab>
+      <CdsTab value="specs">Характеристики</CdsTab>
+      <CdsTab value="reviews">
+        Отзывы
+
+        <template #append>
+          <CdsBadge content="12" inline />
+        </template>
+      </CdsTab>
+    </CdsTabs>
+
+    <CdsCardText>
+      <CdsTabsView v-model="tab">
+        <CdsTabsViewItem value="description">
+          Офисное кресло с регулируемой спинкой и поясничной поддержкой. Подходит для работы за компьютером дольше
+          восьми часов в день.
+        </CdsTabsViewItem>
+
+        <CdsTabsViewItem value="specs">
+          <dl class="grid grid-cols-2 gap-x-2 gap-y-1">
+            <dt class="text-content-secondary">Максимальная нагрузка</dt>
+            <dd>120 кг</dd>
+            <dt class="text-content-secondary">Материал обивки</dt>
+            <dd>Сетка, ткань</dd>
+            <dt class="text-content-secondary">Гарантия</dt>
+            <dd>3 года</dd>
+          </dl>
+        </CdsTabsViewItem>
+
+        <CdsTabsViewItem value="reviews">
+          «Собирается за десять минут, спинка держит отлично» — и ещё 11 отзывов со средней оценкой 4,8.
+        </CdsTabsViewItem>
+      </CdsTabsView>
+    </CdsCardText>
+  </CdsCard>
+</template>
+```
+
+## List filter
+
+Tabs work without a content area too: `v-model` holds the selected status and the list is filtered by it through a `computed`. There is a single content area — only the selection changes.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsList, CdsListItem, CdsTab, CdsTabs, CdsTag } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const status = ref('all');
+
+const orders = [
+  { id: 1, title: 'Поставка канцелярии', company: 'ООО «Ромашка»', status: 'active', label: 'В работе' },
+  { id: 2, title: 'Ремонт офиса', company: 'ООО «Василёк»', status: 'done', label: 'Завершён' },
+  { id: 3, title: 'Закупка ноутбуков', company: 'АО «Полюс»', status: 'active', label: 'В работе' },
+  { id: 4, title: 'Клининг склада', company: 'ООО «Чисто»', status: 'done', label: 'Завершён' }
+];
+
+const filtered = computed(() =>
+  status.value === 'all' ? orders : orders.filter((order) => order.status === status.value)
+);
+</script>
+
+<template>
+  <div class="m-auto flex w-[420px] flex-col gap-2">
+    <CdsTabs v-model="status">
+      <CdsTab value="all">Все</CdsTab>
+      <CdsTab value="active">В работе</CdsTab>
+      <CdsTab value="done">Завершённые</CdsTab>
+    </CdsTabs>
+
+    <CdsList lines="two">
+      <CdsListItem
+        v-for="order of filtered"
+        :key="order.id"
+        :value="order.id"
+        :title="order.title"
+        :subtitle="order.company"
+      >
+        <template #append>
+          <CdsTag size="sm" :text="order.label" />
+        </template>
+      </CdsListItem>
+    </CdsList>
+  </div>
+</template>
+```
+
+## Lazy loading of sections
+
+A heavy section loads on the first open: a `watch` on `v-model` fires the request, `CdsSkeletonLoader` stands in for the content while it loads, and the already loaded sections open instantly.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSkeletonLoader, CdsTab, CdsTabs, CdsTabsView, CdsTabsViewItem } from '@central-design-system/components';
+import { ref, watch } from 'vue';
+
+const tab = ref('summary');
+const loaded = ref(['summary']);
+const loading = ref(false);
+
+watch(tab, async (value) => {
+  if (loaded.value.includes(value as string)) return;
+
+  loading.value = true;
+  await new Promise((resolve) => setTimeout(resolve, 900));
+  loaded.value = [...loaded.value, value as string];
+  loading.value = false;
+});
+</script>
+
+<template>
+  <div class="m-auto max-w-[560px]">
+    <CdsTabs v-model="tab">
+      <CdsTab value="summary">Сводка</CdsTab>
+      <CdsTab value="analytics">Аналитика</CdsTab>
+      <CdsTab value="reports">Отчёты</CdsTab>
+    </CdsTabs>
+
+    <div class="pt-2">
+      <CdsSkeletonLoader v-if="loading" type="article" />
+
+      <CdsTabsView v-else v-model="tab">
+        <CdsTabsViewItem value="summary"> Выручка за квартал выросла на 12%, средний чек — на 4%. </CdsTabsViewItem>
+        <CdsTabsViewItem value="analytics"> Данные аналитики загрузились и закешировались. </CdsTabsViewItem>
+        <CdsTabsViewItem value="reports"> Отчёты сформированы и готовы к выгрузке. </CdsTabsViewItem>
+      </CdsTabsView>
+    </div>
+  </div>
+</template>
+```
+
+## Sections in a "More" menu
+
+When there are more sections than fit into the bar, the rare ones hide into a [CdsMenu](../cds-menu/api.md) whose activator is a regular "More" tab in the same bar. A click on "More" immediately shows the first section from the menu, the selected item takes the place of the first visible tab (the displaced one moves into the menu), and if the menu is closed without a choice, the bar and the content return to the current section.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsList,
+  CdsListItem,
+  CdsMenu,
+  CdsTab,
+  CdsTabs,
+  CdsTabsView,
+  CdsTabsViewItem
+} from '@central-design-system/components';
+import { computed, nextTick, ref, watch } from 'vue';
+
+const tab = ref('Сводка');
+const visible = ref(['Сводка', 'Продажи', 'Закупки']);
+const more = ref(['Логистика', 'Финансы', 'Персонал']);
+
+const menu = ref(false);
+let lastSection = tab.value;
+
+const section = computed(() => (visible.value.includes(tab.value) ? tab.value : more.value[0]));
+
+watch(tab, (value) => {
+  if (visible.value.includes(value)) lastSection = value;
+});
+
+watch(menu, (open) => {
+  if (!open && !visible.value.includes(tab.value)) tab.value = lastSection;
+});
+
+async function select(item: string) {
+  const replaced = visible.value.shift();
+  visible.value.push(item);
+  more.value = more.value.filter((section) => section !== item);
+  if (replaced) more.value.push(replaced);
+
+  await nextTick();
+  tab.value = item;
+}
+</script>
+
+<template>
+  <div class="m-auto max-w-[560px]">
+    <CdsTabs v-model="tab">
+      <CdsTab v-for="item in visible" :key="item" :value="item">{{ item }}</CdsTab>
+
+      <CdsMenu v-if="more.length" v-model="menu">
+        <template #activator="{ props }">
+          <CdsTab append-icon="chevron-down" v-bind="props">Ещё</CdsTab>
+        </template>
+
+        <CdsList>
+          <CdsListItem v-for="item in more" :key="item" :title="item" @click="select(item)" />
+        </CdsList>
+      </CdsMenu>
+    </CdsTabs>
+
+    <CdsTabsView :model-value="section" class="mt-2">
+      <CdsTabsViewItem v-for="item in [...visible, ...more]" :key="item" :value="item">
+        Показатели раздела «{{ item }}» за текущий квартал.
+      </CdsTabsViewItem>
+    </CdsTabsView>
+  </div>
+</template>
+```

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

@@ -0,0 +1,10 @@
+# CdsTabs — 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 tab name is a short noun: the section is easy to scan. | Sentence-long names stretch the bar and read slower. |
+| Two to six tabs: every section is visible at once and the choice is obvious. | A dozen tabs cannot be scanned — merge adjacent sections or move the rare ones into a menu. |
+| Tabs are sections of equal weight that are switched in any order. | For a sequential process take CdsSteps: tabs show neither order nor progress. |

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

@@ -0,0 +1,40 @@
+# CdsTabs — 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.
+
+## _CdsTabs.variables.scss
+
+```scss
+// CdsTabs
+$tabs-gap: var(--cds-spacing-100) !default;
+$tabs-height: 24px !default;
+$tabs-stacked-height: 72px !default;
+$tabs-inner-padding: var(--cds-spacing-100) !default;
+$tabs-border-radius: var(--cds-border-radius-300) !default;
+$tabs-color: (
+  'background': rgb(var(--cds-color-fill-secondary), 0.5)
+) !default;
+
+// CdsTab
+$tab-max-width: 360px !default;
+$tab-fixed-max-width: 300px !default;
+$tab-min-width: 16px !default;
+$tab-padding: 0 var(--cds-spacing-300) !default;
+$tab-border-radius: var(--cds-border-radius-200) !default;
+$tab-color: (
+  'default': (
+    'background': transparent,
+    'content': rgb(var(--cds-color-content-primary))
+  ),
+  'hover': (
+    'background': rgb(var(--cds-color-fill-primary-hover)),
+    'content': rgb(var(--cds-color-content-primary))
+  ),
+  'selected': (
+    'background': rgb(var(--cds-color-fill-elevated)),
+    'content': rgb(var(--cds-color-content-primary))
+  )
+) !default;
+```