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

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

@@ -0,0 +1,10 @@
+# CdsLink — 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 link text names where it leads — clear even outside the paragraph. | «Здесь» и «подробнее» ничего не обещают: цель перехода приходится угадывать. |
+| A link leads to a page, a button triggers an action. | A link that deletes data betrays the expectation of a navigation. |
+| The link is a short phrase inside the sentence; the rest of the text stays text. | A whole paragraph inside a link is hard to read, and the destination gets lost in the details. |

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

@@ -0,0 +1,16 @@
+# CdsLink — 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.
+
+## _CdsLink.variables.scss
+
+```scss
+$link-color: rgb(var(--cds-color-content-link)) !default;
+$link-color-visited: rgb(var(--cds-color-content-link-visited)) !default;
+$link-color-disabled: rgb(var(--cds-color-content-disable)) !default;
+$link-outline-color: rgb(var(--cds-color-line-focus-outline)) !default;
+$link-outline-width: var(--cds-border-200) !default;
+$link-outline-offset: var(--cds-spacing-50) !default;
+```

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

@@ -0,0 +1,329 @@
+# CdsList — 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 list shows a set of records of the same kind — menu sections, documents, employees, settings — so that the one you need is easy to find and pick. Build it from an `items` array in a single line, or from `CdsListItem` components when a row is more than a title with an icon.
+
+Family: [CdsList](#cdslist) + subcomponents: [CdsListGroup](#cdslistgroup), [CdsListItem](#cdslistitem), [CdsListItemAction](#cdslistitemaction), [CdsListItemDescription](#cdslistitemdescription), [CdsListItemDivider](#cdslistitemdivider), [CdsListItemImage](#cdslistitemimage), [CdsListItemMedia](#cdslistitemmedia), [CdsListItemSubtitle](#cdslistitemsubtitle), [CdsListItemTitle](#cdslistitemtitle), [CdsListSubheader](#cdslistsubheader).
+
+## CdsList
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `activatable` | `boolean \| undefined` | — | no | Allows items to be activated (highlighting the current item without selection mode) |
+| `activated` | `any` | — | no | Identifiers of the active items (supports v-model through `update:activated`) |
+| `activeClass` | `string \| undefined` | — | no | Class applied to list items when they are in the active state |
+| `activeColor` | `string \| undefined` | — | no | Color of the component in its active state |
+| `activeStrategy` | `ActiveStrategyProp \| undefined` | — | no | Activation strategy for items (single, multiple, and so on) |
+| `baseColor` | `string \| undefined` | — | no | Color of the component in its inactive state |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `collapseIcon` | `IconValue \| undefined` | — | no | Icon shown on a collapsed group |
+| `color` | `string \| undefined` | — | no | Component color |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `expandIcon` | `IconValue \| undefined` | — | no | Icon shown on an expanded group |
+| `filterable` | `boolean \| undefined` | — | no | **FOR INTERNAL USE ONLY** Turns on filtering mode: the space key does not select an item but is used for typing. Applies to the CdsCombobox and CdsAutocomplete components |
+| `height` | `string \| number \| undefined` | — | no | Component height |
+| `indent` | `string \| number \| undefined` | — | no | Indent size for nested item groups |
+| `itemChildren` | `SelectItemKey` | `'children'` | no | Object field that holds the child items, or a function that returns them |
+| `itemProps` | `SelectItemKey` | `'props'` | no | Object field that holds the props of the item, or a function that returns them |
+| `items` | `any[] \| undefined` | `[]` | no | Array of items to display |
+| `itemsRegistration` | `ItemsRegistrationType \| undefined` | `'render'` | no | Item registration strategy: `render` — as they are rendered, otherwise all at once |
+| `itemTitle` | `SelectItemKey` | `'title'` | no | Object field used as the item title, or a function that returns it |
+| `itemType` | `SelectItemKey` | `'type'` | no | Object field that defines the item type (`item`, `divider`, `subheader`), or a function that returns it |
+| `itemValue` | `SelectItemKey` | `'value'` | no | Object field used as the item value, or a function that returns it |
+| `lines` | `false \| "one" \| "two" \| "three" \| undefined` | `'one'` | no | Number of lines in the list items; affects their height. `false` turns off the fixed height |
+| `mandatory` | `boolean \| undefined` | — | no | Makes the selection mandatory: forbids clearing the selection of the last item |
+| `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 |
+| `nav` | `boolean \| undefined` | — | no | Applies navigation list styles (rounded active items) |
+| `navigationIndex` | `number \| undefined` | — | no | Index of the current item during keyboard navigation (supports v-model) |
+| `navigationStrategy` | `"focus" \| "track" \| undefined` | `'focus'` | no | Keyboard navigation strategy: `focus` — moves the focus, `track` — a virtual cursor |
+| `opened` | `any` | — | no | Identifiers of the expanded groups (supports v-model through `update:opened`) |
+| `openStrategy` | `OpenStrategyProp \| undefined` | `'list'` | no | Expansion strategy for groups (`list`, `single`, `multiple`) |
+| `prependGap` | `string \| number \| undefined` | — | no | Indent before the item content (reserves space for the prepend icon or avatar) |
+| `required` | `boolean \| undefined` | — | no | Makes the selection mandatory: forbids clearing the selection of the last item |
+| `returnObject` | `boolean \| undefined` | — | no | Return an object in the model value instead of an array |
+| `selectable` | `boolean \| undefined` | — | no | Allows items to be selected |
+| `selected` | `any` | — | no | Identifiers of the selected items (supports v-model through `update:selected`) |
+| `selectStrategy` | `SelectStrategyProp \| undefined` | `'single-leaf'` | no | Selection strategy for items (`single-leaf`, `leaf`, `independent`, `classic`, and so on) |
+| `slim` | `boolean \| undefined` | — | no | Removes the inner paddings of the list and of the menu container: the list fills the available area completely |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+| `textColor` | `string \| undefined` | — | no | Text color of the component |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `valueComparator` | `ValueComparator \| undefined` | — | no | Function that compares item values to determine the selected state |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `click:activate` | `[value: { id: unknown; value: boolean; path: unknown[]; }]` | Fires when an item is activated. `value` — the id of the item, its new state and its path |
+| `click:open` | `[value: { id: unknown; value: boolean; path: unknown[]; }]` | Fires on a click on the group activator. `value` — the id of the group, its new state and its path |
+| `click:select` | `[value: { id: unknown; value: boolean; path: unknown[]; }]` | Fires when an item is selected. `value` — the id of the item, its new state and its path |
+| `update:activated` | `[value: unknown]` | Fires when the set of active items changes. `value` — identifiers of the active items |
+| `update:navigationIndex` | `[value: unknown]` | Fires when the keyboard navigation index changes. `value` — the new index |
+| `update:opened` | `[value: unknown]` | Fires when the set of expanded groups changes. `value` — identifiers of the expanded groups |
+| `update:selected` | `[value: unknown]` | Fires when the set of selected items changes. `value` — identifiers of the selected items |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `append` | `ListItemSlot & { item: unknown; }` | Content after the item text (in place of the append icon or avatar) |
+| `default` | `ListItemSlot & { item: unknown; }` | Default content. Overrides the automatic rendering of items from `items` |
+| `description` | `ListItemDescriptionSlot & { item: unknown; }` | Content of the item description (shown below the title and the subtitle) |
+| `divider` | `{ props: { [key: string]: any; title: string; value: any; }; }` | Custom rendering of a divider when `items` is used |
+| `header` | `{ props: { [key: string]: any; title: string; value: any; }; }` | Custom rendering of the group activator (its heading) when `items` is used |
+| `item` | `{ props: { [key: string]: any; title: string; value: any; } & { index: number; }; }` | Custom rendering of a list item when `items` is used |
+| `prepend` | `ListItemSlot & { item: unknown; }` | Content before the item text (in place of the prepend icon or avatar) |
+| `subheader` | `{ props: { [key: string]: any; title: string; value: any; }; }` | Custom rendering of a subheader when `items` is used |
+| `subtitle` | `ListItemSubtitleSlot & { item: unknown; }` | Content of the item subtitle |
+| `title` | `ListItemTitleSlot & { item: unknown; }` | Content of the item title |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `children` | `Map<unknown, unknown[]>` | Map of child items keyed by the identifiers of their parents |
+| `focus` | `(location?: number \| "next" \| "prev" \| "first" \| "last" \| undefined) => void` | Moves the focus to a list item (by index or by a keyword: `next`, `prev`, `first`, `last`) |
+| `getPath` | `(id: unknown) => unknown[]` | Returns the path (an array of identifiers) to an item by its id |
+| `open` | `(id: unknown, value: boolean, event?: Event \| undefined) => void` | Expands or collapses a group by its identifier |
+| `parents` | `Map<unknown, unknown>` | Map of parent items keyed by the identifiers of their children |
+| `select` | `(id: unknown, value: boolean, event?: Event \| undefined) => void` | Selects or deselects an item by its identifier |
+
+---
+
+## CdsListGroup
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `activeColor` | `string \| undefined` | — | no | Color of the component in its active state |
+| `appendIcon` | `IconValue \| undefined` | — | no | Icon shown after the group title |
+| `baseColor` | `string \| undefined` | — | no | Color of the component in its inactive state |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `collapseIcon` | `IconValue \| undefined` | `'chevron-up'` | no | Icon shown when the group is collapsed |
+| `color` | `string \| undefined` | — | no | Component color |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `expandIcon` | `IconValue \| undefined` | `'chevron-down'` | no | Icon shown when the group is expanded |
+| `fluid` | `boolean \| undefined` | — | no | Removes the indent of the group activator, aligning it to the edge of the list |
+| `prependIcon` | `IconValue \| undefined` | — | no | Icon shown before the group title |
+| `rawId` | `string \| number \| undefined` | — | no | Original identifier of the group; used to build the id of the DOM element |
+| `subgroup` | `boolean \| undefined` | — | no | Marks the component as a group of nested lists (a subgroup) |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+| `textColor` | `string \| undefined` | — | no | Text color of the component |
+| `title` | `string \| undefined` | — | no | Title of the group shown in the default activator |
+| `value` | `any` | — | no | Value of the group used in the expansion and selection logic |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `activator` | `CdsListGroupActivatorSlot` | Activator of the group — the heading that expands and collapses the group on click |
+| `default` | `any` | Content of the group (the nested list items) |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `isOpen` | `boolean` | Whether the group is expanded |
+
+---
+
+## CdsListItem
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `active` | `boolean \| undefined` | — | no | Forces the active state of the item |
+| `activeClass` | `string \| undefined` | — | no | Class applied to list items when they are in the active state |
+| `activeColor` | `string \| undefined` | — | no | Color of the component in its active state |
+| `appendAvatar` | `string \| undefined` | — | no | Avatar (image URL) shown after the item content |
+| `appendIcon` | `IconValue \| undefined` | — | no | Icon shown after the item content |
+| `baseColor` | `string \| undefined` | — | no | Color of the component in its inactive state |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `color` | `string \| undefined` | — | no | Component color |
+| `description` | `string \| number \| boolean \| undefined` | — | no | Description of the list item shown below the title and the subtitle |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `exact` | `boolean \| undefined` | — | no | If true, the active state applies only on an exact route match |
+| `height` | `string \| number \| undefined` | — | no | Component height |
+| `href` | `string \| undefined` | — | no | The `href` attribute of the link. When set, the component behaves as a regular link |
+| `index` | `number \| undefined` | — | no | Index of the item; used for keyboard navigation |
+| `lines` | `false \| "one" \| "two" \| "three" \| undefined` | `'one'` | no | Number of lines in the list items; affects their height. `false` turns off the fixed height |
+| `link` | `boolean \| undefined` | — | no | Turns the item into a clickable link. Detected automatically when `href` or `to` is set |
+| `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 |
+| `nav` | `boolean \| undefined` | — | no | Applies navigation list styles (rounded active items) |
+| `prependAvatar` | `string \| undefined` | — | no | Avatar (image URL) shown before the item content |
+| `prependGap` | `string \| number \| undefined` | — | no | Indent before the item content (reserves space for the prepend icon or avatar) |
+| `prependIcon` | `IconValue \| undefined` | — | no | Icon shown before the item content |
+| `replace` | `boolean \| undefined` | — | no | If true, navigation replaces the current history entry instead of pushing a new one |
+| `slim` | `boolean \| undefined` | — | no | Removes the inner paddings of the list and of the menu container: the list fills the available area completely |
+| `subtitle` | `string \| number \| boolean \| undefined` | — | no | Subtitle of the item shown below the title |
+| `tabindex` | `string \| number \| undefined` | — | no | Value of the element `tabindex` attribute |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+| `textColor` | `string \| undefined` | — | no | Text color of the component |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `title` | `string \| number \| boolean \| undefined` | — | no | Title of the item shown in the component |
+| `to` | `LinkTo \| undefined` | — | no | Target route or route location object for RouterLink. When set, the component behaves as a RouterLink |
+| `value` | `any` | — | no | Value of the item used for selection and activation in the list |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `click` | `[value: MouseEvent \| KeyboardEvent]` | Fires on a click on the list item |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `append` | `ListItemSlot` | Content after the item text (in place of the append icon or avatar) |
+| `default` | `ListItemSlot` | Default content inside the item |
+| `description` | `ListItemDescriptionSlot` | Content of the item description (shown below the title and the subtitle) |
+| `prepend` | `ListItemSlot` | Content before the item text (in place of the prepend icon or avatar) |
+| `subtitle` | `ListItemSubtitleSlot` | Content of the item subtitle |
+| `title` | `ListItemTitleSlot` | Content of the item title |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `activate` | `(activated: boolean, e?: Event \| undefined) => void` | Activates or deactivates the item |
+| `isActivated` | `boolean` | Whether the item is in the active state |
+| `isGroupActivator` | `boolean \| undefined` | Whether the item is a group activator |
+| `isSelected` | `boolean` | Whether the item is selected |
+| `list` | `{ filterable: MaybeRefOrGetter<boolean>; hasPrepend: Ref<boolean, boolean>; updateHasPrepend: (value: boolean) => void; trackingIndex: Ref<number, number>; navigationStrategy: Ref<"focus" \| "track", "focus" \| "track">; uid: string; } \| null` | Context of the parent list (CdsList) |
+| `root` | `NestedRoot` | Root nesting context of the parent list |
+| `select` | `(selected: boolean, e?: Event \| undefined) => void` | Selects or deselects the item |
+
+---
+
+## CdsListItemAction
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `end` | `boolean \| undefined` | — | no | Places the action at the end of the list item (after the content) |
+| `start` | `boolean \| undefined` | — | no | Places the action at the start of the list item (before the content) |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Default content of the action |
+
+---
+
+## CdsListItemDescription
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+
+---
+
+## CdsListItemDivider
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `color` | `string \| undefined` | — | no | Color of the divider. |
+| `contentOffset` | `string \| number \| (string \| number)[] \| undefined` | — | no | Increases the spacing between the content and the lines. When passed as an array, the second value shifts the slot content down (or right when vertical = true). |
+| `gradient` | `boolean \| undefined` | — | no | Adds a fade-out effect on both ends. |
+| `inset` | `boolean \| undefined` | — | no | Adds an indent to horizontal dividers and reduces the maximum height of vertical ones. |
+| `length` | `string \| number \| undefined` | — | no | Length of the divider. Defaults to pixels. |
+| `opacity` | `string \| number \| undefined` | — | no | Opacity of the divider. |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `thickness` | `string \| number \| undefined` | — | no | Thickness of the divider. Defaults to pixels. |
+| `variant` | `"dotted" \| "dashed" \| "solid" \| "double" \| undefined` | `'solid'` | no | Visual variant of the divider |
+| `vertical` | `boolean \| undefined` | — | no | Renders the divider vertically |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Text or content placed in the gap of the divider |
+
+---
+
+## CdsListItemImage
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+
+---
+
+## CdsListItemMedia
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `end` | `boolean \| undefined` | — | no | Places the media at the end of the list item (after the content) |
+| `start` | `boolean \| undefined` | — | no | Places the media at the start of the list item (before the content) |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Default content of the media |
+
+---
+
+## CdsListItemSubtitle
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+
+---
+
+## CdsListItemTitle
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+
+---
+
+## CdsListSubheader
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `color` | `string \| undefined` | — | no | Color of the subheader text |
+| `inset` | `boolean \| undefined` | — | no | Adds a left indent, aligning the text with the content of the list items |
+| `sticky` | `boolean \| undefined` | — | no | Pins the subheader to the top while the list scrolls |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+| `title` | `string \| undefined` | — | no | Text of the subheader |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Default content of the subheader (overrides the `title` prop) |