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

package/skills/cds-builder/references/components/cds-slide-view/examples.md

@@ -0,0 +1,311 @@
+# CdsSlideView — 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 slide view shows one slide out of a set and switches them with a shift animation: arrows, swipes and `v-model` page forward and backward. It is the base for carousels and step-by-step interfaces — [CdsCarousel](../cds-carousel/api.md) is built on the slide view.
+
+## Arrows
+
+By default there are no arrows — the slides are paged with a swipe on touch devices or programmatically through `v-model`. The `show-arrows` prop turns the arrows on: `true` shows them at all times, `"hover"` only on hover over the slide. Keyboard navigation comes together with the arrows. The swipe is turned off with `:touch="false"`, and the icons of the arrows are changed with the `prev-icon` and `next-icon` props.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSlideView, CdsSlideViewItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const slide = ref(0);
+</script>
+
+<template>
+  <CdsSlideView v-model="slide" show-arrows="hover" continuous class="m-auto max-w-[520px]">
+    <CdsSlideViewItem v-for="n in 4" :key="n">
+      <div class="flex h-[180px] items-center justify-center bg-surface-secondary text-500">Слайд {{ n }}</div>
+    </CdsSlideViewItem>
+  </CdsSlideView>
+</template>
+```
+
+## Vertical arrows
+
+The `vertical-arrows` prop gathers the arrows turned on by `show-arrows` into a column at the edge of the slide: `true` or `'left'` puts them on the left, `'right'` on the right.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSlideView, CdsSlideViewItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const slide = ref(0);
+</script>
+
+<template>
+  <CdsSlideView v-model="slide" show-arrows vertical-arrows="right" continuous class="m-auto max-w-[520px]">
+    <CdsSlideViewItem v-for="n in 4" :key="n">
+      <div class="flex h-[180px] items-center justify-center bg-surface-secondary text-500">Слайд {{ n }}</div>
+    </CdsSlideViewItem>
+  </CdsSlideView>
+</template>
+```
+
+## Continuous paging
+
+The `continuous` prop closes the slides into a ring: the first one follows the last. Without it the matching arrow is hidden on the edge slides.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSlideView, CdsSlideViewItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const slide = ref(0);
+</script>
+
+<template>
+  <CdsSlideView v-model="slide" show-arrows continuous class="m-auto max-w-[520px]">
+    <CdsSlideViewItem v-for="n in 4" :key="n">
+      <div class="flex h-[180px] items-center justify-center bg-surface-secondary text-500">Слайд {{ n }}</div>
+    </CdsSlideViewItem>
+  </CdsSlideView>
+</template>
+```
+
+## Direction
+
+The `direction="vertical"` prop moves the slides vertically — the navigation keys change together with the animation: ↑ / ↓ work instead of ← / →.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSlideView, CdsSlideViewItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const slide = ref(0);
+</script>
+
+<template>
+  <CdsSlideView v-model="slide" show-arrows direction="vertical" continuous class="m-auto max-w-[520px]">
+    <CdsSlideViewItem v-for="n in 4" :key="n">
+      <div class="flex h-[180px] items-center justify-center bg-surface-secondary text-500">Слайд {{ n }}</div>
+    </CdsSlideViewItem>
+  </CdsSlideView>
+</template>
+```
+
+## Transitions
+
+The `crossfade` prop replaces the shift with a soft dissolve — a good fit when the slides are not lined up in a sequence. On a single `CdsSlideViewItem` the animation is configured with the `transition` and `reverse-transition` props: the name of your own transition animation or `false` to turn it off. The content of a slide is rendered on the first show; the `eager` prop renders it right away — useful for SEO.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSlideView, CdsSlideViewItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const slide = ref(0);
+</script>
+
+<template>
+  <CdsSlideView v-model="slide" show-arrows crossfade continuous class="m-auto max-w-[520px]">
+    <CdsSlideViewItem v-for="n in 4" :key="n">
+      <div class="flex h-[180px] items-center justify-center bg-surface-secondary text-500">Слайд {{ n }}</div>
+    </CdsSlideViewItem>
+  </CdsSlideView>
+</template>
+```
+
+## Slots
+
+The `additional` slot receives a `group` with the selection methods — but an outer `v-model` is usually enough, as in the demo with the dot indicators.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsSlideView, CdsSlideViewItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const slide = ref(0);
+const total = 4;
+</script>
+
+<template>
+  <CdsSlideView v-model="slide" show-arrows continuous class="m-auto max-w-[520px]">
+    <template #prev="{ props }">
+      <CdsButton appearance="secondary" size="sm" icon="chevron-left" aria-label="Назад" @click="props.onClick" />
+    </template>
+
+    <CdsSlideViewItem v-for="n in total" :key="n">
+      <div class="flex h-[180px] items-center justify-center bg-surface-secondary text-500">Слайд {{ n }}</div>
+    </CdsSlideViewItem>
+
+    <template #next="{ props }">
+      <CdsButton appearance="secondary" size="sm" icon="chevron-right" aria-label="Вперёд" @click="props.onClick" />
+    </template>
+
+    <template #additional>
+      <div class="mt-2 flex justify-center gap-1">
+        <button
+          v-for="n in total"
+          :key="n"
+          type="button"
+          class="h-[8px] w-[8px] cursor-pointer rounded-full border-none p-0"
+          :class="slide === n - 1 ? 'bg-brand-primary' : 'bg-surface-secondary'"
+          :aria-label="`Слайд ${n}`"
+          @click="slide = n - 1"
+        />
+      </div>
+    </template>
+  </CdsSlideView>
+</template>
+```
+
+## A step-by-step form
+
+The steps of a questionnaire are switched with buttons through `v-model`: the arrows stay off and the swipes are muted with `:touch="false"` — the only way to move is "Back" and "Next". The height of the container animates to the content of the active step automatically.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsSlideView, CdsSlideViewItem, CdsTextInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const step = ref(0);
+const total = 3;
+
+const name = ref('');
+const email = ref('');
+const company = ref('');
+</script>
+
+<template>
+  <div class="m-auto flex w-full max-w-[400px] flex-col gap-2">
+    <span class="text-200 text-content-secondary">Шаг {{ step + 1 }} из {{ total }}</span>
+
+    <CdsSlideView v-model="step" :touch="false">
+      <CdsSlideViewItem>
+        <div class="flex flex-col gap-2">
+          <CdsTextInput v-model="name" label="Имя" placeholder="Александра" />
+          <CdsTextInput v-model="email" label="Рабочая почта" placeholder="name@company.ru" />
+        </div>
+      </CdsSlideViewItem>
+
+      <CdsSlideViewItem>
+        <div class="flex flex-col gap-2">
+          <CdsTextInput v-model="company" label="Компания" placeholder="ООО «Ромашка»" />
+        </div>
+      </CdsSlideViewItem>
+
+      <CdsSlideViewItem>
+        <div class="rounded-200 bg-surface-secondary p-4">
+          <p class="m-0 text-200">Проверьте данные перед отправкой:</p>
+          <p class="m-0 mt-1 text-200 text-content-secondary">
+            {{ name || 'Имя не указано' }} · {{ email || 'почта не указана' }} · {{ company || 'компания не указана' }}
+          </p>
+        </div>
+      </CdsSlideViewItem>
+    </CdsSlideView>
+
+    <div class="flex justify-between">
+      <CdsButton appearance="secondary" text="Назад" :disabled="step === 0" @click="step--" />
+      <CdsButton v-if="step < total - 1" text="Далее" @click="step++" />
+      <CdsButton v-else text="Отправить" />
+    </div>
+  </div>
+</template>
+```
+
+## Customer testimonials
+
+The quotes are not lined up in a sequence, so `crossfade` replaces the shift. The arrows appear on hover (`show-arrows="hover"`), the position is shown by a counter in the `additional` slot, and `continuous` pages the testimonials in a loop.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSlideView, CdsSlideViewItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const slide = ref(0);
+
+const reviews = [
+  {
+    text: 'Перевели закупки в электронный вид за две недели — поставщики подключились без единого звонка в поддержку.',
+    author: 'Мария, директор по закупкам'
+  },
+  {
+    text: 'Удобно сравнивать предложения: все документы и цены собраны в одном месте.',
+    author: 'Игорь, руководитель отдела снабжения'
+  },
+  {
+    text: 'Интеграция с нашей учётной системой заняла один день. Теперь заявки уходят автоматически.',
+    author: 'Светлана, ИТ-директор'
+  }
+];
+</script>
+
+<template>
+  <CdsSlideView v-model="slide" crossfade continuous show-arrows="hover" class="m-auto max-w-[520px]">
+    <CdsSlideViewItem v-for="review in reviews" :key="review.author">
+      <figure class="m-0 flex h-[200px] flex-col justify-center gap-2 rounded-200 bg-surface-secondary px-12">
+        <blockquote class="m-0 text-300">«{{ review.text }}»</blockquote>
+        <figcaption class="text-200 text-content-secondary">{{ review.author }}</figcaption>
+      </figure>
+    </CdsSlideViewItem>
+
+    <template #additional>
+      <p class="m-0 mt-1 text-center text-200 text-content-secondary">{{ slide + 1 }} / {{ reviews.length }}</p>
+    </template>
+  </CdsSlideView>
+</template>
+```
+
+## An events feed
+
+A compact widget with vertical paging: `direction="vertical"` moves the events from the bottom up, and `vertical-arrows="right"` gathers the arrows into a column at the right edge.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsIcon, CdsSlideView, CdsSlideViewItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const slide = ref(0);
+
+const events = [
+  { icon: 'notification', text: 'Новая заявка № 142 от ООО «Ромашка»', time: '2 минуты назад' },
+  { icon: 'comment', text: 'Поставщик ответил на вопрос по лоту № 7', time: '15 минут назад' },
+  { icon: 'doc', text: 'Подписан договор по закупке № 89', time: 'час назад' },
+  { icon: 'winner', text: 'Определён победитель тендера № 56', time: '3 часа назад' }
+];
+</script>
+
+<template>
+  <CdsSlideView
+    v-model="slide"
+    show-arrows
+    direction="vertical"
+    vertical-arrows="right"
+    continuous
+    class="m-auto max-w-[440px]"
+  >
+    <CdsSlideViewItem v-for="event in events" :key="event.text">
+      <div class="flex h-[96px] items-center gap-3 rounded-200 bg-surface-secondary pl-4 pr-[64px]">
+        <CdsIcon :icon="event.icon" />
+        <div class="flex flex-col">
+          <span class="text-200">{{ event.text }}</span>
+          <span class="text-100 text-content-secondary">{{ event.time }}</span>
+        </div>
+      </div>
+    </CdsSlideViewItem>
+  </CdsSlideView>
+</template>
+```

package/skills/cds-builder/references/components/cds-slide-view/guidelines.md

@@ -0,0 +1,9 @@
+# CdsSlideView — 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 |
+| --- | --- |
+| Dots or a counter show how many slides there are and which one is open now. | Without a position indicator it is unclear how much content is hidden and where you are. |
+| Slides of the same height: the container is stable and the content below does not jump. | Slides of different heights jerk the page on every switch. |

package/skills/cds-builder/references/components/cds-slide-view/tokens.md

@@ -0,0 +1,14 @@
+# CdsSlideView — 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.
+
+## _CdsSlideView.variables.scss
+
+```scss
+$slide-view-transition: .3s cubic-bezier(.25, .8, .50, 1) !default;
+$slide-view-controls-padding: 0 16px !default;
+$slide-view-controls-vertical-gap: 12px !default;
+$slide-view-crossfade-blend-mode: plus-lighter !default;
+```

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

@@ -0,0 +1,31 @@
+# CdsStages — 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 stage bar shows the course of a business process: which stages are behind, which one is running now and where the process stopped because of an error. The component only displays the status — the stages are not clickable, so the bar fits cards, headers and lists where the state of the process has to be read at a glance.
+
+## CdsStages
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `current` | `string \| number \| null \| undefined` | `null` | no | Current stage |
+| `finished` | `boolean \| undefined` | — | no | All stages are finished |
+| `itemChildren` | `SelectItemKey` | `'children'` | no | Object field that holds the child items, or a function that returns them |
+| `itemProps` | `SelectItemKey` | `'props'` | no | Object field that holds the props of the item, or a function that returns them |
+| `items` | `any[] \| undefined` | `[]` | no | Array of items to display |
+| `itemTitle` | `SelectItemKey` | `'title'` | no | Object field used as the item title, or a function that returns it |
+| `itemType` | `SelectItemKey` | `'type'` | no | Object field that defines the item type (`item`, `divider`, `subheader`), or a function that returns it |
+| `itemValue` | `SelectItemKey` | `'value'` | no | Object field used as the item value, or a function that returns it |
+| `returnObject` | `boolean \| undefined` | — | no | Return an object in the model value instead of an array |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `valueComparator` | `ValueComparator \| undefined` | — | no | Function that compares item values to determine the selected state |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `isCurrent` | `(idx: number) => boolean` | Checks whether the stage with the given index is the current one. |
+| `isFinished` | `boolean` | Whether all the stages are passed. |

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

@@ -0,0 +1,230 @@
+# CdsStages — 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 stage bar shows the course of a business process: which stages are behind, which one is running now and where the process stopped because of an error. The component only displays the status — the stages are not clickable, so the bar fits cards, headers and lists where the state of the process has to be read at a glance.
+
+## Stages
+
+Pass an array of objects into `items`: the title and the value of a stage are read by the `item-title` and `item-value` keys (`title` and `value` by default). As long as `current` is not set, all the stages stay neutral — the process has not started yet.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsStages } from '@central-design-system/components';
+
+const items = [
+  { title: 'Заявка', value: 1 },
+  { title: 'Проверка', value: 2 },
+  { title: 'Согласование', value: 3 },
+  { title: 'Договор', value: 4 }
+];
+</script>
+
+<template>
+  <div class="flex items-center justify-center">
+    <CdsStages :items="items" />
+  </div>
+</template>
+```
+
+## The current stage
+
+`current` takes the value of the active stage: it is highlighted with the accent color, and the stages to the left of it are marked as passed.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsStages } from '@central-design-system/components';
+
+const items = [
+  { title: 'Заявка', value: 1 },
+  { title: 'Проверка', value: 2 },
+  { title: 'Согласование', value: 3 },
+  { title: 'Договор', value: 4 }
+];
+</script>
+
+<template>
+  <div class="flex items-center justify-center">
+    <CdsStages :items="items" :current="3" />
+  </div>
+</template>
+```
+
+## An error
+
+An error is set in the data of a stage — `props: { error: true }` on an `items` element. The stage turns red once the process has reached it: when it is the current one or is already passed.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsStages } from '@central-design-system/components';
+
+const items = [
+  { title: 'Заявка', value: 1 },
+  { title: 'Проверка', value: 2 },
+  { title: 'Согласование', value: 3, props: { error: true } },
+  { title: 'Договор', value: 4 }
+];
+</script>
+
+<template>
+  <div class="flex items-center justify-center">
+    <CdsStages :items="items" :current="3" />
+  </div>
+</template>
+```
+
+## Finishing the process
+
+The `finished` prop marks all the stages as passed at once — the value of `current` does not matter then.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsStages } from '@central-design-system/components';
+
+const items = [
+  { title: 'Заявка', value: 1 },
+  { title: 'Проверка', value: 2 },
+  { title: 'Согласование', value: 3 },
+  { title: 'Договор', value: 4 }
+];
+</script>
+
+<template>
+  <div class="flex items-center justify-center">
+    <CdsStages :items="items" finished />
+  </div>
+</template>
+```
+
+## Order progress
+
+The value of `current` comes from the data and changes as the order is processed. Once the last stage is passed, turn `finished` on — the whole bar becomes green.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsStages } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const stages = [
+  { title: 'Оформлен', value: 'created' },
+  { title: 'Комплектация', value: 'assembly' },
+  { title: 'В пути', value: 'shipping' },
+  { title: 'Получен', value: 'delivered' }
+];
+
+const index = ref(0);
+
+const finished = computed(() => index.value >= stages.length);
+const current = computed(() => (finished.value ? null : stages[index.value].value));
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-3">
+    <CdsStages class="w-full" :items="stages" :current="current" :finished="finished" />
+
+    <CdsButton v-if="!finished" text="Следующий этап" @click="index++" />
+    <CdsButton v-else appearance="secondary" text="Оформить новый заказ" @click="index = 0" />
+  </div>
+</template>
+```
+
+## Rejected during review
+
+The status of the listing is stored as a single string, and `items`, `current` and `finished` are computed from it. On rejection the "Проверка" stage gets `props.error` and turns red — the user immediately sees where the process stopped.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsStages } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+type Status = 'review' | 'rejected' | 'published';
+
+const status = ref<Status>('review');
+
+const items = computed(() => [
+  { title: 'Черновик', value: 'draft' },
+  { title: 'Проверка', value: 'review', props: { error: status.value === 'rejected' } },
+  { title: 'Публикация', value: 'published' }
+]);
+
+const current = computed(() => (status.value === 'rejected' ? 'review' : status.value));
+const finished = computed(() => status.value === 'published');
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-3">
+    <CdsStages class="w-full" :items="items" :current="current" :finished="finished" />
+
+    <div class="flex gap-2">
+      <template v-if="status === 'review'">
+        <CdsButton text="Одобрить" @click="status = 'published'" />
+        <CdsButton appearance="secondary" text="Отклонить" @click="status = 'rejected'" />
+      </template>
+
+      <CdsButton v-else appearance="secondary" text="Вернуть на проверку" @click="status = 'review'" />
+    </div>
+  </div>
+</template>
+```
+
+## Statuses in a list
+
+The bar is compact and does not intercept clicks, so it is easy to repeat in every row of a list or a table: the width comes from a utility class, and the state of the row from its own `current`, `finished` and error.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsStages } from '@central-design-system/components';
+
+interface Order {
+  name: string;
+  current?: number;
+  error?: boolean;
+  finished?: boolean;
+}
+
+const stages = [
+  { title: 'Заявка', value: 1 },
+  { title: 'Проверка', value: 2 },
+  { title: 'Договор', value: 3 }
+];
+
+const orders: Order[] = [
+  { name: 'Поставка канцтоваров', current: 2 },
+  { name: 'Обслуживание техники', current: 2, error: true },
+  { name: 'Ремонт переговорной', finished: true }
+];
+
+const stagesFor = (order: Order) =>
+  stages.map((stage) => (order.error && stage.value === order.current ? { ...stage, props: { error: true } } : stage));
+</script>
+
+<template>
+  <div class="m-auto flex w-[560px] flex-col gap-3">
+    <div v-for="order in orders" :key="order.name" class="flex items-center justify-between gap-3">
+      <span class="text-200">{{ order.name }}</span>
+
+      <CdsStages
+        class="w-[300px] shrink-0"
+        :items="stagesFor(order)"
+        :current="order.current"
+        :finished="order.finished"
+      />
+    </div>
+  </div>
+</template>
+```

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

