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

package/skills/cds-builder/references/components/cds-skeleton-loader/guidelines.md

@@ -0,0 +1,10 @@
+# CdsSkeletonLoader — 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 skeleton repeats the structure of the future content: a heading, lines of text, buttons. | A gray rectangle instead of a structure does not tell what will appear in its place. |
+| As many bones as there will be items — the list does not jump after loading. | Eight skeleton rows for three records: the content arrives and the height collapses. |
+| The shimmer animation shows that the loading is happening right now. | A static boilerplate on a live screen reads as broken layout — it is for mockups only. |

package/skills/cds-builder/references/components/cds-skeleton-loader/tokens.md

@@ -0,0 +1,62 @@
+# CdsSkeletonLoader — 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.
+
+## _CdsSkeletonLoader.variables.scss
+
+```scss
+@use '../../../styles/tools';
+
+$skeleton-loader-background: rgb(var(--cds-color-fill-secondary)) !default;
+$skeleton-loader-text-background: rgb(var(--cds-color-fill-secondary-active)) !default;
+$skeleton-loader-border-radius: var(--cds-border-radius-300) !default;
+$skeleton-loader-loading-animation: loading 1.5s infinite !default;
+$skeleton-loader-bone-background: linear-gradient(
+  90deg,
+  rgb(255 255 255 / 0%),
+  rgb(255 255 255 / 30%),
+  rgb(255 255 255 / 0%)
+) !default;
+$skeleton-loader-loading-transform: translateX(-100%) !default;
+$skeleton-loader-gutter: var(--cds-spacing-300) !default;
+$skeleton-loader-avatar-margin: var(--cds-spacing-200) var(--cds-spacing-400) !default;
+$skeleton-loader-avatar-width: tools.to-rem(40px) !default;
+$skeleton-loader-avatar-height: tools.to-rem(40px) !default;
+$skeleton-loader-button-border-radius: var(--cds-border-radius-200) !default;
+$skeleton-loader-button-height: tools.to-rem(32px) !default;
+$skeleton-loader-button-width: tools.to-rem(96px) !default;
+$skeleton-loader-chip-border-radius: var(--cds-border-radius-300) !default;
+$skeleton-loader-chip-height: tools.to-rem(24px) !default;
+$skeleton-loader-chip-width: tools.to-rem(64px) !default;
+$skeleton-loader-date-picker-width: tools.to-rem(248px) !default;
+$skeleton-loader-date-picker-calendar-margin: var(--cds-spacing-50) !default;
+$skeleton-loader-date-picker-border-radius: inherit !default;
+$skeleton-loader-date-picker-days-margin: var(--cds-spacing-50) !default;
+$skeleton-loader-date-picker-heading-max-width: tools.to-rem(248px) !default;
+$skeleton-loader-date-picker-heading-width: 40% !default;
+$skeleton-loader-date-picker-text-max-width: tools.to-rem(88px) !default;
+$skeleton-loader-date-picker-text-width: 20% !default;
+$skeleton-loader-date-picker-day-width: tools.to-rem(32px) !default;
+$skeleton-loader-date-picker-day-height: tools.to-rem(32px) !default;
+$skeleton-loader-divider-border-radius: 1px !default;
+$skeleton-loader-divider-height: 1px !default;
+$skeleton-loader-heading-border-radius: tools.to-rem(12px) !default;
+$skeleton-loader-heading-height: tools.to-rem(24px) !default;
+$skeleton-loader-image-height: tools.to-rem(150px) !default;
+$skeleton-loader-subtitle-max-width: 70% !default;
+$skeleton-loader-subtitle-text-height: tools.to-rem(16px) !default;
+$skeleton-loader-subtitle-text-border-radius: tools.to-rem(8px) !default;
+$skeleton-loader-text-border-radius: tools.to-rem(6px) !default;
+$skeleton-loader-text-height: tools.to-rem(8px) !default;
+$skeleton-loader-text-margin: var(--cds-spacing-200) !default;
+$skeleton-loader-text-two-text-margin-top: calc(var(--cds-spacing-100) * -1) !default;
+$skeleton-loader-text-two-text-max-width: 50% !default;
+$skeleton-loader-text-three-text-max-width: 70% !default;
+$skeleton-loader-table-thead-width: 10% !default;
+$skeleton-loader-table-row-margin: 0 var(--cds-spacing-200) !default;
+$skeleton-loader-table-row-text-margin: var(--cds-spacing-200) !default;
+$skeleton-loader-table-cell-height: tools.to-rem(12px) !default;
+$skeleton-loader-table-cell-width: tools.to-rem(88px) !default;
+```

