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

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

@@ -0,0 +1,125 @@
+# CdsList — 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.
+
+## _CdsList.variables.scss
+
+```scss
+@use '../../../styles/settings';
+@use '../../../styles/tools';
+
+$list-indent-size: var(--cds-spacing-400) !default;
+
+// ======================= CdsList =======================
+$list-padding: var(--cds-spacing-100) 0 !default;
+$list-background: transparent !default;
+$list-color: tools.theme-color('on-surface-primary', var(--cds-high-emphasis-opacity)) !default;
+$list-border-color: settings.$border-color-root !default;
+$list-border-style: settings.$border-style-root !default;
+$list-border-thin-width: thin !default;
+$list-border-width: 0 !default;
+
+// borders
+$list-border: (
+  $list-border-color,
+  $list-border-style,
+  $list-border-width,
+  $list-border-thin-width
+) !default;
+
+// ======================= CdsListSubheader =======================
+$list-subheader-color: tools.theme-color('on-surface-primary', var(--cds-medium-emphasis-opacity)) !default;
+$list-subheader-inset-padding-start: 56px !default;
+$list-subheader-min-height: 32px !default;
+$list-subheader-padding-end: var(--cds-spacing-400) !default;
+$list-subheader-padding-top: 0 !default;
+$list-subheader-padding-block: var(--cds-spacing-400) var(--cds-spacing-200) !default;
+$list-subheader-min-height-multiplier: 1 !default;
+$list-subheader-transition: 0.2s min-height settings.$standard-easing !default;
+
+
+// ======================= CdsListItem =======================
+$list-item-gap: var(--cds-spacing-50) !default;
+$list-item-padding: var(--cds-spacing-100) var(--cds-spacing-400) !default;
+$list-item-prepend-size: 8px !default;
+$list-item-content-min-width: 40px !default;
+$list-item-icon-margin-end: var(--cds-spacing-200) !default;
+$list-item-icon-margin-start: var(--cds-spacing-200) !default;
+$list-item-action-spacer-width: var(--cds-spacing-200) !default;
+$list-item-slim-action-spacer-width: var(--cds-spacing-100) !default;
+$list-item-avatar-margin-end: var(--cds-spacing-100) !default;
+$list-item-avatar-margin-start: var(--cds-spacing-100) !default;
+$list-item-slim-spacer-width: var(--cds-spacing-100) !default;
+$list-item-slim-avatar-spacer-width: var(--cds-spacing-100) !default;
+$list-item-slim-prepend-size: 28px !default;
+
+// colors
+$list-item-color: (
+  default: (
+    background: transparent
+  ),
+  hover: (
+    background: rgb(var(--cds-color-fill-primary-hover))
+  ),
+  focus: (
+    outline: rgb(var(--cds-color-line-focus-outline))
+  ),
+  active: (
+    background: rgb(var(--cds-color-brand-secondary)),
+  ),
+  disabled: (
+    background: transparent,
+    content: rgb(var(--cds-color-content-disable))
+  )
+) !default;
+
+// borders
+$list-item-border-color: settings.$border-color-root !default;
+$list-item-border-style: settings.$border-style-root !default;
+$list-item-border-width: 0 !default;
+$list-item-border-thin-width: thin !default;
+$list-item-border: (
+  $list-item-border-color,
+  $list-item-border-style,
+  $list-item-border-width,
+  $list-item-border-thin-width
+) !default;
+$list-item-border-radius: var(--cds-border-radius-200) !default;
+$list-item-border-outline: var(--cds-border-200) solid !default;
+
+// title
+$list-item-title-padding: 0 !default;
+$list-item-title-hyphens: auto !default;
+$list-item-title-text-transform: none !default;
+$list-item-title-word-break: normal !default;
+$list-item-title-word-wrap: break-word !default;
+
+// subtitle
+$list-item-subtitle-padding: 0 !default;
+$list-item-subtitle-text-transform: none !default;
+$list-item-subtitle-overflow-wrap: break-word !default;
+$list-item-subtitle-word-break: initial !default;
+
+// action
+$list-item-action-margin-end: var(--cds-spacing-200) !default;
+$list-item-action-margin-start: var(--cds-spacing-200) !default;
+$list-item-icon-margin-end: var(--cds-spacing-400) !default;
+$list-item-icon-margin-start: var(--cds-spacing-400) !default;
+
+// media
+$list-item-media-margin-bottom: 0 !default;
+$list-item-media-margin-end: 16px !default;
+$list-item-media-margin-start: 16px !default;
+$list-item-media-margin-top: 0 !default;
+$list-item-media-two-line-margin-bottom: -4px !default;
+$list-item-media-two-line-margin-top: -4px !default;
+$list-item-media-three-line-margin-bottom: 0 !default;
+$list-item-media-three-line-margin-top: 0 !default;
+
+// nav
+$list-nav-padding: var(--cds-spacing-200) !default;
+$list-nav-subheader-font-size: .75rem !default;
+$list-item-nav-margin-top: var(--cds-spacing-100) !default;
+```

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

