@public-ui/mcp 4.3.0-rc.1 → 4.3.0-rc.2

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 +9 -13
  2. package/shared/sample-index.json +59 -35
package/shared/sample-index.json CHANGED
@@ -1,16 +1,16 @@
1
1
  {
2
2
  "metadata": {
3
- "generatedAt": "2026-06-08T11:45:25.170Z",
3
+ "generatedAt": "2026-06-24T14:34:42.009Z",
4
4
  "buildMode": "ci",
5
5
  "counts": {
6
- "total": 323,
7
- "totalDocs": 59,
6
+ "total": 326,
7
+ "totalDocs": 61,
8
8
  "totalSpecs": 53,
9
- "totalSamples": 192,
9
+ "totalSamples": 193,
10
10
  "totalScenarios": 19
11
11
  },
12
12
  "repo": {
13
- "commit": "c4c58708363eab288a23b060e312526aafaffa11",
13
+ "commit": "bdf07d59c7048a36e378ca63df6bd3922b938601",
14
14
  "branch": "develop",
15
15
  "repoUrl": "https://github.com/public-ui/kolibri"
16
16
  }
@@ -264,6 +264,14 @@
264
264
  "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## KolIcons instead of Codicons\n\nKoliBri now provides its own comprehensive icon set called **KolIcons**, replacing the previous dependency on Microsoft's Codicons. This change provides better control over iconography, improved consistency across the component library, and reduced external dependencies.\n\n### Asset Loading\n\nIn HTML documents, load the KolIcons stylesheet instead of Codicons:\n\n**Before (v3):**\n\n```html\n<link rel=\"stylesheet\" href=\"/assets/codicons/codicon.css\" />\n```\n\n**After (v4):**\n\n```html\n<link rel=\"stylesheet\" href=\"/assets/kolicons/style.css\" />\n```\n\n### Using Codicons Alongside KolIcons (Optional)\n\nIf your application still uses Codicons, you can include both stylesheets. However, this is **optional** and most projects can migrate fully to KolIcons:\n\n```html\n<link rel=\"stylesheet\" href=\"/assets/kolicons/style.css\" />\n<!-- Only if you still use Codicons elsewhere in your app -->\n<link rel=\"stylesheet\" href=\"/assets/codicons/codicon.css\" />\n```\n\n### CSS Import\n\nIn modern bundlers (webpack, Vite, etc.), import KolIcons in your main entry point:\n\n**Before (v3):**\n\n```ts\nimport '@public-ui/components/assets/codicons/codicon.css';\n```\n\n**After (v4):**\n\n```ts\nimport '@public-ui/components/assets/kolicons/style.css';\n```\n\n### Icon Class Names\n\nUpdate all icon references in your code from `codicon` to `kolicon`. For example:\n\n**Before (v3):**\n\n```tsx\n<KolButton _label=\"Save\" _icons=\"codicon codicon-save\" />\n<KolIcon _icon=\"codicon codicon-check\" />\n```\n\n**After (v4):**\n\n```tsx\n<KolButton _label=\"Save\" _icons=\"kolicon kolicon-save\" />\n<KolIcon _icon=\"kolicon kolicon-check\" />\n```\n\nSee the [KolIcons documentation](https://develop--kolibri-public-ui.netlify.app/#/icon/all-kolicons) for the complete list of available icon names.\n\n### Font Files\n\nThe font file is now located at:\n\n```\nnode_modules/@public-ui/components/assets/kolicons/kolicons.ttf\n```\n\nIf you're manually copying assets to a public folder for custom builds:\n\n```bash\ncp node_modules/@public-ui/components/assets/kolicons/style.css dist/assets/kolicons/\ncp node_modules/@public-ui/components/assets/kolicons/kolicons.ttf dist/assets/kolicons/\n```\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- DOM events emitted by components now use native event names without the `kol` prefix. Listen for `change`, `submit`, `click`, and similar names. All `kol*` event aliases have been removed.\n\n**Complete list of event name changes:**\n\n| Old Event Name | New Event Name |\n| ---------------------- | ------------------- |\n| `kolBlur` | `blur` |\n| `kolChange` | `change` |\n| `kolChangeHeaderCells` | `changeheadercells` |\n| `kolChangePage` | `changepage` |\n| `kolChangePageSize` | `changepagesize` |\n| `kolClick` | `click` |\n| `kolClose` | `close` |\n| `kolCreate` | `create` |\n| `kolFocus` | `focus` |\n| `kolInput` | `input` |\n| `kolKeydown` | `keydown` |\n| `kolMousedown` | `mousedown` |\n| `kolReset` | `reset` |\n| `kolSelect` | `select` |\n| `kolSelectionChange` | `selectionchange` |\n| `kolSort` | `sort` |\n| `kolSubmit` | `submit` |\n| `kolToggle` | `toggle` |\n\n**Before:**\n\n```ts\nelement.addEventListener('kolSubmit', handler);\nelement.dispatchEvent(new CustomEvent('kolChange', { detail: value }));\n```\n\n**After:**\n\n```ts\nelement.addEventListener('submit', handler);\nelement.dispatchEvent(new CustomEvent('change', { detail: value }));\n```\n\n> **W3C Standard Compliance:** All custom event names now follow the W3C naming convention and use lowercase letters only (see [W3C Event Reference](https://developer.mozilla.org/en-US/docs/Web/API/Document/selectionchange_event)). This includes custom events like `changeheadercells`, `changepage`, `changepagesize`, and `selectionchange`. While standard DOM events (like `blur`, `change`, `click`) were already lowercase, our custom composite event names have been updated from camelCase to lowercase for consistency with web standards.\n\n> **TypeScript note:** If you use TypeScript event maps or typed listeners, update any type declarations that still reference the old `kol*` event names. This includes global `HTMLElementEventMap` / `DocumentEventMap` augmentations, custom event map interfaces, and `CustomEvent` type aliases keyed by names like `'kolSubmit'` or `'kolChange'`. Replace those keys with the new native event names (for example, `'submit'`, `'change'`, `'changeheadercells'`, etc.) so your type checks stay in sync with the runtime events.\n\n**Migration examples for custom events:**\n\n```ts\n// Before (v3)\nelement.addEventListener('kolChangeHeaderCells', handler);\nelement.addEventListener('kolChangePage', handler);\nelement.addEventListener('kolSelectionChange', handler);\n\n// After (v4)\nelement.addEventListener('changeheadercells', handler);\nelement.addEventListener('changepage', handler);\nelement.addEventListener('selectionchange', handler);\n```\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```\n\n#### Header Cell Width and Label Requirements, \\_minWidth Removal\n\nThe `_minWidth` property has been removed from kol-table components. The table now uses `table-layout: fixed` in CSS. When `width` values are provided on header cells, the sum of all widths determines the table's minimum width.\n\n**Breaking Type Changes:**\n\n- `KoliBriTableCell.width` remains optional, but is now `number | undefined` (pixels only, no string units)\n - When provided, must be a number (e.g., `200` for 200 pixels)\n - When omitted, the column width is determined by CSS (auto-sized by content)\n\n**CSS Behavior Change:**\n\nThe table now uses `table-layout: fixed`, which provides:\n\n- Predictable column widths: Columns with explicit `width` are exactly as wide as specified\n- Better performance: Browser doesn't need to calculate widths based on content\n- Flexible layout: Columns without `width` are auto-sized; the table's minimum width is only the sum of explicitly defined column widths\n\n**Before (v3):**\n\n```typescript\n// _minWidth property on component, table-layout: auto (content-dependent widths)\n<kol-table-stateful _minWidth=\"400px\" _headerCells={headerCells}></kol-table-stateful>\n\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{ key: 'name', label: 'Name' }, // width optional\n\t\t\t{ key: 'age', label: 'Age', width: '150px' }, // width as string with unit\n\t\t],\n\t],\n\tvertical: [],\n};\n```\n\n**After (v4):**\n\n```typescript\n// _minWidth removed - table uses table-layout: fixed\n<kol-table-stateful _headerCells={headerCells}></kol-table-stateful>\n\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{ key: 'name', label: 'Name' }, // width optional - column auto-sizes\n\t\t\t{ key: 'age', label: 'Age', width: 150 }, // width as number (pixels)\n\t\t],\n\t],\n\tvertical: [],\n};\n// Table minimum width is 150px (only columns with explicit width are counted)\n```\n\n**Migration:**\n\n- Remove all `_minWidth` properties from table components\n- Convert any `width` string values (e.g., `'150px'`) to numbers (e.g., `150`)\n- The `width` property is optional – omit it if you want the column to auto-size\n- The `label` property is already required\n- With `table-layout: fixed`, columns with explicit widths are exact – plan your widths to accommodate content\n\n#### Multiple Header Rows and Width Calculation\n\nWhen using multiple header rows (e.g., a parent row with merged columns and a child row with individual columns), the table's minimum width is calculated by summing **all** width values from **all** header rows.\n\n**Important:** With multiple header rows, you should specify width on **either** the merged (parent) column **or** the individual (child) columns—not both. If you specify widths on both levels, all widths are summed together, which may result in a wider table than intended.\n\n**Guidelines:**\n\n- **Equal distribution:** Specify only the width of the merged (parent) column. Child columns will distribute the space equally based on their content.\n- **More control:** Specify widths on individual (child) columns instead of the merged column. This gives precise control over each column's width.\n\n**Example 1: Width on merged column only (equal distribution)**\n\n```typescript\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Personal Info', colSpan: 2, width: 300 }, // Merged column with total width\n\t\t],\n\t\t[\n\t\t\t{ key: 'firstName', label: 'First Name' }, // Child column - auto-sizes within parent\n\t\t\t{ key: 'lastName', label: 'Last Name' }, // Child column - auto-sizes within parent\n\t\t],\n\t],\n};\n// Table minimum width: 300px\n```\n\n**Example 2: Width on individual columns only (more control)**\n\n```typescript\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Personal Info', colSpan: 2 }, // Merged column - no width specified\n\t\t],\n\t\t[\n\t\t\t{ key: 'firstName', label: 'First Name', width: 150 }, // Explicit width\n\t\t\t{ key: 'lastName', label: 'Last Name', width: 200 }, // Explicit width\n\t\t],\n\t],\n};\n// Table minimum width: 350px (150 + 200)\n```\n\n**Example 3: Avoid specifying widths on both levels**\n\n```typescript\n// ⚠️ NOT RECOMMENDED - widths are summed from all rows\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Personal Info', colSpan: 2, width: 300 }, // Parent width: 300\n\t\t],\n\t\t[\n\t\t\t{ key: 'firstName', label: 'First Name', width: 150 }, // Child width: 150\n\t\t\t{ key: 'lastName', label: 'Last Name', width: 200 }, // Child width: 200\n\t\t],\n\t],\n};\n// Table minimum width: 650px (300 + 150 + 200) - probably not intended!\n```\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- **`label: string`** - Required. The display text for the column header.\n- **`width?: number`** - Optional. Column width in pixels. The sum of all defined widths determines the table's minimum width. Columns without `width` auto-size.\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 'NOS').\n- **`resizable: boolean`** - Determines if the column width can be adjusted by the user through the settings menu.\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\twidth: 200, // Optional: width in pixels\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\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\twidth: 100, // Optional: width in pixels\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},\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",
265
265
  "kind": "doc"
266
266
  },
267
+ {
268
+ "id": "doc/BREAKING_CHANGES.v5",
269
+ "group": "docs",
270
+ "name": "BREAKING_CHANGES.v5",
271
+ "path": "docs/BREAKING_CHANGES.v5.md",
272
+ "code": "# Breaking Changes for version 5\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## Removal of the `@public-ui/themes` meta package\n\nThe `@public-ui/themes` meta package only ever re-exported and bundled the individual theme packages.\nIt was never meant to be used directly and is the reason for a circular dependency between the themes,\nthe visual-tests runner and the sample app.\n\nStarting with version 4 the package is **deprecated**; it will be **removed in version 5**. Migrate to\nthe individual `@public-ui/theme-*` packages instead. When an application uses several themes (as the\npresentation app does), add every theme as its own dependency.\n\n### Package dependency\n\nReplace the meta package with the individual theme packages you actually use:\n\n**Before (v4):**\n\n```jsonc\n{\n\t\"dependencies\": {\n\t\t\"@public-ui/themes\": \"^4.0.0\",\n\t},\n}\n```\n\n**After:**\n\n```jsonc\n{\n\t\"dependencies\": {\n\t\t\"@public-ui/theme-default\": \"^4.0.0\",\n\t\t\"@public-ui/theme-ecl\": \"^4.0.0\",\n\t},\n}\n```\n\n| Meta export | Individual package |\n| ----------- | -------------------------- |\n| `DEFAULT` | `@public-ui/theme-default` |\n| `BWSt` | `@public-ui/theme-bwst` |\n| `DesyV11` | `@public-ui/theme-desy` |\n| `ECL_EC` | `@public-ui/theme-ecl` |\n| `ECL_EU` | `@public-ui/theme-ecl` |\n| `KERN_V2` | `@public-ui/theme-kern` |\n\n### Imports\n\n**Before (v4):**\n\n```ts\nimport { BWSt, DEFAULT, DesyV11, ECL_EC, ECL_EU, KERN_V2 } from '@public-ui/themes';\n```\n\n**After:**\n\n```ts\nimport { BWSt } from '@public-ui/theme-bwst';\nimport { DEFAULT } from '@public-ui/theme-default';\nimport { DesyV11 } from '@public-ui/theme-desy';\nimport { ECL_EC, ECL_EU } from '@public-ui/theme-ecl';\nimport { KERN_V2 } from '@public-ui/theme-kern';\n```\n\n### Assets\n\nThe meta package aggregated the assets (fonts, icons) of all themes into a single `assets` folder.\nWithout it, copy the assets from each individual theme package you use.\n\n**Before (v4):**\n\n```jsonc\n{\n\t\"scripts\": {\n\t\t\"prebuild:themes\": \"cpy \\\"node_modules/@public-ui/themes/assets/**/*\\\" public/assets --dot\",\n\t},\n}\n```\n\n**After:**\n\n```jsonc\n{\n\t\"scripts\": {\n\t\t\"prebuild:theme-default\": \"cpy \\\"node_modules/@public-ui/theme-default/assets/**/*\\\" public/assets --dot\",\n\t\t\"prebuild:theme-ecl\": \"cpy \\\"node_modules/@public-ui/theme-ecl/assets/**/*\\\" public/assets --dot\",\n\t},\n}\n```\n",
273
+ "kind": "doc"
274
+ },
267
275
  {
268
276
  "id": "doc/CLA",
269
277
  "group": "docs",
@@ -389,7 +397,7 @@
389
397
  "group": "docs",
390
398
  "name": "LICENSE_REPORTS",
391
399
  "path": "docs/LICENSE_REPORTS.md",
392
- "code": "# License Reports\n\n> Overview of licenses for all packages in Kolibri.\n\n## adapter-angular-v19\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ------- | -------------------------------------------------- |\n| rxjs | Apache-2.0 | 7.8.2 | Ben Lesh |\n| typescript | Apache-2.0 | 5.8.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @angular/common | MIT | 19.2.24 | angular |\n| @angular/compiler | MIT | 19.2.24 | angular |\n| @angular/compiler-cli | MIT | 19.2.24 | n/a |\n| @angular/core | MIT | 19.2.21 | angular |\n| @angular/core | MIT | 19.2.21 | angular |\n| zone.js | MIT | 0.15.1 | Brian Ford |\n\n## adapter-angular-v20\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ------- | -------------------------------------------------- |\n| rxjs | Apache-2.0 | 7.8.2 | Ben Lesh |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @angular/common | MIT | 20.3.23 | angular |\n| @angular/compiler | MIT | 20.3.20 | angular |\n| @angular/compiler-cli | MIT | 20.3.20 | n/a |\n| @angular/core | MIT | 20.3.20 | angular |\n| @angular/core | MIT | 20.3.20 | angular |\n| zone.js | MIT | 0.15.1 | Brian Ford |\n\n## adapter-angular-v21\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ------- | -------------------------------------------------- |\n| rxjs | Apache-2.0 | 7.8.2 | Ben Lesh |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @angular/common | MIT | 21.2.15 | angular |\n| @angular/compiler | MIT | 21.2.12 | angular |\n| @angular/compiler-cli | MIT | 21.2.12 | n/a |\n| @angular/core | MIT | 21.2.12 | angular |\n| @angular/core | MIT | 21.2.12 | angular |\n| zone.js | MIT | 0.16.2 | Brian Ford |\n\n## adapter-hydrate\n\n| Package | License | Version | Author |\n| -------------------------------- | ------------- | ------- | -------------------------------------------------- |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| chai | MIT | 6.2.2 | Jake Luer |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| mocha | MIT | 11.7.5 | TJ Holowaychuk |\n| mocha-snapshots | MIT | 4.2.0 | Wellington Guimaraes |\n| prettier | MIT | 3.8.3 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n\n## adapter-preact\n\n| Package | License | Version | Author |\n| --------------------- | ---------- | ------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| preact | MIT | 10.29.1 | n/a |\n| react | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-react\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @types/react | MIT | 18.3.29 | n/a |\n| @types/react-dom | MIT | 18.3.7 | n/a |\n| react | MIT | 18.3.1 | n/a |\n| react | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-react-standalone\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ------- | ------------------------------------------------------------- |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| cpy-cli | MIT | 7.0.0 | Sindre Sorhus sindresorhus@gmail.com https://sindresorhus.com |\n| react | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| webpack | MIT | 5.107.2 | Tobias Koppers @sokra |\n| webpack-cli | MIT | 6.0.1 | n/a |\n\n## adapter-solid\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| solid-js | MIT | 1.9.12 | Ryan Carniato |\n| solid-js | MIT | 1.9.12 | Ryan Carniato |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-svelte\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @babel/types | MIT | 7.29.7 | The Babel Team (https://babel.dev/team) |\n| svelte | MIT | 5.55.7 | n/a |\n| svelte | MIT | 5.55.7 | n/a |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-vue\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @babel/types | MIT | 7.29.7 | The Babel Team (https://babel.dev/team) |\n| unbuild | MIT | 3.6.1 | n/a |\n| vue | MIT | 3.5.34 | Evan You |\n| vue | MIT | 3.5.34 | Evan You |\n\n## components\n\n| Package | License | Version | Author |\n| ---------------------------------------- | ------------- | ----------- | -------------------------------------------------------------- |\n| @playwright/test | Apache-2.0 | 1.60.0 | Microsoft Corporation |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| terser | BSD-2-Clause | 5.48.0 | Mihai Bazon |\n| twig | BSD-2-Clause | 3.0.0 | John Roepke |\n| wcag-contrast | BSD-2-Clause | 3.0.0 | Tom MacWright |\n| adopted-style-sheets | EUPL-1.2 | 1.1.9-rc.22 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| stencil-awesome-test | EUPL-1.2 | 1.0.6 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| knip | ISC | 6.14.2 | Lars Kappert lars@webpro.nl |\n| @eslint/eslintrc | MIT | 3.3.5 | Nicholas C. Zakas |\n| @eslint/js | MIT | 9.39.4 | n/a |\n| @floating-ui/dom | MIT | 1.7.6 | atomiks |\n| @public-ui/stencil-angular-output-target | MIT | 0.9.0 | n/a |\n| @public-ui/stencil-react-output-target | MIT | 0.6.0 | n/a |\n| @public-ui/stencil-solid-output-target | MIT | 0.2.0 | Ionic Team |\n| @public-ui/stencil-vue-output-target | MIT | 0.9.0 | n/a |\n| @revolist/svelte-output-target | MIT | 0.0.7 | Ionic Team |\n| @stencil-community/eslint-plugin | MIT | 0.10.0 | n/a |\n| @stencil-community/postcss | MIT | 2.2.0 | Ionic Team |\n| @stencil/core | MIT | 4.38.3 | Ionic Team |\n| @stencil/playwright | MIT | 0.2.3 | Stencil Team |\n| @stencil/sass | MIT | 3.2.3 | Ionic Team |\n| @types/color-convert | MIT | 2.0.4 | n/a |\n| @types/jest | MIT | 29.5.14 | n/a |\n| @types/lodash-es | MIT | 4.17.12 | n/a |\n| @types/markdown-it | MIT | 14.1.2 | n/a |\n| @types/mustache | MIT | 4.2.6 | n/a |\n| @types/pug | MIT | 2.0.10 | n/a |\n| @types/twig | MIT | 1.12.17 | n/a |\n| @types/wcag-contrast | MIT | 3.0.3 | n/a |\n| @typescript-eslint/eslint-plugin | MIT | 8.58.2 | n/a |\n| @typescript-eslint/parser | MIT | 8.58.2 | n/a |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| color-convert | MIT | 3.1.3 | Josh Junon |\n| color-rgba | MIT | 2.4.0 | Dmitry Yv |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| cssnano | MIT | 8.0.1 | Ben Briggs beneb.info@gmail.com http://beneb.info |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| eslint-plugin-boundaries | MIT | 6.0.2 | Javier Brea |\n| eslint-plugin-import | MIT | 2.32.0 | Ben Mosher |\n| eslint-plugin-jsx-a11y | MIT | 6.10.2 | Ethan Cohen |\n| jest | MIT | 29.7.0 | n/a |\n| jest-cli | MIT | 29.7.0 | n/a |\n| lodash-es | MIT | 4.18.1 | John-David Dalton |\n| markdown-it | MIT | 14.2.0 | n/a |\n| mustache | MIT | 4.2.0 | mustache.js Authors |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| postcss-sorting | MIT | 10.0.0 | Aleks Hudochenkov |\n| prettier | MIT | 3.8.3 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| pug | MIT | 3.0.4 | TJ Holowaychuk |\n| rgba-convert | MIT | 0.3.0 | jeromedecoster |\n| stylelint | MIT | 17.12.0 | stylelint |\n| typed-bem | MIT | 1.0.2 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## icons\n\n| Package | License | Version | Author |\n| ---------------- | ------------- | ------- | ------------------ |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| http-server | MIT | 14.1.1 | n/a |\n| oslllo-svg-fixer | MIT | 6.0.1 | Ghustavh Ehm |\n| svgtofont | MIT | 6.5.2 | Kenny |\n\n## root\n\n| Package | License | Version | Author |\n| --------------------------------- | ---------- | ------- | ------------------------------------------------- |\n| npm-check-updates | Apache-2.0 | 22.2.1 | Tomas Junnonen |\n| @evilmartians/lefthook | MIT | 2.1.9 | mrexox |\n| license-report | MIT | 6.8.5 | BePo65 |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| prettier | MIT | 3.8.3 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| stylelint | MIT | 17.12.0 | stylelint |\n| stylelint-config-recommended-scss | MIT | 17.0.1 | kristerkari |\n| stylelint-config-standard | MIT | 40.0.0 | Stylelint |\n| stylelint-order | MIT | 8.1.1 | Aleks Hudochenkov |\n| stylelint-scss | MIT | 7.1.1 | Krister Kari |\n\n## sample-react\n\n| Package | License | Version | Author |\n| ---------------------------------- | ----------------- | ----------- | -------------------------------------------------------------- |\n| tslib | 0BSD | 2.8.1 | Microsoft Corp. |\n| @lhci/cli | Apache-2.0 | 0.15.1 | n/a |\n| @playwright/test | Apache-2.0 | 1.60.0 | Microsoft Corporation |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react-hook-form-adapter | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react-v19 | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/themes | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| adopted-style-sheets | EUPL-1.2 | 1.1.9-rc.22 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| knip | ISC | 6.14.2 | Lars Kappert lars@webpro.nl |\n| world_countries_lists | LGPL-3.0-or-later | 3.3.0 | Stefan Gabos |\n| @hookform/resolvers | MIT | 5.4.0 | bluebill1049 |\n| @stencil/core | MIT | 4.38.3 | Ionic Team |\n| @types/node | MIT | 25.9.1 | n/a |\n| @types/papaparse | MIT | 5.5.2 | n/a |\n| @types/react | MIT | 19.2.15 | n/a |\n| @types/react-dom | MIT | 19.2.3 | n/a |\n| @typescript-eslint/eslint-plugin | MIT | 8.58.2 | n/a |\n| @typescript-eslint/parser | MIT | 8.58.2 | n/a |\n| @unocss/preset-mini | MIT | 66.7.0 | Anthony Fu |\n| @unocss/vite | MIT | 66.7.0 | Anthony Fu |\n| @vitejs/plugin-react-swc | MIT | 4.3.1 | Arnaud Barré (https://github.com/ArnaudBarre) |\n| cpy-cli | MIT | 7.0.0 | Sindre Sorhus sindresorhus@gmail.com https://sindresorhus.com |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| eslint-plugin-jsx-a11y | MIT | 6.10.2 | Ethan Cohen |\n| eslint-plugin-react | MIT | 7.37.5 | Yannick Croissant |\n| eslint-plugin-react-hooks | MIT | 7.1.1 | n/a |\n| http-server | MIT | 14.1.1 | n/a |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| papaparse | MIT | 5.5.3 | Matthew Holt https://twitter.com/mholt6 |\n| prettier | MIT | 3.8.3 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| react | MIT | 19.2.6 | n/a |\n| react-dom | MIT | 19.2.6 | n/a |\n| react-hook-form | MIT | 7.76.1 | Beier(Bill) Luo |\n| react-number-format | MIT | 5.4.5 | Sudhanshu Yadav |\n| react-router | MIT | 7.16.0 | Remix Software |\n| react-router-dom | MIT | 7.16.0 | Remix Software |\n| stylelint | MIT | 17.12.0 | stylelint |\n| vite | MIT | 7.3.3 | Evan You |\n| zod | MIT | 4.4.3 | Colin McDonnell |\n\n## theme-bwst\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | ------------------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @eslint/eslintrc | MIT | 3.3.5 | Nicholas C. Zakas |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| @typescript-eslint/eslint-plugin | MIT | 8.58.2 | n/a |\n| @typescript-eslint/parser | MIT | 8.58.2 | n/a |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cpy-cli | MIT | 7.0.0 | Sindre Sorhus sindresorhus@gmail.com https://sindresorhus.com |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.3 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.60.4 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.12.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-default\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | ------------------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @eslint/eslintrc | MIT | 3.3.5 | Nicholas C. Zakas |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| @typescript-eslint/eslint-plugin | MIT | 8.58.2 | n/a |\n| @typescript-eslint/parser | MIT | 8.58.2 | n/a |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cpy-cli | MIT | 7.0.0 | Sindre Sorhus sindresorhus@gmail.com https://sindresorhus.com |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.3 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.60.4 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.12.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-desy\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | ------------------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @eslint/eslintrc | MIT | 3.3.5 | Nicholas C. Zakas |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| @typescript-eslint/eslint-plugin | MIT | 8.58.2 | n/a |\n| @typescript-eslint/parser | MIT | 8.58.2 | n/a |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cpy-cli | MIT | 7.0.0 | Sindre Sorhus sindresorhus@gmail.com https://sindresorhus.com |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.3 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.60.4 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.12.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-ecl\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | ------------------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @eslint/eslintrc | MIT | 3.3.5 | Nicholas C. Zakas |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| @typescript-eslint/eslint-plugin | MIT | 8.58.2 | n/a |\n| @typescript-eslint/parser | MIT | 8.58.2 | n/a |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cpy-cli | MIT | 7.0.0 | Sindre Sorhus sindresorhus@gmail.com https://sindresorhus.com |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.3 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.60.4 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.12.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-kern\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | ------------------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @kern-ux/native | EUPL-1.2 | 2.3.0 | Kern-UX |\n| @public-ui/components | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @eslint/eslintrc | MIT | 3.3.5 | Nicholas C. Zakas |\n| @eslint/js | MIT | 9.39.4 | n/a |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| @typescript-eslint/eslint-plugin | MIT | 8.58.2 | n/a |\n| @typescript-eslint/parser | MIT | 8.58.2 | n/a |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cpy-cli | MIT | 7.0.0 | Sindre Sorhus sindresorhus@gmail.com https://sindresorhus.com |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.3 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.60.4 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.12.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## themes\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ------- | ------------------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @eslint/eslintrc | MIT | 3.3.5 | Nicholas C. Zakas |\n| @eslint/js | MIT | 9.39.4 | n/a |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| @typescript-eslint/eslint-plugin | MIT | 8.58.2 | n/a |\n| @typescript-eslint/parser | MIT | 8.58.2 | n/a |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cpy-cli | MIT | 7.0.0 | Sindre Sorhus sindresorhus@gmail.com https://sindresorhus.com |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.3 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.60.4 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n\n## tools-kolibri-cli\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ------- | -------------------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| eslint-plugin-html | ISC | 8.1.4 | n/a |\n| knip | ISC | 6.14.2 | Lars Kappert lars@webpro.nl |\n| semver | ISC | 7.8.1 | GitHub Inc. |\n| @eslint/js | MIT | 9.39.4 | n/a |\n| @types/node | MIT | 25.9.1 | n/a |\n| @types/semver | MIT | 7.7.1 | n/a |\n| @typescript-eslint/eslint-plugin | MIT | 8.58.2 | n/a |\n| @typescript-eslint/parser | MIT | 8.58.2 | n/a |\n| chalk | MIT | 5.6.2 | n/a |\n| commander | MIT | 14.0.3 | TJ Holowaychuk |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| deepmerge | MIT | 4.3.1 | n/a |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| eslint-plugin-jsx-a11y | MIT | 6.10.2 | Ethan Cohen |\n| gradient-string | MIT | 3.0.0 | Boris K |\n| loglevel | MIT | 1.9.2 | Tim Perry pimterry@gmail.com http://tim-perry.co.uk |\n| mocha | MIT | 11.7.6 | TJ Holowaychuk |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| prettier | MIT | 3.8.3 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| ts-node | MIT | 10.9.2 | Blake Embrey hello@blakeembrey.com http://blakeembrey.me |\n| typed-bem | MIT | 1.0.2 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n\n## tools-mcp\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------------------- | ------- | ------------------------------------------------------------- |\n| fuse.js | Apache-2.0 | 7.4.0 | Kiro Risk kirollos@gmail.com http://kiro.me |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.2.0 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| knip | ISC | 6.14.2 | Lars Kappert lars@webpro.nl |\n| @eslint/js | MIT | 9.39.4 | n/a |\n| @modelcontextprotocol/sdk | MIT | 1.29.0 | Anthropic, PBC (https://anthropic.com) |\n| @types/express | MIT | 5.0.6 | n/a |\n| @types/node | MIT | 25.9.1 | n/a |\n| @typescript-eslint/eslint-plugin | MIT | 8.58.2 | n/a |\n| @typescript-eslint/parser | MIT | 8.58.2 | n/a |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| eslint-plugin-json | MIT | 4.0.1 | Azeem Bande-Ali |\n| express | MIT | 5.2.1 | TJ Holowaychuk |\n| globals | MIT | 17.6.0 | Sindre Sorhus sindresorhus@gmail.com https://sindresorhus.com |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| prettier | MIT | 3.8.3 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| tsx | MIT | 4.22.3 | Hiroki Osame hiroki.osame@gmail.com |\n| unbuild | MIT | 3.6.1 | n/a |\n| zod | MIT | 4.4.3 | Colin McDonnell |\n| @modelcontextprotocol/inspector | SEE LICENSE IN LICENSE | 0.21.2 | Model Context Protocol a Series of LF Projects, LLC. |\n\n## tools-visual-tests\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ------- | ------------------------------------------------------------- |\n| @playwright/test | Apache-2.0 | 1.60.0 | Microsoft Corporation |\n| @public-ui/sample-react | EUPL-1.2 | 4.2.0 | n/a |\n| knip | ISC | 6.14.2 | Lars Kappert lars@webpro.nl |\n| @eslint/js | MIT | 9.39.4 | n/a |\n| axe-html-reporter | MIT | 2.2.11 | Liliia Pelypenko (liliia.pelypenko@gmail.com) |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| globals | MIT | 17.6.0 | Sindre Sorhus sindresorhus@gmail.com https://sindresorhus.com |\n| http-server | MIT | 14.1.1 | n/a |\n| portfinder | MIT | 1.0.38 | Charlie Robbins |\n| prettier | MIT | 3.8.3 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| @axe-core/playwright | MPL-2.0 | 4.11.3 | n/a |\n",
400
+ "code": "# License Reports\n\n> Overview of licenses for all packages in Kolibri.\n\n## adapter-angular-v19\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| rxjs | Apache-2.0 | 7.8.2 | Ben Lesh |\n| typescript | Apache-2.0 | 5.8.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @angular/common | MIT | 19.2.25 | angular |\n| @angular/compiler | MIT | 19.2.25 | angular |\n| @angular/compiler-cli | MIT | 19.2.25 | n/a |\n| @angular/core | MIT | 19.2.21 | angular |\n| @angular/core | MIT | 19.2.21 | angular |\n| zone.js | MIT | 0.15.1 | Brian Ford |\n\n## adapter-angular-v20\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| rxjs | Apache-2.0 | 7.8.2 | Ben Lesh |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @angular/common | MIT | 20.3.25 | angular |\n| @angular/compiler | MIT | 20.3.20 | angular |\n| @angular/compiler-cli | MIT | 20.3.20 | n/a |\n| @angular/core | MIT | 20.3.20 | angular |\n| @angular/core | MIT | 20.3.20 | angular |\n| zone.js | MIT | 0.15.1 | Brian Ford |\n\n## adapter-angular-v21\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| rxjs | Apache-2.0 | 7.8.2 | Ben Lesh |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @angular/common | MIT | 21.2.17 | angular |\n| @angular/compiler | MIT | 21.2.12 | angular |\n| @angular/compiler-cli | MIT | 21.2.12 | n/a |\n| @angular/core | MIT | 21.2.12 | angular |\n| @angular/core | MIT | 21.2.12 | angular |\n| zone.js | MIT | 0.16.2 | Brian Ford |\n\n## adapter-hydrate\n\n| Package | License | Version | Author |\n| -------------------------------- | ------------- | ---------- | -------------------------------------------------- |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| chai | MIT | 6.2.2 | Jake Luer |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| mocha | MIT | 11.7.5 | TJ Holowaychuk |\n| mocha-snapshots | MIT | 4.2.0 | Wellington Guimaraes |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n\n## adapter-preact\n\n| Package | License | Version | Author |\n| --------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| preact | MIT | 10.29.1 | n/a |\n| react | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-react\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @types/react | MIT | 18.3.31 | n/a |\n| @types/react-dom | MIT | 18.3.7 | n/a |\n| react | MIT | 18.3.1 | n/a |\n| react | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-react-standalone\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | ------------------------------------------------------------- |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| cpy-cli | MIT | 7.0.0 | Sindre Sorhus sindresorhus@gmail.com https://sindresorhus.com |\n| react | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| webpack | MIT | 5.107.2 | Tobias Koppers @sokra |\n| webpack-cli | MIT | 6.0.1 | n/a |\n\n## adapter-solid\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| solid-js | MIT | 1.9.12 | Ryan Carniato |\n| solid-js | MIT | 1.9.12 | Ryan Carniato |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-svelte\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @babel/types | MIT | 7.29.7 | The Babel Team (https://babel.dev/team) |\n| svelte | MIT | 5.55.7 | n/a |\n| svelte | MIT | 5.55.7 | n/a |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-vue\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @babel/types | MIT | 7.29.7 | The Babel Team (https://babel.dev/team) |\n| unbuild | MIT | 3.6.1 | n/a |\n| vue | MIT | 3.5.34 | Evan You |\n| vue | MIT | 3.5.34 | Evan You |\n\n## components\n\n| Package | License | Version | Author |\n| ---------------------------------------- | ------------- | ----------- | -------------------------------------------------------------- |\n| @playwright/test | Apache-2.0 | 1.60.0 | Microsoft Corporation |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| terser | BSD-2-Clause | 5.48.0 | Mihai Bazon |\n| twig | BSD-2-Clause | 3.0.0 | John Roepke |\n| wcag-contrast | BSD-2-Clause | 3.0.0 | Tom MacWright |\n| adopted-style-sheets | EUPL-1.2 | 1.1.9-rc.22 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| stencil-awesome-test | EUPL-1.2 | 1.0.6 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| knip | ISC | 6.16.1 | Lars Kappert lars@webpro.nl |\n| @floating-ui/dom | MIT | 1.7.6 | atomiks |\n| @public-ui/stencil-angular-output-target | MIT | 0.9.0 | n/a |\n| @public-ui/stencil-react-output-target | MIT | 0.6.0 | n/a |\n| @public-ui/stencil-solid-output-target | MIT | 0.2.0 | Ionic Team |\n| @public-ui/stencil-vue-output-target | MIT | 0.9.0 | n/a |\n| @revolist/svelte-output-target | MIT | 0.0.7 | Ionic Team |\n| @stencil-community/postcss | MIT | 2.2.0 | Ionic Team |\n| @stencil/core | MIT | 4.38.3 | Ionic Team |\n| @stencil/playwright | MIT | 0.4.3 | Stencil Team |\n| @stencil/sass | MIT | 3.2.3 | Ionic Team |\n| @types/color-convert | MIT | 2.0.4 | n/a |\n| @types/jest | MIT | 29.5.14 | n/a |\n| @types/lodash-es | MIT | 4.17.12 | n/a |\n| @types/markdown-it | MIT | 14.1.2 | n/a |\n| @types/mustache | MIT | 4.2.6 | n/a |\n| @types/pug | MIT | 2.0.10 | n/a |\n| @types/twig | MIT | 1.12.17 | n/a |\n| @types/wcag-contrast | MIT | 3.0.3 | n/a |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| color-convert | MIT | 3.1.3 | Josh Junon |\n| color-rgba | MIT | 2.4.0 | Dmitry Yv |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| cssnano | MIT | 8.0.2 | Ben Briggs beneb.info@gmail.com http://beneb.info |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| eslint-plugin-perfectionist | MIT | 5.9.0 | Azat S. |\n| jest | MIT | 29.7.0 | n/a |\n| jest-cli | MIT | 29.7.0 | n/a |\n| lodash-es | MIT | 4.18.1 | John-David Dalton |\n| markdown-it | MIT | 14.2.0 | n/a |\n| mustache | MIT | 4.2.0 | mustache.js Authors |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| postcss-sorting | MIT | 10.0.0 | Aleks Hudochenkov |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| pug | MIT | 3.0.4 | TJ Holowaychuk |\n| rgba-convert | MIT | 0.3.0 | jeromedecoster |\n| stylelint | MIT | 17.13.0 | stylelint |\n| typed-bem | MIT | 1.0.2 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## icons\n\n| Package | License | Version | Author |\n| ---------------- | ------------- | ------- | ------------------ |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| http-server | MIT | 14.1.1 | n/a |\n| oslllo-svg-fixer | MIT | 6.0.1 | Ghustavh Ehm |\n| svgtofont | MIT | 6.5.2 | Kenny |\n\n## root\n\n| Package | License | Version | Author |\n| --------------------------------- | ---------- | ------- | ------------------------------------------------- |\n| npm-check-updates | Apache-2.0 | 22.2.3 | Tomas Junnonen |\n| @evilmartians/lefthook | MIT | 2.1.9 | mrexox |\n| license-report | MIT | 6.8.5 | BePo65 |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| stylelint | MIT | 17.13.0 | stylelint |\n| stylelint-config-recommended-scss | MIT | 17.0.1 | kristerkari |\n| stylelint-config-standard | MIT | 40.0.0 | Stylelint |\n| stylelint-order | MIT | 8.1.1 | Aleks Hudochenkov |\n| stylelint-scss | MIT | 7.2.0 | Krister Kari |\n\n## sample-react\n\n| Package | License | Version | Author |\n| ---------------------------------- | ----------------- | ----------- | -------------------------------------------------------------- |\n| tslib | 0BSD | 2.8.1 | Microsoft Corp. |\n| @lhci/cli | Apache-2.0 | 0.15.1 | n/a |\n| @playwright/test | Apache-2.0 | 1.60.0 | Microsoft Corporation |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react-hook-form-adapter | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react-v19 | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/themes | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| adopted-style-sheets | EUPL-1.2 | 1.1.9-rc.22 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| knip | ISC | 6.16.1 | Lars Kappert lars@webpro.nl |\n| world_countries_lists | LGPL-3.0-or-later | 3.3.0 | Stefan Gabos |\n| @hookform/resolvers | MIT | 5.4.0 | bluebill1049 |\n| @stencil/core | MIT | 4.38.3 | Ionic Team |\n| @types/node | MIT | 25.9.3 | n/a |\n| @types/papaparse | MIT | 5.5.2 | n/a |\n| @types/react | MIT | 19.2.17 | n/a |\n| @types/react-dom | MIT | 19.2.3 | n/a |\n| @unocss/preset-mini | MIT | 66.7.2 | Anthony Fu |\n| @unocss/vite | MIT | 66.7.2 | Anthony Fu |\n| @vitejs/plugin-react-swc | MIT | 4.3.1 | Arnaud Barré (https://github.com/ArnaudBarre) |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| http-server | MIT | 14.1.1 | n/a |\n| papaparse | MIT | 5.5.3 | Matthew Holt https://twitter.com/mholt6 |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| react | MIT | 19.2.7 | n/a |\n| react-dom | MIT | 19.2.7 | n/a |\n| react-hook-form | MIT | 7.79.0 | Beier(Bill) Luo |\n| react-number-format | MIT | 5.4.5 | Sudhanshu Yadav |\n| react-router | MIT | 7.17.0 | Remix Software |\n| react-router-dom | MIT | 7.17.0 | Remix Software |\n| stylelint | MIT | 17.13.0 | stylelint |\n| vite | MIT | 7.3.5 | Evan You |\n| zod | MIT | 4.4.3 | Colin McDonnell |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n\n## theme-bwst\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.13.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-default\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.13.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-desy\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.13.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-ecl\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.13.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-kern\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @kern-ux/native | EUPL-1.2 | 2.3.0 | Kern-UX |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.13.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## themes\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | ------------------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar Segersvärd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cpy-cli | MIT | 7.0.0 | Sindre Sorhus sindresorhus@gmail.com https://sindresorhus.com |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n\n## tools-kolibri-cli\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| knip | ISC | 6.16.1 | Lars Kappert lars@webpro.nl |\n| semver | ISC | 7.8.4 | GitHub Inc. |\n| @types/node | MIT | 25.9.3 | n/a |\n| @types/semver | MIT | 7.7.1 | n/a |\n| chalk | MIT | 5.6.2 | n/a |\n| commander | MIT | 14.0.3 | TJ Holowaychuk |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| deepmerge | MIT | 4.3.1 | n/a |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| gradient-string | MIT | 3.0.0 | Boris K |\n| loglevel | MIT | 1.9.2 | Tim Perry pimterry@gmail.com http://tim-perry.co.uk |\n| mocha | MIT | 11.7.6 | TJ Holowaychuk |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| ts-node | MIT | 10.9.2 | Blake Embrey hello@blakeembrey.com http://blakeembrey.me |\n| typed-bem | MIT | 1.0.2 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n\n## tools-mcp\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------------------- | ---------- | ---------------------------------------------------- |\n| fuse.js | Apache-2.0 | 7.4.2 | Kiro Risk kirollos@gmail.com http://kiro.me |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| knip | ISC | 6.16.1 | Lars Kappert lars@webpro.nl |\n| @modelcontextprotocol/sdk | MIT | 1.29.0 | Anthropic, PBC (https://anthropic.com) |\n| @types/express | MIT | 5.0.6 | n/a |\n| @types/node | MIT | 25.9.3 | n/a |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| express | MIT | 5.2.1 | TJ Holowaychuk |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| tsx | MIT | 4.22.4 | Hiroki Osame hiroki.osame@gmail.com |\n| unbuild | MIT | 3.6.1 | n/a |\n| zod | MIT | 4.4.3 | Colin McDonnell |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @modelcontextprotocol/inspector | SEE LICENSE IN LICENSE | 0.22.0 | Model Context Protocol a Series of LF Projects, LLC. |\n\n## tools-visual-tests\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | ------------------------------------------------- |\n| @playwright/test | Apache-2.0 | 1.60.0 | Microsoft Corporation |\n| @public-ui/sample-react | EUPL-1.2 | 4.3.0-rc.1 | n/a |\n| knip | ISC | 6.16.1 | Lars Kappert lars@webpro.nl |\n| axe-html-reporter | MIT | 2.2.11 | Liliia Pelypenko (liliia.pelypenko@gmail.com) |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| http-server | MIT | 14.1.1 | n/a |\n| portfinder | MIT | 1.0.38 | Charlie Robbins |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| @axe-core/playwright | MPL-2.0 | 4.11.3 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n",
393
401
  "kind": "doc"
394
402
  },
395
403
  {
@@ -440,6 +448,14 @@
440
448
  "code": "# Welcome to KoliBri\n\n[![npm](https://img.shields.io/npm/v/@public-ui/components)](https://www.npmjs.com/package/@public-ui/components)\n[![license](https://img.shields.io/npm/l/@public-ui/components)](https://github.com/public-ui/kolibri/blob/main/LICENSE)\n[![downloads](https://img.shields.io/npm/dt/@public-ui/components)](https://www.npmjs.com/package/@public-ui/components)\n[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)\n[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)\n[![size](https://img.shields.io/bundlephobia/min/@public-ui/components)](https://bundlephobia.com/result?p=@public-ui/components)\n![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)\n\n> \"The accessible HTML standard\"\n\nKoliBri is **not a design system** in the traditional sense. Rather, we extend the HTML5 standard with self-contained, accessible Web Components — new HTML elements that work independently from any design or branding. These atomic components form a foundation that any design library, framework, or style guide can reuse and theme according to their needs.\n\n**KoliBri** stands for \"component library for accessibility\" and was released as\nopen source by the\n[Informationstechnikzentrum Bund (ITZBund)](https://itzbund.de) for reuse and\ncontinued development.\n\n## Vision\n\nTogether we make **HTML** accessible using **reusable web components** to ensure **usability** and **accessibility**.\n\n## Mission\n\nThe [HTML web standard](https://html.spec.whatwg.org) is itself very “openly” specified in order to be as long-lasting and robust as possible. It therefore often happens that HTML compositions are not easily accessible, semantic and valid.\n\nKoliBri is based directly on the [Web standards](https://www.w3.org/standards/webdesign/) of the [W3C](https://www.w3.org) (framework-agnostic), and is generic Reference implementation of the [WCAG standard](https://www.w3.org/WAI/standards-guidelines/wcag/) and the [BITV](https://www.bitvtest.de/bitv_test.html) for accessibility and implemented as a multi-theming capable presentation layer. There is no technical reference and no data transfer functionality. This means that KoliBri is equally reusable for the realization of static websites as well as dynamic web applications with different corporate designs and style guides and is therefore very interesting for open source.\n\n## Roadmap\n\nKoliBri is always actively working on improvements, new features and future-oriented innovations for the latest major release. In parallel, a selected LTS release is maintained with regard to bug fixes.\n\n| Version | Release type | Release | Period | End-of-Support |\n| ------: | :----------: | :------: | :----: | :------------: |\n| 0.x | Initial | Jul 2020 | - | Dec 2021 |\n| 1.x | LTS | Dec 2021 | 3y | Dec 2024 |\n| 2.x | LTS | Dec 2023 | 3y | Dec 2026 |\n| 3.x | STS | Dec 2024 | 15m | Mar 2026 |\n| 4.x | LTS | Dec 2025 | 3y | Dec 2028 |\n| 5.x | STS | Dec 2026 | 15m | Mar 2028 |\n\n```mermaid\ngantt\n title LTS & STS\n dateFormat YYYY-MM-DD\n\n 0.x Initial implementation :, 2020-07-01, 17M\n 1.x (LTS) :, 2021-12-01, 3y\n 2.x (LTS) :, 2023-12-01, 3y\n 3.x (STS) :crit , 2024-12-01, 15M\n 4.x (LTS) :, 2025-12-01, 3y\n 5.x (STS) :crit , 2026-12-01, 15M\n 6.x (LTS) :, 2027-12-01, 3y\n\n```\n\n## Installation\n\nInstall the packages with [pnpm](https://pnpm.io):\n\n```bash\npnpm install\n```\n\nRun the build once to generate the components:\n\n```bash\npnpm -r build\n```\n\n### Quick start\n\nInstall the default theme and register the components:\n\n```ts\npnpm add @public-ui/components @public-ui/theme-default\n\nimport { register } from '@public-ui/components';\nimport { defineCustomElements } from '@public-ui/components/loader';\nimport { DEFAULT } from '@public-ui/theme-default';\n\nregister(DEFAULT, defineCustomElements);\n```\n\n### Avoid CSS Custom Property Collisions\n\nKoliBri themes expose a few CSS custom properties so consumers can adapt the look and feel.\nBecause these properties remain global—even inside a Shadow DOM—using too many of them can\nclash with variables defined on the host page.\n\nUse namespaced custom properties only for values that must be overridden from the outside.\nFor internal calculations rely on SASS variables instead of additional CSS properties.\nThis keeps components robust and prevents unexpected style leaks.\n\n## Collaboration and cooperation\n\nThe **focus** of KoliBri is on **small** (atomic), very **flexible** and highly **reusable** HTML compositions (e.g. buttons). We offer an accessible, semantic and valid standard implementation of such components that can be reused for any higher-level HTML structure or component (molecule, organism or template).\nThese atomic components are where we should **collaborate** and **cooperate** to combine our skills and knowledge. The synergy effects on the basic components allow you to focus more on subject-specific content.\n\nLet's make KoliBri **better** and **more colorful** together!\n\n> Continue [to **Documentation**](https://public-ui.github.io/en/)…\n\n## Contributing\n\nBug reports and pull requests are welcome. Please read our [contribution guide](./CONTRIBUTING.md) before getting started.\n\n## SLSA/Provenance\n\nWe aim for **SLSA Build Level 3** for the npm packages published from this repository. Releases are built in GitHub Actions with OIDC-based identity and published with npm provenance (`--provenance`), producing verifiable attestations for the published artifacts. See the [publish workflow](./.github/workflows/publish.yml) for the release steps and npm provenance configuration.\n\n**Verification example**\n\n```bash\n# Inspect provenance metadata for a published package\npnpm view @public-ui/components dist.provenance\n\n# (Optional) Verify signatures/provenance if your npm client supports it\npnpm audit signatures --package=@public-ui/components@<version>\n```\n\n## Resources\n\n- [Get Started](https://public-ui.github.io/en/docs/get-started/first-steps)\n- [Contributing](./CONTRIBUTING.md)\n- [Code of Conduct](./CODE_OF_CONDUCT.md)\n- [Known Issues](http://public-ui.github.io/en/docs/known-issues)\n- [Security](./docs/SECURITY.md)\n",
441
449
  "kind": "doc"
442
450
  },
451
+ {
452
+ "id": "doc/RENOVATE",
453
+ "group": "docs",
454
+ "name": "RENOVATE",
455
+ "path": "docs/RENOVATE.md",
456
+ "code": "# Renovate — Automated Dependency Updates\n\nThis document is the outcome of issue [#10270](https://github.com/public-ui/kolibri/issues/10270)\n(_renovate vs npm-check-updates vs dependabot_). It contains:\n\n1. a comparison of the three candidate tools,\n2. a description of the exemplary [`renovate.json`](../renovate.json) that ships with this repo,\n3. how to enable Renovate, and\n4. the migration checklist for retiring the current tooling.\n\n> **Status:** The `renovate.json` and a self-hosted runner workflow\n> ([`.github/workflows/renovate.yml`](../.github/workflows/renovate.yml)) are committed as an\n> **exemplary, ready-to-run setup**. Renovate stays **idle** until that workflow runs — either on its\n> weekly schedule or via the manual **Run workflow** button (see [Enabling Renovate](#enabling-renovate)).\n> Until then the existing Dependabot + npm-check-updates automation stays in charge.\n\n---\n\n## 1. Tool comparison\n\nKoliBri is a **pnpm-workspace monorepo** with 30+ packages, several intentionally pinned major\nlines (Angular `v19`/`v20`/`v21`, React 18/19, Stencil 4, ESLint 9) and four maintained branches\n(`develop`, `release/3`, `release/2`, `release/1`). That shapes the comparison:\n\n| Capability | **Renovate** | Dependabot | npm-check-updates (ncu) |\n| -------------------------------------------- | :----------------------: | :---------------------------------: | :-----------------------: |\n| pnpm-workspace aware | ✅ native | ⚠️ partial | ❌ manual (per-package) |\n| One PR grouping related packages | ✅ fully configurable | ⚠️ `groups:` only | ❌ none |\n| Hold a package on a specific major line | ✅ per-folder rules | ⚠️ `ignore` (global) | ⚠️ `-x` exclude (global) |\n| GitHub Actions updates | ✅ | ✅ | ❌ |\n| Lockfile-only refresh | ✅ `lockFileMaintenance` | ⚠️ limited | ❌ (needs `pnpm install`) |\n| Automerge (per update type) | ✅ | ⚠️ limited | ❌ |\n| Multi-base-branch (release/\\*) support | ✅ `baseBranchPatterns` | ✅ `target-branch` (one entry each) | ⚠️ matrix in a workflow |\n| Security / vulnerability remediation | ✅ OSV + GitHub alerts | ✅ GitHub alerts | ❌ |\n| Dependency Dashboard (single overview issue) | ✅ | ❌ | ❌ |\n| Schedule / batching | ✅ | ⚠️ basic | ⚠️ via cron workflow |\n| Self-hostable (no third-party app) | ✅ (official Action) | ✅ (GitHub-native) | ✅ (CLI) |\n| Config surface | medium | low | minimal |\n| Cost for open source | free | free | free |\n\n### Verdict\n\n- **Renovate — recommended.** It is the only option that models KoliBri's reality in _one_ config:\n group the Angular/React/Stencil families, hold each adapter folder on its pinned major, automerge\n the safe stuff (GitHub Actions, `@types/*`), and route everything risky to a review queue (the\n Dependency Dashboard). It also folds in what we currently split across **two** systems\n (Dependabot for Actions + a daily `ncu` workflow for npm).\n- **Dependabot — viable fallback.** Now supports `groups:`, but every package directory needs its\n own `updates:` entry (≈30 for this monorepo × 4 branches) and it cannot hold a dependency on a\n specific major _per folder_ — exactly what the `angular/v19|v20|v21` and `react*` adapters need.\n- **npm-check-updates — not an automation tool.** It is a CLI that rewrites version ranges; it has\n no PR/grouping/scheduling of its own. We only use it _inside_ a hand-written workflow\n (`.github/workflows/auto-dependency-updater.yml`). Renovate makes that workflow redundant.\n\n---\n\n## 2. What the exemplary `renovate.json` does\n\nThe committed [`renovate.json`](../renovate.json) is tailored to this repo. Highlights:\n\n### Global behaviour\n\n- **`extends: [\"config:recommended\", \"security:openssf-scorecard\"]`** — sensible defaults plus\n OpenSSF Scorecard badges on PRs.\n- **Conventional Commits** — `chore(deps): …` titles so PRs pass `pr-title-validation.yml`.\n- **`labels: [\"dependencies\", \"renovate\", \"release:engineering\"]`** — the `release:*` label is\n **required** by `pr-release-label-validation.yml`; `release:engineering` files dependency PRs\n under _🔧 Engineering_ in the changelog (see `.github/release.yml`).\n- **Weekly schedule** (`before 6am on monday`, `Europe/Berlin`) with `prConcurrentLimit: 10` /\n `prHourlyLimit: 4` so the first run does **not** flood the repo with PRs.\n- **`baseBranchPatterns`** — runs on `develop` **and** `release/3|2|1`; the maintenance branches are\n restricted to security + patch npm updates so released majors stay stable.\n- **`lockFileMaintenance`** — weekly `pnpm-lock.yaml` refresh (replaces the manual\n `04 - Update pnpm Lock` workflow runs).\n- **`postUpdateOptions: [\"pnpmDedupe\"]`** — keeps the pnpm lockfile tidy.\n\n### Grouping & guard-rails (the important part for this monorepo)\n\n| Rule | Effect |\n| ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **All majors** | Require manual approval via the Dependency Dashboard — KoliBri pins majors deliberately. |\n| **Angular `@angular/*`, `zone.js`, `ng-packagr`** | Major updates **disabled** entirely; within-major updates grouped per adapter folder (_Angular 19/20/21_). A new Angular major = a new adapter folder, never an auto-bump. |\n| **React `react`, `react-dom`, `@types/react*`** | Major updates **disabled**; within-major React updates of the `react*` adapters grouped and reviewed (not automerged). |\n| **Stencil `@stencil/*`, `@stencil-community/*`** | **All** updates require dashboard approval — every 4.39+ release currently breaks the Popover API, tooltips and visual tests (see [`UPGRADEABLE_DEPENDENCIES.md`](./UPGRADEABLE_DEPENDENCIES.md)). |\n| **`@kern-ux/*`** | Dashboard approval only — upgraded by hand together with theming work. |\n| **`@typescript-eslint/*`, ESLint core + plugins** | Minor/major require approval (9 → 10 is a breaking migration). |\n| **`jest*`, `typescript`** | Majors/non-patch require approval. |\n| **`github-actions`, `@types/*`** | Grouped **and automerged** for low-risk update types. |\n| **Stylelint, Playwright** | Grouped into single PRs. |\n\n> The pins above mirror exactly what the current `ncu:*` scripts exclude\n> (`@kern-ux/*`, `@stencil/*`, `@typescript-eslint/*`) and what `UPGRADEABLE_DEPENDENCIES.md`\n> documents as breaking — so behaviour is preserved, just expressed declaratively.\n\n### Validate the config locally\n\n```sh\nnpx --yes --package renovate renovate-config-validator renovate.json\n```\n\n---\n\n## 3. Enabling Renovate\n\nTwo ways to run it; **this repo is wired for Option A**.\n\n### Option A — Self-hosted via GitHub Actions (committed in this repo)\n\nThis repo ships [`.github/workflows/renovate.yml`](../.github/workflows/renovate.yml). It runs Renovate\non a weekly schedule (Mondays 04:00 UTC) **and** on demand via the **Run workflow** button\n(`workflow_dispatch`, with an optional `dry_run` preview). It authenticates through the existing GitHub\nApp (`APP_ID` / `PRIVATE_KEY` secrets, shared with _04 - Update pnpm Lock_).\n\nTo activate it:\n\n1. Ensure that GitHub App installation grants **contents: write**, **pull-requests: write**,\n **issues: write** (for the Dependency Dashboard) and **workflows: write** (so the `github-actions`\n manager may update `.github/workflows/*`). _Alternative:_ replace the app-token step with a\n `RENOVATE_TOKEN` PAT/fine-grained token carrying the same scopes.\n2. Trigger the workflow once via **Run workflow** (optionally with `dry_run` enabled) to verify it, then\n let the weekly schedule take over.\n\n> **Tip:** The `dry_run` input maps to `RENOVATE_DRY_RUN=full`, so the first manual run previews every PR\n> Renovate _would_ open without creating anything.\n\n### Option B — Mend-hosted GitHub App (alternative, zero maintenance)\n\nIf you would rather not self-host, delete `.github/workflows/renovate.yml` and instead:\n\n1. Have an **org admin** install the [Renovate GitHub App](https://github.com/apps/renovate) on\n `public-ui` (or just on `public-ui/kolibri`).\n2. Renovate detects `renovate.json` and opens a Dependency Dashboard issue.\n3. Review the dashboard, then let it run on the weekly schedule.\n\n---\n\n## 4. Migration checklist (do this only after Renovate is verified)\n\nOnce Renovate runs green for a cycle, retire the overlapping automation to avoid **duplicate PRs**:\n\n- [ ] Remove `.github/dependabot.yml` (Renovate now manages GitHub Actions — see the\n `github-actions` group).\n- [ ] Remove `.github/workflows/auto-dependency-updater.yml` (the daily `ncu` PR job).\n- [ ] Drop the `ncu:*` / `update` scripts and the `npm-check-updates` devDependency from the root\n `package.json`, plus `.ncurc.json` (optional — `ncu` is still handy for manual ad-hoc checks).\n- [ ] Keep `04 - Update pnpm Lock` if you still want a manual lockfile-refresh button; otherwise\n Renovate's `lockFileMaintenance` covers it.\n\nUntil every box is ticked, **leave the existing tooling in place** — Renovate only acts once the\nworkflow (or app) from [§3](#3-enabling-renovate) actually runs, so there is no conflict in the meantime.\n\n---\n\n## 🇩🇪 Zusammenfassung\n\n**Empfehlung: Renovate.** Es ist die einzige Lösung, die das KoliBri-Monorepo in _einer_ Konfiguration\nabbildet — verwandte Pakete gruppieren (z. B. alle `@angular/*`), jeden Adapter-Ordner auf seiner\nfixierten Major-Version halten (`angular/v19|v20|v21`, `react*`), sichere Updates automatisch mergen\n(GitHub Actions, `@types/*`) und alles Riskante (Stencil, kern-ux, ESLint-/Angular-Majors) über das\n**Dependency Dashboard** zur manuellen Freigabe leiten.\n\n- **Dependabot** kann zwar gruppieren, braucht aber pro Paketverzeichnis einen eigenen Eintrag\n (≈30 × 4 Branches) und kann ein Paket nicht _pro Ordner_ auf einer Major-Version halten.\n- **npm-check-updates** ist nur ein CLI ohne eigene Automatisierung (läuft heute im Workflow\n `auto-dependency-updater.yml`).\n\nDie fertige [`renovate.json`](../renovate.json) liegt im Repo-Root (geprüft mit dem offiziellen\n`renovate-config-validator`), und der self-hosted Runner-Workflow\n[`.github/workflows/renovate.yml`](../.github/workflows/renovate.yml) ist ebenfalls committet.\n**Renovate läuft**, sobald der Workflow startet — wöchentlich per Zeitplan oder manuell über den\n**Run workflow**-Button (Option A); alternativ kann ein Org-Admin die\n[Renovate-GitHub-App](https://github.com/apps/renovate) installieren (Option B). Bis dahin bleibt die\nbestehende Dependabot-/ncu-Automatisierung zuständig; danach greift die Migrations-Checkliste oben.\n",
457
+ "kind": "doc"
458
+ },
443
459
  {
444
460
  "id": "doc/SECURITY",
445
461
  "group": "docs",
@@ -453,7 +469,7 @@
453
469
  "group": "docs",
454
470
  "name": "SKELETON_AUDIT_REPORT",
455
471
  "path": "SKELETON_AUDIT_REPORT.md",
456
- "code": "# Skeleton Implementation Audit Report\n\n**Datum:** 2026-06-02 \n**Status:** 🚫 Build-Blockade erkannt (Phase 0) — Audit trotzdem vollständig durchgeführt \n**Umfang:** Alle Skeleton-bezogenen Implementierungen \n**Effort:** High (systematische Analyse aller Komponenten)\n\n---\n\n## Executive Summary\n\n### Übersicht\n\nDie Skeleton-Implementierungen im Projekt folgen einem **konsistenten Pattern**, sind aber durch mehrere **Mängel** gekennzeichnet:\n\n**Gefundene Implementierungen:**\n1. `_skeleton/web-components/skeleton/` — Template-Komponente (KolSkeleton)\n2. `_skeleton/web-components/click-button/` — Button-Komponente im Template\n3. `internal/functional-components/skeleton/` — Skeleton FC + Controller\n4. `internal/functional-components/click-button/` — ClickButton FC + Controller\n\n**Build-Status (Phase 0):** 🚫 **BLOCKADE**\n- TypeScript-Fehler in `KolFocusOptions` ↔ native `FocusOptions` (systemisch)\n- Build bricht — verhindert Validierung auf echtem Build\n\n**Konsistenz-Grade:**\n- ✅ **Hoch:** Controller-Pattern, Props-Handling, JSDoc-Struktur\n- 🟡 **Mittel:** Event-Propagation, Type-Safety, Error-Handling\n- 🚫 **Niedrig:** Memory-Leak-Risiken, Testing-Abdeckung, Focus-Management\n\n---\n\n## 🔍 Detaillierte Analysen\n\n### 1. KolSkeleton Component (`_skeleton/web-components/skeleton/component.tsx`)\n\n**Dateipfad:** `/packages/components/src/components/_skeleton/web-components/skeleton/component.tsx`\n\n#### ✅ Stärken\n- Korrekte Stencil-Dekoration (`@Component`, `@Prop`, `@Event`, `@Method`, `@Listen`, `@Watch`)\n- JSDoc-Kommentare auf allen `@Prop`, `@Event`, `@Method` vorhanden\n- Korrektes Lifecycle-Pattern (componentWillLoad, componentDidLoad, disconnectedCallback)\n- Typsicher: `SkeletonApi` zentral definiert\n\n#### 🔴 Critical Issues\n\n**1. Fehlerhafte Focus-Delegation (Line 22)**\n```typescript\n@Method()\n@ctrlFocus('ctrl')\npublic async focus(options?: KolFocusOptions): Promise<void> {}\n```\n**Problem:**\n- `@ctrlFocus` Decorator wird verwendet, aber `delegateFocus` ist der aktuelle Standard (lt. memory: focus-delegation-pattern.md)\n- `KolFocusOptions` ist nicht kompatibel mit nativer `FocusOptions` → **Build-Blockade**\n- Decorator-Pattern sollte `delegateFocus('ref')` sein (wie in ClickButton)\n\n**Priorität:** 🔴 **HIGH** (Breaking + systemisch) \n**Fix:** Focus-Methode korrekt implementieren wie in `ClickButton`\n\n**2. Memory Leak durch `.bind(this)` in handleClick (Line 59)**\n```typescript\n@Listen('keydown')\npublic handleKeyDown(event: KeyboardEvent): void {\n // ...\n this.ctrl.handleClick(); // ✅ OK — direkt, kein .bind()\n}\n```\n**Positive Beobachtung:** KolSkeleton nutzt `this.ctrl.handleClick()` korrekt (kein `.bind()`).\n\n**3. Fehlende Error-Handling bei Event-Emits (Lines 84-86)**\n```typescript\nthis.ctrl.setOnLoadedCallback((count: number) => {\n this.loaded.emit(count); // Kein try-catch\n});\n```\n**Problem:** Wenn `emit()` wirft → Component crashed still. \n**Priorität:** 🟡 **MEDIUM** \n**Fix:** `try-catch` um Event-Emission oder defensive Implementierung\n\n**4. Window-Listener ohne Cleanup (Line 73-76)**\n```typescript\n@Listen('keydown', { target: 'window' })\npublic onKeydown(event: KeyboardEvent): void {\n this.ctrl.onKeydown(event);\n}\n```\n**Problem:** `@Listen` mit `target: 'window'` wird automatisch von Stencil bereinigt, aber **dokumentation fehlt**. \n**Priorität:** 🟡 **MEDIUM** (Doku-Mangel) \n**Fix:** JSDoc-Kommentar: \"Auto-cleaned by Stencil\"\n\n#### 🟡 High Issues\n\n**5. Type-Assertion in SkeletonFC Props (Line 105)**\n```typescript\nname={this.ctrl.getRenderProp('name')} // ✅ Typsicher\n```\n**Status:** OK — keine Assertions.\n\n**6. Fehlende JSDoc auf State-Feldern (Lines 46-53)**\n```typescript\n@State()\npublic count: number = 0;\n\n@State()\npublic label: string = 'Label';\n```\n**Problem:** State-Felder ohne JSDoc, obwohl sie durch Events exponiert werden. \n**Priorität:** 🟡 **MEDIUM** \n**Fix:** JSDoc-Kommentare hinzufügen\n\n---\n\n### 2. KolClickButton Component (`_skeleton/web-components/click-button/component.tsx`)\n\n**Dateipfad:** `/packages/components/src/components/_skeleton/web-components/click-button/component.tsx`\n\n#### ✅ Stärken\n- Minimal, fokussiert (Single Responsibility)\n- Korrekte `delegateFocus` Implementierung (Line 37)\n- Saubere Ref-Handling mit `createCtaRef`\n- Props-Binding korrekt\n\n#### 🚫 Critical Issues\n\n**1. Focus-Options Type-Mismatch (Line 40)**\n```typescript\n@Method()\n@delegateFocus('buttonRef')\npublic async focus(options?: KolFocusOptions): Promise<void> {}\n```\n**Problem:** Decorator erwartet `KolFocusOptions`, aber `delegateFocus` nutzt `setFocus()` welches mit `FocusOptions` arbeitet. \n**Impact:** Build-Fehler in `accordion/shadow.tsx:48` (type constraint violation)\n\n**Priorität:** 🔴 **HIGH** (systemisch) \n**Fix:** Type-Signature anpassen oder Decorator aktualisieren\n\n**2. Fehlende JSDoc auf Prop (Lines 23-26)**\n```typescript\n/**\n * Sets the label of the click button component.\n */\n@Prop()\npublic _label!: string;\n```\n**Status:** ✅ OK — JSDoc vorhanden\n\n#### 🟡 High Issues\n\n**3. onClick Handler Type-Safety (Line 57)**\n```typescript\nhandleClick={this.ctrl.handleClick}\n```\n**Problem:** `this.ctrl.handleClick` wird direkt passed — wenn Signature ändert, bricht es still. \n**Priorität:** 🟡 **MEDIUM** \n**Fix:** Arrow-Function: `handleClick={() => this.ctrl.handleClick()}`\n\n---\n\n### 3. SkeletonController (`internal/functional-components/skeleton/controller.ts`)\n\n**Dateipfad:** `/packages/components/src/internal/functional-components/skeleton/controller.ts`\n\n#### 🔴 Critical Issues\n\n**1. Memory Leak: setInterval ohne Cleanup-Dokumentation (Lines 63-68)**\n```typescript\nprivate startLoadedEventInterval(): void {\n this.intervalId = setInterval(() => {\n this.emitLoaded(this.getState?.('count') ?? 0);\n }, 2000);\n}\n```\n**Problem:**\n- ✅ `intervalId` wird in `destroy()` gelöscht (Line 86)\n- 🚫 **Aber:** `destroy()` wird NUR in `disconnectedCallback()` aufgerufen\n- 🚫 **Große Lücke:** Wenn Component nicht destruktiv entfernt wird (z.B. `display: none`), läuft Interval endlos\n- 🚫 **Kein Dokumentation** warum `destroy()` nötig ist\n\n**Priorität:** 🔴 **CRITICAL** (Speicherleck in Production) \n**Fix:**\n```typescript\n// JSDoc dokumentieren\n/**\n * Startet den Loaded-Event-Interval.\n * WICHTIG: destroy() muss in disconnectedCallback() aufgerufen werden,\n * sonst läuft der Interval im Hintergrund.\n */\n```\n\n**2. Unzureichende State-Initialisierung (Lines 37-39)**\n```typescript\npublic toggle(): void {\n this.setState('show', !(this.getState?.('show') ?? false));\n}\n```\n**Problem:** `getState?.('show')` kann `undefined` sein — `?? false` ist defensiv, aber:\n- Default sollte in BaseController oder State-Definition sein, nicht hier\n- Keine Konsistenz mit `count` (Line 51 in component.tsx)\n\n**Priorität:** 🟡 **MEDIUM** \n**Fix:** State-Defaults zentral definieren\n\n**3. Console.log statt Log.debug (Line 44)**\n```typescript\nconsole.log('Show should be toggled');\n```\n**Problem:** Inkonsistent mit anderen Zeilen die `Log.debug()` nutzen (z.B. SkeletonFC). \n**Priorität:** 🟢 **LOW** \n**Fix:** `Log.debug()` verwenden\n\n**4. Keine Error-Handling in emitLoaded (Lines 70-77)**\n```typescript\nprivate emitLoaded(count: number): void {\n if (this.onLoadedCallback) {\n this.onLoadedCallback(count); // Kein try-catch\n }\n}\n```\n**Problem:** Wenn Callback wirft → Component-State wird inkonsistent. \n**Priorität:** 🟡 **MEDIUM**\n\n#### 🟡 High Issues\n\n**5. ClickButtonController Instanz ohne State-Zugriff (Line 18)**\n```typescript\nthis.clickButtonCtrl = new ClickButtonController(BaseWebComponent.stateLess);\n```\n**Problem:** `stateLess` ist korrekt, aber:\n- Keine Dokumentation **warum** ClickButton stateless\n- Wenn jemand State hinzufügt → silentes Bug\n\n**Priorität:** 🟡 **MEDIUM** \n**Fix:** JSDoc-Kommentar\n\n---\n\n### 4. ClickButtonController (`internal/functional-components/click-button/controller.ts`)\n\n**Dateipfad:** `/packages/components/src/internal/functional-components/click-button/controller.ts`\n\n#### ✅ Stärken\n- Minimal, einfach zu verstehen\n- Korrekte Props-Handling (`watchLabel`)\n- Fokus-Delegation delegiert korrekt an `setFocus()`\n\n#### 🔴 Critical Issues\n\n**1. Memory Leak durch `.bind(this)` auf Line 32**\n```typescript\npublic handleClick = (): void => {\n console.log(this, this.buttonRef, 'button clicked');\n};\n```\n**Status:** ✅ OK — Arrow-Function (kein `.bind()`)\n\n**2. Type-Safety in setButtonRef (Line 37)**\n```typescript\npublic setButtonRef = (element?: HTMLButtonElement): void => {\n this.buttonRef = element;\n};\n```\n**Status:** ✅ OK — typsicher\n\n#### 🟡 High Issues\n\n**3. Console.log statt Log (Line 34)**\n```typescript\nconsole.log(this, this.buttonRef, 'button clicked');\n```\n**Problem:** \n- Nicht über Log-System\n- Logs `this` (ganze Controller-Instanz) → potenzielle Datenexposition\n\n**Priorität:** 🟡 **MEDIUM** \n**Fix:** `Log.debug()` mit spezifischen Values\n\n**4. Fehlende JSDoc auf focus() (Line 22)**\n```typescript\npublic async focus(options?: KolFocusOptions): Promise<void> {\n return setFocus(this.buttonRef, options);\n}\n```\n**Problem:** \n- `KolFocusOptions` Type-Mismatch (systemisch)\n- Keine Dokumentation dass async ist\n\n**Priorität:** 🟡 **MEDIUM**\n\n---\n\n### 5. SkeletonFC (`internal/functional-components/skeleton/component.tsx`)\n\n**Dateipfad:** `/packages/components/src/internal/functional-components/skeleton/component.tsx`\n\n#### ✅ Stärken\n- Functional Component sauber\n- BEM-Klasse-Generierung konsistent\n- Props korrekt destructured\n\n#### 🟡 High Issues\n\n**1. Event-Propagation nicht dokumentiert (Line 15)**\n```typescript\nexport const SkeletonFC: FC<FunctionalComponentProps<SkeletonApi>> = (props) => {\n const { count, label, name, show, handleClick, refButton } = props;\n```\n**Problem:**\n- Event `onLoaded`, `onRendered` werden in Props passed, aber **nicht in FC genutzt**\n- Diese Events werden in KolSkeleton component direkt emittet, nicht über FC\n- **Inkonsistenz:** Props definieren Events, aber FC nutzt sie nicht\n\n**Priorität:** 🟡 **MEDIUM** \n**Fix:** Dokumentation oder Props bereinigen\n\n**2. Props-Typ unsicher (Line 15)**\n```typescript\nFunctionalComponentProps<SkeletonApi>\n```\n**Problem:** `FunctionalComponentProps<T>` ist zu allgemein — was genau wird erwartet? \n**Priorität:** 🟡 **MEDIUM**\n\n---\n\n### 6. ClickButtonFC (`internal/functional-components/click-button/component.tsx`)\n\n**Dateipfad:** `/packages/components/src/internal/functional-components/click-button/component.tsx`\n\n#### ✅ Stärken\n- Sehr sauber, minimal\n- onClick Handler korrekt\n- BEM-Klassen konsistent\n\n#### 🟡 High Issues\n\n**1. onKeyDown PreventDefault ohne Dokumentation (Line 13)**\n```typescript\nonKeyDown={(event) => event.preventDefault()}\n```\n**Problem:**\n- **Warum wird keydown preventDefaultet?** Keine Dokumentation\n- Das ist ungewöhnlich für ein Button-Element\n- Könnte Accessibility-Problem sein\n\n**Priorität:** 🟡 **MEDIUM** \n**Fix:** JSDoc-Kommentar erklären warum\n\n---\n\n### 7. Testing & Snapshots\n\n#### Skeleton Snapshot Tests (`_skeleton/web-components/skeleton/snapshot.spec.tsx`)\n\n```typescript\nexecuteSnapshotTests<SkeletonSnapshotProps>(KOL_SKELETON_TAG, [KolSkeleton], [\n { _name: 'Ada Lovelace' }, \n { _name: '' }\n]);\n```\n\n**Status:** 🟡 **Minimal**\n- ✅ Two snapshot variants tested\n- 🚫 **Fehlt:** \n - `show=true` vs `show=false` variant\n - `count` variations\n - Edge case: sehr lange Name\n - **State wird nicht tested** (nur Props)\n\n**Priorität:** 🟡 **MEDIUM** \n**Empfehlung:** Snapshots erweitern\n\n#### ClickButton Snapshot Tests (`_skeleton/web-components/click-button/snapshot.spec.tsx`)\n\n```typescript\nexecuteSnapshotTests<ClickButtonSnapshotProps>(KOL_CLICK_BUTTON_TAG, [KolClickButton], [\n { _label: 'Click me' }, \n { _label: 'Submit form' }\n]);\n```\n\n**Status:** 🟡 **Minimal**\n- ✅ Two label variants\n- 🚫 **Fehlt:** \n - Edge cases (empty label, very long label)\n - Disabled state (if supported)\n - Focus state\n\n**Priorität:** 🟡 **MEDIUM**\n\n#### E2E Tests (`_skeleton/web-components/click-button/interaction.e2e.ts`)\n\n```typescript\ntest('should call handleClick when clicked', async ({ page }) => {\n const logMessages: string[] = [];\n page.on('console', (msg) => {\n logMessages.push(msg.text());\n });\n await page.getByRole('button', { name: 'Click' }).click();\n expect(logMessages.length).toBeGreaterThan(0);\n});\n```\n\n**Status:** 🟡 **Minimal**\n- ✅ Using accessibility role (correct)\n- 🚫 **Fehlt:**\n - Keyboard interaction test (Space, Enter)\n - Focus test\n - Event-Listener test (addEventListener pattern)\n - **Log assertion fragile:** `logMessages.length > 0` ist zu vage\n\n**Priorität:** 🟡 **MEDIUM** \n**Empfehlung:** E2E-Tests erweitern nach team3 Kriterien\n\n---\n\n### 8. API & Type Definitions\n\n#### SkeletonApi (`internal/functional-components/skeleton/api.tsx`)\n\n```typescript\nexport type SkeletonApi = ApiFromConfig<\n typeof skeletonPropsConfig,\n {\n Callbacks: { click: () => void };\n Emitters: { loaded: number; rendered: void };\n Listeners: { keydown: KeyboardEvent };\n Methods: { focus: (options?: KolFocusOptions) => void; toggle: () => void };\n Refs: { button: HTMLButtonElement };\n States: { count: number; label: string; show: boolean };\n }\n>;\n```\n\n**Status:** 🟡 **Konsistent, aber Lücken**\n- ✅ Alle Props typsicher\n- ✅ Alle Emitters definiert\n- 🚫 **Probleme:**\n - `KolFocusOptions` ist problematisch (systemisch)\n - `Listeners` mit `keydown` ist ungewöhnlich — sollte über Events handled werden?\n - `Callbacks: click` wird nie genutzt (nur `handleClick` Arrow-Funktion)\n\n**Priorität:** 🟡 **MEDIUM**\n\n---\n\n## 📊 Konsistenz-Analyse\n\n### Pattern Konsistenz (Web Components ↔ Functional Components)\n\n| Aspekt | KolSkeleton | KolClickButton | Standard | Status |\n|--------|-------------|----------------|----------|--------|\n| **Component-Dekor** | ✅ `@Component` | ✅ `@Component` | — | ✅ OK |\n| **Props** | ✅ `@Prop` + `@Watch` | ✅ `@Prop` + `@Watch` | — | ✅ OK |\n| **Events** | ✅ `@Event` | 🚫 Keine | Required | 🔴 MISMATCH |\n| **Methods** | ✅ `@Method` | ✅ `@Method` | — | ✅ OK |\n| **Listen** | ✅ `@Listen` | 🚫 Keine | Optional | 🟡 OK |\n| **State** | ✅ `@State` | 🚫 Keine | Optional | ✅ OK |\n| **JSDoc** | ✅ `@Prop/@Event` | ✅ `@Prop/@Method` | Pflicht | ✅ OK |\n| **Focus** | 🔴 `@ctrlFocus` | ✅ `@delegateFocus` | `delegateFocus` | 🔴 MISMATCH |\n| **Lifecycle** | ✅ componentWillLoad, componentDidLoad, disconnectedCallback | ✅ componentWillLoad | — | ✅ OK |\n\n**Konsistenz-Probleme:**\n- 🔴 **CRITICAL:** Focus-Pattern unterschiedlich (ctrlFocus vs delegateFocus)\n- 🔴 **CRITICAL:** KolSkeleton hat Events, KolClickButton nicht\n- 🚫 **Wird nicht repariert durch Template** (Template ist Guide, nicht Copy-Paste)\n\n---\n\n## 🔴 Mängelliste (priorisiert)\n\n### 🔴 CRITICAL (Blocker)\n\n#### 1. Focus-Type Mismatch (systemisch)\n**Files:** Alle Komponenten mit `delegateFocus` oder `ctrlFocus` \n**Issue:** `KolFocusOptions` ↔ native `FocusOptions` Inkompatibilität \n**Impact:** Build bricht \n**Fix:** Type-Alignment in `KolFocusOptions` ← `FocusOptions` \n**Effort:** High (systemisch, viele Dateien betroffen)\n\n#### 2. KolSkeleton: Fehlerhafte Focus-Decoration (Line 22)\n**File:** `_skeleton/web-components/skeleton/component.tsx` \n**Issue:** `@ctrlFocus('ctrl')` verwenden, aber sollte `delegateFocus('ref')` sein \n**Fix:** Pattern wie ClickButton übernehmen \n**Effort:** Low\n\n#### 3. SkeletonController: Memory Leak (Interval ohne Cleanup-Dokumentation)\n**File:** `internal/functional-components/skeleton/controller.ts:63-68` \n**Issue:** `setInterval()` läuft im Hintergrund wenn Component nicht destruktiv entfernt \n**Fix:** JSDoc-Dokumentation + Verify Cleanup-Path \n**Effort:** Low\n\n---\n\n### 🟡 HIGH (Quality / Safety)\n\n#### 4. Event-Emission ohne Error-Handling\n**Files:** \n- `_skeleton/web-components/skeleton/component.tsx:84`\n- `internal/functional-components/skeleton/controller.ts:74`\n\n**Issue:** `emit()` kann werfen, kein try-catch \n**Fix:** `try-catch` um Event-Emits \n**Effort:** Low\n\n#### 5. KolClickButton: onClick Handler Type-Safety (Line 57)\n**File:** `_skeleton/web-components/click-button/component.tsx` \n**Issue:** `handleClick={this.ctrl.handleClick}` direkt passed — keine Arrow-Func \n**Fix:** `handleClick={() => this.ctrl.handleClick()}` \n**Effort:** Trivial\n\n#### 6. Console.log statt Log-System\n**Files:**\n- `internal/functional-components/skeleton/controller.ts:44`\n- `internal/functional-components/click-button/controller.ts:34`\n\n**Issue:** Nicht über Log-System, potenzielle Datenexposition \n**Fix:** `Log.debug()` mit spezifischen Values \n**Effort:** Trivial\n\n#### 7. ClickButtonFC: onKeyDown preventDefault ohne Dokumentation (Line 13)\n**File:** `internal/functional-components/click-button/component.tsx` \n**Issue:** **Warum preventDefault?** Keine Dokumentation — könnte A11y-Problem sein \n**Fix:** JSDoc erklären oder entfernen wenn nicht nötig \n**Effort:** Low\n\n#### 8. Missing JSDoc on State Fields\n**File:** `_skeleton/web-components/skeleton/component.tsx:46-53` \n**Issue:** `@State count`, `@State label`, `@State show` ohne JSDoc \n**Fix:** JSDoc-Kommentare hinzufügen \n**Effort:** Trivial\n\n#### 9. Window-Listener Stencil Auto-Cleanup nicht dokumentiert\n**File:** `_skeleton/web-components/skeleton/component.tsx:73` \n**Issue:** `@Listen('keydown', { target: 'window' })` — Auto-Cleanup Stencil-Feature nicht dokumentiert \n**Fix:** JSDoc-Kommentar \n**Effort:** Trivial\n\n---\n\n### 🟢 LOW (Code Quality)\n\n#### 10. State Default-Handling inkonsistent\n**File:** `internal/functional-components/skeleton/controller.ts:38` \n**Issue:** `getState?.('show') ?? false` — Defaults sollten zentral sein \n**Fix:** Refactor State-Defaults in BaseController \n**Effort:** Medium (aber nice-to-have)\n\n#### 11. SkeletonFC: Event-Props nicht genutzt\n**File:** `internal/functional-components/skeleton/component.tsx:15-31` \n**Issue:** `onLoaded`, `onRendered` werden in Props definiert, aber nicht in FC genutzt \n**Fix:** Dokumentation oder Props-Cleanup \n**Effort:** Low\n\n#### 12. Testing: Minimal Coverage\n**Files:**\n- `_skeleton/web-components/skeleton/snapshot.spec.tsx`\n- `_skeleton/web-components/click-button/snapshot.spec.tsx`\n- `_skeleton/web-components/click-button/interaction.e2e.ts`\n\n**Issue:** Nur Happy-Path getestet, Edge Cases + State Variations fehlen \n**Fix:** Tests erweitern (show=false, count variation, empty label, keydown events) \n**Effort:** Medium\n\n#### 13. ClickButtonController: Type-Generification fragile\n**File:** `internal/functional-components/click-button/controller.ts` \n**Issue:** `setButtonRef` erwartet `HTMLButtonElement` — was wenn in anderen Komponenten anders? \n**Fix:** Generische Type-Parameter oder Dokumentation \n**Effort:** Low (nice-to-have)\n\n---\n\n## 📋 Empfehlungen (Implementierungs-Roadmap)\n\n### Phase 1: Kritische Fixes (BLOCKING)\n\n1. **Fix Focus-Type Mismatch (systemisch)**\n - `KolFocusOptions` → `FocusOptions` Alignment\n - Oder: Bridge-Type erstellen\n - **Effort:** High \n - **Impact:** Unblocks Build\n\n2. **Fix KolSkeleton Focus-Decoration**\n - `@ctrlFocus` → `@delegateFocus('buttonRef')`\n - **Effort:** Low \n - **Impact:** Pattern-Konsistenz\n\n3. **Document SkeletonController Memory Leak**\n - JSDoc auf `startLoadedEventInterval()`\n - Verify `destroy()` Call in `disconnectedCallback()`\n - **Effort:** Trivial \n - **Impact:** Prevents Production Issue\n\n### Phase 2: Quality Fixes (Safety)\n\n4. Event-Emission Error-Handling\n - Try-catch um `emit()` calls\n - **Effort:** Low\n\n5. Console → Log-System\n - Replace `console.log` with `Log.debug`\n - **Effort:** Trivial\n\n6. JSDoc auf State-Feldern + Window-Listener\n - **Effort:** Trivial\n\n7. ClickButtonFC: preventDefault Dokumentation\n - **Effort:** Low\n\n### Phase 3: Test Expansion\n\n8. Snapshot Tests erweitern\n - Edge Cases (empty, very long, state variations)\n - **Effort:** Medium\n\n9. E2E Tests erweitern\n - Keyboard interactions (Space, Enter, Tab)\n - Focus management\n - Event-Listener pattern testing\n - **Effort:** Medium\n\n---\n\n## 🎯 Einheitliche Implementierungs-Standards (etabliert)\n\nBasierend auf Audit sollten folgende Standards **template-übergreifend** dokumentiert werden:\n\n### Web Component Standards\n\n```typescript\n// ✅ KORREKT\n@Component({ tag: 'kol-xxx', shadow: true })\nexport class KolXxx extends BaseWebComponent<XxxApi> implements WebComponentInterface<XxxApi> {\n private readonly ctrl = new XxxController(this.stateAccess);\n\n @Prop()\n public _prop!: string;\n\n @Watch('_prop')\n public watchProp(value?: string): void {\n this.ctrl.watchProp(value);\n }\n\n @Method()\n @delegateFocus('ref') // Neu Standard\n public async focus(options?: KolFocusOptions): Promise<void> {}\n\n @Event()\n public emitted!: EventEmitter<void>;\n\n @Listen('keydown')\n public handleKeydown(event: KeyboardEvent): void {\n this.ctrl.handleKeydown(event);\n }\n\n public componentWillLoad(): void {\n this.ctrl.componentWillLoad({ prop: this._prop });\n }\n\n public componentDidLoad(): void {\n // Cleanup subscriptions, etc.\n }\n\n public disconnectedCallback(): void {\n this.ctrl.destroy(); // Wichtig für Memory Leak Prevention\n }\n\n public render(): JSX.Element {\n return <Host><XxxFC {...props} /></Host>;\n }\n}\n```\n\n### Controller Standards\n\n```typescript\n// ✅ KORREKT\nexport class XxxController extends BaseController<XxxApi> {\n public constructor(stateAccess: StateAccess<XxxApi>) {\n super(stateAccess, xxxPropsConfig);\n }\n\n // Props-Watching\n public watchProp(value?: string): void {\n propConfig.apply(value, (v) => {\n this.setRenderProp('prop', v);\n });\n }\n\n // Event-Emitting\n public handleClick = (): void => {\n Log.debug('click'); // Nicht console.log\n // State mutation\n this.setState('state', newValue);\n // Event-Emitting mit try-catch\n try {\n this.onClickCallback?.();\n } catch (error) {\n Log.error('Click callback failed', error);\n }\n };\n\n // Lifecycle Cleanup\n public destroy(): void {\n if (this.intervalId) clearInterval(this.intervalId);\n if (this.subscription) this.subscription.unsubscribe();\n }\n}\n```\n\n### Type Definition Standards\n\n```typescript\n// ✅ KORREKT API Definition\nexport type XxxApi = ApiFromConfig<\n typeof xxxPropsConfig,\n {\n Callbacks: {\n click: () => void;\n };\n Emitters: {\n emitted: void; // Vollständig typisiert\n };\n Listeners: {\n keydown: KeyboardEvent; // Optional, für Window-Listener\n };\n Methods: {\n focus: (options?: KolFocusOptions) => Promise<void>;\n };\n Refs: {\n primary: HTMLElement;\n };\n States: {\n count: number;\n };\n }\n>;\n```\n\n### Testing Standards\n\n**Snapshots:**\n- Min. 3 Varianten pro Prop\n- Edge cases (empty, very long)\n- State variations (enabled/disabled, show/hide)\n- Format: `executeSnapshotTests<Props>(TAG, [Component], [variants])`\n\n**E2E:**\n- Keyboard Interactions (Space, Enter, Escape, Tab)\n- Focus management\n- Event-Listener pattern (addEventListener)\n- Accessibility (ARIA)\n- Format: `test.describe` + `test.skip` mit TODO comments\n\n**JSDoc:**\n- Nur auf Stencil-Decorators (`@Prop`, `@Event`, `@Method`, `@State`)\n- Keine JSDoc auf nicht-Stencil Code\n- Focus-Methoden: **immer dokumentieren dass async**\n- Window-Listener: **dokumentieren Stencil auto-cleanup**\n\n---\n\n## 🚨 Build-Blockade: Focus-Type Root-Cause Analyse\n\n**Systemisches Problem (Phase 0):**\n\n```\nKolFocusOptions (kolibri custom)\n └─ type KolFocusOptions = { behavior?: 'auto' | 'smooth' }\n\nvs.\n\nFocusOptions (native browser standard)\n └─ type FocusOptions = { preventScroll?: boolean }\n```\n\n**Wo bricht es:**\n- `accordion/shadow.tsx:48` — `HTMLKolButtonWcElement` extends `HTMLElement`\n- Aber `HTMLElement.focus()` expects native `FocusOptions`\n- Aber `KolButton.focus()` returns `Promise<void>` mit `KolFocusOptions`\n- **Type incompatibility** → Build fails\n\n**Langfristige Lösung:**\n1. **Option A:** `KolFocusOptions` extends native `FocusOptions`\n ```typescript\n export type KolFocusOptions = FocusOptions & {\n behavior?: 'auto' | 'smooth'; // Add custom behaviors\n };\n ```\n\n2. **Option B:** Separate Bridge-Type für Web Components\n ```typescript\n // In element-interaction.ts\n export type ComponentFocusOptions = KolFocusOptions; // Ist 'auto' | 'smooth'\n ```\n\n3. **Option C:** Focus-Methods nie native `focus()` überschreiben\n ```typescript\n // Nicht:\n // public focus(options?: FocusOptions): void { }\n // Sondern:\n // public kolFocus(options?: KolFocusOptions): Promise<void> { }\n ```\n\n**Recommendation:** Option A (least breaking)\n\n---\n\n## 📌 Summary & Next Steps\n\n### Aktueller Status\n- ✅ Skeleton-Pattern konsistent implementiert\n- ✅ TypeScript-Typen sauber (bis auf FocusOptions)\n- ✅ JSDoc auf Stencil-Decorators vorhanden\n- 🚫 Build-Blockade durch Focus-Type-Mismatch\n- 🚫 Memory-Leak-Risiken nicht dokumentiert\n- 🚫 Testing minimal\n\n### Sofort-Maßnahmen (High Priority)\n1. Focus-Type Fix (unblocks Build)\n2. SkeletonController Memory-Leak dokumentieren\n3. Event-Emission Error-Handling\n4. Console → Log-System\n\n### Mittelfristig (Phase 2)\n5. JSDoc-Vollständigkeit (State-Felder, Window-Listener)\n6. Test-Expansion (E2E, Snapshots)\n7. onClick Handler Binding fixen\n\n### Langfristig (Code Quality)\n8. State-Defaults zentral definieren\n9. Generic Type-Handling refactoren\n10. Documentation: Einheitliche Skeleton-Implementation Guidelines\n\n---\n\n**Report erstellt:** 2026-06-02 \n**Auditor:** Claude Code (team3-Framework) \n**Status:** Bereit zur Umsetzung nach Build-Fix\n",
472
+ "code": "# Skeleton Implementation Audit Report\n\n**Datum:** 2026-06-02 \n**Status:** 🚫 Build-Blockade erkannt (Phase 0) — Audit trotzdem vollständig durchgeführt \n**Umfang:** Alle Skeleton-bezogenen Implementierungen \n**Effort:** High (systematische Analyse aller Komponenten)\n\n---\n\n## Executive Summary\n\n### Übersicht\n\nDie Skeleton-Implementierungen im Projekt folgen einem **konsistenten Pattern**, sind aber durch mehrere **Mängel** gekennzeichnet:\n\n**Gefundene Implementierungen:**\n\n1. `_skeleton/web-components/skeleton/` — Template-Komponente (KolSkeleton)\n2. `_skeleton/web-components/click-button/` — Button-Komponente im Template\n3. `internal/functional-components/skeleton/` — Skeleton FC + Controller\n4. `internal/functional-components/click-button/` — ClickButton FC + Controller\n\n**Build-Status (Phase 0):** 🚫 **BLOCKADE**\n\n- TypeScript-Fehler in `KolFocusOptions` ↔ native `FocusOptions` (systemisch)\n- Build bricht — verhindert Validierung auf echtem Build\n\n**Konsistenz-Grade:**\n\n- ✅ **Hoch:** Controller-Pattern, Props-Handling, JSDoc-Struktur\n- 🟡 **Mittel:** Event-Propagation, Type-Safety, Error-Handling\n- 🚫 **Niedrig:** Memory-Leak-Risiken, Testing-Abdeckung, Focus-Management\n\n---\n\n## 🔍 Detaillierte Analysen\n\n### 1. KolSkeleton Component (`_skeleton/web-components/skeleton/component.tsx`)\n\n**Dateipfad:** `/packages/components/src/components/_skeleton/web-components/skeleton/component.tsx`\n\n#### ✅ Stärken\n\n- Korrekte Stencil-Dekoration (`@Component`, `@Prop`, `@Event`, `@Method`, `@Listen`, `@Watch`)\n- JSDoc-Kommentare auf allen `@Prop`, `@Event`, `@Method` vorhanden\n- Korrektes Lifecycle-Pattern (componentWillLoad, componentDidLoad, disconnectedCallback)\n- Typsicher: `SkeletonApi` zentral definiert\n\n#### 🔴 Critical Issues\n\n**1. Fehlerhafte Focus-Delegation (Line 22)**\n\n```typescript\n@Method()\n@ctrlFocus('ctrl')\npublic async focus(options?: KolFocusOptions): Promise<void> {}\n```\n\n**Problem:**\n\n- `@ctrlFocus` Decorator wird verwendet, aber `delegateFocus` ist der aktuelle Standard (lt. memory: focus-delegation-pattern.md)\n- `KolFocusOptions` ist nicht kompatibel mit nativer `FocusOptions` → **Build-Blockade**\n- Decorator-Pattern sollte `delegateFocus('ref')` sein (wie in ClickButton)\n\n**Priorität:** 🔴 **HIGH** (Breaking + systemisch) \n**Fix:** Focus-Methode korrekt implementieren wie in `ClickButton`\n\n**2. Memory Leak durch `.bind(this)` in handleClick (Line 59)**\n\n```typescript\n@Listen('keydown')\npublic handleKeyDown(event: KeyboardEvent): void {\n // ...\n this.ctrl.handleClick(); // ✅ OK — direkt, kein .bind()\n}\n```\n\n**Positive Beobachtung:** KolSkeleton nutzt `this.ctrl.handleClick()` korrekt (kein `.bind()`).\n\n**3. Fehlende Error-Handling bei Event-Emits (Lines 84-86)**\n\n```typescript\nthis.ctrl.setOnLoadedCallback((count: number) => {\n\tthis.loaded.emit(count); // Kein try-catch\n});\n```\n\n**Problem:** Wenn `emit()` wirft → Component crashed still. \n**Priorität:** 🟡 **MEDIUM** \n**Fix:** `try-catch` um Event-Emission oder defensive Implementierung\n\n**4. Window-Listener ohne Cleanup (Line 73-76)**\n\n```typescript\n@Listen('keydown', { target: 'window' })\npublic onKeydown(event: KeyboardEvent): void {\n this.ctrl.onKeydown(event);\n}\n```\n\n**Problem:** `@Listen` mit `target: 'window'` wird automatisch von Stencil bereinigt, aber **dokumentation fehlt**. \n**Priorität:** 🟡 **MEDIUM** (Doku-Mangel) \n**Fix:** JSDoc-Kommentar: \"Auto-cleaned by Stencil\"\n\n#### 🟡 High Issues\n\n**5. Type-Assertion in SkeletonFC Props (Line 105)**\n\n```typescript\nname={this.ctrl.getRenderProp('name')} // ✅ Typsicher\n```\n\n**Status:** OK — keine Assertions.\n\n**6. Fehlende JSDoc auf State-Feldern (Lines 46-53)**\n\n```typescript\n@State()\npublic count: number = 0;\n\n@State()\npublic label: string = 'Label';\n```\n\n**Problem:** State-Felder ohne JSDoc, obwohl sie durch Events exponiert werden. \n**Priorität:** 🟡 **MEDIUM** \n**Fix:** JSDoc-Kommentare hinzufügen\n\n---\n\n### 2. KolClickButton Component (`_skeleton/web-components/click-button/component.tsx`)\n\n**Dateipfad:** `/packages/components/src/components/_skeleton/web-components/click-button/component.tsx`\n\n#### ✅ Stärken\n\n- Minimal, fokussiert (Single Responsibility)\n- Korrekte `delegateFocus` Implementierung (Line 37)\n- Saubere Ref-Handling mit `createCtaRef`\n- Props-Binding korrekt\n\n#### 🚫 Critical Issues\n\n**1. Focus-Options Type-Mismatch (Line 40)**\n\n```typescript\n@Method()\n@delegateFocus('buttonRef')\npublic async focus(options?: KolFocusOptions): Promise<void> {}\n```\n\n**Problem:** Decorator erwartet `KolFocusOptions`, aber `delegateFocus` nutzt `setFocus()` welches mit `FocusOptions` arbeitet. \n**Impact:** Build-Fehler in `accordion/shadow.tsx:48` (type constraint violation)\n\n**Priorität:** 🔴 **HIGH** (systemisch) \n**Fix:** Type-Signature anpassen oder Decorator aktualisieren\n\n**2. Fehlende JSDoc auf Prop (Lines 23-26)**\n\n```typescript\n/**\n * Sets the label of the click button component.\n */\n@Prop()\npublic _label!: string;\n```\n\n**Status:** ✅ OK — JSDoc vorhanden\n\n#### 🟡 High Issues\n\n**3. onClick Handler Type-Safety (Line 57)**\n\n```typescript\nhandleClick={this.ctrl.handleClick}\n```\n\n**Problem:** `this.ctrl.handleClick` wird direkt passed — wenn Signature ändert, bricht es still. \n**Priorität:** 🟡 **MEDIUM** \n**Fix:** Arrow-Function: `handleClick={() => this.ctrl.handleClick()}`\n\n---\n\n### 3. SkeletonController (`internal/functional-components/skeleton/controller.ts`)\n\n**Dateipfad:** `/packages/components/src/internal/functional-components/skeleton/controller.ts`\n\n#### 🔴 Critical Issues\n\n**1. Memory Leak: setInterval ohne Cleanup-Dokumentation (Lines 63-68)**\n\n```typescript\nprivate startLoadedEventInterval(): void {\n this.intervalId = setInterval(() => {\n this.emitLoaded(this.getState?.('count') ?? 0);\n }, 2000);\n}\n```\n\n**Problem:**\n\n- ✅ `intervalId` wird in `destroy()` gelöscht (Line 86)\n- 🚫 **Aber:** `destroy()` wird NUR in `disconnectedCallback()` aufgerufen\n- 🚫 **Große Lücke:** Wenn Component nicht destruktiv entfernt wird (z.B. `display: none`), läuft Interval endlos\n- 🚫 **Kein Dokumentation** warum `destroy()` nötig ist\n\n**Priorität:** 🔴 **CRITICAL** (Speicherleck in Production) \n**Fix:**\n\n```typescript\n// JSDoc dokumentieren\n/**\n * Startet den Loaded-Event-Interval.\n * WICHTIG: destroy() muss in disconnectedCallback() aufgerufen werden,\n * sonst läuft der Interval im Hintergrund.\n */\n```\n\n**2. Unzureichende State-Initialisierung (Lines 37-39)**\n\n```typescript\npublic toggle(): void {\n this.setState('show', !(this.getState?.('show') ?? false));\n}\n```\n\n**Problem:** `getState?.('show')` kann `undefined` sein — `?? false` ist defensiv, aber:\n\n- Default sollte in BaseController oder State-Definition sein, nicht hier\n- Keine Konsistenz mit `count` (Line 51 in component.tsx)\n\n**Priorität:** 🟡 **MEDIUM** \n**Fix:** State-Defaults zentral definieren\n\n**3. Console.log statt Log.debug (Line 44)**\n\n```typescript\nconsole.log('Show should be toggled');\n```\n\n**Problem:** Inkonsistent mit anderen Zeilen die `Log.debug()` nutzen (z.B. SkeletonFC). \n**Priorität:** 🟢 **LOW** \n**Fix:** `Log.debug()` verwenden\n\n**4. Keine Error-Handling in emitLoaded (Lines 70-77)**\n\n```typescript\nprivate emitLoaded(count: number): void {\n if (this.onLoadedCallback) {\n this.onLoadedCallback(count); // Kein try-catch\n }\n}\n```\n\n**Problem:** Wenn Callback wirft → Component-State wird inkonsistent. \n**Priorität:** 🟡 **MEDIUM**\n\n#### 🟡 High Issues\n\n**5. ClickButtonController Instanz ohne State-Zugriff (Line 18)**\n\n```typescript\nthis.clickButtonCtrl = new ClickButtonController(BaseWebComponent.stateLess);\n```\n\n**Problem:** `stateLess` ist korrekt, aber:\n\n- Keine Dokumentation **warum** ClickButton stateless\n- Wenn jemand State hinzufügt → silentes Bug\n\n**Priorität:** 🟡 **MEDIUM** \n**Fix:** JSDoc-Kommentar\n\n---\n\n### 4. ClickButtonController (`internal/functional-components/click-button/controller.ts`)\n\n**Dateipfad:** `/packages/components/src/internal/functional-components/click-button/controller.ts`\n\n#### ✅ Stärken\n\n- Minimal, einfach zu verstehen\n- Korrekte Props-Handling (`watchLabel`)\n- Fokus-Delegation delegiert korrekt an `setFocus()`\n\n#### 🔴 Critical Issues\n\n**1. Memory Leak durch `.bind(this)` auf Line 32**\n\n```typescript\npublic handleClick = (): void => {\n console.log(this, this.buttonRef, 'button clicked');\n};\n```\n\n**Status:** ✅ OK — Arrow-Function (kein `.bind()`)\n\n**2. Type-Safety in setButtonRef (Line 37)**\n\n```typescript\npublic setButtonRef = (element?: HTMLButtonElement): void => {\n this.buttonRef = element;\n};\n```\n\n**Status:** ✅ OK — typsicher\n\n#### 🟡 High Issues\n\n**3. Console.log statt Log (Line 34)**\n\n```typescript\nconsole.log(this, this.buttonRef, 'button clicked');\n```\n\n**Problem:**\n\n- Nicht über Log-System\n- Logs `this` (ganze Controller-Instanz) → potenzielle Datenexposition\n\n**Priorität:** 🟡 **MEDIUM** \n**Fix:** `Log.debug()` mit spezifischen Values\n\n**4. Fehlende JSDoc auf focus() (Line 22)**\n\n```typescript\npublic async focus(options?: KolFocusOptions): Promise<void> {\n return setFocus(this.buttonRef, options);\n}\n```\n\n**Problem:**\n\n- `KolFocusOptions` Type-Mismatch (systemisch)\n- Keine Dokumentation dass async ist\n\n**Priorität:** 🟡 **MEDIUM**\n\n---\n\n### 5. SkeletonFC (`internal/functional-components/skeleton/component.tsx`)\n\n**Dateipfad:** `/packages/components/src/internal/functional-components/skeleton/component.tsx`\n\n#### ✅ Stärken\n\n- Functional Component sauber\n- BEM-Klasse-Generierung konsistent\n- Props korrekt destructured\n\n#### 🟡 High Issues\n\n**1. Event-Propagation nicht dokumentiert (Line 15)**\n\n```typescript\nexport const SkeletonFC: FC<FunctionalComponentProps<SkeletonApi>> = (props) => {\n const { count, label, name, show, handleClick, refButton } = props;\n```\n\n**Problem:**\n\n- Event `onLoaded`, `onRendered` werden in Props passed, aber **nicht in FC genutzt**\n- Diese Events werden in KolSkeleton component direkt emittet, nicht über FC\n- **Inkonsistenz:** Props definieren Events, aber FC nutzt sie nicht\n\n**Priorität:** 🟡 **MEDIUM** \n**Fix:** Dokumentation oder Props bereinigen\n\n**2. Props-Typ unsicher (Line 15)**\n\n```typescript\nFunctionalComponentProps<SkeletonApi>;\n```\n\n**Problem:** `FunctionalComponentProps<T>` ist zu allgemein — was genau wird erwartet? \n**Priorität:** 🟡 **MEDIUM**\n\n---\n\n### 6. ClickButtonFC (`internal/functional-components/click-button/component.tsx`)\n\n**Dateipfad:** `/packages/components/src/internal/functional-components/click-button/component.tsx`\n\n#### ✅ Stärken\n\n- Sehr sauber, minimal\n- onClick Handler korrekt\n- BEM-Klassen konsistent\n\n#### 🟡 High Issues\n\n**1. onKeyDown PreventDefault ohne Dokumentation (Line 13)**\n\n```typescript\nonKeyDown={(event) => event.preventDefault()}\n```\n\n**Problem:**\n\n- **Warum wird keydown preventDefaultet?** Keine Dokumentation\n- Das ist ungewöhnlich für ein Button-Element\n- Könnte Accessibility-Problem sein\n\n**Priorität:** 🟡 **MEDIUM** \n**Fix:** JSDoc-Kommentar erklären warum\n\n---\n\n### 7. Testing & Snapshots\n\n#### Skeleton Snapshot Tests (`_skeleton/web-components/skeleton/snapshot.spec.tsx`)\n\n```typescript\nexecuteSnapshotTests<SkeletonSnapshotProps>(KOL_SKELETON_TAG, [KolSkeleton], [{ _name: 'Ada Lovelace' }, { _name: '' }]);\n```\n\n**Status:** 🟡 **Minimal**\n\n- ✅ Two snapshot variants tested\n- 🚫 **Fehlt:**\n - `show=true` vs `show=false` variant\n - `count` variations\n - Edge case: sehr lange Name\n - **State wird nicht tested** (nur Props)\n\n**Priorität:** 🟡 **MEDIUM** \n**Empfehlung:** Snapshots erweitern\n\n#### ClickButton Snapshot Tests (`_skeleton/web-components/click-button/snapshot.spec.tsx`)\n\n```typescript\nexecuteSnapshotTests<ClickButtonSnapshotProps>(KOL_CLICK_BUTTON_TAG, [KolClickButton], [{ _label: 'Click me' }, { _label: 'Submit form' }]);\n```\n\n**Status:** 🟡 **Minimal**\n\n- ✅ Two label variants\n- 🚫 **Fehlt:**\n - Edge cases (empty label, very long label)\n - Disabled state (if supported)\n - Focus state\n\n**Priorität:** 🟡 **MEDIUM**\n\n#### E2E Tests (`_skeleton/web-components/click-button/interaction.e2e.ts`)\n\n```typescript\ntest('should call handleClick when clicked', async ({ page }) => {\n\tconst logMessages: string[] = [];\n\tpage.on('console', (msg) => {\n\t\tlogMessages.push(msg.text());\n\t});\n\tawait page.getByRole('button', { name: 'Click' }).click();\n\texpect(logMessages.length).toBeGreaterThan(0);\n});\n```\n\n**Status:** 🟡 **Minimal**\n\n- ✅ Using accessibility role (correct)\n- 🚫 **Fehlt:**\n - Keyboard interaction test (Space, Enter)\n - Focus test\n - Event-Listener test (addEventListener pattern)\n - **Log assertion fragile:** `logMessages.length > 0` ist zu vage\n\n**Priorität:** 🟡 **MEDIUM** \n**Empfehlung:** E2E-Tests erweitern nach team3 Kriterien\n\n---\n\n### 8. API & Type Definitions\n\n#### SkeletonApi (`internal/functional-components/skeleton/api.tsx`)\n\n```typescript\nexport type SkeletonApi = ApiFromConfig<\n\ttypeof skeletonPropsConfig,\n\t{\n\t\tCallbacks: { click: () => void };\n\t\tEmitters: { loaded: number; rendered: void };\n\t\tListeners: { keydown: KeyboardEvent };\n\t\tMethods: { focus: (options?: KolFocusOptions) => void; toggle: () => void };\n\t\tRefs: { button: HTMLButtonElement };\n\t\tStates: { count: number; label: string; show: boolean };\n\t}\n>;\n```\n\n**Status:** 🟡 **Konsistent, aber Lücken**\n\n- ✅ Alle Props typsicher\n- ✅ Alle Emitters definiert\n- 🚫 **Probleme:**\n - `KolFocusOptions` ist problematisch (systemisch)\n - `Listeners` mit `keydown` ist ungewöhnlich — sollte über Events handled werden?\n - `Callbacks: click` wird nie genutzt (nur `handleClick` Arrow-Funktion)\n\n**Priorität:** 🟡 **MEDIUM**\n\n---\n\n## 📊 Konsistenz-Analyse\n\n### Pattern Konsistenz (Web Components ↔ Functional Components)\n\n| Aspekt | KolSkeleton | KolClickButton | Standard | Status |\n| ------------------- | ------------------------------------------------------------ | --------------------- | --------------- | ----------- |\n| **Component-Dekor** | ✅ `@Component` | ✅ `@Component` | — | ✅ OK |\n| **Props** | ✅ `@Prop` + `@Watch` | ✅ `@Prop` + `@Watch` | — | ✅ OK |\n| **Events** | ✅ `@Event` | 🚫 Keine | Required | 🔴 MISMATCH |\n| **Methods** | ✅ `@Method` | ✅ `@Method` | — | ✅ OK |\n| **Listen** | ✅ `@Listen` | 🚫 Keine | Optional | 🟡 OK |\n| **State** | ✅ `@State` | 🚫 Keine | Optional | ✅ OK |\n| **JSDoc** | ✅ `@Prop/@Event` | ✅ `@Prop/@Method` | Pflicht | ✅ OK |\n| **Focus** | 🔴 `@ctrlFocus` | ✅ `@delegateFocus` | `delegateFocus` | 🔴 MISMATCH |\n| **Lifecycle** | ✅ componentWillLoad, componentDidLoad, disconnectedCallback | ✅ componentWillLoad | — | ✅ OK |\n\n**Konsistenz-Probleme:**\n\n- 🔴 **CRITICAL:** Focus-Pattern unterschiedlich (ctrlFocus vs delegateFocus)\n- 🔴 **CRITICAL:** KolSkeleton hat Events, KolClickButton nicht\n- 🚫 **Wird nicht repariert durch Template** (Template ist Guide, nicht Copy-Paste)\n\n---\n\n## 🔴 Mängelliste (priorisiert)\n\n### 🔴 CRITICAL (Blocker)\n\n#### 1. Focus-Type Mismatch (systemisch)\n\n**Files:** Alle Komponenten mit `delegateFocus` oder `ctrlFocus` \n**Issue:** `KolFocusOptions` ↔ native `FocusOptions` Inkompatibilität \n**Impact:** Build bricht \n**Fix:** Type-Alignment in `KolFocusOptions` ← `FocusOptions` \n**Effort:** High (systemisch, viele Dateien betroffen)\n\n#### 2. KolSkeleton: Fehlerhafte Focus-Decoration (Line 22)\n\n**File:** `_skeleton/web-components/skeleton/component.tsx` \n**Issue:** `@ctrlFocus('ctrl')` verwenden, aber sollte `delegateFocus('ref')` sein \n**Fix:** Pattern wie ClickButton übernehmen \n**Effort:** Low\n\n#### 3. SkeletonController: Memory Leak (Interval ohne Cleanup-Dokumentation)\n\n**File:** `internal/functional-components/skeleton/controller.ts:63-68` \n**Issue:** `setInterval()` läuft im Hintergrund wenn Component nicht destruktiv entfernt \n**Fix:** JSDoc-Dokumentation + Verify Cleanup-Path \n**Effort:** Low\n\n---\n\n### 🟡 HIGH (Quality / Safety)\n\n#### 4. Event-Emission ohne Error-Handling\n\n**Files:**\n\n- `_skeleton/web-components/skeleton/component.tsx:84`\n- `internal/functional-components/skeleton/controller.ts:74`\n\n**Issue:** `emit()` kann werfen, kein try-catch \n**Fix:** `try-catch` um Event-Emits \n**Effort:** Low\n\n#### 5. KolClickButton: onClick Handler Type-Safety (Line 57)\n\n**File:** `_skeleton/web-components/click-button/component.tsx` \n**Issue:** `handleClick={this.ctrl.handleClick}` direkt passed — keine Arrow-Func \n**Fix:** `handleClick={() => this.ctrl.handleClick()}` \n**Effort:** Trivial\n\n#### 6. Console.log statt Log-System\n\n**Files:**\n\n- `internal/functional-components/skeleton/controller.ts:44`\n- `internal/functional-components/click-button/controller.ts:34`\n\n**Issue:** Nicht über Log-System, potenzielle Datenexposition \n**Fix:** `Log.debug()` mit spezifischen Values \n**Effort:** Trivial\n\n#### 7. ClickButtonFC: onKeyDown preventDefault ohne Dokumentation (Line 13)\n\n**File:** `internal/functional-components/click-button/component.tsx` \n**Issue:** **Warum preventDefault?** Keine Dokumentation — könnte A11y-Problem sein \n**Fix:** JSDoc erklären oder entfernen wenn nicht nötig \n**Effort:** Low\n\n#### 8. Missing JSDoc on State Fields\n\n**File:** `_skeleton/web-components/skeleton/component.tsx:46-53` \n**Issue:** `@State count`, `@State label`, `@State show` ohne JSDoc \n**Fix:** JSDoc-Kommentare hinzufügen \n**Effort:** Trivial\n\n#### 9. Window-Listener Stencil Auto-Cleanup nicht dokumentiert\n\n**File:** `_skeleton/web-components/skeleton/component.tsx:73` \n**Issue:** `@Listen('keydown', { target: 'window' })` — Auto-Cleanup Stencil-Feature nicht dokumentiert \n**Fix:** JSDoc-Kommentar \n**Effort:** Trivial\n\n---\n\n### 🟢 LOW (Code Quality)\n\n#### 10. State Default-Handling inkonsistent\n\n**File:** `internal/functional-components/skeleton/controller.ts:38` \n**Issue:** `getState?.('show') ?? false` — Defaults sollten zentral sein \n**Fix:** Refactor State-Defaults in BaseController \n**Effort:** Medium (aber nice-to-have)\n\n#### 11. SkeletonFC: Event-Props nicht genutzt\n\n**File:** `internal/functional-components/skeleton/component.tsx:15-31` \n**Issue:** `onLoaded`, `onRendered` werden in Props definiert, aber nicht in FC genutzt \n**Fix:** Dokumentation oder Props-Cleanup \n**Effort:** Low\n\n#### 12. Testing: Minimal Coverage\n\n**Files:**\n\n- `_skeleton/web-components/skeleton/snapshot.spec.tsx`\n- `_skeleton/web-components/click-button/snapshot.spec.tsx`\n- `_skeleton/web-components/click-button/interaction.e2e.ts`\n\n**Issue:** Nur Happy-Path getestet, Edge Cases + State Variations fehlen \n**Fix:** Tests erweitern (show=false, count variation, empty label, keydown events) \n**Effort:** Medium\n\n#### 13. ClickButtonController: Type-Generification fragile\n\n**File:** `internal/functional-components/click-button/controller.ts` \n**Issue:** `setButtonRef` erwartet `HTMLButtonElement` — was wenn in anderen Komponenten anders? \n**Fix:** Generische Type-Parameter oder Dokumentation \n**Effort:** Low (nice-to-have)\n\n---\n\n## 📋 Empfehlungen (Implementierungs-Roadmap)\n\n### Phase 1: Kritische Fixes (BLOCKING)\n\n1. **Fix Focus-Type Mismatch (systemisch)**\n - `KolFocusOptions` → `FocusOptions` Alignment\n - Oder: Bridge-Type erstellen\n - **Effort:** High\n - **Impact:** Unblocks Build\n\n2. **Fix KolSkeleton Focus-Decoration**\n - `@ctrlFocus` → `@delegateFocus('buttonRef')`\n - **Effort:** Low\n - **Impact:** Pattern-Konsistenz\n\n3. **Document SkeletonController Memory Leak**\n - JSDoc auf `startLoadedEventInterval()`\n - Verify `destroy()` Call in `disconnectedCallback()`\n - **Effort:** Trivial\n - **Impact:** Prevents Production Issue\n\n### Phase 2: Quality Fixes (Safety)\n\n4. Event-Emission Error-Handling\n - Try-catch um `emit()` calls\n - **Effort:** Low\n\n5. Console → Log-System\n - Replace `console.log` with `Log.debug`\n - **Effort:** Trivial\n\n6. JSDoc auf State-Feldern + Window-Listener\n - **Effort:** Trivial\n\n7. ClickButtonFC: preventDefault Dokumentation\n - **Effort:** Low\n\n### Phase 3: Test Expansion\n\n8. Snapshot Tests erweitern\n - Edge Cases (empty, very long, state variations)\n - **Effort:** Medium\n\n9. E2E Tests erweitern\n - Keyboard interactions (Space, Enter, Tab)\n - Focus management\n - Event-Listener pattern testing\n - **Effort:** Medium\n\n---\n\n## 🎯 Einheitliche Implementierungs-Standards (etabliert)\n\nBasierend auf Audit sollten folgende Standards **template-übergreifend** dokumentiert werden:\n\n### Web Component Standards\n\n```typescript\n// ✅ KORREKT\n@Component({ tag: 'kol-xxx', shadow: true })\nexport class KolXxx extends BaseWebComponent<XxxApi> implements WebComponentInterface<XxxApi> {\n private readonly ctrl = new XxxController(this.stateAccess);\n\n @Prop()\n public _prop!: string;\n\n @Watch('_prop')\n public watchProp(value?: string): void {\n this.ctrl.watchProp(value);\n }\n\n @Method()\n @delegateFocus('ref') // Neu Standard\n public async focus(options?: KolFocusOptions): Promise<void> {}\n\n @Event()\n public emitted!: EventEmitter<void>;\n\n @Listen('keydown')\n public handleKeydown(event: KeyboardEvent): void {\n this.ctrl.handleKeydown(event);\n }\n\n public componentWillLoad(): void {\n this.ctrl.componentWillLoad({ prop: this._prop });\n }\n\n public componentDidLoad(): void {\n // Cleanup subscriptions, etc.\n }\n\n public disconnectedCallback(): void {\n this.ctrl.destroy(); // Wichtig für Memory Leak Prevention\n }\n\n public render(): JSX.Element {\n return <Host><XxxFC {...props} /></Host>;\n }\n}\n```\n\n### Controller Standards\n\n```typescript\n// ✅ KORREKT\nexport class XxxController extends BaseController<XxxApi> {\n\tpublic constructor(stateAccess: StateAccess<XxxApi>) {\n\t\tsuper(stateAccess, xxxPropsConfig);\n\t}\n\n\t// Props-Watching\n\tpublic watchProp(value?: string): void {\n\t\tpropConfig.apply(value, (v) => {\n\t\t\tthis.setRenderProp('prop', v);\n\t\t});\n\t}\n\n\t// Event-Emitting\n\tpublic handleClick = (): void => {\n\t\tLog.debug('click'); // Nicht console.log\n\t\t// State mutation\n\t\tthis.setState('state', newValue);\n\t\t// Event-Emitting mit try-catch\n\t\ttry {\n\t\t\tthis.onClickCallback?.();\n\t\t} catch (error) {\n\t\t\tLog.error('Click callback failed', error);\n\t\t}\n\t};\n\n\t// Lifecycle Cleanup\n\tpublic destroy(): void {\n\t\tif (this.intervalId) clearInterval(this.intervalId);\n\t\tif (this.subscription) this.subscription.unsubscribe();\n\t}\n}\n```\n\n### Type Definition Standards\n\n```typescript\n// ✅ KORREKT API Definition\nexport type XxxApi = ApiFromConfig<\n\ttypeof xxxPropsConfig,\n\t{\n\t\tCallbacks: {\n\t\t\tclick: () => void;\n\t\t};\n\t\tEmitters: {\n\t\t\temitted: void; // Vollständig typisiert\n\t\t};\n\t\tListeners: {\n\t\t\tkeydown: KeyboardEvent; // Optional, für Window-Listener\n\t\t};\n\t\tMethods: {\n\t\t\tfocus: (options?: KolFocusOptions) => Promise<void>;\n\t\t};\n\t\tRefs: {\n\t\t\tprimary: HTMLElement;\n\t\t};\n\t\tStates: {\n\t\t\tcount: number;\n\t\t};\n\t}\n>;\n```\n\n### Testing Standards\n\n**Snapshots:**\n\n- Min. 3 Varianten pro Prop\n- Edge cases (empty, very long)\n- State variations (enabled/disabled, show/hide)\n- Format: `executeSnapshotTests<Props>(TAG, [Component], [variants])`\n\n**E2E:**\n\n- Keyboard Interactions (Space, Enter, Escape, Tab)\n- Focus management\n- Event-Listener pattern (addEventListener)\n- Accessibility (ARIA)\n- Format: `test.describe` + `test.skip` mit TODO comments\n\n**JSDoc:**\n\n- Nur auf Stencil-Decorators (`@Prop`, `@Event`, `@Method`, `@State`)\n- Keine JSDoc auf nicht-Stencil Code\n- Focus-Methoden: **immer dokumentieren dass async**\n- Window-Listener: **dokumentieren Stencil auto-cleanup**\n\n---\n\n## 🚨 Build-Blockade: Focus-Type Root-Cause Analyse\n\n**Systemisches Problem (Phase 0):**\n\n```\nKolFocusOptions (kolibri custom)\n └─ type KolFocusOptions = { behavior?: 'auto' | 'smooth' }\n\nvs.\n\nFocusOptions (native browser standard)\n └─ type FocusOptions = { preventScroll?: boolean }\n```\n\n**Wo bricht es:**\n\n- `accordion/shadow.tsx:48` — `HTMLKolButtonWcElement` extends `HTMLElement`\n- Aber `HTMLElement.focus()` expects native `FocusOptions`\n- Aber `KolButton.focus()` returns `Promise<void>` mit `KolFocusOptions`\n- **Type incompatibility** → Build fails\n\n**Langfristige Lösung:**\n\n1. **Option A:** `KolFocusOptions` extends native `FocusOptions`\n\n ```typescript\n export type KolFocusOptions = FocusOptions & {\n \tbehavior?: 'auto' | 'smooth'; // Add custom behaviors\n };\n ```\n\n2. **Option B:** Separate Bridge-Type für Web Components\n\n ```typescript\n // In element-interaction.ts\n export type ComponentFocusOptions = KolFocusOptions; // Ist 'auto' | 'smooth'\n ```\n\n3. **Option C:** Focus-Methods nie native `focus()` überschreiben\n ```typescript\n // Nicht:\n // public focus(options?: FocusOptions): void { }\n // Sondern:\n // public kolFocus(options?: KolFocusOptions): Promise<void> { }\n ```\n\n**Recommendation:** Option A (least breaking)\n\n---\n\n## 📌 Summary & Next Steps\n\n### Aktueller Status\n\n- ✅ Skeleton-Pattern konsistent implementiert\n- ✅ TypeScript-Typen sauber (bis auf FocusOptions)\n- ✅ JSDoc auf Stencil-Decorators vorhanden\n- 🚫 Build-Blockade durch Focus-Type-Mismatch\n- 🚫 Memory-Leak-Risiken nicht dokumentiert\n- 🚫 Testing minimal\n\n### Sofort-Maßnahmen (High Priority)\n\n1. Focus-Type Fix (unblocks Build)\n2. SkeletonController Memory-Leak dokumentieren\n3. Event-Emission Error-Handling\n4. Console → Log-System\n\n### Mittelfristig (Phase 2)\n\n5. JSDoc-Vollständigkeit (State-Felder, Window-Listener)\n6. Test-Expansion (E2E, Snapshots)\n7. onClick Handler Binding fixen\n\n### Langfristig (Code Quality)\n\n8. State-Defaults zentral definieren\n9. Generic Type-Handling refactoren\n10. Documentation: Einheitliche Skeleton-Implementation Guidelines\n\n---\n\n**Report erstellt:** 2026-06-02 \n**Auditor:** Claude Code (team3-Framework) \n**Status:** Bereit zur Umsetzung nach Build-Fix\n",
457
473
  "kind": "doc"
458
474
  },
459
475
  {
@@ -477,7 +493,7 @@
477
493
  "group": "docs",
478
494
  "name": "UPGRADEABLE_DEPENDENCIES",
479
495
  "path": "docs/UPGRADEABLE_DEPENDENCIES.md",
480
- "code": "# Upgradeable Dependencies — Major Versions Available\n\n**Analysis Date:** 2026-03-31 \n**Scope:** Root package.json + all packages in `packages/*/` \n**Method:** npm-check-updates with `--target greatest`\n\n---\n\n## 🔴 Critical (Breaking Changes – Manual Work Required)\n\n### 1. **@stencil/core** | 4.38.3 → 4.43.3 (patch) / 5.0.0-next.0 (major)\n\n- **Status:** v5 is in pre-release (next channel), v4.43.3 is latest stable\n- **Breaking Changes:**\n - v5.0.0-next.0 is not production-ready (next channel)\n - Multiple output-target packages block v5 upgrade:\n - @public-ui/stencil-angular-output-target\n - @public-ui/stencil-react-output-target\n - @public-ui/stencil-solid-output-target\n - @public-ui/stencil-vue-output-target\n - @stencil/playwright requires >=4.13.0, conflicts with 5.x\n- **Risk:** VERY HIGH – Core platform dependency\n- **Recommendation:** Stay on v4.43.3 until v5 is stable and output-targets are compatible\n- **Effort:** Would require coordinating 4+ downstream packages\n\n### 2. **eslint** | 9.39.4 → 10.1.0\n\n- **Breaking Changes:**\n - Legacy `.eslintrc.json` configuration is no longer supported; must migrate to flat config (`eslint.config.js`)\n - Node.js < v20.19.0 no longer supported\n - Config file lookup now starts from linted file's directory (beneficial for monorepos)\n - Formatter output depends on Node.js native `styleText()` API\n - NO_COLOR and NODE_DISABLE_COLORS environment variables now affect color output\n - FlatESLint and LegacyESLint deprecated APIs removed\n - JSX reference tracking improved (may affect scope-dependent rules)\n- **Peer Dependencies:** Requires @eslint/js ^10.0.0 and eslint-plugin-jsx-a11y compatibility\n- **Config Changes:** Must convert `.eslintrc.json` to `eslint.config.js` (tool available: `eslint --init`)\n- **Risk:** HIGH – Affects all linting configuration\n- **Effort:** MEDIUM – Config migration required but automation tools available\n- **Roadmap:** [Migrate to v10.x](https://eslint.org/docs/latest/use/migrate-to-10.0.0)\n\n### 3. **jest** | 26.6.3 → 30.3.0\n\n- **Breaking Changes:**\n - Node.js 14, 16, 19, 21 no longer supported (require >=18.x, >=20.x)\n - Minimum TypeScript now 5.4+\n - jest-environment-jsdom upgraded from jsdom 21 → jsdom 26 (spec compliance changes)\n - Mocking `window.location` behavior may change\n - Deprecated alias methods removed (e.g., `toBeTruthy()` aliases)\n - Non-enumerable object properties excluded from matchers by default\n - `jest.mock()` now case-sensitive (affects Windows edge cases)\n - `jest.genMockFromModule()` removed (use `jest.createMockFromModule()`)\n - `--testPathPattern` renamed to `--testPathPatterns`\n - Performance: Real-world speedups from optimizations\n- **Risk:** HIGH – Core testing framework with wide breaking surface\n- **Effort:** MEDIUM → HIGH – Will require test review and fixes\n- **Migration:** [Jest 30 Migration Guide](https://jestjs.io/docs/upgrading-to-jest30)\n\n### 4. **TypeScript** | 5.9.3 → 6.0.2\n\n- **Breaking Changes:**\n - `moduleResolution: classic` removed (only nodenext, bundler supported)\n - AMD, UMD, SystemJS modules removed (ESM only)\n - `esModuleInterop` and `allowSyntheticDefaultImports` cannot be set to false\n - `target: es5` deprecated; minimum ES2015\n - All code treated as strict mode (automatic \"use strict\" emission)\n- **Config Migration:** Migration CLI available: `npx @andrewbranch/ts5to6`\n- **Impact:** May be low if tsconfig.json is explicit and uses modern settings\n- **Peer:** @stencil-community/eslint-plugin requires ^4.9.4 || ^5.0.0 (blocks 6.0+)\n- **Risk:** MEDIUM – Language compiler fundamental shift\n- **Effort:** LOW → MEDIUM – Config migration mostly automatic\n- **Roadmap:** [TypeScript 5.x to 6.0 Migration Guide](https://gist.github.com/privatenumber/3d2e80da28f84ee30b77d53e1693378f)\n\n### 5. **@angular/core** | 19.2.20 → 22.0.0-next.5 (Angular v19, v20, v21 adapters)\n\n- **Packages Affected:**\n - `/packages/adapters/angular/v19/`: 19.2.20 → 22.0.0-next.5\n - `/packages/adapters/angular/v20/`: 20.3.18 → 22.0.0-next.5\n - `/packages/adapters/angular/v21/`: 21.2.6 → 22.0.0-next.5\n- **Breaking Changes (v20+):**\n - Node.js >=22.22.0 required (v24.13.1+) – v20 no longer supported\n - TypeScript >=5.8 required\n - Zoneless applications now stable (Zone.js side effects deprecated)\n - Ivy strict mode enabled by default\n - ViewEngine completely removed\n - NgModules support deprecated in favor of standalone components\n- **Complexity:** Enterprise applications can take weeks to migrate\n- **Related:** Also affects @angular/compiler, @angular/compiler-cli, zone.js, @angular/common\n- **Risk:** VERY HIGH – Multi-framework adapter dependencies\n- **Effort:** HIGH – Complete architectural review needed\n- **Roadmap:** [Angular Update Guide](https://angular.dev/update-guide)\n\n---\n\n## 🟡 High (Test-Intensive Upgrades)\n\n### 1. **jest** (component package) | 26.6.3 → 30.3.0\n\n- **Location:** `/packages/components/`\n- **Risk:** Same as critical jest (see above), but scoped to component tests\n- **Effort:** MEDIUM\n- **Testing:** All component unit tests must run and pass\n\n### 2. **@types/jest** | 26.0.24 → 30.0.0\n\n- **Breaking:** TypeScript types for jest@30 (follows jest breaking changes)\n- **Dependency:** Must upgrade together with jest\n- **Risk:** MEDIUM\n- **Effort:** LOW – Automatic with jest upgrade\n\n### 3. **knip** | 5.88.1 → 6.1.0 (components, stylelint-rules)\n\n- **Breaking Changes:**\n - Node.js <v20.19.0 no longer supported\n - Issue type `classMembers` removed\n - `--include-libs` and `--isolate-workspaces` flags removed (now default)\n - `--experimental-tags` renamed to `--tags`\n - `issues.files` structure changes in reporters\n - `issues._files` removed\n - Root files removed\n- **Packages:** tools/stylelint-rules, components\n- **Risk:** MEDIUM – Unused-code detection configuration changes\n- **Effort:** LOW → MEDIUM – Config review needed\n- **Roadmap:** [knip v6 Releases](https://github.com/webpro-nl/knip/releases)\n\n### 4. **@types/color-convert** | 2.0.4 → 3.0.1 + **color-rgba** | 2.4.0 → 3.0.0\n\n- **Location:** `/packages/components/`\n- **Breaking Changes:** Major version bump on color-rgba (internal API changes likely)\n- **Risk:** MEDIUM – Type definitions and color processing\n- **Effort:** LOW – Likely compatible\n- **Notes:** These are typically non-breaking for consumers\n\n### 5. **@typescript-eslint/eslint-plugin** & **@typescript-eslint/parser** | 8.57.2 → 8.58.0 (patch)\n\n- **Note:** ncu shows 8.58.1-alpha.0 as \"greatest\" but 8.58.0 is stable latest\n- **Peer:** @stencil-community/eslint-plugin requires ^7.0.0 || ^8.0.0\n- **Risk:** LOW\n- **Effort:** LOW – Patch upgrade\n\n### 6. **cssnano** | 7.1.3 → 7.1.4\n\n- **Risk:** LOW – Patch-level CSS minifier\n- **Effort:** LOW\n\n### 7. **postcss-sorting** | 9.1.0 → 10.0.0\n\n- **Location:** `/packages/components/`\n- **Breaking Changes:** Likely minor API changes (changelog not specific in v9→v10)\n- **Risk:** MEDIUM – CSS property ordering configuration\n- **Effort:** LOW → MEDIUM\n- **Roadmap:** [postcss-sorting CHANGELOG](https://github.com/hudochenkov/postcss-sorting/blob/master/CHANGELOG.md)\n\n### 8. **mocha** | 11.7.5 → 12.0.0-beta-9\n\n- **Status:** Beta release only\n- **Breaking:** Likely breaking changes in beta\n- **Risk:** MEDIUM\n- **Effort:** MEDIUM – Wait for stable v12.0.0 release\n- **Recommendation:** Defer until stable release\n\n### 9. **cpy-cli** | 6.0.0 → 7.0.0 (themes package)\n\n- **Breaking:** Major file copy utility version\n- **Risk:** MEDIUM – Copy script behavior changes likely\n- **Effort:** LOW → MEDIUM\n- **Testing:** Verify theme build output\n\n---\n\n## 🟢 Low (Safe Upgrades)\n\n### 1. **@eslint/js** | 9.39.4 → 10.0.1 (themes, stylelint-rules, components)\n\n- **Peer Dependency:** Requires eslint ^10.0.0 (blocks eslint upgrade dependency)\n- **Risk:** LOW – Language rule sets\n- **Effort:** LOW\n- **Upgrade Path:** Do together with eslint v10.0.0\n\n### 2. **minimatch** | 10.2.4 → 10.2.5 (React, Vue, Svelte, Angular v19/v20/v21)\n\n- **Type:** Patch-level glob matching utility\n- **Risk:** VERY LOW\n- **Effort:** TRIVIAL\n\n### 3. **rollup** | 4.60.0 → 4.60.1 (themes)\n\n- **Type:** Patch-level bundler\n- **Risk:** VERY LOW\n- **Effort:** TRIVIAL\n\n### 4. **npm-run-all2** | 8.0.4 → 8.1.0-beta.0 (root)\n\n- **Note:** Beta version only\n- **Risk:** LOW (beta)\n- **Recommendation:** Wait for stable 8.1.0\n\n### 5. **stylelint-order** | 7.0.1 → 8.1.1 (root)\n\n- **Type:** CSS plugin\n- **Risk:** LOW – Property ordering\n- **Effort:** LOW\n\n### 6. **svelte** | ^5.55.0 → ^5.55.1 (svelte adapter)\n\n- **Type:** Patch-level framework\n- **Risk:** VERY LOW\n- **Effort:** TRIVIAL\n\n### 7. **@babel/types** | 7.29.0 → 8.0.0-rc.3 (Vue, Svelte adapters)\n\n- **Status:** Release candidate\n- **Risk:** MEDIUM (RC stage)\n- **Effort:** LOW\n- **Recommendation:** Wait for stable 8.0.0 release\n\n### 8. **zone.js** | 0.15.1 → 0.16.1 (Angular adapters v19-v21)\n\n- **Type:** Angular zone management\n- **Dependency:** Follows Angular major versions\n- **Risk:** LOW (if upgrading Angular)\n- **Effort:** LOW\n\n---\n\n## Summary\n\n### Upgrade Statistics\n\n| Category | Count | Total Packages Affected |\n| --------------------------------- | ------- | ---------------------------- |\n| 🔴 Critical | 5 | 9 packages (with variations) |\n| 🟡 High | 9 | 7 unique packages |\n| 🟢 Low | 8 | 15 unique packages |\n| **Total Unique Upgradeable Deps** | **~22** | **Across entire monorepo** |\n\n### Critical Blockers & Interdependencies\n\n```\n1. @stencil/core@5 BLOCKED by:\n - @public-ui/stencil-angular-output-target (requires >=4)\n - @public-ui/stencil-react-output-target (requires >=4)\n - @public-ui/stencil-solid-output-target (requires >=2.17.2)\n - @public-ui/stencil-vue-output-target (requires >=4)\n - @stencil/playwright (requires >=4.13.0)\n ACTION: Keep on v4.43.3 until output-targets are v5-compatible\n\n2. eslint@10.0.0 blocks:\n - @stencil-community/eslint-plugin (requires ^8.0.0 || ^9.0.0)\n - eslint-plugin-jsx-a11y (requires ^8.0.0 || ^9.0.0)\n ACTION: Coordinate multi-package eslint migration\n\n3. prettier@3.8.1 blocked by:\n - prettier-plugin-organize-imports (requires >=2.0)\n ACTION: prettier@4.0.0-alpha.13 incompatible; stay on v3\n\n4. TypeScript@6.0.2 blocked by:\n - @stencil-community/eslint-plugin (requires ^4.9.4 || ^5.0.0)\n ACTION: Stay on TypeScript 5.x for now\n\n5. Angular@22 (next.5) not stable:\n - v20: Angular-specific adapters only\n - Migration complex: weeks for enterprise apps\n ACTION: Keep Angular adapters on current major versions\n```\n\n### Recommended Upgrade Priority\n\n#### Phase 1 (Immediate – Low Risk)\n\n- ✅ minimatch (10.2.4 → 10.2.5) — patch only\n- ✅ rollup (4.60.0 → 4.60.1) — patch only\n- ✅ stylelint-order (7.0.1 → 8.1.1) — CSS plugin\n- ✅ cssnano (7.1.3 → 7.1.4) — patch only\n\n#### Phase 2 (Short-term – High Effort)\n\n- ⚠️ jest@30 + @types/jest@30 — test suite migration (2-5 days)\n - Scoped start: `/packages/components/` component tests\n - Follow with root/adapters test suites\n- ⚠️ eslint@10 + @eslint/js@10 — config migration (1-3 days)\n - Convert `.eslintrc.json` → `eslint.config.js`\n - Test all lint rules\n - Update CI/CD pipelines\n\n#### Phase 3 (Medium-term – Coordinate)\n\n- ⚠️ TypeScript@6 — only after reviewing @stencil-community/eslint-plugin compatibility\n- ⚠️ knip@6 — unused-code detection, config review (0.5-1 day)\n\n#### Phase 4 (Blocked – Wait for Stable)\n\n- ❌ prettier@4.0.0-alpha → keep v3 until stable (blocked by prettier-plugin-organize-imports)\n- ❌ @stencil/core@5 → wait for output-target compatibility\n- ❌ Angular@22 → stay on v19/v20/v21 adapter versions (production-critical)\n- ❌ mocha@12, @babel/types@8 → wait for stable releases (beta only)\n\n### Estimated Overall Effort\n\n| Phase | Effort | Timeline | Risk |\n| -------------------------- | ------------- | ------------- | ----------- |\n| Phase 1 | LOW | 0.5-1 hour | VERY LOW |\n| Phase 2 | HIGH | 3-5 days | MEDIUM-HIGH |\n| Phase 3 | MEDIUM | 1-2 days | MEDIUM |\n| Phase 4 | BLOCKED | N/A | BLOCKED |\n| **Total (if all applied)** | **VERY HIGH** | **2-3 weeks** | **HIGH** |\n\n---\n\n## Research Sources\n\n- [Migrate to ESLint v10.x](https://eslint.org/docs/latest/use/migrate-to-10.0.0)\n- [Jest 30 Migration Guide](https://jestjs.io/docs/upgrading-to-jest30)\n- [TypeScript 5.x to 6.0 Migration Guide](https://gist.github.com/privatenumber/3d2e80da28f84ee30b77d53e1693378f)\n- [Angular Update Guide](https://angular.dev/update-guide)\n- [Knip v6 Releases](https://github.com/webpro-nl/knip/releases)\n- [Stencil Releases](https://github.com/ionic-team/stencil/releases)\n- [postcss-sorting CHANGELOG](https://github.com/hudochenkov/postcss-sorting/blob/master/CHANGELOG.md)\n",
496
+ "code": "# Upgradeable Dependencies — Major Versions Available\n\n**Analysis Date:** 2026-03-31 \n**Scope:** Root package.json + all packages in `packages/*/` \n**Method:** npm-check-updates with `--target greatest`\n\n---\n\n## 🔴 Critical (Breaking Changes – Manual Work Required)\n\n### 1. **@stencil/core** | 4.38.3 (pinned) → 4.43.5 (patch, BLOCKED) / 5.0.0-alpha.7 (major)\n\n- **Status:** ⚠️ Pinned to 4.38.3 — every newer 4.x release changes runtime behavior\n (verified 2026-06-11 by E2E A/B bisect on this codebase):\n - 4.39.0 / 4.40.0: build fails (SCSS parse error in input-date; fixed in 4.40.1)\n - 4.40.1: tooltip no longer hides when a popover opens\n (popover-button.e2e.ts:41 fails consistently); CI visual tests fail across all\n themes; hydrate output differs (e.g. kol-input-file browse button renders\n `kol-button--normal` → behavior drift in SSR output)\n - 4.41.0 – 4.43.5: native Popover API broken — `showPopover()` elements stay\n hidden (kol-popover, kol-popover-button, kol-split-button, table settings)\n- **Breaking Changes (v5):**\n - v5.0.0-alpha.7 is not production-ready (alpha channel)\n - Multiple output-target packages block v5 upgrade:\n - @public-ui/stencil-angular-output-target\n - @public-ui/stencil-react-output-target\n - @public-ui/stencil-solid-output-target\n - @public-ui/stencil-vue-output-target\n - @stencil/playwright requires >=4.13.0, conflicts with 5.x\n- **Risk:** VERY HIGH – Core platform dependency\n- **Recommendation:** Stay on 4.38.3; before any future bump, run the popover/tooltip\n E2E suites and the visual tests against the candidate version\n- **Effort:** Would require coordinating 4+ downstream packages plus resolving the\n popover/tooltip regressions (upstream fix or component-side adaptation)\n\n### 2. **eslint** | 9.39.4 → 10.1.0\n\n- **Breaking Changes:**\n - Legacy `.eslintrc.json` configuration is no longer supported; must migrate to flat config (`eslint.config.js`)\n - Node.js < v20.19.0 no longer supported\n - Config file lookup now starts from linted file's directory (beneficial for monorepos)\n - Formatter output depends on Node.js native `styleText()` API\n - NO_COLOR and NODE_DISABLE_COLORS environment variables now affect color output\n - FlatESLint and LegacyESLint deprecated APIs removed\n - JSX reference tracking improved (may affect scope-dependent rules)\n- **Peer Dependencies:** Requires @eslint/js ^10.0.0 and eslint-plugin-jsx-a11y compatibility\n- **Config Changes:** Must convert `.eslintrc.json` to `eslint.config.js` (tool available: `eslint --init`)\n- **Risk:** HIGH – Affects all linting configuration\n- **Effort:** MEDIUM – Config migration required but automation tools available\n- **Roadmap:** [Migrate to v10.x](https://eslint.org/docs/latest/use/migrate-to-10.0.0)\n\n### 3. **jest** | 26.6.3 → 30.3.0\n\n- **Breaking Changes:**\n - Node.js 14, 16, 19, 21 no longer supported (require >=18.x, >=20.x)\n - Minimum TypeScript now 5.4+\n - jest-environment-jsdom upgraded from jsdom 21 → jsdom 26 (spec compliance changes)\n - Mocking `window.location` behavior may change\n - Deprecated alias methods removed (e.g., `toBeTruthy()` aliases)\n - Non-enumerable object properties excluded from matchers by default\n - `jest.mock()` now case-sensitive (affects Windows edge cases)\n - `jest.genMockFromModule()` removed (use `jest.createMockFromModule()`)\n - `--testPathPattern` renamed to `--testPathPatterns`\n - Performance: Real-world speedups from optimizations\n- **Risk:** HIGH – Core testing framework with wide breaking surface\n- **Effort:** MEDIUM → HIGH – Will require test review and fixes\n- **Migration:** [Jest 30 Migration Guide](https://jestjs.io/docs/upgrading-to-jest30)\n\n### 4. **TypeScript** | 5.9.3 → 6.0.2\n\n- **Breaking Changes:**\n - `moduleResolution: classic` removed (only nodenext, bundler supported)\n - AMD, UMD, SystemJS modules removed (ESM only)\n - `esModuleInterop` and `allowSyntheticDefaultImports` cannot be set to false\n - `target: es5` deprecated; minimum ES2015\n - All code treated as strict mode (automatic \"use strict\" emission)\n- **Config Migration:** Migration CLI available: `npx @andrewbranch/ts5to6`\n- **Impact:** May be low if tsconfig.json is explicit and uses modern settings\n- **Peer:** @stencil-community/eslint-plugin requires ^4.9.4 || ^5.0.0 (blocks 6.0+)\n- **Risk:** MEDIUM – Language compiler fundamental shift\n- **Effort:** LOW → MEDIUM – Config migration mostly automatic\n- **Roadmap:** [TypeScript 5.x to 6.0 Migration Guide](https://gist.github.com/privatenumber/3d2e80da28f84ee30b77d53e1693378f)\n\n### 5. **@angular/core** | 19.2.20 → 22.0.0-next.5 (Angular v19, v20, v21 adapters)\n\n- **Packages Affected:**\n - `/packages/adapters/angular/v19/`: 19.2.20 → 22.0.0-next.5\n - `/packages/adapters/angular/v20/`: 20.3.18 → 22.0.0-next.5\n - `/packages/adapters/angular/v21/`: 21.2.6 → 22.0.0-next.5\n- **Breaking Changes (v20+):**\n - Node.js >=22.22.0 required (v24.13.1+) – v20 no longer supported\n - TypeScript >=5.8 required\n - Zoneless applications now stable (Zone.js side effects deprecated)\n - Ivy strict mode enabled by default\n - ViewEngine completely removed\n - NgModules support deprecated in favor of standalone components\n- **Complexity:** Enterprise applications can take weeks to migrate\n- **Related:** Also affects @angular/compiler, @angular/compiler-cli, zone.js, @angular/common\n- **Risk:** VERY HIGH – Multi-framework adapter dependencies\n- **Effort:** HIGH – Complete architectural review needed\n- **Roadmap:** [Angular Update Guide](https://angular.dev/update-guide)\n\n---\n\n## 🟡 High (Test-Intensive Upgrades)\n\n### 1. **jest** (component package) | 26.6.3 → 30.3.0\n\n- **Location:** `/packages/components/`\n- **Risk:** Same as critical jest (see above), but scoped to component tests\n- **Effort:** MEDIUM\n- **Testing:** All component unit tests must run and pass\n\n### 2. **@types/jest** | 26.0.24 → 30.0.0\n\n- **Breaking:** TypeScript types for jest@30 (follows jest breaking changes)\n- **Dependency:** Must upgrade together with jest\n- **Risk:** MEDIUM\n- **Effort:** LOW – Automatic with jest upgrade\n\n### 3. **knip** | 5.88.1 → 6.1.0 (components, stylelint-rules)\n\n- **Breaking Changes:**\n - Node.js <v20.19.0 no longer supported\n - Issue type `classMembers` removed\n - `--include-libs` and `--isolate-workspaces` flags removed (now default)\n - `--experimental-tags` renamed to `--tags`\n - `issues.files` structure changes in reporters\n - `issues._files` removed\n - Root files removed\n- **Packages:** tools/stylelint-rules, components\n- **Risk:** MEDIUM – Unused-code detection configuration changes\n- **Effort:** LOW → MEDIUM – Config review needed\n- **Roadmap:** [knip v6 Releases](https://github.com/webpro-nl/knip/releases)\n\n### 4. **@types/color-convert** | 2.0.4 → 3.0.1 + **color-rgba** | 2.4.0 → 3.0.0\n\n- **Location:** `/packages/components/`\n- **Breaking Changes:** Major version bump on color-rgba (internal API changes likely)\n- **Risk:** MEDIUM – Type definitions and color processing\n- **Effort:** LOW – Likely compatible\n- **Notes:** These are typically non-breaking for consumers\n\n### 5. **@typescript-eslint/eslint-plugin** & **@typescript-eslint/parser** | 8.57.2 → 8.58.0 (patch)\n\n- **Note:** ncu shows 8.58.1-alpha.0 as \"greatest\" but 8.58.0 is stable latest\n- **Peer:** @stencil-community/eslint-plugin requires ^7.0.0 || ^8.0.0\n- **Risk:** LOW\n- **Effort:** LOW – Patch upgrade\n\n### 6. **cssnano** | 7.1.3 → 7.1.4\n\n- **Risk:** LOW – Patch-level CSS minifier\n- **Effort:** LOW\n\n### 7. **postcss-sorting** | 9.1.0 → 10.0.0\n\n- **Location:** `/packages/components/`\n- **Breaking Changes:** Likely minor API changes (changelog not specific in v9→v10)\n- **Risk:** MEDIUM – CSS property ordering configuration\n- **Effort:** LOW → MEDIUM\n- **Roadmap:** [postcss-sorting CHANGELOG](https://github.com/hudochenkov/postcss-sorting/blob/master/CHANGELOG.md)\n\n### 8. **mocha** | 11.7.5 → 12.0.0-beta-9\n\n- **Status:** Beta release only\n- **Breaking:** Likely breaking changes in beta\n- **Risk:** MEDIUM\n- **Effort:** MEDIUM – Wait for stable v12.0.0 release\n- **Recommendation:** Defer until stable release\n\n### 9. **cpy-cli** | 6.0.0 → 7.0.0 (themes package)\n\n- **Breaking:** Major file copy utility version\n- **Risk:** MEDIUM – Copy script behavior changes likely\n- **Effort:** LOW → MEDIUM\n- **Testing:** Verify theme build output\n\n---\n\n## 🟢 Low (Safe Upgrades)\n\n### 1. **@eslint/js** | 9.39.4 → 10.0.1 (themes, stylelint-rules, components)\n\n- **Peer Dependency:** Requires eslint ^10.0.0 (blocks eslint upgrade dependency)\n- **Risk:** LOW – Language rule sets\n- **Effort:** LOW\n- **Upgrade Path:** Do together with eslint v10.0.0\n\n### 2. **minimatch** | 10.2.4 → 10.2.5 (React, Vue, Svelte, Angular v19/v20/v21)\n\n- **Type:** Patch-level glob matching utility\n- **Risk:** VERY LOW\n- **Effort:** TRIVIAL\n\n### 3. **rollup** | 4.60.0 → 4.60.1 (themes)\n\n- **Type:** Patch-level bundler\n- **Risk:** VERY LOW\n- **Effort:** TRIVIAL\n\n### 4. **npm-run-all2** | 8.0.4 → 8.1.0-beta.0 (root)\n\n- **Note:** Beta version only\n- **Risk:** LOW (beta)\n- **Recommendation:** Wait for stable 8.1.0\n\n### 5. **stylelint-order** | 7.0.1 → 8.1.1 (root)\n\n- **Type:** CSS plugin\n- **Risk:** LOW – Property ordering\n- **Effort:** LOW\n\n### 6. **svelte** | ^5.55.0 → ^5.55.1 (svelte adapter)\n\n- **Type:** Patch-level framework\n- **Risk:** VERY LOW\n- **Effort:** TRIVIAL\n\n### 7. **@babel/types** | 7.29.0 → 8.0.0-rc.3 (Vue, Svelte adapters)\n\n- **Status:** Release candidate\n- **Risk:** MEDIUM (RC stage)\n- **Effort:** LOW\n- **Recommendation:** Wait for stable 8.0.0 release\n\n### 8. **zone.js** | 0.15.1 → 0.16.1 (Angular adapters v19-v21)\n\n- **Type:** Angular zone management\n- **Dependency:** Follows Angular major versions\n- **Risk:** LOW (if upgrading Angular)\n- **Effort:** LOW\n\n---\n\n## Summary\n\n### Upgrade Statistics\n\n| Category | Count | Total Packages Affected |\n| --------------------------------- | ------- | ---------------------------- |\n| 🔴 Critical | 5 | 9 packages (with variations) |\n| 🟡 High | 9 | 7 unique packages |\n| 🟢 Low | 8 | 15 unique packages |\n| **Total Unique Upgradeable Deps** | **~22** | **Across entire monorepo** |\n\n### Critical Blockers & Interdependencies\n\n```\n1. @stencil/core@5 BLOCKED by:\n - @public-ui/stencil-angular-output-target (requires >=4)\n - @public-ui/stencil-react-output-target (requires >=4)\n - @public-ui/stencil-solid-output-target (requires >=2.17.2)\n - @public-ui/stencil-vue-output-target (requires >=4)\n - @stencil/playwright (requires >=4.13.0)\n ACTION: Keep on 4.38.3 — 4.39+ regresses popover/tooltip behavior (see Critical #1);\n v5 additionally blocked until output-targets are v5-compatible\n\n2. eslint@10.0.0 blocks:\n - @stencil-community/eslint-plugin (requires ^8.0.0 || ^9.0.0)\n - eslint-plugin-jsx-a11y (requires ^8.0.0 || ^9.0.0)\n ACTION: Coordinate multi-package eslint migration\n\n3. prettier@3.8.1 blocked by:\n - prettier-plugin-organize-imports (requires >=2.0)\n ACTION: prettier@4.0.0-alpha.13 incompatible; stay on v3\n\n4. TypeScript@6.0.2 blocked by:\n - @stencil-community/eslint-plugin (requires ^4.9.4 || ^5.0.0)\n ACTION: Stay on TypeScript 5.x for now\n\n5. Angular@22 (next.5) not stable:\n - v20: Angular-specific adapters only\n - Migration complex: weeks for enterprise apps\n ACTION: Keep Angular adapters on current major versions\n```\n\n### Recommended Upgrade Priority\n\n#### Phase 1 (Immediate – Low Risk)\n\n- ✅ minimatch (10.2.4 → 10.2.5) — patch only\n- ✅ rollup (4.60.0 → 4.60.1) — patch only\n- ✅ stylelint-order (7.0.1 → 8.1.1) — CSS plugin\n- ✅ cssnano (7.1.3 → 7.1.4) — patch only\n\n#### Phase 2 (Short-term – High Effort)\n\n- ⚠️ jest@30 + @types/jest@30 — test suite migration (2-5 days)\n - Scoped start: `/packages/components/` component tests\n - Follow with root/adapters test suites\n- ⚠️ eslint@10 + @eslint/js@10 — config migration (1-3 days)\n - Convert `.eslintrc.json` → `eslint.config.js`\n - Test all lint rules\n - Update CI/CD pipelines\n\n#### Phase 3 (Medium-term – Coordinate)\n\n- ⚠️ TypeScript@6 — only after reviewing @stencil-community/eslint-plugin compatibility\n- ⚠️ knip@6 — unused-code detection, config review (0.5-1 day)\n\n#### Phase 4 (Blocked – Wait for Stable)\n\n- ❌ prettier@4.0.0-alpha → keep v3 until stable (blocked by prettier-plugin-organize-imports)\n- ❌ @stencil/core@5 → wait for output-target compatibility\n- ❌ Angular@22 → stay on v19/v20/v21 adapter versions (production-critical)\n- ❌ mocha@12, @babel/types@8 → wait for stable releases (beta only)\n\n### Estimated Overall Effort\n\n| Phase | Effort | Timeline | Risk |\n| -------------------------- | ------------- | ------------- | ----------- |\n| Phase 1 | LOW | 0.5-1 hour | VERY LOW |\n| Phase 2 | HIGH | 3-5 days | MEDIUM-HIGH |\n| Phase 3 | MEDIUM | 1-2 days | MEDIUM |\n| Phase 4 | BLOCKED | N/A | BLOCKED |\n| **Total (if all applied)** | **VERY HIGH** | **2-3 weeks** | **HIGH** |\n\n---\n\n## Research Sources\n\n- [Migrate to ESLint v10.x](https://eslint.org/docs/latest/use/migrate-to-10.0.0)\n- [Jest 30 Migration Guide](https://jestjs.io/docs/upgrading-to-jest30)\n- [TypeScript 5.x to 6.0 Migration Guide](https://gist.github.com/privatenumber/3d2e80da28f84ee30b77d53e1693378f)\n- [Angular Update Guide](https://angular.dev/update-guide)\n- [Knip v6 Releases](https://github.com/webpro-nl/knip/releases)\n- [Stencil Releases](https://github.com/ionic-team/stencil/releases)\n- [postcss-sorting CHANGELOG](https://github.com/hudochenkov/postcss-sorting/blob/master/CHANGELOG.md)\n",
481
497
  "kind": "doc"
482
498
  },
483
499
  {
@@ -501,7 +517,7 @@
501
517
  "group": "accordion",
502
518
  "name": "basic",
503
519
  "path": "packages/samples/react/src/components/accordion/basic.tsx",
504
- "code": "import React from 'react';\n\nimport { KolAccordion } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const AccordionBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolAccordion hides its content until opened. The open state can be toggled by clicking the headline or by setting the <code>_open</code>-prop\n\t\t\t\tprogrammatically. Additionally, the sample shows the disabled state for a closed and an open accordion.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolAccordion _label=\"Heading Accordion Tab 1 (open)\" _open>\n\t\t\t\tContents Accordion Tab 1\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Accordion Tab 2\">Contents Accordion Tab 2</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Accordion Tab 3 (deactivated)\" _disabled>\n\t\t\t\tContents Accordion Tab 3\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Accordion Tab 4 (disabled and open)\" _disabled _open>\n\t\t\t\tContents Accordion Tab 4\n\t\t\t</KolAccordion>\n\t\t</div>\n\t</>\n);\n",
520
+ "code": "import React from 'react';\n\nimport { KolAccordion } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const AccordionBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolAccordion hides its content until opened. The open state can be toggled by clicking the headline or by setting the <code>_open</code>-prop\n\t\t\t\tprogrammatically. Additionally, the sample shows the disabled state for a closed and an open accordion.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolAccordion _label=\"Heading Accordion Tab 1 (open)\" _open>\n\t\t\t\t<p>Contents Accordion Tab 1</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Accordion Tab 2\">\n\t\t\t\t<p>Contents Accordion Tab 2</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Accordion Tab 3 (deactivated)\" _disabled>\n\t\t\t\t<p>Contents Accordion Tab 3</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Accordion Tab 4 (disabled and open)\" _disabled _open>\n\t\t\t\t<p>Contents Accordion Tab 4</p>\n\t\t\t</KolAccordion>\n\t\t</div>\n\t</>\n);\n",
505
521
  "kind": "sample"
506
522
  },
507
523
  {
@@ -509,7 +525,7 @@
509
525
  "group": "accordion",
510
526
  "name": "headlines",
511
527
  "path": "packages/samples/react/src/components/accordion/headlines.tsx",
512
- "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolAccordion } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const AccordionHeadlines: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolAccordion with the different heading levels from 1-6.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolAccordion _label=\"Heading Level 1\" _level={1}>\n\t\t\t\tContents Accordion Tab 1\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 2\" _level={2}>\n\t\t\t\tContents Accordion Tab 2\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 3\" _level={3}>\n\t\t\t\tContents Accordion Tab 3\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 4\" _level={4}>\n\t\t\t\tContents Accordion Tab 4\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 5\" _level={5}>\n\t\t\t\tContents Accordion Tab 5\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 6\" _level={6}>\n\t\t\t\tContents Accordion Tab 6\n\t\t\t</KolAccordion>\n\t\t</div>\n\t</>\n);\n",
528
+ "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolAccordion } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const AccordionHeadlines: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolAccordion with the different heading levels from 1-6.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolAccordion _label=\"Heading Level 1\" _level={1}>\n\t\t\t\t<p>Contents Accordion Tab 1</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 2\" _level={2}>\n\t\t\t\t<p>Contents Accordion Tab 2</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 3\" _level={3}>\n\t\t\t\t<p>Contents Accordion Tab 3</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 4\" _level={4}>\n\t\t\t\t<p>Contents Accordion Tab 4</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 5\" _level={5}>\n\t\t\t\t<p>Contents Accordion Tab 5</p>\n\t\t\t</KolAccordion>\n\t\t\t<KolAccordion _label=\"Heading Level 6\" _level={6}>\n\t\t\t\t<p>Contents Accordion Tab 6</p>\n\t\t\t</KolAccordion>\n\t\t</div>\n\t</>\n);\n",
513
529
  "kind": "sample"
514
530
  },
515
531
  {
@@ -517,7 +533,7 @@
517
533
  "group": "accordion",
518
534
  "name": "multiple",
519
535
  "path": "packages/samples/react/src/components/accordion/multiple.tsx",
520
- "code": "import React, { useState } from 'react';\n\nimport { KolAccordion } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const AccordionMultiple: FC = () => {\n\tconst [selected, setSelected] = useState<number>(0);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>Multiple KolAccordions. The first is opened initially. Opening one accordion closes the others.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolAccordion _label=\"Heading Accordion Tab 1 (initially open)\" _open={selected === 0} _on={{ onClick: () => setSelected(0) }}>\n\t\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\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\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\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\t</KolAccordion>\n\t\t\t\t<KolAccordion _label=\"Heading Accordion Tab 2\" _open={selected === 1} _on={{ onClick: () => setSelected(1) }}>\n\t\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\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\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\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\t</KolAccordion>\n\t\t\t\t<KolAccordion _label=\"Heading Accordion Tab 3\" _open={selected === 2} _on={{ onClick: () => setSelected(2) }}>\n\t\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\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\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\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\t</KolAccordion>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
536
+ "code": "import React, { useState } from 'react';\n\nimport { KolAccordion } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const AccordionMultiple: FC = () => {\n\tconst [selected, setSelected] = useState<number>(0);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>Multiple KolAccordions. The first is opened initially. Opening one accordion closes the others.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolAccordion _label=\"Heading Accordion Tab 1 (initially open)\" _open={selected === 0} _on={{ onClick: () => setSelected(0) }}>\n\t\t\t\t\t<p>\n\t\t\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\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\n\t\t\t\t\t\tamet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed\n\t\t\t\t\t\tdiam voluptua. 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\n\t\t\t\t\t\tamet.\n\t\t\t\t\t</p>\n\t\t\t\t</KolAccordion>\n\t\t\t\t<KolAccordion _label=\"Heading Accordion Tab 2\" _open={selected === 1} _on={{ onClick: () => setSelected(1) }}>\n\t\t\t\t\t<p>\n\t\t\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\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\n\t\t\t\t\t\tamet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed\n\t\t\t\t\t\tdiam voluptua. 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\n\t\t\t\t\t\tamet.\n\t\t\t\t\t</p>\n\t\t\t\t</KolAccordion>\n\t\t\t\t<KolAccordion _label=\"Heading Accordion Tab 3\" _open={selected === 2} _on={{ onClick: () => setSelected(2) }}>\n\t\t\t\t\t<p>\n\t\t\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\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\n\t\t\t\t\t\tamet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed\n\t\t\t\t\t\tdiam voluptua. 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\n\t\t\t\t\t\tamet.\n\t\t\t\t\t</p>\n\t\t\t\t</KolAccordion>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
521
537
  "kind": "sample"
522
538
  },
523
539
  {
@@ -589,7 +605,7 @@
589
605
  "group": "button-link",
590
606
  "name": "basic",
591
607
  "path": "packages/samples/react/src/components/button-link/basic.tsx",
592
- "code": "import React from 'react';\n\nimport { KolButtonLink, KolHeading } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonLinkBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tKolButtonLink shows an element, that behaves like a button but looks like a link. The sample illustrates KolButtonLink with different\n\t\t\t\t\tdisplay-properties such as <code>block</code>, <code>inline-block</code> and <code>inline</code>. It also demonstrates the disabled-state.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<section className=\"text-base\">\n\t\t\t\t<KolHeading _level={2} _label=\"Button-Link with _inline\" />\n\n\t\t\t\t<p>\n\t\t\t\t\tIn this paragraph, a link is inserted that contains no additional attributes. <KolButtonLink _label=\"Simple Link\" /> It is rendered by default as an{' '}\n\t\t\t\t\t<strong>inline element</strong>.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tIn this paragraph, a link is inserted that is rendered as an inline-block element.\n\t\t\t\t\t<KolButtonLink className=\"m-4\" style={{ display: 'inline-block', border: '1px dotted' }} _label=\"Simple Link\" />. This allows you to assign width,\n\t\t\t\t\theight, and other properties to it using CSS styles.\n\t\t\t\t\t<br />\n\t\t\t\t\t<br />\n\t\t\t\t\tAfter that, there is a link that is rendered as a block element.\n\t\t\t\t\t<KolButtonLink style={{ display: 'block' }} _label=\"Simple Link\" />\n\t\t\t\t\tTherefore, I go over the entire width of the parent element to create a line break.\n\t\t\t\t</p>\n\n\t\t\t\t<KolHeading _level={2} _label=\"Button-Link with _inline={false}\" />\n\n\t\t\t\t<p>Use the boolean _inline property to render the link inline (default) or standalone.</p>\n\n\t\t\t\t<p>\n\t\t\t\t\t<KolButtonLink _label=\"Disabled ButtonLink\" _disabled _inline={false} />\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t<KolButtonLink _label=\"With access key\" _accessKey=\"c\" _inline={false} _on={dummyEventHandler} />\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t<KolButtonLink _label=\"Disabled ButtonLink\" _inline={false} _shortKey=\"s\" />\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t<KolButtonLink _label=\"Special Variant ButtonLink\" _variant=\"theme-link\" />\n\t\t\t\t</p>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
608
+ "code": "import React from 'react';\n\nimport { KolButtonLink, KolHeading } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonLinkBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tKolButtonLink shows an element, that behaves like a button but looks like a link. The sample illustrates KolButtonLink with different\n\t\t\t\t\tdisplay-properties such as <code>block</code>, <code>inline-block</code> and <code>inline</code>. It also demonstrates the disabled-state.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<section className=\"text-base\">\n\t\t\t\t<KolHeading _level={2} _label=\"Button-Link with _inline\" />\n\n\t\t\t\t<p>\n\t\t\t\t\tIn this paragraph, a link is inserted that contains no additional attributes. <KolButtonLink _label=\"Simple Link\" /> It is rendered by default as an{' '}\n\t\t\t\t\t<strong>inline element</strong>.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tIn this paragraph, a link is inserted that is rendered as an inline-block element.\n\t\t\t\t\t<KolButtonLink className=\"m-4\" style={{ display: 'inline-block', border: '1px dotted' }} _label=\"Simple Link\" />. This allows you to assign width,\n\t\t\t\t\theight, and other properties to it using CSS styles.\n\t\t\t\t\t<br />\n\t\t\t\t\t<br />\n\t\t\t\t\tAfter that, there is a link that is rendered as a block element.\n\t\t\t\t\t<KolButtonLink style={{ display: 'block' }} _label=\"Simple Link\" />\n\t\t\t\t\tTherefore, I go over the entire width of the parent element to create a line break.\n\t\t\t\t</p>\n\n\t\t\t\t<KolHeading _level={2} _label=\"Button-Link with _inline={false}\" />\n\n\t\t\t\t<p>Use the boolean _inline property to render the link inline (default) or standalone.</p>\n\n\t\t\t\t<p>\n\t\t\t\t\t<KolButtonLink _label=\"Disabled ButtonLink\" _disabled _inline={false} />\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t<KolButtonLink _label=\"With access key\" _accessKey=\"c\" _inline={false} _on={dummyEventHandler} />\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t<KolButtonLink _label=\"With short key\" _shortKey=\"s\" _inline={false} _on={dummyEventHandler} />\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t<KolButtonLink _label=\"Special Variant ButtonLink\" _variant=\"theme-link\" />\n\t\t\t\t</p>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
593
609
  "kind": "sample"
594
610
  },
595
611
  {
@@ -661,7 +677,7 @@
661
677
  "group": "button",
662
678
  "name": "focus-options",
663
679
  "path": "packages/samples/react/src/components/button/focus-options.tsx",
664
- "code": "import type { KolFocusOptions, SelectOption } from '@public-ui/components';\nimport { KolButton, KolHeading, KolSelect } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useCallback, useRef, useState } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nconst BEHAVIOR_OPTIONS: SelectOption<string>[] = [\n\t{ label: 'Auto (instant)', value: 'auto' },\n\t{ label: 'Smooth (animated)', value: 'smooth' },\n];\n\nconst ALIGNMENT_OPTIONS: SelectOption<string>[] = [\n\t{ label: 'Start', value: 'start' },\n\t{ label: 'Center', value: 'center' },\n\t{ label: 'End', value: 'end' },\n\t{ label: 'Nearest', value: 'nearest' },\n];\n\nconst SELECT_CONFIGS = [\n\t{ label: 'Behavior', key: 'behavior' as const, options: BEHAVIOR_OPTIONS },\n\t{ label: 'Block (vertical alignment)', key: 'block' as const, options: ALIGNMENT_OPTIONS },\n\t{ label: 'Inline (horizontal alignment)', key: 'inline' as const, options: ALIGNMENT_OPTIONS },\n];\n\nconst SCROLL_CONTAINER_STYLE: React.CSSProperties = {\n\tpadding: '1rem',\n\tmarginTop: '1rem',\n\tborder: '1px solid #ccc',\n};\n\nexport const ButtonFocusOptions: FC = () => {\n\tconst backToTopRef = useRef<HTMLKolButtonElement>(null);\n\tconst behaviorSelectRef = useRef<HTMLKolSelectElement>(null);\n\tconst [focusOptions, setFocusOptions] = useState<KolFocusOptions>({\n\t\tbehavior: 'auto',\n\t\tblock: 'start',\n\t\tinline: 'start',\n\t});\n\tconst [afterFocusCalled, setAfterFocusCalled] = useState(false);\n\n\tconst handleFocus = useCallback(async () => {\n\t\tif (backToTopRef.current) {\n\t\t\tsetAfterFocusCalled(false);\n\n\t\t\tawait backToTopRef.current.focus({\n\t\t\t\t...focusOptions,\n\t\t\t\tafterFocus: () => {\n\t\t\t\t\tsetAfterFocusCalled(true);\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\t}, [focusOptions]);\n\n\tconst handleBackToTop = useCallback(async () => {\n\t\tif (behaviorSelectRef.current) {\n\t\t\tsetAfterFocusCalled(false);\n\n\t\t\tawait behaviorSelectRef.current.focus({\n\t\t\t\t...focusOptions,\n\t\t\t\tafterFocus: () => {\n\t\t\t\t\tsetAfterFocusCalled(true);\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\t}, [focusOptions]);\n\n\tconst setSelectOption = useCallback((key: 'behavior' | 'block' | 'inline', value: string) => {\n\t\tsetFocusOptions((prev) => ({\n\t\t\t...prev,\n\t\t\t[key]: value,\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 story demonstrates KolFocusOptions for manual focus control with scroll-into-view behavior. It showcases vertical scrolling (element positioned\n\t\t\t\t\tbelow viewport) and horizontal scrolling (element positioned outside viewport). The focus options control how the element is scrolled into view, with\n\t\t\t\t\tthe afterFocus callback triggering after scrolling completes.\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{/* Scroll Into View Options */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Scroll Behavior Options\" />\n\t\t\t\t\t<p>\n\t\t\t\t\t\tThese options control how elements are scrolled into view. <code>preventScroll</code> and <code>focusVisible</code> are always enabled for optimal\n\t\t\t\t\t\tfocus management. Customize the scroll behavior and alignment below:\n\t\t\t\t\t</p>\n\n\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t{SELECT_CONFIGS.map((config, index) => (\n\t\t\t\t\t\t\t<div key={config.key} className=\"grid gap-2\">\n\t\t\t\t\t\t\t\t{/* eslint-disable @typescript-eslint/no-unsafe-member-access */}\n\t\t\t\t\t\t\t\t<KolSelect\n\t\t\t\t\t\t\t\t\tref={index === 0 ? behaviorSelectRef : null}\n\t\t\t\t\t\t\t\t\t_label={config.label}\n\t\t\t\t\t\t\t\t\t_options={config.options}\n\t\t\t\t\t\t\t\t\t_value={focusOptions[config.key as keyof KolFocusOptions]}\n\t\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\t\tonChange: (_event, v) => {\n\t\t\t\t\t\t\t\t\t\t\tsetSelectOption(config.key, v as string);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t{/* Scroll Example */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Scroll Example\" />\n\t\t\t\t\t<p>The target button is positioned bottom-right. Scroll down and right to find it, then click &quot;Focus Target&quot; to apply scroll behavior.</p>\n\n\t\t\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"Focus Target\" _variant=\"primary\" onClick={handleFocus} />\n\t\t\t\t\t</div>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tCallback invoked: <strong>{afterFocusCalled ? 'Yes ✓' : 'No'}</strong>\n\t\t\t\t\t</p>\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t...SCROLL_CONTAINER_STYLE,\n\t\t\t\t\t\t\toverflow: 'auto',\n\t\t\t\t\t\t\twidth: '500px',\n\t\t\t\t\t\t\theight: '600px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: '2400px',\n\t\t\t\t\t\t\t\theight: '2400px',\n\t\t\t\t\t\t\t\tpadding: '1rem',\n\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div style={{ padding: '1rem', backgroundColor: '#f9f9f9', borderRadius: '4px' }}>Content area (scroll to find button)</div>\n\t\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t\tref={backToTopRef}\n\t\t\t\t\t\t\t\t_label=\"Back to Top\"\n\t\t\t\t\t\t\t\t_variant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={handleBackToTop}\n\t\t\t\t\t\t\t\tstyle={{ position: 'absolute', bottom: '1rem', right: '1rem' }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<hr />\n\n\t\t\t\t{/* Description */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"About KolFocusOptions\" />\n\t\t\t\t\t<div className=\"indented-text\">\n\t\t\t\t\t\t<p>KolFocusOptions enables advanced focus control with scroll-into-view behavior:</p>\n\t\t\t\t\t\t<ul className=\"list-disc pl-5\">\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>preventScroll:</strong> Always enabled — prevents browser auto-scroll and uses custom scroll options instead\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>focusVisible:</strong> Always enabled — ensures the focus ring is visible after focus\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>behavior:</strong> &quot;auto&quot; (instant) or &quot;smooth&quot; (animated) scroll\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>block:</strong> Vertical alignment (start, center, end, nearest)\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>inline:</strong> Horizontal alignment (start, center, end, nearest)\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>afterFocus:</strong> Optional callback invoked after focus and scroll complete\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
680
+ "code": "import type { KolFocusOptions, SelectOption } from '@public-ui/components';\nimport { KolButton, KolHeading, KolSelect } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useCallback, useRef, useState } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nconst BEHAVIOR_OPTIONS: SelectOption<string>[] = [\n\t{ label: 'Auto (instant)', value: 'auto' },\n\t{ label: 'Smooth (animated)', value: 'smooth' },\n];\n\nconst ALIGNMENT_OPTIONS: SelectOption<string>[] = [\n\t{ label: 'Start', value: 'start' },\n\t{ label: 'Center', value: 'center' },\n\t{ label: 'End', value: 'end' },\n\t{ label: 'Nearest', value: 'nearest' },\n];\n\nconst SELECT_CONFIGS = [\n\t{ label: 'Behavior', key: 'behavior' as const, options: BEHAVIOR_OPTIONS },\n\t{ label: 'Block (vertical alignment)', key: 'block' as const, options: ALIGNMENT_OPTIONS },\n\t{ label: 'Inline (horizontal alignment)', key: 'inline' as const, options: ALIGNMENT_OPTIONS },\n];\n\nconst SCROLL_CONTAINER_STYLE: React.CSSProperties = {\n\tpadding: '1rem',\n\tmarginTop: '1rem',\n\tborder: '1px solid #ccc',\n};\n\nexport const ButtonFocusOptions: FC = () => {\n\tconst backToTopRef = useRef<HTMLKolButtonElement>(null);\n\tconst behaviorSelectRef = useRef<HTMLKolSelectElement>(null);\n\tconst [focusOptions, setFocusOptions] = useState<KolFocusOptions>({\n\t\tbehavior: 'auto',\n\t\tblock: 'start',\n\t\tinline: 'start',\n\t});\n\tconst [afterFocusCalled, setAfterFocusCalled] = useState(false);\n\n\tconst handleFocus = useCallback(async () => {\n\t\tif (backToTopRef.current) {\n\t\t\tsetAfterFocusCalled(false);\n\n\t\t\tawait backToTopRef.current.focus({\n\t\t\t\t...focusOptions,\n\t\t\t\tafterFocus: () => {\n\t\t\t\t\tsetAfterFocusCalled(true);\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\t}, [focusOptions]);\n\n\tconst handleBackToTop = useCallback(async () => {\n\t\tif (behaviorSelectRef.current) {\n\t\t\tsetAfterFocusCalled(false);\n\n\t\t\tawait behaviorSelectRef.current.focus({\n\t\t\t\t...focusOptions,\n\t\t\t\tafterFocus: () => {\n\t\t\t\t\tsetAfterFocusCalled(true);\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\t}, [focusOptions]);\n\n\tconst setSelectOption = useCallback((key: 'behavior' | 'block' | 'inline', value: string) => {\n\t\tsetFocusOptions((prev) => ({\n\t\t\t...prev,\n\t\t\t[key]: value,\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 story demonstrates KolFocusOptions for manual focus control with scroll-into-view behavior. It showcases vertical scrolling (element positioned\n\t\t\t\t\tbelow viewport) and horizontal scrolling (element positioned outside viewport). The focus options control how the element is scrolled into view, with\n\t\t\t\t\tthe afterFocus callback triggering after scrolling completes.\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{/* Scroll Into View Options */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Scroll Behavior Options\" />\n\t\t\t\t\t<p>\n\t\t\t\t\t\tThese options control how elements are scrolled into view. <code>preventScroll</code> and <code>focusVisible</code> are always enabled for optimal\n\t\t\t\t\t\tfocus management. Customize the scroll behavior and alignment below:\n\t\t\t\t\t</p>\n\n\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t{SELECT_CONFIGS.map((config, index) => (\n\t\t\t\t\t\t\t<div key={config.key} className=\"grid gap-2\">\n\t\t\t\t\t\t\t\t<KolSelect\n\t\t\t\t\t\t\t\t\tref={index === 0 ? behaviorSelectRef : null}\n\t\t\t\t\t\t\t\t\t_label={config.label}\n\t\t\t\t\t\t\t\t\t_options={config.options}\n\t\t\t\t\t\t\t\t\t_value={focusOptions[config.key as keyof KolFocusOptions]}\n\t\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\t\tonChange: (_event, v) => {\n\t\t\t\t\t\t\t\t\t\t\tsetSelectOption(config.key, v as string);\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t{/* Scroll Example */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Scroll Example\" />\n\t\t\t\t\t<p>The target button is positioned bottom-right. Scroll down and right to find it, then click &quot;Focus Target&quot; to apply scroll behavior.</p>\n\n\t\t\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"Focus Target\" _variant=\"primary\" onClick={handleFocus} />\n\t\t\t\t\t</div>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tCallback invoked: <strong>{afterFocusCalled ? 'Yes ✓' : 'No'}</strong>\n\t\t\t\t\t</p>\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t...SCROLL_CONTAINER_STYLE,\n\t\t\t\t\t\t\toverflow: 'auto',\n\t\t\t\t\t\t\twidth: '500px',\n\t\t\t\t\t\t\theight: '600px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: '2400px',\n\t\t\t\t\t\t\t\theight: '2400px',\n\t\t\t\t\t\t\t\tpadding: '1rem',\n\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div style={{ padding: '1rem', backgroundColor: '#f9f9f9', borderRadius: '4px' }}>Content area (scroll to find button)</div>\n\t\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t\tref={backToTopRef}\n\t\t\t\t\t\t\t\t_label=\"Back to Top\"\n\t\t\t\t\t\t\t\t_variant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={handleBackToTop}\n\t\t\t\t\t\t\t\tstyle={{ position: 'absolute', bottom: '1rem', right: '1rem' }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<hr />\n\n\t\t\t\t{/* Description */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"About KolFocusOptions\" />\n\t\t\t\t\t<div className=\"indented-text\">\n\t\t\t\t\t\t<p>KolFocusOptions enables advanced focus control with scroll-into-view behavior:</p>\n\t\t\t\t\t\t<ul className=\"list-disc pl-5\">\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>preventScroll:</strong> Always enabled — prevents browser auto-scroll and uses custom scroll options instead\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>focusVisible:</strong> Always enabled — ensures the focus ring is visible after focus\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>behavior:</strong> &quot;auto&quot; (instant) or &quot;smooth&quot; (animated) scroll\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>block:</strong> Vertical alignment (start, center, end, nearest)\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>inline:</strong> Horizontal alignment (start, center, end, nearest)\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<strong>afterFocus:</strong> Optional callback invoked after focus and scroll complete\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
665
681
  "kind": "sample"
666
682
  },
667
683
  {
@@ -693,7 +709,7 @@
693
709
  "group": "button",
694
710
  "name": "short-key",
695
711
  "path": "packages/samples/react/src/components/button/short-key.tsx",
696
- "code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonShortKey: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\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 story demonstrates buttons with short keys (visual keyboard shortcuts). The short key is displayed as a visual indicator within the button label,\n\t\t\t\t\tbut it is purely visual and needs custom functionality implementation to make it interactive.\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=\"Buttons with Short Keys\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"With S short key\" _shortKey=\"S\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Very small b\" _shortKey=\"b\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Short key does not appear in label\" _shortKey=\"x\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Short Key with Hidden Label\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"short key without label\" _hideLabel _shortKey=\"k\" _icons=\"kolicon-cogwheel\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Short Key with Inline Icons\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_label=\"with inline icons\"\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t\tright: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_shortKey=\"n\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
712
+ "code": "import { KolAlert, KolButton, KolHeading, KolLink } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonShortKey: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\t// The short key announced via `_shortKey` is purely visual/assistive – it does NOT\n\t// wire up a keyboard handler. The example below shows how to make it interactive by\n\t// registering a matching `keydown` listener yourself.\n\tconst interactiveShortKey = 'm';\n\t// Keep a stable reference to the (per-render) handler so the global listener is\n\t// registered only once instead of on every render.\n\tconst dummyClickEventHandlerRef = React.useRef(dummyClickEventHandler);\n\tReact.useEffect(() => {\n\t\tdummyClickEventHandlerRef.current = dummyClickEventHandler;\n\t}, [dummyClickEventHandler]);\n\tReact.useEffect(() => {\n\t\tconst handleKeyDown = (event: KeyboardEvent) => {\n\t\t\t// Match on `event.code` (layout-independent): on macOS, Alt + M emits a special\n\t\t\t// character, so `event.key` would not equal \"m\".\n\t\t\tif (event.altKey && event.code === 'KeyM') {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tdummyClickEventHandlerRef.current();\n\t\t\t}\n\t\t};\n\t\tdocument.addEventListener('keydown', handleKeyDown);\n\t\treturn () => document.removeEventListener('keydown', handleKeyDown);\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 story demonstrates buttons with short keys. The short key is displayed as a visual indicator within the button label to communicate a recommended\n\t\t\t\t\tkeyboard shortcut to the user.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolAlert _label=\"Short keys are display-only\" _type=\"info\" _variant=\"card\">\n\t\t\t\t<p>\n\t\t\t\t\t<code>_shortKey</code> is <strong>purely visual and assistive</strong>: it renders the badge and announces the shortcut via{' '}\n\t\t\t\t\t<code>aria-keyshortcuts</code>, but it does <strong>not</strong> bind a keyboard handler. Pressing the displayed combination on its own does nothing –\n\t\t\t\t\tyou have to register the listener yourself (see the interactive example below).\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tIf you need a native, browser-handled shortcut instead, use{' '}\n\t\t\t\t\t<KolLink _label=\"_accessKey\" _href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey\" _target=\"_blank\" />. Note that\n\t\t\t\t\tnative access keys are triggered in a browser-specific way (e.g. <kbd>Alt</kbd> + <kbd>Shift</kbd> + key in Chrome on Windows).\n\t\t\t\t</p>\n\t\t\t</KolAlert>\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=\"Buttons with Short Keys\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"With S short key\" _shortKey=\"S\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Very small b\" _shortKey=\"b\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Short key does not appear in label\" _shortKey=\"x\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Short Key with Hidden Label\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"short key without label\" _hideLabel _shortKey=\"k\" _icons=\"kolicon-cogwheel\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Short Key with Inline Icons\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_label=\"with inline icons\"\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t\tright: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_shortKey=\"n\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Interactive Short Key\" />\n\t\t\t\t\t<p>\n\t\t\t\t\t\tThis button wires the announced short key up manually: a <code>keydown</code> listener triggers the same action as a click. Press <kbd>Alt</kbd> +{' '}\n\t\t\t\t\t\t<kbd>M</kbd> (or click the button) to open the toast.\n\t\t\t\t\t</p>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"With working M short key\" _shortKey={interactiveShortKey} _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
697
713
  "kind": "sample"
698
714
  },
699
715
  {
@@ -725,7 +741,7 @@
725
741
  "group": "card",
726
742
  "name": "basic",
727
743
  "path": "packages/samples/react/src/components/card/basic.tsx",
728
- "code": "import React from 'react';\n\nimport { KolCard } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const CardBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolCard shows a card with title and slot content. The second sample features a close button.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"w-full grid grid-cols-2 gap-4\">\n\t\t\t<KolCard _label=\"Card with title and content\">\n\t\t\t\t<div>Card contents.</div>\n\t\t\t</KolCard>\n\n\t\t\t<KolCard _label=\"Card with closer\" _hasCloser>\n\t\t\t\t<p>This card has a close button.</p>\n\t\t\t</KolCard>\n\t\t</div>\n\t</>\n);\n",
744
+ "code": "import React from 'react';\n\nimport { KolCard } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const CardBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolCard shows a card with title and slot content. The second sample features a close button.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"w-full grid grid-cols-2 gap-4\">\n\t\t\t<KolCard _label=\"Card with title and content\">\n\t\t\t\t<p>Card contents.</p>\n\t\t\t</KolCard>\n\n\t\t\t<KolCard _label=\"Card with closer\" _hasCloser>\n\t\t\t\t<p>This card has a close button.</p>\n\t\t\t</KolCard>\n\t\t</div>\n\t</>\n);\n",
729
745
  "kind": "sample"
730
746
  },
731
747
  {
@@ -733,7 +749,7 @@
733
749
  "group": "card",
734
750
  "name": "headlines",
735
751
  "path": "packages/samples/react/src/components/card/headlines.tsx",
736
- "code": "import React from 'react';\n\nimport { KolCard } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const CardHeadlines: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows cards with all headline levels as title.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"w-full grid grid-cols-2 gap-4\">\n\t\t\t\t<KolCard _label=\"Card with headline level 0\" _level={0}>\n\t\t\t\t\t<div>Card contents.</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 1\" _level={1}>\n\t\t\t\t\t<div>Card contents.</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 2\" _level={2}>\n\t\t\t\t\t<div>Card contents.</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 3\" _level={3}>\n\t\t\t\t\t<div>Card contents.</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 4\" _level={4}>\n\t\t\t\t\t<div>Card contents.</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 5\" _level={5}>\n\t\t\t\t\t<div>Card contents.</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 6\" _level={6}>\n\t\t\t\t\t<div>Card contents.</div>\n\t\t\t\t</KolCard>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
752
+ "code": "import React from 'react';\n\nimport { KolCard } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const CardHeadlines: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows cards with all headline levels as title.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"w-full grid grid-cols-2 gap-4\">\n\t\t\t\t<KolCard _label=\"Card with headline level 0\" _level={0}>\n\t\t\t\t\t<p>Card contents.</p>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 1\" _level={1}>\n\t\t\t\t\t<p>Card contents.</p>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 2\" _level={2}>\n\t\t\t\t\t<p>Card contents.</p>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 3\" _level={3}>\n\t\t\t\t\t<p>Card contents.</p>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 4\" _level={4}>\n\t\t\t\t\t<p>Card contents.</p>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 5\" _level={5}>\n\t\t\t\t\t<p>Card contents.</p>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Card with headline level 6\" _level={6}>\n\t\t\t\t\t<p>Card contents.</p>\n\t\t\t\t</KolCard>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
737
753
  "kind": "sample"
738
754
  },
739
755
  {
@@ -765,7 +781,7 @@
765
781
  "group": "details",
766
782
  "name": "basic",
767
783
  "path": "packages/samples/react/src/components/details/basic.tsx",
768
- "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",
784
+ "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\t<p>\n\t\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\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\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.\n\t\t\t\t</p>\n\t\t\t</KolDetails>\n\t\t\t<KolDetails _disabled _label=\"Open initially (disabled)\" _open>\n\t\t\t\t<p>\n\t\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\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\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.\n\t\t\t\t</p>\n\t\t\t</KolDetails>\n\t\t\t<KolDetails _label=\"Open initially\" _open>\n\t\t\t\t<p>\n\t\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\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\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.\n\t\t\t\t</p>\n\t\t\t</KolDetails>\n\t\t</section>\n\t</>\n);\n",
769
785
  "kind": "sample"
770
786
  },
771
787
  {
@@ -829,7 +845,7 @@
829
845
  "group": "form",
830
846
  "name": "error-list",
831
847
  "path": "packages/samples/react/src/components/form/error-list.tsx",
832
- "code": "import { KolButton, KolForm, KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useRef } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const FormErrorList: FC = () => {\n\tconst formRef = useRef<HTMLKolFormElement | null>(null);\n\n\tconst scrollTo = () => {\n\t\tformRef.current?.focusErrorList();\n\t};\n\n\t/**\n\t * Simulate the form submission\n\t */\n\tuseEffect(() => {\n\t\tformRef.current?.focusErrorList();\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows a form with error messages.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolForm\n\t\t\t\tclassName=\"w-full\"\n\t\t\t\tref={formRef}\n\t\t\t\t_on={{\n\t\t\t\t\tonSubmit: scrollTo,\n\t\t\t\t}}\n\t\t\t\t_errorList={[\n\t\t\t\t\t{\n\t\t\t\t\t\tmessage: 'Error in Input 2',\n\t\t\t\t\t\tselector: '#input2',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tmessage: 'Error in Input 3',\n\t\t\t\t\t\tselector: () => alert('Error in Input 3'),\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t>\n\t\t\t\t<div className=\"grid gap-2\">\n\t\t\t\t\t<KolInputText id=\"input1\" _label=\"Input 1\" />\n\t\t\t\t\t<KolInputText\n\t\t\t\t\t\tid=\"input2\"\n\t\t\t\t\t\t_label=\"Input 2\"\n\t\t\t\t\t\t_touched\n\t\t\t\t\t\t_msg={{\n\t\t\t\t\t\t\t_description: 'Input error',\n\t\t\t\t\t\t\t_type: 'error',\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<KolInputText\n\t\t\t\t\t\tid=\"input3\"\n\t\t\t\t\t\t_label=\"Input 3\"\n\t\t\t\t\t\t_touched\n\t\t\t\t\t\t_msg={{\n\t\t\t\t\t\t\t_description: 'Input error',\n\t\t\t\t\t\t\t_type: 'error',\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<KolButton _label=\"ScrollTo\" _type=\"submit\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</KolForm>\n\t\t</>\n\t);\n};\n",
848
+ "code": "import { KolButton, KolForm, KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useRef } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const FormErrorList: FC = () => {\n\tconst formRef = useRef<HTMLKolFormElement | null>(null);\n\n\tconst scrollTo = () => {\n\t\tformRef.current?.focusErrorList();\n\t};\n\n\t/**\n\t * Simulate the form submission\n\t */\n\tuseEffect(() => {\n\t\tformRef.current?.focusErrorList();\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows a form with error messages.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolForm\n\t\t\t\tclassName=\"w-full\"\n\t\t\t\tref={formRef}\n\t\t\t\t_on={{\n\t\t\t\t\tonSubmit: scrollTo,\n\t\t\t\t}}\n\t\t\t\t_errorList={[\n\t\t\t\t\t{\n\t\t\t\t\t\tmessage: 'Error in Input 2 (default scroll behaviour)',\n\t\t\t\t\t\tselector: '#input2',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tmessage: 'Error in Input 3 (no scrolling, just alert)',\n\t\t\t\t\t\tselector: () => alert('Error in Input 3'),\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tmessage: 'Error in Input 4 (custom scroll behaviour)',\n\t\t\t\t\t\tselector: '#input4',\n\t\t\t\t\t\toptions: { behavior: 'instant', block: 'start', afterFocus: () => console.log('after Focus Input 4') },\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t>\n\t\t\t\t<div className=\"grid gap-250\">\n\t\t\t\t\t<KolInputText id=\"input1\" _label=\"Input 1\" />\n\t\t\t\t\t<KolInputText\n\t\t\t\t\t\tid=\"input2\"\n\t\t\t\t\t\t_label=\"Input 2\"\n\t\t\t\t\t\t_touched\n\t\t\t\t\t\t_msg={{\n\t\t\t\t\t\t\t_description: 'Input error',\n\t\t\t\t\t\t\t_type: 'error',\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<KolInputText\n\t\t\t\t\t\tid=\"input3\"\n\t\t\t\t\t\t_label=\"Input 3\"\n\t\t\t\t\t\t_touched\n\t\t\t\t\t\t_msg={{\n\t\t\t\t\t\t\t_description: 'Input error',\n\t\t\t\t\t\t\t_type: 'error',\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<KolInputText\n\t\t\t\t\t\tid=\"input4\"\n\t\t\t\t\t\t_label=\"Input 4\"\n\t\t\t\t\t\t_touched\n\t\t\t\t\t\t_msg={{\n\t\t\t\t\t\t\t_description: 'Input error',\n\t\t\t\t\t\t\t_type: 'error',\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<KolButton _label=\"ScrollTo\" _type=\"submit\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</KolForm>\n\t\t</>\n\t);\n};\n",
833
849
  "kind": "sample"
834
850
  },
835
851
  {
@@ -1144,6 +1160,14 @@
1144
1160
  "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextAccessShortKey: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story demonstrates access keys and short keys for KolInputText. Access keys provide keyboard shortcuts for focusing inputs.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolInputText _label=\"With access key (Alt+F)\" _value=\"Press Alt+F to focus\" _accessKey=\"f\" />\n\t\t\t<KolInputText _label=\"With short key (Alt+N)\" _value=\"Press Alt+N to focus\" _shortKey=\"n\" />\n\t\t\t<KolInputText _label=\"Access key (Alt+E)\" _value=\"\" _placeholder=\"Email address\" _accessKey=\"e\" />\n\t\t\t<KolInputText _label=\"Short key (Alt+P)\" _value=\"\" _placeholder=\"Phone number\" _shortKey=\"p\" />\n\t\t</div>\n\t</>\n);\n",
1145
1161
  "kind": "sample"
1146
1162
  },
1163
+ {
1164
+ "id": "sample/input-text/aria-details",
1165
+ "group": "input-text",
1166
+ "name": "aria-details",
1167
+ "path": "packages/samples/react/src/components/input-text/aria-details.tsx",
1168
+ "code": "import { KolCombobox, KolInputText, KolSelect, KolTextarea } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextAriaDetails: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tDemonstrates how to use <code>_ariaDetails</code> to reference an external element that provides detailed information about form inputs. All inputs\n\t\t\t\tbelow reference the same details box via their <code>_ariaDetails</code> prop.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tThe <code>_ariaDetails</code> prop uses <code>ElementInternals.ariaDetailsElements</code> to cross the Shadow DOM boundary, making it accessible to\n\t\t\t\tscreen readers. This works across all form input components: input-text, select, textarea, and combobox.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-8\">\n\t\t\t{/* Input Form with all 4 components */}\n\t\t\t<div className=\"grid gap-4 p-4 border border-gray-300 rounded\">\n\t\t\t\t<h2 className=\"text-lg font-semibold\">Form Inputs with Shared Details</h2>\n\n\t\t\t\t<KolInputText _label=\"Email Address\" _ariaDetails=\"details-box\" _placeholder=\"user@example.com\" _hint=\"We'll never share your email\" />\n\n\t\t\t\t<KolSelect\n\t\t\t\t\t_label=\"Country\"\n\t\t\t\t\t_ariaDetails=\"details-box\"\n\t\t\t\t\t_options={[\n\t\t\t\t\t\t{ label: 'Germany', value: 'de' },\n\t\t\t\t\t\t{ label: 'Austria', value: 'at' },\n\t\t\t\t\t\t{ label: 'Switzerland', value: 'ch' },\n\t\t\t\t\t]}\n\t\t\t\t/>\n\n\t\t\t\t<KolTextarea _label=\"Message\" _ariaDetails=\"details-box\" _placeholder=\"Enter your message here...\" _rows={4} />\n\n\t\t\t\t<KolCombobox _label=\"Favorite Language\" _ariaDetails=\"details-box\" _suggestions={['TypeScript', 'JavaScript', 'Python', 'Go', 'Rust', 'Java']} />\n\t\t\t</div>\n\n\t\t\t{/* Shared details box */}\n\t\t\t<div id=\"details-box\" className=\"p-4 bg-blue-50 border-l-4 border-blue-400 rounded\" role=\"complementary\">\n\t\t\t\t<h3 className=\"font-semibold text-blue-900 mb-2\">💡 Form Details</h3>\n\t\t\t\t<ul className=\"text-sm text-blue-800 space-y-2\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Email:</strong> Please enter a valid email address. We use this to contact you about your submission.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Country:</strong> Select your country of residence. This helps us provide localized support.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Message:</strong> Provide as much detail as possible. The more information you give, the better we can assist you.\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<strong>Language:</strong> Choose your preferred programming language. This helps us recommend relevant resources.\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t</div>\n\t</>\n);\n",
1169
+ "kind": "sample"
1170
+ },
1147
1171
  {
1148
1172
  "id": "sample/input-text/background",
1149
1173
  "group": "input-text",
@@ -1765,7 +1789,7 @@
1765
1789
  "group": "table",
1766
1790
  "name": "stateful-export",
1767
1791
  "path": "packages/samples/react/src/components/table/stateful-export.tsx",
1768
- "code": "import type { FC } from 'react';\nimport React, { useCallback, useState } from 'react';\n\nimport { KolButton, KolInputText, KolTableStateful } from '@public-ui/react-v19';\nimport Papa from 'papaparse';\n\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\n\nimport type { KoliBriTableHeaders } from '@public-ui/components';\n\ntype ExportRow = {\n\tDate: string;\n\tOrder: number;\n};\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Order', key: 'order', width: 160 },\n\t\t\t{ label: 'Date', key: 'date', width: 160, render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date) },\n\t\t],\n\t],\n};\n\nconst triggerBlobDownload = (blob: Blob, fileName: string): void => {\n\tconst downloadUrl = URL.createObjectURL(blob);\n\tconst anchor = document.createElement('a');\n\tanchor.href = downloadUrl;\n\tanchor.download = fileName;\n\tdocument.body.append(anchor);\n\tanchor.click();\n\tanchor.remove();\n\tsetTimeout(() => URL.revokeObjectURL(downloadUrl), 0);\n};\n\nconst sanitizeFileName = (value: string): string => {\n\tconst sanitized = value\n\t\t.trim()\n\t\t.replace(/[<>:\"/\\\\|?*\\u0000-\\u001F]/g, '-')\n\t\t.replace(/\\.+$/, '');\n\treturn sanitized.length > 0 ? sanitized : 'table-export';\n};\n\nconst exportRows: ExportRow[] = DATA.map((row) => ({ Date: DATE_FORMATTER.format(row.date), Order: row.order }));\n\nexport const TableStatefulExport: FC = () => {\n\tconst [filename, setFilename] = useState('table-export');\n\n\tconst handleFileName = useCallback((_event: Event, value: unknown): void => {\n\t\tsetFilename(String(value ?? ''));\n\t}, []);\n\n\tconst safeFileName = sanitizeFileName(filename);\n\n\tconst handleCsvExport = useCallback(() => {\n\t\tconst csvString = Papa.unparse(exportRows, {\n\t\t\tdelimiter: ';',\n\t\t\tnewline: '\\r\\n',\n\t\t});\n\t\tconst csvBlob = new Blob(['\\uFEFF', csvString], { type: 'text/csv;charset=utf-8;header=present' });\n\t\ttriggerBlobDownload(csvBlob, `${safeFileName}.csv`);\n\t}, [safeFileName]);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows CSV export for KolTableStateful data, using browser Blob downloads and a configurable file name.</p>\n\t\t\t</SampleDescription>\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolInputText\n\t\t\t\t\t_label=\"Export file name\"\n\t\t\t\t\t_value={filename}\n\t\t\t\t\t_hint=\"The entered value is used for CSV export.\"\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonInput: handleFileName,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t\t<KolButton _label=\"Export CSV\" _on={{ onClick: handleCsvExport }} />\n\t\t\t\t</div>\n\t\t\t\t<KolTableStateful _label=\"Table with export actions\" _data={DATA} _headers={HEADERS} className=\"block\" />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
1792
+ "code": "import type { FC } from 'react';\nimport React, { useCallback, useState } from 'react';\n\nimport { KolButton, KolInputText, KolTableStateful } from '@public-ui/react-v19';\nimport Papa from 'papaparse';\n\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\n\nimport type { KoliBriTableHeaders } from '@public-ui/components';\n\ntype ExportRow = {\n\tDate: string;\n\tOrder: number;\n};\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Order', key: 'order', width: 160 },\n\t\t\t{ label: 'Date', key: 'date', width: 160, render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date) },\n\t\t],\n\t],\n};\n\nconst triggerBlobDownload = (blob: Blob, fileName: string): void => {\n\tconst downloadUrl = URL.createObjectURL(blob);\n\tconst anchor = document.createElement('a');\n\tanchor.href = downloadUrl;\n\tanchor.download = fileName;\n\tdocument.body.append(anchor);\n\tanchor.click();\n\tanchor.remove();\n\tsetTimeout(() => URL.revokeObjectURL(downloadUrl), 0);\n};\n\nconst sanitizeFileName = (value: string): string => {\n\tconst sanitized = value\n\t\t.trim()\n\t\t// eslint-disable-next-line no-control-regex -- intentionally strips control characters from generated file names\n\t\t.replace(/[<>:\"/\\\\|?*\\u0000-\\u001F]/g, '-')\n\t\t.replace(/\\.+$/, '');\n\treturn sanitized.length > 0 ? sanitized : 'table-export';\n};\n\nconst exportRows: ExportRow[] = DATA.map((row) => ({ Date: DATE_FORMATTER.format(row.date), Order: row.order }));\n\nexport const TableStatefulExport: FC = () => {\n\tconst [filename, setFilename] = useState('table-export');\n\n\tconst handleFileName = useCallback((_event: Event, value: unknown): void => {\n\t\tsetFilename(String(value ?? ''));\n\t}, []);\n\n\tconst safeFileName = sanitizeFileName(filename);\n\n\tconst handleCsvExport = useCallback(() => {\n\t\tconst csvString = Papa.unparse(exportRows, {\n\t\t\tdelimiter: ';',\n\t\t\tnewline: '\\r\\n',\n\t\t});\n\t\tconst csvBlob = new Blob(['\\uFEFF', csvString], { type: 'text/csv;charset=utf-8;header=present' });\n\t\ttriggerBlobDownload(csvBlob, `${safeFileName}.csv`);\n\t}, [safeFileName]);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows CSV export for KolTableStateful data, using browser Blob downloads and a configurable file name.</p>\n\t\t\t</SampleDescription>\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolInputText\n\t\t\t\t\t_label=\"Export file name\"\n\t\t\t\t\t_value={filename}\n\t\t\t\t\t_hint=\"The entered value is used for CSV export.\"\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonInput: handleFileName,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t\t<KolButton _label=\"Export CSV\" _on={{ onClick: handleCsvExport }} />\n\t\t\t\t</div>\n\t\t\t\t<KolTableStateful _label=\"Table with export actions\" _data={DATA} _headers={HEADERS} className=\"block\" />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
1769
1793
  "kind": "sample"
1770
1794
  },
1771
1795
  {
@@ -1829,7 +1853,7 @@
1829
1853
  "group": "table",
1830
1854
  "name": "stateless-with-settings-menu",
1831
1855
  "path": "packages/samples/react/src/components/table/stateless-with-settings-menu.tsx",
1832
- "code": "import { KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\ntype Data = {\n\tid: string;\n\tname: string;\n\trole: string;\n\temail: string;\n\tactive: string;\n};\nconst DATA: Data[] = [\n\t{ id: 'U1001', name: 'Alice Johnson', role: 'Admin', email: 'alice@example.org', active: 'Yes' },\n\t{ id: 'U1002', name: 'Bob Smith', role: 'Editor', email: 'bob@example.org', active: 'No' },\n\t{ id: 'U1003', name: 'Carol Lee', role: 'Viewer', email: 'carol@example.org', active: 'Yes' },\n\t{ id: 'U1004', name: 'David Kim', role: 'Editor', email: 'david@example.org', active: 'Yes' },\n];\n\nexport const TableStatelessWithSettingsMenu: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows <code>KolTableStateless</code> with the settings menu enabled via\n\t\t\t\t<code>_hasSettingsMenu</code>. Each column demonstrates a different combination of sorting and resizing options.\n\t\t\t</p>\n\t\t\t<ul>\n\t\t\t\t<li>\n\t\t\t\t\t<strong>ID</strong> keeps a fixed width with <code>resizable: false</code> while still allowing sorting.\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<strong>Name</strong> represents the default behavior with both sorting and resizing enabled.\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<strong>Role</strong> disables sorting but keeps <code>resizable: true</code> so users can widen the column if necessary.\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<strong>E-Mail</strong> allows sorting but locks its width with <code>resizable: false</code> to keep the layout stable.\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<strong>Active</strong> is neither sortable nor resizable to emphasise the status indicator.\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</SampleDescription>\n\n\t\t<KolTableStateless\n\t\t\t_label=\"Users (stateless with settings menu)\"\n\t\t\tclassName=\"w-full\"\n\t\t\t_hasSettingsMenu={true}\n\t\t\t_headerCells={{\n\t\t\t\thorizontal: [\n\t\t\t\t\t[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'id',\n\t\t\t\t\t\t\tlabel: 'ID',\n\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\tsortDirection: 'NOS',\n\t\t\t\t\t\t\tsortable: true,\n\t\t\t\t\t\t\tresizable: false,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'name',\n\t\t\t\t\t\t\tlabel: 'Name',\n\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\tsortDirection: 'NOS',\n\t\t\t\t\t\t\tsortable: true,\n\t\t\t\t\t\t\tresizable: true,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'role',\n\t\t\t\t\t\t\tlabel: 'Role',\n\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\tsortDirection: 'NOS',\n\t\t\t\t\t\t\tsortable: false,\n\t\t\t\t\t\t\tresizable: true,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'email',\n\t\t\t\t\t\t\tlabel: 'E-Mail',\n\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\tsortDirection: 'NOS',\n\t\t\t\t\t\t\tsortable: true,\n\t\t\t\t\t\t\tresizable: false,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'active',\n\t\t\t\t\t\t\tlabel: 'Active',\n\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\tsortDirection: 'NOS',\n\t\t\t\t\t\t\tsortable: false,\n\t\t\t\t\t\t\tresizable: false,\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\t_data={DATA}\n\t\t\t_on={{\n\t\t\t\tonSort: (_e, payload) => console.log('sort', payload),\n\t\t\t\tonSelectionChange: (_e, value) => console.log('selection', value),\n\t\t\t}}\n\t\t/>\n\t</>\n);\n",
1856
+ "code": "import { KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\ntype Data = {\n\tid: string;\n\tname: string;\n\trole: string;\n\temail: string;\n\tactive: string;\n};\nconst DATA: Data[] = [\n\t{ id: 'U1001', name: 'Alice Johnson', role: 'Admin', email: 'alice@example.org', active: 'Yes' },\n\t{ id: 'U1002', name: 'Bob Smith', role: 'Editor', email: 'bob@example.org', active: 'No' },\n\t{ id: 'U1003', name: 'Carol Lee', role: 'Viewer', email: 'carol@example.org', active: 'Yes' },\n\t{ id: 'U1004', name: 'David Kim', role: 'Editor', email: 'david@example.org', active: 'Yes' },\n];\n\nexport const TableStatelessWithSettingsMenu: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows <code>KolTableStateless</code> with the settings menu enabled via\n\t\t\t\t<code>_hasSettingsMenu</code>. Each column demonstrates a different combination of sorting and resizing options.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tEvery column declares an explicit <code>width</code>, so the width fields in the settings menu show the current pixel values instead of starting empty.\n\t\t\t\tThis also prevents a resizable column from collapsing when its width is adjusted from the menu.\n\t\t\t</p>\n\t\t\t<ul>\n\t\t\t\t<li>\n\t\t\t\t\t<strong>ID</strong> keeps a fixed width with <code>resizable: false</code> while still allowing sorting.\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<strong>Name</strong> represents the default behavior with both sorting and resizing enabled.\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<strong>Role</strong> disables sorting but keeps <code>resizable: true</code> so users can widen the column if necessary.\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<strong>E-Mail</strong> allows sorting but locks its width with <code>resizable: false</code> to keep the layout stable.\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<strong>Active</strong> is neither sortable nor resizable to emphasise the status indicator.\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</SampleDescription>\n\n\t\t<KolTableStateless\n\t\t\t_label=\"Users (stateless with settings menu)\"\n\t\t\tclassName=\"w-full\"\n\t\t\t_hasSettingsMenu={true}\n\t\t\t_headerCells={{\n\t\t\t\thorizontal: [\n\t\t\t\t\t[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'id',\n\t\t\t\t\t\t\tlabel: 'ID',\n\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\tsortDirection: 'NOS',\n\t\t\t\t\t\t\tsortable: true,\n\t\t\t\t\t\t\tresizable: false,\n\t\t\t\t\t\t\twidth: 120,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'name',\n\t\t\t\t\t\t\tlabel: 'Name',\n\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\tsortDirection: 'NOS',\n\t\t\t\t\t\t\tsortable: true,\n\t\t\t\t\t\t\tresizable: true,\n\t\t\t\t\t\t\twidth: 200,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'role',\n\t\t\t\t\t\t\tlabel: 'Role',\n\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\tsortDirection: 'NOS',\n\t\t\t\t\t\t\tsortable: false,\n\t\t\t\t\t\t\tresizable: true,\n\t\t\t\t\t\t\twidth: 160,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'email',\n\t\t\t\t\t\t\tlabel: 'E-Mail',\n\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\tsortDirection: 'NOS',\n\t\t\t\t\t\t\tsortable: true,\n\t\t\t\t\t\t\tresizable: false,\n\t\t\t\t\t\t\twidth: 240,\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'active',\n\t\t\t\t\t\t\tlabel: 'Active',\n\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\tsortDirection: 'NOS',\n\t\t\t\t\t\t\tsortable: false,\n\t\t\t\t\t\t\tresizable: false,\n\t\t\t\t\t\t\twidth: 120,\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\t_data={DATA}\n\t\t\t_on={{\n\t\t\t\tonSort: (_e, payload) => console.log('sort', payload),\n\t\t\t\tonSelectionChange: (_e, value) => console.log('selection', value),\n\t\t\t}}\n\t\t/>\n\t</>\n);\n",
1833
1857
  "kind": "sample"
1834
1858
  },
1835
1859
  {
@@ -2261,7 +2285,7 @@
2261
2285
  "group": "spec",
2262
2286
  "name": "combobox",
2263
2287
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/combobox.md",
2264
- "code": "# kol-combobox\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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\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| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2288
+ "code": "# kol-combobox\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| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this combobox. | `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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\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| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2265
2289
  "kind": "spec"
2266
2290
  },
2267
2291
  {
@@ -2301,7 +2325,7 @@
2301
2325
  "group": "spec",
2302
2326
  "name": "form",
2303
2327
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/form.md",
2304
- "code": "# kol-form\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_errorList` | -- | A list of error objects that each describe an issue encountered in the form. Each error object contains a message and a selector for identifying the form element related to the error. | `ErrorListPropType[] \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für die Form-Events an. | `undefined \\| { onSubmit?: EventCallback<Event> \\| undefined; onReset?: EventCallback<Event> \\| undefined; }` | `undefined` |\n| `_requiredText` | `_required-text` | Defines whether the mandatory-fields-hint should be shown. A string overrides the default text. | `boolean \\| string \\| undefined` | `true` |\n\n\n## Methods\n\n### `focusErrorList() => Promise<void>`\n\nScrolls to the error list and focuses the first link.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ------------------------ |\n| | The content of the form. |\n\n\n----------------------------------------------\n\n\n",
2328
+ "code": "# kol-form\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_errorList` | -- | A list of error objects that each describe an issue encountered in the form. Each error object contains a message and a selector for identifying the form element related to the error. | `ErrorListPropType[] \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen für die Form-Events an. | `undefined \\| { onSubmit?: EventCallback<Event> \\| undefined; onReset?: EventCallback<Event> \\| undefined; }` | `undefined` |\n| `_requiredText` | `_required-text` | Defines whether the mandatory-fields-hint should be shown. A string overrides the default text. | `boolean \\| string \\| undefined` | `true` |\n\n\n## Methods\n\n### `focusErrorList(options?: KolFocusOptions) => Promise<void>`\n\nScrolls to the error list and focuses the first link.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ------------------------ |\n| | The content of the form. |\n\n\n----------------------------------------------\n\n\n",
2305
2329
  "kind": "spec"
2306
2330
  },
2307
2331
  {
@@ -2333,7 +2357,7 @@
2333
2357
  "group": "spec",
2334
2358
  "name": "input-checkbox",
2335
2359
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-checkbox.md",
2336
- "code": "# kol-input-checkbox\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Checkbox** input type generates a rectangular box that can be activated and deactivated by clicking. When activated, a colored checkmark is shown inside the box.\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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\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\n## Slots\n\n| Slot | Description |\n| ---------- | --------------------- |\n| `\"expert\"` | Checkbox description. |\n\n\n----------------------------------------------\n\n\n",
2360
+ "code": "# kol-input-checkbox\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Checkbox** input type generates a rectangular box that can be activated and deactivated by clicking. When activated, a colored checkmark is shown inside the box.\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| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\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\n## Slots\n\n| Slot | Description |\n| ---------- | --------------------- |\n| `\"expert\"` | Checkbox description. |\n\n\n----------------------------------------------\n\n\n",
2337
2361
  "kind": "spec"
2338
2362
  },
2339
2363
  {
@@ -2341,7 +2365,7 @@
2341
2365
  "group": "spec",
2342
2366
  "name": "input-color",
2343
2367
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-color.md",
2344
- "code": "# kol-input-color\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Color** input type creates a selection field for defining any color. The color can be entered in hexadecimal, RGB, or HSL notation. It is possible to select a color via a picker or by entering exact color values.\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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| 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; _variant?: string \\| 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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\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| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2368
+ "code": "# kol-input-color\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Color** input type creates a selection field for defining any color. The color can be entered in hexadecimal, RGB, or HSL notation. It is possible to select a color via a picker or by entering exact color values.\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| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| 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; _variant?: string \\| 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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\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| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2345
2369
  "kind": "spec"
2346
2370
  },
2347
2371
  {
@@ -2349,7 +2373,7 @@
2349
2373
  "group": "spec",
2350
2374
  "name": "input-date",
2351
2375
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-date.md",
2352
- "code": "# kol-input-date\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Date** input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values.\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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| 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; _variant?: 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| `_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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\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| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2376
+ "code": "# kol-input-date\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Date** input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values.\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| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| 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; _variant?: 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| `_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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\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| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2353
2377
  "kind": "spec"
2354
2378
  },
2355
2379
  {
@@ -2357,7 +2381,7 @@
2357
2381
  "group": "spec",
2358
2382
  "name": "input-email",
2359
2383
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-email.md",
2360
- "code": "# kol-input-email\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Email** input type creates an input field for email addresses. It supports built-in format validation, multiple addresses via the `_multiple` property, and auto-complete suggestions.\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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| 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; _variant?: string \\| 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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\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| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2384
+ "code": "# kol-input-email\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Email** input type creates an input field for email addresses. It supports built-in format validation, multiple addresses via the `_multiple` property, and auto-complete suggestions.\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| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| 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; _variant?: string \\| 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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\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| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2361
2385
  "kind": "spec"
2362
2386
  },
2363
2387
  {
@@ -2365,7 +2389,7 @@
2365
2389
  "group": "spec",
2366
2390
  "name": "input-file",
2367
2391
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-file.md",
2368
- "code": "# kol-input-file\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **File** input type creates an input field for file uploads. One or multiple files can be selected and submitted with a form.\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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| 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; _variant?: 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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\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| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2392
+ "code": "# kol-input-file\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **File** input type creates an input field for file uploads. One or multiple files can be selected and submitted with a form.\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| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| 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; _variant?: 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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\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| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2369
2393
  "kind": "spec"
2370
2394
  },
2371
2395
  {
@@ -2373,7 +2397,7 @@
2373
2397
  "group": "spec",
2374
2398
  "name": "input-number",
2375
2399
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-number.md",
2376
- "code": "# kol-input-number\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Number** input type creates an input field for numeric values. Use the `_min`, `_max`, and `_step` properties to restrict the accepted value range.\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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| 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; _variant?: 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}` \\| null \\| number \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\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| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2400
+ "code": "# kol-input-number\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Number** input type creates an input field for numeric values. Use the `_min`, `_max`, and `_step` properties to restrict the accepted value range.\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| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| 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; _variant?: 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}` \\| null \\| number \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\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| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2377
2401
  "kind": "spec"
2378
2402
  },
2379
2403
  {
@@ -2381,7 +2405,7 @@
2381
2405
  "group": "spec",
2382
2406
  "name": "input-password",
2383
2407
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-password.md",
2384
- "code": "# kol-input-password\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Password** input type creates an input field for passwords. The input is masked with dot symbols.\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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| 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; _variant?: 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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n| `_visibilityToggle` | `_visibility-toggle` | Activates the show password button | `boolean \\| undefined` | `false` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\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| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2408
+ "code": "# kol-input-password\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Password** input type creates an input field for passwords. The input is masked with dot symbols.\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| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| 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; _variant?: 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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n| `_visibilityToggle` | `_visibility-toggle` | Activates the show password button | `boolean \\| undefined` | `false` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\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| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2385
2409
  "kind": "spec"
2386
2410
  },
2387
2411
  {
@@ -2389,7 +2413,7 @@
2389
2413
  "group": "spec",
2390
2414
  "name": "input-radio",
2391
2415
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-radio.md",
2392
- "code": "# kol-input-radio\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **InputRadio** input type consists of a collection of radio elements, providing a choice between different values. Only a single value can be selected at a time. Selected radio elements are typically represented by a filled, visually highlighted circle.\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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\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\n## Slots\n\n| Slot | Description |\n| ---- | ---------------------------------------- |\n| | The legend/heading of the radio buttons. |\n\n\n----------------------------------------------\n\n\n",
2416
+ "code": "# kol-input-radio\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **InputRadio** input type consists of a collection of radio elements, providing a choice between different values. Only a single value can be selected at a time. Selected radio elements are typically represented by a filled, visually highlighted circle.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\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\n## Slots\n\n| Slot | Description |\n| ---- | ---------------------------------------- |\n| | The legend/heading of the radio buttons. |\n\n\n----------------------------------------------\n\n\n",
2393
2417
  "kind": "spec"
2394
2418
  },
2395
2419
  {
@@ -2397,7 +2421,7 @@
2397
2421
  "group": "spec",
2398
2422
  "name": "input-range",
2399
2423
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-range.md",
2400
- "code": "# kol-input-range\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Range** input type creates a slider control for selecting a numeric value within a defined range. Use the `_min`, `_max`, and `_step` properties to configure the range and step size.\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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\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| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2424
+ "code": "# kol-input-range\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Range** input type creates a slider control for selecting a numeric value within a defined range. Use the `_min`, `_max`, and `_step` properties to configure the range and step size.\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| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\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| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2401
2425
  "kind": "spec"
2402
2426
  },
2403
2427
  {
@@ -2405,7 +2429,7 @@
2405
2429
  "group": "spec",
2406
2430
  "name": "input-text",
2407
2431
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-text.md",
2408
- "code": "# kol-input-text\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Text** input type creates an input field for plain text, search terms, URLs, or phone numbers.\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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| 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; _variant?: string \\| 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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\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### `selectionEnd() => 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| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2432
+ "code": "# kol-input-text\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Text** input type creates an input field for plain text, search terms, URLs, or phone numbers.\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| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. | `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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| 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; _variant?: string \\| 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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\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### `selectionEnd() => 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| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2409
2433
  "kind": "spec"
2410
2434
  },
2411
2435
  {
@@ -2493,7 +2517,7 @@
2493
2517
  "group": "spec",
2494
2518
  "name": "select",
2495
2519
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/select.md",
2496
- "code": "# kol-select\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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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. | `(Option<StencilUnknown> \\| Optgroup<StencilUnknown>)[] \\| string` | `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| `_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 element. | `StencilUnknown[] \\| boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown[] | StencilUnknown | undefined>`\n\nReturns the selected values.\n\n#### Returns\n\nType: `Promise<StencilUnknown | StencilUnknown[]>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2520
+ "code": "# kol-select\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| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this select. | `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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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. | `(Option<StencilUnknown> \\| Optgroup<StencilUnknown>)[] \\| string` | `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| `_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 element. | `StencilUnknown[] \\| boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown[] | StencilUnknown | undefined>`\n\nReturns the selected values.\n\n#### Returns\n\nType: `Promise<StencilUnknown | StencilUnknown[]>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2497
2521
  "kind": "spec"
2498
2522
  },
2499
2523
  {
@@ -2501,7 +2525,7 @@
2501
2525
  "group": "spec",
2502
2526
  "name": "single-select",
2503
2527
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/single-select.md",
2504
- "code": "# kol-single-select\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **SingleSelect** component creates a dropdown list from which exactly one predefined option can be selected.\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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\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\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2528
+ "code": "# kol-single-select\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **SingleSelect** component creates a dropdown list from which exactly one predefined option can be selected.\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| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\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\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2505
2529
  "kind": "spec"
2506
2530
  },
2507
2531
  {
@@ -2565,7 +2589,7 @@
2565
2589
  "group": "spec",
2566
2590
  "name": "textarea",
2567
2591
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/textarea.md",
2568
- "code": "# kol-textarea\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Textarea** component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks.\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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\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| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2592
+ "code": "# kol-textarea\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Textarea** component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks.\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| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this textarea. | `string \\| undefined` | `undefined` |\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| `_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\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\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| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2569
2593
  "kind": "spec"
2570
2594
  },
2571
2595
  {