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

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

@@ -0,0 +1,186 @@
+# CdsToolbar — 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 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.
+
+## Title
+
+`CdsToolbarTitle` stretches and truncates long text with an ellipsis without breaking the line. The `shrink` prop turns the stretching off: the title shrinks to its content and stays next to the neighboring element — a handy way to put a status or a counter right after the name.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsToolbar, CdsToolbarTitle } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <CdsToolbar bordered>
+      <CdsToolbarTitle>Заголовок растягивается и разводит группы по краям</CdsToolbarTitle>
+      <CdsButton size="sm">Действие</CdsButton>
+    </CdsToolbar>
+
+    <CdsToolbar bordered>
+      <CdsToolbarTitle shrink>Заголовок с shrink остаётся рядом с кнопкой</CdsToolbarTitle>
+      <CdsButton size="sm">Действие</CdsButton>
+    </CdsToolbar>
+
+    <CdsToolbar bordered>
+      <CdsToolbarTitle>Очень длинный заголовок раздела, который не помещается в одну строку тулбара</CdsToolbarTitle>
+      <CdsButton size="sm">Действие</CdsButton>
+    </CdsToolbar>
+  </div>
+</template>
+```
+
+## Paddings
+
+The `no-gutters` prop removes the inner paddings entirely — the toolbar aligns with the content of the page. The `no-gutter` prop removes the padding on one side: `start` or `end`. The `inset` prop does the opposite and adds a padding on the left — that is how a nested second-level toolbar is set off.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsRadio, CdsRadioGroup, CdsToolbar, CdsToolbarTitle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const spacing = ref('default');
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <CdsRadioGroup v-model="spacing" direction="horizontal" hide-details>
+      <CdsRadio value="default" label="По умолчанию" />
+      <CdsRadio value="no-gutters" label="no-gutters" />
+      <CdsRadio value="no-gutter-start" label='no-gutter="start"' />
+      <CdsRadio value="inset" label="inset" />
+    </CdsRadioGroup>
+
+    <div class="rounded-200 border border-dashed border-line-primary">
+      <CdsToolbar
+        bordered
+        :inset="spacing === 'inset'"
+        :no-gutters="spacing === 'no-gutters'"
+        :no-gutter="spacing === 'no-gutter-start' ? 'start' : undefined"
+      >
+        <CdsToolbarTitle>Заголовок раздела</CdsToolbarTitle>
+        <CdsButton size="sm">Действие</CdsButton>
+      </CdsToolbar>
+    </div>
+  </div>
+</template>
+```
+
+## Separator and color
+
+The `bordered` prop draws the bottom border — it separates the title of a section from its content. The `bg-color` and `color` props paint the background and the text. Inside `CdsHeader` and `CdsFooter` the toolbar does not draw its own background: the color comes from the part of the layout, so the bar does not cover it.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsRadio, CdsRadioGroup, CdsToolbar, CdsToolbarTitle } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const bgColor = ref('default');
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <CdsRadioGroup v-model="bgColor" direction="horizontal" hide-details>
+      <CdsRadio value="default" label="Цвет темы" />
+      <CdsRadio value="neutral" label="neutral" />
+      <CdsRadio value="indigo" label="indigo" />
+      <CdsRadio value="lemon" label="lemon" />
+    </CdsRadioGroup>
+
+    <CdsToolbar bordered :bg-color="bgColor === 'default' ? undefined : bgColor">
+      <CdsToolbarTitle>Заголовок раздела</CdsToolbarTitle>
+      <CdsButton appearance="tertiary" size="sm">Действие</CdsButton>
+    </CdsToolbar>
+  </div>
+</template>
+```
+
+## Section title on a page
+
+The name, the status and the actions in a single row: `shrink` keeps the status next to the name, `mr-auto` pushes the buttons to the right edge, `no-gutters` aligns the toolbar with the content of the card, and `bordered` separates the header of the section from the text.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsButton,
+  CdsCard,
+  CdsFunctionalButton,
+  CdsStatus,
+  CdsToolbar,
+  CdsToolbarTitle
+} from '@central-design-system/components';
+</script>
+
+<template>
+  <CdsCard class="m-auto w-full max-w-[640px] p-4">
+    <CdsToolbar no-gutters bordered class="mb-4 gap-2">
+      <CdsToolbarTitle shrink class="text-xl font-bold">Закупка №2401</CdsToolbarTitle>
+      <CdsStatus status="success" text="Активна" variant="text" class="ml-2 mr-auto" />
+      <CdsFunctionalButton icon="edit" aria-label="Редактировать" />
+      <CdsButton size="sm" prepend-icon="download">Скачать</CdsButton>
+    </CdsToolbar>
+
+    <p class="text-content-secondary">Поставка серверного оборудования, приём заявок до 12 марта.</p>
+  </CdsCard>
+</template>
+```
+
+## Application header and footer
+
+In `CdsHeader` the toolbar holds the menu button, the title and the profile; in `CdsFooter` it holds the copyright. The background is set on the parts of the layout, and the toolbar inherits it together with the contrasting text color.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsAvatar,
+  CdsFooter,
+  CdsFunctionalButton,
+  CdsHeader,
+  CdsLayout,
+  CdsMain,
+  CdsPage,
+  CdsToolbar,
+  CdsToolbarTitle
+} from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="h-[280px]">
+    <CdsLayout container>
+      <CdsHeader bordered bg-color="indigo">
+        <CdsToolbar>
+          <CdsFunctionalButton icon="menu" class="mr-2" aria-label="Открыть навигацию" />
+          <CdsToolbarTitle>Портал закупок</CdsToolbarTitle>
+          <CdsAvatar icon="user-avatar" />
+        </CdsToolbar>
+      </CdsHeader>
+
+      <CdsMain>
+        <CdsPage padding>
+          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">Содержимое страницы</div>
+        </CdsPage>
+      </CdsMain>
+
+      <CdsFooter bordered>
+        <CdsToolbar>
+          <CdsToolbarTitle>© 2026 Портал закупок</CdsToolbarTitle>
+        </CdsToolbar>
+      </CdsFooter>
+    </CdsLayout>
+  </div>
+</template>
+```

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

@@ -0,0 +1,9 @@
+# CdsToolbar — 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 title in CdsToolbarTitle pushes the left and the right groups to the edges on its own. | A title as plain text does not stretch — the actions stick to the name. |
+| One primary action and a couple of secondary icons — the toolbar stays readable. | Five buttons of equal weight in a row: it is unclear what matters here. |

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

@@ -0,0 +1,13 @@
+# CdsToolbar — 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.
+
+## _CdsToolbar.variables.scss
+
+```scss
+$toolbar-background: rgb(var(--cds-color-surface-elevated)) !default;
+$toolbar-color: rgb(var(--cds-color-content-primary)) !default;
+$toolbar-border-color: rgb(var(--cds-color-line-elevated)) !default;
+```

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

@@ -0,0 +1,83 @@
+# CdsTooltip — 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 tooltip briefly explains an interface element on hover or focus: it names an icon button, shows the full text of a truncated line, explains why an action is unavailable. It appears and disappears on its own — the user does not have to press or close anything.
+
+## CdsTooltip
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `activator` | `(string & {}) \| Element \| "parent" \| ComponentPublicInstance \| undefined` | — | no | The element that activates the component |
+| `activatorProps` | `Record<string, any> \| undefined` | `{}` | no | Props for the activator element |
+| `attach` | `string \| boolean \| Element \| undefined` | — | no | Sets the DOM element the overlay content is moved to. It accepts a direct element reference, a querySelector string, or true to disable moving. By default the body element is used. Changing this prop is usually not recommended except for edge cases: the default positioning algorithm handles most scenarios better than it can without moving, and unexpected behavior may appear if the menu ends up being a child of its activator. |
+| `closeDelay` | `string \| number \| undefined` | — | no | Delay in milliseconds before the component closes. Works only together with open-on-hover. |
+| `closeOnBack` | `boolean \| undefined` | `false` | no | Closes the overlay content when the browser Back button is pressed or $router.back() is called, cancelling the original navigation. `persistent` overlays cancel the navigation and animate as if they were clicked outside instead of closing. |
+| `closeOnContentClick` | `boolean \| undefined` | — | no | Hide the component on a click on the content |
+| `color` | `string \| undefined` | — | no | Background color of the tooltip. |
+| `contained` | `boolean \| undefined` | — | no | Limits the size of the component and of its grid to the offset parent. Implies the `absolute` and `attach` props. (Note: the parent element must have `position: relative`.) |
+| `contentClass` | `any` | — | no | Applies a custom class to the content element. This is handy because the content is moved to the beginning of the cds-app component (unless `attach` is set) and cannot be selected with classes passed to the component directly. |
+| `contentProps` | `any` | — | no | Applies custom props to the moved content |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `eager` | `boolean \| undefined` | `true` | 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. |
+| `height` | `string \| number \| undefined` | — | no | Component height |
+| `hideArrow` | `boolean \| undefined` | — | no | Hides the arrow pointing at the activator. The arrow is shown by default. |
+| `id` | `string \| undefined` | — | no | Unique id that links the tooltip to its activator. Generated automatically when omitted. |
+| `interactive` | `boolean \| undefined` | — | no | Allows interaction with the tooltip content: hovering the content does not close it. |
+| `location` | `Anchor \| undefined` | `'top'` | no | Sets the anchor point used to position the component, aligning it horizontally, vertically or in both directions |
+| `locationStrategy` | `"static" \| "connected" \| LocationStrategyFunction \| undefined` | `'connected'` | no | Sets the way the overlay content is positioned. By default static is used, which centers the content in its container. Use connected to attach the content to the activator element. |
+| `maxHeight` | `string \| number \| undefined` | — | no | Maximum component height |
+| `maxWidth` | `string \| number \| undefined` | — | no | Maximum component width |
+| `minHeight` | `string \| number \| undefined` | — | no | Minimum component height |
+| `minWidth` | `string \| number \| undefined` | `0` | no | Minimum component width |
+| `modelValue` | `boolean \| undefined` | — | no | The v-model value of the component. If the component supports the **multiple** prop, an empty array is used by default. |
+| `noClickAnimation` | `boolean \| undefined` | — | no | Disables the bounce effect on a click outside the content element when `persistent` is set. |
+| `offset` | `string \| number \| number[] \| undefined` | `10` | no | Increases the distance to the target. If two numbers are passed, the second one shifts the anchor sideways, away from the target. |
+| `opacity` | `string \| number \| undefined` | — | no | Opacity of the scrim element. Applies only when `scrim=true`. |
+| `openDelay` | `string \| number \| undefined` | — | no | Delay in milliseconds before the component opens. Works only together with open-on-hover. |
+| `openOnClick` | `boolean \| undefined` | `false` | no | Show the component on a click on the activator |
+| `openOnFocus` | `boolean \| undefined` | — | no | Show the component when the activator gets focus |
+| `openOnHover` | `boolean \| undefined` | `true` | no | Show the component on hover over the activator |
+| `origin` | `Anchor \| "auto" \| "overlap" \| undefined` | `'auto'` | no | Sets the anchor point of the overlay content that is aligned with the `location` anchor of the target. With "auto" the opposite side of the `location` point is used. With "overlap" the same anchor point is used, so the overlay overlaps the target. It also sets the CSS `transform-origin` property for the enter/leave transitions. |
+| `persistent` | `boolean \| undefined` | — | no | A click outside the element or the Esc key does not close it. |
+| `scrim` | `string \| boolean \| undefined` | `false` | no | Backdrop shown while the overlay is active. Accepts true/false to toggle the backdrop and a string to set its color. |
+| `scrollStrategy` | `"none" \| "close" \| "block" \| "reposition" \| ScrollStrategyFunction \| undefined` | `'reposition'` | no | Strategy applied when the component is active and the user scrolls the page. |
+| `stickToTarget` | `boolean \| undefined` | — | no | Lets the overlay content go off screen while scrolling. |
+| `target` | `(string & {}) \| Element \| "parent" \| ComponentPublicInstance \| "cursor" \| [x: number, y: number] \| undefined` | — | no | When `locationStrategy` is set to "connected", specify the element or the array of x, y coordinates the overlay is positioned against. By default the activator element is used. |
+| `text` | `string \| undefined` | — | no | Text of the tooltip. Used when the default slot is not passed. |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `transition` | `string \| boolean \| (TransitionProps & { component?: Component \| undefined; }) \| null \| undefined` | `null` | no | Transition animation |
+| `viewportMargin` | `string \| number \| undefined` | `12` | no | Sets a custom viewport margin for the overlay content |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+| `zIndex` | `string \| number \| undefined` | `2000` | no | The z-index value of the component. |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `update:modelValue` | `[value: boolean]` | Fires when the tooltip is shown or hidden. Passes the new visibility state |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `activator` | `{ isActive: boolean; props: Record<string, any>; targetRef: TemplateRef; }` | Slot for the element that acts as the activator of the overlay. |
+| `default` | `{ isActive: Ref<boolean, boolean>; }` | Slot for the overlay content. |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `activatorEl` | `HTMLElement \| undefined` | The DOM element of the activator. |
+| `activatorRef` | `TemplateRef` | Template ref for assigning the activator manually. |
+| `animateClick` | `() => void` | Runs the bounce animation of the content — the same as on a click outside a `persistent` overlay. |
+| `contentEl` | `HTMLElement \| undefined` | The DOM element of the overlay content. |
+| `globalTop` | `boolean` | Whether the overlay is the top one in the global stack of open overlays. |
+| `rootEl` | `HTMLElement \| undefined` | The root DOM element of the overlay. |
+| `scrimEl` | `HTMLElement \| undefined` | The DOM element of the scrim that dims the page. |
+| `targetEl` | `HTMLElement \| undefined` | The DOM element of the positioning target. |
+| `targetRef` | `TemplateRef` | Template ref for assigning the positioning target manually. |
+| `updateLocation` | `((e: Event) => void) \| undefined` | Recalculates the position of the content relative to the target. |

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

@@ -0,0 +1,321 @@
+# CdsTooltip — 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 tooltip briefly explains an interface element on hover or focus: it names an icon button, shows the full text of a truncated line, explains why an action is unavailable. It appears and disappears on its own — the user does not have to press or close anything.
+
+## Activator
+
+The element the tooltip is attached to is set through the `activator` slot: the slot props (`v-bind="props"`) put the hover handlers and the `aria-describedby` attribute on it. The content of the tooltip comes from the `text` prop or from the default slot when you need markup. If the activator is already there and you would rather not wrap it, put `CdsTooltip` inside it with `activator="parent"` — that is how the examples in “Placement” and in the scenarios below are built.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsTooltip } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-center gap-2">
+    <CdsTooltip text="Текст всплывающей подсказки">
+      <template #activator="{ props }">
+        <CdsButton text="Проп text" v-bind="props" />
+      </template>
+    </CdsTooltip>
+
+    <CdsTooltip>
+      <template #activator="{ props }">
+        <CdsButton appearance="secondary" text="Слот default" v-bind="props" />
+      </template>
+      Подсказка с <strong>разметкой</strong> внутри
+    </CdsTooltip>
+  </div>
+</template>
+```
+
+## Placement
+
+The `location` prop sets the side of the activator the tooltip appears on: `top` by default, `bottom`, `left`, `right` — and their combinations with an alignment (`top left`, `bottom right`). If there is not enough room, the tooltip flips to the opposite side by itself. The `offset` prop tunes the distance to the activator.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsTooltip } from '@central-design-system/components';
+
+const locations = [
+  { location: 'left', icon: 'arrow-left' },
+  { location: 'top', icon: 'arrow-up' },
+  { location: 'bottom', icon: 'arrow-down' },
+  { location: 'top left', icon: 'arrow-right-top' },
+  { location: 'top right', icon: 'arrow-left-top' },
+  { location: 'bottom left', icon: 'arrow-right-bottom' },
+  { location: 'bottom right', icon: 'arrow-left-bottom' },
+  { location: 'right', icon: 'arrow-right' }
+] as const;
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-2">
+    <CdsButton
+      v-for="{ location, icon } in locations"
+      :key="location"
+      appearance="tertiary"
+      :icon="icon"
+      :aria-label="location"
+    >
+      <CdsTooltip activator="parent" :location="location">Всплывающая подсказка</CdsTooltip>
+    </CdsButton>
+  </div>
+</template>
+```
+
+## Arrow
+
+The arrow points at the activator and follows the actual position of the tooltip — including after an automatic flip near the edge of the screen. The `hide-arrow` prop hides it.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsTooltip } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-4">
+    <CdsTooltip location="top" text="Со стрелкой">
+      <template #activator="{ props }">
+        <CdsButton text="Со стрелкой" v-bind="props" />
+      </template>
+    </CdsTooltip>
+
+    <CdsTooltip location="top" hide-arrow text="Без стрелки">
+      <template #activator="{ props }">
+        <CdsButton appearance="tertiary" text="Без стрелки" v-bind="props" />
+      </template>
+    </CdsTooltip>
+  </div>
+</template>
+```
+
+## Opening behavior
+
+By default the tooltip opens on hover and on keyboard focus, with no delay. The `open-delay` and `close-delay` props add a pause — the tooltip does not blink when the cursor passes by. The `open-on-click` prop together with `:open-on-hover="false"` switches opening to a click.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsTooltip } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-center gap-2">
+    <CdsTooltip text="Открылась сразу по наведению">
+      <template #activator="{ props }">
+        <CdsButton text="Наведение" v-bind="props" />
+      </template>
+    </CdsTooltip>
+
+    <CdsTooltip open-delay="300" close-delay="200" text="Открылась после паузы 300 мс">
+      <template #activator="{ props }">
+        <CdsButton appearance="secondary" text="С задержкой" v-bind="props" />
+      </template>
+    </CdsTooltip>
+
+    <CdsTooltip open-on-click :open-on-hover="false" text="Открылась по клику">
+      <template #activator="{ props }">
+        <CdsButton appearance="secondary" text="По клику" v-bind="props" />
+      </template>
+    </CdsTooltip>
+  </div>
+</template>
+```
+
+## Controlling the display
+
+`v-model` opens and closes the tooltip from code — this is how you show it in response to interface events, not only on hover.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsTooltip } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const active = ref(false);
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-center gap-4">
+    <CdsButton
+      appearance="secondary"
+      :text="active ? 'Скрыть подсказку' : 'Показать подсказку'"
+      @click="active = !active"
+    />
+
+    <CdsTooltip v-model="active" text="Подсказкой управляет v-model">
+      <template #activator="{ props }">
+        <CdsButton appearance="tertiary" icon="info" aria-label="Информация" v-bind="props" />
+      </template>
+    </CdsTooltip>
+  </div>
+</template>
+```
+
+## Icon button bar
+
+A tooltip gives an icon button back the name of its action. `CdsTooltip` lives inside the button with `activator="parent"` — there is no need to wrap the markup. `aria-label` is still required: the tooltip appears on hover, while the name of the action must be available at all times.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsTooltip } from '@central-design-system/components';
+
+const actions = [
+  { icon: 'edit', label: 'Редактировать' },
+  { icon: 'copy', label: 'Дублировать' },
+  { icon: 'download', label: 'Скачать' },
+  { icon: 'delete', label: 'Удалить' }
+];
+</script>
+
+<template>
+  <div class="flex justify-center gap-1">
+    <CdsButton
+      v-for="action in actions"
+      :key="action.icon"
+      size="sm"
+      appearance="tertiary"
+      :icon="action.icon"
+      :aria-label="action.label"
+    >
+      <CdsTooltip activator="parent" :text="action.label" />
+    </CdsButton>
+  </div>
+</template>
+```
+
+## Truncated text
+
+When space is limited, long titles are cut off with `truncate` — the tooltip shows the full text on hover over the line. The same `text` prop serves both as the content of the line and as the content of the tooltip.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTooltip } from '@central-design-system/components';
+
+const documents = [
+  'Договор поставки оборудования № 42-СТ от 14 марта',
+  'Счёт на оплату № 5512 от 2 апреля',
+  'Акт сверки взаиморасчётов за первый квартал'
+];
+</script>
+
+<template>
+  <div class="m-auto flex w-[240px] flex-col gap-1">
+    <div v-for="doc in documents" :key="doc" class="truncate text-100">
+      {{ doc }}
+      <CdsTooltip activator="parent" :text="doc" />
+    </div>
+  </div>
+</template>
+```
+
+## Unavailable action
+
+A disabled button should not stay silent — the tooltip explains why the action is closed. A button with `disabled` has its mouse events turned off, so the tooltip is attached to a wrapper through `activator="parent"`. The `disabled` prop of the tooltip itself turns it off as soon as the action becomes available.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsCheckbox, CdsTooltip } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const ready = ref(false);
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsCheckbox v-model="ready" label="Документы прикреплены" hide-details />
+
+    <div class="inline-block">
+      <CdsTooltip activator="parent" :disabled="ready" text="Прикрепите документы, чтобы отправить заявку" />
+      <CdsButton :disabled="!ready" text="Отправить заявку" />
+    </div>
+  </div>
+</template>
+```
+
+## Confirming an action
+
+A tooltip can confirm an instant action when there is no room for a message — copying to the clipboard, for example. The display is driven by `v-model` on click, and `:open-on-hover="false"` keeps the tooltip from opening on a plain hover. After a second and a half a timer closes it on its own.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsTooltip } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const copied = ref(false);
+
+let timer: ReturnType<typeof setTimeout>;
+
+function copy() {
+  copied.value = true;
+  clearTimeout(timer);
+  timer = setTimeout(() => (copied.value = false), 1500);
+}
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsTooltip v-model="copied" :open-on-hover="false" text="Ссылка скопирована">
+      <template #activator="{ props }">
+        <CdsButton appearance="secondary" prepend-icon="link" text="Скопировать ссылку" v-bind="props" @click="copy" />
+      </template>
+    </CdsTooltip>
+  </div>
+</template>
+```
+
+## Onboarding
+
+The `interactive` prop allows interaction with the content: hovering the tooltip does not close it, and the elements inside stay clickable. Together with `open-on-click` and `v-model` this makes an onboarding tooltip: a “Learn more” link and a button that closes the tooltip. The `width` prop keeps the text width comfortable to read.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsTooltip } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const active = ref(false);
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsTooltip v-model="active" interactive location="end" open-on-click :open-on-hover="false" width="268">
+      <template #activator="{ props }">
+        <CdsButton appearance="tertiary" icon="comment" aria-label="Что нового" v-bind="props" />
+      </template>
+
+      <div class="flex flex-col py-1">
+        <div class="mb-1">
+          <strong>Комментарии к заявке</strong>
+        </div>
+        <p>Теперь вопросы поставщику можно задавать прямо в карточке заявки — нажмите на иконку комментария.</p>
+        <div class="mt-4 flex items-center justify-between">
+          <a href="#" class="underline">Узнать больше</a>
+          <CdsButton appearance="inverse" text="Понятно" @click="active = false" />
+        </div>
+      </div>
+    </CdsTooltip>
+  </div>
+</template>
+```

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

@@ -0,0 +1,10 @@
+# CdsTooltip — 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 tooltip names the action of an icon button — without it the icon is easy to misread. | The tooltip repeats the visible text word for word and adds nothing new. |
+| A short phrase reads in a second — the tooltip does not hold the user up. | An instruction of several sentences does not get read inside a tooltip: move it into the interface or into a modal. |
+| For a disabled button the tooltip explains why the action is closed and what to do about it. | A disabled button without an explanation leaves the user guessing. |

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

@@ -0,0 +1,25 @@
+# CdsTooltip — 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.
+
+## _CdsTooltip.variables.scss
+
+```scss
+@use '../../../styles/tools';
+
+$tooltip-border-radius: var(--cds-border-radius-200) !default;
+$tooltip-inline-padding: var(--cds-spacing-400) !default;
+$tooltip-block-padding: var(--cds-spacing-200) !default;
+$tooltip-colors: (
+  'background': rgb(var(--cds-color-surface-inverse)),
+  'color': rgb(var(--cds-color-content-inverse)),
+  'link': rgb(var(--cds-color-content-inverse))
+) !default;
+$tooltip-transition-enter-duration: (tools.$cds-duration-very-fast + ms) !default;
+$tooltip-transition-leave-duration: (tools.$cds-duration-instant + ms) !default;
+$tooltip-arrow-size: var(--cds-spacing-200) !default;
+$tooltip-arrow-edge-offset: var(--cds-spacing-300) !default;
+$tooltip-arrow-radius: var(--cds-border-radius-100) !default;
+```