@@ -0,0 +1,18 @@
+# CdsLoader — API
+
+> Generated from meta.json by `bun run generate:skill`. Do not edit manually.
+> Examples: [examples.md](examples.md) · Tokens: [tokens.md](tokens.md)
+
+A circular indeterminate loading indicator — a spinning ring without progress. It shows that the data is still loading: as an inline element, as an overlay above a container or above the whole page.
+
+## CdsLoader
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `description` | `string \| undefined` | — | no | Description that best explains the loading state (aria-label) |
+| `fixed` | `boolean \| undefined` | — | no | Pins the loader to the current container |
+| `overlay` | `boolean \| undefined` | — | no | Renders a fixed full-screen loader |
+| `size` | `number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined` | `'md'` | no | Size of the component |
+| `theme` | `string \| undefined` | — | no | Component theme |

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

@@ -0,0 +1,59 @@
+# CdsLoader — 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 circular indeterminate loading indicator — a spinning ring without progress. It shows that the data is still loading: as an inline element, as an overlay above a container or above the whole page.
+
+## Sizes
+
+The `size` prop sets the diameter of the indicator: from `xs` to `xl` or a number in pixels. The default size is `md`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsLoader } from '@central-design-system/components';
+
+const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-center gap-4">
+    <CdsLoader v-for="size of sizes" :key="size" :size="size" />
+  </div>
+</template>
+```
+
+## Overlay
+
+The `overlay` prop expands the indicator to the full screen and dims the content underneath. Add `fixed` so that the overlay takes the nearest container with `position: relative` instead of the whole page. The `description` prop describes what is going on for screen readers (aria-label).
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsLoader } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const loading = ref(false);
+
+function refresh() {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 2000);
+}
+</script>
+
+<template>
+  <div class="relative m-auto flex w-[320px] flex-col gap-2 rounded-200 bg-surface-secondary p-4">
+    <span class="text-content-primary">Список товаров</span>
+    <span class="text-content-secondary">Ноутбук, монитор, клавиатура, мышь</span>
+
+    <CdsButton text="Обновить" appearance="secondary" @click="refresh" />
+
+    <CdsLoader v-if="loading" overlay fixed description="Список обновляется" />
+  </div>
+</template>
+```

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

@@ -0,0 +1,50 @@
+# CdsLoader — 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.
+
+## _CdsLoader.variables.scss
+
+```scss
+@use 'sass:map';
+@use '../../../styles/tools';
+
+
+$loader-dash: 60 !default;
+$loader-duration: 2s !default;
+$loader-width: 2px !default;
+$loader-turn-animation: loader-turn $loader-duration linear infinite !default;
+$loader-stroke-animation: loader-stroke $loader-duration linear infinite !default;
+
+// Colors
+$loader-color: (
+  'overlay': rgb(var(--cds-color-surface-overlay)),
+  'color': rgb(var(--cds-color-content-placeholder)),
+  'on-color': rgb(var(--cds-color-content-secondary))
+) !default;
+
+// Sizes
+$loader-sizes: (
+  xs: (
+    'width': tools.to-rem(16px),
+    'height': tools.to-rem(16px)
+  ),
+  sm: (
+    'width': tools.to-rem(40px),
+    'height': tools.to-rem(40px)
+  ),
+  md: (
+    'width': tools.to-rem(80px),
+    'height': tools.to-rem(80px)
+  ),
+  lg: (
+    'width': tools.to-rem(120px),
+    'height': tools.to-rem(120px)
+  ),
+  xl: (
+    'width': tools.to-rem(160px),
+    'height': tools.to-rem(160px)
+  )
+) !default;
+```

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