package/skills/cds-builder/references/components/cds-slide-group/api.md

@@ -0,0 +1,76 @@
+# CdsSlideGroup — 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 slide group lays a set of elements out in a single scrollable line: when the elements do not fit, the strip is paged with arrows. It can also drive a selection through `v-model` — [CdsTabs](../cds-tabs/api.md) and [CdsTagGroup](../cds-tag-group/api.md) are built on the slide group.
+
+Family: [CdsSlideGroup](#cdsslidegroup) + subcomponents: [CdsSlideGroupItem](#cdsslidegroupitem).
+
+## CdsSlideGroup
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `centerActive` | `boolean \| undefined` | — | no | Forces the active component to be aligned to the center. |
+| `contentClass` | `any` | — | no | Adds classes to the slide group container |
+| `contentStyle` | `any` | — | no | Adds inline styles to the slide group container |
+| `direction` | `"horizontal" \| "vertical" \| undefined` | `'horizontal'` | no | Switches the component between horizontal and vertical layout. |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `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 |
+| `mobile` | `boolean \| null \| undefined` | `null` | no | Determines the display mode of the component: `true` renders it in mobile mode, `false` in desktop mode, `null` makes the mode depend on the current breakpoint. |
+| `mobileBreakpoint` | `number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined` | — | no | Sets the breakpoint at which the component switches to mobile mode. Accepts a number (for example, 600) or the name of a predefined breakpoint (`xs`, `sm`, `md`, `lg`, `xl`). |
+| `modelValue` | `any` | — | no | Value of the selected items of the group |
+| `multiple` | `boolean \| undefined` | — | no | Allows selecting several items at once |
+| `nextIcon` | `IconValue \| undefined` | `'next'` | no | Icon for the “next” button. |
+| `prevIcon` | `IconValue \| undefined` | `'prev'` | no | Icon for the “previous” button. |
+| `required` | `boolean \| "force" \| undefined` | — | no | Requires at least one item to stay selected |
+| `scrollToActive` | `boolean \| undefined` | `true` | no | When `true`, the container scrolls the active component into view whenever it changes. |
+| `selectedClass` | `string \| undefined` | `'cds-slide-group-item--active'` | no | CSS class applied in the selected state |
+| `showArrows` | `string \| boolean \| undefined` | — | no | Changes how the arrows are shown. By default the arrows appear on desktop devices when the container overflows and stay hidden on mobile devices. `true` also shows them on mobile on overflow, `desktop` always shows them on desktop, `mobile` always on mobile, `always` on both, and `never` disables the arrows. |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `SlideGroupSlot` | Slot for the CdsSlideGroupItem components |
+| `next` | `SlideGroupSlot` | Slot for the "next" button. |
+| `prev` | `SlideGroupSlot` | Slot for the "previous" button. |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `focus` | `(location?: "next" \| "prev" \| "first" \| "last" \| undefined) => void` | Focuses the component |
+| `hasNext` | `boolean` | Returns true if there are elements after the current index. |
+| `hasPrev` | `boolean` | Returns true if there are elements before the current index. |
+| `scrollOffset` | `number` | Returns the scroll offset of the element |
+| `scrollTo` | `(location: "next" \| "prev") => void` | Scrolls to the element by its index |
+| `selected` | `readonly string[]` | Returns the index of the selected element |
+
+---
+
+## CdsSlideGroupItem
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `selectedClass` | `string \| undefined` | — | no | CSS class applied in the selected state |
+| `value` | `any` | — | no | Value of the component within the group |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `group:selected` | `[value: { value: boolean; }]` | Fires when an element is selected inside the group. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `{ isSelected: boolean; select: (value: boolean) => void; toggle: () => void; selectedClass: false \| (string \| undefined)[]; }` | Slot for the content |

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

@@ -0,0 +1,304 @@
+# CdsSlideGroup — 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 group lays a set of elements out in a single scrollable line: when the elements do not fit, the strip is paged with arrows. It can also drive a selection through `v-model` — [CdsTabs](../cds-tabs/api.md) and [CdsTagGroup](../cds-tag-group/api.md) are built on the slide group.
+
+## Scrolling and arrows
+
+By default the arrows appear on a desktop when the elements do not fit into the container; on mobile the strip is scrolled with a finger without arrows. The `show-arrows` prop changes this behavior: `true` shows the arrows on overflow and on mobile, `desktop` and `mobile` always show them on the matching devices, `always` always shows them, `never` never does.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsSlideGroup, CdsSlideGroupItem } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="m-auto max-w-[520px]">
+    <CdsSlideGroup show-arrows>
+      <CdsSlideGroupItem v-for="n in 15" :key="n">
+        <CdsButton appearance="tertiary" class="m-1" :text="`Элемент ${n}`" />
+      </CdsSlideGroupItem>
+    </CdsSlideGroup>
+  </div>
+</template>
+```
+
+## Selecting elements
+
+Wrap the elements into `CdsSlideGroupItem` and the group starts driving the selection: `v-model` holds the value of the selected element from its `value` prop. `CdsSlideGroupItem` itself renders nothing — its slot receives `isSelected` and `toggle`, and how to show the selected state is up to you. The `mandatory` prop forbids clearing the last selection.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsSlideGroup, CdsSlideGroupItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const selected = ref(1);
+</script>
+
+<template>
+  <div class="m-auto max-w-[520px]">
+    <CdsSlideGroup v-model="selected" mandatory show-arrows>
+      <CdsSlideGroupItem v-for="n in 12" :key="n" v-slot="{ isSelected, toggle }" :value="n">
+        <CdsButton
+          :appearance="isSelected ? 'primary' : 'tertiary'"
+          class="m-1"
+          :text="`Элемент ${n}`"
+          @click="toggle"
+        />
+      </CdsSlideGroupItem>
+    </CdsSlideGroup>
+  </div>
+</template>
+```
+
+## Selecting elements
+
+The `multiple` prop allows selecting several elements — `v-model` becomes an array, and `max` limits the number of selected ones.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsSlideGroup, CdsSlideGroupItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const selected = ref([1, 3]);
+</script>
+
+<template>
+  <div class="m-auto max-w-[520px]">
+    <CdsSlideGroup v-model="selected" multiple :max="3" show-arrows>
+      <CdsSlideGroupItem v-for="n in 12" :key="n" v-slot="{ isSelected, toggle }" :value="n">
+        <CdsButton
+          :appearance="isSelected ? 'primary' : 'tertiary'"
+          class="m-1"
+          :text="`Элемент ${n}`"
+          @click="toggle"
+        />
+      </CdsSlideGroupItem>
+    </CdsSlideGroup>
+  </div>
+</template>
+```
+
+## The active element in the center
+
+When the selection changes, the strip scrolls to the active element itself — that is the job of `scroll-to-active`, which is on by default. The `center-active` prop additionally keeps the active element in the center of the container.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsSlideGroup, CdsSlideGroupItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const selected = ref(10);
+</script>
+
+<template>
+  <div class="m-auto max-w-[520px]">
+    <CdsSlideGroup v-model="selected" center-active mandatory show-arrows>
+      <CdsSlideGroupItem v-for="n in 20" :key="n" v-slot="{ isSelected, toggle }" :value="n">
+        <CdsButton
+          :appearance="isSelected ? 'primary' : 'tertiary'"
+          class="m-1"
+          :text="`Элемент ${n}`"
+          @click="toggle"
+        />
+      </CdsSlideGroupItem>
+    </CdsSlideGroup>
+  </div>
+</template>
+```
+
+## Vertical group
+
+The `direction="vertical"` prop turns the strip into a column — limit its height with `max-height` on the group itself.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsSlideGroup, CdsSlideGroupItem } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="m-auto flex justify-center">
+    <CdsSlideGroup direction="vertical" show-arrows class="max-h-[220px]">
+      <CdsSlideGroupItem v-for="n in 12" :key="n">
+        <CdsButton appearance="tertiary" class="m-1" :text="`Элемент ${n}`" />
+      </CdsSlideGroupItem>
+    </CdsSlideGroup>
+  </div>
+</template>
+```
+
+## Slots
+
+All the slots receive the `prev`, `next`, `select` and `isSelected` methods. The click on the area of an arrow is handled by the group itself, so it is enough to put the visuals only into `prev` / `next`. The icons of the default arrows are changed without slots — with the `prev-icon` and `next-icon` props.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsFunctionalButton, CdsSlideGroup, CdsSlideGroupItem } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="m-auto max-w-[520px]">
+    <CdsSlideGroup show-arrows="always">
+      <template #prev>
+        <CdsFunctionalButton icon="arrow-left" aria-label="Назад" />
+      </template>
+
+      <CdsSlideGroupItem v-for="n in 15" :key="n">
+        <CdsButton appearance="tertiary" class="m-1" :text="`Элемент ${n}`" />
+      </CdsSlideGroupItem>
+
+      <template #next>
+        <CdsFunctionalButton icon="arrow-right" aria-label="Вперёд" />
+      </template>
+    </CdsSlideGroup>
+  </div>
+</template>
+```
+
+## Booking an appointment
+
+Two slide groups with a selection: the strip of days with `center-active` keeps the selected date in the center, and the strip of times is more compact — with `size="sm"` buttons. Both lists use `mandatory`: a booking always has a selected date and time.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsSlideGroup, CdsSlideGroupItem } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const days = [
+  { value: '04.08', label: 'Пн, 4 авг' },
+  { value: '05.08', label: 'Вт, 5 авг' },
+  { value: '06.08', label: 'Ср, 6 авг' },
+  { value: '07.08', label: 'Чт, 7 авг' },
+  { value: '08.08', label: 'Пт, 8 авг' },
+  { value: '11.08', label: 'Пн, 11 авг' },
+  { value: '12.08', label: 'Вт, 12 авг' },
+  { value: '13.08', label: 'Ср, 13 авг' }
+];
+const times = ['09:00', '10:00', '11:00', '12:00', '14:00', '15:00', '16:00', '17:00'];
+
+const day = ref('06.08');
+const time = ref('11:00');
+
+const dayLabel = computed(() => days.find((item) => item.value === day.value)?.label);
+</script>
+
+<template>
+  <div class="m-auto flex w-full max-w-[440px] flex-col gap-2">
+    <CdsSlideGroup v-model="day" center-active mandatory show-arrows>
+      <CdsSlideGroupItem v-for="item in days" :key="item.value" v-slot="{ isSelected, toggle }" :value="item.value">
+        <CdsButton :appearance="isSelected ? 'primary' : 'tertiary'" class="m-1" :text="item.label" @click="toggle" />
+      </CdsSlideGroupItem>
+    </CdsSlideGroup>
+
+    <CdsSlideGroup v-model="time" mandatory show-arrows>
+      <CdsSlideGroupItem v-for="item in times" :key="item" v-slot="{ isSelected, toggle }" :value="item">
+        <CdsButton
+          :appearance="isSelected ? 'primary' : 'secondary'"
+          size="sm"
+          class="m-1"
+          :text="item"
+          @click="toggle"
+        />
+      </CdsSlideGroupItem>
+    </CdsSlideGroup>
+
+    <p class="m-0 text-center text-200 text-content-secondary">Встреча: {{ dayLabel }} в {{ time }}</p>
+  </div>
+</template>
+```
+
+## A strip of documents
+
+The slide group works without a selection too — as a regular scrollable strip. The cards go straight into the `default` slot without `CdsSlideGroupItem`, and the arrows page the strip by the width of the visible area.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsIcon, CdsSlideGroup } from '@central-design-system/components';
+
+const documents = [
+  { title: 'Договор поставки', date: '28.07.2026' },
+  { title: 'Спецификация № 4', date: '25.07.2026' },
+  { title: 'Акт сверки', date: '21.07.2026' },
+  { title: 'Счёт № 1042', date: '18.07.2026' },
+  { title: 'Протокол разногласий', date: '14.07.2026' },
+  { title: 'Коммерческое предложение', date: '10.07.2026' }
+];
+</script>
+
+<template>
+  <div class="m-auto max-w-[520px]">
+    <CdsSlideGroup show-arrows>
+      <div
+        v-for="document in documents"
+        :key="document.title"
+        class="m-1 flex w-[160px] flex-col gap-1 rounded-200 bg-surface-secondary p-3"
+      >
+        <CdsIcon icon="doc" />
+        <span class="text-200">{{ document.title }}</span>
+        <span class="text-100 text-content-secondary">{{ document.date }}</span>
+      </div>
+    </CdsSlideGroup>
+  </div>
+</template>
+```
+
+## A formatting bar
+
+A toolbar inside a narrow container: icon buttons with `aria-label`, `multiple` allows turning several formats on at once, and the `show-arrows="always"` arrows page through the tools that did not fit.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsSlideGroup, CdsSlideGroupItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const formats = ref(['bold']);
+
+const tools = [
+  { value: 'bold', icon: 'bold', label: 'Жирный' },
+  { value: 'italic', icon: 'italic', label: 'Курсив' },
+  { value: 'underline', icon: 'underline', label: 'Подчёркнутый' },
+  { value: 'highlight', icon: 'highlight', label: 'Маркер' },
+  { value: 'list', icon: 'list', label: 'Список' },
+  { value: 'link', icon: 'link', label: 'Ссылка' },
+  { value: 'formula', icon: 'formula', label: 'Формула' },
+  { value: 'insert', icon: 'insert', label: 'Вставка' }
+];
+</script>
+
+<template>
+  <div class="m-auto max-w-[280px]">
+    <CdsSlideGroup v-model="formats" multiple show-arrows="always">
+      <CdsSlideGroupItem v-for="tool in tools" :key="tool.value" v-slot="{ isSelected, toggle }" :value="tool.value">
+        <CdsButton
+          :appearance="isSelected ? 'primary' : 'tertiary'"
+          size="sm"
+          class="m-1"
+          :icon="tool.icon"
+          :aria-label="tool.label"
+          @click="toggle"
+        />
+      </CdsSlideGroupItem>
+    </CdsSlideGroup>
+  </div>
+</template>
+```

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

