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

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

@@ -0,0 +1,97 @@
+# CdsToggle — 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 toggle is an on/off switch for a setting that applies immediately, without a "Save" button: notifications, auto-renewal, profile visibility. It is built on [CdsInput](../cds-input/api.md): it can do a label and a description, messages and errors, loading and the indeterminate state.
+
+## CdsToggle
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `appendIcon` | `IconValue \| undefined` | — | no | Icon in the append slot, after the content |
+| `baseColor` | `string \| undefined` | — | no | Color of the component in its inactive state |
+| `centerAffix` | `boolean \| undefined` | `true` | no | Vertically center the appendInner, prependInner, clearIcon and label elements. |
+| `color` | `string \| undefined` | — | no | Component color |
+| `defaultsTarget` | `string \| undefined` | — | no | Name of the child component the group prop values are passed to as defaults |
+| `description` | `string \| undefined` | — | no | Description of the component, shown under the label |
+| `direction` | `"horizontal" \| "vertical" \| undefined` | `'horizontal'` | no | Switches the component between horizontal and vertical layout. |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `error` | `boolean \| undefined` | — | no | Puts the component into the visual error state |
+| `errorMessages` | `string \| readonly string[] \| null \| undefined` | `[]` | no | Puts the component into the error state and passes custom error messages. They are merged with any checks defined in the `rules` prop. This field does not trigger validation. |
+| `falseIcon` | `IconValue \| undefined` | — | no | Icon of the unselected state |
+| `falseValue` | `any` | — | no | Value for the false state. |
+| `focused` | `boolean \| undefined` | — | no | Controls the focus state of the component. When `true`, the component is considered focused and may apply the corresponding styles or behavior. |
+| `hideDetails` | `boolean \| "auto" \| undefined` | — | no | Hides the details block (messages and hints). With the 'auto' value the block is hidden when there are no messages |
+| `hideMessages` | `boolean \| undefined` | — | no | Hide the messages under the input |
+| `hint` | `string \| undefined` | — | no | Hint text shown under the input |
+| `iconColor` | `string \| boolean \| undefined` | — | no | Icon color. Accepts a boolean or a color string |
+| `id` | `string \| undefined` | — | no | Unique identifier of the component |
+| `indeterminate` | `boolean \| undefined` | — | no | Indeterminate state of the toggle. |
+| `inline` | `boolean \| undefined` | — | no | Renders the control as an inline element — the container does not stretch to the full width |
+| `label` | `string \| undefined` | — | no | Label text of the component |
+| `loading` | `string \| boolean \| undefined` | `false` | no | Loading indicator. Accepts a boolean or a string with the color of the loader. |
+| `maxErrors` | `string \| number \| undefined` | `1` | no | Maximum number of validation errors shown |
+| `maxWidth` | `string \| number \| undefined` | — | no | Maximum component width |
+| `messages` | `string \| readonly string[] \| undefined` | `[]` | no | Messages shown under the input |
+| `minWidth` | `string \| number \| undefined` | — | no | Minimum component width |
+| `modelValue` | `any` | — | no | Value of the component (v-model). In a group it is the value of the selected control, with `multiple` — an array of the selected values |
+| `multiple` | `boolean \| null \| undefined` | `null` | no | Allows selecting several values — the model becomes an array. Turns on automatically when an array is passed to `modelValue` |
+| `name` | `string \| undefined` | — | no | The `name` attribute of the native input element. In a group one name joins all the nested controls |
+| `persistentHint` | `boolean \| undefined` | — | no | Always show the hint, not only on focus |
+| `prependIcon` | `IconValue \| undefined` | — | no | Icon in the prepend slot, before the content |
+| `readonly` | `boolean \| null \| undefined` | `null` | no | Read-only state |
+| `rules` | `readonly ValidationRule[] \| undefined` | `[]` | no | Accepts an array of items of different types: functions, booleans and strings. Functions take the input value as an argument and must return either true / false, or a string with an error message. The input goes into the error state if a function returns false (or any value in the array is false) or is a string. |
+| `size` | `number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined` | `'md'` | no | Size of the component |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `thumbColor` | `string \| undefined` | — | no | Color of the thumb. |
+| `trueIcon` | `IconValue \| undefined` | — | no | Icon of the selected state |
+| `trueValue` | `any` | — | no | Value for the true state. |
+| `type` | `string \| undefined` | — | no | Type of the native input element — `radio` or `checkbox`, for example |
+| `validateOn` | `ValidateOn \| undefined` | — | no | Changes the type of the event that triggers validation |
+| `validationValue` | `any` | — | no | Value used when applying the validation rules |
+| `value` | `any` | — | no | Value used when the component is selected inside a group. When it is not set, a unique identifier is used. |
+| `valueComparator` | `ValueComparator \| undefined` | `true` | no | Function comparing the model value with the `value` of the control. Deep comparison by default |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `update:focused` | `[focused: boolean]` | Fires when the focus state of the component changes. |
+| `update:indeterminate` | `[value: boolean]` | Fires when the indeterminate state changes. |
+| `update:modelValue` | `[value: any]` | Fires when the model of the component changes. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `append` | `CdsInputSlot` | Adds an element after the input |
+| `default` | `{ backgroundColorClasses: Ref<string[], string[]>; backgroundColorStyles: Ref<CSSProperties, CSSProperties>; }` | Default slot |
+| `description` | `{ description: string \| undefined; props: Record<string, any>; }` | Default slot of the CdsDescription component |
+| `details` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
+| `input` | `SelectionControlSlot` | Slot for the default input element. |
+| `label` | `{ label: string \| undefined; props: Record<string, any>; }` | Default slot of the CdsLabel component |
+| `loader` | `LoaderSlotProps` | Slot for a custom loading indicator. |
+| `message` | `CdsMessagesSlots` | Slot for customizing the content of a message |
+| `messages` | `CdsInputSlot` | Slot for custom content that lets you customize how the messages are displayed |
+| `prepend` | `CdsInputSlot` | Adds an element before the input |
+| `thumb` | `{ icon: IconValue \| undefined; } & CdsToggleSlot` | Slot for the content of the thumb. |
+| `track-false` | `CdsToggleSlot` | Slot for the content of the off part of the track. |
+| `track-true` | `CdsToggleSlot` | Slot for the content of the on part of the track. |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `isDirty` | `boolean` | Whether the input is dirty |
+| `isDisabled` | `boolean` | Whether the input is disabled |
+| `isPure` | `boolean` | Whether the input is pure |
+| `isReadonly` | `boolean` | Whether the input is read-only |
+| `isValid` | `boolean \| null` | Whether the input is valid |
+| `isValidating` | `boolean` | Whether the input is being validated |
+| `reset` | `() => Promise<void>` | Resets the input to its initial state |
+| `resetValidation` | `() => Promise<void>` | Resets the validation of the input |
+| `validate` | `(silent?: boolean) => Promise<string[]>` | Validates the input |

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

