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

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

@@ -0,0 +1,10 @@
+# CdsTree — 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 tree reveals nesting: its nodes have child levels. | A flat set without a hierarchy is a list — take CdsList. |
+| For selecting many nodes turn on checkboxes — the selection state is visible at once. | Multiple selection by clicking nodes is invisible and expects the user to know about Ctrl. |
+| Short node titles read like a table of contents. | Long phrases wrap onto several lines and break the rhythm of the tree. |

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

@@ -0,0 +1,39 @@
+# CdsTree — 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.
+
+## _CdsTree.variables.scss
+
+```scss
+@use '../../../styles/tools';
+
+$tree-title-height: tools.to-rem(24px) !default;
+$tree-switcher-size: tools.to-rem(20px) !default;
+$tree-checkbox-size: tools.to-rem(24px) !default;
+$tree-node-padding: var(--cds-spacing-100) !default;
+$tree-node-inset: var(--cds-spacing-100) !default;
+$tree-node-border-radius: var(--cds-border-radius-200) !default;
+$tree-node-outline-width: var(--cds-border-200) !default;
+$tree-drop-indicator-height: tools.to-rem(2px) !default;
+$tree-drop-indicator-radius: tools.to-rem(1px) !default;
+$tree-drop-indicator-dot-size: tools.to-rem(8px) !default;
+$tree-drop-indicator-dot-border: tools.to-rem(2px) !default;
+$tree-drop-indicator-dot-top: tools.to-rem(-3px) !default;
+$tree-drop-indicator-dot-left: tools.to-rem(-6px) !default;
+$tree-line-offset: tools.to-rem(-1px) !default;
+$tree-line-width: tools.to-rem(1px) !default;
+$tree-draggable-hover-opacity: 0.45 !default;
+$tree-colors: (
+  'text-color': rgb(var(--cds-color-content-primary)),
+  'expanded': rgb(var(--cds-color-fill-primary-active)),
+  'line': rgb(var(--cds-color-line-tertiary)),
+  'selected': rgb(var(--cds-color-fill-selected)),
+  'selected-text': rgb(var(--cds-color-content-on-dark)),
+  'hover': rgb(var(--cds-color-fill-primary-hover)),
+  'focus': rgb(var(--cds-color-line-focus-outline)),
+  'disabled': rgb(var(--cds-color-content-disable)),
+  'drop-indicator': rgb(var(--cds-color-brand-primary))
+) !default;
+```

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