@@ -0,0 +1,9 @@
+# CdsSlideGroup — 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 arrows hint that the strip scrolls and that there are more elements than visible. | Without arrows a cut-off element is the only hint of scrolling, and it is easy to miss. |
+| Elements of the same kind and size page predictably and read as a single row. | A mix of components of different sizes makes the strip ragged — it no longer reads as one list. |

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

@@ -0,0 +1,11 @@
+# CdsSlideGroup — 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.
+
+## _CdsSlideGroup.variables.scss
+
+```scss
+$slide-group-prev-basis: 32px !default;
+```

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

@@ -0,0 +1,88 @@
+# CdsSlideView — 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 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.
+
+Family: [CdsSlideView](#cdsslideview) + subcomponents: [CdsSlideViewItem](#cdsslideviewitem).
+
+## CdsSlideView
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `continuous` | `boolean \| undefined` | — | no | Loops the navigation: from the last slide you move to the first one and back |
+| `crossfade` | `boolean \| undefined` | — | no | Slides change with a smooth crossfade instead of a shift |
+| `direction` | `"horizontal" \| "vertical" \| undefined` | `'horizontal'` | no | Switches the component between horizontal and vertical layout. |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `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 |
+| `nextIcon` | `IconValue \| undefined` | `'next'` | no | Icon of the button that moves to the next slide |
+| `prevIcon` | `IconValue \| undefined` | `'prev'` | no | Icon of the button that moves to the previous slide |
+| `required` | `boolean \| "force" \| undefined` | — | no | Requires at least one item to stay selected |
+| `reverse` | `boolean \| undefined` | — | no | Inverts the direction of the transition animation between slides |
+| `selectedClass` | `string \| undefined` | — | no | CSS class applied in the selected state |
+| `showArrows` | `string \| boolean \| undefined` | — | no | Shows the navigation arrows. `'hover'` — only while the pointer is over the component |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `touch` | `boolean \| TouchHandlers \| undefined` | — | no | Controls swipe navigation: `false` turns the gestures off, an object sets your own touch handlers |
+| `transitionDuration` | `number \| undefined` | — | no | Duration of the transition animation between slides, in milliseconds |
+| `verticalArrows` | `boolean \| "left" \| "right" \| undefined` | — | no | Places the navigation arrows vertically: `'left'` or `'right'` — the side, `true` — the default side |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `update:modelValue` | `[]` | Fires when the active slide changes. Passes the value of the new active slide |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `additional` | `{ group: GroupProvide; }` | Extra content above the slides — indicator dots or your own navigation, for example |
+| `default` | `{ group: GroupProvide; }` | Slides. The slot props carry the group state for controlling the active slide |
+| `next` | `{ props: ControlProps; }` | Button that moves to the next slide. The slot props are ready to bind to your own button |
+| `prev` | `{ props: ControlProps; }` | Button that moves to the previous slide. The slot props are ready to bind to your own button |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `group` | `GroupProvide` | State of the slide group: the list of elements, the active slide and the switching methods. |
+
+---
+
+## CdsSlideViewItem
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `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. |
+| `reverseTransition` | `string \| boolean \| undefined` | — | no | Transition used when the slide appears in the reverse direction. A transition component name, or `false` to turn the animation off |
+| `selectedClass` | `string \| undefined` | — | no | CSS class applied in the selected state |
+| `transition` | `string \| boolean \| undefined` | — | no | Transition used when the slide appears in the forward direction. A transition component name, or `false` to turn the animation off |
+| `value` | `any` | — | no | Value of the component within the group |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `group:selected` | `[value: { value: boolean; }]` | Fires when a slide is selected inside the group. `value` tells whether the slide became active |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Content of the slide |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `groupItem` | `GroupItemProvide` | State of the slide inside the group: whether it is selected, its value and the toggle method. |