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

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

@@ -0,0 +1,409 @@
+# CdsOverlay — 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 overlay shows content on top of the page: it dims the page with a scrim, computes the position relative to an activator and manages the stacking order of the open layers. It is the base mechanism behind [CdsModal](../cds-modal/api.md), [CdsMenu](../cds-menu/api.md) and [CdsTooltip](../cds-tooltip/api.md) — take it when you need a popup of your own that is not among the ready-made ones.
+
+## Opening and closing
+
+`v-model` controls the visibility. An open overlay closes on a click outside the content and on the `Esc` key.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsOverlay } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const overlay = ref(false);
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsButton text="Показать оверлей" @click="overlay = true" />
+
+    <CdsOverlay v-model="overlay" location="center center">
+      <div class="w-[320px] rounded-200 bg-surface-primary p-4">
+        <p>Оверлей открыт. Кликните мимо контента или нажмите <code>Esc</code>, чтобы закрыть его.</p>
+      </div>
+    </CdsOverlay>
+  </div>
+</template>
+```
+
+## Opening and closing
+
+The `persistent` prop turns both ways off: the overlay closes only through `v-model` — for example, by a button inside the content. On a click outside, the content answers with a light "shake"; remove it with the `no-click-animation` prop if you do not need the animation.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsOverlay } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const overlay = ref(false);
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsButton text="Открыть persistent-оверлей" @click="overlay = true" />
+
+    <CdsOverlay v-model="overlay" persistent location="center center">
+      <div class="flex w-[320px] flex-col gap-2 rounded-200 bg-surface-primary p-4">
+        <p>Клик мимо и <code>Esc</code> не закрывают оверлей — контент отвечает лёгким «покачиванием».</p>
+        <CdsButton class="self-end" appearance="secondary" text="Закрыть" @click="overlay = false" />
+      </div>
+    </CdsOverlay>
+  </div>
+</template>
+```
+
+## Activator
+
+The `activator` slot saves you from a manual `v-model`: pass the slot props (`v-bind="props"`) to an element — and a click on it will open the overlay. The `open-on-hover` and `open-on-focus` props switch the opening to hover or focus, and `activator="parent"` makes the parent element the activator.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsOverlay } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsOverlay location="center center">
+      <template #activator="{ props }">
+        <CdsButton v-bind="props" appearance="secondary" text="Открыть через активатор" />
+      </template>
+
+      <div class="w-[320px] rounded-200 bg-surface-primary p-4">
+        <p>Оверлей открылся кликом по активатору — <code>v-model</code> и свой обработчик не понадобились.</p>
+      </div>
+    </CdsOverlay>
+  </div>
+</template>
+```
+
+## Scrim
+
+The scrim is on by default: it dims the page and shows that the interface under the overlay is unavailable. The `:scrim="false"` prop removes it — a click outside still closes the overlay. The `opacity` prop tunes the dimming density, and a string in `scrim` sets a custom color for the scrim.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsOverlay } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-2">
+    <CdsOverlay location="center center">
+      <template #activator="{ props }">
+        <CdsButton v-bind="props" appearance="secondary" text="Обычная подложка" />
+      </template>
+      <div class="w-[280px] rounded-200 bg-surface-primary p-4">Подложка по умолчанию.</div>
+    </CdsOverlay>
+
+    <CdsOverlay :scrim="false" location="center center">
+      <template #activator="{ props }">
+        <CdsButton v-bind="props" appearance="secondary" text="Без подложки" />
+      </template>
+      <div class="w-[280px] rounded-200 border bg-surface-primary p-4">
+        Страница под оверлеем не затемнена, клик мимо всё равно закрывает контент.
+      </div>
+    </CdsOverlay>
+
+    <CdsOverlay opacity="0.9" location="center center">
+      <template #activator="{ props }">
+        <CdsButton v-bind="props" appearance="secondary" text="Плотная подложка" />
+      </template>
+      <div class="w-[280px] rounded-200 bg-surface-primary p-4">
+        <code>opacity="0.9"</code> почти полностью скрывает страницу.
+      </div>
+    </CdsOverlay>
+  </div>
+</template>
+```
+
+## Limiting to a container
+
+The `contained` prop locks the overlay inside the parent block: the scrim and the content do not leave its bounds, and the rest of the page keeps working. The parent must have `position: relative`. To center the content inside the block rather than relative to the screen, pass the container to `target` and turn on `location-strategy="connected"`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsOverlay } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const container = ref<HTMLElement>();
+const overlay = ref(false);
+</script>
+
+<template>
+  <div class="m-auto flex w-[360px] flex-col gap-2">
+    <div ref="container" class="relative h-[180px] overflow-hidden rounded-200 bg-surface-secondary p-4">
+      <p>Оверлей появится поверх этого блока, а остальная страница продолжит работать.</p>
+
+      <CdsOverlay
+        v-model="overlay"
+        contained
+        location-strategy="connected"
+        :target="container"
+        location="center center"
+        scroll-strategy="none"
+      >
+        <div class="rounded-200 bg-surface-primary p-4">Контент внутри блока</div>
+      </CdsOverlay>
+    </div>
+
+    <CdsButton class="self-center" appearance="secondary" text="Показать оверлей" @click="overlay = !overlay" />
+  </div>
+</template>
+```
+
+## Positioning
+
+By default the content is centered relative to the screen — this is what the `static` strategy and the `location` prop are responsible for. The `location-strategy="connected"` strategy attaches the content to the activator: `location` sets the side, `offset` — the distance to it. If there is not enough room near the screen edge, the content flips to the opposite side — that is how [CdsMenu](../cds-menu/api.md) works.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsOverlay } from '@central-design-system/components';
+
+const locations = ['top', 'bottom', 'end'] as const;
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-2">
+    <CdsOverlay
+      v-for="location in locations"
+      :key="location"
+      location-strategy="connected"
+      :location="location"
+      :offset="8"
+      :scrim="false"
+      scroll-strategy="reposition"
+    >
+      <template #activator="{ props }">
+        <CdsButton v-bind="props" appearance="secondary" :text="`location=&quot;${location}&quot;`" />
+      </template>
+
+      <div class="rounded-200 border bg-surface-primary px-4 py-2">Панель у активатора</div>
+    </CdsOverlay>
+  </div>
+</template>
+```
+
+## Behavior on scroll
+
+The `scroll-strategy` prop decides what happens to the page and the overlay on scroll: `block` (the default) blocks the page scroll, `close` closes the overlay, `reposition` recomputes the position of the content following the target, `none` does nothing.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsOverlay } from '@central-design-system/components';
+
+const strategies = ['block', 'close', 'reposition', 'none'] as const;
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-2">
+    <CdsOverlay
+      v-for="strategy in strategies"
+      :key="strategy"
+      location-strategy="connected"
+      location="bottom"
+      :offset="8"
+      :scrim="false"
+      :scroll-strategy="strategy"
+    >
+      <template #activator="{ props }">
+        <CdsButton v-bind="props" appearance="secondary" :text="strategy" />
+      </template>
+
+      <div class="w-[260px] rounded-200 border bg-surface-primary px-4 py-2">
+        Панель открыта — покрутите страницу и посмотрите, что произойдёт.
+      </div>
+    </CdsOverlay>
+  </div>
+</template>
+```
+
+## Animation
+
+The `transition` prop changes the animation of showing and hiding the content.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsOverlay } from '@central-design-system/components';
+
+const transitions = ['fade-transition', 'scale-transition', 'slide-transition-y'] as const;
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-2">
+    <CdsOverlay v-for="transition in transitions" :key="transition" :transition="transition" location="center center">
+      <template #activator="{ props }">
+        <CdsButton v-bind="props" appearance="tertiary" :text="transition" />
+      </template>
+
+      <div class="w-[280px] rounded-200 bg-surface-primary p-4">
+        <code>{{ transition }}</code>
+      </div>
+    </CdsOverlay>
+  </div>
+</template>
+```
+
+## Loading on top of a block
+
+While the data of a block is being updated, a `contained` overlay with [CdsProgressCircle](../cds-progress-circle/api.md) covers only that block: the user sees that loading is in progress and keeps working with the rest of the page. `persistent` prevents closing the overlay by an accidental click, and `scroll-strategy="none"` does not block the page scroll.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsOverlay, CdsProgressCircle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const snapshots = [
+  [
+    { label: 'Выручка', value: '1 240 500 ₽' },
+    { label: 'Заказы', value: '318' },
+    { label: 'Конверсия', value: '4,2%' }
+  ],
+  [
+    { label: 'Выручка', value: '1 262 300 ₽' },
+    { label: 'Заказы', value: '327' },
+    { label: 'Конверсия', value: '4,4%' }
+  ]
+];
+
+const card = ref<HTMLElement>();
+const loading = ref(false);
+const index = ref(0);
+
+const refresh = () => {
+  loading.value = true;
+
+  setTimeout(() => {
+    index.value = (index.value + 1) % snapshots.length;
+    loading.value = false;
+  }, 1600);
+};
+</script>
+
+<template>
+  <div ref="card" class="relative m-auto w-[360px] overflow-hidden rounded-200 bg-surface-secondary p-4">
+    <div class="flex items-center justify-between">
+      <span class="h4">Продажи за сегодня</span>
+      <CdsButton appearance="tertiary" size="sm" icon="refresh" aria-label="Обновить" @click="refresh" />
+    </div>
+
+    <div class="mt-2 flex flex-col gap-1">
+      <div v-for="row in snapshots[index]" :key="row.label" class="flex justify-between">
+        <span class="text-content-secondary">{{ row.label }}</span>
+        <span>{{ row.value }}</span>
+      </div>
+    </div>
+
+    <CdsOverlay
+      v-model="loading"
+      contained
+      persistent
+      no-click-animation
+      location-strategy="connected"
+      :target="card"
+      location="center center"
+      scroll-strategy="none"
+    >
+      <CdsProgressCircle indeterminate :size="40" />
+    </CdsOverlay>
+  </div>
+</template>
+```
+
+## Image preview
+
+A click on a thumbnail opens the image at full size on top of the dimmed page. A dense scrim (`opacity="0.85"`) removes the visual noise, and the preview closes the usual way — by a click outside or the `Esc` key, no separate button needed.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsImage, CdsOverlay } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const preview = ref(false);
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <button type="button" class="w-[220px] cursor-pointer" aria-label="Открыть изображение" @click="preview = true">
+      <CdsImage src="/images/temp/city.webp" class="rounded-200" cover :aspect-ratio="16 / 10" alt="Вид на город" />
+    </button>
+
+    <CdsOverlay v-model="preview" location="center center" opacity="0.85">
+      <figure class="flex flex-col items-center gap-2">
+        <CdsImage
+          src="/images/temp/city.webp"
+          class="max-h-[70vh] w-[min(800px,90vw)] rounded-200"
+          alt="Вид на город"
+        />
+        <figcaption class="text-100 text-content-on-dark">
+          Кликните мимо изображения или нажмите Esc, чтобы закрыть
+        </figcaption>
+      </figure>
+    </CdsOverlay>
+  </div>
+</template>
+```
+
+## Onboarding hint
+
+A hint about a new feature is a panel attached to an element by the `connected` strategy; in a real interface you open it programmatically, for example by a first-visit flag, here — by a click on a button. Without a scrim (`:scrim="false"`) the hint does not get in the way of working with the page, `persistent` protects it from an accidental close — it disappears only by the "Понятно" button, and `scroll-strategy="reposition"` keeps it next to the activator on scroll.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsOverlay } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const hint = ref(false);
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsOverlay
+      v-model="hint"
+      location-strategy="connected"
+      location="bottom"
+      :offset="8"
+      :scrim="false"
+      persistent
+      no-click-animation
+      :close-on-back="false"
+      scroll-strategy="reposition"
+    >
+      <template #activator="{ props }">
+        <CdsButton v-bind="props" appearance="secondary" prepend-icon="filters" text="Фильтры" />
+      </template>
+
+      <div class="flex w-[260px] flex-col gap-2 rounded-200 border bg-surface-primary p-4">
+        <p class="text-100">
+          Теперь фильтры можно сохранять: настройте условия один раз и возвращайтесь к ним в один клик.
+        </p>
+        <CdsButton class="self-end" size="sm" appearance="secondary" text="Понятно" @click="hint = false" />
+      </div>
+    </CdsOverlay>
+  </div>
+</template>
+```

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

@@ -0,0 +1,9 @@
+# CdsOverlay — 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 persistent overlay has an explicit button — the user can always close it. | The overlay closes neither by a click outside, nor by Esc, nor by a button — the user is trapped. |
+| The loading state covers only the block being updated — the rest of the interface keeps working. | An overlay over the whole area for the sake of a single block stops work with the entire page. |

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

@@ -0,0 +1,12 @@
+# CdsOverlay — 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.
+
+## _CdsOverlay.variables.scss
+
+```scss
+$overlay-opacity: 50% !default;
+$overlay-scrim-background: rgb(var(--cds-color-surface-overlay)) !default;
+```

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

@@ -0,0 +1,21 @@
+# CdsPage — API
+
+> Generated from meta.json by `bun run generate:skill`. Do not edit manually.
+> Examples: [examples.md](examples.md)
+
+A page inside the layout: `CdsPage` gives the content a minimum height that accounts for the header and the footer, so a short page fills the whole screen instead of hanging as a narrow strip at the top.
+
+## CdsPage
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `padding` | `boolean \| undefined` | `false` | no | Adds paddings to the page. |
+| `styleFn` | `((offset: number, height: number) => string) \| undefined` | — | no | Function that computes the styles of the page. It receives the total offset (header + footer) and the height of the area, and returns a style string. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Content of the page. |

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

@@ -0,0 +1,123 @@
+# CdsPage — 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 page inside the layout: `CdsPage` gives the content a minimum height that accounts for the header and the footer, so a short page fills the whole screen instead of hanging as a narrow strip at the top.
+
+## Paddings
+
+The `padding` prop adds inner paddings to the page — the usual layout for content screens. Without it the content sticks to the edges: that is how tables and maps that need the full width are laid out.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsLayout, CdsMain, CdsPage, CdsToggle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const padding = ref(true);
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <CdsToggle v-model="padding" label="Внутренние отступы страницы" hide-details />
+
+    <div class="h-[240px]">
+      <CdsLayout container>
+        <CdsMain>
+          <CdsPage :padding="padding">
+            <div class="h-full rounded-200 bg-surface-secondary p-4 text-content-primary">Содержимое страницы</div>
+          </CdsPage>
+        </CdsMain>
+      </CdsLayout>
+    </div>
+  </div>
+</template>
+```
+
+## Custom height
+
+The `style-fn` prop replaces the minimum height calculation with your own. The function receives the total height of the header and the footer and the height of the layout area, and returns a style string. This is how a page can be fixed in height and give the scrolling to an inner list or table.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsHeader, CdsLayout, CdsMain, CdsPage, CdsToolbar, CdsToolbarTitle } from '@central-design-system/components';
+
+// Вместо минимальной высоты фиксируем высоту страницы: внутренний список
+// получает свой скролл, а страница не растягивает макет.
+const styleFn = (offset: number, height: number) => `height: ${height - offset}px; overflow: hidden;`;
+</script>
+
+<template>
+  <div class="h-[320px]">
+    <CdsLayout container>
+      <CdsHeader bordered>
+        <CdsToolbar>
+          <CdsToolbarTitle>Реестр закупок</CdsToolbarTitle>
+        </CdsToolbar>
+      </CdsHeader>
+
+      <CdsMain>
+        <CdsPage padding :style-fn="styleFn" class="flex flex-col">
+          <div class="mb-2 text-content-secondary">Шапка страницы остаётся на месте</div>
+          <div class="flex-1 overflow-auto rounded-200 border border-line-primary">
+            <div v-for="n in 30" :key="n" class="border-b border-line-primary p-2 text-content-primary">
+              Закупка №{{ 2400 + n }}
+            </div>
+          </div>
+        </CdsPage>
+      </CdsMain>
+    </CdsLayout>
+  </div>
+</template>
+```
+
+## A full-screen empty state
+
+The minimum height accounts for the header and the footer, so the centering works against the real height of the page — the placeholder ends up exactly in the middle instead of right under the header.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsEmptyState,
+  CdsFooter,
+  CdsHeader,
+  CdsLayout,
+  CdsMain,
+  CdsPage,
+  CdsToolbar,
+  CdsToolbarTitle
+} from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="h-[320px]">
+    <CdsLayout container>
+      <CdsHeader bordered>
+        <CdsToolbar>
+          <CdsToolbarTitle>Закупки</CdsToolbarTitle>
+        </CdsToolbar>
+      </CdsHeader>
+
+      <CdsMain>
+        <CdsPage padding class="flex items-center justify-center">
+          <CdsEmptyState
+            icon="shopping-cart"
+            title="Закупок пока нет"
+            text="Создайте первую закупку, чтобы она появилась здесь"
+          />
+        </CdsPage>
+      </CdsMain>
+
+      <CdsFooter bordered>
+        <div class="flex h-[40px] items-center px-4 text-content-secondary">Подвал</div>
+      </CdsFooter>
+    </CdsLayout>
+  </div>
+</template>
+```

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

