@public-ui/mcp 3.0.9 → 4.0.0-alpha.11

package/shared/sample-index.json

@@ -1,17 +1,17 @@
 {
   "metadata": {
-    "generatedAt": "2025-12-18T16:52:52.940Z",
+    "generatedAt": "2025-12-18T17:30:40.466Z",
     "buildMode": "ci",
     "counts": {
-      "total": 217,
+      "total": 230,
       "totalDocs": 21,
       "totalSpecs": 50,
-      "totalSamples": 132,
-      "totalScenarios": 14
+      "totalSamples": 144,
+      "totalScenarios": 15
     },
     "repo": {
-      "commit": "e36f004ad6a43d12cd1d10710f9815b2a2ec5500",
-      "branch": "release/3",
+      "commit": "0709199c981cecbc33303aad56321f4988a3402a",
+      "branch": "develop",
       "repoUrl": "https://github.com/public-ui/kolibri"
     }
   },
@@ -21,7 +21,7 @@
       "group": "docs",
       "name": "AGENTS",
       "path": "AGENTS.md",
-      "code": "# Agent Instructions\n\nThis repository is a monorepo managed with **pnpm** and **Nx**. It contains multiple packages under `packages/` such as web components, themes, adapters, samples and tooling.\n\n## Handling hints\n\nWe have a monorepo structure with multiple packages, each with its own `package.json`. The root `package.json` contains shared dependencies and scripts. Use `pnpm` commands to manage dependencies and run scripts across packages.\n\n- To install dependencies, use `pnpm i` at the root level. This will install all dependencies for all packages.\n- If you change a dependency in a package:\n  - Use only exact version numbers in `package.json`. Other peers will not be able to use the package if you can use a range version.\n  - You need to run `pnpm i` at the root level. This updates the lockfile and ensures all packages are using the correct versions.\n- Avoid that branch name may contain hidden characters.\n- If something does not work, check in the event of an error whether all dependent submodules have been built.\n- To build a single package faster, run commands with downstream dependents using `pnpm --filter ...<package>` (e.g., `pnpm --filter ...@public-ui/sample-react build`).\n\n## 🚨 Format-first rule\n\n> **Stop before you commit:** run the formatter so CI never rejects your patch for style drift.\n\n1. Run `pnpm format` from the repo root whenever you change code, docs or configs.\n2. If you only touched one package, you may instead run `pnpm --filter <package> format` for a quicker pass.\n3. Re-stage the affected files (`git add -u`) so the formatted result is what lands in the commit.\n\nNo package scripts in this repo need extra flags such as `-- --write`; the scripts already know when to write changes versus just check.\n\n## Semantic Versioning\n\nThis repository follows **Semantic Versioning** (SemVer) for all packages. Each package version is defined in its own `package.json` file. The versioning scheme is as follows:\n\n- **Major version**: Incremented for incompatible API changes.\n- **Minor version**: Incremented for adding functionality in a backwards-compatible manner.\n- **Patch version**: Incremented for backwards-compatible bug fixes.\n\nIf we deprecate a feature, we will mark it as deprecated in the code and documentation, but we will not remove it immediately. Instead, we will provide a migration guide (migration\\*.md) for users to transition to the new feature. Also we provide a migration tool in the `packages/tools/kolibri-cli` package to help with the migration process. You have to add a migration task from the previous version to the new version in the `packages/tools/kolibri-cli/src/migrations` folder. In the migration package, are a lot of migration tasks already implemented, so you can use them as a reference.\n\n## Project Structure\n\n- `packages/components` – Stencil based web components\n  - `packages/components/src/component` – components\n  - `packages/components/src/schema` – schema definitions for all components\n- `packages/samples` – sample applications demonstrating usage\n  - `packages/samples/angular` – Angular sample app; do not edit\n  - `packages/samples/react` – React sample app; all samples; write component samples here\n- `packages/adapters/*` – generated framework integration packages; do not edit\n- `packages/themes` – style themes and assets\n  - `packages/themes/default` – primary maintained standard theme\n  - All other themes are not actively maintained\n- `packages/tools/kolibri-cli` – helper CLI for migration\n- Documentation lives in `docs/`.\n- Do always ignore and do not edit all `assets` folders in all packages, as these are generated by the build process and should not be edited manually. If you need to change something in the assets, you have to change it in the source code and rebuild the package.\n\n## Theming\n\nThe theming is realized with adopted style sheets on web components and will be adopted at the mounted hook of the components. All following styling rules are only relevant for the `components` and `themes` packages.\n\n### The 5 styling layers\n\n1. **A11y Preset layer**: This layer comes out of the `adopted-style-sheets` package and contains the basic styles for accessibility. It is applied to all components.\n2. **Basis Global layer**: This layer contains the basis global styles for all components and comes out of the `@public-ui/components` package. It is applied only component specific layout styles without margins and paddings. Generally, the styling works without colors, as the colors should only be set through the custom Theme Layer.\n3. **Basis Component layer**: This layer contains the basis styles for one component and comes out of the `@public-ui/components` package. It is applied only component specific layout styles without margins and paddings. Generally, the styling works without colors, as the colors should only be set through the custom Theme Layer.\n4. **Theme Global layer**: This layer contains the global styles for all components of a theme and comes out of a own theme package, like `@public-ui/theme-default`.\n5. **Theme Component layer**: This layer contains the component specific styles for one component of a theme and comes out of a own theme package, like `@public-ui/theme-default`.\n\n### Global accessibility styles\n\n```css\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: #{rem(44)};\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of rem(44).\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\t.kol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n```\n\n### Styling rules\n\nThe basis global layer set the default font-size and box-sizing for all components.\n\n```css\n@layer kol-global {\n\t:host {\n\t\tfont-size: rem(16);\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n  ...\n}\n```\n\n### Custom Theming rules\n\nThe custom theme layer is used to set the colors and other theme specific styles. The custom theme layer should not contain any layout styles, as these are already set in the basis global and component layers.\n\nFor example, generally the font-family is set in the theme global layer, on the `:host` element, so that all components inherit the font-family from the theme. The font-size is set in the basis global layer, so that all components inherit the font-size from the basis global layer. But it is possible to set a other base font-size in the theme global layer, if needed.\n\n```css\n@layer kol-theme-global {\n\t:host {\n\t\t--font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);\n\t\t--font-size: var(--kolibri-font-size, #{rem(16)});\n    ...\n\t}\n\n\t:host {\n\t\tfont-size: var(--font-size);\n\n\t\t* {\n\t\t\tfont-family: var(--font-family);\n\t\t}\n\t}\n  ...\n}\n```\n\nIn the theme component layer, you can set what ever you need to realize your own custom style guidelines. For example, you can set the colors, borders, shadows, etc. for the component.\n\n```css\n@layer kol-theme-component {\n  ...\n}\n```\n\n### CSS Custom Properties and SASS Variables\n\nCSS custom properties remain part of the global cascade and are not isolated by the Shadow DOM.\nOverusing them in theme files can collide with variables defined on a host page.\nExpose only well‑prefixed design tokens as custom properties and rely on SASS variables for\ninternal calculations to keep components robust and avoid unintended style leaks.\n\n### General rules for custom themes\n\n- Do not use `!important` in your styles, as this will override the styles of the basis global and component layers.\n- Do only overwrite styling definitions you will really customize. Do not set styling definitions that are already set (redundant) in the basis global and component layers, as this will override the styles of the basis global and component layers.\n- Do not `inherit` styles over the `:host` element, as this will override the styles of the basis global and component layers. This makes your component less robust from outside environment styles. Only the `kol-icon` inherits some specific styles, like `color`, `font-size`, `font-family` and `line-height`, as these are needed for the icon to be displayed correctly inline to this neighbored elements.\n- Do not set the default `font-family`, `font-size` or `box-sizing` in the basis or theme component layer (redundant), as these are already set in the basis global layers. If you need to set a different font-family or font-size, you can do this in the theme global layer.\n- Do not set `margin` or `padding` in the basis global and component layers. If you need to set a different margin or padding, you can do this in the theme global or component layers.\n- Do not use `overflow: hidden` in styling or theming, as it often causes issues for reuse and should be avoided.\n- **Do not use `@layer` declarations in utility files**: Helper files, mixin files, and partial files (starting with `_`) should not contain `@layer` declarations. These files are utilities and should be layer-agnostic. This is enforced by the custom Stylelint rule `kolibri/no-layer-in-utility-files`.\n\n## Samples\n\nThe samples are located in `packages/samples/react` and demonstrate how to use the components in react. Each component has its own folder and the basic sample are in `basic.tsx`. Other stories can be added in the same folder. All samples of a component are registered in the `routes.ts` file.\n\n## Coding Conventions\n\n- Formatting is enforced via **Prettier** with settings defined in `prettier.config.js` (print width 160, single quotes, tabs).\n- `.editorconfig` sets `indent_style = tab` and `max_line_length = 160` for code files. Markdown and YAML files use spaces.\n- ESLint and Stylelint are run using `pnpm lint`. Pre‑commit hooks run `lint-staged` which formats and lints changed files. Lint rules should **not** be disabled via inline comments. Instead, describe the problem and work towards a clean solution.\n- Lists and enumerations in code should be kept in alphanumeric order. This also applies to import specifiers and union type literals.\n- Do not disable ESLint, Stylelint or TypeScript rules inline. Fix the code instead of turning such rules off.\n- ESLint and Stylelint are run using `pnpm lint`. Pre‑commit hooks run `lint-staged` which formats and lints changed files.\n- Lists and enumerations in code should be kept in alphabetical order (see `docs/tutorials/NEW_COMPONENT.md`).\n- Commit messages follow the **Conventional Commits** specification.\n- See also the [Contributing Guide](CONTRIBUTING.md) for more details on coding conventions and best practices.\n- Spell \"KoliBri\" with this casing in all documentation and code. The only exception is the component named KolKolibri.\n- Use ESM import syntax in browser code and scripts whenever supported, instead of `require` imports.\n- Do not create barrel files (e.g. `index.ts` that re-export modules). Import modules directly instead.\n- Do not place constant declarations before import statements; imports must always be at the very top of the file.\n- **Scripts must be platform-independent**: All scripts in the `scripts/` folder must work on Windows, macOS, and Linux without requiring external tools or platform-specific dependencies. Use Node.js built-in modules instead of external command-line tools like `rg`, `grep`, `find`, etc.\n\n## Linting and Formatting\n\n- Run `pnpm lint` to check for linting errors across all packages. This script runs ESLint, Stylelint and TypeScript checks. You can try to automatically fix linting issues with `pnpm lint:eslint --fix`, but this may not resolve all issues.\n- Ensure all packages are built by running `pnpm build` before executing `pnpm lint` or `pnpm test`. Some packages rely on generated artifacts that linting and testing depend on.\n- Run `pnpm format` to format all code files using Prettier. You can try to automatically fix linting issues with `pnpm format -w`, but this may not resolve all issues.\n- If your pull request only modifies Markdown files, skip `pnpm build`, `pnpm lint` and `pnpm test`. Just format the Markdown using `pnpm format` or Prettier.\n\n### Pre-commit checklist\n\n- **Always run `pnpm format` (or `pnpm --filter <package> format` for a single workspace) right before committing.** Formatting failures are one of the most common reasons for blocked quality gates, so make this the last step before `git commit` even for documentation-only changes.\n- After formatting, re-stage affected files with `git add -u` so the formatted content is what gets committed.\n\n## Testing\n\n- Run `pnpm test` from the repository root to execute all unit and integration tests.\n- Visual and snapshot tests can be updated with `pnpm test:update` or via the `update-snapshots.yml` GitHub workflow (see `CONTRIBUTING.md`).\n- Individual packages provide their own test scripts (e.g. `pnpm --filter @public-ui/components test:unit`).\n\n## Pull Request Guidelines\n\n- PR titles should be meaningful as they appear in the release notes.\n- Every PR must link to its issue and contain only changes related to that issue.\n- Ensure automated tests pass and manual testing is completed when required.\n- Update documentation or migration guides if your changes affect them.\n",
+      "code": "# Agent Instructions\n\nThis repository is a monorepo managed with **pnpm** and **Nx**. It contains multiple packages under `packages/` such as web components, themes, adapters, samples and tooling.\n\n## Handling hints\n\nWe have a monorepo structure with multiple packages, each with its own `package.json`. The root `package.json` contains shared dependencies and scripts. Use `pnpm` commands to manage dependencies and run scripts across packages.\n\n- To install dependencies, use `pnpm i` at the root level. This will install all dependencies for all packages.\n- If you change a dependency in a package:\n  - Use only exact version numbers in `package.json`. Other peers will not be able to use the package if you can use a range version.\n  - You need to run `pnpm i` at the root level. This updates the lockfile and ensures all packages are using the correct versions.\n- Never add a `packageManager` field to any `package.json` file.\n- Avoid that branch name may contain hidden characters.\n- If something does not work, check in the event of an error whether all dependent submodules have been built.\n- To build a single package faster, run commands with downstream dependents using `pnpm --filter ...<package>` (e.g., `pnpm --filter ...@public-ui/sample-react build`).\n\n## 🚨 Format-first rule\n\n> **Stop before you commit:** run the formatter so CI never rejects your patch for style drift.\n\n1. Run `pnpm format` from the repo root whenever you change code, docs or configs.\n2. If you only touched one package, you may instead run `pnpm --filter <package> format` for a quicker pass.\n3. Re-stage the affected files (`git add -u`) so the formatted result is what lands in the commit.\n\nNo package scripts in this repo need extra flags such as `-- --write`; the scripts already know when to write changes versus just check.\n\n## Semantic Versioning\n\nThis repository follows **Semantic Versioning** (SemVer) for all packages. Each package version is defined in its own `package.json` file. The versioning scheme is as follows:\n\n- **Major version**: Incremented for incompatible API changes.\n- **Minor version**: Incremented for adding functionality in a backwards-compatible manner.\n- **Patch version**: Incremented for backwards-compatible bug fixes.\n\nIf we deprecate a feature, we will mark it as deprecated in the code and documentation, but we will not remove it immediately. Instead, we will provide a migration guide (migration\\*.md) for users to transition to the new feature. Also we provide a migration tool in the `packages/tools/kolibri-cli` package to help with the migration process. You have to add a migration task from the previous version to the new version in the `packages/tools/kolibri-cli/src/migrations` folder. In the migration package, are a lot of migration tasks already implemented, so you can use them as a reference.\n\n## Project Structure\n\n- `packages/components` – Stencil based web components\n  - `packages/components/src/component` – components\n  - `packages/components/src/schema` – schema definitions for all components\n- `packages/samples` – sample applications demonstrating usage\n  - `packages/samples/angular` – Angular sample app; do not edit\n  - `packages/samples/react` – React sample app; all samples; write component samples here\n- `packages/adapters/*` – generated framework integration packages; do not edit\n- `packages/themes` – style themes and assets\n  - `packages/themes/default` – primary maintained standard theme\n  - All other themes are not actively maintained\n- `packages/tools/kolibri-cli` – helper CLI for migration\n- Documentation lives in `docs/`.\n- Do always ignore and do not edit all `assets` folders in all packages, as these are generated by the build process and should not be edited manually. If you need to change something in the assets, you have to change it in the source code and rebuild the package.\n\n## Theming\n\nThe theming is realized with adopted style sheets on web components and will be adopted at the mounted hook of the components. All following styling rules are only relevant for the `components` and `themes` packages.\n\n### The 5 styling layers\n\n1. **A11y Preset layer**: This layer comes out of the `adopted-style-sheets` package and contains the basic styles for accessibility. It is applied to all components.\n2. **Basis Global layer**: This layer contains the basis global styles for all components and comes out of the `@public-ui/components` package. It is applied only component specific layout styles without margins and paddings. Generally, the styling works without colors, as the colors should only be set through the custom Theme Layer.\n3. **Basis Component layer**: This layer contains the basis styles for one component and comes out of the `@public-ui/components` package. It is applied only component specific layout styles without margins and paddings. Generally, the styling works without colors, as the colors should only be set through the custom Theme Layer.\n4. **Theme Global layer**: This layer contains the global styles for all components of a theme and comes out of a own theme package, like `@public-ui/theme-default`.\n5. **Theme Component layer**: This layer contains the component specific styles for one component of a theme and comes out of a own theme package, like `@public-ui/theme-default`.\n\n### Global accessibility styles\n\n```css\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: #{rem(44)};\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of rem(44).\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\t.kol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n```\n\n### Styling rules\n\nThe basis global layer set the default font-size and box-sizing for all components.\n\n```css\n@layer kol-global {\n\t:host {\n\t\tfont-size: rem(16);\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n  ...\n}\n```\n\n### Custom Theming rules\n\nThe custom theme layer is used to set the colors and other theme specific styles. The custom theme layer should not contain any layout styles, as these are already set in the basis global and component layers.\n\nFor example, generally the font-family is set in the theme global layer, on the `:host` element, so that all components inherit the font-family from the theme. The font-size is set in the basis global layer, so that all components inherit the font-size from the basis global layer. But it is possible to set a other base font-size in the theme global layer, if needed.\n\n```css\n@layer kol-theme-global {\n\t:host {\n\t\t--font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);\n\t\t--font-size: var(--kolibri-font-size, #{rem(16)});\n    ...\n\t}\n\n\t:host {\n\t\tfont-size: var(--font-size);\n\n\t\t* {\n\t\t\tfont-family: var(--font-family);\n\t\t}\n\t}\n  ...\n}\n```\n\nIn the theme component layer, you can set what ever you need to realize your own custom style guidelines. For example, you can set the colors, borders, shadows, etc. for the component.\n\n```css\n@layer kol-theme-component {\n  ...\n}\n```\n\n### CSS Custom Properties and SASS Variables\n\nCSS custom properties remain part of the global cascade and are not isolated by the Shadow DOM.\nOverusing them in theme files can collide with variables defined on a host page.\nExpose only well‑prefixed design tokens as custom properties and rely on SASS variables for\ninternal calculations to keep components robust and avoid unintended style leaks.\n\n### General rules for custom themes\n\n- Do not use `!important` in your styles, as this will override the styles of the basis global and component layers.\n- Do only overwrite styling definitions you will really customize. Do not set styling definitions that are already set (redundant) in the basis global and component layers, as this will override the styles of the basis global and component layers.\n- Do not `inherit` styles over the `:host` element, as this will override the styles of the basis global and component layers. This makes your component less robust from outside environment styles. Only the `kol-icon` inherits some specific styles, like `color`, `font-size`, `font-family` and `line-height`, as these are needed for the icon to be displayed correctly inline to this neighbored elements.\n- Do not set the default `font-family`, `font-size` or `box-sizing` in the basis or theme component layer (redundant), as these are already set in the basis global layers. If you need to set a different font-family or font-size, you can do this in the theme global layer.\n- Do not set `margin` or `padding` in the basis global and component layers. If you need to set a different margin or padding, you can do this in the theme global or component layers.\n- Do not use `overflow: hidden` in styling or theming, as it often causes issues for reuse and should be avoided.\n- **Do not use `@layer` declarations in utility files**: Helper files, mixin files, and partial files (starting with `_`) should not contain `@layer` declarations. These files are utilities and should be layer-agnostic. This is enforced by the custom Stylelint rule `kolibri/no-layer-in-utility-files`.\n\n## Samples\n\nThe samples are located in `packages/samples/react` and demonstrate how to use the components in react. Each component has its own folder and the basic sample are in `basic.tsx`. Other stories can be added in the same folder. All samples of a component are registered in the `routes.ts` file.\n\n## Coding Conventions\n\n- Formatting is enforced via **Prettier** with settings defined in `prettier.config.js` (print width 160, single quotes, tabs).\n- `.editorconfig` sets `indent_style = tab` and `max_line_length = 160` for code files. Markdown and YAML files use spaces.\n- ESLint and Stylelint are run using `pnpm lint`. Pre‑commit hooks run `lint-staged` which formats and lints changed files. Lint rules should **not** be disabled via inline comments. Instead, describe the problem and work towards a clean solution.\n- Lists and enumerations in code should be kept in alphanumeric order. This also applies to import specifiers and union type literals.\n- Do not disable ESLint, Stylelint or TypeScript rules inline. Fix the code instead of turning such rules off.\n- ESLint and Stylelint are run using `pnpm lint`. Pre‑commit hooks run `lint-staged` which formats and lints changed files.\n- Lists and enumerations in code should be kept in alphabetical order (see `docs/tutorials/NEW_COMPONENT.md`).\n- Commit messages follow the **Conventional Commits** specification.\n- See also the [Contributing Guide](CONTRIBUTING.md) for more details on coding conventions and best practices.\n- Spell \"KoliBri\" with this casing in all documentation and code. The only exception is the component named KolKolibri.\n- Use ESM import syntax in browser code and scripts whenever supported, instead of `require` imports.\n- Do not create barrel files (e.g. `index.ts` that re-export modules). Import modules directly instead.\n- Do not place constant declarations before import statements; imports must always be at the very top of the file.\n- **Scripts must be platform-independent**: All scripts in the `scripts/` folder must work on Windows, macOS, and Linux without requiring external tools or platform-specific dependencies. Use Node.js built-in modules instead of external command-line tools like `rg`, `grep`, `find`, etc.\n\n## Linting and Formatting\n\n- Run `pnpm lint` to check for linting errors across all packages. This script runs ESLint, Stylelint and TypeScript checks. You can try to automatically fix linting issues with `pnpm lint:eslint --fix`, but this may not resolve all issues.\n- Ensure all packages are built by running `pnpm build` before executing `pnpm lint` or `pnpm test`. Some packages rely on generated artifacts that linting and testing depend on.\n- Run `pnpm format` to format all code files using Prettier. You can try to automatically fix linting issues with `pnpm format -w`, but this may not resolve all issues.\n- If your pull request only modifies Markdown files, skip `pnpm build`, `pnpm lint` and `pnpm test`. Just format the Markdown using `pnpm format` or Prettier.\n\n### Pre-commit checklist\n\n- **Always run `pnpm format` (or `pnpm --filter <package> format` for a single workspace) right before committing.** Formatting failures are one of the most common reasons for blocked quality gates, so make this the last step before `git commit` even for documentation-only changes.\n- After formatting, re-stage affected files with `git add -u` so the formatted content is what gets committed.\n\n## Testing\n\n- Run `pnpm test` from the repository root to execute all unit and integration tests.\n- Visual and snapshot tests can be updated with `pnpm test:update` or via the `update-snapshots.yml` GitHub workflow (see `CONTRIBUTING.md`).\n- Individual packages provide their own test scripts (e.g. `pnpm --filter @public-ui/components test:unit`).\n\n## Pull Request Guidelines\n\n- PR titles should be meaningful as they appear in the release notes.\n- Every PR must link to its issue and contain only changes related to that issue.\n- Ensure automated tests pass and manual testing is completed when required.\n- Update documentation or migration guides if your changes affect them.\n",
       "kind": "doc"
     },
     {
@@ -45,7 +45,7 @@
       "group": "docs",
       "name": "BREAKING_CHANGES.v4",
       "path": "docs/BREAKING_CHANGES.v4.md",
-      "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## 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\n### Toast System\n\n- The `variant` property has been removed from Toast objects. All toasts now use the `card` variant by default.\n- The `defaultVariant` option has been removed from `ToasterService.getInstance()`. The service no longer accepts variant configuration.\n\n**Before:**\n\n```typescript\n// ToasterService configuration\nconst toaster = ToasterService.getInstance(document, {\n\tdefaultVariant: 'card', // ← removed\n});\n\n// Toast with variant\ntoaster.enqueue({\n\tdescription: 'Message',\n\tlabel: 'Label',\n\ttype: 'info',\n\tvariant: 'card', // ← removed\n});\n```\n\n**After:**\n\n```typescript\n// ToasterService configuration\nconst toaster = ToasterService.getInstance(document);\n\n// Toast without variant (uses card variant automatically)\ntoaster.enqueue({\n\tdescription: 'Message',\n\tlabel: 'Label',\n\ttype: 'info',\n});\n```\n\n### 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",
+      "code": "# Breaking Changes for version 4\n\n## Introduction\n\nNew major versions of KoliBri are developed with the goal of simplifying maintenance and support and promoting further development.\n\nFor more information, see the [KoliBri Maintenance and Support Strategy](https://github.com/public-ui/kolibri/blob/develop/MIGRATION.md).\n\n## Loader entry point\n\nImport the component loader from `@public-ui/components/loader`. The previous `@public-ui/components/dist/loader` path is no longer part of the public API surface.\n\n**Before:**\n\n```ts\nimport { defineCustomElements } from '@public-ui/components/dist/loader';\n```\n\n**After:**\n\n```ts\nimport { defineCustomElements } from '@public-ui/components/loader';\n```\n\n## Changed Components\n\n### All components\n\n- The `_id` prop has been removed from components that use Shadow DOM. IDs within a shadow tree are not visible outside, so each component now generates its own stable ID internally and manages all references. For tests or external lookups, set an `id` on the host element instead.\n- The `_msg` prop no longer supports the `_label` and `_variant` options. Messages always render with the `msg` variant and without a label.\n- Input messages only render once the field is marked as `_touched`, regardless of the message type. Ensure `_touched` is set when a message should be displayed.\n\n### kol-combobox & kol-single-select\n\n- `_hideClearButton` has been replaced with `_hasClearButton` (default: `true`). Set `_hasClearButton=\"false\"` to hide the clear button while keeping existing values intact. The migration CLI rewrites `_hide-clear-button` attributes and `_hideClearButton` props automatically, flipping boolean values so behaviour stays the same.\n\n### kol-nav\n\n- The `orientation` property has been removed from kol-nav. It is now always in vertical mode by default.\n\n**Before:**\n\n```html\n<kol-nav _orientation=\"vertical\" _label=\"\" _links=\"[]\"></kol-nav>\n```\n\n**After (v4):**\n\n```html\n<kol-nav _label=\"\" _links=\"[]\"></kol-nav>\n```\n\n### Toast System\n\n- The `variant` property has been removed from Toast objects. All toasts now use the `card` variant by default.\n- The `defaultVariant` option has been removed from `ToasterService.getInstance()`. The service no longer accepts variant configuration.\n\n**Before:**\n\n```typescript\n// ToasterService configuration\nconst toaster = ToasterService.getInstance(document, {\n\tdefaultVariant: 'card', // ← removed\n});\n\n// Toast with variant\ntoaster.enqueue({\n\tdescription: 'Message',\n\tlabel: 'Label',\n\ttype: 'info',\n\tvariant: 'card', // ← removed\n});\n```\n\n**After:**\n\n```typescript\n// ToasterService configuration\nconst toaster = ToasterService.getInstance(document);\n\n// Toast without variant (uses card variant automatically)\ntoaster.enqueue({\n\tdescription: 'Message',\n\tlabel: 'Label',\n\ttype: 'info',\n});\n```\n\n#### kol-table-stateless\n\nThe `onSelectionChange` callback now 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\n\nThe `onSelectionChange` callback now always returns `KoliBriTableDataType[] | null` (array of objects or null):\n\n**Before (v3):**\n\n```typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableDataType[] | KoliBriTableDataType | null) => {\n\t// Type guard required for single selection\n\tif (Array.isArray(selection)) {\n\t\tsetSelectedData(selection);\n\t} else if (selection !== null) {\n\t\tsetSelectedData([selection]);\n\t}\n};\n```\n\n**After (v4):**\n\n````typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableDataType[] | null) => {\n\t// Direct usage - always an array or null\n\tsetSelectedData(selection || []);\n};\n### Pagination\n\n- The pagination text (e.g., \"Page 1 of 10\") is now integrated into the Pagination component itself. Previously, this text had to be provided by the application code or was handled by the Stateful Table component.\n- The `_page` property now automatically generates and displays the pagination information text within the component.\n\n**Before (Version 3):**\n\n```typescript\n// Application code had to provide pagination text\n<kol-pagination _page={currentPage} _total={totalPages}></kol-pagination>\n<div>Page {currentPage} of {totalPages}</div>\n\n// Or it was handled by Stateful Table\n<kol-table-stateful></kol-table-stateful>\n````\n\n**After (Version 4):**\n\n```typescript\n// Pagination component handles text internally\n<kol-pagination _page={currentPage} _total={totalPages}></kol-pagination>\n// Text is automatically displayed within the component\n```\n",
       "kind": "doc"
     },
     {
@@ -77,7 +77,7 @@
       "group": "docs",
       "name": "CONTRIBUTING",
       "path": "CONTRIBUTING.md",
-      "code": "# Contributing\n\nWe would love for you to contribute to **KoliBri**and help make it even better than it is today! As a contributor, we ask that you follow the following guidelines:\n\n- [Contributing](#contributing)\n  - [Code of Conduct](#code-of-conduct)\n  - [Questions and problems](#questions-and-problems)\n  - [Report an error](#report-an-error)\n  - [Further development](#further-development)\n    - [Git flow](#git-flow)\n    - [Developing](#developing)\n    - [Develop new component](#develop-new-component)\n    - [Switching between branches](#switching-between-branches)\n    - [Back porting to older Major-Versions](#back-porting-to-older-major-versions)\n    - [Snapshot Testing for Visual Changes](#snapshot-testing-for-visual-changes)\n      - [How to Update Snapshots](#how-to-update-snapshots)\n\n## Code of Conduct\n\nHelp us keep **KoliBri** open and inclusive. Please read and follow our [Code of Conduct](CODE_OF_CONDUCT.md).\n\n## Questions and problems\n\nPlease do not create issue tickets for general support questions. We want to use the ticket system for tracking bug reports and feature requests.\n\nInstead, we recommend first checking [Stack Overflow](https://stackoverflow.com/questions/tagged/kolibri) to see whether someone else has already solved the question or problem. You can also create new questions with the tag “hummingbird”.\nTo save your time and ours, we will close all general questions in the ticket system and redirect those asking to Stack Overflow.\n\nIf you would like to contact us, please send us an email to [kolibri@itzbund.de](kolibri@itzbund.de).\n\n## Report an error\n\nIf you find an error in the source code, you can report it to our ticket system.\n\nIt would be even better if you suggested a solution to us as a pull request.\n\n## Further development\n\nYou can request new features by submitting an issue to our ticket system. If you would like to implement a new function, please note the following steps for further action:\n\n- It is helpful to read the KoliBri [architecture concept](https://public-ui.github.io/docs/concepts/architecture) before implementing.\n- For major innovations, please create a ticket with the description of the new function.\n- For small innovations, you can offer and justify the implementation directly as a pull request.\n\n### Git flow\n\nWe work according to the Git flow: https://medium.com/android-news/gitflow-with-github-c675aa4f606a\n\n### Developing\n\n1. For contributing, you need a [GitHub account](https://github.com/login)\n2. Fork [our repository](https://github.com/public-ui/kolibri) on GitHub\n3. Open your preferred command line interface\n4. Clone the forked repository via HTTPS to your local machine. The VS Code GitHub extension can handle authentication.\n5. Navigate the project root directory\n6. Create a new branch for your changes\n7. Install Node.js version 22\n8. [Install PNPM](https://pnpm.io/installation) on you local machine\n9. Install all packages with `pnpm i`\n10. Build all packages within the mono repository `pnpm -r build`\n11. Navigate to the desired package in our monorepo\n12. When you want to start the project navigate to `packages/components/` and run `pnpm dev`\n13. To watch for changes navigate to `packages/samples/react/` and execute `pnpm start`. `http://localhost:8080/` will open automatically\n\n### VS Code Setup\n\nWe recommend using [Visual Studio Code](https://code.visualstudio.com/):\n\n- Install the Prettier and ESLint extensions.\n- Enable \"Format on Save\" in your settings.\n\n### Tests\n\nAll tests run via GitHub Actions when you open a pull request. Monitor them under the **Actions** tab.\n\n### Develop new component\n\nRefer to [new component](docs/tutorials/NEW_COMPONENT.md) tutorial.\n\n### Switching between branches\n\nWhen changing the current working branch, it is important to reinstall all dependencies, as these may have changed. It is very important that all packages are built when working on dependents. This is because the packages always use the built state of the referenced packages in the mono repo.\nTo avoid unexpected problems, it is therefore always advisable to build all packages once. This can be done with these steps:\n\n- Reinstall all dependencies: `pnpm i`\n- Build all packages: `pnpm -r build`\n- You can then switch to the package to be processed and start it with `pnpm start`.\n\nIf it is also necessary to edit dependent packages such as `@public-ui/components`, these must be rebuilt for each change. Such packages offer the `dev` script for this purpose. This automatically rebuilds the package after each change.\n\n### Back porting to older Major-Versions\n\nBy default, development is carried out in the `development` branch for the following version. However, if it becomes necessary to provide an issue for an older major release, such as version 1.x.x, the code change must also be merged into the corresponding release branch. In this case, it would be the `release/1` branch. It is important that the branch that was created from the `develop` is not merged into the release branch, as otherwise the next patch version will receive all the changes from the current development status.\nThe simplest procedure is therefore to create a new branch from the release branch (e.g. `release/1`) and transfer the individual commits of the feature branch from the `develop` to the new branch using cherry-picking. This branch can then be merged into the release branch as normal with a new pull request.\n\n### Snapshot Testing for Visual Changes\n\nThe Continuous Integration (CI) pipeline incorporates automated visual regression testing using the React sample app across all available themes.\n\nWhen introducing visual modifications to components, themes, or the React sample app, initial test failures are expected. To address this, the\n`update-snapshots.yml` action on GitHub should be executed, followed by a **careful review** of the changes.\n\n#### How to Update Snapshots\n\nThe following methods can be used to update the snapshots.\n\n1. **GitHub website:** Update the snapshots directly on the GitHub website by following these steps.\n\n- Navigate to the `Actions` tab in the `kolibri` repository.\n- Execute the `03 - Update Snapshots` action.\n- Select the desired branch in which you want to update the snapshots.\n- The workflow checks out the branch, updates all snapshot files, and commits the changes to that branch.\n\n2. **Terminal Command:** Use the [GitHub CLI (gh)](https://cli.github.com/) to run the `update-snapshots.yml` action from the local terminal. This method is recommended for updating snapshots on the current branch without navigating to the GitHub website. For terminal convenience, the [GitHub CLI (gh)](https://cli.github.com/) needs to be installed.\n\n- Run the following command within the project directory to update the snapshots in your checked-out branch:\n  ```bash\n  gh workflow run update-snapshots.yml -r `git rev-parse --abbrev-ref HEAD`\n  ```\n- If your want to delete all snapshots before regenerating them add `-f purge_snapshots=true` to the command:\n  ```bash\n  gh workflow run update-snapshots.yml -r `git rev-parse --abbrev-ref HEAD` -f purge_snapshots=true\n  ```\n- You can also run the action on a different branch by specifying the another target branch with the `-r <branch_name>` flag. For example, to update snapshots on the `main` branch:\n  ```bash\n  gh workflow run update-snapshots.yml -r main\n  ```\n\nThese steps ensure that visual snapshots are updated systematically, maintaining the integrity of the testing process.\n",
+      "code": "# Contributing\n\nWe would love for you to contribute to **KoliBri**and help make it even better than it is today! As a contributor, we ask that you follow the following guidelines:\n\n- [Contributing](#contributing)\n  - [Code of Conduct](#code-of-conduct)\n  - [Questions and problems](#questions-and-problems)\n  - [Report an error](#report-an-error)\n  - [Further development](#further-development)\n    - [Git flow](#git-flow)\n    - [Developing](#developing)\n    - [Develop new component](#develop-new-component)\n    - [Switching between branches](#switching-between-branches)\n    - [Back porting to older Major-Versions](#back-porting-to-older-major-versions)\n    - [Snapshot Testing for Visual Changes](#snapshot-testing-for-visual-changes)\n      - [How to Update Snapshots](#how-to-update-snapshots)\n\n## Code of Conduct\n\nHelp us keep **KoliBri** open and inclusive. Please read and follow our [Code of Conduct](CODE_OF_CONDUCT.md).\n\n## Questions and problems\n\nPlease do not create issue tickets for general support questions. We want to use the ticket system for tracking bug reports and feature requests.\n\nInstead, we recommend first checking [Stack Overflow](https://stackoverflow.com/questions/tagged/kolibri) to see whether someone else has already solved the question or problem. You can also create new questions with the tag “hummingbird”.\nTo save your time and ours, we will close all general questions in the ticket system and redirect those asking to Stack Overflow.\n\nIf you would like to contact us, please send us an email to [kolibri@itzbund.de](mailto:kolibri@itzbund.de).\n\n## Report an error\n\nIf you find an error in the source code, you can report it to our ticket system.\n\nIt would be even better if you suggested a solution to us as a pull request.\n\n## Further development\n\nYou can request new features by submitting an issue to our ticket system. If you would like to implement a new function, please note the following steps for further action:\n\n- It is helpful to read the KoliBri [architecture concept](https://public-ui.github.io/docs/concepts/architecture) before implementing.\n- For major innovations, please create a ticket with the description of the new function.\n- For small innovations, you can offer and justify the implementation directly as a pull request.\n\n### Git flow\n\nWe work according to the Git flow: https://medium.com/android-news/gitflow-with-github-c675aa4f606a\n\n### Developing\n\n1. For contributing, you need a [GitHub account](https://github.com/login)\n2. Fork [our repository](https://github.com/public-ui/kolibri) on GitHub\n3. Open your preferred command line interface\n4. Clone the forked repository via HTTPS to your local machine. The VS Code GitHub extension can handle authentication.\n5. Navigate the project root directory\n6. Create a new branch for your changes\n7. Install Node.js version 22\n8. [Install PNPM](https://pnpm.io/installation) on you local machine\n9. Install all packages with `pnpm i`\n10. Build all packages within the mono repository `pnpm -r build`\n11. Navigate to the desired package in our monorepo\n12. When you want to start the project navigate to `packages/components/` and run `pnpm dev`\n13. To watch for changes navigate to `packages/samples/react/` and execute `pnpm start`. `http://localhost:8080/` will open automatically\n\n### VS Code Setup\n\nWe recommend using [Visual Studio Code](https://code.visualstudio.com/):\n\n- Install the Prettier and ESLint extensions.\n- Enable \"Format on Save\" in your settings.\n\n### Tests\n\nAll tests run via GitHub Actions when you open a pull request. Monitor them under the **Actions** tab.\n\n### Develop new component\n\nRefer to [new component](docs/tutorials/NEW_COMPONENT.md) tutorial.\n\n### Switching between branches\n\nWhen changing the current working branch, it is important to reinstall all dependencies, as these may have changed. It is very important that all packages are built when working on dependents. This is because the packages always use the built state of the referenced packages in the mono repo.\nTo avoid unexpected problems, it is therefore always advisable to build all packages once. This can be done with these steps:\n\n- Reinstall all dependencies: `pnpm i`\n- Build all packages: `pnpm -r build`\n- You can then switch to the package to be processed and start it with `pnpm start`.\n\nIf it is also necessary to edit dependent packages such as `@public-ui/components`, these must be rebuilt for each change. Such packages offer the `dev` script for this purpose. This automatically rebuilds the package after each change.\n\n### Back porting to older Major-Versions\n\nBy default, development is carried out in the `development` branch for the following version. However, if it becomes necessary to provide an issue for an older major release, such as version 1.x.x, the code change must also be merged into the corresponding release branch. In this case, it would be the `release/1` branch. It is important that the branch that was created from the `develop` is not merged into the release branch, as otherwise the next patch version will receive all the changes from the current development status.\nThe simplest procedure is therefore to create a new branch from the release branch (e.g. `release/1`) and transfer the individual commits of the feature branch from the `develop` to the new branch using cherry-picking. This branch can then be merged into the release branch as normal with a new pull request.\n\n### Snapshot Testing for Visual Changes\n\nThe Continuous Integration (CI) pipeline incorporates automated visual regression testing using the React sample app across all available themes.\n\nWhen introducing visual modifications to components, themes, or the React sample app, initial test failures are expected. To address this, the\n`update-snapshots.yml` action on GitHub should be executed, followed by a **careful review** of the changes.\n\n#### How to Update Snapshots\n\nThe following methods can be used to update the snapshots.\n\n1. **GitHub website:** Update the snapshots directly on the GitHub website by following these steps.\n\n- Navigate to the `Actions` tab in the `kolibri` repository.\n- Execute the `03 - Update Snapshots` action.\n- Select the desired branch in which you want to update the snapshots.\n- The workflow checks out the branch, updates all snapshot files, and commits the changes to that branch.\n\n2. **Terminal Command:** Use the [GitHub CLI (gh)](https://cli.github.com/) to run the `update-snapshots.yml` action from the local terminal. This method is recommended for updating snapshots on the current branch without navigating to the GitHub website. For terminal convenience, the [GitHub CLI (gh)](https://cli.github.com/) needs to be installed.\n\n- Run the following command within the project directory to update the snapshots in your checked-out branch:\n  ```bash\n  gh workflow run update-snapshots.yml -r `git rev-parse --abbrev-ref HEAD`\n  ```\n- If your want to delete all snapshots before regenerating them add `-f purge_snapshots=true` to the command:\n  ```bash\n  gh workflow run update-snapshots.yml -r `git rev-parse --abbrev-ref HEAD` -f purge_snapshots=true\n  ```\n- You can also run the action on a different branch by specifying the another target branch with the `-r <branch_name>` flag. For example, to update snapshots on the `main` branch:\n  ```bash\n  gh workflow run update-snapshots.yml -r main\n  ```\n\nThese steps ensure that visual snapshots are updated systematically, maintaining the integrity of the testing process.\n",
       "kind": "doc"
     },
     {
@@ -109,7 +109,7 @@
       "group": "docs",
       "name": "HOWTO_REGISTER_COMPONENTS_AND_THEMES",
       "path": "docs/HOWTO_REGISTER_COMPONENTS_AND_THEMES.md",
-      "code": "# Registering KoliBri Components and Themes\n\nKoliBri Web Components ship without side effects so that you can decide _when_ and _how_ to load them.\nEvery runtime—vanilla JavaScript, React, Angular, Vue, etc.—must explicitly register the component set **and** at least one theme before rendering any `<kol-*>` tag. The Model Context Protocol (MCP) server exposes this guide under the concept identifier `docs/HOWTO_REGISTER_COMPONENTS_AND_THEMES` so KI agents can retrieve the exact steps.\n\n## 1. Install the packages you need\n\nInstall the component bundle plus the theme (or themes) you want to offer to your users:\n\n```bash\npnpm add @public-ui/components @public-ui/theme-default\n```\n\n> ℹ️ Replace `@public-ui/theme-default` with another theme package (e.g. `@public-ui/theme-ecl`) if you prefer a different look.\n\n## 2. Call `register` during application bootstrap\n\n```ts\nimport { register } from '@public-ui/components';\nimport { defineCustomElements } from '@public-ui/components/dist/loader';\nimport { DEFAULT } from '@public-ui/theme-default';\n\nawait register(DEFAULT, defineCustomElements);\n```\n\n- `register` wires up the custom elements and installs the provided theme(s).\n- `defineCustomElements` is generated by Stencil and registers the underlying HTML custom elements. Pass an empty array (`[]`) if your framework adapter handles element definition for you.\n- Awaiting the promise ensures the registry is ready before you render components.\n\n## 3. Register multiple themes (optional)\n\nYou can pass an array when you want to ship several themes at once:\n\n```ts\nimport { register } from '@public-ui/components';\nimport { defineCustomElements } from '@public-ui/components/dist/loader';\nimport { DEFAULT } from '@public-ui/theme-default';\nimport { ECL } from '@public-ui/theme-ecl';\n\nawait register([DEFAULT, ECL], defineCustomElements);\n```\n\nSwitching themes at runtime works through the `kol-theme` attribute—no additional registration call is required.\n\n## 4. Framework-specific notes\n\n- **React / Solid / Vue**: Use the official adapters (`@public-ui/react`, `@public-ui/solid`, `@public-ui/vue`). They wrap `register` for you, but you still need to call it once in your app entry point before rendering.\n- **Angular**: Install `@public-ui/angular` and follow the schematic. It invokes `register` during the Angular bootstrapping phase.\n- **Static HTML / plain JS**: Load the ESM bundles from a CDN and call `register` with `defineCustomElements` inside a `<script type=\"module\">` block.\n\n## 5. Troubleshooting\n\n- **`<kol-button>` renders as plain text** \\\n  Components were not registered. Call `register(...)` before rendering or ensure the promise resolved.\n- **Components use fallback styling** \\\n  No theme was registered. Pass a theme object (e.g. `DEFAULT`) to `register`.\n- **Duplicate custom element definition error** \\\n  `defineCustomElements` executed twice. Call `register` only once per page load or pass `[]` when an adapter already defines the elements.\n\n## 6. Quick reference for KI agents\n\n1. Install `@public-ui/components` + at least one theme package.\n2. Import `register` from `@public-ui/components`.\n3. Import `defineCustomElements` unless your integration takes care of it.\n4. Pass a theme (or an array of themes) and the element loader to `register`.\n5. Await the promise before rendering `<kol-*>` components.\n\nKeep this checklist handy; the MCP endpoint will always return the latest version of this guide.\n",
+      "code": "# Registering KoliBri Components and Themes\n\nKoliBri Web Components ship without side effects so that you can decide _when_ and _how_ to load them.\nEvery runtime—vanilla JavaScript, React, Angular, Vue, etc.—must explicitly register the component set **and** at least one theme before rendering any `<kol-*>` tag. The Model Context Protocol (MCP) server exposes this guide under the concept identifier `docs/HOWTO_REGISTER_COMPONENTS_AND_THEMES` so KI agents can retrieve the exact steps.\n\n## 1. Install the packages you need\n\nInstall the component bundle plus the theme (or themes) you want to offer to your users:\n\n```bash\npnpm add @public-ui/components @public-ui/theme-default\n```\n\n> ℹ️ Replace `@public-ui/theme-default` with another theme package (e.g. `@public-ui/theme-ecl`) if you prefer a different look.\n\n## 2. Call `register` during application bootstrap\n\n```ts\nimport { register } from '@public-ui/components';\nimport { defineCustomElements } from '@public-ui/components/loader';\nimport { DEFAULT } from '@public-ui/theme-default';\n\nawait register(DEFAULT, defineCustomElements);\n```\n\n- `register` wires up the custom elements and installs the provided theme(s).\n- `defineCustomElements` is generated by Stencil and registers the underlying HTML custom elements. Pass an empty array (`[]`) if your framework adapter handles element definition for you.\n- Awaiting the promise ensures the registry is ready before you render components.\n\n## 3. Register multiple themes (optional)\n\nYou can pass an array when you want to ship several themes at once:\n\n```ts\nimport { register } from '@public-ui/components';\nimport { defineCustomElements } from '@public-ui/components/loader';\nimport { DEFAULT } from '@public-ui/theme-default';\nimport { ECL } from '@public-ui/theme-ecl';\n\nawait register([DEFAULT, ECL], defineCustomElements);\n```\n\nSwitching themes at runtime works through the `kol-theme` attribute—no additional registration call is required.\n\n## 4. Framework-specific notes\n\n- **React / Solid / Svelte / Vue**: Use the official adapters (`@public-ui/react`, `@public-ui/solid`, `@public-ui/svelte`, `@public-ui/vue`). They wrap `register` for you, but you still need to call it once in your app entry point before rendering.\n- **Angular**: Install `@public-ui/angular` and follow the schematic. It invokes `register` during the Angular bootstrapping phase.\n- **Static HTML / plain JS**: Load the ESM bundles from a CDN and call `register` with `defineCustomElements` inside a `<script type=\"module\">` block.\n\n## 5. Troubleshooting\n\n- **`<kol-button>` renders as plain text** \\\n  Components were not registered. Call `register(...)` before rendering or ensure the promise resolved.\n- **Components use fallback styling** \\\n  No theme was registered. Pass a theme object (e.g. `DEFAULT`) to `register`.\n- **Duplicate custom element definition error** \\\n  `defineCustomElements` executed twice. Call `register` only once per page load or pass `[]` when an adapter already defines the elements.\n\n## 6. Quick reference for KI agents\n\n1. Install `@public-ui/components` + at least one theme package.\n2. Import `register` from `@public-ui/components`.\n3. Import `defineCustomElements` unless your integration takes care of it.\n4. Pass a theme (or an array of themes) and the element loader to `register`.\n5. Await the promise before rendering `<kol-*>` components.\n\nKeep this checklist handy; the MCP endpoint will always return the latest version of this guide.\n",
       "kind": "doc"
     },
     {
@@ -125,7 +125,7 @@
       "group": "docs",
       "name": "MIGRATION",
       "path": "MIGRATION.md",
-      "code": "# Migration\n\n## Introduction\n\nNew major versions of KoliBri are developed with the aim of simplifying maintenance and support and promoting further development.\n\nThis means that components, features or functionalities may be removed and technological prerequisites created to promote future innovative change.\n\n- **Maintenance and care strategy:**\n\n  We will always maintain the latest and previous major version of KoliBri. This means that we will fix bugs and close security gaps for these versions. For all other versions, we will no longer provide bug fixes or security updates without further notice.\n\n- **Further development:**\n\n  We will always continue to develop the latest major version of KoliBri. This means that we will provide new features and functionalities for these versions. For all other versions, we will no longer provide any new features or functionalities without further ado.\n\n- **Save an executable version before migration:**\n\n  Before the migration takes place, we recommend checking in an executable version so that there are no uncommitted changes to the source code to be migrated. This means that all changes can be easily tracked and checked during and after the migration.\n\n- **Migrationstool:**\n\n  We provide a migration tool that generally supports the migration of source code with KoliBri. This tool is able to migrate most breaking changes automatically. Further information can be found in the [Tool-Dokumentation (EN)](https://www.npmjs.com/package/@public-ui/kolibri-cli).\n\n- **Help and feedback:**\n\n  If there are any problems with the migration, we are happy to help. Please open an [Issue on GitHub](https://github.com/public-ui/kolibri/issues/new/choose).\n\n## Migration from version 1 to version 2\n\n### Notes on upgrading to version 2\n\n1. **New features in version 2 already available from version 1.7:**\n\n   Most of the new features introduced in version 2 are already available from version 1.7 and higher. This means that applications based on version 1.7 or higher may already have the necessary functions to enable a smooth migration.\n\n2. **Removed properties, components and functionalities were already marked as obsolete in version 1.7 and higher:**\n\n   All features, components and functionalities that were removed in version 2 were already marked as deprecated in version 1.7 and higher. So if you have regularly updated your code base, you should already be prepared to replace these elements.\n\n3. **Migration from version 1.7 minimizes potential changes:**\n\n   A migration from version 1.7 and higher to version 2 will probably require the least adjustments. The likelihood of incompatibilities is low, as most changes and removals have already been marked as obsolete in previous versions.\n\n4. **Migration from version 1.4 is possible:**\n\n   Although a migration from version 1.7 is recommended, it is also possible to migrate from version 1.4 to version 2. Please note, however, that this may require additional adjustments, as some of the necessary functions may only be available from version 1.7.\n\n5. **Note simplified registration:**\n\n   We have simplified the modularization of KoliBri in version 1 and for version 2. The module `@public-ui/core` has been removed and the functionalities moved to the module `@public-ui/components`.\n\n```diff\n  - import { register } from '@public-ui/core';\n  + import { register } from '@public-ui/components';\n  import { defineCustomElements } from '@public-ui/components/dist/loader';\n  import { MyTheme } from '...';\n  await register(MyTheme, defineCustomElements);\n```\n\n### Breaking changes for version 2\n\nYou can find more information about Breaking Changes in the documentation [BREAKING_CHANGES.v2.md (EN)](https://github.com/public-ui/kolibri/blob/develop/docs/BREAKING_CHANGES.v2.md).\n\n### Breaking changes for version 3\n\nYou can find more information about Breaking Changes in the documentation [BREAKING_CHANGES.v3.md (EN)](https://github.com/public-ui/kolibri/blob/develop/docs/BREAKING_CHANGES.v3.md).\n\n### Breaking changes for version 4\n\nYou can find more information about Breaking Changes in the documentation [BREAKING_CHANGES.v4.md (EN)](https://github.com/public-ui/kolibri/blob/develop/docs/BREAKING_CHANGES.v4.md).\n\n## Perform migration\n\n> [!TIP]\n> We recommend carrying out the migration with the migration tool. This tool is able to migrate most breaking changes automatically. Further information can be found in the [Tool-Dokumentation (EN)](https://www.npmjs.com/package/@public-ui/kolibri-cli).\n\n### Migration with migration tool\n\n1. **Preparation:**\n\n   The project is on an earlier version, all dependencies are installed, the project is executable and all changes are checked in and safely pushed.\n\n2. **Execute migration:**\n\n   Execute the following command to perform the migration: `npx @public-ui/kolibri-cli migrate src`\n\n3. **Check migration:**\n\n   Check the changes and run the application to make sure everything works as expected.\n\n### Perform migration manually\n\n1. **Preparation:**\n\n   The project is on an earlier version, all dependencies are installed, the project is executable and all changes are checked in and safely pushed.\n\n2. **Perform migration:**\n\n   Carry out the migration by making the breaking changes in the respective documentation.\n",
+      "code": "# Migration\n\n## Introduction\n\nNew major versions of KoliBri are developed with the aim of simplifying maintenance and support and promoting further development.\n\nThis means that components, features or functionalities may be removed and technological prerequisites created to promote future innovative change.\n\n- **Maintenance and care strategy:**\n\n  We will always maintain the latest and previous major version of KoliBri. This means that we will fix bugs and close security gaps for these versions. For all other versions, we will no longer provide bug fixes or security updates without further notice.\n\n- **Further development:**\n\n  We will always continue to develop the latest major version of KoliBri. This means that we will provide new features and functionalities for these versions. For all other versions, we will no longer provide any new features or functionalities without further ado.\n\n- **Save an executable version before migration:**\n\n  Before the migration takes place, we recommend checking in an executable version so that there are no uncommitted changes to the source code to be migrated. This means that all changes can be easily tracked and checked during and after the migration.\n\n- **Migrationstool:**\n\n  We provide a migration tool that generally supports the migration of source code with KoliBri. This tool is able to migrate most breaking changes automatically. Further information can be found in the [Tool-Dokumentation (EN)](https://www.npmjs.com/package/@public-ui/kolibri-cli).\n\n  > [!NOTE]\n  > The migration tool currently covers React projects (`.jsx`/`.tsx`), Vue single-file components (`.vue`), and HTML/XHTML template projects (for example Angular templates or vanilla custom elements).\n\n- **Help and feedback:**\n\n  If there are any problems with the migration, we are happy to help. Please open an [Issue on GitHub](https://github.com/public-ui/kolibri/issues/new/choose).\n\n## Migration from version 1 to version 2\n\n### Notes on upgrading to version 2\n\n1. **New features in version 2 already available from version 1.7:**\n\n   Most of the new features introduced in version 2 are already available from version 1.7 and higher. This means that applications based on version 1.7 or higher may already have the necessary functions to enable a smooth migration.\n\n2. **Removed properties, components and functionalities were already marked as obsolete in version 1.7 and higher:**\n\n   All features, components and functionalities that were removed in version 2 were already marked as deprecated in version 1.7 and higher. So if you have regularly updated your code base, you should already be prepared to replace these elements.\n\n3. **Migration from version 1.7 minimizes potential changes:**\n\n   A migration from version 1.7 and higher to version 2 will probably require the least adjustments. The likelihood of incompatibilities is low, as most changes and removals have already been marked as obsolete in previous versions.\n\n4. **Migration from version 1.4 is possible:**\n\n   Although a migration from version 1.7 is recommended, it is also possible to migrate from version 1.4 to version 2. Please note, however, that this may require additional adjustments, as some of the necessary functions may only be available from version 1.7.\n\n5. **Note simplified registration:**\n\n   We have simplified the modularization of KoliBri in version 1 and for version 2. The module `@public-ui/core` has been removed and the functionalities moved to the module `@public-ui/components`.\n\n```diff\n  - import { register } from '@public-ui/core';\n  + import { register } from '@public-ui/components';\n  import { defineCustomElements } from '@public-ui/components/loader';\n  import { MyTheme } from '...';\n  await register(MyTheme, defineCustomElements);\n```\n\n### Breaking changes for version 2\n\nYou can find more information about Breaking Changes in the documentation [BREAKING_CHANGES.v2.md (EN)](https://github.com/public-ui/kolibri/blob/develop/docs/BREAKING_CHANGES.v2.md).\n\n### Breaking changes for version 3\n\nYou can find more information about Breaking Changes in the documentation [BREAKING_CHANGES.v3.md (EN)](https://github.com/public-ui/kolibri/blob/develop/docs/BREAKING_CHANGES.v3.md).\n\n### Breaking changes for version 4\n\nYou can find more information about Breaking Changes in the documentation [BREAKING_CHANGES.v4.md (EN)](https://github.com/public-ui/kolibri/blob/develop/docs/BREAKING_CHANGES.v4.md).\n\n## Perform migration\n\n> [!TIP]\n> We recommend carrying out the migration with the migration tool. This tool is able to migrate most breaking changes automatically. Further information can be found in the [Tool-Dokumentation (EN)](https://www.npmjs.com/package/@public-ui/kolibri-cli).\n\n### Migration with migration tool\n\n1. **Preparation:**\n\n   The project is on an earlier version, all dependencies are installed, the project is executable and all changes are checked in and safely pushed.\n\n2. **Execute migration:**\n\n   Execute the following command to perform the migration: `npx @public-ui/kolibri-cli migrate src`\n\n3. **Check migration:**\n\n   Check the changes and run the application to make sure everything works as expected.\n\n### Perform migration manually\n\n1. **Preparation:**\n\n   The project is on an earlier version, all dependencies are installed, the project is executable and all changes are checked in and safely pushed.\n\n2. **Perform migration:**\n\n   Carry out the migration by making the breaking changes in the respective documentation.\n",
       "kind": "doc"
     },
     {
@@ -133,7 +133,7 @@
       "group": "docs",
       "name": "MIGRATION.de",
       "path": "MIGRATION.de.md",
-      "code": "# Migration\n\n## Einleitung\n\nNeue Major-Versionen von KoliBri werden mit dem Ziel entwickelt, die Wartung und Pflege zu vereinfachen und Weiterentwicklung zu fördern.\n\nDies bedeutet, dass ggf. Komponenten, Eigenschaften oder Funktionalitäten entfernt werden und technologische Voraussetzungen geschaffen werden, um einen zukünftigen innovativen Wandel zu begünstigt.\n\n- **Wartungs- und Pflegestrategie:**<br/>\n  Wir werden immer die neuste und die vorherige Major-Version von KoliBri pflegen. Dies bedeutet, dass wir für diese Versionen Fehler beheben und Sicherheitslücken schließen. Für alle anderen Versionen werden wir ohne Weiteres keine Fehlerbehebungen oder Sicherheitsupdates mehr bereitstellen.\n- **Weiterentwicklung:**<br/>\n  Wir werden immer die neuste Major-Version von KoliBri weiterentwickeln. Dies bedeutet, dass wir für diese Versionen neue Features und Funktionalitäten bereitstellen. Für alle anderen Versionen werden wir ohne Weiteres keine neuen Features oder Funktionalitäten mehr bereitstellen.\n- **Vor der Migration einen lauffähigen Stand sichern:**<br/>\n  Bevor die Migration erfolgt, empfehlen wir einen lauffähigen Stand einzuchecken und somit keine uncommiteten Änderungen auf dem zu migrierenden Quellcode zu haben. Während und nach der Migration können so alle Änderungen gut nachvollzogen und geprüft werden.\n- **Migrationstool:**<br/>\n  Wir stellen ein Migrationstool bereit, welches generell die Migration von Quellcode mit KoliBri unterstützt. Dieses Tool ist in der Lage, die meisten Breaking Changes automatisch zu migrieren. Weitere Informationen finden Sie in der [Tool-Dokumentation (EN)](https://www.npmjs.com/package/@public-ui/kolibri-cli).\n- **Hilfe und Feedback:**<br/>\n  Sollte es Probleme bei der Migration geben, stehen wir gerne zur Verfügung. Bitte eröffnen Sie ein [Issue auf GitHub](https://github.com/public-ui/kolibri/issues/new/choose).\n\n## Migration von Version 1 auf Version 2\n\n### Hinweise zum Upgrade auf Version 2\n\n1. **Neue Eigenschaften in Version 2 bereits ab Version 1.7 verfügbar:**<br/>\n   Die meisten neuen Eigenschaften, die in Version 2 eingeführt werden, sind bereits ab der Version 1.7 und höher verfügbar. Dies bedeutet, dass Anwendungen, die auf Version 1.7 oder höher basieren, möglicherweise bereits über die erforderlichen Funktionen verfügen, um eine reibungslose Migration zu ermöglichen.\n\n2. **Entfernte Eigenschaften, Komponenten und Funktionalitäten waren in Version 1.7 und höher bereits als veraltet markiert:**<br/>\n   Alle Eigenschaften, Komponenten und Funktionalitäten, die in Version 2 entfernt wurden, waren in Version 1.7 und höher bereits als veraltet (`deprecated`) gekennzeichnet. Wenn Sie also regelmäßig Ihre Codebasis aktualisiert haben, sollten Sie bereits darauf vorbereitet sein, diese Elemente zu ersetzen.\n\n3. **Migration ab Version 1.7 minimiert potenzielle Änderungen:**<br/>\n   Eine Migration von Version 1.7 und höher auf Version 2 wird voraussichtlich die geringsten Anpassungen erfordern. Die Wahrscheinlichkeit von Inkompatibilitäten ist niedrig, da die meisten Änderungen und Entfernungen bereits in den vorherigen Versionen als veraltet markiert wurden.\n\n4. **Migration ab Version 1.4 ist möglich:**<br/>\n   Obwohl eine Migration ab Version 1.7 empfohlen wird, ist es auch möglich, von Version 1.4 auf Version 2 zu migrieren. Beachten Sie jedoch, dass dies möglicherweise zusätzliche Anpassungen erfordert, da einige der notwendigen Funktionen möglicherweise erst ab Version 1.7 verfügbar sind.\n\n5. **Vereinfachte Registrierung beachten:**<br/>\n   Wir haben in Version 1 und für Version 2 die Modularisierung von KoliBri vereinfacht. Das Modul `@public-ui/core` wurde entfernt und die Funktionalitäten in das Modul `@public-ui/components` verschoben.\n\n```diff\n  - import { register } from '@public-ui/core';\n  + import { register } from '@public-ui/components';\n  import { defineCustomElements } from '@public-ui/components/dist/loader';\n  import { MyTheme } from '...';\n  await register(MyTheme, defineCustomElements);\n```\n\n### Breaking Changes für Version 2\n\nMehr Informationen zu Breaking Changes finden Sie in der Dokumentation [BREAKING_CHANGES.v2.md (EN)](https://github.com/public-ui/kolibri/blob/develop/docs/BREAKING_CHANGES.v2.md).\n\n### Breaking Changes für Version 3\n\nMehr Informationen zu Breaking Changes finden Sie in der Dokumentation [BREAKING_CHANGES.v3.md (EN)](https://github.com/public-ui/kolibri/blob/develop/docs/BREAKING_CHANGES.v3.md).\n\n### Breaking Changes für Version 4\n\nMehr Informationen zu Breaking Changes finden Sie in der Dokumentation [BREAKING_CHANGES.v4.md (EN)](https://github.com/public-ui/kolibri/blob/develop/docs/BREAKING_CHANGES.v4.md).\n\n## Migration durchführen\n\n> [!TIP]\n> Wir empfehlen, die Migration mit dem Migrationstool durchzuführen. Dieses Tool ist in der Lage, die meisten Breaking Changes automatisch zu migrieren. Weitere Informationen finden Sie in der [Tool-Dokumentation (EN)](https://www.npmjs.com/package/@public-ui/kolibri-cli).\n\n### Migration mit Migrationstool\n\n1. **Vorbereitung:**<br/>\n   Das Projekt ist auf einer früheren Version, alle Abhängigkeiten sind installiert, das Projekt ist lauffähig und alle Änderungen sind eingecheckt und sicher gepusht.\n2. **Migration ausführen:**<br/>\n   Führen Sie den folgenden Befehl aus, um das Migration auszuführen: `npx @public-ui/kolibri-cli migrate src`\n3. **Migration prüfen:**<br/>\n   Prüfen Sie die Änderungen und führen Sie die Anwendung aus, um sicherzustellen, dass alles wie erwartet funktioniert.\n\n### Migration manuell durchführen\n\n1. **Vorbereitung:**<br/>\n   Das Projekt ist auf einer früheren Version, alle Abhängigkeiten sind installiert, das Projekt ist lauffähig und alle Änderungen sind eingecheckt und sicher gepusht.\n2. **Migration durchführen:**<br/>\n   Führen Sie die Migration durch, indem Sie die Breaking Changes in der jeweiligen Dokumentation.\n",
+      "code": "# Migration\n\n## Einleitung\n\nNeue Major-Versionen von KoliBri werden mit dem Ziel entwickelt, die Wartung und Pflege zu vereinfachen und Weiterentwicklung zu fördern.\n\nDies bedeutet, dass ggf. Komponenten, Eigenschaften oder Funktionalitäten entfernt werden und technologische Voraussetzungen geschaffen werden, um einen zukünftigen innovativen Wandel zu begünstigt.\n\n- **Wartungs- und Pflegestrategie:**<br/>\n  Wir werden immer die neuste und die vorherige Major-Version von KoliBri pflegen. Dies bedeutet, dass wir für diese Versionen Fehler beheben und Sicherheitslücken schließen. Für alle anderen Versionen werden wir ohne Weiteres keine Fehlerbehebungen oder Sicherheitsupdates mehr bereitstellen.\n- **Weiterentwicklung:**<br/>\n  Wir werden immer die neuste Major-Version von KoliBri weiterentwickeln. Dies bedeutet, dass wir für diese Versionen neue Features und Funktionalitäten bereitstellen. Für alle anderen Versionen werden wir ohne Weiteres keine neuen Features oder Funktionalitäten mehr bereitstellen.\n- **Vor der Migration einen lauffähigen Stand sichern:**<br/>\n  Bevor die Migration erfolgt, empfehlen wir einen lauffähigen Stand einzuchecken und somit keine uncommiteten Änderungen auf dem zu migrierenden Quellcode zu haben. Während und nach der Migration können so alle Änderungen gut nachvollzogen und geprüft werden.\n- **Migrationstool:**<br/>\n  Wir stellen ein Migrationstool bereit, welches generell die Migration von Quellcode mit KoliBri unterstützt. Dieses Tool ist in der Lage, die meisten Breaking Changes automatisch zu migrieren. Weitere Informationen finden Sie in der [Tool-Dokumentation (EN)](https://www.npmjs.com/package/@public-ui/kolibri-cli).\n  > [!NOTE]\n  > Das Migrationstool unterstützt aktuell React-Projekte (`.jsx`/`.tsx`), Vue-Single-File-Components (`.vue`) sowie HTML/XHTML-Template-Projekte (z. B. Angular-Templates oder Projekte mit nativen Custom Elements).\n- **Hilfe und Feedback:**<br/>\n  Sollte es Probleme bei der Migration geben, stehen wir gerne zur Verfügung. Bitte eröffnen Sie ein [Issue auf GitHub](https://github.com/public-ui/kolibri/issues/new/choose).\n\n## Migration von Version 1 auf Version 2\n\n### Hinweise zum Upgrade auf Version 2\n\n1. **Neue Eigenschaften in Version 2 bereits ab Version 1.7 verfügbar:**<br/>\n   Die meisten neuen Eigenschaften, die in Version 2 eingeführt werden, sind bereits ab der Version 1.7 und höher verfügbar. Dies bedeutet, dass Anwendungen, die auf Version 1.7 oder höher basieren, möglicherweise bereits über die erforderlichen Funktionen verfügen, um eine reibungslose Migration zu ermöglichen.\n\n2. **Entfernte Eigenschaften, Komponenten und Funktionalitäten waren in Version 1.7 und höher bereits als veraltet markiert:**<br/>\n   Alle Eigenschaften, Komponenten und Funktionalitäten, die in Version 2 entfernt wurden, waren in Version 1.7 und höher bereits als veraltet (`deprecated`) gekennzeichnet. Wenn Sie also regelmäßig Ihre Codebasis aktualisiert haben, sollten Sie bereits darauf vorbereitet sein, diese Elemente zu ersetzen.\n\n3. **Migration ab Version 1.7 minimiert potenzielle Änderungen:**<br/>\n   Eine Migration von Version 1.7 und höher auf Version 2 wird voraussichtlich die geringsten Anpassungen erfordern. Die Wahrscheinlichkeit von Inkompatibilitäten ist niedrig, da die meisten Änderungen und Entfernungen bereits in den vorherigen Versionen als veraltet markiert wurden.\n\n4. **Migration ab Version 1.4 ist möglich:**<br/>\n   Obwohl eine Migration ab Version 1.7 empfohlen wird, ist es auch möglich, von Version 1.4 auf Version 2 zu migrieren. Beachten Sie jedoch, dass dies möglicherweise zusätzliche Anpassungen erfordert, da einige der notwendigen Funktionen möglicherweise erst ab Version 1.7 verfügbar sind.\n\n5. **Vereinfachte Registrierung beachten:**<br/>\n   Wir haben in Version 1 und für Version 2 die Modularisierung von KoliBri vereinfacht. Das Modul `@public-ui/core` wurde entfernt und die Funktionalitäten in das Modul `@public-ui/components` verschoben.\n\n```diff\n  - import { register } from '@public-ui/core';\n  + import { register } from '@public-ui/components';\n  import { defineCustomElements } from '@public-ui/components/loader';\n  import { MyTheme } from '...';\n  await register(MyTheme, defineCustomElements);\n```\n\n### Breaking Changes für Version 2\n\nMehr Informationen zu Breaking Changes finden Sie in der Dokumentation [BREAKING_CHANGES.v2.md (EN)](https://github.com/public-ui/kolibri/blob/develop/docs/BREAKING_CHANGES.v2.md).\n\n### Breaking Changes für Version 3\n\nMehr Informationen zu Breaking Changes finden Sie in der Dokumentation [BREAKING_CHANGES.v3.md (EN)](https://github.com/public-ui/kolibri/blob/develop/docs/BREAKING_CHANGES.v3.md).\n\n### Breaking Changes für Version 4\n\nMehr Informationen zu Breaking Changes finden Sie in der Dokumentation [BREAKING_CHANGES.v4.md (EN)](https://github.com/public-ui/kolibri/blob/develop/docs/BREAKING_CHANGES.v4.md).\n\n## Migration durchführen\n\n> [!TIP]\n> Wir empfehlen, die Migration mit dem Migrationstool durchzuführen. Dieses Tool ist in der Lage, die meisten Breaking Changes automatisch zu migrieren. Weitere Informationen finden Sie in der [Tool-Dokumentation (EN)](https://www.npmjs.com/package/@public-ui/kolibri-cli).\n\n### Migration mit Migrationstool\n\n1. **Vorbereitung:**<br/>\n   Das Projekt ist auf einer früheren Version, alle Abhängigkeiten sind installiert, das Projekt ist lauffähig und alle Änderungen sind eingecheckt und sicher gepusht.\n2. **Migration ausführen:**<br/>\n   Führen Sie den folgenden Befehl aus, um das Migration auszuführen: `npx @public-ui/kolibri-cli migrate src`\n3. **Migration prüfen:**<br/>\n   Prüfen Sie die Änderungen und führen Sie die Anwendung aus, um sicherzustellen, dass alles wie erwartet funktioniert.\n\n### Migration manuell durchführen\n\n1. **Vorbereitung:**<br/>\n   Das Projekt ist auf einer früheren Version, alle Abhängigkeiten sind installiert, das Projekt ist lauffähig und alle Änderungen sind eingecheckt und sicher gepusht.\n2. **Migration durchführen:**<br/>\n   Führen Sie die Migration durch, indem Sie die Breaking Changes in der jeweiligen Dokumentation.\n",
       "kind": "doc"
     },
     {
@@ -149,7 +149,7 @@
       "group": "docs",
       "name": "README",
       "path": "README.md",
-      "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\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   |    Dec 2025    |\n|     4.x |     LTS      | Dec 2025 |   3y   |    Dec 2028    |\n|     5.x |     STS      | Dec 2026 |  15m   |    Dec 2027    |\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/dist/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## 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",
+      "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\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   |    Dec 2025    |\n|     4.x |     LTS      | Dec 2025 |   3y   |    Dec 2028    |\n|     5.x |     STS      | Dec 2026 |  15m   |    Dec 2027    |\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## 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",
       "kind": "doc"
     },
     {
@@ -245,7 +245,7 @@
       "group": "badge",
       "name": "basic",
       "path": "packages/samples/react/src/components/badge/basic.tsx",
-      "code": "import React from 'react';\n\nimport { KolBadge } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const BadgeBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolBadge shows badges with a label, background color and optional icon.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t<KolBadge _label=\"black\"></KolBadge>\n\t\t\t<KolBadge _color=\"#86ffc6\" _label=\"teal\"></KolBadge>\n\t\t\t<KolBadge _color=\"#06539e\" _label=\"blue\"></KolBadge>\n\t\t\t<KolBadge _color=\"#ae0000\" _label=\"red with icon\" _icons=\"codicon codicon-smiley\"></KolBadge>\n\t\t\t<KolBadge _color=\"#8b008b\" _label=\"purple with icon\" _icons=\"codicon codicon-squirrel\"></KolBadge>\n\t\t</div>\n\t</>\n);\n",
+      "code": "import React from 'react';\n\nimport { KolBadge } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const BadgeBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolBadge shows badges with a label, background color and optional icon.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t<KolBadge _label=\"black\"></KolBadge>\n\t\t\t<KolBadge _color=\"#86ffc6\" _label=\"teal\"></KolBadge>\n\t\t\t<KolBadge _color=\"#06539e\" _label=\"blue\"></KolBadge>\n\t\t\t<KolBadge _color=\"#ae0000\" _label=\"red with icon\" _icons=\"fa-solid fa-face-smile\"></KolBadge>\n\t\t\t<KolBadge _color=\"#8b008b\" _label=\"purple with icon\" _icons=\"kolicon-kolibri\"></KolBadge>\n\t\t</div>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -253,7 +253,7 @@
       "group": "badge",
       "name": "button",
       "path": "packages/samples/react/src/components/badge/button.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolBadge } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst createBadgeProps = (label: string) => ({\n\t_label: label,\n\t_smartButton: {\n\t\t_ariaDescription: label,\n\t\t_icons: 'codicon codicon-close',\n\t\t_label: `Remove`,\n\t\t_on: {\n\t\t\tonClick: () => alert('clicked'),\n\t\t},\n\t},\n});\n\nexport const BadgeButton: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolBadge with an optional <code>smartButton</code>. The sample defines a &quot;close&quot; button with X-icon a click event listener.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t<KolBadge {...createBadgeProps('black')}></KolBadge>\n\t\t\t<KolBadge _color=\"#86ffc6\" {...createBadgeProps('teal')}></KolBadge>\n\t\t\t<KolBadge _color=\"#06539e\" {...createBadgeProps('blue')}></KolBadge>\n\t\t\t<KolBadge _color=\"#ae0000\" _icons=\"codicon codicon-smiley\" {...createBadgeProps('red with icon')}></KolBadge>\n\t\t\t<KolBadge _color=\"#8b008b\" _icons=\"codicon codicon-squirrel\" {...createBadgeProps('purple with icon')}></KolBadge>\n\t\t</div>\n\t</>\n);\n",
+      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolBadge } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst createBadgeProps = (label: string) => ({\n\t_label: label,\n\t_smartButton: {\n\t\t_ariaDescription: label,\n\t\t_icons: 'kolicon-cross',\n\t\t_label: `Remove`,\n\t\t_on: {\n\t\t\tonClick: () => alert('clicked'),\n\t\t},\n\t},\n});\n\nexport const BadgeButton: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolBadge with an optional <code>smartButton</code>. The sample defines a &quot;close&quot; button with X-icon a click event listener.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t<KolBadge {...createBadgeProps('black')}></KolBadge>\n\t\t\t<KolBadge _color=\"#86ffc6\" {...createBadgeProps('teal')}></KolBadge>\n\t\t\t<KolBadge _color=\"#06539e\" {...createBadgeProps('blue')}></KolBadge>\n\t\t\t<KolBadge _color=\"#ae0000\" _icons=\"fa-solid fa-face-smile\" {...createBadgeProps('red with icon')}></KolBadge>\n\t\t\t<KolBadge _color=\"#8b008b\" _icons=\"kolicon-kolibri\" {...createBadgeProps('purple with icon')}></KolBadge>\n\t\t</div>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -269,7 +269,7 @@
       "group": "breadcrumb",
       "name": "basic",
       "path": "packages/samples/react/src/components/breadcrumb/basic.tsx",
-      "code": "import React from 'react';\n\nimport { KolBreadcrumb } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const BreadcrumbBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolBreadcrumb shows a breadcrumb navigation. The sample illustrates a variation of link, text and icon elements.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolBreadcrumb\n\t\t\t\t_label=\"Breadcrumb aus Text-Links\"\n\t\t\t\t_links={[\n\t\t\t\t\t{ _label: 'Homepage', _href: '#/back-page' },\n\t\t\t\t\t{ _label: 'Bottom of the homepage', _href: '#/back-page' },\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t\t<KolBreadcrumb\n\t\t\t\t_label=\"Breadcrumb from icons or text links\"\n\t\t\t\t_links={[\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Homepage',\n\t\t\t\t\t\t_icons: 'codicon codicon-home',\n\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Subpage of the start page with very long link test',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t\t<KolBreadcrumb\n\t\t\t\t_label=\"Breadcrumb from icons and text links\"\n\t\t\t\t_links={[\n\t\t\t\t\t{ _label: 'Homepage', _icons: 'codicon codicon-home', _href: '#/back-page' },\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Subpage of the main page and I_am_a_really_long_compound_word_trying_to_break_the_layout',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t</div>\n\t</>\n);\n",
+      "code": "import React from 'react';\n\nimport { KolBreadcrumb } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const BreadcrumbBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolBreadcrumb shows a breadcrumb navigation. The sample illustrates a variation of link, text and icon elements.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolBreadcrumb\n\t\t\t\t_label=\"Breadcrumb aus Text-Links\"\n\t\t\t\t_links={[\n\t\t\t\t\t{ _label: 'Homepage', _href: '#/back-page' },\n\t\t\t\t\t{ _label: 'Bottom of the homepage', _href: '#/back-page' },\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t\t<KolBreadcrumb\n\t\t\t\t_label=\"Breadcrumb from icons or text links\"\n\t\t\t\t_links={[\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Homepage',\n\t\t\t\t\t\t_icons: 'fa-solid fa-house',\n\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Subpage of the start page with very long link test',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t\t<KolBreadcrumb\n\t\t\t\t_label=\"Breadcrumb from icons and text links\"\n\t\t\t\t_links={[\n\t\t\t\t\t{ _label: 'Homepage', _icons: 'fa-solid fa-house', _href: '#/back-page' },\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Subpage of the main page and I_am_a_really_long_compound_word_trying_to_break_the_layout',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t\t<KolBreadcrumb _label=\"Minimal Breadcrumb\" _links={[{ _label: 'Homepage', _href: '#/back-page' }]}></KolBreadcrumb>\n\t\t</div>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -293,7 +293,7 @@
       "group": "button-link",
       "name": "icons",
       "path": "packages/samples/react/src/components/button-link/icons.tsx",
-      "code": "import React from 'react';\n\nimport { KolButtonLink } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonLinkIcons: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolButtonLink with icons in different locations.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolButtonLink _icons=\"codicon codicon-home\" _label=\"I am a link with an icon on the left\" />\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\tright: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon on the right\"\n\t\t\t/>\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon at the top\"\n\t\t\t/>\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\tbottom: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with icon below\"\n\t\t\t/>\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'codicon codicon-home',\n\t\t\t\t\tright: 'codicon codicon-home',\n\t\t\t\t\tbottom: 'codicon codicon-home',\n\t\t\t\t\tleft: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with all icons\"\n\t\t\t/>\n\t\t\t<KolButtonLink _icons=\"codicon codicon-home\" _hideLabel _label=\"I am a link with icon only\" />\n\t\t</div>\n\t</>\n);\n",
+      "code": "import React from 'react';\n\nimport { KolButtonLink } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonLinkIcons: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolButtonLink with icons in different locations.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolButtonLink _icons=\"fa-solid fa-house\" _label=\"I am a link with an icon on the left\" />\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\tright: 'fa-solid fa-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon on the right\"\n\t\t\t/>\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'fa-solid fa-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon at the top\"\n\t\t\t/>\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\tbottom: 'fa-solid fa-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with icon below\"\n\t\t\t/>\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'fa-solid fa-house',\n\t\t\t\t\tright: 'fa-solid fa-house',\n\t\t\t\t\tbottom: 'fa-solid fa-house',\n\t\t\t\t\tleft: 'fa-solid fa-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with all icons\"\n\t\t\t/>\n\t\t\t<KolButtonLink _icons=\"fa-solid fa-house\" _hideLabel _label=\"I am a link with icon only\" />\n\t\t</div>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -309,7 +309,7 @@
       "group": "button",
       "name": "access-key",
       "path": "packages/samples/react/src/components/button/access-key.tsx",
-      "code": "import { KolButton, 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 ButtonAccessKey: 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 sample shows KolButton with{' '}\n\t\t\t\t\t<KolLink _label=\"access keys\" _href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey\" _target=\"blank\" />. The access\n\t\t\t\t\tkeys can be used to trigger the buttons using the keyboard.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t<KolButton _label=\"With S access key\" _accessKey=\"S\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton _label=\"Very small b\" _accessKey=\"b\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton _label=\"Access key does not appear in label\" _accessKey=\"x\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton _label=\"access key without label\" _hideLabel _accessKey=\"a\" _icons=\"codicon codicon-dashboard\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton\n\t\t\t\t\t_label=\"with inline icons\"\n\t\t\t\t\t_icons={{\n\t\t\t\t\t\tleft: 'codicon codicon-dashboard',\n\t\t\t\t\t\tright: 'codicon codicon-dashboard',\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey=\"n\"\n\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "code": "import { 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 ButtonAccessKey: 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{' '}\n\t\t\t\t\t<KolLink _label=\"access keys\" _href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey\" _target=\"blank\" />. Access keys\n\t\t\t\t\tallow users to trigger buttons using keyboard shortcuts.\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 Access 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 access key\" _accessKey=\"S\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Very small b\" _accessKey=\"b\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Access key does not appear in label\" _accessKey=\"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=\"Access 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=\"access key without label\" _hideLabel _accessKey=\"a\" _icons=\"fa-solid fa-gauge\" _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=\"Access 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: 'fa-solid fa-gauge',\n\t\t\t\t\t\t\t\tright: 'fa-solid fa-gauge',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_accessKey=\"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",
       "kind": "sample"
     },
     {
@@ -317,7 +317,7 @@
       "group": "button",
       "name": "aria-description",
       "path": "packages/samples/react/src/components/button/aria-description.tsx",
-      "code": "import { KolButton } 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 ButtonAriaDescription: 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>This sample shows KolButton with aria-description</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t<KolButton _label=\"Button Text without area description\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton _label=\"Button Text\" _ariaDescription=\"Button Area Description\" _on={dummyEventHandler}></KolButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "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 ButtonAriaDescription: 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 ARIA descriptions. The aria-description attribute provides additional descriptive text for screen readers,\n\t\t\t\t\thelping users understand the button&apos;s purpose or action in more detail.\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 and without ARIA Description\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"Button without ARIA description\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Button with ARIA description\" _ariaDescription=\"This button performs an important action\" _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",
       "kind": "sample"
     },
     {
@@ -325,7 +325,7 @@
       "group": "button",
       "name": "baselined",
       "path": "packages/samples/react/src/components/button/baselined.tsx",
-      "code": "import React from 'react';\n\nimport { KolButton } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonBaselined: 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>This KolButton sample is used for internal testing purposes: It features multiple buttons with and without icons which are vertically aligned.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t<KolButton _label=\"Label-Text\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton _label=\"Label-Text\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton _label=\"Label-Text\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton _icons=\"codicon codicon-reactions\" _label=\"Label-Text with Icon\" _on={dummyEventHandler}></KolButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "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 ButtonBaselined: 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 button baseline alignment. It shows multiple buttons with and without icons that are vertically aligned, useful for testing\n\t\t\t\t\tlayout consistency.\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=\"Vertically Aligned Buttons\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t\t\t<KolButton _label=\"Label-Text\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-face-smile\" _label=\"Label-Text with Icon\" _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",
       "kind": "sample"
     },
     {
@@ -333,7 +333,15 @@
       "group": "button",
       "name": "basic",
       "path": "packages/samples/react/src/components/button/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\nimport { ButtonVariants } from './partials/variants';\n\nexport const ButtonBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolButton shows a button-element. This sample demonstrates the basic usage with its different styling variants, icons, disabled state and hidden labels.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<ButtonVariants />\n\t</>\n);\n",
+      "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 ButtonBasic: 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 the most important features of the KolButton component. It showcases the different button variants, icons, disabled state, and\n\t\t\t\t\thidden labels.\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{/* Button Variants */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Button Variants\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-house\" _label=\"Primary\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-heart\" _label=\"Secondary\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-robot\" _label=\"Tertiary\" _variant=\"tertiary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-robot\" _label=\"Normal\" _variant=\"normal\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-trash\" _label=\"Danger\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-smile\" _label=\"Ghost\" _variant=\"ghost\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t{/* Disabled State */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Disabled State\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _icons=\"fa-solid fa-house\" _label=\"Primary\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"fa-solid fa-heart\" _label=\"Secondary\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"fa-solid fa-trash\" _label=\"Danger\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t{/* Hidden Label */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Hidden Label (Icon Only)\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"fa-solid fa-house\" _label=\"Primary\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"fa-solid fa-heart\" _label=\"Secondary\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"fa-solid fa-trash\" _label=\"Danger\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t{/* Icon Positions */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Icon Positions\" />\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_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Left\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Right\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icons Both Sides\"\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",
+      "kind": "sample"
+    },
+    {
+      "id": "sample/button/disabled",
+      "group": "button",
+      "name": "disabled",
+      "path": "packages/samples/react/src/components/button/disabled.tsx",
+      "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 ButtonDisabled: 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>This story demonstrates the disabled state of buttons. Disabled buttons are not clickable and appear visually dimmed.</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=\"Disabled Buttons\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _icons=\"fa-solid fa-house\" _label=\"Primary\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"fa-solid fa-heart\" _label=\"Secondary\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"fa-solid fa-robot\" _label=\"Tertiary\" _variant=\"tertiary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"fa-solid fa-robot\" _label=\"Normal\" _variant=\"normal\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"fa-solid fa-trash\" _label=\"Danger\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"fa-solid fa-smile\" _label=\"Ghost\" _variant=\"ghost\" _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=\"Comparison: Enabled vs Disabled\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-house\" _label=\"Enabled\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"fa-solid fa-house\" _label=\"Disabled\" _variant=\"primary\" _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",
       "kind": "sample"
     },
     {
@@ -341,7 +349,15 @@
       "group": "button",
       "name": "expert-slot",
       "path": "packages/samples/react/src/components/button/expert-slot.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\nimport { ButtonVariants } from './partials/variants';\n\nexport const ButtonExpertSlot: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolButton show a button-element with expert slot.</p>\n\t\t</SampleDescription>\n\n\t\t<ButtonVariants _label=\"\">\n\t\t\t<span slot=\"expert\">I am more than just a button</span>\n\t\t</ButtonVariants>\n\t</>\n);\n",
+      "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 ButtonExpertSlot: 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 the expert slot feature of KolButton. The expert slot allows you to insert custom content into the button, providing advanced\n\t\t\t\t\tcustomization options beyond the standard label and icon properties.\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 Expert Slot Content\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-house\" _label=\"\" _variant=\"primary\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">I am more than just a button</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-heart\" _label=\"\" _variant=\"secondary\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Custom content here</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-trash\" _label=\"\" _variant=\"danger\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Delete with custom text</span>\n\t\t\t\t\t\t</KolButton>\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=\"Disabled Buttons with Expert Slot\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _icons=\"fa-solid fa-house\" _label=\"\" _variant=\"primary\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Disabled expert slot</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _disabled _icons=\"fa-solid fa-smile\" _label=\"\" _variant=\"ghost\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Another disabled one</span>\n\t\t\t\t\t\t</KolButton>\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",
+      "kind": "sample"
+    },
+    {
+      "id": "sample/button/hide-label",
+      "group": "button",
+      "name": "hide-label",
+      "path": "packages/samples/react/src/components/button/hide-label.tsx",
+      "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 ButtonHideLabel: 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 hidden labels. The label is still accessible to screen readers but visually hidden, showing only the icon. This\n\t\t\t\t\tis useful for icon-only buttons.\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 Hidden Labels\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"fa-solid fa-house\" _label=\"Home\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"fa-solid fa-heart\" _label=\"Like\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"fa-solid fa-robot\" _label=\"Subscribe\" _variant=\"tertiary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"fa-solid fa-robot\" _label=\"Buy me a coffee\" _variant=\"normal\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"fa-solid fa-trash\" _label=\"Delete\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"fa-solid fa-smile\" _label=\"Settings\" _variant=\"ghost\" _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=\"Comparison: With and Without Hidden Label\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-house\" _label=\"Home\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"fa-solid fa-house\" _label=\"Home\" _variant=\"primary\" _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=\"Disabled with Hidden Label\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"fa-solid fa-house\" _label=\"Home\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"fa-solid fa-heart\" _label=\"Like\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"fa-solid fa-robot\" _label=\"Subscribe\" _variant=\"tertiary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"fa-solid fa-robot\" _label=\"Buy me a coffee\" _variant=\"normal\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"fa-solid fa-trash\" _label=\"Delete\" _variant=\"danger\" _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",
       "kind": "sample"
     },
     {
@@ -349,7 +365,7 @@
       "group": "button",
       "name": "icons",
       "path": "packages/samples/react/src/components/button/icons.tsx",
-      "code": "import React from 'react';\n\nimport { KolButton } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonIcons: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\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>This sample shows KolButton with icons in all alignments.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div>\n\t\t\t\t<KolButton\n\t\t\t\t\t_icons={{\n\t\t\t\t\t\tbottom: 'codicon codicon-arrow-down',\n\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\ticon: 'codicon codicon-arrow-left',\n\t\t\t\t\t\t},\n\t\t\t\t\t\ttop: {\n\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t'font-size': '200%',\n\t\t\t\t\t\t\t\ttransform: 'rotate(45deg)',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\ticon: 'codicon codicon-arrow-up',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tright: 'codicon codicon-arrow-right',\n\t\t\t\t\t}}\n\t\t\t\t\t_label=\"Label\"\n\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\tclassName=\"w-10rem\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "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 ButtonIcons: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\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 showcases buttons with icons in various positions and configurations. Icons can be placed on the left, right, top, bottom, or in multiple\n\t\t\t\t\tpositions at once.\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=\"Basic Icon Positions\" />\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_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Left\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Right\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Top\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Bottom\"\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=\"Multiple Icon Positions\" />\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_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Left & Right\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Top & Bottom\"\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=\"All Icon Positions\" />\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_icons={{\n\t\t\t\t\t\t\t\ttop: {\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\ttransform: 'rotate(45deg)',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\ticon: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\ticon: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"All Directions\"\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=\"Simple Icon String\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-house\" _label=\"Home Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-heart\" _label=\"Heart Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-trash\" _label=\"Trash Icon\" _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=\"Large Icon on Top\" />\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_icons={{\n\t\t\t\t\t\t\t\ttop: {\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\t'font-size': '400%',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\ticon: 'fa-solid fa-house',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Home\"\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",
       "kind": "sample"
     },
     {
@@ -357,7 +373,7 @@
       "group": "button",
       "name": "row-reverse-tooltip",
       "path": "packages/samples/react/src/components/button/row-reverse-tooltip.tsx",
-      "code": "import { KolButton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonRowReverseTooltip: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample demonstrates how the tooltip adapts its width when containing long text inside a row-reverse flex container. The effect becomes visible\n\t\t\t\t\twhen inspecting the layout with DevTools and reducing the available width (e.g. by narrowing the screen).\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-row-reverse\">\n\t\t\t\t<KolButton\n\t\t\t\t\t_icons=\"codicon codicon-home\"\n\t\t\t\t\t_hideLabel\n\t\t\t\t\t_label=\"This is a very, very long tooltip text that exceeds the width.\"\n\t\t\t\t\t_variant=\"primary\"\n\t\t\t\t></KolButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonRowReverseTooltip: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates how the tooltip adapts its width when containing long text inside a row-reverse flex container. The effect becomes visible\n\t\t\t\t\twhen inspecting the layout with DevTools and reducing the available width (e.g., by narrowing the screen).\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=\"Button in Row-Reverse Container\" />\n\t\t\t\t\t<div className=\"flex flex-row-reverse\">\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-house\" _hideLabel _label=\"This is a very, very long tooltip text that exceeds the width.\" _variant=\"primary\" />\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",
       "kind": "sample"
     },
     {
@@ -365,7 +381,23 @@
       "group": "button",
       "name": "short-key",
       "path": "packages/samples/react/src/components/button/short-key.tsx",
-      "code": "import type { KoliBriTableHeaders } from '@public-ui/components';\nimport { ToasterService } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useRef } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\nconst RowActions: FC<{ label: string }> = ({ label }) => {\n\tconst toaster = ToasterService.getInstance(document);\n\tconst editButtonRef = useRef<HTMLKolButtonElement | null>(null);\n\tconst deleteButtonRef = useRef<HTMLKolButtonElement | null>(null);\n\n\tconst handleEditClick = () => {\n\t\ttoaster.enqueue({\n\t\t\tlabel: 'Edit clicked',\n\t\t\tdescription: `The button \"edit\" has been clicked for ${label}`,\n\t\t\ttype: 'info',\n\t\t});\n\t};\n\n\tconst handleDeleteClick = () => {\n\t\ttoaster.enqueue({\n\t\t\tlabel: 'Delete clicked',\n\t\t\tdescription: `The button \"delete\" has been clicked for ${label}`,\n\t\t\ttype: 'warning',\n\t\t});\n\t};\n\n\tconst handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {\n\t\tswitch (event.code) {\n\t\t\tcase 'KeyE':\n\t\t\t\tvoid editButtonRef.current?.kolFocus();\n\t\t\t\thandleEditClick();\n\t\t\t\treturn;\n\t\t\tcase 'KeyD':\n\t\t\t\tvoid deleteButtonRef.current?.kolFocus();\n\t\t\t\thandleDeleteClick();\n\t\t\t\treturn;\n\t\t}\n\t};\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tgap: 'calc(10rem / var(--kolibri-root-font-size, 16))',\n\t\t\t}}\n\t\t\tonKeyUp={handleKeyUp}\n\t\t>\n\t\t\t<KolButton ref={editButtonRef} _label={'Edit'} _shortKey={'e'} _on={{ onClick: handleEditClick }} />\n\t\t\t<KolButton ref={deleteButtonRef} _label={'Delete'} _shortKey={'d'} _variant={'danger'} _on={{ onClick: handleDeleteClick }} />\n\t\t</div>\n\t);\n};\n\nexport const ButtonShortKey: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\ttype Data = {\n\t\tlabel: string;\n\t};\n\tconst DATA: Data[] = [\n\t\t{\n\t\t\tlabel: 'Row 1',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 2',\n\t\t},\n\t];\n\n\tconst HEADERS: KoliBriTableHeaders = {\n\t\thorizontal: [\n\t\t\t[\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Label',\n\t\t\t\t\tkey: 'label',\n\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Actions',\n\t\t\t\t\tkey: 'actions',\n\t\t\t\t\ttextAlign: 'left',\n\n\t\t\t\t\trender: (el, cell) => {\n\t\t\t\t\t\tgetRoot(createReactRenderElement(el)).render(<RowActions label={(cell.data as Data).label} />);\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t],\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThe first sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed\n\t\t\t\t\tseparately.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tThe second sample showcases a table where each row contains two KolButtons, each with its own shortcut key. To trigger an action, move the focus to\n\t\t\t\t\tany of the &quot;Actions&quot; cells and press &quot;e&quot; or &quot;d.&quot; Doing so will activate the corresponding action and display a Toast\n\t\t\t\t\tnotification for demonstration purposes.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t<KolButton _label=\"With S short key\" _shortKey=\"S\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton _label=\"Very small b\" _shortKey=\"b\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton _label=\"Short key does not appear in label\" _shortKey=\"x\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton _label=\"short key without label\" _hideLabel _shortKey=\"k\" _icons=\"codicon codicon-dashboard\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t<KolButton\n\t\t\t\t\t_label=\"with inline icons\"\n\t\t\t\t\t_icons={{\n\t\t\t\t\t\tleft: 'codicon codicon-dashboard',\n\t\t\t\t\t\tright: 'codicon codicon-dashboard',\n\t\t\t\t\t}}\n\t\t\t\t\t_shortKey=\"n\"\n\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t<KolHeading _level={2} _label=\"Interactive sample\" className=\"mt\" />\n\n\t\t\t<KolTableStateful\n\t\t\t\t_label={`Move focus within one of the \"Actions\" cells and press \"e\" or \"d\" to trigger an action.`}\n\t\t\t\t_data={DATA}\n\t\t\t\t_headers={HEADERS}\n\t\t\t\t_minWidth=\"400px\"\n\t\t\t/>\n\t\t</>\n\t);\n};\n",
+      "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=\"fa-solid fa-gauge\" _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: 'fa-solid fa-gauge',\n\t\t\t\t\t\t\t\tright: 'fa-solid fa-gauge',\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",
+      "kind": "sample"
+    },
+    {
+      "id": "sample/button/spinner",
+      "group": "button",
+      "name": "spinner",
+      "path": "packages/samples/react/src/components/button/spinner.tsx",
+      "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 ButtonSpinner: 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 icon-only buttons with an animated spinning loader icon. The animation is applied using CSS parts to target the icon element\n\t\t\t\t\tdirectly.\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=\"Animated Spinner Icon via CSS Part\" />\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\tclassName=\"spinner-button\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'fa-solid fa-spinner',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Loading\"\n\t\t\t\t\t\t\t_variant=\"primary\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\tclassName=\"spinner-button spinner-slow\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'fa-solid fa-rotate',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Syncing\"\n\t\t\t\t\t\t\t_variant=\"secondary\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\tclassName=\"spinner-button spinner-slower\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'fa-solid fa-gear',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Processing\"\n\t\t\t\t\t\t\t_variant=\"tertiary\"\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=\"Spinner with Label\" />\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\tclassName=\"spinner-button\"\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'fa-solid fa-spinner',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Loading...\"\n\t\t\t\t\t\t\t_variant=\"primary\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\tclassName=\"spinner-button\"\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'fa-solid fa-rotate',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Syncing...\"\n\t\t\t\t\t\t\t_variant=\"secondary\"\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\n\t\t\t<style>\n\t\t\t\t{`\n\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\tfrom {\n\t\t\t\t\t\t\ttransform: rotate(0deg);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tto {\n\t\t\t\t\t\t\ttransform: rotate(360deg);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Target the icon part inside the button */\n\t\t\t\t\t.spinner-button::part(icon) {\n\t\t\t\t\t\tanimation: spin 1s linear infinite;\n\t\t\t\t\t}\n\n\t\t\t\t\t.spinner-button.spinner-slow::part(icon) {\n\t\t\t\t\t\tanimation: spin 1.5s linear infinite;\n\t\t\t\t\t}\n\n\t\t\t\t\t.spinner-button.spinner-slower::part(icon) {\n\t\t\t\t\t\tanimation: spin 2s linear infinite;\n\t\t\t\t\t}\n\t\t\t\t`}\n\t\t\t</style>\n\t\t</>\n\t);\n};\n",
+      "kind": "sample"
+    },
+    {
+      "id": "sample/button/variants",
+      "group": "button",
+      "name": "variants",
+      "path": "packages/samples/react/src/components/button/variants.tsx",
+      "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 ButtonVariants: 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>This story showcases all available button variants: primary, secondary, tertiary, normal, danger, and ghost.</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=\"All Button Variants\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-house\" _label=\"Primary\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-heart\" _label=\"Secondary\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-robot\" _label=\"Tertiary\" _variant=\"tertiary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-robot\" _label=\"Normal\" _variant=\"normal\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-trash\" _label=\"Danger\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-smile\" _label=\"Ghost\" _variant=\"ghost\" _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",
       "kind": "sample"
     },
     {
@@ -373,7 +405,7 @@
       "group": "button",
       "name": "width",
       "path": "packages/samples/react/src/components/button/width.tsx",
-      "code": "import React from 'react';\n\nimport { KolButton } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonWidth: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst ARGS = {\n\t\tclassName: 'w-8rem',\n\t\t_on: {\n\t\t\tonClick: dummyClickEventHandler,\n\t\t},\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolButton with adjusted widths.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-14\">\n\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t<KolButton _label=\"Primary\" _variant=\"primary\" {...ARGS}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Secondary\" _variant=\"secondary\" {...ARGS}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Normal\" _variant=\"normal\" {...ARGS}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Danger\" _variant=\"danger\" {...ARGS}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Ghost\" _variant=\"ghost\" {...ARGS}></KolButton>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t<KolButton _disabled _label=\"Primary\" _variant=\"primary\" {...ARGS}></KolButton>\n\t\t\t\t\t<KolButton _disabled _label=\"Secondary\" _variant=\"secondary\" {...ARGS}></KolButton>\n\t\t\t\t\t<KolButton _disabled _label=\"Normal\" _variant=\"normal\" {...ARGS}></KolButton>\n\t\t\t\t\t<KolButton _disabled _label=\"Danger\" _variant=\"danger\" {...ARGS}></KolButton>\n\t\t\t\t\t<KolButton _disabled _label=\"Ghost\" _variant=\"ghost\" {...ARGS}></KolButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "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 ButtonWidth: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst ARGS = {\n\t\tclassName: 'w-8rem',\n\t\t_on: {\n\t\t\tonClick: dummyClickEventHandler,\n\t\t},\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This story demonstrates buttons with custom widths. You can control the button width using CSS classes.</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=\"Fixed Width Buttons (8rem)\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"Primary\" _variant=\"primary\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _label=\"Secondary\" _variant=\"secondary\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _label=\"Normal\" _variant=\"normal\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _label=\"Danger\" _variant=\"danger\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _label=\"Ghost\" _variant=\"ghost\" {...ARGS} />\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=\"Fixed Width Disabled Buttons (8rem)\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _label=\"Primary\" _variant=\"primary\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _disabled _label=\"Secondary\" _variant=\"secondary\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _disabled _label=\"Normal\" _variant=\"normal\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _disabled _label=\"Danger\" _variant=\"danger\" {...ARGS} />\n\t\t\t\t\t\t<KolButton _disabled _label=\"Ghost\" _variant=\"ghost\" {...ARGS} />\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",
       "kind": "sample"
     },
     {
@@ -461,7 +493,7 @@
       "group": "handout",
       "name": "basic",
       "path": "packages/samples/react/src/components/handout/basic.tsx",
-      "code": "import type { ButtonProps, KoliBriTableHeaders } from '@public-ui/components';\nimport {\n\tKolAbbr,\n\tKolAccordion,\n\tKolAlert,\n\tKolBadge,\n\tKolBreadcrumb,\n\tKolButton,\n\tKolButtonLink,\n\tKolCard,\n\tKolDetails,\n\tKolForm,\n\tKolHeading,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolKolibri,\n\tKolLink,\n\tKolLinkButton,\n\tKolNav,\n\tKolProgress,\n\tKolSelect,\n\tKolTableStateful,\n\tKolTabs,\n\tKolTextarea,\n\tKolVersion,\n} from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { getTheme, getThemeName } from '../../shares/store';\nimport { TABLE_DATA, type TableDataType } from './table-data';\n\nfunction KolButtonWrapper({ _on, ...other }: ButtonProps & { style: Record<string, unknown> }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton {...other} _on={dummyEventHandler} />;\n}\n\nconst TABLE_HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{\n\t\t\t\tlabel: 'Workdays',\n\t\t\t\tcolSpan: 5,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Weekend',\n\t\t\t\tcolSpan: 2,\n\t\t\t},\n\t\t],\n\t\t[\n\t\t\t{\n\t\t\t\tkey: 'monday',\n\t\t\t\tlabel: 'Monday',\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tconst renderElement = document.createElement('div');\n\t\t\t\t\trenderElement.setAttribute('role', 'presentation');\n\t\t\t\t\tel.innerHTML = '';\n\t\t\t\t\tel.appendChild(renderElement);\n\t\t\t\t\tgetRoot(renderElement).render(<KolButtonWrapper _label={cell.label} style={{ fontSize: '75%' }} />);\n\t\t\t\t},\n\t\t\t\tcompareFn: (first, second) => {\n\t\t\t\t\tif ((first as TableDataType).monday < (second as TableDataType).monday) {\n\t\t\t\t\t\treturn -1;\n\t\t\t\t\t}\n\t\t\t\t\tif ((first as TableDataType).monday > (second as TableDataType).monday) {\n\t\t\t\t\t\treturn 1;\n\t\t\t\t\t}\n\t\t\t\t\treturn 0;\n\t\t\t\t},\n\t\t\t\tsortDirection: 'ASC',\n\t\t\t\ttextAlign: 'right',\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'tuesday',\n\t\t\t\tlabel: 'Tuesday',\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tconst renderElement = document.createElement('div');\n\t\t\t\t\trenderElement.setAttribute('role', 'presentation');\n\t\t\t\t\tel.innerHTML = '';\n\t\t\t\t\tel.appendChild(renderElement);\n\t\t\t\t\tgetRoot(renderElement).render(<KolBadge _color=\"#060\" _label={cell.label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\tcompareFn: (first, second) => {\n\t\t\t\t\tif ((first as TableDataType).tuesday < (second as TableDataType).tuesday) {\n\t\t\t\t\t\treturn -1;\n\t\t\t\t\t}\n\t\t\t\t\tif ((first as TableDataType).tuesday > (second as TableDataType).tuesday) {\n\t\t\t\t\t\treturn 1;\n\t\t\t\t\t}\n\t\t\t\t\treturn 0;\n\t\t\t\t},\n\t\t\t\tsortDirection: 'DESC',\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'wednesday',\n\t\t\t\tlabel: 'Wednesday',\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tconst renderElement = document.createElement('div');\n\t\t\t\t\trenderElement.setAttribute('role', 'presentation');\n\t\t\t\t\tel.innerHTML = '';\n\t\t\t\t\tel.appendChild(renderElement);\n\t\t\t\t\tgetRoot(renderElement).render(<KolBadge _color=\"#006\" _label={cell.label}></KolBadge>);\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'thursday',\n\t\t\t\tlabel: 'Thursday',\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tconst renderElement = document.createElement('div');\n\t\t\t\t\trenderElement.setAttribute('role', 'presentation');\n\t\t\t\t\tel.innerHTML = '';\n\t\t\t\t\tel.appendChild(renderElement);\n\t\t\t\t\tgetRoot(renderElement).render(<KolBadge _color=\"#600\" _label={cell.label}></KolBadge>);\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'friday',\n\t\t\t\tlabel: 'Friday',\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tconst renderElement = document.createElement('div');\n\t\t\t\t\trenderElement.setAttribute('role', 'presentation');\n\t\t\t\t\tel.innerHTML = '';\n\t\t\t\t\tel.appendChild(renderElement);\n\t\t\t\t\tgetRoot(renderElement).render(<KolBadge _color=\"#303\" _label={cell.label}></KolBadge>);\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'saturday',\n\t\t\t\tlabel: 'Saturday',\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tconst renderElement = document.createElement('div');\n\t\t\t\t\trenderElement.setAttribute('role', 'presentation');\n\t\t\t\t\tel.innerHTML = '';\n\t\t\t\t\tel.appendChild(renderElement);\n\t\t\t\t\tgetRoot(renderElement).render(<KolBadge _color=\"#330\" _label={cell.label}></KolBadge>);\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'sunday',\n\t\t\t\tlabel: 'Sunday',\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tconst renderElement = document.createElement('div');\n\t\t\t\t\trenderElement.setAttribute('role', 'presentation');\n\t\t\t\t\tel.innerHTML = '';\n\t\t\t\t\tel.appendChild(renderElement);\n\t\t\t\t\tgetRoot(renderElement).render(<KolBadge _color=\"#033\" _label={cell.label}></KolBadge>);\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n\tvertical: [\n\t\t[\n\t\t\t{\n\t\t\t\tlabel: 'Early',\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Noon',\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Evening',\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Night',\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const HandoutBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<div className=\"grid gap-4\">\n\t\t\t<div className=\"grid gap-4 md:grid-cols-[auto_1fr_1fr] items-center\">\n\t\t\t\t<KolKolibri className=\"block w-75px\" _labeled={false}></KolKolibri>\n\t\t\t\t<KolHeading _label=\"\" _level={1}>\n\t\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\t\tKolibri-Handout <small>for {getThemeName(getTheme())}</small>\n\t\t\t\t\t</span>\n\t\t\t\t</KolHeading>\n\t\t\t\t<KolDetails _label=\"Abstract\" _open>\n\t\t\t\t\tThe handout shows a selection of KoliBri components in the style of <strong>{getThemeName(getTheme())}</strong>. Since KoliBri offers self-contained,\n\t\t\t\t\taccessible web components that can be customized to your own corporate design using theming, you don&#39;t have to develop these components yourself.\n\t\t\t\t\tFor more information read our documentation and follow us (\n\t\t\t\t\t<KolLink _label=\"https://github.com/public-ui/kolibri\" _href=\"https://github.com/public-ui/kolibri\" _target=\"_blank\" />\n\t\t\t\t\t).\n\t\t\t\t</KolDetails>\n\t\t\t</div>\n\t\t\t<div className=\"grid gap-4 sm:grid-cols-6 md:grid-cols-6  xl:grid-cols-12\">\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-3 xl:col-span-2\" _label=\"Heading\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 1\" _level={1}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 2\" _level={2}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 3\" _level={3}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 4\" _level={4}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 5\" _level={5}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 6\" _level={6}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 6\" _secondaryHeadline=\"Lessons\" _level={6}></KolHeading>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t{/* <KolCard className=\"col-span-3\" _label=\"Accordion\" _level={2}>\n\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 1\" _level={1} _open>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 1</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 2\" _level={2}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 2</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 3\" _level={3}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 3</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 4\" _level={4}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 4</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 5\" _level={5}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 5</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 6\" _level={6}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 6</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t</div>\n\t\t\t</KolCard> */}\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-3 xl:col-span-2\" _label=\"Abbreviation and Progress\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tI am <KolAbbr _label=\"as an example\">e.g.</KolAbbr> an abbreviation.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tI am <KolAbbr>e.g.</KolAbbr> an abbreviation without label.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<KolProgress _variant=\"bar\" _max={100} _value={33} _label=\"Progress\" />\n\t\t\t\t\t\t<KolProgress _variant=\"cycle\" _max={100} _value={66} _label=\"Progress\" />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-6 xl:col-span-3\" _label=\"Button, LinkButton and Tab\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<KolTabs _label=\"\" _selected={0} _tabs={[{ _label: 'Button' }, { _label: 'LinkButton' }, { _label: 'Disabled Tab', _disabled: true }]}>\n\t\t\t\t\t\t\t<div className=\"grid gap-2 py-2\">\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _icons={{ left: 'codicon codicon-arrow-left' }} _label=\"primary\" _variant=\"primary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ left: 'codicon codicon-arrow-left' }} _label=\"primary\" _variant=\"primary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"codicon codicon-arrow-left\" _label=\"primary\" _variant=\"primary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _icons={{ right: 'codicon codicon-arrow-right' }} _label=\"secondary\" _variant=\"secondary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t\t\t\t_disabled\n\t\t\t\t\t\t\t\t\t\t_icons={{ right: 'codicon codicon-arrow-right' }}\n\t\t\t\t\t\t\t\t\t\t_label=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t_variant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t\t\t\t></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"codicon codicon-arrow-right\" _label=\"secondary\" _variant=\"secondary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _icons={{ top: 'codicon codicon-arrow-up' }} _label=\"danger\" _variant=\"danger\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ top: 'codicon codicon-arrow-up' }} _label=\"danger\" _variant=\"danger\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"codicon codicon-arrow-up\" _label=\"danger\" _variant=\"danger\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _icons={{ bottom: 'codicon codicon-arrow-down' }} _label=\"normal\" _variant=\"normal\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ bottom: 'codicon codicon-arrow-down' }} _label=\"normal\" _variant=\"normal\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"codicon codicon-arrow-down\" _label=\"normal\" _variant=\"normal\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _label=\"ghost\" _variant=\"ghost\"></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _label=\"ghost\" _variant=\"ghost\"></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _icons=\"codicon codicon-home\" _hideLabel _label=\"ghost\" _variant=\"ghost\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"grid gap-2 py-2\">\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ left: 'codicon codicon-arrow-left' }} _label=\"primary\" _variant=\"primary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ left: 'codicon codicon-arrow-left' }} _label=\"primary\" _variant=\"primary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"codicon codicon-arrow-left\" _label=\"primary\" _variant=\"primary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ right: 'codicon codicon-arrow-right' }} _label=\"secondary\" _variant=\"secondary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ right: 'codicon codicon-arrow-right' }} _label=\"secondary\" _variant=\"secondary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"codicon codicon-arrow-right\" _label=\"secondary\" _variant=\"secondary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ top: 'codicon codicon-arrow-up' }} _label=\"danger\" _variant=\"danger\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ top: 'codicon codicon-arrow-up' }} _label=\"danger\" _variant=\"danger\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"codicon codicon-arrow-up\" _label=\"danger\" _variant=\"danger\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ bottom: 'codicon codicon-arrow-down' }} _label=\"normal\" _variant=\"normal\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ bottom: 'codicon codicon-arrow-down' }} _label=\"normal\" _variant=\"normal\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"codicon codicon-arrow-down\" _label=\"normal\" _variant=\"normal\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _label=\"ghost\" _variant=\"ghost\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _label=\"ghost\" _variant=\"ghost\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons=\"codicon codicon-home\" _hideLabel _label=\"ghost\" _variant=\"ghost\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</KolTabs>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-2 xl:col-span-2\" _label=\"Accordion, Link and ButtonLink\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<KolAccordion _label=\"Links\" _level={3} _open>\n\t\t\t\t\t\t\t<div className=\"grid gap-2\" slot=\"\">\n\t\t\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link text\"></KolLink>\n\t\t\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"codicon codicon-home\" _label=\"Link text with icon\"></KolLink>\n\t\t\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"codicon codicon-home\" _hideLabel _label=\"Link text with icon only\"></KolLink>\n\t\t\t\t\t\t\t\t<KolLink _href=\"/\" _label=\"Visited link\"></KolLink>\n\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\tI am a <KolLink _href=\"#/back-page\" _label=\"externer Link\" _target=\"w3c\"></KolLink> in the running text.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t\t<KolAccordion _label=\"ButtonLinks\" _level={3}>\n\t\t\t\t\t\t\t<div className=\"grid gap-2\" slot=\"\">\n\t\t\t\t\t\t\t\t<KolButtonLink _label=\"Link text\"></KolButtonLink>\n\t\t\t\t\t\t\t\t<KolButtonLink _icons=\"codicon codicon-home\" _label=\"Link text with icon\"></KolButtonLink>\n\t\t\t\t\t\t\t\t<KolButtonLink _icons=\"codicon codicon-home\" _hideLabel _label=\"Link text with icon only\"></KolButtonLink>\n\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\tI am a <KolButtonLink _label=\"Link\"></KolButtonLink> in the running text.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t<KolButtonLink\n\t\t\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\t\t\tleft: 'codicon codicon-arrow-left',\n\t\t\t\t\t\t\t\t\t\tright: 'codicon codicon-arrow-right',\n\t\t\t\t\t\t\t\t\t\ttop: 'codicon codicon-arrow-up',\n\t\t\t\t\t\t\t\t\t\tbottom: 'codicon codicon-arrow-down',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t_label=\"Icons\"\n\t\t\t\t\t\t\t\t></KolButtonLink>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-3\" _label=\"Alert\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<KolAlert _label=\"Default message\" _type=\"default\">\n\t\t\t\t\t\t\tThis is the text of the alert.\n\t\t\t\t\t\t</KolAlert>\n\t\t\t\t\t\t<KolAlert _type=\"success\">Success message text</KolAlert>\n\t\t\t\t\t\t<KolAlert _type=\"error\" _hasCloser>\n\t\t\t\t\t\t\tThis is a error message text.\n\t\t\t\t\t\t</KolAlert>\n\t\t\t\t\t\t<KolAlert _label=\"Info card\" _type=\"info\" _variant=\"card\">\n\t\t\t\t\t\t\tThis is the text of the alert.\n\t\t\t\t\t\t</KolAlert>\n\t\t\t\t\t\t<KolAlert _label=\"Warning card\" _type=\"warning\" _hasCloser _variant=\"card\">\n\t\t\t\t\t\t\tThis is the text of the alert.\n\t\t\t\t\t\t</KolAlert>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-2 xl:col-span-2\" _label=\"Nav and Breadcrumb\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<KolNav\n\t\t\t\t\t\t\t\t_label=\"Main navigation\"\n\t\t\t\t\t\t\t\t_links={[\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t_label: 'Homepage',\n\t\t\t\t\t\t\t\t\t\t_icons: 'codicon codicon-home',\n\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\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\t\t_label: '2 Navigation point',\n\t\t\t\t\t\t\t\t\t\t_icons: 'codicon codicon-home',\n\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\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\t\t_active: true,\n\t\t\t\t\t\t\t\t\t\t_label: '3 Navigation point',\n\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t_icons: 'codicon codicon-home',\n\t\t\t\t\t\t\t\t\t\t_children: [\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t_label: '3.1 Navigation point',\n\t\t\t\t\t\t\t\t\t\t\t\t_icons: 'codicon codicon-home',\n\t\t\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t_label: '3.2 External navigation point',\n\t\t\t\t\t\t\t\t\t\t\t\t_icons: 'codicon codicon-home',\n\t\t\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t\t\t_target: '_blank',\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t_label: '3.3 Navigation point',\n\t\t\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t\t\t_icons: 'codicon codicon-home',\n\t\t\t\t\t\t\t\t\t\t\t\t_children: [\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_active: true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_label: '3.3.1 Navigation point (active)',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_icons: 'codicon codicon-home',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ _label: '3.3.2 Navigation point', _icons: 'codicon codicon-home', _href: '#/back-page' },\n\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t},\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\t{ _label: '3 Navigation point', _icons: 'codicon codicon-home', _href: '#/back-page' },\n\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\t_hasCompactButton\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{/* <KolSkipNav></KolSkipNav> */}\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<KolBreadcrumb\n\t\t\t\t\t\t\t\t_label=\"Breadcrumb aus Text-Links\"\n\t\t\t\t\t\t\t\t_links={[\n\t\t\t\t\t\t\t\t\t{ _label: 'Homepage', _href: '#/back-page' },\n\t\t\t\t\t\t\t\t\t{ _label: 'Bottom of the homepage', _href: '#/back-page' },\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\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></KolBreadcrumb>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5\" _label=\"Input\" _level={2}>\n\t\t\t\t\t<KolForm slot=\"\">\n\t\t\t\t\t\t<div className=\"grid gap-4 sm:grid-cols-2 md:grid-cols-3 p-2\">\n\t\t\t\t\t\t\t<KolInputColor _label={`Color`} />\n\t\t\t\t\t\t\t<KolInputFile _label={`Upload file`} />\n\t\t\t\t\t\t\t<KolInputNumber _label={`Number input`} />\n\t\t\t\t\t\t\t<KolInputDate _type=\"date\" _label={`Date`} />\n\t\t\t\t\t\t\t<KolInputEmail\n\t\t\t\t\t\t\t\t_icons=\"{'left': 'codicon codicon-home'}\"\n\t\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: 'Test of an error message' }}\n\t\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t\t_label={`E-mail address`}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<KolInputText _hint=\"I am a hint.\" _label={`First name`} />\n\t\t\t\t\t\t\t<KolInputPassword _label={`password`} />\n\t\t\t\t\t\t\t<KolSelect _options=\"[{'label':'Mr.','value':0},{'label':'Mrs.','value':1}]\" _label={`Stimmung`} />\n\t\t\t\t\t\t\t<KolInputRange _min={0} _max={50} _value={25} _label={`Slider`} />\n\t\t\t\t\t\t\t<KolInputRadio className=\"herr-frau\" _options=\"[{'label':'Mr.','value':0},{'label':'Mrs.','value':1}]\" _value=\"1\" _label={`Salutation`} />\n\t\t\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t\t\t<KolInputRadio _orientation=\"horizontal\" _options=\"[{'label':'Mr.','value':0},{'label':'Mrs.','value':1}]\" _value=\"0\" _label={`Salutation`} />\n\t\t\t\t\t\t\t\t<KolInputCheckbox _label=\"\">\n\t\t\t\t\t\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\t\t\t\t\t\tI accept the <KolAbbr _label=\"General Terms and Conditions\">AGB</KolAbbr>.\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</KolInputCheckbox>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<KolTextarea _rows={4} _label={`Textarea`} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</KolForm>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5\" _label=\"Table with Pagination\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<KolTableStateful _label=\"Table\" _minWidth=\"auto\" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTableStateful>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t</div>\n\t\t\t<KolVersion _label=\"5.0.2-test.2\"></KolVersion>\n\t\t\t{/* <KolImage _src=\"abgrenzung.jpg\" _alt=\"KoliBri Darstellung\"></KolImage> */}\n\t\t\t{/* <KolIndentedText></KolIndentedText> */}\n\t\t\t{/* <KolQuote></KolQuote> */}\n\t\t</div>\n\t);\n};\n",
+      "code": "import type { ButtonProps, KoliBriTableHeaders } from '@public-ui/components';\nimport {\n\tKolAbbr,\n\tKolAccordion,\n\tKolAlert,\n\tKolBadge,\n\tKolBreadcrumb,\n\tKolButton,\n\tKolButtonLink,\n\tKolCard,\n\tKolDetails,\n\tKolForm,\n\tKolHeading,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolKolibri,\n\tKolLink,\n\tKolLinkButton,\n\tKolNav,\n\tKolProgress,\n\tKolSelect,\n\tKolTableStateful,\n\tKolTabs,\n\tKolTextarea,\n\tKolVersion,\n} from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { getTheme, getThemeName } from '../../shares/store';\nimport { TABLE_DATA, type TableDataType } from './table-data';\n\nfunction KolButtonWrapper({ _on, ...other }: ButtonProps & { style: Record<string, unknown> }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton {...other} _on={dummyEventHandler} />;\n}\n\nconst TABLE_HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{\n\t\t\t\tlabel: 'Workdays',\n\t\t\t\tcolSpan: 5,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Weekend',\n\t\t\t\tcolSpan: 2,\n\t\t\t},\n\t\t],\n\t\t[\n\t\t\t{\n\t\t\t\tkey: 'monday',\n\t\t\t\tlabel: 'Monday',\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tconst renderElement = document.createElement('div');\n\t\t\t\t\trenderElement.setAttribute('role', 'presentation');\n\t\t\t\t\tel.innerHTML = '';\n\t\t\t\t\tel.appendChild(renderElement);\n\t\t\t\t\tgetRoot(renderElement).render(<KolButtonWrapper _label={cell.label} style={{ fontSize: '75%' }} />);\n\t\t\t\t},\n\t\t\t\tcompareFn: (first, second) => {\n\t\t\t\t\tif ((first as TableDataType).monday < (second as TableDataType).monday) {\n\t\t\t\t\t\treturn -1;\n\t\t\t\t\t}\n\t\t\t\t\tif ((first as TableDataType).monday > (second as TableDataType).monday) {\n\t\t\t\t\t\treturn 1;\n\t\t\t\t\t}\n\t\t\t\t\treturn 0;\n\t\t\t\t},\n\t\t\t\tsortDirection: 'ASC',\n\t\t\t\ttextAlign: 'right',\n\t\t\t\twidth: '100px',\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'tuesday',\n\t\t\t\tlabel: 'Tuesday',\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tconst renderElement = document.createElement('div');\n\t\t\t\t\trenderElement.setAttribute('role', 'presentation');\n\t\t\t\t\tel.innerHTML = '';\n\t\t\t\t\tel.appendChild(renderElement);\n\t\t\t\t\tgetRoot(renderElement).render(<KolBadge _color=\"#060\" _label={cell.label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\tcompareFn: (first, second) => {\n\t\t\t\t\tif ((first as TableDataType).tuesday < (second as TableDataType).tuesday) {\n\t\t\t\t\t\treturn -1;\n\t\t\t\t\t}\n\t\t\t\t\tif ((first as TableDataType).tuesday > (second as TableDataType).tuesday) {\n\t\t\t\t\t\treturn 1;\n\t\t\t\t\t}\n\t\t\t\t\treturn 0;\n\t\t\t\t},\n\t\t\t\tsortDirection: 'DESC',\n\t\t\t\twidth: '100px',\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'wednesday',\n\t\t\t\tlabel: 'Wednesday',\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tconst renderElement = document.createElement('div');\n\t\t\t\t\trenderElement.setAttribute('role', 'presentation');\n\t\t\t\t\tel.innerHTML = '';\n\t\t\t\t\tel.appendChild(renderElement);\n\t\t\t\t\tgetRoot(renderElement).render(<KolBadge _color=\"#006\" _label={cell.label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: '110px',\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'thursday',\n\t\t\t\tlabel: 'Thursday',\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tconst renderElement = document.createElement('div');\n\t\t\t\t\trenderElement.setAttribute('role', 'presentation');\n\t\t\t\t\tel.innerHTML = '';\n\t\t\t\t\tel.appendChild(renderElement);\n\t\t\t\t\tgetRoot(renderElement).render(<KolBadge _color=\"#600\" _label={cell.label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: '100px',\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'friday',\n\t\t\t\tlabel: 'Friday',\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tconst renderElement = document.createElement('div');\n\t\t\t\t\trenderElement.setAttribute('role', 'presentation');\n\t\t\t\t\tel.innerHTML = '';\n\t\t\t\t\tel.appendChild(renderElement);\n\t\t\t\t\tgetRoot(renderElement).render(<KolBadge _color=\"#303\" _label={cell.label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: '100px',\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'saturday',\n\t\t\t\tlabel: 'Saturday',\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tconst renderElement = document.createElement('div');\n\t\t\t\t\trenderElement.setAttribute('role', 'presentation');\n\t\t\t\t\tel.innerHTML = '';\n\t\t\t\t\tel.appendChild(renderElement);\n\t\t\t\t\tgetRoot(renderElement).render(<KolBadge _color=\"#330\" _label={cell.label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: '100px',\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'sunday',\n\t\t\t\tlabel: 'Sunday',\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tconst renderElement = document.createElement('div');\n\t\t\t\t\trenderElement.setAttribute('role', 'presentation');\n\t\t\t\t\tel.innerHTML = '';\n\t\t\t\t\tel.appendChild(renderElement);\n\t\t\t\t\tgetRoot(renderElement).render(<KolBadge _color=\"#033\" _label={cell.label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: '100px',\n\t\t\t},\n\t\t],\n\t],\n\tvertical: [\n\t\t[\n\t\t\t{\n\t\t\t\tlabel: 'Early',\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Noon',\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Evening',\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Night',\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const HandoutBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<div className=\"grid gap-4\">\n\t\t\t<div className=\"grid gap-4 md:grid-cols-[auto_1fr_1fr] items-center\">\n\t\t\t\t<KolKolibri className=\"block w-75px\" _labeled={false}></KolKolibri>\n\t\t\t\t<KolHeading _label=\"\" _level={1}>\n\t\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\t\tKolibri-Handout <small>for {getThemeName(getTheme())}</small>\n\t\t\t\t\t</span>\n\t\t\t\t</KolHeading>\n\t\t\t\t<KolDetails _label=\"Abstract\" _open>\n\t\t\t\t\tThe handout shows a selection of KoliBri components in the style of <strong>{getThemeName(getTheme())}</strong>. Since KoliBri offers self-contained,\n\t\t\t\t\taccessible web components that can be customized to your own corporate design using theming, you don&#39;t have to develop these components yourself.\n\t\t\t\t\tFor more information read our documentation and follow us (\n\t\t\t\t\t<KolLink _label=\"https://github.com/public-ui/kolibri\" _href=\"https://github.com/public-ui/kolibri\" _target=\"_blank\" />\n\t\t\t\t\t).\n\t\t\t\t</KolDetails>\n\t\t\t</div>\n\t\t\t<div className=\"grid gap-4 sm:grid-cols-6 md:grid-cols-6  xl:grid-cols-12\">\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-3 xl:col-span-2\" _label=\"Heading\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 1\" _level={1}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 2\" _level={2}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 3\" _level={3}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 4\" _level={4}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 5\" _level={5}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 6\" _level={6}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 6\" _secondaryHeadline=\"Lessons\" _level={6}></KolHeading>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t{/* <KolCard className=\"col-span-3\" _label=\"Accordion\" _level={2}>\n\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 1\" _level={1} _open>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 1</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 2\" _level={2}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 2</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 3\" _level={3}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 3</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 4\" _level={4}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 4</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 5\" _level={5}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 5</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 6\" _level={6}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 6</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t</div>\n\t\t\t</KolCard> */}\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-3 xl:col-span-2\" _label=\"Abbreviation and Progress\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tI am <KolAbbr _label=\"as an example\">e.g.</KolAbbr> an abbreviation.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tI am <KolAbbr>e.g.</KolAbbr> an abbreviation without label.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<KolProgress _variant=\"bar\" _max={100} _value={33} _label=\"Progress\" />\n\t\t\t\t\t\t<KolProgress _variant=\"cycle\" _max={100} _value={66} _label=\"Progress\" />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-6 xl:col-span-3\" _label=\"Button, LinkButton and Tab\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<KolTabs _label=\"\" _selected={0} _tabs={[{ _label: 'Button' }, { _label: 'LinkButton' }, { _label: 'Disabled Tab', _disabled: true }]}>\n\t\t\t\t\t\t\t<div className=\"grid gap-2 py-2\">\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _icons={{ left: 'kolicon-chevron-left' }} _label=\"primary\" _variant=\"primary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ left: 'kolicon-chevron-left' }} _label=\"primary\" _variant=\"primary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-chevron-left\" _label=\"primary\" _variant=\"primary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _icons={{ right: 'kolicon-chevron-right' }} _label=\"secondary\" _variant=\"secondary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ right: 'kolicon-chevron-right' }} _label=\"secondary\" _variant=\"secondary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-chevron-right\" _label=\"secondary\" _variant=\"secondary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _icons={{ top: 'kolicon-chevron-up' }} _label=\"danger\" _variant=\"danger\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ top: 'kolicon-chevron-up' }} _label=\"danger\" _variant=\"danger\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-chevron-up\" _label=\"danger\" _variant=\"danger\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _icons={{ bottom: 'kolicon-chevron-down' }} _label=\"normal\" _variant=\"normal\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ bottom: 'kolicon-chevron-down' }} _label=\"normal\" _variant=\"normal\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-chevron-down\" _label=\"normal\" _variant=\"normal\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _label=\"ghost\" _variant=\"ghost\"></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _label=\"ghost\" _variant=\"ghost\"></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-house\" _hideLabel _label=\"ghost\" _variant=\"ghost\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"grid gap-2 py-2\">\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ left: 'kolicon-chevron-left' }} _label=\"primary\" _variant=\"primary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ left: 'kolicon-chevron-left' }} _label=\"primary\" _variant=\"primary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"kolicon-chevron-left\" _label=\"primary\" _variant=\"primary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ right: 'kolicon-chevron-right' }} _label=\"secondary\" _variant=\"secondary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ right: 'kolicon-chevron-right' }} _label=\"secondary\" _variant=\"secondary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"kolicon-chevron-right\" _label=\"secondary\" _variant=\"secondary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ top: 'kolicon-chevron-up' }} _label=\"danger\" _variant=\"danger\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ top: 'kolicon-chevron-up' }} _label=\"danger\" _variant=\"danger\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"kolicon-chevron-up\" _label=\"danger\" _variant=\"danger\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ bottom: 'kolicon-chevron-down' }} _label=\"normal\" _variant=\"normal\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ bottom: 'kolicon-chevron-down' }} _label=\"normal\" _variant=\"normal\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"kolicon-chevron-down\" _label=\"normal\" _variant=\"normal\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _label=\"ghost\" _variant=\"ghost\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _label=\"ghost\" _variant=\"ghost\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons=\"fa-solid fa-house\" _hideLabel _label=\"ghost\" _variant=\"ghost\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</KolTabs>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-2 xl:col-span-2\" _label=\"Accordion, Link and ButtonLink\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<KolAccordion _label=\"Links\" _level={3} _open>\n\t\t\t\t\t\t\t<div className=\"grid gap-2\" slot=\"\">\n\t\t\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link text\"></KolLink>\n\t\t\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"fa-solid fa-house\" _label=\"Link text with icon\"></KolLink>\n\t\t\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"fa-solid fa-house\" _hideLabel _label=\"Link text with icon only\"></KolLink>\n\t\t\t\t\t\t\t\t<KolLink _href=\"/\" _label=\"Visited link\"></KolLink>\n\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\tI am a <KolLink _href=\"#/back-page\" _label=\"externer Link\" _target=\"w3c\"></KolLink> in the running text.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t\t<KolAccordion _label=\"ButtonLinks\" _level={3}>\n\t\t\t\t\t\t\t<div className=\"grid gap-2\" slot=\"\">\n\t\t\t\t\t\t\t\t<KolButtonLink _label=\"Link text\"></KolButtonLink>\n\t\t\t\t\t\t\t\t<KolButtonLink _icons=\"fa-solid fa-house\" _label=\"Link text with icon\"></KolButtonLink>\n\t\t\t\t\t\t\t\t<KolButtonLink _icons=\"fa-solid fa-house\" _hideLabel _label=\"Link text with icon only\"></KolButtonLink>\n\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\tI am a <KolButtonLink _label=\"Link\"></KolButtonLink> in the running text.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t<KolButtonLink\n\t\t\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t_label=\"Icons\"\n\t\t\t\t\t\t\t\t></KolButtonLink>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-3\" _label=\"Alert\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<KolAlert _label=\"Default message\" _type=\"default\">\n\t\t\t\t\t\t\tThis is the text of the alert.\n\t\t\t\t\t\t</KolAlert>\n\t\t\t\t\t\t<KolAlert _type=\"success\">Success message text</KolAlert>\n\t\t\t\t\t\t<KolAlert _type=\"error\" _hasCloser>\n\t\t\t\t\t\t\tThis is a error message text.\n\t\t\t\t\t\t</KolAlert>\n\t\t\t\t\t\t<KolAlert _label=\"Info card\" _type=\"info\" _variant=\"card\">\n\t\t\t\t\t\t\tThis is the text of the alert.\n\t\t\t\t\t\t</KolAlert>\n\t\t\t\t\t\t<KolAlert _label=\"Warning card\" _type=\"warning\" _hasCloser _variant=\"card\">\n\t\t\t\t\t\t\tThis is the text of the alert.\n\t\t\t\t\t\t</KolAlert>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-2 xl:col-span-2\" _label=\"Nav and Breadcrumb\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<KolNav\n\t\t\t\t\t\t\t\t_label=\"Main navigation\"\n\t\t\t\t\t\t\t\t_links={[\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t_label: 'Homepage',\n\t\t\t\t\t\t\t\t\t\t_icons: 'fa-solid fa-house',\n\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\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\t\t_label: '2 Navigation point',\n\t\t\t\t\t\t\t\t\t\t_icons: 'fa-solid fa-house',\n\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\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\t\t_active: true,\n\t\t\t\t\t\t\t\t\t\t_label: '3 Navigation point',\n\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t_icons: 'fa-solid fa-house',\n\t\t\t\t\t\t\t\t\t\t_children: [\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t_label: '3.1 Navigation point',\n\t\t\t\t\t\t\t\t\t\t\t\t_icons: 'fa-solid fa-house',\n\t\t\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t_label: '3.2 External navigation point',\n\t\t\t\t\t\t\t\t\t\t\t\t_icons: 'fa-solid fa-house',\n\t\t\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t\t\t_target: '_blank',\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t_label: '3.3 Navigation point',\n\t\t\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t\t\t_icons: 'fa-solid fa-house',\n\t\t\t\t\t\t\t\t\t\t\t\t_children: [\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_active: true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_label: '3.3.1 Navigation point (active)',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_icons: 'fa-solid fa-house',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ _label: '3.3.2 Navigation point', _icons: 'fa-solid fa-house', _href: '#/back-page' },\n\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t},\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\t{ _label: '3 Navigation point', _icons: 'fa-solid fa-house', _href: '#/back-page' },\n\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\t_hasCompactButton\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{/* <KolSkipNav></KolSkipNav> */}\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<KolBreadcrumb\n\t\t\t\t\t\t\t\t_label=\"Breadcrumb aus Text-Links\"\n\t\t\t\t\t\t\t\t_links={[\n\t\t\t\t\t\t\t\t\t{ _label: 'Homepage', _href: '#/back-page' },\n\t\t\t\t\t\t\t\t\t{ _label: 'Bottom of the homepage', _href: '#/back-page' },\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\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></KolBreadcrumb>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5\" _label=\"Input\" _level={2}>\n\t\t\t\t\t<KolForm slot=\"\">\n\t\t\t\t\t\t<div className=\"grid gap-4 sm:grid-cols-2 md:grid-cols-3 p-2\">\n\t\t\t\t\t\t\t<KolInputColor _label={`Color`} />\n\t\t\t\t\t\t\t<KolInputFile _label={`Upload file`} />\n\t\t\t\t\t\t\t<KolInputNumber _label={`Number input`} />\n\t\t\t\t\t\t\t<KolInputDate _type=\"date\" _label={`Date`} />\n\t\t\t\t\t\t\t<KolInputEmail\n\t\t\t\t\t\t\t\t_icons=\"{'left': 'fa-solid fa-house'}\"\n\t\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: 'Test of an error message' }}\n\t\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t\t_label={`E-mail address`}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<KolInputText _hint=\"I am a hint.\" _label={`First name`} />\n\t\t\t\t\t\t\t<KolInputPassword _label={`password`} />\n\t\t\t\t\t\t\t<KolSelect _options=\"[{'label':'Mr.','value':0},{'label':'Mrs.','value':1}]\" _label={`Stimmung`} />\n\t\t\t\t\t\t\t<KolInputRange _min={0} _max={50} _value={25} _label={`Slider`} />\n\t\t\t\t\t\t\t<KolInputRadio className=\"herr-frau\" _options=\"[{'label':'Mr.','value':0},{'label':'Mrs.','value':1}]\" _value=\"1\" _label={`Salutation`} />\n\t\t\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t\t\t<KolInputRadio _orientation=\"horizontal\" _options=\"[{'label':'Mr.','value':0},{'label':'Mrs.','value':1}]\" _value=\"0\" _label={`Salutation`} />\n\t\t\t\t\t\t\t\t<KolInputCheckbox _label=\"\">\n\t\t\t\t\t\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\t\t\t\t\t\tI accept the <KolAbbr _label=\"General Terms and Conditions\">AGB</KolAbbr>.\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</KolInputCheckbox>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<KolTextarea _rows={4} _label={`Textarea`} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</KolForm>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5\" _label=\"Table with Pagination\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2 flex\">\n\t\t\t\t\t\t<KolTableStateful _label=\"Table\" _minWidth=\"800px\" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTableStateful>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t</div>\n\t\t\t<KolVersion _label=\"5.0.2-test.2\"></KolVersion>\n\t\t\t{/* <KolImage _src=\"abgrenzung.jpg\" _alt=\"KoliBri Darstellung\"></KolImage> */}\n\t\t\t{/* <KolIndentedText></KolIndentedText> */}\n\t\t\t{/* <KolQuote></KolQuote> */}\n\t\t</div>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -501,7 +533,7 @@
       "group": "icon",
       "name": "basic",
       "path": "packages/samples/react/src/components/icon/basic.tsx",
-      "code": "import React from 'react';\n\nimport { KolIcon } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const IconBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolIcon renders codicon icons. This sample shows regular icons and one with a custom style-property, changing the icon color.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"codicon codicon-home\" />\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"codicon codicon-compass-active\" />\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"codicon codicon-debug\" />\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"codicon codicon-squirrel\" />\n\n\t\t\t<KolIcon\n\t\t\t\tclassName=\"block w-[1em] h-[1em]\"\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: 'red',\n\t\t\t\t}}\n\t\t\t\t_label=\"\"\n\t\t\t\t_icons=\"codicon codicon-home\"\n\t\t\t/>\n\t\t</div>\n\t</>\n);\n",
+      "code": "import React from 'react';\n\nimport { KolIcon } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const IconBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolIcon renders codicon icons. This sample shows regular icons and one with a custom style-property, changing the icon color.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"kolicon-alert-info\" />\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"kolicon-kolibri\" />\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"fa-solid fa-house\" />\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"fa-solid fa-heart\" />\n\n\t\t\t<KolIcon\n\t\t\t\tclassName=\"block w-[1em] h-[1em]\"\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: 'red',\n\t\t\t\t}}\n\t\t\t\t_label=\"\"\n\t\t\t\t_icons=\"fa-solid fa-house\"\n\t\t\t/>\n\t\t</div>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -509,7 +541,7 @@
       "group": "icon",
       "name": "font-awesome",
       "path": "packages/samples/react/src/components/icon/font-awesome.tsx",
-      "code": "import React from 'react';\n\nimport { KolIcon, KolInputText } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const IconFontAwesome: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolIcon renders Font Awesome icons, if you have added this font to your theme. We are showing Font Awesome Free 6.1.1.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"fa-solid fa-house\"></KolIcon>\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"fa-solid fa-circle-user\"></KolIcon>\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"fa-solid fa-truck\"></KolIcon>\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"fa-solid fa-city\"></KolIcon>\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"fa-regular fa-heart\"></KolIcon>\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"fa-regular fa-thumbs-up\"></KolIcon>\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"fa-brands fa-github\"></KolIcon>\n\n\t\t\t<KolInputText\n\t\t\t\t_label={'With Font Awesome icons'}\n\t\t\t\t_icons={{\n\t\t\t\t\tleft: {\n\t\t\t\t\t\ticon: 'fa-solid fa-phone',\n\t\t\t\t\t},\n\t\t\t\t\tright: {\n\t\t\t\t\t\ticon: 'fa-solid fa-arrow-right',\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t/>\n\t\t</div>\n\t</>\n);\n",
+      "code": "import React from 'react';\n\nimport { KolIcon, KolInputText } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const IconFontAwesome: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolIcon renders Font Awesome icons, if you have added this font to your theme. We are showing Font Awesome Free 6.1.1.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"fa-solid fa-house\"></KolIcon>\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"fa-solid fa-circle-user\"></KolIcon>\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"fa-solid fa-truck\"></KolIcon>\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"fa-solid fa-city\"></KolIcon>\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"fa-solid fa-heart\"></KolIcon>\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"fa-solid fa-thumbs-up\"></KolIcon>\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"fa-brands fa-github\"></KolIcon>\n\n\t\t\t<KolInputText\n\t\t\t\t_label={'With Font Awesome icons'}\n\t\t\t\t_icons={{\n\t\t\t\t\tleft: {\n\t\t\t\t\t\ticon: 'fa-solid fa-phone',\n\t\t\t\t\t},\n\t\t\t\t\tright: {\n\t\t\t\t\t\ticon: 'fa-solid fa-arrow-right',\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t/>\n\t\t</div>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -664,12 +696,36 @@
       "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { FormWrap } from '../FormWrap';\nimport { SampleDescription } from '../SampleDescription';\nimport { InputRangeVariants } from './partials/variants';\n\nexport const InputRangeBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolInputRange renders a pair of range- and number fields wich are synchronized with each other. The sample shows KolInputRange in a form context with\n\t\t\t\tall variations and states.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<FormWrap RefComponent={InputRangeVariants} showButtons={false} />\n\t</>\n);\n",
       "kind": "sample"
     },
+    {
+      "id": "sample/input-text/access-short-key",
+      "group": "input-text",
+      "name": "access-short-key",
+      "path": "packages/samples/react/src/components/input-text/access-short-key.tsx",
+      "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",
+      "kind": "sample"
+    },
+    {
+      "id": "sample/input-text/background",
+      "group": "input-text",
+      "name": "background",
+      "path": "packages/samples/react/src/components/input-text/background-test.tsx",
+      "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextBackground: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story showcases the component placed on a colored background.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4 bg-blue-400 p-4 rounded\">\n\t\t\t<strong>Default background:</strong>\n\t\t\t<KolInputText _label=\"First name\" _value=\"John Doe\" />\n\n\t\t\t<strong>Unset background:</strong>\n\t\t\t<KolInputText style={{ backgroundColor: 'unset' }} _label=\"First name\" _value=\"John Doe\" />\n\t\t</div>\n\t</>\n);\n",
+      "kind": "sample"
+    },
     {
       "id": "sample/input-text/basic",
       "group": "input-text",
       "name": "basic",
       "path": "packages/samples/react/src/components/input-text/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { FormWrap } from '../FormWrap';\nimport { SampleDescription } from '../SampleDescription';\nimport { InputTextVariants } from './partials/variants';\n\nexport const InputTextBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolInputText renders a text input field. The sample shows KolInputText in a form context with all variations and states.</p>\n\t\t</SampleDescription>\n\n\t\t<FormWrap RefComponent={InputTextVariants} showButtons={false} />\n\t</>\n);\n",
+      "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story showcases the most important InputText variants: default, required, validation error, disabled, read-only, and with icons.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolInputText _label=\"Name\" _value=\"Anderson-Clark\" />\n\t\t\t<KolInputText _label=\"Name\" _required _msg={{ _type: 'error', _description: 'Please enter your name' }} _touched />\n\t\t\t<KolInputText _label=\"Name\" _required _hint=\"Enter your surname\" />\n\t\t\t<KolInputText _label=\"Name\" _value=\"Anderson-Clark\" _disabled />\n\t\t\t<KolInputText _label=\"Name\" _readOnly _value=\"Anderson-Clark\" />\n\t\t\t<KolInputText _label=\"Name\" _icons=\"fa-solid fa-user\" _value=\"Anderson-Clark\" />\n\t\t</div>\n\t</>\n);\n",
+      "kind": "sample"
+    },
+    {
+      "id": "sample/input-text/disabled",
+      "group": "input-text",
+      "name": "disabled",
+      "path": "packages/samples/react/src/components/input-text/disabled.tsx",
+      "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextDisabled: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story demonstrates the disabled state of KolInputText. Disabled inputs cannot be edited or focused.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolInputText _label=\"Disabled with placeholder\" _placeholder=\"Placeholder text\" _disabled />\n\t\t\t<KolInputText _label=\"Disabled with value\" _value=\"This field is disabled\" _disabled />\n\t\t\t<KolInputText _label=\"Disabled with error message\" _value=\"Invalid value\" _msg={{ _type: 'error', _description: 'Error message' }} _disabled _touched />\n\t\t\t<KolInputText _label=\"Comparison: Enabled\" _value=\"This field is enabled\" />\n\t\t</div>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -677,7 +733,15 @@
       "group": "input-text",
       "name": "expert-slot",
       "path": "packages/samples/react/src/components/input-text/expert-slot.tsx",
-      "code": "import { KolInputText } from '@public-ui/react-v19';\nimport * as React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextExpertSlot = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample show KolInputText with expert slot.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolInputText _label=\"\" _type=\"text\">\n\t\t\t\t<span slot=\"expert\">I am more than just a input field</span>\n\t\t\t</KolInputText>\n\t\t</>\n\t);\n};\n",
+      "code": "import { KolBadge, KolIcon, KolInputText } from '@public-ui/react-v19';\nimport * as React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextExpertSlot = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolInputText with expert slot. The expert slot allows for complex custom content beyond simple text inputs.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolInputText _label=\"\" _type=\"text\">\n\t\t\t\t\t<span slot=\"expert\">I am more than just a input field</span>\n\t\t\t\t</KolInputText>\n\n\t\t\t\t<KolInputText _label=\"\" _type=\"text\" _value=\"Complex example\">\n\t\t\t\t\t<div slot=\"expert\" className=\"flex items-center gap-2\">\n\t\t\t\t\t\t<KolBadge _label=\"Premium\" _color=\"#1a73e8\" />\n\t\t\t\t\t\t<KolIcon _icons=\"kolicon-check\" _label=\"\" />\n\t\t\t\t\t\t<span>Verified account with premium features</span>\n\t\t\t\t\t</div>\n\t\t\t\t</KolInputText>\n\n\t\t\t\t<KolInputText _label=\"\" _type=\"text\" _placeholder=\"Enter your email\">\n\t\t\t\t\t<div slot=\"expert\" style={{ padding: '0.5rem', backgroundColor: '#f0f0f0', borderRadius: '4px' }}>\n\t\t\t\t\t\t<strong>Note:</strong> This email will be used for account recovery and notifications.\n\t\t\t\t\t</div>\n\t\t\t\t</KolInputText>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "kind": "sample"
+    },
+    {
+      "id": "sample/input-text/hide-label",
+      "group": "input-text",
+      "name": "hide-label",
+      "path": "packages/samples/react/src/components/input-text/hide-label.tsx",
+      "code": "import { KolAlert, KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextHideLabel: FC = () => (\n\t<div className=\"grid gap-4\">\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis story demonstrates the <code>_hideLabel</code> feature for KolInputText. It allows hiding the label visually while keeping it accessible for screen\n\t\t\t\treaders.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<section>\n\t\t\t<KolInputText _hideLabel _label=\"Search\" _placeholder=\"Search...\" _type=\"search\" />\n\t\t</section>\n\n\t\t<section>\n\t\t\t<KolInputText _hideLabel _label=\"Email\" _placeholder=\"Enter email\" _msg={{ _type: 'error', _description: 'Invalid email format' }} _touched />\n\t\t</section>\n\n\t\t<section>\n\t\t\t<fieldset className=\"grid md:grid-cols-2 gap-4\">\n\t\t\t\t<legend>Street Address</legend>\n\t\t\t\t<KolAlert className=\"col-span-2\" _level={0} _type=\"error\">\n\t\t\t\t\tPlease complete the address\n\t\t\t\t</KolAlert>\n\t\t\t\t<KolInputText\n\t\t\t\t\t_hideLabel\n\t\t\t\t\t_hideMsg\n\t\t\t\t\t_label=\"Street name\"\n\t\t\t\t\t_placeholder=\"Street name\"\n\t\t\t\t\t_msg={{ _type: 'error', _description: 'Please complete the address' }}\n\t\t\t\t\t_touched\n\t\t\t\t/>\n\t\t\t\t<KolInputText\n\t\t\t\t\t_hideLabel\n\t\t\t\t\t_hideMsg\n\t\t\t\t\t_label=\"House number\"\n\t\t\t\t\t_placeholder=\"Number\"\n\t\t\t\t\t_msg={{ _type: 'error', _description: 'Please complete the address' }}\n\t\t\t\t\t_touched\n\t\t\t\t/>\n\t\t\t</fieldset>\n\t\t</section>\n\t</div>\n);\n",
       "kind": "sample"
     },
     {
@@ -685,7 +749,31 @@
       "group": "input-text",
       "name": "hide-msg",
       "path": "packages/samples/react/src/components/input-text/hide-msg.tsx",
-      "code": "import { KolAlert, KolCard, KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextHideMsg: FC = () => (\n\t<div className=\"grid gap-4\">\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows the <code>_hideMsg</code> feature for KolInputText. It allows to hide the message from an input field and can be used, when the\n\t\t\t\tmessage (e.g. error) is already shown somewhere else, e.g. for a group of inputs.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolCard _label=\"Normal input field with error\" _level={0}>\n\t\t\t<KolInputText _msg={{ _type: 'error', _description: 'Error message' }} _label=\"Input with error\" _touched />\n\t\t</KolCard>\n\t\t<KolCard _label=\"Input fields with hidden error\" _level={0}>\n\t\t\t<fieldset className=\"grid md:grid-cols-2 gap-4\">\n\t\t\t\t<legend>Combined input field</legend>\n\t\t\t\t<KolAlert className=\"col-span-2\" _level={0} _type=\"error\">\n\t\t\t\t\tThis is a combined error message\n\t\t\t\t</KolAlert>\n\t\t\t\t<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideMsg _label=\"First input\" _touched />\n\t\t\t\t<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideMsg _label=\"Second input with error\" _touched />\n\t\t\t</fieldset>\n\t\t</KolCard>\n\t</div>\n);\n",
+      "code": "import { KolAlert, KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextHideMsg: FC = () => (\n\t<div className=\"grid gap-4\">\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows the <code>_hideMsg</code> feature for KolInputText. It allows to hide the message from an input field and can be used, when the\n\t\t\t\tmessage (e.g. error) is already shown somewhere else, e.g. for a group of inputs.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<section>\n\t\t\t<KolInputText _msg={{ _type: 'error', _description: 'Error message' }} _label=\"Input with error\" _touched />\n\t\t</section>\n\t\t<section>\n\t\t\t<fieldset className=\"grid md:grid-cols-2 gap-4\">\n\t\t\t\t<legend>Combined input field</legend>\n\t\t\t\t<KolAlert className=\"col-span-2\" _level={0} _type=\"error\">\n\t\t\t\t\tThis is a combined error message\n\t\t\t\t</KolAlert>\n\t\t\t\t<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideMsg _label=\"First input\" _touched />\n\t\t\t\t<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideMsg _label=\"Second input with error\" _touched />\n\t\t\t</fieldset>\n\t\t</section>\n\t</div>\n);\n",
+      "kind": "sample"
+    },
+    {
+      "id": "sample/input-text/message-types",
+      "group": "input-text",
+      "name": "message-types",
+      "path": "packages/samples/react/src/components/input-text/message-types.tsx",
+      "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextMessageTypes: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story demonstrates all available message types for KolInputText: default, info, error, warning, and success.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolInputText _label=\"Default message\" _value=\"Valid value\" _msg={{ _type: 'default', _description: 'This is a default message' }} _touched />\n\t\t\t<KolInputText _label=\"Error message\" _value=\"Invalid value\" _msg={{ _type: 'error', _description: 'This is an error message' }} _touched />\n\t\t\t<KolInputText _label=\"Info message\" _value=\"Some value\" _msg={{ _type: 'info', _description: 'This is an informational message' }} _touched />\n\t\t\t<KolInputText _label=\"Success message\" _value=\"Valid value\" _msg={{ _type: 'success', _description: 'This is a success message' }} _touched />\n\t\t\t<KolInputText _label=\"Warning message\" _value=\"Valid value\" _msg={{ _type: 'warning', _description: 'This is a warning message' }} _touched />\n\t\t</div>\n\t</>\n);\n",
+      "kind": "sample"
+    },
+    {
+      "id": "sample/input-text/placeholder",
+      "group": "input-text",
+      "name": "placeholder",
+      "path": "packages/samples/react/src/components/input-text/placeholder.tsx",
+      "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextPlaceholder: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story demonstrates the placeholder feature of KolInputText.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolInputText _label=\"First name\" _placeholder=\"Enter your first name\" />\n\t\t\t<KolInputText _label=\"Email address\" _placeholder=\"user@example.com\" />\n\t\t\t<KolInputText _label=\"Phone number\" _placeholder=\"+49 123 456789\" _type=\"tel\" />\n\t\t\t<KolInputText _label=\"Website\" _placeholder=\"https://example.com\" _type=\"url\" />\n\t\t\t<KolInputText _label=\"Search\" _placeholder=\"Search...\" _type=\"search\" />\n\t\t</div>\n\t</>\n);\n",
+      "kind": "sample"
+    },
+    {
+      "id": "sample/input-text/readonly",
+      "group": "input-text",
+      "name": "readonly",
+      "path": "packages/samples/react/src/components/input-text/readonly.tsx",
+      "code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextReadonly: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story demonstrates the readonly state of KolInputText. Readonly inputs can be focused but not edited.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolInputText _label=\"Readonly with placeholder\" _placeholder=\"Placeholder text\" _readOnly />\n\t\t\t<KolInputText _label=\"Readonly with value\" _value=\"This field is readonly\" _readOnly />\n\t\t\t<KolInputText\n\t\t\t\t_label=\"Readonly with info message\"\n\t\t\t\t_value=\"Read-only value\"\n\t\t\t\t_msg={{ _type: 'info', _description: 'This field cannot be edited' }}\n\t\t\t\t_readOnly\n\t\t\t\t_touched\n\t\t\t/>\n\t\t\t<KolInputText _label=\"Comparison: Editable\" _value=\"This field is editable\" />\n\t\t</div>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -701,7 +789,7 @@
       "group": "input-text",
       "name": "smart-button",
       "path": "packages/samples/react/src/components/input-text/smart-button.tsx",
-      "code": "import { ToasterService } from '@public-ui/components';\nimport { KolInputText } from '@public-ui/react-v19';\nimport * as React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nconst smartButtonProps = {\n\t_icons: 'codicon codicon-info',\n\t_hideLabel: true,\n};\n\nconst icons = {\n\tleft: {\n\t\ticon: 'codicon codicon-arrow-left',\n\t},\n\tright: {\n\t\ticon: 'codicon codicon-arrow-right',\n\t},\n};\n\nexport const InputTextSmartButton = () => {\n\tconst toaster = ToasterService.getInstance(document);\n\n\tconst handleClick = {\n\t\tonClick: () => {\n\t\t\tvoid toaster.enqueue({\n\t\t\t\tdescription: 'Smart-Button clicked',\n\t\t\t\tlabel: `Toaster`,\n\t\t\t\ttype: 'default',\n\t\t\t});\n\t\t},\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows the smart button feature for KolInputText. It allows the usage of a button inside the bnput.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolInputText\n\t\t\t\t\t_label=\"Input with button and icons\"\n\t\t\t\t\t_type=\"text\"\n\t\t\t\t\t_smartButton={{\n\t\t\t\t\t\t...smartButtonProps,\n\t\t\t\t\t\t_label: 'Open Toast',\n\t\t\t\t\t\t_on: handleClick,\n\t\t\t\t\t}}\n\t\t\t\t\t_icons={icons}\n\t\t\t\t></KolInputText>\n\t\t\t\t<KolInputText\n\t\t\t\t\t_label=\"Disabled input with button and without icons\"\n\t\t\t\t\t_disabled\n\t\t\t\t\t_type=\"text\"\n\t\t\t\t\t_smartButton={{\n\t\t\t\t\t\t...smartButtonProps,\n\t\t\t\t\t\t_label: 'Disabled Button',\n\t\t\t\t\t}}\n\t\t\t\t></KolInputText>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "code": "import { ToasterService } from '@public-ui/components';\nimport { KolInputText } from '@public-ui/react-v19';\nimport * as React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nconst smartButtonProps = {\n\t_icons: 'kolicon-alert-info',\n\t_hideLabel: true,\n};\n\nconst icons = {\n\tleft: {\n\t\ticon: 'fa-solid fa-magnifying-glass',\n\t},\n\tright: {\n\t\ticon: 'kolicon-check',\n\t},\n};\n\nexport const InputTextSmartButton = () => {\n\tconst toaster = ToasterService.getInstance(document);\n\n\tconst handleClick = {\n\t\tonClick: () => {\n\t\t\tvoid toaster.enqueue({\n\t\t\t\tdescription: 'Smart-Button clicked',\n\t\t\t\tlabel: `Toaster`,\n\t\t\t\ttype: 'default',\n\t\t\t});\n\t\t},\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows the smart button feature for KolInputText. It allows the usage of a button inside the bnput.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolInputText\n\t\t\t\t\t_label=\"Input with button and icons\"\n\t\t\t\t\t_type=\"text\"\n\t\t\t\t\t_smartButton={{\n\t\t\t\t\t\t...smartButtonProps,\n\t\t\t\t\t\t_label: 'Open Toast',\n\t\t\t\t\t\t_on: handleClick,\n\t\t\t\t\t}}\n\t\t\t\t\t_icons={icons}\n\t\t\t\t></KolInputText>\n\t\t\t\t<KolInputText\n\t\t\t\t\t_label=\"Disabled input with button and icons\"\n\t\t\t\t\t_disabled\n\t\t\t\t\t_type=\"text\"\n\t\t\t\t\t_smartButton={{\n\t\t\t\t\t\t...smartButtonProps,\n\t\t\t\t\t\t_label: 'Disabled Button',\n\t\t\t\t\t}}\n\t\t\t\t\t_icons={icons}\n\t\t\t\t></KolInputText>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -741,7 +829,7 @@
       "group": "link",
       "name": "access-key",
       "path": "packages/samples/react/src/components/link/access-key.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkAccessKey: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolLink with access key. The access keys can be used to trigger the buttons using the keyboard.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"With S access key\" _accessKey=\"S\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Very small s\" _accessKey=\"s\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Access key does not appear in label\" _accessKey=\"s\" />\n\t\t\t<KolLink _hideLabel _icons=\"codicon codicon-home\" _href=\"#/back-page\" _label=\"access key without label\" _accessKey=\"s\" />\n\t\t</div>\n\t</>\n);\n",
+      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkAccessKey: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolLink with access key. The access keys can be used to trigger the buttons using the keyboard.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"With S access key\" _accessKey=\"S\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Very small s\" _accessKey=\"s\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Access key does not appear in label\" _accessKey=\"s\" />\n\t\t\t<KolLink _hideLabel _icons=\"fa-solid fa-house\" _href=\"#/back-page\" _label=\"access key without label\" _accessKey=\"s\" />\n\t\t</div>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -757,7 +845,7 @@
       "group": "link",
       "name": "basic",
       "path": "packages/samples/react/src/components/link/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolLink renders a link. This sample shows disabled links, links with hidden label, the boolean _inline property and links with different CSS{' '}\n\t\t\t\t<code>display</code>-properties.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _href=\"#/back-page\" _inline={false} _label=\"Simple Link\" />\n\t\t\t<KolLink _disabled _href=\"#/back-page\" _inline={false} _label=\"Simple Link (disabled)\" />\n\t\t\t<KolLink _hideLabel _icons=\"codicon codicon-home\" _href=\"#/back-page\" _inline={false} _label=\"Icon Link\" />\n\t\t\t<KolLink _disabled _hideLabel _icons=\"codicon codicon-home\" _href=\"#/back-page\" _inline={false} _label=\"Icon Link (disabled)\" />\n\t\t\t<p>\n\t\t\t\tIn this paragraph, a link is inserted that contains no additional attributes. <KolLink _href=\"#/back-page\" _label=\"Simple Link\" /> It is rendered by\n\t\t\t\tdefault as a <strong>inline element</strong>.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tIn this paragraph, a link is inserted that is rendered as an inline-block element.{' '}\n\t\t\t\t<KolLink class=\"d-inline-block\" _accessKey=\"S\" _href=\"#/back-page\" _label=\"Simple Link\" />. This allows you to assign width, height, and other\n\t\t\t\tproperties to it using CSS styles.\n\t\t\t\t<br />\n\t\t\t\t<br />\n\t\t\t\tAfter that, there is a link that is rendered as a block element. <KolLink class=\"d-block\" _href=\"#/back-page\" _label=\"Simple Link\" />, therefore, I span\n\t\t\t\tthe entire width of the parent element, causing a line break.\n\t\t\t</p>\n\t\t</div>\n\t</>\n);\n",
+      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolLink renders a link. This sample shows disabled links, links with hidden label, the boolean _inline property and links with different CSS{' '}\n\t\t\t\t<code>display</code>-properties.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _href=\"#/back-page\" _inline={false} _label=\"Simple Link\" />\n\t\t\t<KolLink _disabled _href=\"#/back-page\" _inline={false} _label=\"Simple Link (disabled)\" />\n\t\t\t<KolLink _hideLabel _icons=\"fa-solid fa-house\" _href=\"#/back-page\" _inline={false} _label=\"Icon Link\" />\n\t\t\t<KolLink _disabled _hideLabel _icons=\"fa-solid fa-house\" _href=\"#/back-page\" _inline={false} _label=\"Icon Link (disabled)\" />\n\t\t\t<p>\n\t\t\t\tIn this paragraph, a link is inserted that contains no additional attributes. <KolLink _href=\"#/back-page\" _label=\"Simple Link\" /> It is rendered by\n\t\t\t\tdefault as a <strong>inline element</strong>.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tIn this paragraph, a link is inserted that is rendered as an inline-block element.{' '}\n\t\t\t\t<KolLink class=\"d-inline-block\" _accessKey=\"S\" _href=\"#/back-page\" _label=\"Simple Link\" />. This allows you to assign width, height, and other\n\t\t\t\tproperties to it using CSS styles.\n\t\t\t\t<br />\n\t\t\t\t<br />\n\t\t\t\tAfter that, there is a link that is rendered as a block element. <KolLink class=\"d-block\" _href=\"#/back-page\" _label=\"Simple Link\" />, therefore, I span\n\t\t\t\tthe entire width of the parent element, causing a line break.\n\t\t\t</p>\n\t\t</div>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -765,7 +853,7 @@
       "group": "link",
       "name": "icons",
       "path": "packages/samples/react/src/components/link/icons.tsx",
-      "code": "import React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkIcons: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolLink with icons in different alignments and combinations.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _icons=\"codicon codicon-home\" _label=\"I am a link with an icon on the left\" _href=\"#/back-page\" />\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tright: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon on the right\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon at the top\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tbottom: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with icon below\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'codicon codicon-home',\n\t\t\t\t\tright: 'codicon codicon-home',\n\t\t\t\t\tbottom: 'codicon codicon-home',\n\t\t\t\t\tleft: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with all icons\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\n\t\t\t<KolLink _icons=\"codicon codicon-home\" _href=\"https://public-ui.github.io/\" _label=\"I am a external link with an icon on the left\" _target=\"_blank\" />\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tright: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external linkwith an icon on the right\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external link with an icon at the top\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tbottom: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external link with icon below\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external link with all icons\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'codicon codicon-home',\n\t\t\t\t\tright: 'codicon codicon-home',\n\t\t\t\t\tbottom: 'codicon codicon-home',\n\t\t\t\t\tleft: 'codicon codicon-home',\n\t\t\t\t}}\n\t\t\t/>\n\t\t</div>\n\t</>\n);\n",
+      "code": "import React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkIcons: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolLink with icons in different alignments and combinations.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _icons=\"fa-solid fa-house\" _label=\"I am a link with an icon on the left\" _href=\"#/back-page\" />\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tright: 'fa-solid fa-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon on the right\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'fa-solid fa-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon at the top\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tbottom: 'fa-solid fa-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with icon below\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'fa-solid fa-house',\n\t\t\t\t\tright: 'fa-solid fa-house',\n\t\t\t\t\tbottom: 'fa-solid fa-house',\n\t\t\t\t\tleft: 'fa-solid fa-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with all icons\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\n\t\t\t<KolLink _icons=\"fa-solid fa-house\" _href=\"https://public-ui.github.io/\" _label=\"I am a external link with an icon on the left\" _target=\"_blank\" />\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tright: 'fa-solid fa-house',\n\t\t\t\t}}\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external linkwith an icon on the right\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'fa-solid fa-house',\n\t\t\t\t}}\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external link with an icon at the top\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tbottom: 'fa-solid fa-house',\n\t\t\t\t}}\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external link with icon below\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external link with all icons\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'fa-solid fa-house',\n\t\t\t\t\tright: 'fa-solid fa-house',\n\t\t\t\t\tbottom: 'fa-solid fa-house',\n\t\t\t\t\tleft: 'fa-solid fa-house',\n\t\t\t\t}}\n\t\t\t/>\n\t\t</div>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -789,7 +877,7 @@
       "group": "link",
       "name": "short-key",
       "path": "packages/samples/react/src/components/link/short-key.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkShortKey: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed separately.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"With S short key\" _shortKey=\"S\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Very small s\" _shortKey=\"s\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Short key does not appear in label\" _shortKey=\"s\" />\n\t\t\t<KolLink _hideLabel _icons=\"codicon codicon-home\" _href=\"#/back-page\" _label=\"short key without label\" _shortKey=\"s\" />\n\t\t</div>\n\t</>\n);\n",
+      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkShortKey: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed separately.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"With S short key\" _shortKey=\"S\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Very small s\" _shortKey=\"s\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Short key does not appear in label\" _shortKey=\"s\" />\n\t\t\t<KolLink _hideLabel _icons=\"fa-solid fa-house\" _href=\"#/back-page\" _label=\"short key without label\" _shortKey=\"s\" />\n\t\t</div>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -797,7 +885,7 @@
       "group": "link",
       "name": "target",
       "path": "packages/samples/react/src/components/link/target.tsx",
-      "code": "import React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkTarget: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolLink with different <code>_target</code>-properties.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"text-base d-flex gap-4\">\n\t\t\t<ul>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link without target\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link with target (_self)\" _target=\"_self\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link with target (_blank)\" _target=\"_blank\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"codicon codicon-home\" _hideLabel _label=\"Link without target\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"codicon codicon-home\" _hideLabel _label=\"Link with target (_self)\" _target=\"_self\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"codicon codicon-home\" _hideLabel _label=\"Link with target (_blank)\" _target=\"_blank\" />\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t</>\n);\n",
+      "code": "import React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkTarget: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolLink with different <code>_target</code>-properties.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"text-base d-flex gap-4\">\n\t\t\t<ul>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link without target\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link with target (_self)\" _target=\"_self\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link with target (_blank)\" _target=\"_blank\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"fa-solid fa-house\" _hideLabel _label=\"Link without target\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"fa-solid fa-house\" _hideLabel _label=\"Link with target (_self)\" _target=\"_self\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"fa-solid fa-house\" _hideLabel _label=\"Link with target (_blank)\" _target=\"_blank\" />\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -837,7 +925,15 @@
       "group": "popover-button",
       "name": "basic",
       "path": "packages/samples/react/src/components/popover-button/basic.tsx",
-      "code": "import { KolHeading, KolPopoverButton, KolToolbar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const PopoverButtonBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst buttonRef = React.useRef<HTMLKolPopoverButtonElement>(null);\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\tconst TOOLBAR_ITEMS = [\n\t\t{\n\t\t\t_label: 'Edit',\n\t\t\t_icons: 'codicon codicon-edit',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\t_label: 'Delete',\n\t\t\t_icons: 'codicon codicon-trash',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\t_label: 'Duplicate',\n\t\t\t_icons: 'codicon codicon-copy',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t];\n\n\tuseEffect(() => {\n\t\t// Ensure the popover is closed on initial render\n\t\tif (buttonRef.current) {\n\t\t\tbuttonRef.current.showPopover();\n\t\t\tbuttonRef.current.kolFocus();\n\t\t}\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThe PopoverButton component combines a button with a popover that appears when clicked. The popover can be positioned in different directions (top,\n\t\t\t\t\tright, bottom, left) using the <code>_popoverAlign</code> prop.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<KolPopoverButton _label={'Actions'} _variant=\"primary\" _icons={{ right: 'codicon codicon-chevron-down' }} ref={buttonRef}>\n\t\t\t\t\t<KolToolbar _label=\"Action toolbar\" _items={TOOLBAR_ITEMS} _orientation=\"vertical\" />\n\t\t\t\t</KolPopoverButton>\n\t\t\t\t<KolPopoverButton _label=\"Help\" _icons=\"codicon codicon-info\" _popoverAlign=\"right\" _tooltipAlign=\"bottom\" _hideLabel>\n\t\t\t\t\t<div className=\"w-sm p-2 border border-solid border-gray\">\n\t\t\t\t\t\t<KolHeading _label=\"Help Information\" _level={0}></KolHeading>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!\n\t\t\t\t\t\t\tExercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</KolPopoverButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "code": "import type { ToolbarItemsPropType } from '@public-ui/components';\nimport { KolHeading, KolPopoverButton, KolToolbar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const PopoverButtonBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst buttonRef = React.useRef<HTMLKolPopoverButtonElement>(null);\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\tconst TOOLBAR_ITEMS: ToolbarItemsPropType = [\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Edit',\n\t\t\t_icons: 'fa-solid fa-pen',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Delete',\n\t\t\t_icons: 'fa-solid fa-trash',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Duplicate',\n\t\t\t_icons: 'fa-solid fa-copy',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t];\n\n\tuseEffect(() => {\n\t\t// Ensure the popover is closed on initial render\n\t\tif (buttonRef.current) {\n\t\t\tbuttonRef.current.showPopover();\n\t\t\tbuttonRef.current.kolFocus();\n\t\t}\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThe PopoverButton component combines a button with a popover that appears when clicked. The popover can be positioned in different directions (top,\n\t\t\t\t\tright, bottom, left) using the <code>_popoverAlign</code> prop.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<KolPopoverButton _label={'Actions'} _variant=\"primary\" _icons={{ right: 'kolicon-chevron-down' }} ref={buttonRef}>\n\t\t\t\t\t<KolToolbar _label=\"Action toolbar\" _items={TOOLBAR_ITEMS} _orientation=\"vertical\" />\n\t\t\t\t</KolPopoverButton>\n\t\t\t\t<KolPopoverButton _label=\"Help\" _icons=\"kolicon-alert-info\" _popoverAlign=\"right\" _tooltipAlign=\"bottom\" _hideLabel>\n\t\t\t\t\t<div className=\"w-sm p-2 border border-solid border-gray\">\n\t\t\t\t\t\t<KolHeading _label=\"Help Information\" _level={0}></KolHeading>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!\n\t\t\t\t\t\t\tExercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</KolPopoverButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "kind": "sample"
+    },
+    {
+      "id": "sample/popover-button/inline",
+      "group": "popover-button",
+      "name": "inline",
+      "path": "packages/samples/react/src/components/popover-button/inline.tsx",
+      "code": "import { KolHeading, KolPopoverButton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const PopoverButtonInline: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tA PopoverButton inline with some dummy text. Here the PopoverButton has the height of the surrounding text. As statet in\n\t\t\t\t\t<a href=\"https://www.w3.org/WAI/WCAG21/Understanding/target-size.html\">Understanding SC 2.5.5</a> target size of a help icon in text can be smaller\n\t\t\t\t\tthan 44px by 44px.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!\n\t\t\t\t\tExercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.\n\t\t\t\t\t<KolPopoverButton _inline={true} _label=\"Help\" _icons=\"fa-solid fa-circle-question\" _popoverAlign=\"right\" _tooltipAlign=\"bottom\" _hideLabel>\n\t\t\t\t\t\t<div className=\"w-sm p-2 border border-solid border-gray\">\n\t\t\t\t\t\t\t<KolHeading _label=\"Help Information\" _level={0}></KolHeading>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!\n\t\t\t\t\t\t\t\tExercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</KolPopoverButton>\n\t\t\t\t\t<br />\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!\n\t\t\t\t\tExercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -925,7 +1021,7 @@
       "group": "split-button",
       "name": "basic",
       "path": "packages/samples/react/src/components/split-button/basic.tsx",
-      "code": "import React from 'react';\n\nimport { KolSplitButton, KolToolbar } from '@public-ui/react-v19';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const SplitButtonBasic: FC = () => {\n\tconst { buttonWithTextClickEventHandler } = useToasterService();\n\tconst dummyEventHandler = {\n\t\tonClick: buttonWithTextClickEventHandler,\n\t};\n\tconst TOOLBAR_ITEMS = [\n\t\t{\n\t\t\t_label: 'Save',\n\t\t\t_icons: 'codicon codicon-save',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\t_label: 'Move',\n\t\t\t_icons: 'codicon codicon-move',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\t_label: 'Delete',\n\t\t\t_icons: 'codicon codicon-trash',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThe <code>SplitButton</code> component combines a primary action button with a context menu. Clicking the main button triggers the\n\t\t\t\t\t<strong> Edit</strong> action. The context menu opens a vertical list of additional actions:\n\t\t\t\t\t<strong> Save</strong>, <strong>Move</strong>, and <strong>Delete</strong>.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<KolSplitButton _label=\"Edit\" _on={dummyEventHandler}>\n\t\t\t\t\t<KolToolbar _label=\"Action toolbar\" _items={TOOLBAR_ITEMS} _orientation=\"vertical\" />\n\t\t\t\t</KolSplitButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "code": "import React from 'react';\n\nimport type { ToolbarItemsPropType } from '@public-ui/components';\nimport { KolSplitButton, KolToolbar } from '@public-ui/react-v19';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const SplitButtonBasic: FC = () => {\n\tconst { buttonWithTextClickEventHandler } = useToasterService();\n\tconst dummyEventHandler = {\n\t\tonClick: buttonWithTextClickEventHandler,\n\t};\n\tconst TOOLBAR_ITEMS: ToolbarItemsPropType = [\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Save',\n\t\t\t_icons: 'fa-solid fa-floppy-disk',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Move',\n\t\t\t_icons: 'fa-solid fa-arrows-up-down-left-right',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Delete',\n\t\t\t_icons: 'fa-solid fa-trash',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThe <code>SplitButton</code> component combines a primary action button with a context menu. Clicking the main button triggers the\n\t\t\t\t\t<strong> Edit</strong> action. The context menu opens a vertical list of additional actions:\n\t\t\t\t\t<strong> Save</strong>, <strong>Move</strong>, and <strong>Delete</strong>.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<KolSplitButton _label=\"Edit\" _on={dummyEventHandler}>\n\t\t\t\t\t<KolToolbar _label=\"Action toolbar\" _items={TOOLBAR_ITEMS} _orientation=\"vertical\" />\n\t\t\t\t</KolSplitButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -973,7 +1069,7 @@
       "group": "table",
       "name": "interactive-child-elements",
       "path": "packages/samples/react/src/components/table/interactive-child-elements.tsx",
-      "code": "import type { ButtonProps, ButtonVariantPropType, KoliBriTableCell, KoliBriTableHeaderCell } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolButtonLink, KolLink, KolLinkButton, KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\nfunction KolButtonWrapper({ _on, ...other }: ButtonProps) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton {...other} _on={dummyEventHandler} />;\n}\n\nconst getButtonHeaderCell = (variant: ButtonVariantPropType): KoliBriTableHeaderCell => {\n\tconst capitalizedVariant = variant.charAt(0).toUpperCase() + variant.slice(1);\n\treturn {\n\t\tlabel: capitalizedVariant,\n\t\tkey: variant,\n\t\ttextAlign: 'left',\n\t\trender: (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\tconst commonProps = {\n\t\t\t\t_label: capitalizedVariant,\n\t\t\t\t_variant: variant,\n\t\t\t\t_icons: { right: 'codicon codicon-squirrel' },\n\t\t\t};\n\t\t\tgetRoot(createReactRenderElement(element)).render(\n\t\t\t\tcell.label === 'button' ? <KolButtonWrapper {...commonProps} /> : <KolLinkButton _href=\"#/back-page\" {...commonProps} />,\n\t\t\t);\n\t\t},\n\t};\n};\n\nexport const InteractiveChildElements: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows a KolTableStateless with different interactive child elements. It can be used to assure themes show these child elements correctly.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full flex flex-col\">\n\t\t\t<KolTableStateless\n\t\t\t\t_label=\"Button styles\"\n\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t_headerCells={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\tgetButtonHeaderCell('primary'),\n\t\t\t\t\t\t\tgetButtonHeaderCell('secondary'),\n\t\t\t\t\t\t\tgetButtonHeaderCell('normal'),\n\t\t\t\t\t\t\tgetButtonHeaderCell('danger'),\n\t\t\t\t\t\t\tgetButtonHeaderCell('ghost'),\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t\tvertical: [[{ label: 'Button' }, { label: 'Link-Button' }]],\n\t\t\t\t}}\n\t\t\t\t_data={[\n\t\t\t\t\t{\n\t\t\t\t\t\tprimary: 'button',\n\t\t\t\t\t\tsecondary: 'button',\n\t\t\t\t\t\tnormal: 'button',\n\t\t\t\t\t\tdanger: 'button',\n\t\t\t\t\t\tghost: 'button',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tprimary: 'link-button',\n\t\t\t\t\t\tsecondary: 'link-button',\n\t\t\t\t\t\tnormal: 'link-button',\n\t\t\t\t\t\tdanger: 'link-button',\n\t\t\t\t\t\tghost: 'link-button',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t\tclassName=\"block\"\n\t\t\t/>\n\n\t\t\t<KolTableStateless\n\t\t\t\t_label=\"Link styles\"\n\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t_headerCells={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tkey: 'regular',\n\t\t\t\t\t\t\t\tlabel: 'Regular',\n\t\t\t\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\t\t\t\trender: (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\t\t\t\t\tconst commonProps = {\n\t\t\t\t\t\t\t\t\t\t_label: cell.label,\n\t\t\t\t\t\t\t\t\t\t_icons: { right: 'codicon codicon-squirrel' },\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\tgetRoot(createReactRenderElement(element)).render(\n\t\t\t\t\t\t\t\t\t\tcell.label === 'button-link' ? <KolButtonLink {...commonProps} /> : <KolLink _href=\"#/back-page\" {...commonProps} />,\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},\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t\tvertical: [[{ label: 'Link' }, { label: 'Button-Link' }]],\n\t\t\t\t}}\n\t\t\t\t_data={[\n\t\t\t\t\t{\n\t\t\t\t\t\tregular: 'link',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tregular: 'button-link',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t\tclassName=\"block mt\"\n\t\t\t/>\n\t\t</section>\n\t</>\n);\n",
+      "code": "import type { ButtonProps, ButtonVariantPropType, KoliBriTableCell, KoliBriTableHeaderCell } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolButtonLink, KolLink, KolLinkButton, KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\nfunction KolButtonWrapper({ _on, ...other }: ButtonProps) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton {...other} _on={dummyEventHandler} />;\n}\n\nconst getButtonHeaderCell = (variant: ButtonVariantPropType): KoliBriTableHeaderCell => {\n\tconst capitalizedVariant = variant.charAt(0).toUpperCase() + variant.slice(1);\n\treturn {\n\t\tlabel: capitalizedVariant,\n\t\tkey: variant,\n\t\ttextAlign: 'left',\n\t\trender: (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\tconst commonProps = {\n\t\t\t\t_label: capitalizedVariant,\n\t\t\t\t_variant: variant,\n\t\t\t\t_icons: { right: 'kolicon-kolibri' },\n\t\t\t};\n\t\t\tgetRoot(createReactRenderElement(element)).render(\n\t\t\t\tcell.label === 'button' ? <KolButtonWrapper {...commonProps} /> : <KolLinkButton _href=\"#/back-page\" {...commonProps} />,\n\t\t\t);\n\t\t},\n\t};\n};\n\nexport const InteractiveChildElements: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows a KolTableStateless with different interactive child elements. It can be used to assure themes show these child elements correctly.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full flex flex-col\">\n\t\t\t<KolTableStateless\n\t\t\t\t_label=\"Button styles\"\n\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t_headerCells={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\tgetButtonHeaderCell('primary'),\n\t\t\t\t\t\t\tgetButtonHeaderCell('secondary'),\n\t\t\t\t\t\t\tgetButtonHeaderCell('normal'),\n\t\t\t\t\t\t\tgetButtonHeaderCell('danger'),\n\t\t\t\t\t\t\tgetButtonHeaderCell('ghost'),\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t\tvertical: [[{ label: 'Button' }, { label: 'Link-Button' }]],\n\t\t\t\t}}\n\t\t\t\t_data={[\n\t\t\t\t\t{\n\t\t\t\t\t\tprimary: 'button',\n\t\t\t\t\t\tsecondary: 'button',\n\t\t\t\t\t\tnormal: 'button',\n\t\t\t\t\t\tdanger: 'button',\n\t\t\t\t\t\tghost: 'button',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tprimary: 'link-button',\n\t\t\t\t\t\tsecondary: 'link-button',\n\t\t\t\t\t\tnormal: 'link-button',\n\t\t\t\t\t\tdanger: 'link-button',\n\t\t\t\t\t\tghost: 'link-button',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t\tclassName=\"block\"\n\t\t\t/>\n\n\t\t\t<KolTableStateless\n\t\t\t\t_label=\"Link styles\"\n\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t_headerCells={{\n\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tkey: 'regular',\n\t\t\t\t\t\t\t\tlabel: 'Regular',\n\t\t\t\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\t\t\t\trender: (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\t\t\t\t\tconst commonProps = {\n\t\t\t\t\t\t\t\t\t\t_label: cell.label,\n\t\t\t\t\t\t\t\t\t\t_icons: { right: 'kolicon-kolibri' },\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\tgetRoot(createReactRenderElement(element)).render(\n\t\t\t\t\t\t\t\t\t\tcell.label === 'button-link' ? <KolButtonLink {...commonProps} /> : <KolLink _href=\"#/back-page\" {...commonProps} />,\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},\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t\tvertical: [[{ label: 'Link' }, { label: 'Button-Link' }]],\n\t\t\t\t}}\n\t\t\t\t_data={[\n\t\t\t\t\t{\n\t\t\t\t\t\tregular: 'link',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tregular: 'button-link',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t\tclassName=\"block mt\"\n\t\t\t/>\n\t\t</section>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -981,7 +1077,7 @@
       "group": "table",
       "name": "multi-sort",
       "path": "packages/samples/react/src/components/table/multi-sort.tsx",
-      "code": "import type { FC } from 'react';\nimport React, { useState } from 'react';\n\nimport type { KoliBriTableDataType, KoliBriTableHeaderCellWithLogic, KoliBriTableHeaders } from '@public-ui/components';\nimport { KolButtonLink, KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\n\nconst DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {\n\tday: '2-digit',\n\tmonth: '2-digit',\n\tyear: 'numeric',\n});\n\nconst TABLE_HEADER_CELLS: KoliBriTableHeaderCellWithLogic[] = [\n\t{\n\t\tlabel: 'order',\n\t\tkey: 'order',\n\t\ttextAlign: 'center',\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {\n\t\t\tif ((data0 as Data).order < (data1 as Data).order) return -1;\n\t\t\telse if ((data1 as Data).order < (data0 as Data).order) return 1;\n\t\t\telse return 0;\n\t\t},\n\t\tsortDirection: 'ASC',\n\t},\n\t{\n\t\tlabel: 'date',\n\t\tkey: 'date',\n\t\ttextAlign: 'center',\n\t\trender: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {\n\t\t\tif ((data0 as Data).date < (data1 as Data).date) return -1;\n\t\t\telse if ((data1 as Data).date < (data0 as Data).date) return 1;\n\t\t\telse return 0;\n\t\t},\n\t},\n];\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [TABLE_HEADER_CELLS],\n};\n\nconst HEADERS_VERTICAL: KoliBriTableHeaders = {\n\tvertical: [TABLE_HEADER_CELLS],\n};\n\nexport const MultiSortTable: FC = () => {\n\tconst [verticallHeader, setVerticalHeader] = useState(HEADERS_VERTICAL);\n\tconst [horizontalHeader, setHorizontalHeader] = useState(HEADERS_HORIZONTAL);\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateful with multi-sort functionality, allowing sorting by both &quot;order&quot; and &quot;date&quot; columns.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full grid gap-4\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Vertical\" />\n\t\t\t\t\t<KolButtonLink _label=\"Reset Table\" _on={{ onClick: () => setVerticalHeader({ vertical: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label=\"Sort Table with Order and Date\"\n\t\t\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t\t\t_data={DATA.slice(0, 10)}\n\t\t\t\t\t\t_headers={verticallHeader}\n\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t\t_allowMultiSort={true}\n\t\t\t\t\t/>\n\t\t\t\t</section>\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Horizontal\" />\n\t\t\t\t\t<KolButtonLink _label=\"Reset Table\" _on={{ onClick: () => setHorizontalHeader({ horizontal: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label=\"Sort Table with Order and Date\"\n\t\t\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t\t\t_data={DATA}\n\t\t\t\t\t\t_headers={horizontalHeader}\n\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t\t_allowMultiSort={true}\n\t\t\t\t\t/>\n\t\t\t\t</section>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
+      "code": "import type { FC } from 'react';\nimport React, { useState } from 'react';\n\nimport type { KoliBriTableDataType, KoliBriTableHeaderCellWithLogic, KoliBriTableHeaders } from '@public-ui/components';\nimport { KolButtonLink, KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {\n\tday: '2-digit',\n\tmonth: '2-digit',\n\tyear: 'numeric',\n});\n\ntype BacklogEntry = {\n\tdate: Date;\n\tassignee: string;\n\tdepartment: string;\n\tpriority: 'High' | 'Medium' | 'Low';\n\tstatus: 'Blocked' | 'In progress' | 'Ready';\n\topenTickets: number;\n};\n\nconst ASSIGNEES = ['Devon Chen', 'Fatima Alvi', 'Leon Köhler', 'Mila Schmidt', 'Sven Lindholm'];\nconst DEPARTMENTS = ['Customer Service', 'Digital Services', 'Infrastructure', 'Municipal Office'];\nconst PRIORITY_SEQUENCE: BacklogEntry['priority'][] = ['High', 'Medium', 'Low'];\nconst STATUS_SEQUENCE: BacklogEntry['status'][] = ['Blocked', 'In progress', 'Ready'];\n\nconst PRIORITY_ORDER = PRIORITY_SEQUENCE.reduce<Record<BacklogEntry['priority'], number>>(\n\t(order, priority, index) => {\n\t\torder[priority] = index;\n\t\treturn order;\n\t},\n\t{} as Record<BacklogEntry['priority'], number>,\n);\n\nconst STATUS_ORDER = STATUS_SEQUENCE.reduce<Record<BacklogEntry['status'], number>>(\n\t(order, status, index) => {\n\t\torder[status] = index;\n\t\treturn order;\n\t},\n\t{} as Record<BacklogEntry['status'], number>,\n);\n\nconst BACKLOG_DATA: BacklogEntry[] = Array.from({ length: 15 }).map((_, index) => ({\n\tdate: new Date(Date.now() - index * 1000 * 60 * 60 * 24),\n\tassignee: ASSIGNEES[index % ASSIGNEES.length],\n\tdepartment: DEPARTMENTS[index % DEPARTMENTS.length],\n\tpriority: PRIORITY_SEQUENCE[index % PRIORITY_SEQUENCE.length],\n\tstatus: STATUS_SEQUENCE[index % STATUS_SEQUENCE.length],\n\topenTickets: (index * 3) % 11,\n}));\nconst TABLE_HEADER_CELLS: KoliBriTableHeaderCellWithLogic[] = [\n\t{\n\t\tlabel: 'Assignee',\n\t\tkey: 'assignee',\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\t(data0 as BacklogEntry).assignee.localeCompare((data1 as BacklogEntry).assignee, 'de'),\n\t\tsortDirection: 'ASC',\n\t},\n\t{\n\t\tlabel: 'Department',\n\t\tkey: 'department',\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\t(data0 as BacklogEntry).department.localeCompare((data1 as BacklogEntry).department, 'de'),\n\t},\n\t{\n\t\tlabel: 'Priority',\n\t\tkey: 'priority',\n\t\ttextAlign: 'center',\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\tPRIORITY_ORDER[(data0 as BacklogEntry).priority] - PRIORITY_ORDER[(data1 as BacklogEntry).priority],\n\t\tsortDirection: 'DESC',\n\t},\n\t{\n\t\tlabel: 'Status',\n\t\tkey: 'status',\n\t\ttextAlign: 'center',\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\tSTATUS_ORDER[(data0 as BacklogEntry).status] - STATUS_ORDER[(data1 as BacklogEntry).status],\n\t},\n\t{\n\t\tlabel: 'Open tickets',\n\t\tkey: 'openTickets',\n\t\ttextAlign: 'right',\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => (data0 as BacklogEntry).openTickets - (data1 as BacklogEntry).openTickets,\n\t},\n\t{\n\t\tlabel: 'Last updated',\n\t\tkey: 'date',\n\t\ttextAlign: 'center',\n\t\trender: (_el, _cell, tuple) => DATE_FORMATTER.format((tuple as BacklogEntry).date),\n\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {\n\t\t\tif ((data0 as BacklogEntry).date < (data1 as BacklogEntry).date) return -1;\n\t\t\telse if ((data1 as BacklogEntry).date < (data0 as BacklogEntry).date) return 1;\n\t\t\telse return 0;\n\t\t},\n\t},\n];\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [TABLE_HEADER_CELLS],\n};\n\nconst HEADERS_VERTICAL: KoliBriTableHeaders = {\n\tvertical: [TABLE_HEADER_CELLS],\n};\n\nexport const MultiSortTable: FC = () => {\n\tconst [verticallHeader, setVerticalHeader] = useState(HEADERS_VERTICAL);\n\tconst [horizontalHeader, setHorizontalHeader] = useState(HEADERS_HORIZONTAL);\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tMulti-sort allows layering multiple column sorts at once. Compare the compact examples with the project backlog showcase to see how the sort order\n\t\t\t\t\tindicator helps track complex prioritisation.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full grid gap-6\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Vertical\" />\n\t\t\t\t\t<KolButtonLink _label=\"Reset Table\" _on={{ onClick: () => setVerticalHeader({ vertical: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label=\"Sort Table with Order and Date\"\n\t\t\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t\t\t_data={BACKLOG_DATA.slice(0, 10)}\n\t\t\t\t\t\t_headers={verticallHeader}\n\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t\t_allowMultiSort={true}\n\t\t\t\t\t/>\n\t\t\t\t</section>\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Horizontal\" />\n\t\t\t\t\t<KolButtonLink _label=\"Reset Table\" _on={{ onClick: () => setHorizontalHeader({ horizontal: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label=\"Sort Table with Order and Date\"\n\t\t\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t\t\t_data={BACKLOG_DATA}\n\t\t\t\t\t\t_headers={horizontalHeader}\n\t\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t\t_allowMultiSort={true}\n\t\t\t\t\t/>\n\t\t\t\t</section>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -1013,7 +1109,7 @@
       "group": "table",
       "name": "render-cell",
       "path": "packages/samples/react/src/components/table/render-cell.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { createReactRenderElement, KolButton, KolInputText, KolTableStateful } from '@public-ui/react-v19';\n\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\n\nimport type { IconsPropType, KoliBriTableHeaders } from '@public-ui/components';\nimport { useToasterService } from '../../hooks/useToasterService';\n\ntype Data = {\n\torder: number;\n\tdate: Date;\n\tshipped: boolean;\n};\nconst DATA: Data[] = [\n\t{\n\t\torder: 0,\n\t\tshipped: false,\n\t\tdate: new Date('1981-05-26T21:33:43.612Z'),\n\t},\n\t{\n\t\torder: 1,\n\t\tshipped: true,\n\t\tdate: new Date('1971-04-25T19:44:17.014Z'),\n\t},\n\t{\n\t\torder: 2,\n\t\tshipped: false,\n\t\tdate: new Date('1986-07-10T11:39:29.539Z'),\n\t},\n];\n\nfunction KolButtonWrapper({ label, icons }: { label: string; icons: IconsPropType }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _icons={icons} _on={dummyEventHandler} />;\n}\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{\n\t\t\t\tlabel: '#',\n\t\t\t\tkey: 'order',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\twidth: '10em',\n\n\t\t\t\t/* Example 1: Use render return value to format data */\n\t\t\t\trender: (_el, cell) => `Index: ${cell.label}`,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Status',\n\t\t\t\tkey: 'shipped',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\twidth: '10em',\n\n\t\t\t\t/* Example 2: Simple render function using textContent */\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tif (cell.label) {\n\t\t\t\t\t\tel.textContent = `Order has been dispatched 🚚`;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tel.textContent = `Order pending 📦`;\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Date (string)',\n\t\t\t\tkey: 'date',\n\t\t\t\twidth: '20em',\n\t\t\t\ttextAlign: 'center',\n\n\t\t\t\t/* Example 3: Render function using innerHTML. ⚠️Make sure to sanitize data to avoid XSS. */\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tel.innerHTML = `<strong>${DATE_FORMATTER.format(cell.label as unknown as Date)}</strong>`;\n\t\t\t\t},\n\t\t\t\tcompareFn: (data0, data1) => (data0 as Data).date.getTime() - (data1 as Data).date.getTime(),\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Action (react)',\n\t\t\t\twidth: '20em',\n\n\t\t\t\t/* Example 4: Render function using React */\n\t\t\t\trender: (el) => {\n\t\t\t\t\tgetRoot(createReactRenderElement(el)).render(\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: `grid`,\n\t\t\t\t\t\t\t\tgridAutoFlow: `column`,\n\t\t\t\t\t\t\t\talignItems: `end`,\n\t\t\t\t\t\t\t\tgap: `1rem`,\n\t\t\t\t\t\t\t\tmaxWidth: `400px`,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<KolInputText _label=\"Input\" />\n\t\t\t\t\t\t\t<KolButtonWrapper label=\"Save\" icons={{ left: 'codicon codicon-save' }} />\n\t\t\t\t\t\t</div>,\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const TableRenderCell: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful using React render functions for the cell contents.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTableStateful _label=\"Sort by date column\" _minWidth=\"auto\" _data={DATA} _headers={HEADERS} className=\"w-full\" />\n\t</>\n);\n",
+      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { createReactRenderElement, KolButton, KolInputText, KolTableStateful } from '@public-ui/react-v19';\n\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\n\nimport type { IconsPropType, KoliBriTableHeaders } from '@public-ui/components';\nimport { useToasterService } from '../../hooks/useToasterService';\n\ntype Data = {\n\torder: number;\n\tdate: Date;\n\tshipped: boolean;\n};\nconst DATA: Data[] = [\n\t{\n\t\torder: 0,\n\t\tshipped: false,\n\t\tdate: new Date('1981-05-26T21:33:43.612Z'),\n\t},\n\t{\n\t\torder: 1,\n\t\tshipped: true,\n\t\tdate: new Date('1971-04-25T19:44:17.014Z'),\n\t},\n\t{\n\t\torder: 2,\n\t\tshipped: false,\n\t\tdate: new Date('1986-07-10T11:39:29.539Z'),\n\t},\n];\n\nfunction KolButtonWrapper({ label, icons }: { label: string; icons: IconsPropType }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _icons={icons} _on={dummyEventHandler} />;\n}\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{\n\t\t\t\tlabel: '#',\n\t\t\t\tkey: 'order',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\twidth: '10em',\n\n\t\t\t\t/* Example 1: Use render return value to format data */\n\t\t\t\trender: (_el, cell) => `Index: ${cell.label}`,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Status',\n\t\t\t\tkey: 'shipped',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\twidth: '10em',\n\n\t\t\t\t/* Example 2: Simple render function using textContent */\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tif (cell.label) {\n\t\t\t\t\t\tel.textContent = `Order has been dispatched 🚚`;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tel.textContent = `Order pending 📦`;\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Date (string)',\n\t\t\t\tkey: 'date',\n\t\t\t\twidth: '20em',\n\t\t\t\ttextAlign: 'center',\n\n\t\t\t\t/* Example 3: Render function using innerHTML. ⚠️Make sure to sanitize data to avoid XSS. */\n\t\t\t\trender: (el, cell) => {\n\t\t\t\t\tel.innerHTML = `<strong>${DATE_FORMATTER.format(cell.label as unknown as Date)}</strong>`;\n\t\t\t\t},\n\t\t\t\tcompareFn: (data0, data1) => (data0 as Data).date.getTime() - (data1 as Data).date.getTime(),\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Action (react)',\n\t\t\t\twidth: '20em',\n\n\t\t\t\t/* Example 4: Render function using React */\n\t\t\t\trender: (el) => {\n\t\t\t\t\tgetRoot(createReactRenderElement(el)).render(\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: `grid`,\n\t\t\t\t\t\t\t\tgridAutoFlow: `column`,\n\t\t\t\t\t\t\t\talignItems: `end`,\n\t\t\t\t\t\t\t\tgap: `1rem`,\n\t\t\t\t\t\t\t\tmaxWidth: `400px`,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<KolInputText _label=\"Input\" />\n\t\t\t\t\t\t\t<KolButtonWrapper label=\"Save\" icons={{ left: 'fa-solid fa-floppy-disk' }} />\n\t\t\t\t\t\t</div>,\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const TableRenderCell: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful using React render functions for the cell contents.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTableStateful _label=\"Sort by date column\" _minWidth=\"auto\" _data={DATA} _headers={HEADERS} className=\"w-full\" />\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -1029,7 +1125,7 @@
       "group": "table",
       "name": "sort-data",
       "path": "packages/samples/react/src/components/table/sort-data.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport type { KoliBriTableHeaders } from '@public-ui/components';\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\n\nconst DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {\n\tday: '2-digit',\n\tmonth: '2-digit',\n\tyear: 'numeric',\n});\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'order', key: 'order', textAlign: 'center' },\n\t\t\t{\n\t\t\t\tlabel: 'date',\n\t\t\t\tkey: 'date',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\trender: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),\n\t\t\t\tcompareFn: (data0, data1) => {\n\t\t\t\t\tif ((data0 as Data).date < (data1 as Data).date) return -1;\n\t\t\t\t\telse if ((data1 as Data).date < (data0 as Data).date) return 1;\n\t\t\t\t\telse return 0;\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nconst HEADERS_VERTICAL: KoliBriTableHeaders = {\n\tvertical: [\n\t\t[\n\t\t\t{ label: 'order', key: 'order', textAlign: 'center' },\n\t\t\t{\n\t\t\t\tlabel: 'date',\n\t\t\t\tkey: 'date',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\trender: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),\n\t\t\t\tcompareFn: (data0, data1) => {\n\t\t\t\t\tif ((data0 as Data).date < (data1 as Data).date) return -1;\n\t\t\t\t\telse if ((data1 as Data).date < (data0 as Data).date) return 1;\n\t\t\t\t\telse return 0;\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const TableSortData: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful with sortable columns. The sort-order can be changed by clicking the &quot;date&quot; header column.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full grid gap-4\">\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Vertical headers\" />\n\t\t\t\t<KolTableStateful _label=\"Sort a date column\" _minWidth=\"auto\" _data={DATA.slice(0, 10)} _headers={HEADERS_VERTICAL} className=\"block\" />\n\t\t\t</section>\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Horizontal headers\" />\n\t\t\t\t<KolTableStateful _label=\"Sort a date column\" _minWidth=\"auto\" _data={DATA} _headers={HEADERS_HORIZONTAL} className=\"block\" />\n\t\t\t</section>\n\t\t</section>\n\t</>\n);\n",
+      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport type { KoliBriTableDataType, KoliBriTableHeaders } from '@public-ui/components';\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\n\nconst DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {\n\tday: '2-digit',\n\tmonth: '2-digit',\n\tyear: 'numeric',\n});\n\nconst compareByDate =\n\t(sortDirection = 'ASC') =>\n\t(data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {\n\t\tconst first = (data0 as Data).date.getTime();\n\t\tconst second = (data1 as Data).date.getTime();\n\t\tconst result = first - second;\n\t\treturn sortDirection === 'DESC' ? -result : result;\n\t};\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'order', key: 'order', textAlign: 'center' },\n\t\t\t{\n\t\t\t\tlabel: 'date',\n\t\t\t\tkey: 'date',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\trender: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),\n\t\t\t\tcompareFn: (data0, data1, direction) => compareByDate(direction)(data0, data1),\n\t\t\t},\n\t\t],\n\t],\n};\n\nconst HEADERS_VERTICAL: KoliBriTableHeaders = {\n\tvertical: [\n\t\t[\n\t\t\t{ label: 'order', key: 'order', textAlign: 'center' },\n\t\t\t{\n\t\t\t\tlabel: 'date',\n\t\t\t\tkey: 'date',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\trender: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),\n\t\t\t\tcompareFn: (data0, data1, direction) => compareByDate(direction)(data0, data1),\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const TableSortData: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful with sortable columns. The sort-order can be changed by clicking the &quot;date&quot; header column.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full grid gap-4\">\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Vertical headers\" />\n\t\t\t\t<KolTableStateful _label=\"Sort a date column\" _minWidth=\"auto\" _data={DATA.slice(0, 10)} _headers={HEADERS_VERTICAL} className=\"block\" />\n\t\t\t</section>\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Horizontal headers\" />\n\t\t\t\t<KolTableStateful _label=\"Sort a date column\" _minWidth=\"auto\" _data={DATA} _headers={HEADERS_HORIZONTAL} className=\"block\" />\n\t\t\t</section>\n\t\t</section>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -1037,7 +1133,7 @@
       "group": "table",
       "name": "stateful-with-selection",
       "path": "packages/samples/react/src/components/table/stateful-with-selection.tsx",
-      "code": "import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';\nimport { KolEvent } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATA = [\n\t{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },\n\t{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },\n\t{ id: '1003', name: 'This row is always unchecked', internalIdentifier: `AAA1003` },\n\t{ id: '1004', name: 'This row is always checked', internalIdentifier: `AAA1004` },\n];\ntype Data = (typeof DATA)[0];\n\nfunction KolButtonWrapper({ label }: { label: string }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _on={dummyEventHandler} />;\n}\n\nexport const TableStatefulWithSelection: FC = () => {\n\tconst [selectedValue, setSelectedValue] = useState<Data[] | null>();\n\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as Data).name}`,\n\t\tselectedKeys: selectedValue ? selectedValue.map((element) => element.internalIdentifier) : ['AAA1004'],\n\t\tdisabledKeys: ['AAA1003', 'AAA1004'],\n\t\tkeyPropertyName: 'internalIdentifier',\n\t};\n\n\tconst kolTableStatefulRef = useRef<HTMLKolTableStatefulElement>(null);\n\n\tconst handleSelectionChangeEvent = ({ detail: selection }: { detail: Data[] }) => {\n\t\tconsole.log('Selection change via event', selection);\n\t};\n\tconst handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | KoliBriTableDataType | null) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t};\n\n\tconst handleButtonClick = async () => {\n\t\tconst selection = await kolTableStatefulRef.current?.getSelection();\n\t\tsetSelectedValue(selection as Data[] | null);\n\t};\n\n\tuseEffect(() => {\n\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\tkolTableStatefulRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\n\t\treturn () => {\n\t\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\t\tkolTableStatefulRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\t\t};\n\t}, [kolTableStatefulRef]);\n\n\tconst renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\tgetRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateful with checkboxes for selection enabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full\">\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Table with selection checkboxes\"\n\t\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t\t_headers={{\n\t\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t{ key: 'id', label: '#ID', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'name', label: 'Name', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t}}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t\t\tref={kolTableStatefulRef}\n\t\t\t\t/>\n\t\t\t\t<div className=\"grid grid-cols-3 items-end gap-4 mt-4\">\n\t\t\t\t\t<KolButton\n\t\t\t\t\t\t_label=\"getSelection()\"\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\tvoid handleButtonClick();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t></KolButton>\n\t\t\t\t\t<pre className=\"text-base\">{JSON.stringify(selectedValue, null, 2)}</pre>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
+      "code": "import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';\nimport { KolEvent } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATA = [\n\t{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },\n\t{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },\n\t{ id: '1003', name: 'This row is always unchecked', internalIdentifier: `AAA1003` },\n\t{ id: '1004', name: 'This row is always checked', internalIdentifier: `AAA1004` },\n];\ntype Data = (typeof DATA)[0];\n\nfunction KolButtonWrapper({ label }: { label: string }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _on={dummyEventHandler} />;\n}\n\nexport const TableStatefulWithSelection: FC = () => {\n\tconst [selectedValue, setSelectedValue] = useState<Data[] | null>();\n\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as Data).name}`,\n\t\tselectedKeys: selectedValue ? selectedValue.map((element) => element.internalIdentifier) : ['AAA1004'],\n\t\tdisabledKeys: ['AAA1003', 'AAA1004'],\n\t\tkeyPropertyName: 'internalIdentifier',\n\t};\n\n\tconst kolTableStatefulRef = useRef<HTMLKolTableStatefulElement>(null);\n\n\tconst handleSelectionChangeEvent = ({ detail: selection }: { detail: Data[] }) => {\n\t\tconsole.log('Selection change via event', selection);\n\t};\n\tconst handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | null) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t};\n\n\tconst handleButtonClick = async () => {\n\t\tconst selection = await kolTableStatefulRef.current?.getSelection();\n\t\tsetSelectedValue(selection as Data[] | null);\n\t};\n\n\tuseEffect(() => {\n\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\tkolTableStatefulRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\n\t\treturn () => {\n\t\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\t\tkolTableStatefulRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\t\t};\n\t}, [kolTableStatefulRef]);\n\n\tconst renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\tgetRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateful with checkboxes for selection enabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full\">\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Table with selection checkboxes\"\n\t\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t\t_headers={{\n\t\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t{ key: 'id', label: '#ID', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'name', label: 'Name', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t}}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t\t\tref={kolTableStatefulRef}\n\t\t\t\t/>\n\t\t\t\t<div className=\"grid grid-cols-3 items-end gap-4 mt-4\">\n\t\t\t\t\t<KolButton\n\t\t\t\t\t\t_label=\"getSelection()\"\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\tvoid handleButtonClick();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t></KolButton>\n\t\t\t\t\t<pre className=\"text-base\">{JSON.stringify(selectedValue, null, 2)}</pre>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -1045,7 +1141,7 @@
       "group": "table",
       "name": "stateful-with-single-selection",
       "path": "packages/samples/react/src/components/table/stateful-with-single-selection.tsx",
-      "code": "import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';\nimport { KolEvent } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATA = [\n\t{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },\n\t{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },\n];\n\ntype Data = (typeof DATA)[0];\n\nfunction KolButtonWrapper({ label }: { label: string }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _on={dummyEventHandler} />;\n}\n\nexport const TableStatefulWithSingleSelection: FC = () => {\n\tconst [selectedValue, setSelectedValue] = useState<Data | null>();\n\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as Data).name}`,\n\t\tmultiple: false,\n\t\tselectedKeys: selectedValue ? [selectedValue.internalIdentifier] : [],\n\t\tkeyPropertyName: 'internalIdentifier',\n\t};\n\n\tconst kolTableStatefulRef = useRef<HTMLKolTableStatefulElement>(null);\n\n\tconst handleSelectionChangeEvent = ({ detail: selection }: { detail: Data[] }) => {\n\t\tconsole.log('Selection change via event', selection);\n\t};\n\tconst handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | KoliBriTableDataType | string | null) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t};\n\n\tconst handleButtonClick = async () => {\n\t\tconst selection = await kolTableStatefulRef.current?.getSelection();\n\t\tsetSelectedValue(selection as Data | null);\n\t};\n\n\tuseEffect(() => {\n\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\tkolTableStatefulRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\n\t\treturn () => {\n\t\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\t\tkolTableStatefulRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\t\t};\n\t}, [kolTableStatefulRef]);\n\n\tconst renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\tgetRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateful with radio buttons for selection enabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full\">\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Table with selection radio\"\n\t\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t\t_headers={{\n\t\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t{ key: 'id', label: '#ID', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'name', label: 'Name', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t}}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t\t\tref={kolTableStatefulRef}\n\t\t\t\t/>\n\t\t\t\t<div className=\"grid grid-cols-3 items-end gap-4 mt-4\">\n\t\t\t\t\t<KolButton\n\t\t\t\t\t\t_label=\"getSelection()\"\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\tvoid handleButtonClick();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t></KolButton>\n\t\t\t\t\t<pre className=\"text-base\">{JSON.stringify(selectedValue, null, 2)}</pre>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
+      "code": "import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';\nimport { KolEvent } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\nconst DATA = [\n\t{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },\n\t{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },\n];\n\ntype Data = (typeof DATA)[0];\n\nfunction KolButtonWrapper({ label }: { label: string }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _on={dummyEventHandler} />;\n}\n\nexport const TableStatefulWithSingleSelection: FC = () => {\n\tconst [selectedValue, setSelectedValue] = useState<Data | null>();\n\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as Data).name}`,\n\t\tmultiple: false,\n\t\tselectedKeys: selectedValue ? [selectedValue.internalIdentifier] : [],\n\t\tkeyPropertyName: 'internalIdentifier',\n\t};\n\n\tconst kolTableStatefulRef = useRef<HTMLKolTableStatefulElement>(null);\n\n\tconst handleSelectionChangeEvent = ({ detail: selection }: { detail: Data[] }) => {\n\t\tconsole.log('Selection change via event', selection);\n\t};\n\tconst handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | null) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t};\n\n\tconst handleButtonClick = async () => {\n\t\tconst selection = await kolTableStatefulRef.current?.getSelection();\n\t\tsetSelectedValue(selection as Data | null);\n\t};\n\n\tuseEffect(() => {\n\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\tkolTableStatefulRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\n\t\treturn () => {\n\t\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\t\tkolTableStatefulRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\t\t};\n\t}, [kolTableStatefulRef]);\n\n\tconst renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\tgetRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateful with radio buttons for selection enabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full\">\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Table with selection radio\"\n\t\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t\t_headers={{\n\t\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t{ key: 'id', label: '#ID', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'name', label: 'Name', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t}}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t\t\tref={kolTableStatefulRef}\n\t\t\t\t/>\n\t\t\t\t<div className=\"grid grid-cols-3 items-end gap-4 mt-4\">\n\t\t\t\t\t<KolButton\n\t\t\t\t\t\t_label=\"getSelection()\"\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\tvoid handleButtonClick();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t></KolButton>\n\t\t\t\t\t<pre className=\"text-base\">{JSON.stringify(selectedValue, null, 2)}</pre>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -1061,7 +1157,7 @@
       "group": "table",
       "name": "stateless-with-selection",
       "path": "packages/samples/react/src/components/table/stateless-with-selection.tsx",
-      "code": "import type { KoliBriTableCell, KoliBriTableSelection, KoliBriTableSelectionKeys } from '@public-ui/components';\nimport { KolEvent } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\ntype SelectionValue = string | number;\n\nconst DATA = [\n\t{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },\n\t{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },\n\t{ id: '1003', name: 'This row is always unchecked', internalIdentifier: `AAA1003` },\n\t{ id: '1004', name: 'This row is always checked', internalIdentifier: `AAA1004` },\n];\ntype Data = (typeof DATA)[0];\n\nfunction KolButtonWrapper({ label }: { label: string }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _on={dummyEventHandler} />;\n}\n\nexport const TableStatelessWithSelection: FC = () => {\n\tconst [selectedKeys, setSelectedKeys] = useState<KoliBriTableSelectionKeys>(['AAA1002', 'AAA1004']);\n\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as Data).name}`,\n\t\tselectedKeys,\n\t\tkeyPropertyName: 'internalIdentifier',\n\t\tdisabledKeys: ['AAA1003', 'AAA1004'],\n\t};\n\n\tconst kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);\n\n\tconst handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {\n\t\tconsole.log('Selection change via event', selection);\n\t};\n\tconst handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[] | SelectionValue) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t\tsetSelectedKeys(Array.isArray(selection) ? selection : [selection]);\n\t};\n\n\tuseEffect(() => {\n\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\tkolTableStatelessRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\n\t\treturn () => {\n\t\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\t\tkolTableStatelessRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\t\t};\n\t}, [kolTableStatelessRef]);\n\n\tconst renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\tgetRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateless with checkboxes for selection enabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full\">\n\t\t\t\t<KolTableStateless\n\t\t\t\t\t_label=\"Table with selection checkboxes\"\n\t\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t\t_headerCells={{\n\t\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t{ key: 'id', label: '#ID', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'name', label: 'Name', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t}}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t\t\tref={kolTableStatelessRef}\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
+      "code": "import type { KoliBriTableCell, KoliBriTableSelection, KoliBriTableSelectionKeys } from '@public-ui/components';\nimport { KolEvent } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\ntype SelectionValue = string | number;\n\nconst DATA = [\n\t{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },\n\t{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },\n\t{ id: '1003', name: 'This row is always unchecked', internalIdentifier: `AAA1003` },\n\t{ id: '1004', name: 'This row is always checked', internalIdentifier: `AAA1004` },\n];\ntype Data = (typeof DATA)[0];\n\nfunction KolButtonWrapper({ label }: { label: string }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _on={dummyEventHandler} />;\n}\n\nexport const TableStatelessWithSelection: FC = () => {\n\tconst [selectedKeys, setSelectedKeys] = useState<KoliBriTableSelectionKeys>(['AAA1002', 'AAA1004']);\n\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as Data).name}`,\n\t\tselectedKeys,\n\t\tkeyPropertyName: 'internalIdentifier',\n\t\tdisabledKeys: ['AAA1003', 'AAA1004'],\n\t};\n\n\tconst kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);\n\n\tconst handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {\n\t\tconsole.log('Selection change via event', selection);\n\t};\n\tconst handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[]) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t\tsetSelectedKeys(selection);\n\t};\n\n\tuseEffect(() => {\n\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\tkolTableStatelessRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\n\t\treturn () => {\n\t\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\t\tkolTableStatelessRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\t\t};\n\t}, [kolTableStatelessRef]);\n\n\tconst renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\tgetRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateless with checkboxes for selection enabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full\">\n\t\t\t\t<KolTableStateless\n\t\t\t\t\t_label=\"Table with selection checkboxes\"\n\t\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t\t_headerCells={{\n\t\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t{ key: 'id', label: '#ID', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'name', label: 'Name', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t}}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t\t\tref={kolTableStatelessRef}\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -1077,7 +1173,7 @@
       "group": "table",
       "name": "stateless-with-single-selection",
       "path": "packages/samples/react/src/components/table/stateless-with-single-selection.tsx",
-      "code": "import type { KoliBriTableCell, KoliBriTableSelection, KoliBriTableSelectionKeys } from '@public-ui/components';\nimport { KolEvent } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\ntype SelectionValue = string | number;\n\nconst DATA = [\n\t{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },\n\t{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },\n\t{ id: '1003', name: 'Foo Disabled', internalIdentifier: `AAA1003` },\n];\ntype Data = (typeof DATA)[0];\n\nfunction KolButtonWrapper({ label }: { label: string }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _on={dummyEventHandler} />;\n}\n\nexport const TableStatelessWithSingleSelection: FC = () => {\n\tconst [selectedKeys, setSelectedKeys] = useState<KoliBriTableSelectionKeys>(['1002']);\n\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as Data).name}`,\n\t\tmultiple: false,\n\t\tselectedKeys,\n\t\tdisabledKeys: ['AAA1003'],\n\t\tkeyPropertyName: 'internalIdentifier',\n\t};\n\n\tconst kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);\n\n\tconst handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {\n\t\tconsole.log('Selection change via event', selection);\n\t};\n\tconst handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[] | SelectionValue) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t\tsetSelectedKeys(Array.isArray(selection) ? selection : [selection]);\n\t};\n\n\tuseEffect(() => {\n\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\tkolTableStatelessRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\n\t\treturn () => {\n\t\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\t\tkolTableStatelessRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\t\t};\n\t}, [kolTableStatelessRef]);\n\n\tconst renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\tgetRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateless with checkboxes for selection enabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full\">\n\t\t\t\t<KolTableStateless\n\t\t\t\t\t_label=\"Table with selection checkboxes\"\n\t\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t\t_headerCells={{\n\t\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t{ key: 'id', label: '#ID', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'name', label: 'Name', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t}}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t\t\tref={kolTableStatelessRef}\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
+      "code": "import type { KoliBriTableCell, KoliBriTableSelection, KoliBriTableSelectionKeys } from '@public-ui/components';\nimport { KolEvent } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\ntype SelectionValue = string | number;\n\nconst DATA = [\n\t{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },\n\t{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },\n\t{ id: '1003', name: 'Foo Disabled', internalIdentifier: `AAA1003` },\n];\ntype Data = (typeof DATA)[0];\n\nfunction KolButtonWrapper({ label }: { label: string }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _on={dummyEventHandler} />;\n}\n\nexport const TableStatelessWithSingleSelection: FC = () => {\n\tconst [selectedKeys, setSelectedKeys] = useState<KoliBriTableSelectionKeys>(['1002']);\n\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as Data).name}`,\n\t\tmultiple: false,\n\t\tselectedKeys,\n\t\tdisabledKeys: ['AAA1003'],\n\t\tkeyPropertyName: 'internalIdentifier',\n\t};\n\n\tconst kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);\n\n\tconst handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {\n\t\tconsole.log('Selection change via event', selection);\n\t};\n\tconst handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[]) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t\tsetSelectedKeys(selection);\n\t};\n\n\tuseEffect(() => {\n\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\tkolTableStatelessRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\n\t\treturn () => {\n\t\t\t// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357\n\t\t\tkolTableStatelessRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);\n\t\t};\n\t}, [kolTableStatelessRef]);\n\n\tconst renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\tgetRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateless with checkboxes for selection enabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full\">\n\t\t\t\t<KolTableStateless\n\t\t\t\t\t_label=\"Table with selection checkboxes\"\n\t\t\t\t\t_minWidth=\"auto\"\n\t\t\t\t\t_headerCells={{\n\t\t\t\t\t\thorizontal: [\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t{ key: 'id', label: '#ID', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'name', label: 'Name', textAlign: 'left' },\n\t\t\t\t\t\t\t\t{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t}}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\tstyle={{ maxWidth: '600px' }}\n\t\t\t\t\tref={kolTableStatelessRef}\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -1109,7 +1205,7 @@
       "group": "tabs",
       "name": "align",
       "path": "packages/samples/react/src/components/tabs/align.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport type { AlignPropType } from '@public-ui/components';\nimport { KolHeading, KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: 'codicon codicon-pie-chart',\n\t\t_label: 'First tab',\n\t\t_on: {\n\t\t\tonSelect: (event: Event) => {\n\t\t\t\tconsole.log('First tab selected', event);\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\t_icons: 'codicon codicon-calendar',\n\t\t_label: 'Second Tab',\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_icons: 'codicon codicon-briefcase',\n\t\t_label: 'Disabled Tab',\n\t},\n\t{\n\t\t_icons: 'codicon codicon-telescope',\n\t\t_label: 'Last tab',\n\t},\n];\n\nexport const TabsAlign: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolTabs with the property <code>_align</code> set to <code>left</code>, <code>right</code>, <code>top</code> and <code>bottom</code>.\n\t\t\t</p>\n\t\t</SampleDescription>\n\t\t<div className=\"grid gap-8\">\n\t\t\t{(['left', 'right', 'top', 'bottom'] as AlignPropType[]).map((align) => {\n\t\t\t\tconst text = `Tabs with ${align} align`;\n\t\t\t\treturn (\n\t\t\t\t\t<div key={align} className=\"grid gap-4\">\n\t\t\t\t\t\t<KolHeading _level={2} _label={text} />\n\t\t\t\t\t\t<KolTabs _tabs={tabs} _align={align} _label={text}>\n\t\t\t\t\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t\t\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t\t\t\t\t</KolTabs>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t</>\n);\n",
+      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport type { AlignPropType } from '@public-ui/components';\nimport { KolHeading, KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: 'fa-solid fa-chart-pie',\n\t\t_label: 'First tab',\n\t\t_on: {\n\t\t\tonSelect: (event: Event) => {\n\t\t\t\tconsole.log('First tab selected', event);\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\t_icons: 'fa-solid fa-calendar',\n\t\t_label: 'Second Tab',\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_icons: 'fa-solid fa-briefcase',\n\t\t_label: 'Disabled Tab',\n\t},\n\t{\n\t\t_icons: 'fa-solid fa-address-card',\n\t\t_label: 'Last tab',\n\t},\n];\n\nexport const TabsAlign: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolTabs with the property <code>_align</code> set to <code>left</code>, <code>right</code>, <code>top</code> and <code>bottom</code>.\n\t\t\t</p>\n\t\t</SampleDescription>\n\t\t<div className=\"grid gap-8\">\n\t\t\t{(['left', 'right', 'top', 'bottom'] as AlignPropType[]).map((align) => {\n\t\t\t\tconst text = `Tabs with ${align} align`;\n\t\t\t\treturn (\n\t\t\t\t\t<div key={align} className=\"grid gap-4\">\n\t\t\t\t\t\t<KolHeading _level={2} _label={text} />\n\t\t\t\t\t\t<KolTabs _tabs={tabs} _align={align} _label={text}>\n\t\t\t\t\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t\t\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t\t\t\t\t</KolTabs>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -1117,7 +1213,7 @@
       "group": "tabs",
       "name": "basic",
       "path": "packages/samples/react/src/components/tabs/basic.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: 'codicon codicon-pie-chart',\n\t\t_label: 'First tab',\n\t\t_on: {\n\t\t\tonSelect: (event: Event) => {\n\t\t\t\tconsole.log('First tab selected', event);\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\t_icons: 'codicon codicon-calendar',\n\t\t_label: 'Second Tab',\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_icons: 'codicon codicon-briefcase',\n\t\t_label: 'Disabled Tab',\n\t},\n\t{\n\t\t_icons: 'codicon codicon-telescope',\n\t\t_label: 'Last tab',\n\t},\n];\n\nconst tabsWithoutIcons = tabs.map((tab) => ({\n\t...tab,\n\t_icons: undefined,\n}));\n\nexport const TabsBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolTabs renders tab captions and their associated content. This sample shows tab captions with and without icons and disabled tabs.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTabs _tabs={tabsWithoutIcons} _label=\"Regular tabs\">\n\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t</KolTabs>\n\n\t\t<KolTabs _tabs={tabs} className=\"mt-4\" _label=\"Tabs with icons\">\n\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t</KolTabs>\n\t</>\n);\n",
+      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: 'fa-solid fa-chart-pie',\n\t\t_label: 'First tab',\n\t\t_on: {\n\t\t\tonSelect: (event: Event) => {\n\t\t\t\tconsole.log('First tab selected', event);\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\t_icons: 'fa-solid fa-calendar',\n\t\t_label: 'Second Tab',\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_icons: 'fa-solid fa-briefcase',\n\t\t_label: 'Disabled Tab',\n\t},\n\t{\n\t\t_icons: 'fa-solid fa-address-card',\n\t\t_label: 'Last tab',\n\t},\n];\n\nconst tabsWithoutIcons = tabs.map((tab) => ({\n\t...tab,\n\t_icons: undefined,\n}));\n\nexport const TabsBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolTabs renders tab captions and their associated content. This sample shows tab captions with and without icons and disabled tabs.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTabs _tabs={tabsWithoutIcons} _label=\"Regular tabs\">\n\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t</KolTabs>\n\n\t\t<KolTabs _tabs={tabs} className=\"mt-4\" _label=\"Tabs with icons\">\n\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t</KolTabs>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -1125,7 +1221,7 @@
       "group": "tabs",
       "name": "behavior",
       "path": "packages/samples/react/src/components/tabs/behavior.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolHeading, KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: 'codicon codicon-pie-chart',\n\t\t_label: 'First tab',\n\t\t_on: {\n\t\t\tonSelect: (event: Event) => {\n\t\t\t\tconsole.log('First tab selected', event);\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\t_icons: 'codicon codicon-calendar',\n\t\t_label: 'Second Tab',\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_icons: 'codicon codicon-briefcase',\n\t\t_label: 'Disabled Tab',\n\t},\n\t{\n\t\t_icons: 'codicon codicon-telescope',\n\t\t_label: 'Last tab',\n\t},\n];\n\nexport const TabsBehavior: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolTabs with the property <code>_behavior</code> set to <code>select-manual</code> and <code>select-automatic</code>.\n\t\t\t</p>\n\t\t\t<p>This property allows controlling when an arrow key is pressed whether the tab change takes place right away or only focuses the tab caption.</p>\n\t\t</SampleDescription>\n\t\t<div className=\"grid gap-8\">\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label='Tabs with \"select manual\" behavior' />\n\t\t\t\t<KolTabs _tabs={tabs} _behavior=\"select-manual\" _label=\"Tabs with select manual behavior\">\n\t\t\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t\t\t</KolTabs>\n\t\t\t</div>\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label='Tabs with \"select automatic\" behavior' />\n\t\t\t\t<KolTabs _tabs={tabs} className=\"mt-4\" _behavior=\"select-automatic\" _label=\"Tabs with select automatic behavior\">\n\t\t\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t\t\t</KolTabs>\n\t\t\t</div>\n\t\t</div>\n\t</>\n);\n",
+      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolHeading, KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: 'fa-solid fa-chart-pie',\n\t\t_label: 'First tab',\n\t\t_on: {\n\t\t\tonSelect: (event: Event) => {\n\t\t\t\tconsole.log('First tab selected', event);\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\t_icons: 'fa-solid fa-calendar',\n\t\t_label: 'Second Tab',\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_icons: 'fa-solid fa-briefcase',\n\t\t_label: 'Disabled Tab',\n\t},\n\t{\n\t\t_icons: 'fa-solid fa-address-card',\n\t\t_label: 'Last tab',\n\t},\n];\n\nexport const TabsBehavior: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolTabs with the property <code>_behavior</code> set to <code>select-manual</code> and <code>select-automatic</code>.\n\t\t\t</p>\n\t\t\t<p>This property allows controlling when an arrow key is pressed whether the tab change takes place right away or only focuses the tab caption.</p>\n\t\t</SampleDescription>\n\t\t<div className=\"grid gap-8\">\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label='Tabs with \"select manual\" behavior' />\n\t\t\t\t<KolTabs _tabs={tabs} _behavior=\"select-manual\" _label=\"Tabs with select manual behavior\">\n\t\t\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t\t\t</KolTabs>\n\t\t\t</div>\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label='Tabs with \"select automatic\" behavior' />\n\t\t\t\t<KolTabs _tabs={tabs} className=\"mt-4\" _behavior=\"select-automatic\" _label=\"Tabs with select automatic behavior\">\n\t\t\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t\t\t</KolTabs>\n\t\t\t</div>\n\t\t</div>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -1141,7 +1237,7 @@
       "group": "tabs",
       "name": "icons-only",
       "path": "packages/samples/react/src/components/tabs/icons-only.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: 'codicon codicon-pie-chart',\n\t\t_label: 'First Tab',\n\t\t_hideLabel: true,\n\t},\n\t{\n\t\t_icons: 'codicon codicon-calendar',\n\t\t_label: 'Second Tab',\n\t\t_hideLabel: true,\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_icons: 'codicon codicon-briefcase',\n\t\t_label: 'Disabled Tab',\n\t\t_hideLabel: true,\n\t},\n\t{\n\t\t_icons: 'codicon codicon-telescope',\n\t\t_label: 'Last Tab',\n\t\t_hideLabel: true,\n\t},\n];\nexport const TabsIconsOnly: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTabs with hidden labels.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTabs _label=\"Tabs with icons\" _tabs={tabs}>\n\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t</KolTabs>\n\t</>\n);\n",
+      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: 'fa-solid fa-chart-pie',\n\t\t_label: 'First Tab',\n\t\t_hideLabel: true,\n\t},\n\t{\n\t\t_icons: 'fa-solid fa-calendar',\n\t\t_label: 'Second Tab',\n\t\t_hideLabel: true,\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_icons: 'fa-solid fa-briefcase',\n\t\t_label: 'Disabled Tab',\n\t\t_hideLabel: true,\n\t},\n\t{\n\t\t_icons: 'fa-solid fa-address-card',\n\t\t_label: 'Last Tab',\n\t\t_hideLabel: true,\n\t},\n];\nexport const TabsIconsOnly: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTabs with hidden labels.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTabs _label=\"Tabs with icons\" _tabs={tabs}>\n\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t</KolTabs>\n\t</>\n);\n",
       "kind": "sample"
     },
     {
@@ -1189,7 +1285,7 @@
       "group": "toast",
       "name": "basic",
       "path": "packages/samples/react/src/components/toast/basic.tsx",
-      "code": "import React, { useEffect } from 'react';\nimport { useSearchParams } from 'react-router-dom';\n\nimport type { AlertTypePropType } from '@public-ui/components';\nimport { ToasterService } from '@public-ui/components';\nimport { KolButton } from '@public-ui/react-v19';\n\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const ToastBasic: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst defaultType = searchParams.get('type') as AlertTypePropType;\n\tconst toaster = ToasterService.getInstance(document);\n\tconst handleButtonClickSimple = () => {\n\t\tvoid toaster.enqueue({\n\t\t\tdescription: 'Toasty',\n\t\t\tlabel: `Initial Toast`,\n\t\t\ttype: 'warning',\n\t\t\tonClose: () => {\n\t\t\t\tconsole.log('Simple toast has been closed.');\n\t\t\t},\n\t\t});\n\t};\n\n\tuseEffect(() => {\n\t\tif (defaultType) {\n\t\t\tvoid toaster.enqueue({\n\t\t\t\tdescription: 'Toasty',\n\t\t\t\tlabel: `Toast with type '${defaultType}'`,\n\t\t\t\ttype: defaultType,\n\t\t\t});\n\t\t}\n\t}, [defaultType, toaster]);\n\n\tconst handleButtonClickComplex = () => {\n\t\tvoid toaster.enqueue({\n\t\t\trender: (element: HTMLElement, { close }) => {\n\t\t\t\tgetRoot(element).render(\n\t\t\t\t\t<>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_label={'Hello World from Toast!'}\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\tconsole.log('Toast Button clicked!');\n\t\t\t\t\t\t\t\t\tclose();\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>,\n\t\t\t\t);\n\t\t\t},\n\t\t\tlabel: `Initial Toast`,\n\t\t\ttype: 'warning',\n\t\t});\n\t};\n\n\tconst handleButtonClickOpenAndClose = async () => {\n\t\tconst close = await toaster.enqueue({\n\t\t\tdescription: 'I will disappear in two seconds...',\n\t\t\tlabel: `Good Bye`,\n\t\t\ttype: 'warning',\n\t\t});\n\n\t\tif (close) {\n\t\t\tsetTimeout(close, 2000);\n\t\t}\n\t};\n\n\tconst closeAll = () => {\n\t\ttoaster.closeAll();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample demonstrates the toast service with all its options.</p>\n\t\t\t</SampleDescription>\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t\t<KolButton _label=\"Show simple toast\" _on={{ onClick: handleButtonClickSimple }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Show complex toast\" _on={{ onClick: handleButtonClickComplex }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Show toast and close after 2 seconds\" _on={{ onClick: () => void handleButtonClickOpenAndClose() }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Close all toasts\" _on={{ onClick: closeAll }}></KolButton>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
+      "code": "import React, { useEffect } from 'react';\nimport { useSearchParams } from 'react-router-dom';\n\nimport type { AlertTypePropType } from '@public-ui/components';\nimport { ToasterService } from '@public-ui/components';\nimport { KolAlert, KolButton, KolLink } from '@public-ui/react-v19';\n\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const ToastBasic: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst defaultType = searchParams.get('type') as AlertTypePropType;\n\tconst toaster = ToasterService.getInstance(document);\n\tconst handleButtonClickSimple = () => {\n\t\tvoid toaster.enqueue({\n\t\t\tdescription: 'Toasty',\n\t\t\tlabel: `Initial Toast`,\n\t\t\ttype: 'warning',\n\t\t\tonClose: () => {\n\t\t\t\tconsole.log('Simple toast has been closed.');\n\t\t\t},\n\t\t});\n\t};\n\n\tuseEffect(() => {\n\t\tif (defaultType) {\n\t\t\tvoid toaster.enqueue({\n\t\t\t\tdescription: 'Toasty',\n\t\t\t\tlabel: `Toast with type '${defaultType}'`,\n\t\t\t\ttype: defaultType,\n\t\t\t});\n\t\t}\n\t}, [defaultType, toaster]);\n\n\tconst handleButtonClickComplex = () => {\n\t\tvoid toaster.enqueue({\n\t\t\trender: (element: HTMLElement, { close }) => {\n\t\t\t\tgetRoot(element).render(\n\t\t\t\t\t<>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_label={'Hello World from Toast!'}\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\tconsole.log('Toast Button clicked!');\n\t\t\t\t\t\t\t\t\tclose();\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>,\n\t\t\t\t);\n\t\t\t},\n\t\t\tlabel: `Initial Toast`,\n\t\t\ttype: 'warning',\n\t\t});\n\t};\n\n\tconst handleButtonClickOpenAndClose = async () => {\n\t\tconst close = await toaster.enqueue({\n\t\t\tdescription: 'I will disappear in two seconds...',\n\t\t\tlabel: `Good Bye`,\n\t\t\ttype: 'warning',\n\t\t});\n\n\t\tif (close) {\n\t\t\tsetTimeout(close, 2000);\n\t\t}\n\t};\n\n\tconst closeAll = () => {\n\t\ttoaster.closeAll();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<KolAlert _label=\"Component is DEPRECATED\" _type=\"error\" _variant=\"card\" className=\"header-alert\">\n\t\t\t\tFor more information, please refer&nbsp;\n\t\t\t\t<KolLink _href=\"https://public-ui.github.io/docs/components/toaster\" _target=\"_blank\" _label=\"to the documentation\"></KolLink>.\n\t\t\t</KolAlert>\n\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample demonstrates the toast service with all its options.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t\t<KolButton _label=\"Show simple toast\" _on={{ onClick: handleButtonClickSimple }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Show complex toast\" _on={{ onClick: handleButtonClickComplex }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Show toast and close after 2 seconds\" _on={{ onClick: () => void handleButtonClickOpenAndClose() }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Close all toasts\" _on={{ onClick: closeAll }}></KolButton>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -1197,7 +1293,7 @@
       "group": "toast",
       "name": "configurator",
       "path": "packages/samples/react/src/components/toast/configurator.tsx",
-      "code": "import React, { useEffect, useMemo, useState } from 'react';\nimport { useSearchParams } from 'react-router-dom';\n\nimport type { AlertTypePropType } from '@public-ui/components';\nimport { ToasterService } from '@public-ui/components';\nimport { KolButton, KolInputRadio } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nconst toastTypes = ['default', 'info', 'success', 'warning', 'error'] as const;\nconst toastTypeOptions = toastTypes.map((type) => ({\n\tlabel: type,\n\tvalue: type,\n}));\n\nconst isAlertType = (value: unknown): value is AlertTypePropType => {\n\treturn typeof value === 'string' && toastTypes.includes(value as AlertTypePropType);\n};\n\nexport const ToastConfigurator: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst queryType = searchParams.get('type');\n\tconst defaultType = isAlertType(queryType) ? queryType : undefined;\n\tconst [selectedType, setSelectedType] = useState<AlertTypePropType>(() => defaultType ?? 'default');\n\tconst toaster = useMemo<ToasterService>(() => ToasterService.getInstance(document), []);\n\n\tuseEffect(() => {\n\t\ttoastTypes.forEach((type) => {\n\t\t\tvoid toaster.enqueue({\n\t\t\t\tdescription: 'Toasty',\n\t\t\t\tlabel: `Toast with type '${type}'`,\n\t\t\t\ttype,\n\t\t\t});\n\t\t});\n\n\t\treturn () => {\n\t\t\ttoaster.closeAll();\n\t\t};\n\t}, [toaster]);\n\n\tuseEffect(() => {\n\t\tif (defaultType) {\n\t\t\tsetSelectedType(defaultType);\n\t\t}\n\t}, [defaultType]);\n\n\tconst handleTypeChange = (_: Event, value: unknown) => {\n\t\tif (isAlertType(value)) {\n\t\t\tsetSelectedType(value);\n\t\t}\n\t};\n\n\tconst handleConfiguredToast = () => {\n\t\tvoid toaster.enqueue({\n\t\t\tdescription: 'Toasty',\n\t\t\tlabel: `Toast with type '${selectedType}'`,\n\t\t\ttype: selectedType,\n\t\t});\n\t};\n\n\tconst closeAll = () => {\n\t\ttoaster.closeAll();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample demonstrates the toast service with all its options. Use the configuration below to choose a toast type and open a toast with the card\n\t\t\t\t\tvariant.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolInputRadio _orientation=\"horizontal\" _label=\"Toast type\" _value={selectedType} _options={toastTypeOptions} _on={{ onChange: handleTypeChange }} />\n\t\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t\t<KolButton _label={`Open ${selectedType} toast`} _on={{ onClick: handleConfiguredToast }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Close all toasts\" _on={{ onClick: closeAll }}></KolButton>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
+      "code": "import React, { useEffect, useMemo, useState } from 'react';\nimport { useSearchParams } from 'react-router-dom';\n\nimport type { AlertTypePropType } from '@public-ui/components';\nimport { ToasterService } from '@public-ui/components';\nimport { KolAlert, KolButton, KolInputRadio, KolLink } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nconst toastTypes = ['default', 'info', 'success', 'warning', 'error'] as const;\nconst toastTypeOptions = toastTypes.map((type) => ({\n\tlabel: type,\n\tvalue: type,\n}));\n\nconst isAlertType = (value: unknown): value is AlertTypePropType => {\n\treturn typeof value === 'string' && toastTypes.includes(value as AlertTypePropType);\n};\n\nexport const ToastConfigurator: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst queryType = searchParams.get('type');\n\tconst defaultType = isAlertType(queryType) ? queryType : undefined;\n\tconst [selectedType, setSelectedType] = useState<AlertTypePropType>(() => defaultType ?? 'default');\n\tconst toaster = useMemo<ToasterService>(() => ToasterService.getInstance(document), []);\n\n\tuseEffect(() => {\n\t\ttoastTypes.forEach((type) => {\n\t\t\tvoid toaster.enqueue({\n\t\t\t\tdescription: 'Toasty',\n\t\t\t\tlabel: `Toast with type '${type}'`,\n\t\t\t\ttype,\n\t\t\t});\n\t\t});\n\n\t\treturn () => {\n\t\t\ttoaster.closeAll();\n\t\t};\n\t}, [toaster]);\n\n\tuseEffect(() => {\n\t\tif (defaultType) {\n\t\t\tsetSelectedType(defaultType);\n\t\t}\n\t}, [defaultType]);\n\n\tconst handleTypeChange = (_: Event, value: unknown) => {\n\t\tif (isAlertType(value)) {\n\t\t\tsetSelectedType(value);\n\t\t}\n\t};\n\n\tconst handleConfiguredToast = () => {\n\t\tvoid toaster.enqueue({\n\t\t\tdescription: 'Toasty',\n\t\t\tlabel: `Toast with type '${selectedType}'`,\n\t\t\ttype: selectedType,\n\t\t});\n\t};\n\n\tconst closeAll = () => {\n\t\ttoaster.closeAll();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<KolAlert _label=\"Component is DEPRECATED\" _type=\"error\" _variant=\"card\" className=\"header-alert\">\n\t\t\t\tFor more information, please refer&nbsp;\n\t\t\t\t<KolLink _href=\"https://public-ui.github.io/docs/components/toaster\" _target=\"_blank\" _label=\"to the documentation\"></KolLink>.\n\t\t\t</KolAlert>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample demonstrates the toast service with all its options. Use the configuration below to choose a toast type and open a toast with the card\n\t\t\t\t\tvariant.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolInputRadio _orientation=\"horizontal\" _label=\"Toast type\" _value={selectedType} _options={toastTypeOptions} _on={{ onChange: handleTypeChange }} />\n\t\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t\t<KolButton _label={`Open ${selectedType} toast`} _on={{ onClick: handleConfiguredToast }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Close all toasts\" _on={{ onClick: closeAll }}></KolButton>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -1205,7 +1301,7 @@
       "group": "toolbar",
       "name": "basic",
       "path": "packages/samples/react/src/components/toolbar/basic.tsx",
-      "code": "import { KolHeading, KolToolbar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ToolbarBasic: FC = () => {\n\tconst TOOLBAR_ITEMS = [\n\t\t{\n\t\t\t_label: 'Back',\n\t\t\t_hideLabel: true,\n\t\t\t_icons: {\n\t\t\t\tleft: {\n\t\t\t\t\ticon: 'codicon codicon-arrow-left',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\t_label: 'Next',\n\t\t\t_hideLabel: true,\n\t\t\t_icons: {\n\t\t\t\tright: {\n\t\t\t\t\ticon: 'codicon codicon-arrow-right',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\t_href: '#/back-page',\n\t\t\t_label: 'Simple Link 1',\n\t\t},\n\t\t{\n\t\t\t_href: '#/back-page',\n\t\t\t_label: 'Simple Link 3',\n\t\t},\n\t\t{\n\t\t\t_label: 'Bold',\n\t\t},\n\t];\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tKolToolbars renders a set of given control elements grouped into one toolbar where focus can be moved using the keyboard arrow keys. The sample\n\t\t\t\t\tfeatures button and link elements.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<KolHeading _label=\"Orientation horizontal\" _level={2} />\n\t\t\t\t<KolToolbar class=\"block w-fit\" _label=\"Toolbar\" _items={TOOLBAR_ITEMS} />\n\n\t\t\t\t<KolHeading _label=\"Orientation vertical\" _level={2} />\n\t\t\t\t<KolToolbar class=\"block w-fit\" _label=\"Toolbar\" _items={TOOLBAR_ITEMS} _orientation=\"vertical\" />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "code": "import type { ToolbarItemsPropType } from '@public-ui/components';\nimport { KolHeading, KolToolbar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ToolbarBasic: FC = () => {\n\tconst TOOLBAR_ITEMS: ToolbarItemsPropType = [\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Back',\n\t\t\t_hideLabel: true,\n\t\t\t_icons: {\n\t\t\t\tleft: {\n\t\t\t\t\ticon: 'kolicon-chevron-left',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Next',\n\t\t\t_hideLabel: true,\n\t\t\t_icons: {\n\t\t\t\tright: {\n\t\t\t\t\ticon: 'kolicon-chevron-right',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\ttype: 'link',\n\t\t\t_href: '#/back-page',\n\t\t\t_label: 'Simple Link 1',\n\t\t},\n\t\t{\n\t\t\ttype: 'link',\n\t\t\t_href: '#/back-page',\n\t\t\t_label: 'Simple Link 3',\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Bold',\n\t\t},\n\t];\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tKolToolbars renders a set of given control elements grouped into one toolbar where focus can be moved using the keyboard arrow keys. The sample\n\t\t\t\t\tfeatures button and link elements.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<KolHeading _label=\"Orientation horizontal\" _level={2} />\n\t\t\t\t<KolToolbar class=\"block w-fit\" _label=\"Toolbar\" _items={TOOLBAR_ITEMS} />\n\n\t\t\t\t<KolHeading _label=\"Orientation vertical\" _level={2} />\n\t\t\t\t<KolToolbar class=\"block w-fit\" _label=\"Toolbar\" _items={TOOLBAR_ITEMS} _orientation=\"vertical\" />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -1213,7 +1309,7 @@
       "group": "toolbar",
       "name": "disabled",
       "path": "packages/samples/react/src/components/toolbar/disabled.tsx",
-      "code": "import { KolToolbar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ToolbarDisabled: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolToolbars with some of the elements disabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolToolbar\n\t\t\t\t_label=\"Toolbar\"\n\t\t\t\tclass=\"block w-fit\"\n\t\t\t\t_items={[\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Back',\n\t\t\t\t\t\t_disabled: true,\n\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t_icons: {\n\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\ticon: 'codicon codicon-arrow-left',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Next',\n\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t_icons: {\n\t\t\t\t\t\t\tright: {\n\t\t\t\t\t\t\t\ticon: 'codicon codicon-arrow-right',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t_label: 'Simple Link 1',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t_disabled: true,\n\t\t\t\t\t\t_label: 'Simple Link 3',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Bold',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t/>\n\t\t</>\n\t);\n};\n",
+      "code": "import { KolToolbar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ToolbarDisabled: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolToolbars with some of the elements disabled.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolToolbar\n\t\t\t\t_label=\"Toolbar\"\n\t\t\t\tclass=\"block w-fit\"\n\t\t\t\t_items={[\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t_label: 'Back',\n\t\t\t\t\t\t_disabled: true,\n\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t_icons: {\n\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\ticon: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t_label: 'Next',\n\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t_icons: {\n\t\t\t\t\t\t\tright: {\n\t\t\t\t\t\t\t\ticon: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'link',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t_label: 'Simple Link 1',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'link',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t_disabled: true,\n\t\t\t\t\t\t_label: 'Simple Link 3',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t_label: 'Bold',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t/>\n\t\t</>\n\t);\n};\n",
       "kind": "sample"
     },
     {
@@ -1240,6 +1336,14 @@
       "code": "import React from 'react';\n\nimport { KolVersion } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const VersionContext: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolVersion inline with text paragraph content.</p>\n\t\t</SampleDescription>\n\n\t\t<p>\n\t\t\t<KolVersion _label=\"1.0.0\" /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna\n\t\t\taliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem\n\t\t\tipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\n\t\t</p>\n\t</>\n);\n",
       "kind": "sample"
     },
+    {
+      "id": "scenario/scenarios/button-shortkey-table",
+      "group": "scenarios",
+      "name": "button-shortkey-table",
+      "path": "packages/samples/react/src/scenarios/button-shortkey-table.tsx",
+      "code": "import type { KoliBriTableHeaders } from '@public-ui/components';\nimport { ToasterService } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useRef } from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { getRoot } from '../shares/react-roots';\n\nconst RowActions: FC<{ label: string }> = ({ label }) => {\n\tconst toaster = ToasterService.getInstance(document);\n\tconst editButtonRef = useRef<HTMLKolButtonElement | null>(null);\n\tconst deleteButtonRef = useRef<HTMLKolButtonElement | null>(null);\n\n\tconst handleEditClick = () => {\n\t\ttoaster.enqueue({\n\t\t\tlabel: 'Edit clicked',\n\t\t\tdescription: `The button \"edit\" has been clicked for ${label}`,\n\t\t\ttype: 'info',\n\t\t});\n\t};\n\n\tconst handleDeleteClick = () => {\n\t\ttoaster.enqueue({\n\t\t\tlabel: 'Delete clicked',\n\t\t\tdescription: `The button \"delete\" has been clicked for ${label}`,\n\t\t\ttype: 'warning',\n\t\t});\n\t};\n\n\tconst handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {\n\t\tswitch (event.code) {\n\t\t\tcase 'KeyE':\n\t\t\t\tvoid editButtonRef.current?.kolFocus();\n\t\t\t\thandleEditClick();\n\t\t\t\treturn;\n\t\t\tcase 'KeyD':\n\t\t\t\tvoid deleteButtonRef.current?.kolFocus();\n\t\t\t\thandleDeleteClick();\n\t\t\t\treturn;\n\t\t}\n\t};\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tgap: 'calc(10rem / var(--kolibri-root-font-size, 16))',\n\t\t\t}}\n\t\t\tonKeyUp={handleKeyUp}\n\t\t>\n\t\t\t<KolButton ref={editButtonRef} _label={'Edit'} _shortKey={'e'} _on={{ onClick: handleEditClick }} />\n\t\t\t<KolButton ref={deleteButtonRef} _label={'Delete'} _shortKey={'d'} _variant={'danger'} _on={{ onClick: handleDeleteClick }} />\n\t\t</div>\n\t);\n};\n\nexport const ButtonShortkeyTable: FC = () => {\n\ttype Data = {\n\t\tlabel: string;\n\t};\n\tconst DATA: Data[] = [\n\t\t{\n\t\t\tlabel: 'Row 1',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 2',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 3',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 4',\n\t\t},\n\t];\n\n\tconst HEADERS: KoliBriTableHeaders = {\n\t\thorizontal: [\n\t\t\t[\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Label',\n\t\t\t\t\tkey: 'label',\n\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Actions',\n\t\t\t\t\tkey: 'actions',\n\t\t\t\t\ttextAlign: 'left',\n\n\t\t\t\t\trender: (el, cell) => {\n\t\t\t\t\t\tgetRoot(createReactRenderElement(el)).render(<RowActions label={(cell.data as Data).label} />);\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t],\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis scenario demonstrates an interactive table where each row contains buttons with shortcut keys. The shortcut keys provide visual keyboard\n\t\t\t\t\tindicators and are also functionally implemented.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t<strong>How to use:</strong> Move focus within one of the &quot;Actions&quot; cells and press &quot;e&quot; to edit or &quot;d&quot; to delete the\n\t\t\t\t\tcorresponding row.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Interactive Table with Button Shortkeys\" />\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label={`Interactive table with shortkey buttons in each row`}\n\t\t\t\t\t\t_data={DATA}\n\t\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t\t_minWidth=\"400px\"\n\t\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t\t_page: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "kind": "scenario"
+    },
     {
       "id": "scenario/scenarios/change-tabindex",
       "group": "scenarios",
@@ -1253,7 +1357,7 @@
       "group": "scenarios",
       "name": "custom-tooltip-css-properties",
       "path": "packages/samples/react/src/scenarios/custom-tooltip-css-properties.tsx",
-      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolButton } from '@public-ui/react-v19';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { useToasterService } from '../hooks/useToasterService';\n\nexport const CustomTooltipCssProperties: 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 sample demonstrates how tooltip animation duration and width can be customized via\n\t\t\t\t\t<code>--kolibri-tooltip-animation-duration</code> and <code>--kol-tooltip-width</code>.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex justify-center items-center gap-4\">\n\t\t\t\t<KolButton\n\t\t\t\t\t_label=\"Custom duration\"\n\t\t\t\t\t_hideLabel\n\t\t\t\t\tstyle={{ '--kolibri-tooltip-animation-duration': '2500ms' }}\n\t\t\t\t\t_icons=\"codicon codicon-clock\"\n\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t></KolButton>\n\t\t\t\t<KolButton\n\t\t\t\t\t_label=\"Custom width\"\n\t\t\t\t\t_hideLabel\n\t\t\t\t\tstyle={{ '--kol-tooltip-width': '400px' }}\n\t\t\t\t\t_icons=\"codicon codicon-arrow-both\"\n\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t></KolButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolButton } from '@public-ui/react-v19';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { useToasterService } from '../hooks/useToasterService';\n\nexport const CustomTooltipCssProperties: 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 sample demonstrates how tooltip animation duration and width can be customized via\n\t\t\t\t\t<code>--kolibri-tooltip-animation-duration</code> and <code>--kol-tooltip-width</code>.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex justify-center items-center gap-4\">\n\t\t\t\t<KolButton\n\t\t\t\t\t_label=\"Custom duration\"\n\t\t\t\t\t_hideLabel\n\t\t\t\t\tstyle={{ '--kolibri-tooltip-animation-duration': '2500ms' }}\n\t\t\t\t\t_icons=\"fa-solid fa-clock\"\n\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t></KolButton>\n\t\t\t\t<KolButton _label=\"Custom width\" _hideLabel style={{ '--kol-tooltip-width': '400px' }} _icons=\"kolicon-chevron-up\" _on={dummyEventHandler}></KolButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
       "kind": "scenario"
     },
     {
@@ -1269,7 +1373,7 @@
       "group": "scenarios",
       "name": "disabled-interactive-scenario",
       "path": "packages/samples/react/src/scenarios/disabled-interactive-elements.tsx",
-      "code": "import {\n\tKolAccordion,\n\tKolButton,\n\tKolButtonLink,\n\tKolCard,\n\tKolDetails,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolLink,\n\tKolLinkButton,\n\tKolSelect,\n\tKolTextarea,\n} from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { useToasterService } from '../hooks/useToasterService';\n\nconst OPTIONS = [\n\t{\n\t\tlabel: 'Option A',\n\t\tvalue: 'A',\n\t},\n\t{\n\t\tlabel: 'Option B',\n\t\tvalue: 'B',\n\t},\n];\n\nexport const DisabledInteractiveElements: 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>This example shows how deactivated interactive elements are displayed.</p>\n\t\t\t\t<ul>\n\t\t\t\t\t<li>Deactivated interactive elements pose a particular challenge for accessibility.</li>\n\t\t\t\t\t<li>It must not be possible to focus on deactivated interactive elements, otherwise the tab paths will be unnecessarily extended.</li>\n\t\t\t\t\t<li>Deactivated interactive elements should be labelled clearly and legibly.</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tDeactivated interactive elements have a tooltip for sighted people and aria labelling for the screen readers reading mode if they are represented by\n\t\t\t\t\t\tan interpretable graphic.\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t\t<p>This implementation ensures standardized use for all users.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"w-full grid gap-4\">\n\t\t\t\t<KolCard _label=\"Button\" _level={0}>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"Label\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _label=\"Label\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"codicon codicon-home\" _label=\"Label\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"codicon codicon-home\" _label=\"Label\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard _label=\"ButtonLink\" _level={0}>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButtonLink _label=\"Label\" />\n\t\t\t\t\t\t<KolButtonLink _disabled _label=\"Label\" />\n\t\t\t\t\t\t<KolButtonLink _hideLabel _icons=\"codicon codicon-home\" _label=\"Label\" />\n\t\t\t\t\t\t<KolButtonLink _hideLabel _icons=\"codicon codicon-home\" _disabled _label=\"Label\" />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard _label=\"Link\" _level={0}>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolLink _href=\"#\" _label=\"Label\" />\n\t\t\t\t\t\t<KolLink _disabled _href=\"#\" _label=\"Label\" />\n\t\t\t\t\t\t<KolLink _hideLabel _href=\"#\" _icons=\"codicon codicon-home\" _label=\"Label\" />\n\t\t\t\t\t\t<KolLink _disabled _hideLabel _href=\"#\" _icons=\"codicon codicon-home\" _label=\"Label\" />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard _label=\"LinkButton\" _level={0}>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolLinkButton _href=\"#\" _label=\"Label\" />\n\t\t\t\t\t\t<KolLinkButton _disabled _href=\"#\" _label=\"Label\" />\n\t\t\t\t\t\t<KolLinkButton _hideLabel _href=\"#\" _icons=\"codicon codicon-home\" _label=\"Label\" />\n\t\t\t\t\t\t<KolLinkButton _disabled _hideLabel _href=\"#\" _icons=\"codicon codicon-home\" _label=\"Label\" />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard _label=\"Accordion\" _level={0}>\n\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t<KolAccordion _label=\"Label\">Content</KolAccordion>\n\t\t\t\t\t\t<KolAccordion _disabled _label=\"Label\">\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t\t<KolAccordion _label=\"Label (open)\" _open>\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t\t<KolAccordion _disabled _label=\"Label (open)\" _open>\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard _label=\"Details\" _level={0}>\n\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t<KolDetails _label=\"Label\">Content</KolDetails>\n\t\t\t\t\t\t<KolDetails _disabled _label=\"Label\">\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</KolDetails>\n\t\t\t\t\t\t<KolDetails _label=\"Label (open)\" _open>\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</KolDetails>\n\t\t\t\t\t\t<KolDetails _disabled _label=\"Label (open)\" _open>\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</KolDetails>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t{[KolInputCheckbox, KolInputColor, KolInputDate, KolInputEmail, KolInputFile, KolInputNumber, KolInputPassword, KolInputRange, KolInputText].map(\n\t\t\t\t\t(Input) => {\n\t\t\t\t\t\tconst render = (\n\t\t\t\t\t\t\tInput as typeof KolInputCheckbox & {\n\t\t\t\t\t\t\t\trender: { displayName: string };\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t).render;\n\t\t\t\t\t\tconst name = render.displayName;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<KolCard key={name} _label={name} _level={0}>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t\t\t\t<Input _label=\"Label\" />\n\t\t\t\t\t\t\t\t\t<Input _disabled _label=\"Label\" />\n\t\t\t\t\t\t\t\t\t<Input _hideLabel _label=\"Label\" />\n\t\t\t\t\t\t\t\t\t<Input _disabled _hideLabel _label=\"Label\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</KolCard>\n\t\t\t\t\t\t);\n\t\t\t\t\t},\n\t\t\t\t)}\n\t\t\t\t{[KolInputRadio, KolSelect].map((Input) => {\n\t\t\t\t\tconst render = (\n\t\t\t\t\t\tInput as typeof KolInputRadio & {\n\t\t\t\t\t\t\trender: { displayName: string };\n\t\t\t\t\t\t}\n\t\t\t\t\t).render;\n\t\t\t\t\tconst name = render.displayName;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<KolCard key={name} _label={name} _level={0}>\n\t\t\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t\t\t<Input _label=\"Label\" _options={OPTIONS} />\n\t\t\t\t\t\t\t\t<Input _disabled _label=\"Label\" _options={OPTIONS} />\n\t\t\t\t\t\t\t\t<Input _hideLabel _label=\"Label\" _options={OPTIONS} />\n\t\t\t\t\t\t\t\t<Input _disabled _hideLabel _label=\"Label\" _options={OPTIONS} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</KolCard>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t\t<KolCard _label=\"KolTextarea\" _level={0}>\n\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t<KolTextarea _label=\"Label\" _rows={3} />\n\t\t\t\t\t\t<KolTextarea _disabled _label=\"Label\" _rows={3} />\n\t\t\t\t\t\t<KolTextarea _hideLabel _label=\"Label\" _rows={3} />\n\t\t\t\t\t\t<KolTextarea _disabled _hideLabel _label=\"Label\" _rows={3} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "code": "import {\n\tKolAccordion,\n\tKolButton,\n\tKolButtonLink,\n\tKolCard,\n\tKolDetails,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolLink,\n\tKolLinkButton,\n\tKolSelect,\n\tKolTextarea,\n} from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { useToasterService } from '../hooks/useToasterService';\n\nconst OPTIONS = [\n\t{\n\t\tlabel: 'Option A',\n\t\tvalue: 'A',\n\t},\n\t{\n\t\tlabel: 'Option B',\n\t\tvalue: 'B',\n\t},\n];\n\nexport const DisabledInteractiveElements: 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>This example shows how deactivated interactive elements are displayed.</p>\n\t\t\t\t<ul>\n\t\t\t\t\t<li>Deactivated interactive elements pose a particular challenge for accessibility.</li>\n\t\t\t\t\t<li>It must not be possible to focus on deactivated interactive elements, otherwise the tab paths will be unnecessarily extended.</li>\n\t\t\t\t\t<li>Deactivated interactive elements should be labelled clearly and legibly.</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tDeactivated interactive elements have a tooltip for sighted people and aria labelling for the screen readers reading mode if they are represented by\n\t\t\t\t\t\tan interpretable graphic.\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t\t<p>This implementation ensures standardized use for all users.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"w-full grid gap-4\">\n\t\t\t\t<KolCard _label=\"Button\" _level={0}>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"Label\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _label=\"Label\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"fa-solid fa-house\" _label=\"Label\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"fa-solid fa-house\" _label=\"Label\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard _label=\"ButtonLink\" _level={0}>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButtonLink _label=\"Label\" />\n\t\t\t\t\t\t<KolButtonLink _disabled _label=\"Label\" />\n\t\t\t\t\t\t<KolButtonLink _hideLabel _icons=\"fa-solid fa-house\" _label=\"Label\" />\n\t\t\t\t\t\t<KolButtonLink _hideLabel _icons=\"fa-solid fa-house\" _disabled _label=\"Label\" />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard _label=\"Link\" _level={0}>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolLink _href=\"#\" _label=\"Label\" />\n\t\t\t\t\t\t<KolLink _disabled _href=\"#\" _label=\"Label\" />\n\t\t\t\t\t\t<KolLink _hideLabel _href=\"#\" _icons=\"fa-solid fa-house\" _label=\"Label\" />\n\t\t\t\t\t\t<KolLink _disabled _hideLabel _href=\"#\" _icons=\"fa-solid fa-house\" _label=\"Label\" />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard _label=\"LinkButton\" _level={0}>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolLinkButton _href=\"#\" _label=\"Label\" />\n\t\t\t\t\t\t<KolLinkButton _disabled _href=\"#\" _label=\"Label\" />\n\t\t\t\t\t\t<KolLinkButton _hideLabel _href=\"#\" _icons=\"fa-solid fa-house\" _label=\"Label\" />\n\t\t\t\t\t\t<KolLinkButton _disabled _hideLabel _href=\"#\" _icons=\"fa-solid fa-house\" _label=\"Label\" />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard _label=\"Accordion\" _level={0}>\n\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t<KolAccordion _label=\"Label\">Content</KolAccordion>\n\t\t\t\t\t\t<KolAccordion _disabled _label=\"Label\">\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t\t<KolAccordion _label=\"Label (open)\" _open>\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t\t<KolAccordion _disabled _label=\"Label (open)\" _open>\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard _label=\"Details\" _level={0}>\n\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t<KolDetails _label=\"Label\">Content</KolDetails>\n\t\t\t\t\t\t<KolDetails _disabled _label=\"Label\">\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</KolDetails>\n\t\t\t\t\t\t<KolDetails _label=\"Label (open)\" _open>\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</KolDetails>\n\t\t\t\t\t\t<KolDetails _disabled _label=\"Label (open)\" _open>\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</KolDetails>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t{[KolInputCheckbox, KolInputColor, KolInputDate, KolInputEmail, KolInputFile, KolInputNumber, KolInputPassword, KolInputRange, KolInputText].map(\n\t\t\t\t\t(Input) => {\n\t\t\t\t\t\tconst render = (\n\t\t\t\t\t\t\tInput as typeof KolInputCheckbox & {\n\t\t\t\t\t\t\t\trender: { displayName: string };\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t).render;\n\t\t\t\t\t\tconst name = render.displayName;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<KolCard key={name} _label={name} _level={0}>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t\t\t\t<Input _label=\"Label\" />\n\t\t\t\t\t\t\t\t\t<Input _disabled _label=\"Label\" />\n\t\t\t\t\t\t\t\t\t<Input _hideLabel _label=\"Label\" />\n\t\t\t\t\t\t\t\t\t<Input _disabled _hideLabel _label=\"Label\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</KolCard>\n\t\t\t\t\t\t);\n\t\t\t\t\t},\n\t\t\t\t)}\n\t\t\t\t{[KolInputRadio, KolSelect].map((Input) => {\n\t\t\t\t\tconst render = (\n\t\t\t\t\t\tInput as typeof KolInputRadio & {\n\t\t\t\t\t\t\trender: { displayName: string };\n\t\t\t\t\t\t}\n\t\t\t\t\t).render;\n\t\t\t\t\tconst name = render.displayName;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<KolCard key={name} _label={name} _level={0}>\n\t\t\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t\t\t<Input _label=\"Label\" _options={OPTIONS} />\n\t\t\t\t\t\t\t\t<Input _disabled _label=\"Label\" _options={OPTIONS} />\n\t\t\t\t\t\t\t\t<Input _hideLabel _label=\"Label\" _options={OPTIONS} />\n\t\t\t\t\t\t\t\t<Input _disabled _hideLabel _label=\"Label\" _options={OPTIONS} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</KolCard>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t\t<KolCard _label=\"KolTextarea\" _level={0}>\n\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t<KolTextarea _label=\"Label\" _rows={3} />\n\t\t\t\t\t\t<KolTextarea _disabled _label=\"Label\" _rows={3} />\n\t\t\t\t\t\t<KolTextarea _hideLabel _label=\"Label\" _rows={3} />\n\t\t\t\t\t\t<KolTextarea _disabled _hideLabel _label=\"Label\" _rows={3} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
       "kind": "scenario"
     },
     {
@@ -1317,7 +1421,7 @@
       "group": "scenarios",
       "name": "same-height-of-all-interactive-elements",
       "path": "packages/samples/react/src/scenarios/same-height-of-all-interactive-elements.tsx",
-      "code": "import {\n\tKolButton,\n\tKolCombobox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRange,\n\tKolInputText,\n\tKolLinkButton,\n\tKolSelect,\n\tKolSingleSelect,\n\tKolTextarea,\n} from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { useToasterService } from '../hooks/useToasterService';\n\nexport const SameHeightOfAllInteractiveElements: 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\tAll interactive elements, such as buttons and input fields, should have the same height to ensure a consistent and visually balanced user interface.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<div className=\"w-full flex flex-wrap gap-4\">\n\t\t\t\t<KolButton _icons=\"codicon codicon-home\" _label=\"Button\" _on={dummyEventHandler} />\n\t\t\t\t<KolButton _hideLabel _icons=\"codicon codicon-home\" _label=\"Button\" _on={dummyEventHandler} />\n\t\t\t\t<KolLinkButton _href=\"#\" _icons=\"codicon codicon-home\" _label=\"Link-Button\" _on={dummyEventHandler} />\n\t\t\t\t<KolLinkButton _hideLabel _href=\"#\" _icons=\"codicon codicon-home\" _label=\"Link-Button\" _on={dummyEventHandler} />\n\t\t\t\t<KolCombobox _hideLabel _icons=\"codicon codicon-home\" _label=\"Combobox\" _suggestions={[]} />\n\t\t\t\t<KolInputColor\n\t\t\t\t\t_hideLabel\n\t\t\t\t\t_icons={{\n\t\t\t\t\t\tleft: 'codicon codicon-home',\n\t\t\t\t\t}}\n\t\t\t\t\t_label=\"Input-Color\"\n\t\t\t\t/>\n\t\t\t\t<KolInputFile _hideLabel _icons=\"codicon codicon-home\" _label=\"Input-File\" />\n\t\t\t\t<KolInputDate _hideLabel _icons=\"codicon codicon-home\" _label=\"Input-Date\" />\n\t\t\t\t<KolInputEmail _hideLabel _icons=\"codicon codicon-home\" _label=\"Input-Email\" />\n\t\t\t\t<KolInputNumber _hideLabel _icons=\"codicon codicon-home\" _label=\"Input-Number\" />\n\t\t\t\t<KolInputPassword _hideLabel _icons=\"codicon codicon-home\" _label=\"Input-Password\" />\n\t\t\t\t<KolInputRange _hideLabel _icons=\"codicon codicon-home\" _label=\"Input-Range\" />\n\t\t\t\t<KolInputText _hideLabel _icons=\"codicon codicon-home\" _label=\"Input-Text\" />\n\t\t\t\t<KolSelect _hideLabel _icons=\"codicon codicon-home\" _label=\"Combobox\" _options={[]} />\n\t\t\t\t<KolSingleSelect _hideLabel _icons=\"codicon codicon-home\" _label=\"Combobox\" _options={[]} />\n\t\t\t\t<KolTextarea _hideLabel _icons=\"codicon codicon-home\" _label=\"Combobox\" />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "code": "import {\n\tKolButton,\n\tKolCombobox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRange,\n\tKolInputText,\n\tKolLinkButton,\n\tKolSelect,\n\tKolSingleSelect,\n\tKolTextarea,\n} from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { useToasterService } from '../hooks/useToasterService';\n\nexport const SameHeightOfAllInteractiveElements: 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\tAll interactive elements, such as buttons and input fields, should have the same height to ensure a consistent and visually balanced user interface.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<div className=\"w-full flex flex-wrap gap-4\">\n\t\t\t\t<KolButton _icons=\"fa-solid fa-house\" _label=\"Button\" _on={dummyEventHandler} />\n\t\t\t\t<KolButton _hideLabel _icons=\"fa-solid fa-house\" _label=\"Button\" _on={dummyEventHandler} />\n\t\t\t\t<KolLinkButton _href=\"#\" _icons=\"fa-solid fa-house\" _label=\"Link-Button\" _on={dummyEventHandler} />\n\t\t\t\t<KolLinkButton _hideLabel _href=\"#\" _icons=\"fa-solid fa-house\" _label=\"Link-Button\" _on={dummyEventHandler} />\n\t\t\t\t<KolCombobox _hideLabel _icons=\"fa-solid fa-house\" _label=\"Combobox\" _suggestions={[]} />\n\t\t\t\t<KolInputColor\n\t\t\t\t\t_hideLabel\n\t\t\t\t\t_icons={{\n\t\t\t\t\t\tleft: 'fa-solid fa-house',\n\t\t\t\t\t}}\n\t\t\t\t\t_label=\"Input-Color\"\n\t\t\t\t/>\n\t\t\t\t<KolInputFile _hideLabel _icons=\"fa-solid fa-house\" _label=\"Input-File\" />\n\t\t\t\t<KolInputDate _hideLabel _icons=\"fa-solid fa-house\" _label=\"Input-Date\" />\n\t\t\t\t<KolInputEmail _hideLabel _icons=\"fa-solid fa-house\" _label=\"Input-Email\" />\n\t\t\t\t<KolInputNumber _hideLabel _icons=\"fa-solid fa-house\" _label=\"Input-Number\" />\n\t\t\t\t<KolInputPassword _hideLabel _icons=\"fa-solid fa-house\" _label=\"Input-Password\" />\n\t\t\t\t<KolInputRange _hideLabel _icons=\"fa-solid fa-house\" _label=\"Input-Range\" />\n\t\t\t\t<KolInputText _hideLabel _icons=\"fa-solid fa-house\" _label=\"Input-Text\" />\n\t\t\t\t<KolSelect _hideLabel _icons=\"fa-solid fa-house\" _label=\"Combobox\" _options={[]} />\n\t\t\t\t<KolSingleSelect _hideLabel _icons=\"fa-solid fa-house\" _label=\"Combobox\" _options={[]} />\n\t\t\t\t<KolTextarea _hideLabel _icons=\"fa-solid fa-house\" _label=\"Combobox\" />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
       "kind": "scenario"
     },
     {
@@ -1341,7 +1445,7 @@
       "group": "scenarios",
       "name": "toolbar-item-order",
       "path": "packages/samples/react/src/scenarios/toolbar-item-order.tsx",
-      "code": "import type { ToolbarItemsPropType } from '@public-ui/components';\nimport { KolHeading, KolToolbar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nexport const ToolbarItemOrder: FC = () => {\n\tconst [isSubmitting, setIsSubmitting] = useState(false);\n\tconst [isSubmitting2, setIsSubmitting2] = useState(false);\n\n\tuseEffect(() => {\n\t\tlet timer: ReturnType<typeof setTimeout>;\n\t\tif (isSubmitting) {\n\t\t\ttimer = setTimeout(() => {\n\t\t\t\tsetIsSubmitting(false);\n\t\t\t}, 2000);\n\t\t}\n\t\treturn () => clearTimeout(timer);\n\t}, [isSubmitting]);\n\n\tuseEffect(() => {\n\t\tlet timer: ReturnType<typeof setTimeout>;\n\t\tif (isSubmitting2) {\n\t\t\ttimer = setTimeout(() => {\n\t\t\t\tsetIsSubmitting2(false);\n\t\t\t}, 2000);\n\t\t}\n\t\treturn () => clearTimeout(timer);\n\t}, [isSubmitting2]);\n\n\tconst handleSubmit = () => setIsSubmitting(true);\n\tconst handleSubmit2 = () => setIsSubmitting2(true);\n\n\tconst toolbarItems = useMemo(() => {\n\t\tconst items: ToolbarItemsPropType = Array.from({ length: 5 }, (_item, index) => ({\n\t\t\t_label: `Button ${index + 1}`,\n\t\t\t_on: { onClick: handleSubmit },\n\t\t\t_icons: isSubmitting ? 'codicon codicon-loading codicon-modifier-spin' : void 0,\n\t\t\t_disabled: isSubmitting,\n\t\t}));\n\t\treturn items;\n\t}, [isSubmitting]);\n\n\tconst brokenToolbarItems = useMemo(() => {\n\t\tconst items: ToolbarItemsPropType = Array.from({ length: 5 }, (_item, index) => ({\n\t\t\t_label: `Button ${index + 1}`,\n\t\t\t_on: { onClick: handleSubmit2 },\n\t\t\t_disabled: isSubmitting2,\n\t\t\t_icons: isSubmitting2 ? 'codicon codicon-loading codicon-modifier-spin' : void 0,\n\t\t}));\n\t\treturn items;\n\t}, [isSubmitting2]);\n\n\treturn (\n\t\t<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>\n\t\t\t<KolHeading _label=\"Disabled Toolbar Buttons Bug (solved)\" />\n\n\t\t\t<KolHeading _label=\"icon vor disabled\" _level={2} />\n\t\t\t<KolToolbar _label=\"KolToolbar A\" _items={toolbarItems} />\n\t\t\t<KolHeading _label=\"disabled vor icon\" _level={2} />\n\t\t\t<p>Klicke auf einen der {brokenToolbarItems.length - 1} ersten Buttons hatte zur Folge, dass die nachfolgenden Buttons kaputt gehen.</p>\n\t\t\t<KolToolbar _label=\"KolToolbar B\" _items={brokenToolbarItems} />\n\t\t</div>\n\t);\n};\n",
+      "code": "import type { ToolbarItemsPropType } from '@public-ui/components';\nimport { KolHeading, KolToolbar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nexport const ToolbarItemOrder: FC = () => {\n\tconst [isSubmitting, setIsSubmitting] = useState(false);\n\tconst [isSubmitting2, setIsSubmitting2] = useState(false);\n\n\tuseEffect(() => {\n\t\tlet timer: ReturnType<typeof setTimeout>;\n\t\tif (isSubmitting) {\n\t\t\ttimer = setTimeout(() => {\n\t\t\t\tsetIsSubmitting(false);\n\t\t\t}, 2000);\n\t\t}\n\t\treturn () => clearTimeout(timer);\n\t}, [isSubmitting]);\n\n\tuseEffect(() => {\n\t\tlet timer: ReturnType<typeof setTimeout>;\n\t\tif (isSubmitting2) {\n\t\t\ttimer = setTimeout(() => {\n\t\t\t\tsetIsSubmitting2(false);\n\t\t\t}, 2000);\n\t\t}\n\t\treturn () => clearTimeout(timer);\n\t}, [isSubmitting2]);\n\n\tconst handleSubmit = () => setIsSubmitting(true);\n\tconst handleSubmit2 = () => setIsSubmitting2(true);\n\n\tconst toolbarItems = useMemo(() => {\n\t\tconst items: ToolbarItemsPropType = Array.from({ length: 5 }, (_item, index) => ({\n\t\t\ttype: 'button',\n\t\t\t_label: `Button ${index + 1}`,\n\t\t\t_on: { onClick: handleSubmit },\n\t\t\t_icons: isSubmitting ? 'fa-solid fa-spinner fa-spin' : void 0,\n\t\t\t_disabled: isSubmitting,\n\t\t}));\n\t\treturn items;\n\t}, [isSubmitting]);\n\n\tconst brokenToolbarItems = useMemo(() => {\n\t\tconst items: ToolbarItemsPropType = Array.from({ length: 5 }, (_item, index) => ({\n\t\t\ttype: 'button',\n\t\t\t_label: `Button ${index + 1}`,\n\t\t\t_on: { onClick: handleSubmit2 },\n\t\t\t_disabled: isSubmitting2,\n\t\t\t_icons: isSubmitting2 ? 'fa-solid fa-spinner fa-spin' : void 0,\n\t\t}));\n\t\treturn items;\n\t}, [isSubmitting2]);\n\n\treturn (\n\t\t<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>\n\t\t\t<KolHeading _label=\"Disabled Toolbar Buttons Bug (solved)\" />\n\n\t\t\t<KolHeading _label=\"icon vor disabled\" _level={2} />\n\t\t\t<KolToolbar _label=\"KolToolbar A\" _items={toolbarItems} />\n\t\t\t<KolHeading _label=\"disabled vor icon\" _level={2} />\n\t\t\t<p>Klicke auf einen der {brokenToolbarItems.length - 1} ersten Buttons hatte zur Folge, dass die nachfolgenden Buttons kaputt gehen.</p>\n\t\t\t<KolToolbar _label=\"KolToolbar B\" _items={brokenToolbarItems} />\n\t\t</div>\n\t);\n};\n",
       "kind": "scenario"
     },
     {
@@ -1349,7 +1453,7 @@
       "group": "scenarios",
       "name": "tooltip-positioning",
       "path": "packages/samples/react/src/scenarios/tooltip-positioning.tsx",
-      "code": "import { KolPopoverButton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\n\nexport const TooltipPositioning: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis example demonstrates tooltip positioning within container query contexts. Container queries can interfere with fixed positioning, causing\n\t\t\t\t\ttooltips to render incorrectly relative to the viewport. The layout containment fix ensures tooltips position properly even when their parent elements\n\t\t\t\t\tuse container-based sizing and layout rules.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tcontainer: 'test / size',\n\t\t\t\t\tcontain: 'layout',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<KolPopoverButton _label=\"Sample PopoverButton—Click for Popover\" _icons=\"codicon codicon-info\" _tooltipAlign=\"right\" _hideLabel>\n\t\t\t\t\tThis is an explanation shown on click.\n\t\t\t\t</KolPopoverButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
+      "code": "import { KolPopoverButton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\n\nexport const TooltipPositioning: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis example demonstrates tooltip positioning within container query contexts. Container queries can interfere with fixed positioning, causing\n\t\t\t\t\ttooltips to render incorrectly relative to the viewport. The layout containment fix ensures tooltips position properly even when their parent elements\n\t\t\t\t\tuse container-based sizing and layout rules.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tcontainer: 'test / size',\n\t\t\t\t\tcontain: 'layout',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<KolPopoverButton _label=\"Sample PopoverButton—Click for Popover\" _icons=\"kolicon-alert-info\" _tooltipAlign=\"right\" _hideLabel>\n\t\t\t\t\tThis is an explanation shown on click.\n\t\t\t\t</KolPopoverButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
       "kind": "scenario"
     },
     {
@@ -1405,7 +1509,7 @@
       "group": "spec",
       "name": "button",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/button.md",
-      "code": "# kol-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute           | Description                                                                                                                                                                                                                              | Type                                                                                                                                                   | Default     |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                                                                                                    | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                      | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                                                                                    | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaExpanded`       | `_aria-expanded`    | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                  | `boolean \\| undefined`                                                                                                                                 | `undefined` |\n| `_ariaSelected`       | `_aria-selected`    | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                         | `boolean \\| undefined`                                                                                                                                 | `undefined` |\n| `_customClass`        | `_custom-class`     | Defines the custom class attribute if _variant=\"custom\" is set.                                                                                                                                                                          | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                                                                                   | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                               | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                                                                                 | `undefined` |\n| `_id`                 | `_id`               | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element.                                                                            | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_inline`             | `_inline`           | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                                                                                                     | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_label` _(required)_ | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                             | `string`                                                                                                                                               | `undefined` |\n| `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                                                                                            | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_on`                 | --                  | Defines the callback functions for button events.                                                                                                                                                                                        | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_role`               | `_role`             | <span style=\"color:red\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined`                                                                                                                     | `undefined` |\n| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                  | `'top'`     |\n| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                                                                                                       | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined`                                                                                                         | `'button'`  |\n| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                                                                        | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                                           | `undefined` |\n| `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                                                                                                   | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined`                                                   | `'normal'`  |\n\n\n## Methods\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute           | Description                                                                                                                                                                                                                              | Type                                                                                                                                                   | Default     |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                                                                                                    | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                      | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                                                                                    | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaExpanded`       | `_aria-expanded`    | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                  | `boolean \\| undefined`                                                                                                                                 | `undefined` |\n| `_ariaSelected`       | `_aria-selected`    | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                         | `boolean \\| undefined`                                                                                                                                 | `undefined` |\n| `_customClass`        | `_custom-class`     | Defines the custom class attribute if _variant=\"custom\" is set.                                                                                                                                                                          | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                                                                                   | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                               | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                                                                                 | `undefined` |\n| `_id`                 | `_id`               | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element.                                                                            | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_inline`             | `_inline`           | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                                                                                                     | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_label` _(required)_ | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                             | `string`                                                                                                                                               | `undefined` |\n| `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                                                                                            | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_on`                 | --                  | Defines the callback functions for button events.                                                                                                                                                                                        | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_role`               | `_role`             | <span style=\"color:red\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined`                                                                                                                     | `undefined` |\n| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                  | `'top'`     |\n| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                                                                                                       | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined`                                                                                                         | `'button'`  |\n| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                                                                        | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                                           | `undefined` |\n| `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                                                                                                   | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined`                                                   | `'normal'`  |\n\n\n## Methods\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1413,7 +1517,7 @@
       "group": "spec",
       "name": "button-link",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/button-link.md",
-      "code": "# kol-button-link\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute           | Description                                                                                                                                                                                                                              | Type                                                                                                                                                   | Default     |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                                                                                                    | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                      | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                                                                                    | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaExpanded`       | `_aria-expanded`    | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                  | `boolean \\| undefined`                                                                                                                                 | `undefined` |\n| `_ariaSelected`       | `_aria-selected`    | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                         | `boolean \\| undefined`                                                                                                                                 | `undefined` |\n| `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                                                                                   | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                               | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                                                                                 | `undefined` |\n| `_id`                 | `_id`               | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element.                                                                            | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_inline`             | `_inline`           | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                                                                                                     | `boolean \\| undefined`                                                                                                                                 | `true`      |\n| `_label` _(required)_ | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                             | `string`                                                                                                                                               | `undefined` |\n| `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                                                                                            | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_on`                 | --                  | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                                                              | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_role`               | `_role`             | <span style=\"color:red\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined`                                                                                                                     | `undefined` |\n| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                  | `'top'`     |\n| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                                                                                                       | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined`                                                                                                         | `'button'`  |\n| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                                                                        | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                                           | `undefined` |\n| `_variant`            | `_variant`          | <span style=\"color:red\">**[DEPRECATED]**</span> Use the new _inline property instead.<br/><br/>Defines which variant should be used for presentation.                                                                                    | `\"inline\" \\| \"standalone\" \\| undefined`                                                                                                                | `'inline'`  |\n\n\n## Methods\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-button-link\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute           | Description                                                                                                                                                                                                                              | Type                                                                                                                                                   | Default     |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                                                                                                    | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                      | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                                                                                    | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaExpanded`       | `_aria-expanded`    | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                  | `boolean \\| undefined`                                                                                                                                 | `undefined` |\n| `_ariaSelected`       | `_aria-selected`    | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                         | `boolean \\| undefined`                                                                                                                                 | `undefined` |\n| `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                                                                                   | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                               | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                                                                                 | `undefined` |\n| `_id`                 | `_id`               | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element.                                                                            | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_inline`             | `_inline`           | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                                                                                                     | `boolean \\| undefined`                                                                                                                                 | `true`      |\n| `_label` _(required)_ | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                             | `string`                                                                                                                                               | `undefined` |\n| `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                                                                                            | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_on`                 | --                  | Gibt die EventCallback-Funktionen für die Button-Events an.                                                                                                                                                                              | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_role`               | `_role`             | <span style=\"color:red\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined`                                                                                                                     | `undefined` |\n| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                  | `'top'`     |\n| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                                                                                                       | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined`                                                                                                         | `'button'`  |\n| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                                                                        | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                                           | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1429,7 +1533,7 @@
       "group": "spec",
       "name": "combobox",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/combobox.md",
-      "code": "# kol-combobox\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                    | Attribute            | Description                                                                                                                                                   | Type                                                                                                                             | Default     |\n| --------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`                | `_access-key`        | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                         | `string \\| undefined`                                                                                                            | `undefined` |\n| `_disabled`                 | `_disabled`          | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                           | `false`     |\n| `_hideClearButton`          | `_hide-clear-button` | Hides the clear button.                                                                                                                                       | `boolean \\| undefined`                                                                                                           | `false`     |\n| `_hideLabel`                | `_hide-label`        | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                           | `false`     |\n| `_hideMsg`                  | `_hide-msg`          | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                           | `false`     |\n| `_hint`                     | `_hint`              | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                            | `''`        |\n| `_icons`                    | `_icons`             | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                          | `undefined` |\n| `_id`                       | `_id`                | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                            | `undefined` |\n| `_label` _(required)_       | `_label`             | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                         | `undefined` |\n| `_msg`                      | `_msg`               | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined`                                    | `undefined` |\n| `_name`                     | `_name`              | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                            | `undefined` |\n| `_on`                       | --                   | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder`              | `_placeholder`       | Defines the placeholder for input field. To be shown when there's no value.                                                                                   | `string \\| undefined`                                                                                                            | `undefined` |\n| `_required`                 | `_required`          | Makes the input element required.                                                                                                                             | `boolean \\| undefined`                                                                                                           | `false`     |\n| `_shortKey`                 | `_short-key`         | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                            | `undefined` |\n| `_suggestions` _(required)_ | `_suggestions`       | Suggestions to provide for the input.                                                                                                                         | `W3CInputValue[] \\| string`                                                                                                      | `undefined` |\n| `_tooltipAlign`             | `_tooltip-align`     | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                            | `'top'`     |\n| `_touched`                  | `_touched`           | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                           | `false`     |\n| `_value`                    | `_value`             | Defines the value of the element.                                                                                                                             | `string \\| undefined`                                                                                                            | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<string>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                         |\n| ---- | ----------------------------------- |\n|      | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-combobox\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                    | Attribute           | Description                                                                                                                                                   | Type                                                                                                                               | Default     |\n| --------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`                | `_access-key`       | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                         | `string \\| undefined`                                                                                                              | `undefined` |\n| `_disabled`                 | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hasClearButton`           | `_has-clear-button` | Shows the clear button if enabled.                                                                                                                            | `boolean \\| undefined`                                                                                                             | `true`      |\n| `_hideLabel`                | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hideMsg`                  | `_hide-msg`         | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hint`                     | `_hint`             | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                              | `''`        |\n| `_icons`                    | `_icons`            | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined` |\n| `_id`                       | `_id`               | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                              | `undefined` |\n| `_label` _(required)_       | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                           | `undefined` |\n| `_msg`                      | `_msg`              | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name`                     | `_name`             | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                              | `undefined` |\n| `_on`                       | --                  | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`   | `undefined` |\n| `_placeholder`              | `_placeholder`      | Defines the placeholder for input field. To be shown when there's no value.                                                                                   | `string \\| undefined`                                                                                                              | `undefined` |\n| `_required`                 | `_required`         | Makes the input element required.                                                                                                                             | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_shortKey`                 | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                              | `undefined` |\n| `_suggestions` _(required)_ | `_suggestions`      | Suggestions to provide for the input.                                                                                                                         | `W3CInputValue[] \\| string`                                                                                                        | `undefined` |\n| `_tooltipAlign`             | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                              | `'top'`     |\n| `_touched`                  | `_touched`          | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_value`                    | `_value`            | Defines the value of the element.                                                                                                                             | `string \\| undefined`                                                                                                              | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<string>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                         |\n| ---- | ----------------------------------- |\n|      | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1437,7 +1541,7 @@
       "group": "spec",
       "name": "components",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/components.md",
-      "code": "# KoliBri - Components\n\n## Installation\n\nYou can install the KoliBri components with `npm`, `pnpm` or `yarn`:\n\n```bash\nnpm i @public-ui/components\npnpm i @public-ui/components\nyarn add @public-ui/components\n```\n\n## Usage\n\nFirst, initialize KoliBri with a [theme](https://github.com/public-ui/kolibri/tree/develop/packages/themes) of your choice:\n\n```ts\nimport { defineCustomElements } from '@public-ui/components/dist/loader';\nimport { register } from '@public-ui/components';\nimport { DEFAULT } from '@public-ui/theme-default';\n\nregister(DEFAULT, defineCustomElements)\n\t.then(() => {\n\t\t/* KoliBri ready */\n\t})\n\t.catch((error) => {\n\t\t/* Handle errors */\n\t});\n```\n\nThen, you can use the components in your HTML:\n\n```html\n<kol-button _label=\"Hello World\"></kol-button>\n```\n\nConsider using one of the [framework integrations](https://public-ui.github.io/en/docs/get-started/frameworks) for a better developer experience.\n\n## Development notes\n\n### Styling\n\n1. Do not use `!important`!\n2. Only alignment/position/layout!\n3. No colors/spacing/font/transform/animation/overflow!\n4. padding/margin 0 is allowed! If set, use comment.\n",
+      "code": "# KoliBri - Components\n\n## Installation\n\nYou can install the KoliBri components with `npm`, `pnpm` or `yarn`:\n\n```bash\nnpm i @public-ui/components\npnpm i @public-ui/components\nyarn add @public-ui/components\n```\n\n## Usage\n\nFirst, initialize KoliBri with a [theme](https://github.com/public-ui/kolibri/tree/develop/packages/themes) of your choice:\n\n```ts\nimport { defineCustomElements } from '@public-ui/components/loader';\nimport { register } from '@public-ui/components';\nimport { DEFAULT } from '@public-ui/theme-default';\n\nregister(DEFAULT, defineCustomElements)\n\t.then(() => {\n\t\t/* KoliBri ready */\n\t})\n\t.catch((error) => {\n\t\t/* Handle errors */\n\t});\n```\n\nThen, you can use the components in your HTML:\n\n```html\n<kol-button _label=\"Hello World\"></kol-button>\n```\n\nConsider using one of the [framework integrations](https://public-ui.github.io/en/docs/get-started/frameworks) for a better developer experience.\n\n## Development notes\n\n### Styling\n\n1. Do not use `!important`!\n2. Only alignment/position/layout!\n3. No colors/spacing/font/transform/animation/overflow!\n4. padding/margin 0 is allowed! If set, use comment.\n",
       "kind": "spec"
     },
     {
@@ -1493,7 +1597,7 @@
       "group": "spec",
       "name": "input-checkbox",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-checkbox.md",
-      "code": "# kol-input-checkbox\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                            | Default     |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                         | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_checked`            | `_checked`       | Defines whether the checkbox is checked or not. Can be read and written.                                                                                      | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { checked: string; indeterminate?: string \\| undefined; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate: string; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate?: string \\| undefined; unchecked: string; }` | `undefined` |\n| `_id`                 | `_id`            | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_indeterminate`      | `_indeterminate` | Puts the checkbox in the indeterminate state, does not change the value of _checked.                                                                          | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                                                                                                                                                                                                        | `undefined` |\n| `_labelAlign`         | `_label-align`   | Defines which alignment should be used for presentation.                                                                                                      | `\"left\" \\| \"right\" \\| undefined`                                                                                                                                                                                                                                                                                | `'right'`   |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                   | `undefined` |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                | `undefined` |\n| `_required`           | `_required`      | Makes the input element required.                                                                                                                             | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                           | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                             | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                                                                                                                                                                                                    | `true`      |\n| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                        | `\"button\" \\| \"default\" \\| \"switch\" \\| undefined`                                                                                                                                                                                                                                                                | `'default'` |\n\n\n## Methods\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot       | Description           |\n| ---------- | --------------------- |\n| `\"expert\"` | Checkbox description. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-checkbox\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                            | Default     |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                         | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_checked`            | `_checked`       | Defines whether the checkbox is checked or not. Can be read and written.                                                                                      | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { checked: string; indeterminate?: string \\| undefined; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate: string; unchecked?: string \\| undefined; } \\| { checked?: string \\| undefined; indeterminate?: string \\| undefined; unchecked: string; }` | `undefined` |\n| `_id`                 | `_id`            | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_indeterminate`      | `_indeterminate` | Puts the checkbox in the indeterminate state, does not change the value of _checked.                                                                          | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                                                                                                                                                                                                        | `undefined` |\n| `_labelAlign`         | `_label-align`   | Defines which alignment should be used for presentation.                                                                                                      | `\"left\" \\| \"right\" \\| undefined`                                                                                                                                                                                                                                                                                | `'right'`   |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                              | `undefined` |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                | `undefined` |\n| `_required`           | `_required`      | Makes the input element required.                                                                                                                             | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                           | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                                                                          | `false`     |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                             | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                                                                                                                                                                                                    | `true`      |\n| `_variant`            | `_variant`       | Defines which variant should be used for presentation.                                                                                                        | `\"button\" \\| \"default\" \\| \"switch\" \\| undefined`                                                                                                                                                                                                                                                                | `'default'` |\n\n\n## Methods\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot       | Description           |\n| ---------- | --------------------- |\n| `\"expert\"` | Checkbox description. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1501,7 +1605,7 @@
       "group": "spec",
       "name": "input-color",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-color.md",
-      "code": "# kol-input-color\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                         | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_autoComplete`       | `_auto-complete` | Defines whether the input can be auto-completed.                                                                                                              | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'off'`     |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_id`                 | `_id`            | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                        | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                         | `W3CInputValue[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                         |\n| ---- | ----------------------------------- |\n|      | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-color\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                         | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_autoComplete`       | `_auto-complete` | Defines whether the input can be auto-completed.                                                                                                              | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'off'`     |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_id`                 | `_id`            | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                        | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                         | `W3CInputValue[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                         |\n| ---- | ----------------------------------- |\n|      | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1509,7 +1613,7 @@
       "group": "spec",
       "name": "input-date",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-date.md",
-      "code": "# kol-input-date\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                         | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_autoComplete`       | `_auto-complete` | Defines whether the input can be auto-completed.                                                                                                              | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'off'`     |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_id`                 | `_id`            | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_max`                | `_max`           | Defines the maximum value of the element.                                                                                                                     | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_min`                | `_min`           | Defines the smallest possible input value.                                                                                                                    | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_readOnly`           | `_read-only`     | Makes the input element read only.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_required`           | `_required`      | Makes the input element required.                                                                                                                             | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                        | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_step`               | `_step`          | Defines the step size for value changes.                                                                                                                      | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                         | `W3CInputValue[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_type`               | `_type`          | Defines either the type of the component or of the components interactive element.                                                                            | `\"date\" \\| \"datetime-local\" \\| \"month\" \\| \"time\" \\| \"week\"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `'date'`    |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                             | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| null \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<string | Date | undefined | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | Date | null | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                         |\n| ---- | ----------------------------------- |\n|      | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-date\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                         | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_autoComplete`       | `_auto-complete` | Defines whether the input can be auto-completed.                                                                                                              | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'off'`     |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_id`                 | `_id`            | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_max`                | `_max`           | Defines the maximum value of the element.                                                                                                                     | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_min`                | `_min`           | Defines the smallest possible input value.                                                                                                                    | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_readOnly`           | `_read-only`     | Makes the input element read only.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_required`           | `_required`      | Makes the input element required.                                                                                                                             | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                        | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_step`               | `_step`          | Defines the step size for value changes.                                                                                                                      | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                         | `W3CInputValue[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_type`               | `_type`          | Defines either the type of the component or of the components interactive element.                                                                            | `\"date\" \\| \"datetime-local\" \\| \"month\" \\| \"time\" \\| \"week\"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `'date'`    |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                             | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| null \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<string | Date | undefined | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | Date | null | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                         |\n| ---- | ----------------------------------- |\n|      | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1517,7 +1621,7 @@
       "group": "spec",
       "name": "input-email",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-email.md",
-      "code": "# kol-input-email\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute              | Description                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`          | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                         | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_autoComplete`       | `_auto-complete`       | Defines whether the input can be auto-completed.                                                                                                              | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'off'`     |\n| `_disabled`           | `_disabled`            | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hasCounter`         | `_has-counter`         | Shows a character counter for the input element.                                                                                                              | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideLabel`          | `_hide-label`          | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideMsg`            | `_hide-msg`            | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hint`               | `_hint`                | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `''`        |\n| `_icons`              | `_icons`               | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_id`                 | `_id`                  | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                               | `number \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                   | `\"hard\" \\| \"soft\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `'hard'`    |\n| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |\n| `_multiple`           | `_multiple`            | Makes the input accept multiple inputs.                                                                                                                       | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_name`               | `_name`                | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_on`                 | --                     | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_pattern`            | `_pattern`             | Defines a validation pattern for the input field.                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_placeholder`        | `_placeholder`         | Defines the placeholder for input field. To be shown when there's no value.                                                                                   | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_readOnly`           | `_read-only`           | Makes the input element read only.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_required`           | `_required`            | Makes the input element required.                                                                                                                             | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_shortKey`           | `_short-key`           | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_smartButton`        | `_smart-button`        | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                        | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_suggestions`        | `_suggestions`         | Suggestions to provide for the input.                                                                                                                         | `W3CInputValue[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'top'`     |\n| `_touched`            | `_touched`             | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_value`              | `_value`               | Defines the value of the element.                                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                         |\n| ---- | ----------------------------------- |\n|      | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-email\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute              | Description                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`          | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                         | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_autoComplete`       | `_auto-complete`       | Defines whether the input can be auto-completed.                                                                                                              | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'off'`     |\n| `_disabled`           | `_disabled`            | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hasCounter`         | `_has-counter`         | Shows a character counter for the input element.                                                                                                              | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideLabel`          | `_hide-label`          | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideMsg`            | `_hide-msg`            | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hint`               | `_hint`                | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `''`        |\n| `_icons`              | `_icons`               | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_id`                 | `_id`                  | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                               | `number \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                   | `\"hard\" \\| \"soft\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `'hard'`    |\n| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |\n| `_multiple`           | `_multiple`            | Makes the input accept multiple inputs.                                                                                                                       | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_name`               | `_name`                | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_on`                 | --                     | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_pattern`            | `_pattern`             | Defines a validation pattern for the input field.                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_placeholder`        | `_placeholder`         | Defines the placeholder for input field. To be shown when there's no value.                                                                                   | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_readOnly`           | `_read-only`           | Makes the input element read only.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_required`           | `_required`            | Makes the input element required.                                                                                                                             | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_shortKey`           | `_short-key`           | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_smartButton`        | `_smart-button`        | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                        | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_suggestions`        | `_suggestions`         | Suggestions to provide for the input.                                                                                                                         | `W3CInputValue[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'top'`     |\n| `_touched`            | `_touched`             | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_value`              | `_value`               | Defines the value of the element.                                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                         |\n| ---- | ----------------------------------- |\n|      | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1525,7 +1629,7 @@
       "group": "spec",
       "name": "input-file",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-file.md",
-      "code": "# kol-input-file\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accept`             | `_accept`        | Defines which file formats are accepted.                                                                                                                      | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                         | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_id`                 | `_id`            | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |\n| `_multiple`           | `_multiple`      | Makes the input accept multiple inputs.                                                                                                                       | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_required`           | `_required`      | Makes the input element required.                                                                                                                             | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                        | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n\n\n## Methods\n\n### `getValue() => Promise<FileList | null | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<FileList | null | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                         |\n| ---- | ----------------------------------- |\n|      | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-file\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accept`             | `_accept`        | Defines which file formats are accepted.                                                                                                                      | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                         | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_id`                 | `_id`            | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |\n| `_multiple`           | `_multiple`      | Makes the input accept multiple inputs.                                                                                                                       | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_required`           | `_required`      | Makes the input element required.                                                                                                                             | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                        | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n\n\n## Methods\n\n### `getValue() => Promise<FileList | null | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<FileList | null | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                         |\n| ---- | ----------------------------------- |\n|      | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1533,7 +1637,7 @@
       "group": "spec",
       "name": "input-number",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-number.md",
-      "code": "# kol-input-number\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                         | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_autoComplete`       | `_auto-complete` | Defines whether the input can be auto-completed.                                                                                                              | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'off'`     |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_id`                 | `_id`            | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_max`                | `_max`           | Defines the maximum value of the element.                                                                                                                     | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_min`                | `_min`           | Defines the smallest possible input value.                                                                                                                    | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_placeholder`        | `_placeholder`   | Defines the placeholder for input field. To be shown when there's no value.                                                                                   | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_readOnly`           | `_read-only`     | Makes the input element read only.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_required`           | `_required`      | Makes the input element required.                                                                                                                             | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                        | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_step`               | `_step`          | Defines the step size for value changes.                                                                                                                      | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                         | `W3CInputValue[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                             | `` `${number}.${number}` \\| `${number}` \\| null \\| number \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<number | NumberString | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | null>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                         |\n| ---- | ----------------------------------- |\n|      | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-number\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                         | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_autoComplete`       | `_auto-complete` | Defines whether the input can be auto-completed.                                                                                                              | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'off'`     |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_id`                 | `_id`            | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_max`                | `_max`           | Defines the maximum value of the element.                                                                                                                     | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_min`                | `_min`           | Defines the smallest possible input value.                                                                                                                    | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_placeholder`        | `_placeholder`   | Defines the placeholder for input field. To be shown when there's no value.                                                                                   | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_readOnly`           | `_read-only`     | Makes the input element read only.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_required`           | `_required`      | Makes the input element required.                                                                                                                             | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                        | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_step`               | `_step`          | Defines the step size for value changes.                                                                                                                      | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined` |\n| `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                         | `W3CInputValue[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                             | `` `${number}.${number}` \\| `${number}` \\| null \\| number \\| undefined ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<number | NumberString | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | null>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                         |\n| ---- | ----------------------------------- |\n|      | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1541,7 +1645,7 @@
       "group": "spec",
       "name": "input-password",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-password.md",
-      "code": "# kol-input-password\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute              | Description                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`          | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                         | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_autoComplete`       | `_auto-complete`       | Defines whether the input can be auto-completed.                                                                                                              | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'off'`     |\n| `_disabled`           | `_disabled`            | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hasCounter`         | `_has-counter`         | Shows a character counter for the input element.                                                                                                              | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideLabel`          | `_hide-label`          | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideMsg`            | `_hide-msg`            | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hint`               | `_hint`                | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `''`        |\n| `_icons`              | `_icons`               | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_id`                 | `_id`                  | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                               | `number \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                   | `\"hard\" \\| \"soft\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `'hard'`    |\n| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |\n| `_name`               | `_name`                | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_on`                 | --                     | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_pattern`            | `_pattern`             | Defines a validation pattern for the input field.                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_placeholder`        | `_placeholder`         | Defines the placeholder for input field. To be shown when there's no value.                                                                                   | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_readOnly`           | `_read-only`           | Makes the input element read only.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_required`           | `_required`            | Makes the input element required.                                                                                                                             | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_shortKey`           | `_short-key`           | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_smartButton`        | `_smart-button`        | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                        | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'top'`     |\n| `_touched`            | `_touched`             | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_value`              | `_value`               | Defines the value of the element.                                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_variant`            | `_variant`             | Defines which variant should be used for presentation.                                                                                                        | `\"default\" \\| \"visibility-toggle\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `'default'` |\n\n\n## Methods\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                         |\n| ---- | ----------------------------------- |\n|      | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-password\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute              | Description                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`          | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                         | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_autoComplete`       | `_auto-complete`       | Defines whether the input can be auto-completed.                                                                                                              | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'off'`     |\n| `_disabled`           | `_disabled`            | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hasCounter`         | `_has-counter`         | Shows a character counter for the input element.                                                                                                              | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideLabel`          | `_hide-label`          | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideMsg`            | `_hide-msg`            | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hint`               | `_hint`                | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `''`        |\n| `_icons`              | `_icons`               | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_id`                 | `_id`                  | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                               | `number \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                   | `\"hard\" \\| \"soft\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `'hard'`    |\n| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |\n| `_name`               | `_name`                | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_on`                 | --                     | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_pattern`            | `_pattern`             | Defines a validation pattern for the input field.                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_placeholder`        | `_placeholder`         | Defines the placeholder for input field. To be shown when there's no value.                                                                                   | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_readOnly`           | `_read-only`           | Makes the input element read only.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_required`           | `_required`            | Makes the input element required.                                                                                                                             | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_shortKey`           | `_short-key`           | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_smartButton`        | `_smart-button`        | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                        | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'top'`     |\n| `_touched`            | `_touched`             | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_value`              | `_value`               | Defines the value of the element.                                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_variant`            | `_variant`             | Defines which variant should be used for presentation.                                                                                                        | `\"default\" \\| \"visibility-toggle\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `'default'` |\n\n\n## Methods\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                         |\n| ---- | ----------------------------------- |\n|      | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1549,7 +1653,7 @@
       "group": "spec",
       "name": "input-radio",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-radio.md",
-      "code": "# kol-input-radio\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                   | Type                                                                                                                             | Default      |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                           | `false`      |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                           | `false`      |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                           | `false`      |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                            | `''`         |\n| `_id`                 | `_id`            | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                            | `undefined`  |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                         | `undefined`  |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined`                                    | `undefined`  |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                            | `undefined`  |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined`  |\n| `_options`            | `_options`       | Options the user can choose from.                                                                                                                             | `RadioOption<StencilUnknown>[] \\| string \\| undefined`                                                                           | `undefined`  |\n| `_orientation`        | `_orientation`   | Defines whether the orientation of the component is horizontal or vertical.                                                                                   | `\"horizontal\" \\| \"vertical\" \\| undefined`                                                                                        | `'vertical'` |\n| `_required`           | `_required`      | Makes the input element required.                                                                                                                             | `boolean \\| undefined`                                                                                                           | `false`      |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                            | `'top'`      |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                           | `false`      |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                             | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                     | `null`       |\n\n\n## Methods\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                               |\n| ---- | ----------------------------------------- |\n|      | Die Legende/Überschrift der Radiobuttons. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-radio\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                   | Type                                                                                                                               | Default      |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                              | `''`         |\n| `_id`                 | `_id`            | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                              | `undefined`  |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                           | `undefined`  |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined`  |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                              | `undefined`  |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`   | `undefined`  |\n| `_options`            | `_options`       | Options the user can choose from.                                                                                                                             | `RadioOption<StencilUnknown>[] \\| string \\| undefined`                                                                             | `undefined`  |\n| `_orientation`        | `_orientation`   | Defines whether the orientation of the component is horizontal or vertical.                                                                                   | `\"horizontal\" \\| \"vertical\" \\| undefined`                                                                                          | `'vertical'` |\n| `_required`           | `_required`      | Makes the input element required.                                                                                                                             | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                              | `'top'`      |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                             | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                       | `null`       |\n\n\n## Methods\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                               |\n| ---- | ----------------------------------------- |\n|      | Die Legende/Überschrift der Radiobuttons. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1557,7 +1661,7 @@
       "group": "spec",
       "name": "input-range",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-range.md",
-      "code": "# kol-input-range\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                   | Type                                                                                                                             | Default     |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                         | `string \\| undefined`                                                                                                            | `undefined` |\n| `_autoComplete`       | `_auto-complete` | Defines whether the input can be auto-completed.                                                                                                              | `string \\| undefined`                                                                                                            | `'off'`     |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                           | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                           | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                           | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                            | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                          | `undefined` |\n| `_id`                 | `_id`            | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                            | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                         | `undefined` |\n| `_max`                | `_max`           | Defines the maximum value of the element.                                                                                                                     | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                | `100`       |\n| `_min`                | `_min`           | Defines the smallest possible input value.                                                                                                                    | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                | `0`         |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined`                                    | `undefined` |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                            | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                            | `undefined` |\n| `_step`               | `_step`          | Defines the step size for value changes.                                                                                                                      | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                | `undefined` |\n| `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                         | `W3CInputValue[] \\| string \\| undefined`                                                                                         | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                            | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                           | `false`     |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                             | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<number | NumberString | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                           |\n| ---- | ------------------------------------- |\n|      | Die Beschriftung des Eingabeelements. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-range\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute        | Description                                                                                                                                                   | Type                                                                                                                               | Default     |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`    | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                         | `string \\| undefined`                                                                                                              | `undefined` |\n| `_autoComplete`       | `_auto-complete` | Defines whether the input can be auto-completed.                                                                                                              | `string \\| undefined`                                                                                                              | `'off'`     |\n| `_disabled`           | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hideLabel`          | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hideMsg`            | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hint`               | `_hint`          | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                              | `''`        |\n| `_icons`              | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined` |\n| `_id`                 | `_id`            | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                              | `undefined` |\n| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                           | `undefined` |\n| `_max`                | `_max`           | Defines the maximum value of the element.                                                                                                                     | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                  | `100`       |\n| `_min`                | `_min`           | Defines the smallest possible input value.                                                                                                                    | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                  | `0`         |\n| `_msg`                | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                              | `undefined` |\n| `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`   | `undefined` |\n| `_shortKey`           | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                              | `undefined` |\n| `_step`               | `_step`          | Defines the step size for value changes.                                                                                                                      | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                  | `undefined` |\n| `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                         | `W3CInputValue[] \\| string \\| undefined`                                                                                           | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                              | `'top'`     |\n| `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_value`              | `_value`         | Defines the value of the element.                                                                                                                             | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined ``                                                                  | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<number | NumberString | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                           |\n| ---- | ------------------------------------- |\n|      | Die Beschriftung des Eingabeelements. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1565,7 +1669,7 @@
       "group": "spec",
       "name": "input-text",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-text.md",
-      "code": "# kol-input-text\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute              | Description                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`          | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                         | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_autoComplete`       | `_auto-complete`       | Defines whether the input can be auto-completed.                                                                                                              | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'off'`     |\n| `_disabled`           | `_disabled`            | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hasCounter`         | `_has-counter`         | Shows a character counter for the input element.                                                                                                              | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideLabel`          | `_hide-label`          | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideMsg`            | `_hide-msg`            | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hint`               | `_hint`                | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `''`        |\n| `_icons`              | `_icons`               | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_id`                 | `_id`                  | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                               | `number \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                   | `\"hard\" \\| \"soft\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `'hard'`    |\n| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |\n| `_name`               | `_name`                | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_on`                 | --                     | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_pattern`            | `_pattern`             | Defines a validation pattern for the input field.                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_placeholder`        | `_placeholder`         | Defines the placeholder for input field. To be shown when there's no value.                                                                                   | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_readOnly`           | `_read-only`           | Makes the input element read only.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_required`           | `_required`            | Makes the input element required.                                                                                                                             | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_shortKey`           | `_short-key`           | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_smartButton`        | `_smart-button`        | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                        | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_spellCheck`         | `_spell-check`         | Defines whether the browser should check the spelling and grammar.                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_suggestions`        | `_suggestions`         | Suggestions to provide for the input.                                                                                                                         | `W3CInputValue[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'top'`     |\n| `_touched`            | `_touched`             | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_type`               | `_type`                | Defines either the type of the component or of the components interactive element.                                                                            | `\"search\" \\| \"tel\" \\| \"text\" \\| \"url\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `'text'`    |\n| `_value`              | `_value`               | Defines the value of the element.                                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `selectioconEnd() => Promise<number | null | undefined>`\n\nGet selection end of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `selectionStart() => Promise<number | null | undefined>`\n\nGet selection start of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `setRangeText(replacement: string, selectionStart?: number, selectionEnd?: number, selectMode?: \"select\" | \"start\" | \"end\" | \"preserve\") => Promise<void>`\n\nAdd string at position of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setRangeText\n\n#### Parameters\n\n| Name             | Type                                                      | Description |\n| ---------------- | --------------------------------------------------------- | ----------- |\n| `replacement`    | `string`                                                  |             |\n| `selectionStart` | `number \\| undefined`                                     |             |\n| `selectionEnd`   | `number \\| undefined`                                     |             |\n| `selectMode`     | `\"select\" \\| \"start\" \\| \"end\" \\| \"preserve\" \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: \"forward\" | \"backward\" | \"none\") => Promise<void>`\n\nSet selection start and end, and optional in which direction, of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setSelectionRange\n\n#### Parameters\n\n| Name                 | Type                                             | Description |\n| -------------------- | ------------------------------------------------ | ----------- |\n| `selectionStart`     | `number`                                         |             |\n| `selectionEnd`       | `number`                                         |             |\n| `selectionDirection` | `\"none\" \\| \"forward\" \\| \"backward\" \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionStart(selectionStart: number) => Promise<void>`\n\nSet selection start (and end = start) of internal element.\n\n#### Parameters\n\n| Name             | Type     | Description |\n| ---------------- | -------- | ----------- |\n| `selectionStart` | `number` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                         |\n| ---- | ----------------------------------- |\n|      | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-input-text\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute              | Description                                                                                                                                                   | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Default     |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`          | `_access-key`          | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                         | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_autoComplete`       | `_auto-complete`       | Defines whether the input can be auto-completed.                                                                                                              | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'off'`     |\n| `_disabled`           | `_disabled`            | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hasCounter`         | `_has-counter`         | Shows a character counter for the input element.                                                                                                              | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideLabel`          | `_hide-label`          | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hideMsg`            | `_hide-msg`            | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_hint`               | `_hint`                | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `''`        |\n| `_icons`              | `_icons`               | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `undefined` |\n| `_id`                 | `_id`                  | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                               | `number \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                   | `\"hard\" \\| \"soft\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `'hard'`    |\n| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `undefined` |\n| `_name`               | `_name`                | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_on`                 | --                     | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_pattern`            | `_pattern`             | Defines a validation pattern for the input field.                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_placeholder`        | `_placeholder`         | Defines the placeholder for input field. To be shown when there's no value.                                                                                   | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_readOnly`           | `_read-only`           | Makes the input element read only.                                                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_required`           | `_required`            | Makes the input element required.                                                                                                                             | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_shortKey`           | `_short-key`           | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n| `_smartButton`        | `_smart-button`        | Allows to add a button with an arbitrary action within the element (_hide-label only).                                                                        | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: \"primary\" \\| \"secondary\" \\| \"normal\" \\| \"tertiary\" \\| \"danger\" \\| \"ghost\" \\| \"custom\" \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_spellCheck`         | `_spell-check`         | Defines whether the browser should check the spelling and grammar.                                                                                            | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_suggestions`        | `_suggestions`         | Suggestions to provide for the input.                                                                                                                         | `W3CInputValue[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'top'`     |\n| `_touched`            | `_touched`             | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`     |\n| `_type`               | `_type`                | Defines either the type of the component or of the components interactive element.                                                                            | `\"search\" \\| \"tel\" \\| \"text\" \\| \"url\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `'text'`    |\n| `_value`              | `_value`               | Defines the value of the element.                                                                                                                             | `string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `selectioconEnd() => Promise<number | null | undefined>`\n\nGet selection end of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `selectionStart() => Promise<number | null | undefined>`\n\nGet selection start of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `setRangeText(replacement: string, selectionStart?: number, selectionEnd?: number, selectMode?: \"select\" | \"start\" | \"end\" | \"preserve\") => Promise<void>`\n\nAdd string at position of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setRangeText\n\n#### Parameters\n\n| Name             | Type                                                      | Description |\n| ---------------- | --------------------------------------------------------- | ----------- |\n| `replacement`    | `string`                                                  |             |\n| `selectionStart` | `number \\| undefined`                                     |             |\n| `selectionEnd`   | `number \\| undefined`                                     |             |\n| `selectMode`     | `\"select\" \\| \"start\" \\| \"end\" \\| \"preserve\" \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: \"forward\" | \"backward\" | \"none\") => Promise<void>`\n\nSet selection start and end, and optional in which direction, of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setSelectionRange\n\n#### Parameters\n\n| Name                 | Type                                             | Description |\n| -------------------- | ------------------------------------------------ | ----------- |\n| `selectionStart`     | `number`                                         |             |\n| `selectionEnd`       | `number`                                         |             |\n| `selectionDirection` | `\"none\" \\| \"forward\" \\| \"backward\" \\| undefined` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionStart(selectionStart: number) => Promise<void>`\n\nSet selection start (and end = start) of internal element.\n\n#### Parameters\n\n| Name             | Type     | Description |\n| ---------------- | -------- | ----------- |\n| `selectionStart` | `number` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                         |\n| ---- | ----------------------------------- |\n|      | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1581,7 +1685,7 @@
       "group": "spec",
       "name": "link",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/link.md",
-      "code": "# kol-link\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property             | Attribute             | Description                                                                                                                                                                                                                              | Type                                                                                   | Default     |\n| -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`         | `_access-key`         | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                                                                                                    | `string \\| undefined`                                                                  | `undefined` |\n| `_ariaControls`      | `_aria-controls`      | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                      | `string \\| undefined`                                                                  | `undefined` |\n| `_ariaCurrentValue`  | `_aria-current-value` | Defines the value for the aria-current attribute.                                                                                                                                                                                        | `\"date\" \\| \"false\" \\| \"location\" \\| \"page\" \\| \"step\" \\| \"time\" \\| \"true\" \\| undefined` | `undefined` |\n| `_ariaDescription`   | `_aria-description`   | Defines the value for the aria-description attribute.                                                                                                                                                                                    | `string \\| undefined`                                                                  | `undefined` |\n| `_ariaExpanded`      | `_aria-expanded`      | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                  | `boolean \\| undefined`                                                                 | `undefined` |\n| `_disabled`          | `_disabled`           | Makes the element not focusable and ignore all events.                                                                                                                                                                                   | `boolean \\| undefined`                                                                 | `false`     |\n| `_download`          | `_download`           | Tells the browser that the link contains a file. Optionally sets the filename.                                                                                                                                                           | `string \\| undefined`                                                                  | `undefined` |\n| `_hideLabel`         | `_hide-label`         | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                               | `boolean \\| undefined`                                                                 | `false`     |\n| `_href` _(required)_ | `_href`               | Sets the target URI of the link or citation source.                                                                                                                                                                                      | `string`                                                                               | `undefined` |\n| `_icons`             | `_icons`              | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                 | `undefined` |\n| `_inline`            | `_inline`             | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                                                                                                     | `boolean \\| undefined`                                                                 | `true`      |\n| `_label`             | `_label`              | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                             | `string \\| undefined`                                                                  | `undefined` |\n| `_on`                | --                    | Defines the callback functions for links.                                                                                                                                                                                                | `undefined \\| { onClick?: EventValueOrEventCallback<Event, string> \\| undefined; }`    | `undefined` |\n| `_role`              | `_role`               | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined`                                                     | `undefined` |\n| `_shortKey`          | `_short-key`          | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \\| undefined`                                                                  | `undefined` |\n| `_target`            | `_target`             | Defines where to open the link.                                                                                                                                                                                                          | `string \\| undefined`                                                                  | `undefined` |\n| `_tooltipAlign`      | `_tooltip-align`      | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                  | `'right'`   |\n| `_variant`           | `_variant`            | <span style=\"color:red\">**[DEPRECATED]**</span> Use the new _inline property instead.<br/><br/>Defines which variant should be used for presentation.                                                                                    | `\"inline\" \\| \"standalone\" \\| undefined`                                                | `'inline'`  |\n\n\n## Methods\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-link\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property             | Attribute             | Description                                                                                                                                                                                                                              | Type                                                                                   | Default     |\n| -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`         | `_access-key`         | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                                                                                                    | `string \\| undefined`                                                                  | `undefined` |\n| `_ariaControls`      | `_aria-controls`      | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                      | `string \\| undefined`                                                                  | `undefined` |\n| `_ariaCurrentValue`  | `_aria-current-value` | Defines the value for the aria-current attribute.                                                                                                                                                                                        | `\"date\" \\| \"false\" \\| \"location\" \\| \"page\" \\| \"step\" \\| \"time\" \\| \"true\" \\| undefined` | `undefined` |\n| `_ariaDescription`   | `_aria-description`   | Defines the value for the aria-description attribute.                                                                                                                                                                                    | `string \\| undefined`                                                                  | `undefined` |\n| `_ariaExpanded`      | `_aria-expanded`      | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                  | `boolean \\| undefined`                                                                 | `undefined` |\n| `_disabled`          | `_disabled`           | Makes the element not focusable and ignore all events.                                                                                                                                                                                   | `boolean \\| undefined`                                                                 | `false`     |\n| `_download`          | `_download`           | Tells the browser that the link contains a file. Optionally sets the filename.                                                                                                                                                           | `string \\| undefined`                                                                  | `undefined` |\n| `_hideLabel`         | `_hide-label`         | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                               | `boolean \\| undefined`                                                                 | `false`     |\n| `_href` _(required)_ | `_href`               | Sets the target URI of the link or citation source.                                                                                                                                                                                      | `string`                                                                               | `undefined` |\n| `_icons`             | `_icons`              | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                 | `undefined` |\n| `_inline`            | `_inline`             | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                                                                                                     | `boolean \\| undefined`                                                                 | `true`      |\n| `_label`             | `_label`              | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                             | `string \\| undefined`                                                                  | `undefined` |\n| `_on`                | --                    | Defines the callback functions for links.                                                                                                                                                                                                | `undefined \\| { onClick?: EventValueOrEventCallback<Event, string> \\| undefined; }`    | `undefined` |\n| `_role`              | `_role`               | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined`                                                     | `undefined` |\n| `_shortKey`          | `_short-key`          | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \\| undefined`                                                                  | `undefined` |\n| `_target`            | `_target`             | Defines where to open the link.                                                                                                                                                                                                          | `string \\| undefined`                                                                  | `undefined` |\n| `_tooltipAlign`      | `_tooltip-align`      | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                  | `'right'`   |\n\n\n## Methods\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1589,7 +1693,7 @@
       "group": "spec",
       "name": "link-button",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/link-button.md",
-      "code": "# kol-link-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property             | Attribute             | Description                                                                                                                                                                                                                              | Type                                                                                                 | Default     |\n| -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`         | `_access-key`         | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                                                                                                    | `string \\| undefined`                                                                                | `undefined` |\n| `_ariaControls`      | `_aria-controls`      | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                      | `string \\| undefined`                                                                                | `undefined` |\n| `_ariaCurrentValue`  | `_aria-current-value` | Defines the value for the aria-current attribute.                                                                                                                                                                                        | `\"date\" \\| \"false\" \\| \"location\" \\| \"page\" \\| \"step\" \\| \"time\" \\| \"true\" \\| undefined`               | `undefined` |\n| `_ariaDescription`   | `_aria-description`   | Defines the value for the aria-description attribute.                                                                                                                                                                                    | `string \\| undefined`                                                                                | `undefined` |\n| `_customClass`       | `_custom-class`       | Defines the custom class attribute if _variant=\"custom\" is set.                                                                                                                                                                          | `string \\| undefined`                                                                                | `undefined` |\n| `_disabled`          | `_disabled`           | Makes the element not focusable and ignore all events.                                                                                                                                                                                   | `boolean \\| undefined`                                                                               | `false`     |\n| `_download`          | `_download`           | Tells the browser that the link contains a file. Optionally sets the filename.                                                                                                                                                           | `string \\| undefined`                                                                                | `undefined` |\n| `_hideLabel`         | `_hide-label`         | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                               | `boolean \\| undefined`                                                                               | `false`     |\n| `_href` _(required)_ | `_href`               | Defines the target URI of the link.                                                                                                                                                                                                      | `string`                                                                                             | `undefined` |\n| `_icons`             | `_icons`              | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                               | `undefined` |\n| `_label`             | `_label`              | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                             | `string \\| undefined`                                                                                | `undefined` |\n| `_on`                | --                    | Defines the callback functions for links.                                                                                                                                                                                                | `undefined \\| { onClick?: EventValueOrEventCallback<Event, string> \\| undefined; }`                  | `undefined` |\n| `_role`              | `_role`               | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined`                                                                   | `undefined` |\n| `_shortKey`          | `_short-key`          | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \\| undefined`                                                                                | `undefined` |\n| `_target`            | `_target`             | Defines where to open the link.                                                                                                                                                                                                          | `string \\| undefined`                                                                                | `undefined` |\n| `_tooltipAlign`      | `_tooltip-align`      | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                | `'right'`   |\n| `_variant`           | `_variant`            | Defines which variant should be used for presentation.                                                                                                                                                                                   | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'`  |\n\n\n## Methods\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-link-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property             | Attribute             | Description                                                                                                                                                                                                                              | Type                                                                                                 | Default     |\n| -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`         | `_access-key`         | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                                                                                                    | `string \\| undefined`                                                                                | `undefined` |\n| `_ariaControls`      | `_aria-controls`      | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                      | `string \\| undefined`                                                                                | `undefined` |\n| `_ariaCurrentValue`  | `_aria-current-value` | Defines the value for the aria-current attribute.                                                                                                                                                                                        | `\"date\" \\| \"false\" \\| \"location\" \\| \"page\" \\| \"step\" \\| \"time\" \\| \"true\" \\| undefined`               | `undefined` |\n| `_ariaDescription`   | `_aria-description`   | Defines the value for the aria-description attribute.                                                                                                                                                                                    | `string \\| undefined`                                                                                | `undefined` |\n| `_customClass`       | `_custom-class`       | Defines the custom class attribute if _variant=\"custom\" is set.                                                                                                                                                                          | `string \\| undefined`                                                                                | `undefined` |\n| `_disabled`          | `_disabled`           | Makes the element not focusable and ignore all events.                                                                                                                                                                                   | `boolean \\| undefined`                                                                               | `false`     |\n| `_download`          | `_download`           | Tells the browser that the link contains a file. Optionally sets the filename.                                                                                                                                                           | `string \\| undefined`                                                                                | `undefined` |\n| `_hideLabel`         | `_hide-label`         | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                               | `boolean \\| undefined`                                                                               | `false`     |\n| `_href` _(required)_ | `_href`               | Defines the target URI of the link.                                                                                                                                                                                                      | `string`                                                                                             | `undefined` |\n| `_icons`             | `_icons`              | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                               | `undefined` |\n| `_label`             | `_label`              | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                             | `string \\| undefined`                                                                                | `undefined` |\n| `_on`                | --                    | Defines the callback functions for links.                                                                                                                                                                                                | `undefined \\| { onClick?: EventValueOrEventCallback<Event, string> \\| undefined; }`                  | `undefined` |\n| `_role`              | `_role`               | <span class=\"text-red-500\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined`                                                                   | `undefined` |\n| `_shortKey`          | `_short-key`          | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \\| undefined`                                                                                | `undefined` |\n| `_target`            | `_target`             | Defines where to open the link.                                                                                                                                                                                                          | `string \\| undefined`                                                                                | `undefined` |\n| `_tooltipAlign`      | `_tooltip-align`      | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                | `'right'`   |\n| `_variant`           | `_variant`            | Defines which variant should be used for presentation.                                                                                                                                                                                   | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined` | `'normal'`  |\n\n\n## Methods\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1605,7 +1709,7 @@
       "group": "spec",
       "name": "nav",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/nav.md",
-      "code": "# kol-nav\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                | Attribute                  | Description                                                                                                                                                                                                                      | Type                                              | Default      |\n| ----------------------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------ |\n| `_collapsible`          | `_collapsible`             | Defines if navigation nodes can be collapsed or not. Enabled by default.                                                                                                                                                         | `boolean \\| undefined`                            | `true`       |\n| `_hasCompactButton`     | `_has-compact-button`      | Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".                                                                                                                    | `boolean \\| undefined`                            | `false`      |\n| `_hasIconsWhenExpanded` | `_has-icons-when-expanded` | Shows icons next to the navigation item labels, even when the navigation is not collapsed.                                                                                                                                       | `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| `_label` _(required)_   | `_label`                   | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                                                                                                               | `string`                                          | `undefined`  |\n| `_links` _(required)_   | `_links`                   | Defines the list of links, buttons or texts to render.                                                                                                                                                                           | `ButtonOrLinkOrTextWithChildrenProps[] \\| string` | `undefined`  |\n| `_orientation`          | `_orientation`             | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version. The navigation defaults to vertical orientation.<br/><br/>Defines whether the orientation of the component is horizontal or vertical. | `\"horizontal\" \\| \"vertical\" \\| undefined`         | `'vertical'` |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-nav\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                | Attribute                  | Description                                                                                                                                | Type                                              | Default     |\n| ----------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------- | ----------- |\n| `_collapsible`          | `_collapsible`             | Defines if navigation nodes can be collapsed or not. Enabled by default.                                                                   | `boolean \\| undefined`                            | `true`      |\n| `_hasCompactButton`     | `_has-compact-button`      | Creates a button below the navigation, that toggles _collapsible.                                                                          | `boolean \\| undefined`                            | `false`     |\n| `_hasIconsWhenExpanded` | `_has-icons-when-expanded` | Shows icons next to the navigation item labels, even when the navigation is not collapsed.                                                 | `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| `_label` _(required)_   | `_label`                   | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                         | `string`                                          | `undefined` |\n| `_links` _(required)_   | `_links`                   | Defines the list of links, buttons or texts to render.                                                                                     | `ButtonOrLinkOrTextWithChildrenProps[] \\| string` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1621,7 +1725,7 @@
       "group": "spec",
       "name": "popover-button",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/popover-button.md",
-      "code": "# kol-popover-button-wc\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute           | Description                                                                                                                                                                      | Type                                                                                                                                                   | Default     |\n| --------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                                            | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                              | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                            | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaSelected`       | `_aria-selected`    | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \\| undefined`                                                                                                                                 | `undefined` |\n| `_customClass`        | `_custom-class`     | Defines the custom class attribute if _variant=\"custom\" is set.                                                                                                                  | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                           | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                       | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                  | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                                                                                 | `undefined` |\n| `_inline`             | `_inline`           | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                                             | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_label` _(required)_ | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                     | `string`                                                                                                                                               | `undefined` |\n| `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                                    | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_on`                 | --                  | Defines the callback functions for button events.                                                                                                                                | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_popoverAlign`       | `_popover-align`    | Defines where to show the Popover preferably: top, right, bottom or left.                                                                                                        | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                  | `'bottom'`  |\n| `_role`               | `_role`             | Defines the role of the components primary element.                                                                                                                              | `\"tab\" \\| \"treeitem\" \\| undefined`                                                                                                                     | `undefined` |\n| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                          | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_tabIndex`           | `_tab-index`        | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                 | `number \\| undefined`                                                                                                                                  | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                        | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                  | `'top'`     |\n| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                                               | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined`                                                                                                         | `'button'`  |\n| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                                           | `undefined` |\n| `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                                           | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined`                                                   | `'normal'`  |\n\n\n## Methods\n\n### `hidePopover() => Promise<void>`\n\nHides the popover programmatically by calling the native hidePopover method.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showPopover() => Promise<void>`\n\nShow the popover programmatically by calling the native showPopover method.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description          |\n| ---- | -------------------- |\n|      | The popover content. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-popover-button-wc\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute           | Description                                                                                                                                                                      | Type                                                                                                                                                   | Default     |\n| --------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                                            | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                              | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                            | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaSelected`       | `_aria-selected`    | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | `boolean \\| undefined`                                                                                                                                 | `undefined` |\n| `_customClass`        | `_custom-class`     | Defines the custom class attribute if _variant=\"custom\" is set.                                                                                                                  | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                           | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                       | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                  | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                                                                                 | `undefined` |\n| `_inline`             | `_inline`           | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.                                                             | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_label` _(required)_ | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                     | `string`                                                                                                                                               | `undefined` |\n| `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                                    | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_on`                 | --                  | Defines the callback functions for button events.                                                                                                                                | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_popoverAlign`       | `_popover-align`    | Defines where to show the Popover preferably: top, right, bottom or left.                                                                                                        | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                  | `'bottom'`  |\n| `_role`               | `_role`             | Defines the role of the components primary element.                                                                                                                              | `\"tab\" \\| \"treeitem\" \\| undefined`                                                                                                                     | `undefined` |\n| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                          | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_tabIndex`           | `_tab-index`        | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)                                 | `number \\| undefined`                                                                                                                                  | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                        | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                  | `'top'`     |\n| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                                               | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined`                                                                                                         | `'button'`  |\n| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                                           | `undefined` |\n| `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                                           | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined`                                                   | `'normal'`  |\n\n\n## Methods\n\n### `hidePopover() => Promise<void>`\n\nHides the popover programmatically by calling the native hidePopover method.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showPopover() => Promise<void>`\n\nShow the popover programmatically by calling the native showPopover method.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description          |\n| ---- | -------------------- |\n|      | The popover content. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1645,7 +1749,7 @@
       "group": "spec",
       "name": "select",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/select.md",
-      "code": "# kol-select-wc\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                | Attribute        | Description                                                                                                                                                   | Type                                                                                                                             | Default     |\n| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`            | `_access-key`    | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                         | `string \\| undefined`                                                                                                            | `undefined` |\n| `_disabled`             | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                           | `false`     |\n| `_hideLabel`            | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                           | `false`     |\n| `_hideMsg`              | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                           | `false`     |\n| `_hint`                 | `_hint`          | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                            | `''`        |\n| `_icons`                | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                          | `undefined` |\n| `_id`                   | `_id`            | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                            | `undefined` |\n| `_label` _(required)_   | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                         | `undefined` |\n| `_msg`                  | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined`                                    | `undefined` |\n| `_multiple`             | `_multiple`      | Makes the input accept multiple inputs.                                                                                                                       | `boolean \\| undefined`                                                                                                           | `false`     |\n| `_name`                 | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                            | `undefined` |\n| `_on`                   | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` _(required)_ | `_options`       | Options the user can choose from, also supporting Optgroup.                                                                                                   | `(Option<StencilUnknown> \\| Optgroup<StencilUnknown>)[] \\| string`                                                               | `undefined` |\n| `_required`             | `_required`      | Makes the input element required.                                                                                                                             | `boolean \\| undefined`                                                                                                           | `false`     |\n| `_rows`                 | `_rows`          | Defines how many rows of options should be visible at the same time.                                                                                          | `number \\| undefined`                                                                                                            | `undefined` |\n| `_shortKey`             | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                            | `undefined` |\n| `_tabIndex`             | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)              | `number \\| undefined`                                                                                                            | `undefined` |\n| `_tooltipAlign`         | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                            | `'top'`     |\n| `_touched`              | `_touched`       | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                           | `false`     |\n| `_value`                | `_value`         | Defines the value of the input.                                                                                                                               | `StencilUnknown[] \\| boolean \\| null \\| number \\| object \\| string \\| undefined`                                                 | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<StencilUnknown[] | StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown | StencilUnknown[]>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                         |\n| ---- | ----------------------------------- |\n|      | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-select-wc\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                | Attribute        | Description                                                                                                                                                   | Type                                                                                                                               | Default     |\n| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`            | `_access-key`    | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                         | `string \\| undefined`                                                                                                              | `undefined` |\n| `_disabled`             | `_disabled`      | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hideLabel`            | `_hide-label`    | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hideMsg`              | `_hide-msg`      | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hint`                 | `_hint`          | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                              | `''`        |\n| `_icons`                | `_icons`         | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined` |\n| `_id`                   | `_id`            | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                              | `undefined` |\n| `_label` _(required)_   | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                           | `undefined` |\n| `_msg`                  | `_msg`           | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple`             | `_multiple`      | Makes the input accept multiple inputs.                                                                                                                       | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_name`                 | `_name`          | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                              | `undefined` |\n| `_on`                   | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`   | `undefined` |\n| `_options` _(required)_ | `_options`       | Options the user can choose from, also supporting Optgroup.                                                                                                   | `(Option<StencilUnknown> \\| Optgroup<StencilUnknown>)[] \\| string`                                                                 | `undefined` |\n| `_required`             | `_required`      | Makes the input element required.                                                                                                                             | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_rows`                 | `_rows`          | Defines how many rows of options should be visible at the same time.                                                                                          | `number \\| undefined`                                                                                                              | `undefined` |\n| `_shortKey`             | `_short-key`     | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                              | `undefined` |\n| `_tabIndex`             | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)              | `number \\| undefined`                                                                                                              | `undefined` |\n| `_tooltipAlign`         | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                              | `'top'`     |\n| `_touched`              | `_touched`       | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_value`                | `_value`         | Defines the value of the input.                                                                                                                               | `StencilUnknown[] \\| boolean \\| null \\| number \\| object \\| string \\| undefined`                                                   | `undefined` |\n\n\n## Methods\n\n### `getValue() => Promise<StencilUnknown[] | StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown | StencilUnknown[]>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                         |\n| ---- | ----------------------------------- |\n|      | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1653,7 +1757,7 @@
       "group": "spec",
       "name": "single-select",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/single-select.md",
-      "code": "# kol-single-select\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                | Attribute            | Description                                                                                                                                                   | Type                                                                                                                             | Default     |\n| ----------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`            | `_access-key`        | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                         | `string \\| undefined`                                                                                                            | `undefined` |\n| `_disabled`             | `_disabled`          | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                           | `false`     |\n| `_hideClearButton`      | `_hide-clear-button` | Hides the clear button.                                                                                                                                       | `boolean \\| undefined`                                                                                                           | `false`     |\n| `_hideLabel`            | `_hide-label`        | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                           | `false`     |\n| `_hideMsg`              | `_hide-msg`          | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                           | `false`     |\n| `_hint`                 | `_hint`              | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                            | `''`        |\n| `_icons`                | `_icons`             | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                          | `undefined` |\n| `_id`                   | `_id`                | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                            | `undefined` |\n| `_label` _(required)_   | `_label`             | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                         | `undefined` |\n| `_msg`                  | `_msg`               | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_label\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined`                                    | `undefined` |\n| `_name`                 | `_name`              | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                            | `undefined` |\n| `_on`                   | --                   | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` _(required)_ | `_options`           | Options the user can choose from.                                                                                                                             | `Option<StencilUnknown>[] \\| string`                                                                                             | `undefined` |\n| `_placeholder`          | `_placeholder`       | Defines the placeholder for input field. To be shown when there's no value.                                                                                   | `string \\| undefined`                                                                                                            | `undefined` |\n| `_required`             | `_required`          | Makes the input element required.                                                                                                                             | `boolean \\| undefined`                                                                                                           | `false`     |\n| `_rows`                 | `_rows`              | Maximum number of visible rows of the element.                                                                                                                | `number \\| undefined`                                                                                                            | `undefined` |\n| `_shortKey`             | `_short-key`         | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                            | `undefined` |\n| `_tooltipAlign`         | `_tooltip-align`     | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                            | `'top'`     |\n| `_touched`              | `_touched`           | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                           | `false`     |\n| `_value`                | `_value`             | Defines the value of the element.                                                                                                                             | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                     | `null`      |\n\n\n## Methods\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description            |\n| ---- | ---------------------- |\n|      | The input field label. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-single-select\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                | Attribute           | Description                                                                                                                                                   | Type                                                                                                                               | Default     |\n| ----------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey`            | `_access-key`       | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                         | `string \\| undefined`                                                                                                              | `undefined` |\n| `_disabled`             | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                        | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hasClearButton`       | `_has-clear-button` | Shows the clear button if enabled.                                                                                                                            | `boolean \\| undefined`                                                                                                             | `true`      |\n| `_hideLabel`            | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                    | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hideMsg`              | `_hide-msg`         | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                            | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_hint`                 | `_hint`             | Defines the hint text.                                                                                                                                        | `string \\| undefined`                                                                                                              | `''`        |\n| `_icons`                | `_icons`            | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                               | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined` |\n| `_id`                   | `_id`               | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element. | `string \\| undefined`                                                                                                              | `undefined` |\n| `_label` _(required)_   | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.  | `string`                                                                                                                           | `undefined` |\n| `_msg`                  | `_msg`              | Defines the properties for a message rendered as Alert component.                                                                                             | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name`                 | `_name`             | Defines the technical name of an input field.                                                                                                                 | `string \\| undefined`                                                                                                              | `undefined` |\n| `_on`                   | --                  | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                     | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`   | `undefined` |\n| `_options` _(required)_ | `_options`          | Options the user can choose from.                                                                                                                             | `Option<StencilUnknown>[] \\| string`                                                                                               | `undefined` |\n| `_placeholder`          | `_placeholder`      | Defines the placeholder for input field. To be shown when there's no value.                                                                                   | `string \\| undefined`                                                                                                              | `undefined` |\n| `_required`             | `_required`         | Makes the input element required.                                                                                                                             | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_rows`                 | `_rows`             | Maximum number of visible rows of the element.                                                                                                                | `number \\| undefined`                                                                                                              | `undefined` |\n| `_shortKey`             | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                       | `string \\| undefined`                                                                                                              | `undefined` |\n| `_tooltipAlign`         | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                     | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                              | `'top'`     |\n| `_touched`              | `_touched`          | Shows if the input was touched by a user.                                                                                                                     | `boolean \\| undefined`                                                                                                             | `false`     |\n| `_value`                | `_value`            | Defines the value of the element.                                                                                                                             | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                       | `null`      |\n\n\n## Methods\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description            |\n| ---- | ---------------------- |\n|      | The input field label. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1677,7 +1781,7 @@
       "group": "spec",
       "name": "split-button",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/split-button.md",
-      "code": "# kol-split-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute           | Description                                                                                                                                                                                                                              | Type                                                                                                                                                   | Default     |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                                                                                                    | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                      | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                                                                                    | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaExpanded`       | `_aria-expanded`    | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                  | `boolean \\| undefined`                                                                                                                                 | `undefined` |\n| `_ariaSelected`       | `_aria-selected`    | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                         | `boolean \\| undefined`                                                                                                                                 | `undefined` |\n| `_customClass`        | `_custom-class`     | Defines the custom class attribute if _variant=\"custom\" is set.                                                                                                                                                                          | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                                                                                   | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                               | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                                                                                 | `undefined` |\n| `_id`                 | `_id`               | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element.                                                                            | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_label` _(required)_ | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                                                                                                                       | `string`                                                                                                                                               | `undefined` |\n| `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                                                                                            | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_on`                 | --                  | Defines the callback functions for button events.                                                                                                                                                                                        | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_role`               | `_role`             | <span style=\"color:red\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined`                                                                                                                     | `undefined` |\n| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                  | `'top'`     |\n| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                                                                                                       | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined`                                                                                                         | `'button'`  |\n| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                                                                        | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                                           | `undefined` |\n| `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                                                                                                   | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined`                                                   | `'normal'`  |\n\n\n## Methods\n\n### `closePopup() => Promise<void>`\n\nCloses the dropdown.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                                               |\n| ---- | --------------------------------------------------------- |\n|      | Ermöglicht das Einfügen beliebigen HTMLs in das dropdown. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-split-button\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute           | Description                                                                                                                                                                                                                              | Type                                                                                                                                                   | Default     |\n| --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey`          | `_access-key`       | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                                                                                                    | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaControls`       | `_aria-controls`    | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)                                                                                      | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaDescription`    | `_aria-description` | Defines the value for the aria-description attribute.                                                                                                                                                                                    | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_ariaExpanded`       | `_aria-expanded`    | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)                                                                  | `boolean \\| undefined`                                                                                                                                 | `undefined` |\n| `_ariaSelected`       | `_aria-selected`    | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)                                                         | `boolean \\| undefined`                                                                                                                                 | `undefined` |\n| `_customClass`        | `_custom-class`     | Defines the custom class attribute if _variant=\"custom\" is set.                                                                                                                                                                          | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_disabled`           | `_disabled`         | Makes the element not focusable and ignore all events.                                                                                                                                                                                   | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_hideLabel`          | `_hide-label`       | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                               | `boolean \\| undefined`                                                                                                                                 | `false`     |\n| `_icons`              | `_icons`            | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                          | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined`                                                                                 | `undefined` |\n| `_id`                 | `_id`               | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element.                                                                            | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_label` _(required)_ | `_label`            | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).                                                                                                                       | `string`                                                                                                                                               | `undefined` |\n| `_name`               | `_name`             | Defines the technical name of an input field.                                                                                                                                                                                            | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_on`                 | --                  | Defines the callback functions for button events.                                                                                                                                                                                        | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> \\| undefined; onMouseDown?: EventCallback<MouseEvent> \\| undefined; }` | `undefined` |\n| `_role`               | `_role`             | <span style=\"color:red\">**[DEPRECATED]**</span> We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.<br/><br/>Defines the role of the components primary element. | `\"tab\" \\| \"treeitem\" \\| undefined`                                                                                                                     | `undefined` |\n| `_shortKey`           | `_short-key`        | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                  | `string \\| undefined`                                                                                                                                  | `undefined` |\n| `_tooltipAlign`       | `_tooltip-align`    | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                                                  | `'top'`     |\n| `_type`               | `_type`             | Defines either the type of the component or of the components interactive element.                                                                                                                                                       | `\"button\" \\| \"reset\" \\| \"submit\" \\| undefined`                                                                                                         | `'button'`  |\n| `_value`              | `_value`            | Defines the value of the element.                                                                                                                                                                                                        | `boolean \\| null \\| number \\| object \\| string \\| undefined`                                                                                           | `undefined` |\n| `_variant`            | `_variant`          | Defines which variant should be used for presentation.                                                                                                                                                                                   | `\"custom\" \\| \"danger\" \\| \"ghost\" \\| \"normal\" \\| \"primary\" \\| \"secondary\" \\| \"tertiary\" \\| undefined`                                                   | `'normal'`  |\n\n\n## Methods\n\n### `closePopup() => Promise<void>`\n\nCloses the dropdown.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                                               |\n| ---- | --------------------------------------------------------- |\n|      | Ermöglicht das Einfügen beliebigen HTMLs in das dropdown. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1685,7 +1789,7 @@
       "group": "spec",
       "name": "table-stateful",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/table-stateful.md",
-      "code": "# kol-table-stateful\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                 | Attribute              | Description                                                                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Default     |\n| ------------------------ | ---------------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_allowMultiSort`        | `_allow-multi-sort`    | Defines whether to allow multi sort.                                                                               | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_data` _(required)_     | `_data`                | Defines the primary table data.                                                                                    | `KoliBriTableDataType[] \\| string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_dataFoot`              | `_data-foot`           | Defines the data for the table footer.                                                                             | `KoliBriTableDataType[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |\n| `_hasSettingsMenu`       | `_has-settings-menu`   | Enables the settings menu if true (default: false).                                                                | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_headers` _(required)_  | `_headers`             | Defines the horizontal and vertical table headers.                                                                 | `string \\| { horizontal?: KoliBriTableHeaderCellWithLogic[][] \\| undefined; vertical?: KoliBriTableHeaderCellWithLogic[][] \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |\n| `_label` _(required)_    | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_minWidth` _(required)_ | `_min-width`           | Defines the table min-width (CSS width values).                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_on`                    | --                     | Defines the callback functions for table events.                                                                   | `undefined \\| { onSelectionChange?: EventValueOrEventCallback<Event, StatefulSelectionChangeEventPayload> \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_pagination`            | `_pagination`          | Defines whether to show the data distributed over multiple pages.                                                  | `boolean \\| string \\| undefined \\| { _page: number; } & { _on?: KoliBriPaginationButtonCallbacks \\| undefined; _page?: number \\| undefined; _max?: number \\| undefined; _boundaryCount?: number \\| undefined; _hasButtons?: boolean \\| Stringified<PaginationHasButton> \\| undefined; _pageSize?: number \\| undefined; _pageSizeOptions?: Stringified<number[]> \\| undefined; _siblingCount?: number \\| undefined; _customClass?: string \\| undefined; _label?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_paginationPosition`    | `_pagination-position` | Controls the position of the pagination.                                                                           | `\"both\" \\| \"bottom\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `'bottom'`  |\n| `_selection`             | `_selection`           | Defines how rows can be selected and the current selection.                                                        | `string \\| undefined \\| ({ label: (row: KoliBriTableDataType) => string; keyPropertyName?: string \\| undefined; multiple?: boolean \\| undefined; selectedKeys?: KoliBriTableSelectionKeys \\| undefined; disabledKeys?: KoliBriTableSelectionKeys \\| undefined; })`                                                                                                                                                                                                                                                                  | `undefined` |\n| `_tableSettings`         | --                     | Defines the table settings including column visibility, order and width.                                           | `TableSettings \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `undefined` |\n\n\n## Methods\n\n### `getSelection() => Promise<KoliBriTableDataType[] | KoliBriTableDataType | null>`\n\nReturns the selected rows.\n\n#### Returns\n\nType: `Promise<KoliBriTableDataType | KoliBriTableDataType[] | null>`\n\n\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-table-stateful\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                 | Attribute              | Description                                                                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Default     |\n| ------------------------ | ---------------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_allowMultiSort`        | `_allow-multi-sort`    | Defines whether to allow multi sort.                                                                               | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_data` _(required)_     | `_data`                | Defines the primary table data.                                                                                    | `KoliBriTableDataType[] \\| string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `undefined` |\n| `_dataFoot`              | `_data-foot`           | Defines the data for the table footer.                                                                             | `KoliBriTableDataType[] \\| string \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `undefined` |\n| `_hasSettingsMenu`       | `_has-settings-menu`   | Enables the settings menu if true (default: false).                                                                | `boolean \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |\n| `_headers` _(required)_  | `_headers`             | Defines the horizontal and vertical table headers.                                                                 | `string \\| { horizontal?: KoliBriTableHeaderCellWithLogic[][] \\| undefined; vertical?: KoliBriTableHeaderCellWithLogic[][] \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                         | `undefined` |\n| `_label` _(required)_    | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_minWidth` _(required)_ | `_min-width`           | Defines the table min-width (CSS width values).                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |\n| `_on`                    | --                     | Defines the callback functions for table events.                                                                   | `undefined \\| { onSelectionChange?: EventValueOrEventCallback<Event, StatefulSelectionChangeEventPayload> \\| undefined; }`                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined` |\n| `_pagination`            | `_pagination`          | Defines whether to show the data distributed over multiple pages.                                                  | `boolean \\| string \\| undefined \\| { _page: number; } & { _on?: KoliBriPaginationButtonCallbacks \\| undefined; _page?: number \\| undefined; _max?: number \\| undefined; _boundaryCount?: number \\| undefined; _hasButtons?: boolean \\| Stringified<PaginationHasButton> \\| undefined; _pageSize?: number \\| undefined; _pageSizeOptions?: Stringified<number[]> \\| undefined; _siblingCount?: number \\| undefined; _customClass?: string \\| undefined; _label?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_paginationPosition`    | `_pagination-position` | Controls the position of the pagination.                                                                           | `\"both\" \\| \"bottom\" \\| \"top\" \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `'bottom'`  |\n| `_selection`             | `_selection`           | Defines how rows can be selected and the current selection.                                                        | `string \\| undefined \\| ({ label: (row: KoliBriTableDataType) => string; keyPropertyName?: string \\| undefined; multiple?: boolean \\| undefined; selectedKeys?: KoliBriTableSelectionKeys \\| undefined; disabledKeys?: KoliBriTableSelectionKeys \\| undefined; })`                                                                                                                                                                                                                                                                  | `undefined` |\n| `_tableSettings`         | --                     | Defines the table settings including column visibility, order and width.                                           | `TableSettings \\| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `undefined` |\n\n\n## Methods\n\n### `getSelection() => Promise<KoliBriTableDataType[] | null>`\n\nReturns the selected rows.\n\n#### Returns\n\nType: `Promise<KoliBriTableDataType[] | null>`\n\n\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1693,7 +1797,7 @@
       "group": "spec",
       "name": "table-stateless",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/table-stateless.md",
-      "code": "# kol-table-stateless\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                    | Attribute            | Description                                                                                                        | Type                                                                                                                                                                                                                                                               | Default     |\n| --------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_data` _(required)_        | `_data`              | Defines the primary table data.                                                                                    | `KoliBriTableDataType[] \\| string`                                                                                                                                                                                                                                 | `undefined` |\n| `_dataFoot`                 | `_data-foot`         | Defines the data for the table footer.                                                                             | `KoliBriTableDataType[] \\| string \\| undefined`                                                                                                                                                                                                                    | `undefined` |\n| `_hasSettingsMenu`          | `_has-settings-menu` | Enables the settings menu if true (default: false).                                                                | `boolean \\| undefined`                                                                                                                                                                                                                                             | `undefined` |\n| `_headerCells` _(required)_ | `_header-cells`      | Defines the horizontal and vertical table headers.                                                                 | `string \\| { horizontal?: KoliBriTableHeaderCell[][] \\| undefined; vertical?: KoliBriTableHeaderCell[][] \\| undefined; }`                                                                                                                                          | `undefined` |\n| `_label` _(required)_       | `_label`             | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                                                                                           | `undefined` |\n| `_minWidth` _(required)_    | `_min-width`         | Defines the table min-width (CSS width values).                                                                    | `string`                                                                                                                                                                                                                                                           | `undefined` |\n| `_on`                       | --                   | Defines the callback functions for table events.                                                                   | `undefined \\| { onSort?: EventValueOrEventCallback<MouseEvent, SortEventPayload> \\| undefined; onSelectionChange?: EventValueOrEventCallback<Event, SelectionChangeEventPayload> \\| undefined; }`                                                                  | `undefined` |\n| `_selection`                | `_selection`         | Defines how rows can be selected and the current selection.                                                        | `string \\| undefined \\| ({ label: (row: KoliBriTableDataType) => string; keyPropertyName?: string \\| undefined; multiple?: boolean \\| undefined; selectedKeys?: KoliBriTableSelectionKeys \\| undefined; disabledKeys?: KoliBriTableSelectionKeys \\| undefined; })` | `undefined` |\n| `_tableSettings`            | --                   | Defines the table settings including column visibility, order and width.                                           | `TableSettings \\| undefined`                                                                                                                                                                                                                                       | `undefined` |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-table-stateless\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property                    | Attribute            | Description                                                                                                        | Type                                                                                                                                                                                                                                                               | Default     |\n| --------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_data` _(required)_        | `_data`              | Defines the primary table data.                                                                                    | `KoliBriTableDataType[] \\| string`                                                                                                                                                                                                                                 | `undefined` |\n| `_dataFoot`                 | `_data-foot`         | Defines the data for the table footer.                                                                             | `KoliBriTableDataType[] \\| string \\| undefined`                                                                                                                                                                                                                    | `undefined` |\n| `_hasSettingsMenu`          | `_has-settings-menu` | Enables the settings menu if true (default: false).                                                                | `boolean \\| undefined`                                                                                                                                                                                                                                             | `undefined` |\n| `_headerCells` _(required)_ | `_header-cells`      | Defines the horizontal and vertical table headers.                                                                 | `string \\| { horizontal?: KoliBriTableHeaderCell[][] \\| undefined; vertical?: KoliBriTableHeaderCell[][] \\| undefined; }`                                                                                                                                          | `undefined` |\n| `_label` _(required)_       | `_label`             | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                                                                                           | `undefined` |\n| `_minWidth` _(required)_    | `_min-width`         | Defines the table min-width (CSS width values).                                                                    | `string`                                                                                                                                                                                                                                                           | `undefined` |\n| `_on`                       | --                   | Defines the callback functions for table events.                                                                   | `undefined \\| { onSort?: EventValueOrEventCallback<MouseEvent, SortEventPayload> \\| undefined; onSelectionChange?: EventValueOrEventCallback<Event, KoliBriTableSelectionKeys> \\| undefined; }`                                                                    | `undefined` |\n| `_selection`                | `_selection`         | Defines how rows can be selected and the current selection.                                                        | `string \\| undefined \\| ({ label: (row: KoliBriTableDataType) => string; keyPropertyName?: string \\| undefined; multiple?: boolean \\| undefined; selectedKeys?: KoliBriTableSelectionKeys \\| undefined; disabledKeys?: KoliBriTableSelectionKeys \\| undefined; })` | `undefined` |\n| `_tableSettings`            | --                   | Defines the table settings including column visibility, order and width.                                           | `TableSettings \\| undefined`                                                                                                                                                                                                                                       | `undefined` |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1709,7 +1813,7 @@
       "group": "spec",
       "name": "textarea",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/textarea.md",
-      "code": "# kol-textarea\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute              | Description                                                                                                                                                                                                                                                                                        | Type                                                                                                                             | Default      |\n| --------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_accessKey`          | `_access-key`          | Defines the key combination that can be used to trigger or focus the component’s interactive element.                                                                                                                                                                                              | `string \\| undefined`                                                                                                            | `undefined`  |\n| `_adjustHeight`       | `_adjust-height`       | Adjusts the height of the element to its content.                                                                                                                                                                                                                                                  | `boolean \\| undefined`                                                                                                           | `false`      |\n| `_disabled`           | `_disabled`            | Makes the element not focusable and ignore all events.                                                                                                                                                                                                                                             | `boolean \\| undefined`                                                                                                           | `false`      |\n| `_hasCounter`         | `_has-counter`         | Shows a character counter for the input element.                                                                                                                                                                                                                                                   | `boolean \\| undefined`                                                                                                           | `false`      |\n| `_hideLabel`          | `_hide-label`          | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                                                                                         | `boolean \\| undefined`                                                                                                           | `false`      |\n| `_hideMsg`            | `_hide-msg`            | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                                                                                                                                                                 | `boolean \\| undefined`                                                                                                           | `false`      |\n| `_hint`               | `_hint`                | Defines the hint text.                                                                                                                                                                                                                                                                             | `string \\| undefined`                                                                                                            | `''`         |\n| `_icons`              | `_icons`               | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                                                                                    | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                          | `undefined`  |\n| `_id`                 | `_id`                  | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element.                                                                                                                                      | `string \\| undefined`                                                                                                            | `undefined`  |\n| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                       | `string`                                                                                                                         | `undefined`  |\n| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                                                                                                                                                                    | `number \\| undefined`                                                                                                            | `undefined`  |\n| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                                                                                                                                                        | `\"hard\" \\| \"soft\" \\| undefined`                                                                                                  | `'hard'`     |\n| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                  | `Omit<AlertProps, \"_label\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined`                                    | `undefined`  |\n| `_name`               | `_name`                | Defines the technical name of an input field.                                                                                                                                                                                                                                                      | `string \\| undefined`                                                                                                            | `undefined`  |\n| `_on`                 | --                     | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                                                                                                                                                          | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined`  |\n| `_placeholder`        | `_placeholder`         | Defines the placeholder for input field. To be shown when there's no value.                                                                                                                                                                                                                        | `string \\| undefined`                                                                                                            | `undefined`  |\n| `_readOnly`           | `_read-only`           | Makes the input element read only.                                                                                                                                                                                                                                                                 | `boolean \\| undefined`                                                                                                           | `false`      |\n| `_required`           | `_required`            | Makes the input element required.                                                                                                                                                                                                                                                                  | `boolean \\| undefined`                                                                                                           | `false`      |\n| `_resize`             | `_resize`              | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize) In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`. | `\"none\" \\| \"vertical\" \\| undefined`                                                                                              | `'vertical'` |\n| `_rows`               | `_rows`                | Maximum number of visible rows of the element.                                                                                                                                                                                                                                                     | `number \\| undefined`                                                                                                            | `undefined`  |\n| `_shortKey`           | `_short-key`           | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                                                                            | `string \\| undefined`                                                                                                            | `undefined`  |\n| `_spellCheck`         | `_spell-check`         | Defines whether the browser should check the spelling and grammar.                                                                                                                                                                                                                                 | `boolean \\| undefined`                                                                                                           | `undefined`  |\n| `_tooltipAlign`       | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                                                                          | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                            | `'top'`      |\n| `_touched`            | `_touched`             | Shows if the input was touched by a user.                                                                                                                                                                                                                                                          | `boolean \\| undefined`                                                                                                           | `false`      |\n| `_value`              | `_value`               | Defines the value of the element.                                                                                                                                                                                                                                                                  | `string \\| undefined`                                                                                                            | `undefined`  |\n\n\n## Methods\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                         |\n| ---- | ----------------------------------- |\n|      | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-textarea\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property              | Attribute              | Description                                                                                                                                                                                                                                                                                        | Type                                                                                                                               | Default      |\n| --------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_accessKey`          | `_access-key`          | Defines the key combination that can be used to trigger or focus the component's interactive element.                                                                                                                                                                                              | `string \\| undefined`                                                                                                              | `undefined`  |\n| `_adjustHeight`       | `_adjust-height`       | Adjusts the height of the element to its content.                                                                                                                                                                                                                                                  | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_disabled`           | `_disabled`            | Makes the element not focusable and ignore all events.                                                                                                                                                                                                                                             | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_hasCounter`         | `_has-counter`         | Shows a character counter for the input element.                                                                                                                                                                                                                                                   | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_hideLabel`          | `_hide-label`          | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                                                                                         | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_hideMsg`            | `_hide-msg`            | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                                                                                                                                                                 | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_hint`               | `_hint`                | Defines the hint text.                                                                                                                                                                                                                                                                             | `string \\| undefined`                                                                                                              | `''`         |\n| `_icons`              | `_icons`               | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).                                                                                                                                                                                                                                    | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }`                            | `undefined`  |\n| `_id`                 | `_id`                  | <span class=\"text-red-500\">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element.                                                                                                                                      | `string \\| undefined`                                                                                                              | `undefined`  |\n| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                       | `string`                                                                                                                           | `undefined`  |\n| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                                                                                                                                                                    | `number \\| undefined`                                                                                                              | `undefined`  |\n| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                                                                                                                                                        | `\"hard\" \\| \"soft\" \\| undefined`                                                                                                    | `'hard'`     |\n| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                  | `Omit<AlertProps, \"_on\" \\| \"_hasCloser\" \\| \"_label\" \\| \"_level\" \\| \"_variant\"> & { _description: string; } \\| string \\| undefined` | `undefined`  |\n| `_name`               | `_name`                | Defines the technical name of an input field.                                                                                                                                                                                                                                                      | `string \\| undefined`                                                                                                              | `undefined`  |\n| `_on`                 | --                     | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                                                                                                                                                          | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined`   | `undefined`  |\n| `_placeholder`        | `_placeholder`         | Defines the placeholder for input field. To be shown when there's no value.                                                                                                                                                                                                                        | `string \\| undefined`                                                                                                              | `undefined`  |\n| `_readOnly`           | `_read-only`           | Makes the input element read only.                                                                                                                                                                                                                                                                 | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_required`           | `_required`            | Makes the input element required.                                                                                                                                                                                                                                                                  | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_resize`             | `_resize`              | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize) In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`. | `\"none\" \\| \"vertical\" \\| undefined`                                                                                                | `'vertical'` |\n| `_rows`               | `_rows`                | Maximum number of visible rows of the element.                                                                                                                                                                                                                                                     | `number \\| undefined`                                                                                                              | `undefined`  |\n| `_shortKey`           | `_short-key`           | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.                                                                                                                                                                                            | `string \\| undefined`                                                                                                              | `undefined`  |\n| `_spellCheck`         | `_spell-check`         | Defines whether the browser should check the spelling and grammar.                                                                                                                                                                                                                                 | `boolean \\| undefined`                                                                                                             | `undefined`  |\n| `_tooltipAlign`       | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                                                                          | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined`                                                                              | `'top'`      |\n| `_touched`            | `_touched`             | Shows if the input was touched by a user.                                                                                                                                                                                                                                                          | `boolean \\| undefined`                                                                                                             | `false`      |\n| `_value`              | `_value`               | Defines the value of the element.                                                                                                                                                                                                                                                                  | `string \\| undefined`                                                                                                              | `undefined`  |\n\n\n## Methods\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `kolFocus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description                         |\n| ---- | ----------------------------------- |\n|      | Die Beschriftung des Eingabefeldes. |\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {
@@ -1717,7 +1821,7 @@
       "group": "spec",
       "name": "toaster",
       "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/toaster.md",
-      "code": "# kol-toast-container\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Methods\n\n### `closeAll(immediate?: boolean) => Promise<void>`\n\nCloses all toasts.\n\n#### Parameters\n\n| Name        | Type      | Description |\n| ----------- | --------- | ----------- |\n| `immediate` | `boolean` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `enqueue(toast: Toast) => Promise<() => void>`\n\nAdds a toast to the queue.\n\n#### Parameters\n\n| Name    | Type                                                                                                                                                                                                                                   | Description |\n| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `toast` | `{ description?: string \\| undefined; render?: ToastRenderFunction \\| undefined; label: string; type: \"error\" \\| \"warning\" \\| \"info\" \\| \"success\" \\| \"default\"; variant?: \"card\" \\| undefined; onClose?: (() => void) \\| undefined; }` |             |\n\n#### Returns\n\nType: `Promise<() => void>`\n\n\n\n\n----------------------------------------------\n\n\n",
+      "code": "# kol-toast-container\n\n\n\n<!-- Auto Generated Below -->\n\n\n> **[DEPRECATED]** Will be removed in the next major version. For more information, please refer to: https://github.com/public-ui/kolibri/issues/8372\n\n## Methods\n\n### `closeAll(immediate?: boolean) => Promise<void>`\n\nCloses all toasts.\n\n#### Parameters\n\n| Name        | Type      | Description |\n| ----------- | --------- | ----------- |\n| `immediate` | `boolean` |             |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `enqueue(toast: Toast) => Promise<() => void>`\n\nAdds a toast to the queue.\n\n#### Parameters\n\n| Name    | Type                                                                                                                                                                                                                                   | Description |\n| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `toast` | `{ description?: string \\| undefined; render?: ToastRenderFunction \\| undefined; label: string; type: \"error\" \\| \"warning\" \\| \"info\" \\| \"success\" \\| \"default\"; variant?: \"card\" \\| undefined; onClose?: (() => void) \\| undefined; }` |             |\n\n#### Returns\n\nType: `Promise<() => void>`\n\n\n\n\n----------------------------------------------\n\n\n",
       "kind": "spec"
     },
     {