@@ -0,0 +1,14 @@
+# CdsMain — API
+
+> Generated from meta.json by `bun run generate:skill`. Do not edit manually.
+> Examples: [examples.md](examples.md)
+
+The main area of the application: `CdsMain` is the place where the content of the page lands. Inside `CdsLayout` it indents itself by the height of the header and the footer and by the width of the side drawers, so the content never has to be moved by hand.
+
+## CdsMain
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Main content of the application (`CdsPage`). |

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

@@ -0,0 +1,60 @@
+# CdsMain — 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.
+
+The main area of the application: `CdsMain` is the place where the content of the page lands. Inside `CdsLayout` it indents itself by the height of the header and the footer and by the width of the side drawers, so the content never has to be moved by hand.
+
+## The main area of the application
+
+`CdsMain` renders as a `main` tag — one semantic content area per page. The paddings are recalculated on the fly: minify a drawer, hide the header — and the content immediately takes the freed space.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsDrawer,
+  CdsFooter,
+  CdsHeader,
+  CdsLayout,
+  CdsList,
+  CdsListItem,
+  CdsMain,
+  CdsPage,
+  CdsToolbar,
+  CdsToolbarTitle
+} from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="h-[320px]">
+    <CdsLayout container>
+      <CdsHeader bordered>
+        <CdsToolbar>
+          <CdsToolbarTitle>Заголовок приложения</CdsToolbarTitle>
+        </CdsToolbar>
+      </CdsHeader>
+
+      <CdsDrawer permanent border>
+        <CdsList>
+          <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" active />
+          <CdsListItem title="Договоры" href="#" prepend-icon="doc" />
+        </CdsList>
+      </CdsDrawer>
+
+      <CdsMain class="bg-surface-secondary">
+        <CdsPage padding>
+          <div class="rounded-200 bg-surface-primary p-4 text-content-primary">
+            Подсвеченная область — CdsMain. Её отступы сверху, снизу и слева равны размерам шапки, подвала и панели.
+          </div>
+        </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-menu/api.md

@@ -0,0 +1,84 @@
+# CdsMenu — 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 menu pops up next to an activator element and shows a list of actions or sections: the "more" button in a table row, the user menu in the header, a context menu on right click. It positions itself — it opens towards the free space and sticks to the activator while the page scrolls.
+
+## CdsMenu
+
+**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. |
+| `captureFocus` | `boolean \| undefined` | `true` | no | Returns the focus back into the content if it has left it — for example on Tab from the end of the page. A mouse click does not steal the focus. |
+| `closeDelay` | `string \| number \| undefined` | `250` | no | Delay in milliseconds before the component closes. Works only together with open-on-hover. |
+| `closeOnBack` | `boolean \| undefined` | `true` | 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` | `true` | no | Hide the component on a click on the content |
+| `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` | — | 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 |
+| `id` | `string \| undefined` | — | no | Unique identifier that links the menu to its activator. If it is not set, it is generated automatically. |
+| `location` | `Anchor \| undefined` | `'bottom'` | 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` | — | 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` | `4` | 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` | `300` | no | Delay in milliseconds before the component opens. Works only together with open-on-hover. |
+| `openOnClick` | `boolean \| undefined` | — | 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` | — | 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. |
+| `retainFocus` | `boolean \| undefined` | — | no | Traps Tab navigation inside the content: from the last focusable element the focus moves to the first one and back. |
+| `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` | `'none'` | 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. |
+| `submenu` | `boolean \| undefined` | — | no | Opens and closes the menu with the left/right arrow keys instead of up/down (for nested menus). |
+| `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. |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `transition` | `string \| boolean \| (TransitionProps & { component?: Component \| undefined; }) \| { component: Component; } \| null \| undefined` | `{ component: CdsModalTransition }` | 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 |
+| --- | --- | --- |
+| `afterEnter` | `[]` | Fired after the opening animation of the menu has finished |
+| `afterLeave` | `[]` | Fired after the closing animation of the menu has finished |
+| `update:modelValue` | `[value: boolean]` | Fired when the menu is opened or closed. 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. |