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

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

@@ -0,0 +1,10 @@
+# CdsTable — 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 |
+| --- | --- |
+| Numbers are aligned right — the digits line up and the amounts are easy to compare. | Numbers aligned left blend into the text, and you have to read closely to compare values. |
+| Truncate long text with the column's ellipsis — rows keep the same height and the full text stays available in a tooltip. | Raw long text stretches the row and the table loses its rhythm. |
+| Highlight only the rows that need attention with a status. | When nearly every row is highlighted, the signal stops working. |

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

@@ -0,0 +1,92 @@
+# CdsTable — 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.
+
+## _CdsTable.variables.scss
+
+```scss
+@use '../../../styles/tools';
+
+$table-breakpoint-md: 1056px !default;
+
+// Table
+$table-bg: rgb(var(--cds-color-fill-primary), 0.4) !default;
+$table-bg-nested: rgb(var(--cds-color-fill-secondary), 0.5) !default;
+$table-bg-fixed: rgb(var(--cds-color-fill-primary)) !default;
+$table-color: rgb(var(--cds-color-content-primary)) !default;
+$table-header-color: rgb(var(--cds-color-content-primary)) !default;
+$table-header-bg: rgb(var(--cds-color-fill-secondary), 0.4) !default;
+$table-header-bg-fixed: rgb(var(--cds-color-fill-secondary)) !default;
+$table-slot-paddings: var(--cds-spacing-400) var(--cds-spacing-300) !default;
+$table-page-size-text-color: rgb(var(--cds-color-content-tertiary)) !default;
+$table-cell-bg: rgb(var(--cds-color-fill-primary), 0.3) !default;
+$table-stipe-cell-bg: rgb(var(--cds-color-fill-secondary), 0.2) !default;
+$table-stipe-cell-fixed-bg: rgb(var(--cds-color-fill-secondary)) !default;
+$table-warning-cell-bg: rgb(var(--cds-color-status-warning-fill), 0.5) !default;
+$table-warning-cell-fixed-bg: rgb(var(--cds-color-status-warning-fill)) !default;
+$table-error-cell-bg: rgb(var(--cds-color-status-danger-fill), 0.5) !default;
+$table-error-cell-fixed-bg: rgb(var(--cds-color-status-danger-fill)) !default;
+$table-th-padding: var(--cds-spacing-200) var(--cds-spacing-300) !default;
+$table-td-padding: calc(var(--cds-spacing-300) + var(--cds-spacing-50)) !default;
+$table-th-height: tools.to-rem(42px) !default;
+$table-td-height: tools.to-rem(49px) !default;
+$table-selected-cell-width: tools.to-rem(42px) !default;
+$table-expandable-cell-width: tools.to-rem(48px) !default;
+$table-nested-gap: calc(49px + 3px) !default;
+
+// Hover
+$table-cell-hover-bg: rgb(var(--cds-color-fill-secondary-hover), 0.3) !default;
+$table-cell-hover-bg-fixed: rgb(var(--cds-color-fill-primary-hover)) !default;
+$table-expanded-row-bg: rgb(var(--cds-color-fill-secondary), 0.5) !default;
+
+// Sort
+$table-header-sort-active-bg: rgb(var(--cds-color-fill-secondary)) !default;
+$table-fixed-header-sort-active-bg: rgb(var(--cds-color-fill-secondary)) !default;
+$table-header-sort-bg: rgb(var(--cds-color-fill-secondary)) !default;
+$table-body-sort-bg: rgb(var(--cds-color-fill-primary)) !default;
+$table-sort-icon-color: rgb(var(--cds-color-content-primary)) !default;
+$table-sort-icon-color-active: rgb(var(--cds-color-content-primary)) !default;
+
+// Sizes
+$table-selection-column-width: tools.to-rem(32px) !default;
+
+// Fixed
+$table-z-index-fixed: 2 !default;
+$table-box-shadow-color: rgb(var(--cds-alpha-silver-200)) !default;
+$table-shadow-border: var(--cds-border-100) solid rgb(var(--cds-color-line-elevated)) !default;
+
+// Sticky
+$table-sticky-scroll-bar-bg: rgb(var(--cds-color-fill-secondary)) !default;
+$table-sticky-scroll-bar-active-bg: rgb(var(--cds-color-fill-secondary-active)) !default;
+$table-sticky-scroll-bar-radius: var(--cds-border-radius-200) !default;
+$table-sticky-scroll-border: var(--cds-border-100) solid rgb(var(--cds-color-fill-primary)) !default;
+$table-z-index-sticky: calc($table-z-index-fixed + 1) !default;
+
+// Selected
+$table-selected-cell-bg: rgb(var(--cds-color-brand-secondary), 0.5) !default;
+$table-selected-cell-bg-fixed: rgb(var(--cds-color-brand-secondary)) !default;
+
+// Bordered
+$table-border: var(--cds-border-100) solid rgb(var(--cds-color-line-tertiary)) !default;
+$table-border-header: var(--cds-border-100) solid rgb(var(--cds-color-line-tertiary)) !default;
+$table-border-radius: var(--cds-border-radius-200) !default;
+
+
+// Resize
+$table-line-bg: rgb(var(--cds-color-line-primary-hover)) !default;
+
+// Expanded
+$table-expandable-button-opened-bg: rgb(var(--cds-color-fill-secondary-active)) !default;
+$table-expandable-tree-button-width: tools.to-rem(20px) !default;
+$table-expandable-tree-button-height: tools.to-rem(20px) !default;
+
+// Drag-n-Drop
+$table-drag-handle-color: rgb(var(--cds-color-content-tertiary)) !default;
+$table-drag-handle-color-hover: rgb(var(--cds-color-content-primary)) !default;
+$table-drag-handle-size: tools.to-rem(16px) !default;
+$table-drag-indicator-color: rgb(var(--cds-color-brand-primary)) !default;
+$table-drag-indicator-size: tools.to-rem(2px) !default;
+$table-dragging-opacity: 0.4 !default;
+```

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

