@public-ui/mcp 4.0.0-beta.0 → 4.0.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +2 -2
  2. package/shared/sample-index.json +55 -39
package/shared/sample-index.json CHANGED
@@ -1,16 +1,16 @@
1
1
  {
2
2
  "metadata": {
3
- "generatedAt": "2025-12-19T17:11:13.590Z",
3
+ "generatedAt": "2025-12-24T07:14:42.588Z",
4
4
  "buildMode": "ci",
5
5
  "counts": {
6
- "total": 230,
6
+ "total": 232,
7
7
  "totalDocs": 21,
8
- "totalSpecs": 50,
9
- "totalSamples": 144,
8
+ "totalSpecs": 51,
9
+ "totalSamples": 145,
10
10
  "totalScenarios": 15
11
11
  },
12
12
  "repo": {
13
- "commit": "523ee96090f8f7bd2f97af02217f4e4a175538da",
13
+ "commit": "de4cb1ad9eaf890910fd2204faaa42c91b1fcbd9",
14
14
  "branch": "develop",
15
15
  "repoUrl": "https://github.com/public-ui/kolibri"
16
16
  }
@@ -45,7 +45,7 @@
45
45
  "group": "docs",
46
46
  "name": "BREAKING_CHANGES.v4",
47
47
  "path": "docs/BREAKING_CHANGES.v4.md",
48
- "code": "# Breaking Changes for version 4\n\n## Introduction\n\nNew major versions of KoliBri are developed with the goal of simplifying maintenance and support and promoting further development.\n\nFor more information, see the [KoliBri Maintenance and Support Strategy](https://github.com/public-ui/kolibri/blob/develop/MIGRATION.md).\n\n## Loader entry point\n\nImport the component loader from `@public-ui/components/loader`. The previous `@public-ui/components/dist/loader` path is no longer part of the public API surface.\n\n**Before:**\n\n```ts\nimport { defineCustomElements } from '@public-ui/components/dist/loader';\n```\n\n**After:**\n\n```ts\nimport { defineCustomElements } from '@public-ui/components/loader';\n```\n\n## Changed Components\n\n### All components\n\n- The `_id` prop has been removed from components that use Shadow DOM. IDs within a shadow tree are not visible outside, so each component now generates its own stable ID internally and manages all references. For tests or external lookups, set an `id` on the host element instead.\n- The `_msg` prop no longer supports the `_label` and `_variant` options. Messages always render with the `msg` variant and without a label.\n- Input messages only render once the field is marked as `_touched`, regardless of the message type. Ensure `_touched` is set when a message should be displayed.\n\n### kol-combobox & kol-single-select\n\n- `_hideClearButton` has been replaced with `_hasClearButton` (default: `true`). Set `_hasClearButton=\"false\"` to hide the clear button while keeping existing values intact. The migration CLI rewrites `_hide-clear-button` attributes and `_hideClearButton` props automatically, flipping boolean values so behaviour stays the same.\n\n### kol-nav\n\n- The `orientation` property has been removed from kol-nav. It is now always in vertical mode by default.\n\n**Before:**\n\n```html\n<kol-nav _orientation=\"vertical\" _label=\"\" _links=\"[]\"></kol-nav>\n```\n\n**After (v4):**\n\n```html\n<kol-nav _label=\"\" _links=\"[]\"></kol-nav>\n```\n\n### ToasterService and toast component\n\n- The `variant` property has been removed from Toast objects. All toasts now use the `card` variant by default.\n- The `defaultVariant` option has been removed from `ToasterService.getInstance()`. The service no longer accepts variant configuration.\n\n**Before:**\n\n```typescript\n// ToasterService configuration\nconst toaster = ToasterService.getInstance(document, {\n\tdefaultVariant: 'card', // ← removed\n});\n\n// Toast with variant\ntoaster.enqueue({\n\tdescription: 'Message',\n\tlabel: 'Label',\n\ttype: 'info',\n\tvariant: 'card', // ← removed\n});\n```\n\n**After:**\n\n```typescript\n// ToasterService configuration\nconst toaster = ToasterService.getInstance(document);\n\n// Toast without variant (uses card variant automatically)\ntoaster.enqueue({\n\tdescription: 'Message',\n\tlabel: 'Label',\n\ttype: 'info',\n});\n```\n\n### kol-table-stateless & kol-table-stateful\n\n#### Selection Callbacks\n\nThe `onSelectionChange` callback signatures have been simplified to always return arrays:\n\n**kol-table-stateless** - Always returns `KoliBriTableSelectionKeys` (array of keys):\n\n**Before (v3):**\n\n```typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableSelectionKeys | KoliBriTableSelectionKey) => {\n\t// Type guard required\n\tconst keys = Array.isArray(selection) ? selection : [selection];\n\tsetSelectedKeys(keys);\n};\n```\n\n**After (v4):**\n\n```typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableSelectionKeys) => {\n\t// Direct usage - always an array\n\tsetSelectedKeys(selection);\n};\n```\n\n**kol-table-stateful** - Always returns `KoliBriTableDataType[] | null` (array of objects or null):\n\n**Before (v3):**\n\n```typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableDataType[] | KoliBriTableDataType | null) => {\n\t// Type guard required for single selection\n\tif (Array.isArray(selection)) {\n\t\tsetSelectedData(selection);\n\t} else if (selection !== null) {\n\t\tsetSelectedData([selection]);\n\t}\n};\n```\n\n**After (v4):**\n\n````typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableDataType[] | null) => {\n\t// Direct usage - always an array or null\n\tsetSelectedData(selection || []);\n};\n### Pagination\n\n- The pagination text (e.g., \"Page 1 of 10\") is now integrated into the Pagination component itself. Previously, this text had to be provided by the application code or was handled by the Stateful Table component.\n- The `_page` property now automatically generates and displays the pagination information text within the component.\n\n**Before (Version 3):**\n\n```typescript\n// Application code had to provide pagination text\n<kol-pagination _page={currentPage} _total={totalPages}></kol-pagination>\n<div>Page {currentPage} of {totalPages}</div>\n\n// Or it was handled by Stateful Table\n<kol-table-stateful></kol-table-stateful>\n````\n\n**After (Version 4):**\n\n```typescript\n// Pagination component handles text internally\n<kol-pagination _page={currentPage} _total={totalPages}></kol-pagination>\n// Text is automatically displayed within the component\n```\n\n#### Settings Menu\n\nThe settings menu is now part of the `_horizontalHeaderCells` prop. The settings for visibility (`visible`), hidability (`hidable`), sortability (`sortable`), and resizability (`resizable`) are now managed directly through the header cell configuration.\n\n**Header Cell Properties:**\n\n- **`visible: boolean`** - Controls whether the column is currently displayed in the table. Users can toggle this in the settings menu if `hidable` is true.\n- **`hidable: boolean`** - Determines if the column can be hidden/shown by the user through the settings menu. If false, the visibility cannot be changed by the user (but may still be changed programmatically).\n- **`sortable: boolean`** - Controls whether a sort button appears in the column header. If true, users can click to sort. The current sort direction is indicated by `sortDirection` ('ASC', 'DESC', or undefined).\n- **`resizable: boolean`** - Determines if the column width can be adjusted by the user through the settings menu.\n- **`width: string`** - CSS width value (e.g., '20ch', '150px') that can be modified by users if `resizable` is true.\n\n**Before:**\n\n```tsx\n// Settings were applied immediately\n<kol-table-stateless\n\t_hasSettingsMenu\n\t_headerCells={headerCells}\n\t_tableSettings={tableSettings}\n\t_on={{\n\t\tonSettingsChange: (event, tableSettings) => {\n\t\t\t// Settings applied immediately\n\t\t\tsetTableSettings(tableSettings);\n\t\t},\n\t}}\n/>\n```\n\n**After:**\n\n```tsx\n// Settings are only applied after clicking \"Apply\"\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{\n\t\t\t\tkey: 'firstName',\n\t\t\t\tlabel: 'First Name',\n\t\t\t\tvisible: true, // Column is displayed\n\t\t\t\thidable: true, // User can hide this column\n\t\t\t\tsortable: true, // User can sort by this column\n\t\t\t\tresizable: true, // User can resize this column\n\t\t\t\twidth: '20ch', // Current width\n\t\t\t\tsortDirection: 'ASC', // Current sort state\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'age',\n\t\t\t\tlabel: 'Age',\n\t\t\t\tvisible: true,\n\t\t\t\thidable: false, // This column cannot be hidden by user\n\t\t\t\tsortable: true,\n\t\t\t\tresizable: false, // Fixed width\n\t\t\t\twidth: '8ch',\n\t\t\t},\n\t\t],\n\t],\n\tvertical: [],\n};\n\n<kol-table-stateless\n\t_hasSettingsMenu\n\t_headerCells={headerCells}\n\t_on={{\n\t\tonChangeHeaderCells: (event, headerCells) => {\n\t\t\t// Settings only updated after user confirms in the menu\n\t\t\t// The callback receives the complete header cell structure with both\n\t\t\t// horizontal and vertical cells. Only the horizontal cells may have\n\t\t\t// been modified by the settings menu; vertical cells are preserved unchanged.\n\t\t\tsetHeaderCells(headerCells);\n\t\t},\n\t}}\n/>;\n```\n\n**Behavior:**\n\n- When `_hasSettingsMenu={true}`, a settings button appears in the table header\n- Users can modify column visibility, width, and other properties through the settings dialog\n- Changes are only applied to the table when the user clicks \"Apply\" or \"OK\"\n- The `onChangeHeaderCells` callback receives the updated header cells after confirmation\n- Columns with `hidable={false}` cannot be toggled in the settings menu\n- Columns with `resizable={false}` cannot be resized by the user\n",
48
+ "code": "# Breaking Changes for version 4\n\n## Introduction\n\nNew major versions of KoliBri are developed with the goal of simplifying maintenance and support and promoting further development.\n\nFor more information, see the [KoliBri Maintenance and Support Strategy](https://github.com/public-ui/kolibri/blob/develop/MIGRATION.md).\n\n## Loader entry point\n\nImport the component loader from `@public-ui/components/loader`. The previous `@public-ui/components/dist/loader` path is no longer part of the public API surface.\n\n**Before:**\n\n```ts\nimport { defineCustomElements } from '@public-ui/components/dist/loader';\n```\n\n**After:**\n\n```ts\nimport { defineCustomElements } from '@public-ui/components/loader';\n```\n\n## Changed Components\n\n### All components\n\n- The `_id` prop has been removed from components that use Shadow DOM. IDs within a shadow tree are not visible outside, so each component now generates its own stable ID internally and manages all references. For tests or external lookups, set an `id` on the host element instead.\n- The `_msg` prop no longer supports the `_label` and `_variant` options. Messages always render with the `msg` variant and without a label.\n- Input messages only render once the field is marked as `_touched`, regardless of the message type. Ensure `_touched` is set when a message should be displayed.\n- The `kolFocus()` and `kolFocusLink()` methods have been removed in v4. Use the native `focus()` method instead.\n - **Migration note:** Runtime backward compatibility for `kolFocus()` and `kolFocusLink()` is not provided. If your code still calls these helper methods, you must update it (for example, by running the KoliBri migration CLI) to use the native `focus()` method on the relevant element.\n\n### kol-combobox & kol-single-select\n\n- `_hideClearButton` has been replaced with `_hasClearButton` (default: `true`). Set `_hasClearButton=\"false\"` to hide the clear button while keeping existing values intact. The migration CLI rewrites `_hide-clear-button` attributes and `_hideClearButton` props automatically, flipping boolean values so behaviour stays the same.\n\n### kol-nav\n\n- The `orientation` property has been removed from kol-nav. It is now always in vertical mode by default.\n\n**Before:**\n\n```html\n<kol-nav _orientation=\"vertical\" _label=\"\" _links=\"[]\"></kol-nav>\n```\n\n**After (v4):**\n\n```html\n<kol-nav _label=\"\" _links=\"[]\"></kol-nav>\n```\n\n### ToasterService and toast component\n\n- The `variant` property has been removed from Toast objects. All toasts now use the `card` variant by default.\n- The `defaultVariant` option has been removed from `ToasterService.getInstance()`. The service no longer accepts variant configuration.\n\n**Before:**\n\n```typescript\n// ToasterService configuration\nconst toaster = ToasterService.getInstance(document, {\n\tdefaultVariant: 'card', // ← removed\n});\n\n// Toast with variant\ntoaster.enqueue({\n\tdescription: 'Message',\n\tlabel: 'Label',\n\ttype: 'info',\n\tvariant: 'card', // ← removed\n});\n```\n\n**After:**\n\n```typescript\n// ToasterService configuration\nconst toaster = ToasterService.getInstance(document);\n\n// Toast without variant (uses card variant automatically)\ntoaster.enqueue({\n\tdescription: 'Message',\n\tlabel: 'Label',\n\ttype: 'info',\n});\n\n### kol-modal → kol-dialog\n\n- The Modal component was renamed to Dialog. Use the new tag `<kol-dialog>` (or the `KolDialog` React wrapper) instead of `<kol-modal>` / `KolModal`.\n- No functional API changes are intended; this is a naming alignment. The migration CLI for v4 rewrites the tag name automatically.\n```\n\n### kol-table-stateless & kol-table-stateful\n\n#### Selection Callbacks\n\nThe `onSelectionChange` callback signatures have been simplified to always return arrays:\n\n**kol-table-stateless** - Always returns `KoliBriTableSelectionKeys` (array of keys):\n\n**Before (v3):**\n\n```typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableSelectionKeys | KoliBriTableSelectionKey) => {\n\t// Type guard required\n\tconst keys = Array.isArray(selection) ? selection : [selection];\n\tsetSelectedKeys(keys);\n};\n```\n\n**After (v4):**\n\n```typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableSelectionKeys) => {\n\t// Direct usage - always an array\n\tsetSelectedKeys(selection);\n};\n```\n\n**kol-table-stateful** - Always returns `KoliBriTableDataType[] | null` (array of objects or null):\n\n**Before (v3):**\n\n```typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableDataType[] | KoliBriTableDataType | null) => {\n\t// Type guard required for single selection\n\tif (Array.isArray(selection)) {\n\t\tsetSelectedData(selection);\n\t} else if (selection !== null) {\n\t\tsetSelectedData([selection]);\n\t}\n};\n```\n\n**After (v4):**\n\n````typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableDataType[] | null) => {\n\t// Direct usage - always an array or null\n\tsetSelectedData(selection || []);\n};\n### Pagination\n\n- The pagination text (e.g., \"Page 1 of 10\") is now integrated into the Pagination component itself. Previously, this text had to be provided by the application code or was handled by the Stateful Table component.\n- The `_page` property now automatically generates and displays the pagination information text within the component.\n\n**Before (Version 3):**\n\n```typescript\n// Application code had to provide pagination text\n<kol-pagination _page={currentPage} _total={totalPages}></kol-pagination>\n<div>Page {currentPage} of {totalPages}</div>\n\n// Or it was handled by Stateful Table\n<kol-table-stateful></kol-table-stateful>\n````\n\n**After (Version 4):**\n\n```typescript\n// Pagination component handles text internally\n<kol-pagination _page={currentPage} _total={totalPages}></kol-pagination>\n// Text is automatically displayed within the component\n```\n\n#### Settings Menu\n\nThe settings menu is now part of the `_horizontalHeaderCells` prop. The settings for visibility (`visible`), hidability (`hidable`), sortability (`sortable`), and resizability (`resizable`) are now managed directly through the header cell configuration.\n\n**Header Cell Properties:**\n\n- **`visible: boolean`** - Controls whether the column is currently displayed in the table. Users can toggle this in the settings menu if `hidable` is true.\n- **`hidable: boolean`** - Determines if the column can be hidden/shown by the user through the settings menu. If false, the visibility cannot be changed by the user (but may still be changed programmatically).\n- **`sortable: boolean`** - Controls whether a sort button appears in the column header. If true, users can click to sort. The current sort direction is indicated by `sortDirection` ('ASC', 'DESC', or undefined).\n- **`resizable: boolean`** - Determines if the column width can be adjusted by the user through the settings menu.\n- **`width: string`** - CSS width value (e.g., '20ch', '150px') that can be modified by users if `resizable` is true.\n\n**Before:**\n\n```tsx\n// Settings were applied immediately\n<kol-table-stateless\n\t_hasSettingsMenu\n\t_headerCells={headerCells}\n\t_tableSettings={tableSettings}\n\t_on={{\n\t\tonSettingsChange: (event, tableSettings) => {\n\t\t\t// Settings applied immediately\n\t\t\tsetTableSettings(tableSettings);\n\t\t},\n\t}}\n/>\n```\n\n**After:**\n\n```tsx\n// Settings are only applied after clicking \"Apply\"\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{\n\t\t\t\tkey: 'firstName',\n\t\t\t\tlabel: 'First Name',\n\t\t\t\tvisible: true, // Column is displayed\n\t\t\t\thidable: true, // User can hide this column\n\t\t\t\tsortable: true, // User can sort by this column\n\t\t\t\tresizable: true, // User can resize this column\n\t\t\t\twidth: '20ch', // Current width\n\t\t\t\tsortDirection: 'ASC', // Current sort state\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'age',\n\t\t\t\tlabel: 'Age',\n\t\t\t\tvisible: true,\n\t\t\t\thidable: false, // This column cannot be hidden by user\n\t\t\t\tsortable: true,\n\t\t\t\tresizable: false, // Fixed width\n\t\t\t\twidth: '8ch',\n\t\t\t},\n\t\t],\n\t],\n\tvertical: [],\n};\n\n<kol-table-stateless\n\t_hasSettingsMenu\n\t_headerCells={headerCells}\n\t_on={{\n\t\tonChangeHeaderCells: (event, headerCells) => {\n\t\t\t// Settings only updated after user confirms in the menu\n\t\t\t// The callback receives the complete header cell structure with both\n\t\t\t// horizontal and vertical cells. Only the horizontal cells may have\n\t\t\t// been modified by the settings menu; vertical cells are preserved unchanged.\n\t\t\tsetHeaderCells(headerCells);\n\t\t},\n\t}}\n/>;\n```\n\n**Behavior:**\n\n- When `_hasSettingsMenu={true}`, a settings button appears in the table header\n- Users can modify column visibility, width, and other properties through the settings dialog\n- Changes are only applied to the table when the user clicks \"Apply\" or \"OK\"\n- The `onChangeHeaderCells` callback receives the updated header cells after confirmation\n- Columns with `hidable={false}` cannot be toggled in the settings menu\n- Columns with `resizable={false}` cannot be resized by the user\n",
49
49
  "kind": "doc"
50
50
  },
51
51
  {
@@ -448,6 +448,14 @@
448
448
  "code": "import React from 'react';\n\nimport { KolDetails } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const DetailsBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolDetails hides its content until opened. The open state can be toggled either by clicking the label or by setting the <code>_open</code>-prop\n\t\t\t\tprogrammatically. The sample includes an initially open state and a disabled but open Details component.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"grid gap-4\">\n\t\t\t<KolDetails _label=\"Closed initially\">\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.\n\t\t\t</KolDetails>\n\t\t\t<KolDetails _disabled _label=\"Open initially (disabled)\" _open>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.\n\t\t\t</KolDetails>\n\t\t\t<KolDetails _label=\"Open initially\" _open>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.\n\t\t\t</KolDetails>\n\t\t</section>\n\t</>\n);\n",
449
449
  "kind": "sample"
450
450
  },
451
+ {
452
+ "id": "sample/dialog/basic",
453
+ "group": "dialog",
454
+ "name": "basic",
455
+ "path": "packages/samples/react/src/components/dialog/basic.tsx",
456
+ "code": "import type { FC } from 'react';\nimport React, { useEffect, useRef } from 'react';\n\nimport { KolButton, KolDialog } from '@public-ui/react-v19';\nimport { useSearchParams } from 'react-router';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const DialogBasic: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\n\tconst showDialog = searchParams.get('show-dialog') as string;\n\n\tconst blankRef = useRef<HTMLKolDialogElement>(null);\n\tconst cardRef = useRef<HTMLKolDialogElement>(null);\n\n\tconst onOpenBlankDialog = {\n\t\tonClick: () => blankRef.current?.openModal(),\n\t};\n\tconst onOpenCardDialog = {\n\t\tonClick: () => cardRef.current?.openModal(),\n\t};\n\tconst onCloseBlankDialog = {\n\t\tonClick: () => blankRef.current?.closeModal(),\n\t};\n\n\tuseEffect(() => {\n\t\tif (showDialog === 'true') {\n\t\t\tblankRef.current?.openModal();\n\t\t\tcardRef.current?.openModal();\n\t\t}\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tKolDialog supports the variants <code>blank</code> and <code>card</code>. The card variant includes a <code>KolCard</code> container and a closer\n\t\t\t\t\tbutton.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<div>\n\t\t\t\t\t<KolButton _label=\"Open blank dialog\" _on={onOpenBlankDialog} />\n\t\t\t\t\t<KolDialog ref={blankRef} _label=\"Blank dialog\" _variant=\"blank\" _width=\"40%\">\n\t\t\t\t\t\t<div className=\"bg-white p-4 rounded shadow\">\n\t\t\t\t\t\t\t<p className=\"mt-0\">You must add styling and a close button yourself.</p>\n\t\t\t\t\t\t\t<KolButton _label=\"Open card dialog\" className=\"mr\" _on={onOpenCardDialog} />\n\t\t\t\t\t\t\t<KolButton _label=\"Close\" _on={onCloseBlankDialog} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</KolDialog>\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\t<KolButton _label=\"Open card dialog\" _on={onOpenCardDialog} />\n\t\t\t\t\t<KolDialog ref={cardRef} _label=\"Card dialog\" _variant=\"card\" _width=\"30%\">\n\t\t\t\t\t\t<p className=\"mt-0\">This variant wraps content inside a KolCard.</p>\n\t\t\t\t\t</KolDialog>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
457
+ "kind": "sample"
458
+ },
451
459
  {
452
460
  "id": "sample/drawer/basic",
453
461
  "group": "drawer",
@@ -893,7 +901,7 @@
893
901
  "group": "modal",
894
902
  "name": "basic",
895
903
  "path": "packages/samples/react/src/components/modal/basic.tsx",
896
- "code": "import type { FC } from 'react';\nimport React, { useEffect, useRef } from 'react';\n\nimport { KolButton, KolModal } from '@public-ui/react-v19';\nimport { useSearchParams } from 'react-router';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ModalBasic: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\n\tconst showModal = searchParams.get('show-modal') as string;\n\n\tconst blankRef = useRef<HTMLKolModalElement>(null);\n\tconst cardRef = useRef<HTMLKolModalElement>(null);\n\n\tconst onOpenBlankModal = {\n\t\tonClick: () => blankRef.current?.openModal(),\n\t};\n\tconst onOpenCardModal = {\n\t\tonClick: () => cardRef.current?.openModal(),\n\t};\n\tconst onCloseBlankModal = {\n\t\tonClick: () => blankRef.current?.closeModal(),\n\t};\n\n\tuseEffect(() => {\n\t\tif (showModal === 'true') {\n\t\t\tblankRef.current?.openModal();\n\t\t\tcardRef.current?.openModal();\n\t\t}\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tKolModal supports the variants <code>blank</code> and <code>card</code>. The card variant includes a <code>KolCard</code> container and a closer\n\t\t\t\t\tbutton.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<div>\n\t\t\t\t\t<KolButton _label=\"Open blank modal\" _on={onOpenBlankModal} />\n\t\t\t\t\t<KolModal ref={blankRef} _label=\"Blank modal\" _variant=\"blank\" _width=\"40%\">\n\t\t\t\t\t\t<div className=\"bg-white p-4 rounded shadow\">\n\t\t\t\t\t\t\t<p className=\"mt-0\">You must add styling and a close button yourself.</p>\n\t\t\t\t\t\t\t<KolButton _label=\"Open card modal\" className=\"mr\" _on={onOpenCardModal} />\n\t\t\t\t\t\t\t<KolButton _label=\"Close\" _on={onCloseBlankModal} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</KolModal>\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\t<KolButton _label=\"Open card modal\" _on={onOpenCardModal} />\n\t\t\t\t\t<KolModal ref={cardRef} _label=\"Card modal\" _variant=\"card\" _width=\"30%\">\n\t\t\t\t\t\t<p className=\"mt-0\">This variant wraps content inside a KolCard.</p>\n\t\t\t\t\t</KolModal>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
904
+ "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolAlert, KolLink } from '@public-ui/react-v19';\n\nimport { DialogBasic } from '../dialog/basic';\n\n/**\n * @deprecated Use `DialogBasic` from '../dialog/basic' instead.\n */\nexport const ModalBasic: FC = () => (\n\t<>\n\t\t<KolAlert _label=\"Component is DEPRECATED\" _type=\"error\" _variant=\"card\" className=\"header-alert\">\n\t\t\tThe Modal component was renamed to Dialog. Please use the Dialog sample instead.&nbsp;\n\t\t\t<KolLink _href=\"/#/dialog\" _target=\"_blank\" _label=\"Open Dialog samples\" />\n\t\t</KolAlert>\n\n\t\t<DialogBasic />\n\t</>\n);\n",
897
905
  "kind": "sample"
898
906
  },
899
907
  {
@@ -925,7 +933,7 @@
925
933
  "group": "popover-button",
926
934
  "name": "basic",
927
935
  "path": "packages/samples/react/src/components/popover-button/basic.tsx",
928
- "code": "import type { ToolbarItemsPropType } from '@public-ui/components';\nimport { KolHeading, KolPopoverButton, KolToolbar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const PopoverButtonBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst buttonRef = React.useRef<HTMLKolPopoverButtonElement>(null);\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\tconst TOOLBAR_ITEMS: ToolbarItemsPropType = [\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Edit',\n\t\t\t_icons: 'fa-solid fa-pen',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Delete',\n\t\t\t_icons: 'fa-solid fa-trash',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Duplicate',\n\t\t\t_icons: 'fa-solid fa-copy',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t];\n\n\tuseEffect(() => {\n\t\t// Ensure the popover is closed on initial render\n\t\tif (buttonRef.current) {\n\t\t\tbuttonRef.current.showPopover();\n\t\t\tbuttonRef.current.kolFocus();\n\t\t}\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThe PopoverButton component combines a button with a popover that appears when clicked. The popover can be positioned in different directions (top,\n\t\t\t\t\tright, bottom, left) using the <code>_popoverAlign</code> prop.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<KolPopoverButton _label={'Actions'} _variant=\"primary\" _icons={{ right: 'kolicon-chevron-down' }} ref={buttonRef}>\n\t\t\t\t\t<KolToolbar _label=\"Action toolbar\" _items={TOOLBAR_ITEMS} _orientation=\"vertical\" />\n\t\t\t\t</KolPopoverButton>\n\t\t\t\t<KolPopoverButton _label=\"Help\" _icons=\"kolicon-alert-info\" _popoverAlign=\"right\" _tooltipAlign=\"bottom\" _hideLabel>\n\t\t\t\t\t<div className=\"w-sm p-2 border border-solid border-gray\">\n\t\t\t\t\t\t<KolHeading _label=\"Help Information\" _level={0}></KolHeading>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!\n\t\t\t\t\t\t\tExercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</KolPopoverButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
936
+ "code": "import type { ToolbarItemsPropType } from '@public-ui/components';\nimport { KolHeading, KolPopoverButton, KolToolbar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const PopoverButtonBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst buttonRef = React.useRef<HTMLKolPopoverButtonElement | null>(null);\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\tconst TOOLBAR_ITEMS: ToolbarItemsPropType = [\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Edit',\n\t\t\t_icons: 'fa-solid fa-pen',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Delete',\n\t\t\t_icons: 'fa-solid fa-trash',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Duplicate',\n\t\t\t_icons: 'fa-solid fa-copy',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t];\n\n\tuseEffect(() => {\n\t\t// Ensure the popover is closed on initial render\n\t\tif (buttonRef.current) {\n\t\t\tbuttonRef.current.showPopover();\n\t\t\tbuttonRef.current.focus();\n\t\t}\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThe PopoverButton component combines a button with a popover that appears when clicked. The popover can be positioned in different directions (top,\n\t\t\t\t\tright, bottom, left) using the <code>_popoverAlign</code> prop.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<KolPopoverButton _label={'Actions'} _variant=\"primary\" _icons={{ right: 'kolicon-chevron-down' }} ref={buttonRef}>\n\t\t\t\t\t<KolToolbar _label=\"Action toolbar\" _items={TOOLBAR_ITEMS} _orientation=\"vertical\" />\n\t\t\t\t</KolPopoverButton>\n\t\t\t\t<KolPopoverButton _label=\"Help\" _icons=\"kolicon-alert-info\" _popoverAlign=\"right\" _tooltipAlign=\"bottom\" _hideLabel>\n\t\t\t\t\t<div className=\"w-sm p-2 border border-solid border-gray\">\n\t\t\t\t\t\t<KolHeading _label=\"Help Information\" _level={0}></KolHeading>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!\n\t\t\t\t\t\t\tExercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</KolPopoverButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
929
937
  "kind": "sample"
930
938
  },
931
939
  {
@@ -981,7 +989,7 @@
981
989
  "group": "skip-nav",
982
990
  "name": "basic",
983
991
  "path": "packages/samples/react/src/components/skip-nav/basic.tsx",
984
- "code": "import type { FC } from 'react';\nimport React, { useEffect, useRef } from 'react';\n\nimport { KolSkipNav } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\n\nexport const SkipNavBasic: FC = () => {\n\tconst skipNavRef = useRef<HTMLKolSkipNavElement>(null);\n\n\tuseEffect(() => {\n\t\tskipNavRef.current?.kolFocus();\n\t}, []);\n\n\treturn (\n\t\t<div className=\"grid gap-4\">\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolSkipNav renders a list of navigation links that are visually hidden by default and only visible on focus.</p>\n\t\t\t\t<p>For testing purposes, click into the example and press the tab-key in order to focus the first link.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolSkipNav\n\t\t\t\tref={skipNavRef}\n\t\t\t\t_label=\"Hidden navigation\"\n\t\t\t\t_links={[\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'To the top',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'To the form',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'To the end',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolSkipNav>\n\t\t</div>\n\t);\n};\n",
992
+ "code": "import type { FC } from 'react';\nimport React, { useEffect, useRef } from 'react';\n\nimport { KolSkipNav } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\n\nexport const SkipNavBasic: FC = () => {\n\tconst skipNavRef = useRef<HTMLKolSkipNavElement | null>(null);\n\n\tuseEffect(() => {\n\t\tskipNavRef.current?.focus();\n\t}, []);\n\n\treturn (\n\t\t<div className=\"grid gap-4\">\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolSkipNav renders a list of navigation links that are visually hidden by default and only visible on focus.</p>\n\t\t\t\t<p>For testing purposes, click into the example and press the tab-key in order to focus the first link.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolSkipNav\n\t\t\t\tref={skipNavRef}\n\t\t\t\t_label=\"Hidden navigation\"\n\t\t\t\t_links={[\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'To the top',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'To the form',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'To the end',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolSkipNav>\n\t\t</div>\n\t);\n};\n",
985
993
  "kind": "sample"
986
994
  },
987
995
  {
@@ -1285,7 +1293,7 @@
1285
1293
  "group": "toast",
1286
1294
  "name": "basic",
1287
1295
  "path": "packages/samples/react/src/components/toast/basic.tsx",
1288
- "code": "import React, { useEffect } from 'react';\nimport { useSearchParams } from 'react-router-dom';\n\nimport type { AlertTypePropType } from '@public-ui/components';\nimport { ToasterService } from '@public-ui/components';\nimport { KolAlert, KolButton, KolLink } from '@public-ui/react-v19';\n\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const ToastBasic: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst defaultType = searchParams.get('type') as AlertTypePropType;\n\tconst toaster = ToasterService.getInstance(document);\n\tconst handleButtonClickSimple = () => {\n\t\tvoid toaster.enqueue({\n\t\t\tdescription: 'Toasty',\n\t\t\tlabel: `Initial Toast`,\n\t\t\ttype: 'warning',\n\t\t\tonClose: () => {\n\t\t\t\tconsole.log('Simple toast has been closed.');\n\t\t\t},\n\t\t});\n\t};\n\n\tuseEffect(() => {\n\t\tif (defaultType) {\n\t\t\tvoid toaster.enqueue({\n\t\t\t\tdescription: 'Toasty',\n\t\t\t\tlabel: `Toast with type '${defaultType}'`,\n\t\t\t\ttype: defaultType,\n\t\t\t});\n\t\t}\n\t}, [defaultType, toaster]);\n\n\tconst handleButtonClickComplex = () => {\n\t\tvoid toaster.enqueue({\n\t\t\trender: (element: HTMLElement, { close }) => {\n\t\t\t\tgetRoot(element).render(\n\t\t\t\t\t<>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_label={'Hello World from Toast!'}\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\tconsole.log('Toast Button clicked!');\n\t\t\t\t\t\t\t\t\tclose();\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>,\n\t\t\t\t);\n\t\t\t},\n\t\t\tlabel: `Initial Toast`,\n\t\t\ttype: 'warning',\n\t\t});\n\t};\n\n\tconst handleButtonClickOpenAndClose = async () => {\n\t\tconst close = await toaster.enqueue({\n\t\t\tdescription: 'I will disappear in two seconds...',\n\t\t\tlabel: `Good Bye`,\n\t\t\ttype: 'warning',\n\t\t});\n\n\t\tif (close) {\n\t\t\tsetTimeout(close, 2000);\n\t\t}\n\t};\n\n\tconst closeAll = () => {\n\t\ttoaster.closeAll();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<KolAlert _label=\"Component is DEPRECATED\" _type=\"error\" _variant=\"card\" className=\"header-alert\">\n\t\t\t\tFor more information, please refer&nbsp;\n\t\t\t\t<KolLink _href=\"https://public-ui.github.io/docs/components/toaster\" _target=\"_blank\" _label=\"to the documentation\"></KolLink>.\n\t\t\t</KolAlert>\n\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample demonstrates the toast service with all its options.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t\t<KolButton _label=\"Show simple toast\" _on={{ onClick: handleButtonClickSimple }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Show complex toast\" _on={{ onClick: handleButtonClickComplex }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Show toast and close after 2 seconds\" _on={{ onClick: () => void handleButtonClickOpenAndClose() }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Close all toasts\" _on={{ onClick: closeAll }}></KolButton>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
1296
+ "code": "import React, { useEffect } from 'react';\nimport { useSearchParams } from 'react-router-dom';\n\nimport type { AlertTypePropType } from '@public-ui/components';\nimport { ToasterService } from '@public-ui/components';\nimport { KolAlert, KolButton, KolLink } from '@public-ui/react-v19';\n\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\n/**\n * @deprecated For more information, please refer to the documentation.\n */\nexport const ToastBasic: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst defaultType = searchParams.get('type') as AlertTypePropType;\n\tconst toaster = ToasterService.getInstance(document);\n\tconst handleButtonClickSimple = () => {\n\t\tvoid toaster.enqueue({\n\t\t\tdescription: 'Toasty',\n\t\t\tlabel: `Initial Toast`,\n\t\t\ttype: 'warning',\n\t\t\tonClose: () => {\n\t\t\t\tconsole.log('Simple toast has been closed.');\n\t\t\t},\n\t\t});\n\t};\n\n\tuseEffect(() => {\n\t\tif (defaultType) {\n\t\t\tvoid toaster.enqueue({\n\t\t\t\tdescription: 'Toasty',\n\t\t\t\tlabel: `Toast with type '${defaultType}'`,\n\t\t\t\ttype: defaultType,\n\t\t\t});\n\t\t}\n\t}, [defaultType, toaster]);\n\n\tconst handleButtonClickComplex = () => {\n\t\tvoid toaster.enqueue({\n\t\t\trender: (element: HTMLElement, { close }) => {\n\t\t\t\tgetRoot(element).render(\n\t\t\t\t\t<>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_label={'Hello World from Toast!'}\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\tconsole.log('Toast Button clicked!');\n\t\t\t\t\t\t\t\t\tclose();\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>,\n\t\t\t\t);\n\t\t\t},\n\t\t\tlabel: `Initial Toast`,\n\t\t\ttype: 'warning',\n\t\t});\n\t};\n\n\tconst handleButtonClickOpenAndClose = async () => {\n\t\tconst close = await toaster.enqueue({\n\t\t\tdescription: 'I will disappear in two seconds...',\n\t\t\tlabel: `Good Bye`,\n\t\t\ttype: 'warning',\n\t\t});\n\n\t\tif (close) {\n\t\t\tsetTimeout(close, 2000);\n\t\t}\n\t};\n\n\tconst closeAll = () => {\n\t\ttoaster.closeAll();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<KolAlert _label=\"Component is DEPRECATED\" _type=\"error\" _variant=\"card\" className=\"header-alert\">\n\t\t\t\tFor more information, please refer&nbsp;\n\t\t\t\t<KolLink _href=\"https://public-ui.github.io/en/docs/components/toaster\" _target=\"_blank\" _label=\"to the documentation\" />.\n\t\t\t</KolAlert>\n\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample demonstrates the toast service with all its options.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t\t<KolButton _label=\"Show simple toast\" _on={{ onClick: handleButtonClickSimple }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Show complex toast\" _on={{ onClick: handleButtonClickComplex }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Show toast and close after 2 seconds\" _on={{ onClick: () => void handleButtonClickOpenAndClose() }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Close all toasts\" _on={{ onClick: closeAll }}></KolButton>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
1289
1297
  "kind": "sample"
1290
1298
  },
1291
1299
  {
@@ -1293,7 +1301,7 @@
1293
1301
  "group": "toast",
1294
1302
  "name": "configurator",
1295
1303
  "path": "packages/samples/react/src/components/toast/configurator.tsx",
1296
- "code": "import React, { useEffect, useMemo, useState } from 'react';\nimport { useSearchParams } from 'react-router-dom';\n\nimport type { AlertTypePropType } from '@public-ui/components';\nimport { ToasterService } from '@public-ui/components';\nimport { KolAlert, KolButton, KolInputRadio, KolLink } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nconst toastTypes = ['default', 'info', 'success', 'warning', 'error'] as const;\nconst toastTypeOptions = toastTypes.map((type) => ({\n\tlabel: type,\n\tvalue: type,\n}));\n\nconst isAlertType = (value: unknown): value is AlertTypePropType => {\n\treturn typeof value === 'string' && toastTypes.includes(value as AlertTypePropType);\n};\n\nexport const ToastConfigurator: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst queryType = searchParams.get('type');\n\tconst defaultType = isAlertType(queryType) ? queryType : undefined;\n\tconst [selectedType, setSelectedType] = useState<AlertTypePropType>(() => defaultType ?? 'default');\n\tconst toaster = useMemo<ToasterService>(() => ToasterService.getInstance(document), []);\n\n\tuseEffect(() => {\n\t\ttoastTypes.forEach((type) => {\n\t\t\tvoid toaster.enqueue({\n\t\t\t\tdescription: 'Toasty',\n\t\t\t\tlabel: `Toast with type '${type}'`,\n\t\t\t\ttype,\n\t\t\t});\n\t\t});\n\n\t\treturn () => {\n\t\t\ttoaster.closeAll();\n\t\t};\n\t}, [toaster]);\n\n\tuseEffect(() => {\n\t\tif (defaultType) {\n\t\t\tsetSelectedType(defaultType);\n\t\t}\n\t}, [defaultType]);\n\n\tconst handleTypeChange = (_: Event, value: unknown) => {\n\t\tif (isAlertType(value)) {\n\t\t\tsetSelectedType(value);\n\t\t}\n\t};\n\n\tconst handleConfiguredToast = () => {\n\t\tvoid toaster.enqueue({\n\t\t\tdescription: 'Toasty',\n\t\t\tlabel: `Toast with type '${selectedType}'`,\n\t\t\ttype: selectedType,\n\t\t});\n\t};\n\n\tconst closeAll = () => {\n\t\ttoaster.closeAll();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<KolAlert _label=\"Component is DEPRECATED\" _type=\"error\" _variant=\"card\" className=\"header-alert\">\n\t\t\t\tFor more information, please refer&nbsp;\n\t\t\t\t<KolLink _href=\"https://public-ui.github.io/docs/components/toaster\" _target=\"_blank\" _label=\"to the documentation\"></KolLink>.\n\t\t\t</KolAlert>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample demonstrates the toast service with all its options. Use the configuration below to choose a toast type and open a toast with the card\n\t\t\t\t\tvariant.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolInputRadio _orientation=\"horizontal\" _label=\"Toast type\" _value={selectedType} _options={toastTypeOptions} _on={{ onChange: handleTypeChange }} />\n\t\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t\t<KolButton _label={`Open ${selectedType} toast`} _on={{ onClick: handleConfiguredToast }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Close all toasts\" _on={{ onClick: closeAll }}></KolButton>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
1304
+ "code": "import React, { useEffect, useMemo, useState } from 'react';\nimport { useSearchParams } from 'react-router-dom';\n\nimport type { AlertTypePropType } from '@public-ui/components';\nimport { ToasterService } from '@public-ui/components';\nimport { KolAlert, KolButton, KolInputRadio, KolLink } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nconst toastTypes = ['default', 'info', 'success', 'warning', 'error'] as const;\nconst toastTypeOptions = toastTypes.map((type) => ({\n\tlabel: type,\n\tvalue: type,\n}));\n\nconst isAlertType = (value: unknown): value is AlertTypePropType => {\n\treturn typeof value === 'string' && toastTypes.includes(value as AlertTypePropType);\n};\n\n/**\n * @deprecated For more information, please refer to the documentation.\n */\nexport const ToastConfigurator: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst queryType = searchParams.get('type');\n\tconst defaultType = isAlertType(queryType) ? queryType : undefined;\n\tconst [selectedType, setSelectedType] = useState<AlertTypePropType>(() => defaultType ?? 'default');\n\tconst toaster = useMemo<ToasterService>(() => ToasterService.getInstance(document), []);\n\n\tuseEffect(() => {\n\t\ttoastTypes.forEach((type) => {\n\t\t\tvoid toaster.enqueue({\n\t\t\t\tdescription: 'Toasty',\n\t\t\t\tlabel: `Toast with type '${type}'`,\n\t\t\t\ttype,\n\t\t\t});\n\t\t});\n\n\t\treturn () => {\n\t\t\ttoaster.closeAll();\n\t\t};\n\t}, [toaster]);\n\n\tuseEffect(() => {\n\t\tif (defaultType) {\n\t\t\tsetSelectedType(defaultType);\n\t\t}\n\t}, [defaultType]);\n\n\tconst handleTypeChange = (_: Event, value: unknown) => {\n\t\tif (isAlertType(value)) {\n\t\t\tsetSelectedType(value);\n\t\t}\n\t};\n\n\tconst handleConfiguredToast = () => {\n\t\tvoid toaster.enqueue({\n\t\t\tdescription: 'Toasty',\n\t\t\tlabel: `Toast with type '${selectedType}'`,\n\t\t\ttype: selectedType,\n\t\t});\n\t};\n\n\tconst closeAll = () => {\n\t\ttoaster.closeAll();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<KolAlert _label=\"Component is DEPRECATED\" _type=\"error\" _variant=\"card\" className=\"header-alert\">\n\t\t\t\tFor more information, please refer&nbsp;\n\t\t\t\t<KolLink _href=\"https://public-ui.github.io/en/docs/components/toaster\" _target=\"_blank\" _label=\"to the documentation\"></KolLink>.\n\t\t\t</KolAlert>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample demonstrates the toast service with all its options. Use the configuration below to choose a toast type and open a toast with the card\n\t\t\t\t\tvariant.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolInputRadio _orientation=\"horizontal\" _label=\"Toast type\" _value={selectedType} _options={toastTypeOptions} _on={{ onChange: handleTypeChange }} />\n\t\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t\t<KolButton _label={`Open ${selectedType} toast`} _on={{ onClick: handleConfiguredToast }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Close all toasts\" _on={{ onClick: closeAll }}></KolButton>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
1297
1305
  "kind": "sample"
1298
1306
  },
1299
1307
  {
@@ -1341,7 +1349,7 @@
1341
1349
  "group": "scenarios",
1342
1350
  "name": "button-shortkey-table",
1343
1351
  "path": "packages/samples/react/src/scenarios/button-shortkey-table.tsx",
1344
- "code": "import type { KoliBriTableHeaders } from '@public-ui/components';\nimport { ToasterService } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useRef } from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { getRoot } from '../shares/react-roots';\n\nconst RowActions: FC<{ label: string }> = ({ label }) => {\n\tconst toaster = ToasterService.getInstance(document);\n\tconst editButtonRef = useRef<HTMLKolButtonElement | null>(null);\n\tconst deleteButtonRef = useRef<HTMLKolButtonElement | null>(null);\n\n\tconst handleEditClick = () => {\n\t\ttoaster.enqueue({\n\t\t\tlabel: 'Edit clicked',\n\t\t\tdescription: `The button \"edit\" has been clicked for ${label}`,\n\t\t\ttype: 'info',\n\t\t});\n\t};\n\n\tconst handleDeleteClick = () => {\n\t\ttoaster.enqueue({\n\t\t\tlabel: 'Delete clicked',\n\t\t\tdescription: `The button \"delete\" has been clicked for ${label}`,\n\t\t\ttype: 'warning',\n\t\t});\n\t};\n\n\tconst handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {\n\t\tswitch (event.code) {\n\t\t\tcase 'KeyE':\n\t\t\t\tvoid editButtonRef.current?.kolFocus();\n\t\t\t\thandleEditClick();\n\t\t\t\treturn;\n\t\t\tcase 'KeyD':\n\t\t\t\tvoid deleteButtonRef.current?.kolFocus();\n\t\t\t\thandleDeleteClick();\n\t\t\t\treturn;\n\t\t}\n\t};\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tgap: 'calc(10rem / var(--kolibri-root-font-size, 16))',\n\t\t\t}}\n\t\t\tonKeyUp={handleKeyUp}\n\t\t>\n\t\t\t<KolButton ref={editButtonRef} _label={'Edit'} _shortKey={'e'} _on={{ onClick: handleEditClick }} />\n\t\t\t<KolButton ref={deleteButtonRef} _label={'Delete'} _shortKey={'d'} _variant={'danger'} _on={{ onClick: handleDeleteClick }} />\n\t\t</div>\n\t);\n};\n\nexport const ButtonShortkeyTable: FC = () => {\n\ttype Data = {\n\t\tlabel: string;\n\t};\n\tconst DATA: Data[] = [\n\t\t{\n\t\t\tlabel: 'Row 1',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 2',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 3',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 4',\n\t\t},\n\t];\n\n\tconst HEADERS: KoliBriTableHeaders = {\n\t\thorizontal: [\n\t\t\t[\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Label',\n\t\t\t\t\tkey: 'label',\n\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Actions',\n\t\t\t\t\tkey: 'actions',\n\t\t\t\t\ttextAlign: 'left',\n\n\t\t\t\t\trender: (el, cell) => {\n\t\t\t\t\t\tgetRoot(createReactRenderElement(el)).render(<RowActions label={(cell.data as Data).label} />);\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t],\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis scenario demonstrates an interactive table where each row contains buttons with shortcut keys. The shortcut keys provide visual keyboard\n\t\t\t\t\tindicators and are also functionally implemented.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t<strong>How to use:</strong> Move focus within one of the &quot;Actions&quot; cells and press &quot;e&quot; to edit or &quot;d&quot; to delete the\n\t\t\t\t\tcorresponding row.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Interactive Table with Button Shortkeys\" />\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label={`Interactive table with shortkey buttons in each row`}\n\t\t\t\t\t\t_data={DATA}\n\t\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t\t_minWidth=\"400px\"\n\t\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t\t_page: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
1352
+ "code": "import type { KoliBriTableHeaders } from '@public-ui/components';\nimport { ToasterService } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useRef } from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { getRoot } from '../shares/react-roots';\n\nconst RowActions: FC<{ label: string }> = ({ label }) => {\n\tconst toaster = ToasterService.getInstance(document);\n\tconst editButtonRef = useRef<HTMLKolButtonElement | null>(null);\n\tconst deleteButtonRef = useRef<HTMLKolButtonElement | null>(null);\n\n\tconst handleEditClick = () => {\n\t\ttoaster.enqueue({\n\t\t\tlabel: 'Edit clicked',\n\t\t\tdescription: `The button \"edit\" has been clicked for ${label}`,\n\t\t\ttype: 'info',\n\t\t});\n\t};\n\n\tconst handleDeleteClick = () => {\n\t\ttoaster.enqueue({\n\t\t\tlabel: 'Delete clicked',\n\t\t\tdescription: `The button \"delete\" has been clicked for ${label}`,\n\t\t\ttype: 'warning',\n\t\t});\n\t};\n\n\tconst handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {\n\t\tswitch (event.code) {\n\t\t\tcase 'KeyE':\n\t\t\t\tvoid editButtonRef.current?.focus();\n\t\t\t\thandleEditClick();\n\t\t\t\treturn;\n\t\t\tcase 'KeyD':\n\t\t\t\tvoid deleteButtonRef.current?.focus();\n\t\t\t\thandleDeleteClick();\n\t\t\t\treturn;\n\t\t}\n\t};\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tgap: 'calc(10rem / var(--kolibri-root-font-size, 16))',\n\t\t\t}}\n\t\t\tonKeyUp={handleKeyUp}\n\t\t>\n\t\t\t<KolButton ref={editButtonRef} _label={'Edit'} _shortKey={'e'} _on={{ onClick: handleEditClick }} />\n\t\t\t<KolButton ref={deleteButtonRef} _label={'Delete'} _shortKey={'d'} _variant={'danger'} _on={{ onClick: handleDeleteClick }} />\n\t\t</div>\n\t);\n};\n\nexport const ButtonShortkeyTable: FC = () => {\n\ttype Data = {\n\t\tlabel: string;\n\t};\n\tconst DATA: Data[] = [\n\t\t{\n\t\t\tlabel: 'Row 1',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 2',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 3',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 4',\n\t\t},\n\t];\n\n\tconst HEADERS: KoliBriTableHeaders = {\n\t\thorizontal: [\n\t\t\t[\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Label',\n\t\t\t\t\tkey: 'label',\n\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Actions',\n\t\t\t\t\tkey: 'actions',\n\t\t\t\t\ttextAlign: 'left',\n\n\t\t\t\t\trender: (el, cell) => {\n\t\t\t\t\t\tconst data = cell.data as Data | undefined;\n\t\t\t\t\t\tif (!data?.label) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tgetRoot(createReactRenderElement(el)).render(<RowActions label={data.label} />);\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t],\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis scenario demonstrates an interactive table where each row contains buttons with shortcut keys. The shortcut keys provide visual keyboard\n\t\t\t\t\tindicators and are also functionally implemented.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t<strong>How to use:</strong> Move focus within one of the &quot;Actions&quot; cells and press &quot;e&quot; to edit or &quot;d&quot; to delete the\n\t\t\t\t\tcorresponding row.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Interactive Table with Button Shortkeys\" />\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label={`Interactive table with shortkey buttons in each row`}\n\t\t\t\t\t\t_data={DATA}\n\t\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t\t_minWidth=\"400px\"\n\t\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t\t_page: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
1345
1353
  "kind": "scenario"
1346
1354
  },
1347
1355
  {
@@ -1381,7 +1389,7 @@
1381
1389
  "group": "scenarios",
1382
1390
  "name": "focus-elements",
1383
1391
  "path": "packages/samples/react/src/scenarios/focus-elements.tsx",
1384
- "code": "import type { FocusableElement } from '@public-ui/components';\nimport {\n\tKolAccordion,\n\tKolAlert,\n\tKolButton,\n\tKolButtonLink,\n\tKolCombobox,\n\tKolDetails,\n\tKolHeading,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolLink,\n\tKolLinkButton,\n\tKolSelect,\n\tKolSingleSelect,\n\tKolTextarea,\n} from '@public-ui/react-v19';\nimport type { FC, ForwardRefRenderFunction } from 'react';\nimport React, { forwardRef, useLayoutEffect, useMemo, useRef } from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { SampleDescription } from '../components/SampleDescription';\n\nconst getFocusElements = () => {\n\tconst focusElements = new Map<string, ForwardRefRenderFunction<any, any>>();\n\tfocusElements.set('inputCheckbox', (_, ref) => <KolInputCheckbox className=\"w-full\" _name=\"checkbox\" _label=\"Checkbox\" ref={ref} />);\n\tfocusElements.set('inputColor', (_, ref) => <KolInputColor className=\"w-full\" _name=\"color\" _label=\"Color\" ref={ref} />);\n\tfocusElements.set('inputDate', (_, ref) => <KolInputDate className=\"w-full\" _name=\"date\" _label=\"Date\" ref={ref} />);\n\tfocusElements.set('inputEmail', (_, ref) => <KolInputEmail className=\"w-full\" _name=\"email\" _label=\"Email\" ref={ref} />);\n\tfocusElements.set('inputFile', (_, ref) => <KolInputFile className=\"w-full\" _name=\"file\" _label=\"File\" ref={ref} />);\n\tfocusElements.set('inputFileMultiple', (_, ref) => <KolInputFile className=\"w-full\" _name=\"file\" _label=\"Files (multiple)\" _multiple ref={ref} />);\n\tfocusElements.set('inputNumber', (_, ref) => <KolInputNumber className=\"w-full\" _name=\"number\" _label=\"Number\" ref={ref} />);\n\tfocusElements.set('inputPassword', (_, ref) => <KolInputPassword className=\"w-full\" _name=\"password\" _label=\"Password\" ref={ref} />);\n\tfocusElements.set('inputRadio', (_, ref) => (\n\t\t<KolInputRadio\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"radio\"\n\t\t\t_label=\"Radio\"\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\t_value=\"A\"\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('inputRange', (_, ref) => <KolInputRange className=\"w-full\" _name=\"range\" _label=\"Range\" ref={ref} />);\n\tfocusElements.set('inputText', (_, ref) => <KolInputText className=\"w-full\" _name=\"text\" _label=\"Text\" ref={ref} />);\n\tfocusElements.set('select', (_, ref) => (\n\t\t<KolSelect\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"select\"\n\t\t\t_label=\"Select\"\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('selectMultiple', (_, ref) => (\n\t\t<KolSelect\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"select\"\n\t\t\t_label=\"Select (multiple)\"\n\t\t\t_multiple\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\t_rows={2}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('singleSelect', (_, ref) => (\n\t\t<KolSingleSelect\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"singleSelect\"\n\t\t\t_label=\"Single Select\"\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('textarea', (_, ref) => <KolTextarea className=\"w-full\" _name=\"textarea\" _label=\"Textarea\" _rows={5} ref={ref} />);\n\tfocusElements.set('accordion', (_, ref) => <KolAccordion className=\"w-full\" _label=\"Accordion here\" ref={ref} />);\n\tfocusElements.set('button', (_, ref) => (\n\t\t<div>\n\t\t\t<KolButton _label=\"Button here\" ref={ref} />\n\t\t</div>\n\t));\n\tfocusElements.set('buttonLink', (_, ref) => <KolButtonLink _label=\"ButtonLink here\" ref={ref} />);\n\tfocusElements.set('combobox', (_, ref) => <KolCombobox className=\"w-full\" _label=\"KolCombobox here\" _suggestions={[]} ref={ref} />);\n\tfocusElements.set('details', (_, ref) => (\n\t\t<KolDetails className=\"w-full\" _label=\"Details here\" ref={ref}>\n\t\t\tdetailed details\n\t\t</KolDetails>\n\t));\n\tfocusElements.set('link', (_, ref) => <KolLink className=\"w-full\" _label=\"Link here\" _href=\"#\" ref={ref} />);\n\tfocusElements.set('linkButton', (_, ref) => (\n\t\t<div>\n\t\t\t<KolLinkButton _label=\"LinkButton here\" _href=\"#\" ref={ref} />\n\t\t</div>\n\t));\n\n\treturn focusElements;\n};\n\ntype FallbackProps = {\n\tinvalidComponent?: boolean;\n};\nconst Fallback = (props: FallbackProps) => {\n\tconst focusElements = useMemo(() => getFocusElements(), []);\n\tconst componentNames = [...focusElements.keys()].map((key) => key);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample serves for automated tests of the focus state for input components. When loading one of the examples linked below, focus will be set on\n\t\t\t\t\tthe element initially. When testing manually, you may have to reload the page after opening an example.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t{props.invalidComponent && (\n\t\t\t\t<KolAlert _type=\"error\" _variant=\"card\">\n\t\t\t\t\tComponent not found.\n\t\t\t\t</KolAlert>\n\t\t\t)}\n\n\t\t\t<KolHeading _level={2} _label=\"Focus Test Cases\" />\n\t\t\t<ul>\n\t\t\t\t{componentNames.map((componentName) => (\n\t\t\t\t\t<li key={componentName}>\n\t\t\t\t\t\t<KolLink _label={componentName} _href={`#/scenarios/focus-elements?component=${componentName}`} />\n\t\t\t\t\t</li>\n\t\t\t\t))}\n\t\t\t</ul>\n\t\t</>\n\t);\n};\n\nexport const FocusElements: FC = () => {\n\tconst ref = useRef<FocusableElement>(null);\n\tconst focusElements = useMemo(() => getFocusElements(), []);\n\tconst [searchParams] = useSearchParams();\n\tconst componentName = searchParams.get('component');\n\n\tuseLayoutEffect(() => {\n\t\tsetTimeout(() => {\n\t\t\t// Timeout not strictly necessary but prevents a layout glitch in snapshots with Playwright.\n\t\t\tvoid ref.current?.kolFocus();\n\t\t}, 500);\n\t}, [ref]);\n\n\tif (componentName) {\n\t\tconst Component = focusElements.get(componentName);\n\t\tif (!Component) {\n\t\t\treturn <Fallback invalidComponent />;\n\t\t}\n\t\tconst Element = forwardRef(Component);\n\n\t\treturn <Element ref={ref} />;\n\t} else {\n\t\treturn <Fallback />;\n\t}\n};\n",
1392
+ "code": "import type { FocusableElement } from '@public-ui/components';\nimport {\n\tKolAccordion,\n\tKolAlert,\n\tKolButton,\n\tKolButtonLink,\n\tKolCombobox,\n\tKolDetails,\n\tKolHeading,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolLink,\n\tKolLinkButton,\n\tKolSelect,\n\tKolSingleSelect,\n\tKolTextarea,\n} from '@public-ui/react-v19';\nimport type { FC, ForwardRefRenderFunction } from 'react';\nimport React, { forwardRef, useLayoutEffect, useMemo, useRef } from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { SampleDescription } from '../components/SampleDescription';\n\nconst getFocusElements = () => {\n\tconst focusElements = new Map<string, ForwardRefRenderFunction<any, any>>();\n\tfocusElements.set('inputCheckbox', (_, ref) => <KolInputCheckbox className=\"w-full\" _name=\"checkbox\" _label=\"Checkbox\" ref={ref} />);\n\tfocusElements.set('inputColor', (_, ref) => <KolInputColor className=\"w-full\" _name=\"color\" _label=\"Color\" ref={ref} />);\n\tfocusElements.set('inputDate', (_, ref) => <KolInputDate className=\"w-full\" _name=\"date\" _label=\"Date\" ref={ref} />);\n\tfocusElements.set('inputEmail', (_, ref) => <KolInputEmail className=\"w-full\" _name=\"email\" _label=\"Email\" ref={ref} />);\n\tfocusElements.set('inputFile', (_, ref) => <KolInputFile className=\"w-full\" _name=\"file\" _label=\"File\" ref={ref} />);\n\tfocusElements.set('inputFileMultiple', (_, ref) => <KolInputFile className=\"w-full\" _name=\"file\" _label=\"Files (multiple)\" _multiple ref={ref} />);\n\tfocusElements.set('inputNumber', (_, ref) => <KolInputNumber className=\"w-full\" _name=\"number\" _label=\"Number\" ref={ref} />);\n\tfocusElements.set('inputPassword', (_, ref) => <KolInputPassword className=\"w-full\" _name=\"password\" _label=\"Password\" ref={ref} />);\n\tfocusElements.set('inputRadio', (_, ref) => (\n\t\t<KolInputRadio\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"radio\"\n\t\t\t_label=\"Radio\"\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\t_value=\"A\"\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('inputRange', (_, ref) => <KolInputRange className=\"w-full\" _name=\"range\" _label=\"Range\" ref={ref} />);\n\tfocusElements.set('inputText', (_, ref) => <KolInputText className=\"w-full\" _name=\"text\" _label=\"Text\" ref={ref} />);\n\tfocusElements.set('select', (_, ref) => (\n\t\t<KolSelect\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"select\"\n\t\t\t_label=\"Select\"\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('selectMultiple', (_, ref) => (\n\t\t<KolSelect\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"select\"\n\t\t\t_label=\"Select (multiple)\"\n\t\t\t_multiple\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\t_rows={2}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('singleSelect', (_, ref) => (\n\t\t<KolSingleSelect\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"singleSelect\"\n\t\t\t_label=\"Single Select\"\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('textarea', (_, ref) => <KolTextarea className=\"w-full\" _name=\"textarea\" _label=\"Textarea\" _rows={5} ref={ref} />);\n\tfocusElements.set('accordion', (_, ref) => <KolAccordion className=\"w-full\" _label=\"Accordion here\" ref={ref} />);\n\tfocusElements.set('button', (_, ref) => (\n\t\t<div>\n\t\t\t<KolButton _label=\"Button here\" ref={ref} />\n\t\t</div>\n\t));\n\tfocusElements.set('buttonLink', (_, ref) => <KolButtonLink _label=\"ButtonLink here\" ref={ref} />);\n\tfocusElements.set('combobox', (_, ref) => <KolCombobox className=\"w-full\" _label=\"KolCombobox here\" _suggestions={[]} ref={ref} />);\n\tfocusElements.set('details', (_, ref) => (\n\t\t<KolDetails className=\"w-full\" _label=\"Details here\" ref={ref}>\n\t\t\tdetailed details\n\t\t</KolDetails>\n\t));\n\tfocusElements.set('link', (_, ref) => <KolLink className=\"w-full\" _label=\"Link here\" _href=\"#\" ref={ref} />);\n\tfocusElements.set('linkButton', (_, ref) => (\n\t\t<div>\n\t\t\t<KolLinkButton _label=\"LinkButton here\" _href=\"#\" ref={ref} />\n\t\t</div>\n\t));\n\n\treturn focusElements;\n};\n\ntype FallbackProps = {\n\tinvalidComponent?: boolean;\n};\nconst Fallback = (props: FallbackProps) => {\n\tconst focusElements = useMemo(() => getFocusElements(), []);\n\tconst componentNames = [...focusElements.keys()].map((key) => key);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample serves for automated tests of the focus state for input components. When loading one of the examples linked below, focus will be set on\n\t\t\t\t\tthe element initially. When testing manually, you may have to reload the page after opening an example.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t{props.invalidComponent && (\n\t\t\t\t<KolAlert _type=\"error\" _variant=\"card\">\n\t\t\t\t\tComponent not found.\n\t\t\t\t</KolAlert>\n\t\t\t)}\n\n\t\t\t<KolHeading _level={2} _label=\"Focus Test Cases\" />\n\t\t\t<ul>\n\t\t\t\t{componentNames.map((componentName) => (\n\t\t\t\t\t<li key={componentName}>\n\t\t\t\t\t\t<KolLink _label={componentName} _href={`#/scenarios/focus-elements?component=${componentName}`} />\n\t\t\t\t\t</li>\n\t\t\t\t))}\n\t\t\t</ul>\n\t\t</>\n\t);\n};\n\nexport const FocusElements: FC = () => {\n\tconst ref = useRef<FocusableElement>(null);\n\tconst focusElements = useMemo(() => getFocusElements(), []);\n\tconst [searchParams] = useSearchParams();\n\tconst componentName = searchParams.get('component');\n\n\tuseLayoutEffect(() => {\n\t\tsetTimeout(() => {\n\t\t\t// Timeout not strictly necessary but prevents a layout glitch in snapshots with Playwright.\n\t\t\tvoid ref.current?.focus();\n\t\t}, 500);\n\t}, [ref]);\n\n\tif (componentName) {\n\t\tconst Component = focusElements.get(componentName);\n\t\tif (!Component) {\n\t\t\treturn <Fallback invalidComponent />;\n\t\t}\n\t\tconst Element = forwardRef(Component);\n\n\t\treturn <Element ref={ref} />;\n\t} else {\n\t\treturn <Fallback />;\n\t}\n};\n",
1385
1393
  "kind": "scenario"
1386
1394
  },
1387
1395
  {
@@ -1469,7 +1477,7 @@
1469
1477
  "group": "spec",
1470
1478
  "name": "accordion",
1471
1479
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/accordion.md",
1472
- "code": "# kol-accordion\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | ----------- |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_level` | `_level` | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined` | `0` |\n| `_on` | -- | Gibt die EventCallback-Funktionen an. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, boolean> \\| undefined; }` | `undefined` |\n| `_open` | `_open` | Opens/expands the element when truthy, closes/collapses when falsy. | `boolean \\| undefined` | `false` |\n\n\n## Methods\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ------------------------------------------------------------------------------- |\n| | Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions. |\n\n\n----------------------------------------------\n\n\n",
1480
+ "code": "# kol-accordion\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | ----------- |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_level` | `_level` | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined` | `0` |\n| `_on` | -- | Gibt die EventCallback-Funktionen an. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, boolean> \\| undefined; }` | `undefined` |\n| `_open` | `_open` | Opens/expands the element when truthy, closes/collapses when falsy. | `boolean \\| undefined` | `false` |\n\n\n## Methods\n\n### `focus() => Promise<any>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<any>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ------------------------------------------------------------------------------- |\n| | Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions. |\n\n\n----------------------------------------------\n\n\n",
1473
1481
  "kind": "spec"
1474
1482
  },
1475
1483
  {
@@ -1493,7 +1501,7 @@
1493
1501
  "group": "spec",
1494
1502
  "name": "badge",
1495
1503
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/badge.md",
1496
- "code": "# kol-badge\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_color` | `_color` | Defines the backgroundColor and foregroundColor. | `string \\| undefined \\| { backgroundColor: string; foregroundColor: Stringified<CharacteristicColors>; }` | `'#000'` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n\n\n## Methods\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
1504
+ "code": "# kol-badge\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_color` | `_color` | Defines the backgroundColor and foregroundColor. | `string \\| undefined \\| { backgroundColor: string; foregroundColor: Stringified<CharacteristicColors>; }` | `'#000'` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
1497
1505
  "kind": "spec"
1498
1506
  },
1499
1507
  {
@@ -1509,7 +1517,7 @@
1509
1517
  "group": "spec",
1510
1518
  "name": "button",
1511
1519
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/button.md",
1512
- "code": "# kol-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_ariaSelected` | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \\| undefined` | `undefined` |\n| `_customClass` | `_custom-class` | Defines the custom class attribute if _variant=\"custom\" is set. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for button events. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span style=\"color:red\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined` | `'button'` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'` |\n\n\n## Methods\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
1520
+ "code": "# kol-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_ariaSelected` | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \\| undefined` | `undefined` |\n| `_customClass` | `_custom-class` | Defines the custom class attribute if _variant=\"custom\" is set. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for button events. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span style=\"color:red\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined` | `'button'` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'` |\n\n\n## Methods\n\n### `focus() => Promise<any>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<any>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n----------------------------------------------\n\n\n",
1513
1521
  "kind": "spec"
1514
1522
  },
1515
1523
  {
@@ -1517,7 +1525,7 @@
1517
1525
  "group": "spec",
1518
1526
  "name": "button-link",
1519
1527
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/button-link.md",
1520
- "code": "# kol-button-link\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_ariaSelected` | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `true` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für die Button-Events an. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span style=\"color:red\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined` | `'button'` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
1528
+ "code": "# kol-button-link\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_ariaSelected` | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `true` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für die Button-Events an. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span style=\"color:red\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined` | `'button'` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<any>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<any>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n----------------------------------------------\n\n\n",
1521
1529
  "kind": "spec"
1522
1530
  },
1523
1531
  {
@@ -1533,7 +1541,7 @@
1533
1541
  "group": "spec",
1534
1542
  "name": "combobox",
1535
1543
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/combobox.md",
1536
- "code": "# kol-combobox\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasClearButton` | `_has-clear-button` | Shows the clear button if enabled. | `boolean \\| undefined` | `true` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_suggestions` _(required)_ | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<string>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
1544
+ "code": "# kol-combobox\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasClearButton` | `_has-clear-button` | Shows the clear button if enabled. | `boolean \\| undefined` | `true` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_suggestions` _(required)_ | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\n\n\n\n### `getValue() => Promise<string>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
1537
1545
  "kind": "spec"
1538
1546
  },
1539
1547
  {
@@ -1549,7 +1557,15 @@
1549
1557
  "group": "spec",
1550
1558
  "name": "details",
1551
1559
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/details.md",
1552
- "code": "# kol-details\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | ----------- |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_level` | `_level` | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined` | `0` |\n| `_on` | -- | Defines the callback functions for details. | `undefined \\| { onToggle?: EventValueOrEventCallback<MouseEvent, boolean> \\| undefined; }` | `undefined` |\n| `_open` | `_open` | Opens/expands the element when truthy, closes/collapses when falsy. | `boolean \\| undefined` | `false` |\n\n\n## Methods\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | --------------------------------------------------------- |\n| | Der Inhalt, der in der Detailbeschreibung angezeigt wird. |\n\n\n----------------------------------------------\n\n\n",
1560
+ "code": "# kol-details\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | ----------- |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_level` | `_level` | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined` | `0` |\n| `_on` | -- | Defines the callback functions for details. | `undefined \\| { onToggle?: EventValueOrEventCallback<MouseEvent, boolean> \\| undefined; }` | `undefined` |\n| `_open` | `_open` | Opens/expands the element when truthy, closes/collapses when falsy. | `boolean \\| undefined` | `false` |\n\n\n## Methods\n\n### `focus() => Promise<any>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<any>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | --------------------------------------------------------- |\n| | Der Inhalt, der in der Detailbeschreibung angezeigt wird. |\n\n\n----------------------------------------------\n\n\n",
1561
+ "kind": "spec"
1562
+ },
1563
+ {
1564
+ "id": "spec/dialog",
1565
+ "group": "spec",
1566
+ "name": "dialog",
1567
+ "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/dialog.md",
1568
+ "code": "# kol-dialog\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ----------- |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_on` | -- | Defines the modal callback functions. | `undefined \\| ({ onClose?: (() => void) \\| undefined; })` | `undefined` |\n| `_variant` | `_variant` | Defines the variant of the modal. | `\"blank\" \\| \"card\" \\| undefined` | `'blank'` |\n| `_width` | `_width` | Defines the width of the modal. (max-width: 100%) | `string \\| undefined` | `'100%'` |\n\n\n## Methods\n\n### `closeModal() => Promise<void>`\n\nCloses the dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `openModal() => Promise<void>`\n\nOpens the dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ---------------------- |\n| | The dialog's contents. |\n\n\n----------------------------------------------\n\n\n",
1553
1569
  "kind": "spec"
1554
1570
  },
1555
1571
  {
@@ -1597,7 +1613,7 @@
1597
1613
  "group": "spec",
1598
1614
  "name": "input-checkbox",
1599
1615
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-checkbox.md",
1600
- "code": "# kol-input-checkbox\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_checked` | `_checked` | Defines whether the checkbox is checked or not. Can be read and written. | `boolean \\| undefined` | `false` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { checked: string; indeterminate?: string \\| undefined; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate: string; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate?: string \\| undefined; unchecked: string; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_indeterminate` | `_indeterminate` | Puts the checkbox in the indeterminate state, does not change the value of _checked. | `boolean \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_labelAlign` | `_label-align` | Defines which alignment should be used for presentation. | `\"left\" \\| \"right\" \\| undefined` | `'right'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `true` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"button\" \\| \"default\" \\| \"switch\" \\| undefined` | `'default'` |\n\n\n## Methods\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | --------------------- |\n| `\"expert\"` | Checkbox description. |\n\n\n----------------------------------------------\n\n\n",
1616
+ "code": "# kol-input-checkbox\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_checked` | `_checked` | Defines whether the checkbox is checked or not. Can be read and written. | `boolean \\| undefined` | `false` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { checked: string; indeterminate?: string \\| undefined; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate: string; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate?: string \\| undefined; unchecked: string; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_indeterminate` | `_indeterminate` | Puts the checkbox in the indeterminate state, does not change the value of _checked. | `boolean \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_labelAlign` | `_label-align` | Defines which alignment should be used for presentation. | `\"left\" \\| \"right\" \\| undefined` | `'right'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `true` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"button\" \\| \"default\" \\| \"switch\" \\| undefined` | `'default'` |\n\n\n## Methods\n\n### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | --------------------- |\n| `\"expert\"` | Checkbox description. |\n\n\n----------------------------------------------\n\n\n",
1601
1617
  "kind": "spec"
1602
1618
  },
1603
1619
  {
@@ -1605,7 +1621,7 @@
1605
1621
  "group": "spec",
1606
1622
  "name": "input-color",
1607
1623
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-color.md",
1608
- "code": "# kol-input-color\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
1624
+ "code": "# kol-input-color\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
1609
1625
  "kind": "spec"
1610
1626
  },
1611
1627
  {
@@ -1613,7 +1629,7 @@
1613
1629
  "group": "spec",
1614
1630
  "name": "input-date",
1615
1631
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-date.md",
1616
- "code": "# kol-input-date\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined `` | `undefined` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined `` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"date\" \\| \"datetime-local\" \\| \"month\" \\| \"time\" \\| \"week\"` | `'date'` |\n| `_value` | `_value` | Defines the value of the element. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| null \\| undefined `` | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<string | Date | undefined | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | Date | null | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
1632
+ "code": "# kol-input-date\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined `` | `undefined` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined `` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"date\" \\| \"datetime-local\" \\| \"month\" \\| \"time\" \\| \"week\"` | `'date'` |\n| `_value` | `_value` | Defines the value of the element. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| null \\| undefined `` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\n\n\n\n### `getValue() => Promise<string | Date | undefined | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | Date | null | undefined>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
1617
1633
  "kind": "spec"
1618
1634
  },
1619
1635
  {
@@ -1621,7 +1637,7 @@
1621
1637
  "group": "spec",
1622
1638
  "name": "input-email",
1623
1639
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-email.md",
1624
- "code": "# kol-input-email\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
1640
+ "code": "# kol-input-email\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
1625
1641
  "kind": "spec"
1626
1642
  },
1627
1643
  {
@@ -1629,7 +1645,7 @@
1629
1645
  "group": "spec",
1630
1646
  "name": "input-file",
1631
1647
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-file.md",
1632
- "code": "# kol-input-file\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accept` | `_accept` | Defines which file formats are accepted. | `string \\| undefined` | `undefined` |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n\n\n## Methods\n\n### `getValue() => Promise<FileList | null | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<FileList | null | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
1648
+ "code": "# kol-input-file\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accept` | `_accept` | Defines which file formats are accepted. | `string \\| undefined` | `undefined` |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n\n\n## Methods\n\n### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\n\n\n\n### `getValue() => Promise<FileList | null | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<FileList | null | undefined>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
1633
1649
  "kind": "spec"
1634
1650
  },
1635
1651
  {
@@ -1637,7 +1653,7 @@
1637
1653
  "group": "spec",
1638
1654
  "name": "input-number",
1639
1655
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-number.md",
1640
- "code": "# kol-input-number\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `` `${number}.${number}` \\| `${number}` \\| null \\| number \\| undefined `` | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<number | NumberString | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | null>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
1656
+ "code": "# kol-input-number\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `` `${number}.${number}` \\| `${number}` \\| null \\| number \\| undefined `` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\n\n\n\n### `getValue() => Promise<number | NumberString | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | null>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
1641
1657
  "kind": "spec"
1642
1658
  },
1643
1659
  {
@@ -1645,7 +1661,7 @@
1645
1661
  "group": "spec",
1646
1662
  "name": "input-password",
1647
1663
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-password.md",
1648
- "code": "# kol-input-password\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"default\" \\| \"visibility-toggle\" \\| undefined` | `'default'` |\n\n\n## Methods\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
1664
+ "code": "# kol-input-password\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"default\" \\| \"visibility-toggle\" \\| undefined` | `'default'` |\n\n\n## Methods\n\n### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
1649
1665
  "kind": "spec"
1650
1666
  },
1651
1667
  {
@@ -1653,7 +1669,7 @@
1653
1669
  "group": "spec",
1654
1670
  "name": "input-radio",
1655
1671
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-radio.md",
1656
- "code": "# kol-input-radio\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` | `_options` | Options the user can choose from. | `RadioOption<StencilUnknown>[] \\| string \\| undefined` | `undefined` |\n| `_orientation` | `_orientation` | Defines whether the orientation of the component is horizontal or vertical. | `\"horizontal\" \\| \"vertical\" \\| undefined` | `'vertical'` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `null` |\n\n\n## Methods\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------------- |\n| | Die Legende/Überschrift der Radiobuttons. |\n\n\n----------------------------------------------\n\n\n",
1672
+ "code": "# kol-input-radio\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` | `_options` | Options the user can choose from. | `RadioOption<StencilUnknown>[] \\| string \\| undefined` | `undefined` |\n| `_orientation` | `_orientation` | Defines whether the orientation of the component is horizontal or vertical. | `\"horizontal\" \\| \"vertical\" \\| undefined` | `'vertical'` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `null` |\n\n\n## Methods\n\n### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------------- |\n| | Die Legende/Überschrift der Radiobuttons. |\n\n\n----------------------------------------------\n\n\n",
1657
1673
  "kind": "spec"
1658
1674
  },
1659
1675
  {
@@ -1661,7 +1677,7 @@
1661
1677
  "group": "spec",
1662
1678
  "name": "input-range",
1663
1679
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-range.md",
1664
- "code": "# kol-input-range\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `100` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `0` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<number | NumberString | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ------------------------------------- |\n| | Die Beschriftung des Eingabeelements. |\n\n\n----------------------------------------------\n\n\n",
1680
+ "code": "# kol-input-range\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `100` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `0` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\n\n\n\n### `getValue() => Promise<number | NumberString | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ------------------------------------- |\n| | Die Beschriftung des Eingabeelements. |\n\n\n----------------------------------------------\n\n\n",
1665
1681
  "kind": "spec"
1666
1682
  },
1667
1683
  {
@@ -1669,7 +1685,7 @@
1669
1685
  "group": "spec",
1670
1686
  "name": "input-text",
1671
1687
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-text.md",
1672
- "code": "# kol-input-text\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_spellCheck` | `_spell-check` | Defines whether the browser should check the spelling and grammar. | `boolean \\| undefined` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"search\" \\| \"tel\" \\| \"text\" \\| \"url\" \\| undefined` | `'text'` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `selectioconEnd() => Promise<number | null | undefined>`\n\nGet selection end of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `selectionStart() => Promise<number | null | undefined>`\n\nGet selection start of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `setRangeText(replacement: string, selectionStart?: number, selectionEnd?: number, selectMode?: \"select\" | \"start\" | \"end\" | \"preserve\") => Promise<void>`\n\nAdd string at position of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setRangeText\n\n#### Parameters\n\n| Name | Type | Description |\n| ---------------- | --------------------------------------------------------- | ----------- |\n| `replacement` | `string` | |\n| `selectionStart` | `number \\| undefined` | |\n| `selectionEnd` | `number \\| undefined` | |\n| `selectMode` | `\"select\" \\| \"start\" \\| \"end\" \\| \"preserve\" \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: \"forward\" | \"backward\" | \"none\") => Promise<void>`\n\nSet selection start and end, and optional in which direction, of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setSelectionRange\n\n#### Parameters\n\n| Name | Type | Description |\n| -------------------- | ------------------------------------------------ | ----------- |\n| `selectionStart` | `number` | |\n| `selectionEnd` | `number` | |\n| `selectionDirection` | `\"none\" \\| \"forward\" \\| \"backward\" \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionStart(selectionStart: number) => Promise<void>`\n\nSet selection start (and end = start) of internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| ---------------- | -------- | ----------- |\n| `selectionStart` | `number` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
1688
+ "code": "# kol-input-text\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_spellCheck` | `_spell-check` | Defines whether the browser should check the spelling and grammar. | `boolean \\| undefined` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"search\" \\| \"tel\" \\| \"text\" \\| \"url\" \\| undefined` | `'text'` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `selectioconEnd() => Promise<number | null | undefined>`\n\nGet selection end of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `selectionStart() => Promise<number | null | undefined>`\n\nGet selection start of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `setRangeText(replacement: string, selectionStart?: number, selectionEnd?: number, selectMode?: \"select\" | \"start\" | \"end\" | \"preserve\") => Promise<void>`\n\nAdd string at position of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setRangeText\n\n#### Parameters\n\n| Name | Type | Description |\n| ---------------- | --------------------------------------------------------- | ----------- |\n| `replacement` | `string` | |\n| `selectionStart` | `number \\| undefined` | |\n| `selectionEnd` | `number \\| undefined` | |\n| `selectMode` | `\"select\" \\| \"start\" \\| \"end\" \\| \"preserve\" \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: \"forward\" | \"backward\" | \"none\") => Promise<void>`\n\nSet selection start and end, and optional in which direction, of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setSelectionRange\n\n#### Parameters\n\n| Name | Type | Description |\n| -------------------- | ------------------------------------------------ | ----------- |\n| `selectionStart` | `number` | |\n| `selectionEnd` | `number` | |\n| `selectionDirection` | `\"none\" \\| \"forward\" \\| \"backward\" \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionStart(selectionStart: number) => Promise<void>`\n\nSet selection start (and end = start) of internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| ---------------- | -------- | ----------- |\n| `selectionStart` | `number` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
1673
1689
  "kind": "spec"
1674
1690
  },
1675
1691
  {
@@ -1685,7 +1701,7 @@
1685
1701
  "group": "spec",
1686
1702
  "name": "link",
1687
1703
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/link.md",
1688
- "code": "# kol-link\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaCurrentValue` | `_aria-current-value` | Defines the value for the aria-current attribute. | `\"date\" \\| \"false\" \\| \"location\" \\| \"page\" \\| \"step\" \\| \"time\" \\| \"true\" \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_download` | `_download` | Tells the browser that the link contains a file. Optionally sets the filename. | `string \\| undefined` | `undefined` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_href` _(required)_ | `_href` | Sets the target URI of the link or citation source. | `string` | `undefined` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `true` |\n| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for links. | `undefined \\| { onClick?: EventValueOrEventCallback<Event, string> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_target` | `_target` | Defines where to open the link. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'right'` |\n\n\n## Methods\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
1704
+ "code": "# kol-link\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaCurrentValue` | `_aria-current-value` | Defines the value for the aria-current attribute. | `\"date\" \\| \"false\" \\| \"location\" \\| \"page\" \\| \"step\" \\| \"time\" \\| \"true\" \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_download` | `_download` | Tells the browser that the link contains a file. Optionally sets the filename. | `string \\| undefined` | `undefined` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_href` _(required)_ | `_href` | Sets the target URI of the link or citation source. | `string` | `undefined` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `true` |\n| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for links. | `undefined \\| { onClick?: EventValueOrEventCallback<Event, string> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_target` | `_target` | Defines where to open the link. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'right'` |\n\n\n## Methods\n\n### `focus() => Promise<any>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<any>`\n\n\n\n\n----------------------------------------------\n\n\n",
1689
1705
  "kind": "spec"
1690
1706
  },
1691
1707
  {
@@ -1693,7 +1709,7 @@
1693
1709
  "group": "spec",
1694
1710
  "name": "link-button",
1695
1711
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/link-button.md",
1696
- "code": "# kol-link-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaCurrentValue` | `_aria-current-value` | Defines the value for the aria-current attribute. | `\"date\" \\| \"false\" \\| \"location\" \\| \"page\" \\| \"step\" \\| \"time\" \\| \"true\" \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_customClass` | `_custom-class` | Defines the custom class attribute if _variant=\"custom\" is set. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_download` | `_download` | Tells the browser that the link contains a file. Optionally sets the filename. | `string \\| undefined` | `undefined` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_href` _(required)_ | `_href` | Defines the target URI of the link. | `string` | `undefined` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for links. | `undefined \\| { onClick?: EventValueOrEventCallback<Event, string> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_target` | `_target` | Defines where to open the link. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'right'` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'` |\n\n\n## Methods\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
1712
+ "code": "# kol-link-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaCurrentValue` | `_aria-current-value` | Defines the value for the aria-current attribute. | `\"date\" \\| \"false\" \\| \"location\" \\| \"page\" \\| \"step\" \\| \"time\" \\| \"true\" \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_customClass` | `_custom-class` | Defines the custom class attribute if _variant=\"custom\" is set. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_download` | `_download` | Tells the browser that the link contains a file. Optionally sets the filename. | `string \\| undefined` | `undefined` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_href` _(required)_ | `_href` | Defines the target URI of the link. | `string` | `undefined` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for links. | `undefined \\| { onClick?: EventValueOrEventCallback<Event, string> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_target` | `_target` | Defines where to open the link. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'right'` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'` |\n\n\n## Methods\n\n### `focus() => Promise<any>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<any>`\n\n\n\n\n----------------------------------------------\n\n\n",
1697
1713
  "kind": "spec"
1698
1714
  },
1699
1715
  {
@@ -1701,7 +1717,7 @@
1701
1717
  "group": "spec",
1702
1718
  "name": "modal",
1703
1719
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/modal.md",
1704
- "code": "# kol-modal\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nhttps://en.wikipedia.org/wiki/Modal_window\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ----------- |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_on` | -- | Defines the modal callback functions. | `undefined \\| ({ onClose?: (() => void) \\| undefined; })` | `undefined` |\n| `_variant` | `_variant` | Defines the variant of the modal. | `\"blank\" \\| \"card\" \\| undefined` | `'blank'` |\n| `_width` | `_width` | Defines the width of the modal. (max-width: 100%) | `string \\| undefined` | `'100%'` |\n\n\n## Methods\n\n### `closeModal() => Promise<void>`\n\nCloses the modal dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `openModal() => Promise<void>`\n\nOpens the modal dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | --------------------- |\n| | The modal's contents. |\n\n\n----------------------------------------------\n\n\n",
1720
+ "code": "# kol-modal\n\n\n\n<!-- Auto Generated Below -->\n\n\n> **[DEPRECATED]** Use `kol-dialog` instead.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ----------- |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_on` | -- | Defines the modal callback functions. | `undefined \\| ({ onClose?: (() => void) \\| undefined; })` | `undefined` |\n| `_variant` | `_variant` | Defines the variant of the modal. | `\"blank\" \\| \"card\" \\| undefined` | `'blank'` |\n| `_width` | `_width` | Defines the width of the modal. (max-width: 100%) | `string \\| undefined` | `'100%'` |\n\n\n## Methods\n\n### `closeModal() => Promise<void>`\n\nCloses the modal dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `openModal() => Promise<void>`\n\nOpens the modal dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | --------------------- |\n| | The modal's contents. |\n\n\n----------------------------------------------\n\n\n",
1705
1721
  "kind": "spec"
1706
1722
  },
1707
1723
  {
@@ -1725,7 +1741,7 @@
1725
1741
  "group": "spec",
1726
1742
  "name": "popover-button",
1727
1743
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/popover-button.md",
1728
- "code": "# kol-popover-button-wc\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaSelected` | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \\| undefined` | `undefined` |\n| `_customClass` | `_custom-class` | Defines the custom class attribute if _variant=\"custom\" is set. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for button events. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_popoverAlign` | `_popover-align` | Defines where to show the Popover preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'bottom'` |\n| `_role` | `_role` | Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined` | `'button'` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'` |\n\n\n## Methods\n\n### `hidePopover() => Promise<void>`\n\nHides the popover programmatically by calling the native hidePopover method.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showPopover() => Promise<void>`\n\nShow the popover programmatically by calling the native showPopover method.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | -------------------- |\n| | The popover content. |\n\n\n----------------------------------------------\n\n\n",
1744
+ "code": "# kol-popover-button-wc\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaSelected` | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \\| undefined` | `undefined` |\n| `_customClass` | `_custom-class` | Defines the custom class attribute if _variant=\"custom\" is set. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_inline` | `_inline` | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for button events. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_popoverAlign` | `_popover-align` | Defines where to show the Popover preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'bottom'` |\n| `_role` | `_role` | Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined` | `'button'` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'` |\n\n\n## Methods\n\n### `focus() => Promise<any>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<any>`\n\n\n\n### `hidePopover() => Promise<void>`\n\nHides the popover programmatically by calling the native hidePopover method.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showPopover() => Promise<void>`\n\nShow the popover programmatically by calling the native showPopover method.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | -------------------- |\n| | The popover content. |\n\n\n----------------------------------------------\n\n\n",
1729
1745
  "kind": "spec"
1730
1746
  },
1731
1747
  {
@@ -1749,7 +1765,7 @@
1749
1765
  "group": "spec",
1750
1766
  "name": "select",
1751
1767
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/select.md",
1752
- "code": "# kol-select-wc\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component’s interactive element. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` _(required)_ | `_options` | Options the user can choose from, also supporting Optgroup. | `(Option<StencilUnknown> \\| Optgroup<StencilUnknown>)[] \\| string` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_rows` | `_rows` | Defines how many rows of options should be visible at the same time. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the input. | `StencilUnknown[] \\| boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<StencilUnknown[] | StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown | StencilUnknown[]>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
1768
+ "code": "# kol-select-wc\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component’s interactive element. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` _(required)_ | `_options` | Options the user can choose from, also supporting Optgroup. | `(Option<StencilUnknown> \\| Optgroup<StencilUnknown>)[] \\| string` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_rows` | `_rows` | Defines how many rows of options should be visible at the same time. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the input. | `StencilUnknown[] \\| boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\n\n\n\n### `getValue() => Promise<StencilUnknown[] | StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown | StencilUnknown[]>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
1753
1769
  "kind": "spec"
1754
1770
  },
1755
1771
  {
@@ -1757,7 +1773,7 @@
1757
1773
  "group": "spec",
1758
1774
  "name": "single-select",
1759
1775
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/single-select.md",
1760
- "code": "# kol-single-select\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasClearButton` | `_has-clear-button` | Shows the clear button if enabled. | `boolean \\| undefined` | `true` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` _(required)_ | `_options` | Options the user can choose from. | `Option<StencilUnknown>[] \\| string` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `null` |\n\n\n## Methods\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ---------------------- |\n| | The input field label. |\n\n\n----------------------------------------------\n\n\n",
1776
+ "code": "# kol-single-select\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasClearButton` | `_has-clear-button` | Shows the clear button if enabled. | `boolean \\| undefined` | `true` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` _(required)_ | `_options` | Options the user can choose from. | `Option<StencilUnknown>[] \\| string` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `null` |\n\n\n## Methods\n\n### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ---------------------- |\n| | The input field label. |\n\n\n----------------------------------------------\n\n\n",
1761
1777
  "kind": "spec"
1762
1778
  },
1763
1779
  {
@@ -1765,7 +1781,7 @@
1765
1781
  "group": "spec",
1766
1782
  "name": "skip-nav",
1767
1783
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/skip-nav.md",
1768
- "code": "# kol-skip-nav\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------- | ----------- |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_links` _(required)_ | `_links` | Defines the list of links combined with their labels to render. | `LinkProps[] \\| string` | `undefined` |\n\n\n## Methods\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the skip navigation's first link.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
1784
+ "code": "# kol-skip-nav\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------- | ----------- |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_links` _(required)_ | `_links` | Defines the list of links combined with their labels to render. | `LinkProps[] \\| string` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<any>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<any>`\n\n\n\n\n----------------------------------------------\n\n\n",
1769
1785
  "kind": "spec"
1770
1786
  },
1771
1787
  {
@@ -1781,7 +1797,7 @@
1781
1797
  "group": "spec",
1782
1798
  "name": "split-button",
1783
1799
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/split-button.md",
1784
- "code": "# kol-split-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_ariaSelected` | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \\| undefined` | `undefined` |\n| `_customClass` | `_custom-class` | Defines the custom class attribute if _variant=\"custom\" is set. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for button events. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span style=\"color:red\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined` | `'button'` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'` |\n\n\n## Methods\n\n### `closePopup() => Promise<void>`\n\nCloses the dropdown.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | --------------------------------------------------------- |\n| | Ermöglicht das Einfügen beliebigen HTMLs in das dropdown. |\n\n\n----------------------------------------------\n\n\n",
1800
+ "code": "# kol-split-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaControls` | `_aria-controls` | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | `string \\| undefined` | `undefined` |\n| `_ariaDescription` | `_aria-description` | Defines the value for the aria-description attribute. | `string \\| undefined` | `undefined` |\n| `_ariaExpanded` | `_aria-expanded` | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | `boolean \\| undefined` | `undefined` |\n| `_ariaSelected` | `_aria-selected` | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \\| undefined` | `undefined` |\n| `_customClass` | `_custom-class` | Defines the custom class attribute if _variant=\"custom\" is set. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Defines the callback functions for button events. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_role` | `_role` | <span style=\"color:red\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined` | `'button'` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'` |\n\n\n## Methods\n\n### `closePopup() => Promise<void>`\n\nCloses the dropdown.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<any>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<any>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | --------------------------------------------------------- |\n| | Ermöglicht das Einfügen beliebigen HTMLs in das dropdown. |\n\n\n----------------------------------------------\n\n\n",
1785
1801
  "kind": "spec"
1786
1802
  },
1787
1803
  {
@@ -1813,7 +1829,7 @@
1813
1829
  "group": "spec",
1814
1830
  "name": "textarea",
1815
1831
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/textarea.md",
1816
- "code": "# kol-textarea\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_adjustHeight` | `_adjust-height` | Adjusts the height of the element to its content. | `boolean \\| undefined` | `false` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_resize` | `_resize` | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize) In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`. | `\"none\" \\| \"vertical\" \\| undefined` | `'vertical'` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_spellCheck` | `_spell-check` | Defines whether the browser should check the spelling and grammar. | `boolean \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
1832
+ "code": "# kol-textarea\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_adjustHeight` | `_adjust-height` | Adjusts the height of the element to its content. | `boolean \\| undefined` | `false` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_id` | `_id` | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_resize` | `_resize` | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize) In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`. | `\"none\" \\| \"vertical\" \\| undefined` | `'vertical'` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_spellCheck` | `_spell-check` | Defines whether the browser should check the spelling and grammar. | `boolean \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus() => Promise<void | undefined>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void | undefined>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------------- |\n| | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
1817
1833
  "kind": "spec"
1818
1834
  },
1819
1835
  {
@@ -1845,7 +1861,7 @@
1845
1861
  "group": "spec",
1846
1862
  "name": "tree-item",
1847
1863
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/tree-item.md",
1848
- "code": "# kol-tree-item-wc\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------- | ----------- |\n| `_active` | `_active` | If set (to true) the tree item is the active one. | `boolean \\| undefined` | `undefined` |\n| `_href` _(required)_ | `_href` | Defines the target URI of the link. | `string` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_open` | `_open` | Opens/expands the element when truthy, closes/collapses when falsy. | `boolean \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `collapse() => Promise<void>`\n\nCollapses the tree item.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `expand() => Promise<void>`\n\nExpands the tree item.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focusLink() => Promise<void>`\n\nFocuses the link element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `isOpen() => Promise<boolean>`\n\nReturns whether the tree item is expanded.\n\n#### Returns\n\nType: `Promise<boolean>`\n\n\n\n\n----------------------------------------------\n\n\n",
1864
+ "code": "# kol-tree-item-wc\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------- | ----------- |\n| `_active` | `_active` | If set (to true) the tree item is the active one. | `boolean \\| undefined` | `undefined` |\n| `_href` _(required)_ | `_href` | Defines the target URI of the link. | `string` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_open` | `_open` | Opens/expands the element when truthy, closes/collapses when falsy. | `boolean \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `collapse() => Promise<void>`\n\nCollapses the tree item.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `expand() => Promise<void>`\n\nExpands the tree item.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<any>`\n\nFocuses the link element.\n\n#### Returns\n\nType: `Promise<any>`\n\n\n\n### `isOpen() => Promise<boolean>`\n\nReturns whether the tree item is expanded.\n\n#### Returns\n\nType: `Promise<boolean>`\n\n\n\n\n----------------------------------------------\n\n\n",
1849
1865
  "kind": "spec"
1850
1866
  },
1851
1867
  {