@@ -0,0 +1,10 @@
+# CdsStages — 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 stage title is one or two words: the bar is read at a glance. | Sentence-long titles stretch the stages and repeat the same words. |
+| Three to six stages: each one is a meaningful milestone of the process. | Splitting into tiny steps turns the bar into an unreadable comb. |
+| The error belongs to the stage where the process stopped: usually the current one. | Errors on passed stages alarm for nothing: the process moved on, they no longer matter. |

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

@@ -0,0 +1,27 @@
+# CdsStages — 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.
+
+## _CdsStages.variables.scss
+
+```scss
+@use 'sass:map';
+
+$stages-color: (
+  'background': rgb(var(--cds-color-fill-primary)),
+  'color': rgb(var(--cds-color-line-primary)),
+  'text': rgb(var(--cds-color-content-tertiary)),
+  'active': rgb(var(--cds-color-status-progress-line)),
+  'active-text': rgb(var(--cds-color-status-progress-content)),
+  'success': rgb(var(--cds-color-status-success-line)),
+  'success-text': rgb(var(--cds-color-status-success-content)),
+  'error': rgb(var(--cds-color-status-danger-line)),
+  'error-text': rgb(var(--cds-color-status-danger-content))
+) !default;
+$stages-border: var(--cds-border-200) solid map.get($stages-color, 'color') !default;
+$stages-border-radius: var(--cds-border-radius-200) !default;
+$stages-inner-padding: var(--cds-spacing-200) var(--cds-spacing-400) var(--cds-spacing-200) var(--cds-spacing-500) !default;
+$stages-arrow-offset: -15px !default;
+```

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

@@ -0,0 +1,24 @@
+# CdsStatus — 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 status is a non-interactive indicator of the state of an object: the request is paid, the document is under review, the payment is overdue. The `status` prop sets the semantics — the color and the icon — while `variant` sets the display mode: a prominent filled badge or compact text with a colored icon.
+
+## CdsStatus
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `content` | `string \| number \| undefined` | — | no | Content displayed in the component. |
+| `status` | `"progress" \| "success" \| "danger" \| "warning" \| "info" \| undefined` | `'info'` | no | Semantic status — drives the color and the default icon. |
+| `text` | `string \| number \| undefined` | — | no | Text displayed in the component. |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `variant` | `"fill" \| "text" \| undefined` | `'fill'` | no | Display mode: `fill` — a filled badge without an icon; `text` — a transparent background with a colored status icon. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Slot for the status text. |