@@ -0,0 +1,179 @@
+# CdsTabs — 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)
+
+Tabs split the screen into sections of equal weight and switch between them in place, without going to another page. The bar is built from `CdsTab` components or from an `items` array, and the content of the sections is switched by `CdsTabsView` and `CdsTabsViewItem`.
+
+Family: [CdsTabs](#cdstabs) + subcomponents: [CdsTab](#cdstab), [CdsTabsView](#cdstabsview), [CdsTabsViewItem](#cdstabsviewitem).
+
+## CdsTabs
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `activeColor` | `string \| undefined` | — | no | Color of the component in its active state |
+| `align` | `"title" \| "start" \| "end" \| "center" \| undefined` | `'start'` | no | Alignment of the tabs inside the bar |
+| `baseColor` | `string \| undefined` | — | no | Color of the component in its inactive state |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `centerActive` | `boolean \| undefined` | — | no | Forces the active component to be aligned to the center. |
+| `color` | `string \| undefined` | — | no | Component color |
+| `contentClass` | `any` | — | no | Adds classes to the slide group container |
+| `contentStyle` | `any` | — | no | Adds inline styles to the slide group container |
+| `direction` | `"horizontal" \| "vertical" \| undefined` | `'horizontal'` | no | Switches the component between horizontal and vertical layout. |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `fixedTabs` | `boolean \| undefined` | — | no | Makes all tabs the same width regardless of the length of their labels |
+| `grow` | `boolean \| undefined` | — | no | Stretches the tabs across the whole available width of the container |
+| `height` | `string \| number \| undefined` | — | no | Height of the tab bar. A number is in pixels, a string takes any CSS unit |
+| `hideSlider` | `boolean \| undefined` | — | no | Hides the underline indicator of the active tab |
+| `inset` | `boolean \| undefined` | — | no | Styling with a background: the active tab is highlighted with a filled pill instead of an underline |
+| `insetPadding` | `string \| number \| undefined` | — | no | Padding of the background in `inset` mode. A number is in pixels, a string takes any CSS unit |
+| `insetRadius` | `string \| number \| undefined` | — | no | Corner radius of the background in `inset` mode. A number is in pixels, a string takes any CSS unit |
+| `items` | `readonly TabItem[] \| undefined` | `[]` | no | List of tabs. A string or a number is a label, an object is a tab with arbitrary `CdsTab` props |
+| `mandatory` | `boolean \| "force" \| undefined` | `'force'` | no | Requires at least one item to stay selected |
+| `max` | `number \| undefined` | — | no | Maximum number of items that can be selected |
+| `mobile` | `boolean \| null \| undefined` | `null` | no | Determines the display mode of the component: `true` renders it in mobile mode, `false` in desktop mode, `null` makes the mode depend on the current breakpoint. |
+| `mobileBreakpoint` | `number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined` | — | no | Sets the breakpoint at which the component switches to mobile mode. Accepts a number (for example, 600) or the name of a predefined breakpoint (`xs`, `sm`, `md`, `lg`, `xl`). |
+| `modelValue` | `any` | — | no | Value of the selected items of the group |
+| `multiple` | `boolean \| undefined` | — | no | Allows selecting several items at once |
+| `nextIcon` | `IconValue \| undefined` | `'next'` | no | Icon for the “next” button. |
+| `prevIcon` | `IconValue \| undefined` | `'prev'` | no | Icon for the “previous” button. |
+| `required` | `boolean \| "force" \| undefined` | `'force'` | no | Requires at least one item to stay selected |
+| `scrollToActive` | `boolean \| undefined` | `true` | no | When `true`, the container scrolls the active component into view whenever it changes. |
+| `selectedClass` | `string \| undefined` | `'cds-tabs--selected'` | no | CSS class applied in the selected state |
+| `showArrows` | `string \| boolean \| undefined` | — | no | Changes how the arrows are shown. By default the arrows appear on desktop devices when the container overflows and stay hidden on mobile devices. `true` also shows them on mobile on overflow, `desktop` always shows them on desktop, `mobile` always on mobile, `always` on both, and `never` disables the arrows. |
+| `sliderTransition` | `"shift" \| "grow" \| "fade" \| undefined` | — | no | Animation of the underline indicator of the active tab |
+| `sliderTransitionDuration` | `string \| number \| undefined` | — | no | Duration of the indicator animation in milliseconds |
+| `spaced` | `"both" \| "start" \| "end" \| undefined` | — | no | Pushes the prepend and append slots apart to the edges of the button. |
+| `stacked` | `boolean \| undefined` | — | no | Lays out the icon and the label of the tab vertically — the icon above the text |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+| `textColor` | `string \| undefined` | — | no | Text color of the component |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `update:modelValue` | `[value: unknown]` | Fires when the tab is switched. Passes the value of the new active tab |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Tabs and content when they are declared by hand instead of the `items` prop |
+| `item` | `CdsTabsSlot<any>` | Template for the tab content. The slot props carry the element from `items` |
+| `next` | `any` | Button that scrolls the tab bar forward |
+| `prev` | `any` | Button that scrolls the tab bar backward |
+| `tab` | `CdsTabsSlot<any>` | Template for the tab label. The slot props carry the element from `items` |
+| `view` | `any` | The whole tab content area — replaces the automatic `CdsTabsView` |
+
+---
+
+## CdsTab
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `activeColor` | `string \| undefined` | — | no | Color of the component in its active state |
+| `appearance` | `"primary" \| "secondary" \| "tertiary" \| "inverse" \| undefined` | `'primary'` | no | Visual appearance of the component |
+| `appendIcon` | `IconValue \| undefined` | — | no | Icon in the append slot, after the content |
+| `baseColor` | `string \| undefined` | — | no | Color of the component in its inactive state |
+| `block` | `boolean \| undefined` | — | no | Stretches the button to the full width of its container |
+| `color` | `string \| undefined` | — | no | Component color |
+| `content` | `string \| number \| undefined` | — | no | Content displayed in the component. |
+| `direction` | `"horizontal" \| "vertical" \| undefined` | `'horizontal'` | no | Switches the component between horizontal and vertical layout. |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `exact` | `boolean \| undefined` | — | no | If true, the active state applies only on an exact route match |
+| `fixed` | `boolean \| undefined` | — | no | Fixes the width of the tab so it does not stretch to the length of its label |
+| `height` | `string \| number \| undefined` | — | no | Component height |
+| `hideSlider` | `boolean \| undefined` | — | no | Hides the underline indicator of the active tab |
+| `href` | `string \| undefined` | — | no | The `href` attribute of the link. When set, the component behaves as a regular link |
+| `icon` | `boolean \| IconValue \| undefined` | — | no | Icon to display; the component renders as an icon-only button |
+| `loading` | `string \| boolean \| undefined` | — | no | Loading indicator for the component |
+| `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 |
+| `prependIcon` | `IconValue \| undefined` | — | no | Icon in the prepend slot, before the content |
+| `readonly` | `boolean \| null \| undefined` | `null` | no | Read-only state |
+| `replace` | `boolean \| undefined` | — | no | If true, navigation replaces the current history entry instead of pushing a new one |
+| `selectedClass` | `string \| undefined` | `'cds-tab--selected'` | no | CSS class applied in the selected state |
+| `size` | `number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined` | `'md'` | no | Size of the component |
+| `sliderTransition` | `"shift" \| "grow" \| "fade" \| undefined` | — | no | Animation of the underline indicator of the active tab |
+| `sliderTransitionDuration` | `string \| number \| undefined` | — | no | Duration of the indicator animation in milliseconds |
+| `spaced` | `"both" \| "start" \| "end" \| undefined` | — | no | Pushes the prepend and append slots apart to the edges of the button. |
+| `stacked` | `boolean \| undefined` | — | no | Stacks the icon above the text instead of placing them side by side |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'button'` | no | Custom HTML tag or component to render |
+| `text` | `string \| number \| undefined` | — | no | Text displayed in the component. |
+| `textColor` | `string \| undefined` | — | no | Text color of the component |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `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 component within the group |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `append` | `any` | Content after the text |
+| `default` | `any` | Content inside the button |
+| `loader` | `any` | Loading indicator |
+| `prepend` | `any` | Content before the text |
+
+---
+
+## CdsTabsView
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `crossfade` | `boolean \| undefined` | — | no | Slides change with a smooth crossfade instead of a shift |
+| `direction` | `"horizontal" \| "vertical" \| undefined` | `'horizontal'` | no | Switches the component between horizontal and vertical layout. |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `max` | `number \| undefined` | — | no | Maximum number of items that can be selected |
+| `modelValue` | `any` | — | no | Value of the selected items of the group |
+| `multiple` | `boolean \| undefined` | — | no | Allows selecting several items at once |
+| `reverse` | `boolean \| undefined` | — | no | Inverts the direction of the transition animation between slides |
+| `selectedClass` | `string \| undefined` | — | no | CSS class applied in the selected state |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `transitionDuration` | `number \| undefined` | — | no | Duration of the transition animation between slides, in milliseconds |
+| `verticalArrows` | `boolean \| "left" \| "right" \| undefined` | — | no | Places the navigation arrows vertically: `'left'` or `'right'` — the side, `true` — the default side |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `update:modelValue` | `[value: any]` | Fires when the shown content changes. Passes the value of the new active tab |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `additional` | `{ group: GroupProvide; }` | Extra content above the slides — indicator dots or your own navigation, for example |
+| `default` | `{ group: GroupProvide; }` | Slides. The slot props carry the group state for controlling the active slide |
+| `next` | `{ props: ControlProps; }` | Button that moves to the next slide. The slot props are ready to bind to your own button |
+| `prev` | `{ props: ControlProps; }` | Button that moves to the previous slide. The slot props are ready to bind to your own button |
+
+---
+
+## CdsTabsViewItem
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `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. |
+| `reverseTransition` | `string \| boolean \| undefined` | — | no | Transition used when the slide appears in the reverse direction. A transition component name, or `false` to turn the animation off |
+| `selectedClass` | `string \| undefined` | — | no | CSS class applied in the selected state |
+| `transition` | `string \| boolean \| undefined` | — | no | Transition used when the slide appears in the forward direction. A transition component name, or `false` to turn the animation off |
+| `value` | `any` | — | no | Value of the component within the group |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Content of the slide |