@@ -0,0 +1,67 @@
+# CdsPagination — 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)
+
+Pagination splits a large data set into pages and helps you jump to the one you need: numbered buttons, "back" and "forward" arrows, jumps to the first and the last page, and a quick jump field. Extra numbers collapse into an ellipsis, and without an explicit limit the number of buttons adapts to the width of the container.
+
+## CdsPagination
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `activeColor` | `string \| undefined` | — | no | Color of the active page button |
+| `ariaLabel` | `string \| undefined` | `'Навигация по страницам'` | no | ARIA label of the root navigation element |
+| `color` | `string \| undefined` | — | no | Color of the page buttons |
+| `currentPageAriaLabel` | `string \| undefined` | `'Текущая страница, страница {0}'` | no | ARIA label of the current (active) page. `{0}` is replaced with the page number |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `ellipsis` | `string \| undefined` | `'...'` | no | Text displayed between pages when they are collapsed |
+| `firstAriaLabel` | `string \| undefined` | `'Первая страница'` | no | ARIA label of the first page button |
+| `firstIcon` | `IconValue \| undefined` | `'first'` | no | Icon of the first page button |
+| `lastAriaLabel` | `string \| undefined` | `'Последняя страница'` | no | ARIA label of the last page button |
+| `lastIcon` | `IconValue \| undefined` | `'last'` | no | Icon of the last page button |
+| `length` | `string \| number \| undefined` | `1` | no | Number of pages |
+| `modelValue` | `number \| undefined` | `(props) => props.start` | no | The v-model value — the number of the current page |
+| `nextAriaLabel` | `string \| undefined` | `'Следующая страница'` | no | ARIA label of the next page button |
+| `nextIcon` | `IconValue \| undefined` | `'next'` | no | Icon of the next page button |
+| `pageAriaLabel` | `string \| undefined` | `'Перейти к странице {0}'` | no | ARIA label of a page button. `{0}` is replaced with the page number |
+| `prevIcon` | `IconValue \| undefined` | `'prev'` | no | Icon of the previous page button |
+| `previousAriaLabel` | `string \| undefined` | `'Предыдущая страница'` | no | ARIA label of the previous page button |
+| `quickJumper` | `boolean \| undefined` | `false` | no | Shows the quick jump field |
+| `quickJumperLabel` | `string \| undefined` | `'Перейти к странице'` | no | Caption text before the quick jump field |
+| `showFirstLastPage` | `boolean \| "only-first" \| undefined` | `false` | no | Shows the first/last page buttons. `'only-first'` shows only the first page button |
+| `start` | `string \| number \| undefined` | `1` | no | Initial page |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'nav'` | no | Custom HTML tag or component to render |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `totalVisible` | `string \| number \| undefined` | — | no | Number of page buttons visible at once |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `first` | `[value: number]` | Fired on a jump to the first page |
+| `last` | `[value: number]` | Fired on a jump to the last page |
+| `next` | `[value: number]` | Fired on a jump to the next page |
+| `prev` | `[value: number]` | Fired on a jump to the previous page |
+| `quickJump` | `[value: number]` | Fired on a jump made through the quick jump field |
+| `update:modelValue` | `[value: number]` | Fired when the v-model value changes |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `first` | `CdsPaginationControlSlot` | Slot of the first page button |
+| `item` | `CdsPaginationItemSlot` | Slot of a single page button |
+| `last` | `CdsPaginationControlSlot` | Slot of the last page button |
+| `next` | `CdsPaginationControlSlot` | Slot of the next page button |
+| `prev` | `CdsPaginationControlSlot` | Slot of the previous page button |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `setFirst` | `() => void` | Jumps to the first page. |
+| `setLast` | `() => void` | Jumps to the last page. |
+| `setNext` | `() => void` | Jumps to the next page. |
+| `setPrev` | `() => void` | Jumps to the previous page. |