@@ -0,0 +1,105 @@
+# CdsUploader — 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)
+
+The uploader sends files to the server right from the interface: the user picks them in the system dialog or drags them onto the button, and the component shows the list of what was uploaded — with a status, progress, downloading and removal. Every step of the file lifecycle comes with an event.
+
+## CdsUploader
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `accept` | `string \| string[] \| undefined` | `''` | no | Allowed file types |
+| `action` | `NUploader.TAction \| undefined` | `''` | no | URL the files are uploaded to |
+| `activeColor` | `string \| undefined` | — | no | Color of the component in its active state |
+| `appendIcon` | `IconValue \| undefined` | — | no | Icon in the append slot, after the content |
+| `baseColor` | `string \| undefined` | — | no | Color of the component in its inactive state |
+| `beforeUpload` | `((file: NUploader.IUploadFile<any>, fileList: NUploader.IUploadFile<any>[]) => NUploader.TBeforeUploadFileType \| Promise<void \| NUploader.TBeforeUploadFileType>) \| undefined` | — | no | Lifecycle hook called before a file is uploaded |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `buttonProps` | `Partial<CdsButtonProps> \| undefined` | `null` | no | Props for the CdsButton component |
+| `capture` | `boolean \| "user" \| "environment" \| undefined` | — | no | Type of the media the file is captured from on mobile devices |
+| `centerAffix` | `boolean \| undefined` | `true` | no | Vertically center the appendInner, prependInner, clearIcon and label elements. |
+| `color` | `string \| undefined` | — | no | Component color |
+| `customRequest` | `((options: NUploader.IUploadRequestOption<any>) => void) \| undefined` | — | no | Your own file upload request. Overrides the default xhr |
+| `data` | `Record<string, unknown> \| ((file: string \| Blob \| NUploader.IRcFile) => Record<string, unknown>) \| {} \| undefined` | `{}` | no | Parameters of the file upload or a function returning them |
+| `defaultFileList` | `NUploader.IUploadFile<any>[] \| undefined` | — | no | Default list of files |
+| `description` | `string \| undefined` | — | no | Description of the component, shown under the label |
+| `direction` | `"horizontal" \| "vertical" \| undefined` | `'horizontal'` | no | Switches the component between horizontal and vertical layout. |
+| `directory` | `boolean \| undefined` | — | no | Upload directories |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `downloadIcon` | `IconValue \| undefined` | `'download'` | no | File download icon |
+| `error` | `boolean \| undefined` | — | no | Puts the component into the error state |
+| `errorMessages` | `string \| readonly string[] \| null \| undefined` | `[]` | no | Puts the component into the error state and passes custom error messages. They are merged with any checks defined in the `rules` prop. This field does not trigger validation. |
+| `focused` | `boolean \| undefined` | — | no | Controls the focus state of the component. When `true`, the component is considered focused and may apply the corresponding styles or behavior. |
+| `headers` | `NUploader.TUploadRequestHeaders \| undefined` | — | no | Request headers |
+| `hideDetails` | `boolean \| "auto" \| undefined` | — | no | Hides the details block (messages and hints). With the 'auto' value the block is hidden when there are no messages |
+| `hideMessages` | `boolean \| undefined` | — | no | Hide the messages under the input |
+| `hint` | `string \| undefined` | — | no | Hint text shown under the input |
+| `iconColor` | `string \| boolean \| undefined` | — | no | Icon color. Accepts a boolean or a color string |
+| `id` | `string \| undefined` | — | no | Unique identifier of the component |
+| `isImageUrl` | `((file: NUploader.IUploadFile<any>) => boolean) \| undefined` | — | no | Configuration of the thumbnails of the uploaded files (not supported yet) |
+| `itemRender` | `NUploader.TItemRender<any> \| undefined` | — | no | Render function for an item of the uploaded file list |
+| `label` | `string \| undefined` | — | no | Label text of the component |
+| `listType` | `NUploader.TUploadListType \| undefined` | `'text'` | no | Type of the uploaded file list ('text' only is supported) |
+| `maxCount` | `number \| undefined` | — | no | Maximum number of uploaded files |
+| `maxErrors` | `string \| number \| undefined` | `1` | no | Maximum number of validation errors shown |
+| `maxWidth` | `string \| number \| undefined` | — | no | Maximum component width |
+| `messages` | `string \| readonly string[] \| undefined` | `[]` | no | Messages shown under the input |
+| `method` | `NUploader.TUploadRequestMethod \| undefined` | — | no | HTTP method of the upload request |
+| `minWidth` | `string \| number \| undefined` | — | no | Minimum component width |
+| `modelValue` | `any` | — | no | Value of the component in v-model. If the component supports the multiple prop, an empty array is used by default. |
+| `multiple` | `boolean \| undefined` | `true` | no | Uploading several files at once |
+| `name` | `string \| undefined` | — | no | Name of the input |
+| `openFileDialogOnClick` | `boolean \| undefined` | — | no | Whether to open the system dialog on a click on the uploader |
+| `persistentHint` | `boolean \| undefined` | — | no | Always show the hint, not only on focus |
+| `prependIcon` | `IconValue \| undefined` | — | no | Icon in the prepend slot, before the content |
+| `readonly` | `boolean \| null \| undefined` | `null` | no | Read-only state |
+| `removeIcon` | `IconValue \| undefined` | `'delete'` | no | File removal icon |
+| `rules` | `readonly ValidationRule[] \| undefined` | `[]` | no | Accepts an array of items of different types: functions, booleans and strings. Functions take the input value as an argument and must return either true / false, or a string with an error message. The input goes into the error state if a function returns false (or any value in the array is false) or is a string. |
+| `showTooltipWithError` | `boolean \| undefined` | `false` | no | Whether to show a tooltip with the error next to every file |
+| `showUploadList` | `boolean \| NUploader.TShowUploadList \| undefined` | `true` | no | Show the list of the uploaded files |
+| `size` | `number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined` | `'md'` | no | Size of the component |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'span'` | no | Custom HTML tag or component to render |
+| `textColor` | `string \| undefined` | — | no | Text color of the component |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `uploadIcon` | `IconValue \| undefined` | `'upload'` | no | File upload icon |
+| `validateOn` | `ValidateOn \| undefined` | — | no | Changes the type of the event that triggers validation |
+| `validationValue` | `any` | — | no | Value used when applying the validation rules |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+| `withCredentials` | `boolean \| undefined` | — | no | Send the request with cookies |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `change` | `[info: NUploader.IUploadChangeParam<NUploader.IUploadFile<any>>]` | Fires when the field changes |
+| `download` | `[file: NUploader.IUploadFile<any>]` | Fires when a file is downloaded |
+| `drop` | `[event: DragEvent]` | Fires when a file is dropped |
+| `error` | `[error: ProgressEvent<EventTarget> \| NUploader.IUploadRequestError, response: any, file: NUploader.IUploadFile<any>]` | Fires when a file upload fails |
+| `preview` | `[file: NUploader.IUploadFile<any>]` | Fires when a file preview is opened |
+| `progress` | `[event: { percent: number; } \| undefined, file: NUploader.IUploadFile<any>]` | Fires while a file is being uploaded |
+| `reject` | `[fileList: NUploader.IUploadFile<any>[]]` | Fires when a file upload is rejected |
+| `remove` | `[file: NUploader.IUploadFile<any>]` | Fires when a file is removed |
+| `success` | `[response: Record<string, unknown>, file: NUploader.IUploadFile<any>]` | Fires when a file has been uploaded successfully |
+| `update:modelValue` | `[fileList: NUploader.IUploadFile<any>[]]` | Fires when the value changes (v-model) |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `append` | `any` | Content of the append slot after the upload button. |
+| `default` | `{ props: Partial<CdsButtonProps>; }` | The upload button or activator. Receives the props for CdsButton. |
+| `description` | `any` | Description under the label. |
+| `itemRender` | `{ originNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>; file?: NUploader.IUploadFile<any> \| undefined; fileList?: NUploader.IUploadFile<any>[] \| undefined; actions: { download?: (() => void) \| undefined; preview?: (() => void) \| undefined; remove?: (() => void) \| undefined; }; }` | Custom rendering of an item of the uploaded file list. |
+| `label` | `any` | Label of the upload field. |
+| `messages` | `any` | Hint and error messages. |
+| `prepend` | `any` | Content of the prepend slot before the upload button. |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `fileList` | `NUploader.IUploadFile<any>[]` | Current list of files together with their upload statuses. |
+| `uploadRef` | `NUploader.IUploaderRef \| undefined` | Ref to the inner upload element — gives access to choosing files programmatically and to aborting. |