@@ -0,0 +1,335 @@
+# CdsToggle — 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 toggle is an on/off switch for a setting that applies immediately, without a "Save" button: notifications, auto-renewal, profile visibility. It is built on [CdsInput](../cds-input/api.md): it can do a label and a description, messages and errors, loading and the indeterminate state.
+
+## Label and description
+
+`label` names the setting, `description` explains what turning it on leads to. Phrase the label so that it is clear what happens in the on position.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsToggle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const notifications = ref(true);
+const autoRenew = ref(false);
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 w-fit m-auto">
+    <CdsToggle v-model="notifications" label="Уведомления о новых закупках" hide-details />
+    <CdsToggle
+      v-model="autoRenew"
+      label="Автопродление подписки"
+      description="Спишем оплату за день до окончания периода"
+      hide-details
+    />
+  </div>
+</template>
+```
+
+## Sizes
+
+Five sizes on the `size` scale — from `xs` to `xl`, `md` by default.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsToggleConstants } from '@cds/components/CdsToggle/api/CdsToggle.constants';
+import { CdsToggle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const sizes = CdsToggleConstants.sizes;
+const enabled = ref(true);
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 w-fit m-auto">
+    <CdsToggle v-for="size in sizes" :key="size" v-model="enabled" :size="size" :label="size" hide-details />
+  </div>
+</template>
+```
+
+## States
+
+`disabled` blocks the toggle and lowers the contrast, `readonly` forbids changing the value, `error` paints the track with the error color. `indeterminate` is the undefined state: the thumb stops in the middle while the value is unknown — when only some of the nested options are on, for example. The first toggle removes it.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsToggle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const on = ref(true);
+const off = ref(false);
+const mixed = ref(false);
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 w-fit m-auto">
+    <CdsToggle v-model="off" label="Выключен" hide-details />
+    <CdsToggle v-model="on" label="Включён" hide-details />
+    <CdsToggle v-model="off" label="Disabled (выключен)" disabled hide-details />
+    <CdsToggle v-model="on" label="Disabled (включён)" disabled hide-details />
+    <CdsToggle v-model="on" label="Readonly" readonly hide-details />
+    <CdsToggle v-model="off" label="Ошибка" error hide-details />
+    <CdsToggle v-model="mixed" :indeterminate="true" label="Неопределённое состояние" hide-details />
+  </div>
+</template>
+```
+
+## Loading and icons
+
+`loading` shows an indicator inside the thumb — handy while the setting is being saved on the server; a string value sets the color of the loader. `true-icon` and `false-icon` add an icon to the thumb for each position.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsToggle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const loading = ref(true);
+const icon = ref(true);
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 w-fit m-auto">
+    <CdsToggle v-model="loading" loading label="Загрузка" hide-details />
+    <CdsToggle v-model="icon" true-icon="check-fill" false-icon="error-fill" label="Иконки в бегунке" hide-details />
+  </div>
+</template>
+```
+
+## Colors
+
+`color` paints the track of a switched-on toggle, `base-color` — of a switched-off one, `thumb-color` — the thumb. The values are the names of the palette colors.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsToggle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const on = ref(true);
+const off = ref(false);
+const thumb = ref(false);
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 w-fit m-auto">
+    <CdsToggle
+      v-model="on"
+      color="brand-primary"
+      label="Основной цвет дорожки во включённом положении (color)"
+      hide-details
+    />
+    <CdsToggle v-model="off" base-color="purple" label="Фиолетовая дорожка в выключенном (base-color)" hide-details />
+    <CdsToggle v-model="thumb" thumb-color="red" label="Красный бегунок (thumb-color)" hide-details />
+  </div>
+</template>
+```
+
+## Your own values
+
+By default the model is `true`/`false`. `true-value` and `false-value` bind the toggle to your own values — to an API field with a string status, for example.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsToggle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const status = ref('public');
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsToggle v-model="status" true-value="public" false-value="private" label="Открытый профиль" hide-details />
+    <span>Значение модели: «{{ status }}»</span>
+  </div>
+</template>
+```
+
+## Messages
+
+`messages` shows a hint under the toggle, `error-messages` — a ready error message together with the error state. `hide-details` removes the bottom block entirely.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsToggle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const backup = ref(true);
+const newsletter = ref(false);
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 w-[350px] m-auto">
+    <CdsToggle v-model="backup" label="Резервное копирование" messages="Копия создаётся каждую ночь в 03:00" />
+    <CdsToggle
+      v-model="newsletter"
+      label="Рассылка по подписчикам"
+      :error-messages="['Подтвердите домен, чтобы включить рассылку']"
+    />
+  </div>
+</template>
+```
+
+## Slots
+
+In the demo the `thumb` slot changes the icon of the thumb depending on the value, and `track-true` and `track-false` show icons on the track.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsIcon, CdsToggle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const visible = ref(true);
+const annual = ref(true);
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 w-fit m-auto">
+    <CdsToggle v-model="visible" label="Профиль виден в поиске" hide-details>
+      <template #thumb>
+        <CdsIcon :icon="visible ? 'visibility-on' : 'visibility-off'" />
+      </template>
+    </CdsToggle>
+
+    <CdsToggle v-model="annual" size="xl" label="Годовая оплата" hide-details>
+      <template #track-true>
+        <CdsIcon icon="check-fill" :size="16" />
+      </template>
+      <template #track-false>
+        <CdsIcon icon="error-fill" :size="16" />
+      </template>
+    </CdsToggle>
+  </div>
+</template>
+```
+
+## Notification settings
+
+The main toggle controls the whole group: while notifications are off, the channels are blocked through `disabled`. The choice of channels is kept though — after switching back on the group returns to its previous values.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsToggle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const enabled = ref(true);
+const channels = ref({ email: true, push: false, sms: false });
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 w-[320px] m-auto">
+    <CdsToggle v-model="enabled" label="Уведомления" description="Сообщим о событиях в ваших закупках" hide-details />
+
+    <div class="flex flex-col gap-3 pl-8">
+      <CdsToggle v-model="channels.email" :disabled="!enabled" size="sm" label="Электронная почта" hide-details />
+      <CdsToggle v-model="channels.push" :disabled="!enabled" size="sm" label="Push в браузере" hide-details />
+      <CdsToggle v-model="channels.sms" :disabled="!enabled" size="sm" label="СМС" hide-details />
+    </div>
+  </div>
+</template>
+```
+
+## Saving on the server
+
+The setting is saved right after the switch: while the request is in flight the toggle shows `loading` and does not accept clicks because of `readonly`. If the server rejected the change, the value comes back and the reason is shown in `error-messages`. Try switching the toggle off.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsToggle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const enabled = ref(true);
+const loading = ref(false);
+const errors = ref<string[]>([]);
+
+const save = async (value: unknown) => {
+  loading.value = true;
+  errors.value = [];
+
+  // Имитация запроса к серверу
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+
+  loading.value = false;
+
+  if (!value) {
+    enabled.value = true;
+    errors.value = ['Отключить двухфакторную аутентификацию может только администратор'];
+  }
+};
+</script>
+
+<template>
+  <div class="w-[350px] m-auto">
+    <CdsToggle
+      v-model="enabled"
+      label="Двухфакторная аутентификация"
+      description="Код из приложения при каждом входе"
+      :loading="loading"
+      :readonly="loading"
+      :error-messages="errors"
+      @update:model-value="save"
+    />
+  </div>
+</template>
+```
+
+## Paid options
+
+Every toggle adds an option to the plan, and the total is recalculated at once — the user sees the consequences of the choice before paying.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsToggle } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const options = [
+  { key: 'analytics', label: 'Расширенная аналитика', description: 'Отчёты по закупкам и конкурентам', price: 900 },
+  { key: 'support', label: 'Приоритетная поддержка', description: 'Ответ в течение часа', price: 500 },
+  { key: 'api', label: 'Доступ к API', description: 'Интеграция с вашей ERP', price: 1500 }
+] as const;
+
+const selected = ref<Record<string, boolean>>({ analytics: true, support: false, api: false });
+
+const total = computed(() => options.reduce((sum, option) => sum + (selected.value[option.key] ? option.price : 0), 0));
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 w-[350px] m-auto">
+    <CdsToggle
+      v-for="option in options"
+      :key="option.key"
+      v-model="selected[option.key]"
+      :label="`${option.label} — ${option.price} ₽/мес`"
+      :description="option.description"
+      hide-details
+    />
+
+    <span class="font-semibold">Итого: {{ total }} ₽/мес</span>
+  </div>
+</template>
+```

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

@@ -0,0 +1,10 @@
+# CdsToggle — 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 toggle is for a setting that applies right after it is switched. | Consents and choices that go to the server together with the form are a checkbox, not a toggle. |
+| Phrase the label positively: the on position turns the capability on. | A negation in the label forces the user to decode a double “no” when the toggle is off. |
+| The label names the setting — the state is visible from the position and the color of the thumb. | A label repeating the state changes on every click: it is unclear what exactly is turned on. |

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

@@ -0,0 +1,91 @@
+# CdsToggle — 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.
+
+## _CdsToggle.variables.scss
+
+```scss
+@use '../../../styles/tools';
+
+// ======================= Transitions =======================
+$toggle-track-transition: background-color (tools.$cds-duration-fast + ms) tools.get-motion('ease-in-out', 'basic') !default;
+$toggle-thumb-transition: transform (tools.$cds-duration-fast + ms) tools.get-motion('ease-in-out', 'accent'),
+  background-color (tools.$cds-duration-fast + ms) tools.get-motion('ease-in-out', 'basic') !default;
+
+// ======================= Radius =======================
+$toggle-track-radius: tools.to-rem(9999px) !default;
+$toggle-thumb-radius: 50% !default;
+
+// ======================= Sizes =======================
+// Каждый размер: высота дорожки, ширина дорожки, размер «бегунка» (вкл.), размер «бегунка» (выкл.).
+$toggle-sizes: (
+  xs: (
+    track-height: 18px,
+    track-width: 34px,
+    thumb-on: 12px,
+    thumb-off: 8px,
+    label-gap: 0,
+    label-offset: var(--cds-spacing-50)
+  ),
+  sm: (
+    track-height: 20px,
+    track-width: 36px,
+    thumb-on: 14px,
+    thumb-off: 10px,
+    label-gap: 0,
+    label-offset: var(--cds-spacing-100)
+  ),
+  md: (
+    track-height: 24px,
+    track-width: 44px,
+    thumb-on: 18px,
+    thumb-off: 14px,
+    label-gap: var(--cds-spacing-50),
+    label-offset: var(--cds-spacing-200)
+  ),
+  lg: (
+    track-height: 28px,
+    track-width: 52px,
+    thumb-on: 20px,
+    thumb-off: 16px,
+    label-gap: var(--cds-spacing-50),
+    label-offset: var(--cds-spacing-200)
+  ),
+  xl: (
+    track-height: 40px,
+    track-width: 78px,
+    thumb-on: 30px,
+    thumb-off: 26px,
+    label-gap: var(--cds-spacing-100),
+    label-offset: var(--cds-spacing-300)
+  )
+) !default;
+
+// ======================= Colors =======================
+$toggle-colors: (
+  track: (
+    unselected: rgb(var(--cds-color-fill-secondary)),
+    selected: rgb(var(--cds-color-status-success-surface)),
+    disabled-unselected: rgb(var(--cds-color-fill-disable)),
+    disabled-selected: rgb(var(--cds-color-fill-disable)),
+    error: rgb(var(--cds-color-status-danger-surface))
+  ),
+  thumb: (
+    unselected: rgb(var(--cds-color-content-on-dark)),
+    selected: rgb(var(--cds-color-content-on-dark)),
+    disabled: rgb(var(--cds-color-content-disable)),
+    error: rgb(var(--cds-color-content-on-dark))
+  ),
+  icon: (
+    selected: rgb(var(--cds-color-fill-selected)),
+    error: rgb(var(--cds-color-status-danger-content))
+  )
+) !default;
+
+// ======================= Focus =======================
+$toggle-focus-outline-color: rgb(var(--cds-color-line-focus-outline)) !default;
+$toggle-focus-outline-width: var(--cds-border-200) !default;
+$toggle-focus-outline-offset: var(--cds-spacing-50) !default;
+```

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

@@ -0,0 +1,44 @@
+# CdsToolbar — 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 horizontal bar with a title and actions: it fills the header and the footer of the application, and on a page it assembles the title of a section together with its buttons. `CdsToolbarTitle` stretches and pushes the left and the right groups to the edges on its own.
+
+Family: [CdsToolbar](#cdstoolbar) + subcomponents: [CdsToolbarTitle](#cdstoolbartitle).
+
+## CdsToolbar
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `bordered` | `boolean \| undefined` | `false` | no | Shows the bottom border. |
+| `color` | `string \| undefined` | — | no | Component color |
+| `inset` | `boolean \| undefined` | `false` | no | Nested toolbar (indented from the left). |
+| `noGutter` | `"start" \| "end" \| undefined` | — | no | Removes the padding on one side: `start` or `end`. |
+| `noGutters` | `boolean \| undefined` | `false` | no | Removes all inner paddings. |
+| `theme` | `string \| undefined` | — | no | Component theme |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Content of the toolbar. |
+
+---
+
+## CdsToolbarTitle
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `shrink` | `boolean \| undefined` | `false` | no | Shrinks the title to its content instead of stretching it. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Text of the title. |