@public-ui/mcp 4.3.0-rc.4 β†’ 4.3.0-rc.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,16 +1,16 @@
1
1
  {
2
2
  "metadata": {
3
- "generatedAt": "2026-07-08T09:13:45.272Z",
3
+ "generatedAt": "2026-07-30T09:38:23.708Z",
4
4
  "buildMode": "ci",
5
5
  "counts": {
6
- "total": 326,
6
+ "total": 330,
7
7
  "totalDocs": 61,
8
8
  "totalSpecs": 53,
9
- "totalSamples": 193,
9
+ "totalSamples": 197,
10
10
  "totalScenarios": 19
11
11
  },
12
12
  "repo": {
13
- "commit": "f412fc3b906651785f8d679e7e45918a1c317ce4",
13
+ "commit": "cdef9c986048f7ff7ae455168075b8b5362bb1ad",
14
14
  "branch": "develop",
15
15
  "repoUrl": "https://github.com/public-ui/kolibri"
16
16
  }
@@ -21,7 +21,7 @@
21
21
  "group": "docs",
22
22
  "name": "AGENTS",
23
23
  "path": "AGENTS.md",
24
- "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### SCSS Architecture Guidelines: BEM with Smart Nesting\n\nWhen writing component theme styles, follow these principles for clean, maintainable SCSS:\n\n#### 1. **Flat BEM Structure (Root Level)**\n\nAll BEM modifiers and independent elements belong at **root level** of the mixin. Never nest BEM class names:\n\n```scss\n@mixin kol-alert-theme {\n\t// βœ… All BEM selectors on root (flat)\n\t.kol-alert { ... }\n\t.kol-alert--variant-msg { ... }\n\t.kol-alert--variant-card { ... }\n\t.kol-alert--type-default { ... }\n\t.kol-alert__container { ... }\n\t.kol-alert__heading { ... }\n}\n```\n\n**Why?** BEM classnames are independent selectors. Each class should be predictable and flat.\n\n#### 2. **Contextual Nesting (When Variants Change Element Behavior)**\n\nNest **only when a modifier changes how a child element behaves**. Keep all rules for an element together:\n\n```scss\n.kol-alert__closer {\n\tplace-self: center;\n\n\t.kol-button {\n\t\tborder-radius: 50%;\n\t\twidth: var(--a11y-min-size);\n\t\theight: var(--a11y-min-size);\n\t\tcursor: pointer;\n\n\t\t// βœ… Variant changes button styling - nest here\n\t\t.kol-alert--variant-msg & {\n\t\t\t--text-color: var(--alert-accent-color);\n\t\t}\n\n\t\t.kol-alert--variant-card & {\n\t\t\t--text-color: var(--color-light);\n\t\t}\n\t}\n}\n```\n\n**Rule of thumb**: All rules for `.kol-button` in `.kol-alert__closer` stay in one place. This keeps related styles together and makes maintenance easier.\n\n#### 3. **Never Use `$root` or `@at-root`**\n\n❌ **Outdated pattern (removed):**\n\n```scss\n.kol-alert {\n\t$root: &;\n\t&__closer {\n\t\t@at-root #{$root}--variant-msg & { ... }\n\t}\n}\n```\n\nβœ… **Modern pattern (direct nesting):**\n\n```scss\n.kol-alert__closer {\n\t.kol-button {\n\t\t.kol-alert--variant-msg & { ... }\n\t}\n}\n```\n\nThis is clearer and doesn't require Sass variable gymnastics.\n\n#### 4. **Structure Template**\n\n```scss\n@mixin kol-component-theme {\n\t// 1. Base component (no children)\n\t.kol-component {\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t}\n\n\t// 2. All BEM modifiers at root (flat)\n\t.kol-component--variant-a {\n\t\t...\n\t}\n\n\t.kol-component--type-default {\n\t\t...\n\t}\n\n\t// 3. Elements with contextual nesting for variants\n\t.kol-component__heading {\n\t\tfont-weight: bold;\n\n\t\t.kol-component--variant-a & {\n\t\t\tcolor: red;\n\t\t}\n\t}\n\n\t.kol-component__content {\n\t\tpadding: 1rem;\n\n\t\t.kol-component--variant-a & {\n\t\t\tbackground: white;\n\t\t}\n\t}\n\n\t// 4. Child components with variant context\n\t.kol-component__button {\n\t\t.kol-button {\n\t\t\tcursor: pointer;\n\n\t\t\t.kol-component--variant-a & {\n\t\t\t\t--text-color: var(--accent);\n\t\t\t}\n\t\t}\n\t}\n}\n```\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- **Never use `$root` variables or `@at-root` in component mixins**: All selectors should be explicit. Use direct child/descendant nesting only when a modifier changes element behavior within a specific context.\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`. 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`.\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.\n - ⚠️ **Note**: TypeScript type checking in the lint script can require built artifacts. If you've made source code changes, lint will handle any necessary compilation. Explicit pre-build is typically unnecessary.\n - You can try to automatically fix linting issues with `pnpm lint:eslint --fix`, but this may not resolve all issues.\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- **For SCSS changes**: Always run `pnpm lint:stylelint --fix` (or `pnpm --filter <package> lint:stylelint --fix`) to automatically correct formatting, property order, and selector structure rules before committing. This ensures compliance with BEM structure and style consistency.\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 - ⚠️ **Note**: Test runners (Vitest, Jest, Playwright, etc.) execute an implicit build automatically before running tests. **Do NOT run a separate `pnpm build` beforehand** β€” this wastes time. The test scripts handle compilation and type checking internally.\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 - These also perform implicit builds, so explicit pre-build is unnecessary.\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",
24
+ "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 as well as in component styles) can collide with variables defined\non a host page, and every custom property you declare is implicitly overridable from outside,\nwhether you intended that or not.\n\n**Prefer plain CSS over a custom property.** Before adding a custom property, check whether the\nplatform already gives the consumer a way to control it β€” the standard box model (`width`,\n`height`), inherited properties (`color`, `font-size` via `em`), or relative units (`%`, container\nquery units). A component that simply fills its host (`width: 100%; height: 100%` inside, a sane\ndefault `width`/`height` on `:host`) can be resized with plain CSS, exactly like a native element β€”\nno bespoke API, no documentation burden, nothing to keep in sync. Only reach for a custom property\nwhen the value genuinely cannot be derived this way (e.g. a semantic color token that isn't just\n`currentColor`, or a value with no corresponding native CSS mechanism).\n\n**Rule:** only declare a CSS custom property when it is a deliberate, documented customization\npoint (a `--kol-<component>-<name>` design token). For anything else β€” internal aliases,\nintermediate values, ratios, or derived defaults β€” use a SASS `$variable` instead. SASS variables\nare resolved at build time, can't leak into the global cascade, and can't be overridden from a host\npage, so they can't accidentally become part of the public API.\n\nDo not introduce a second, internal custom property just to make the code more readable:\n\n```scss\n// ❌ Bad: `--color-bar` is an unintended, additional public custom property.\n// It reacts to overrides from a host page exactly like `--kol-progress-color-bar`,\n// even though only the latter was meant to be part of the API.\n.kol-progress {\n\t--color-bar: var(--kol-progress-color-bar, #0075ff);\n\n\t&__bar-progress {\n\t\tfill: var(--color-bar);\n\t}\n}\n```\n\n```scss\n// βœ… Good: the SASS variable holds the default value; the only custom property\n// is `--kol-progress-color-bar`, referenced directly wherever needed.\n$kol-progress-default-color-bar: #0075ff;\n\n.kol-progress {\n\t&__bar-progress {\n\t\tfill: var(--kol-progress-color-bar, #{$kol-progress-default-color-bar});\n\t}\n}\n```\n\nAny further unit conversion or math that doesn't depend on a runtime custom property (e.g. `to-rem()`,\nratios, breakpoints) belongs in SASS, not in an extra layer of `calc()`/custom-property indirection.\n\n`kol-avatar` is an example of preferring plain CSS: instead of a `--kol-avatar-size` custom property,\n`:host` gets a default `width` and an `aspect-ratio: 1`, and the inner element derives its size from the\nhost via container query units (`cqw`/`cqh`) instead of a separate ratio calculation. Consumers resize it\nthe same way they'd resize any block-level element β€” with plain `width`/`height`.\n\nThe avatar must always stay square, even if `width` and `height` end up different (e.g. both are set\nexplicitly to different values), so the inner element uses `max(100cqw, 100cqh)` for both its own `width`\nand `height` β€” the larger of the two wins, and `:host` centers it (`align-items`/`justify-content`), so it\nmay visually extend beyond the host on the smaller axis. Since CSS can't distinguish \"our default\" from\n\"an explicit author value\" on two independent properties, only setting `width` reliably resizes the avatar\nbelow its 100px default; setting only `height` below 100px does not shrink it, because our own default\n`width` is still in effect and wins the `max()`. This is a deliberate, documented trade-off, not a bug β€”\nachieving full symmetry would require either a custom property or JavaScript, both of which cost more\nthan the trade-off is worth.\n\n### SCSS Architecture Guidelines: BEM with Smart Nesting\n\nWhen writing component theme styles, follow these principles for clean, maintainable SCSS:\n\n#### 1. **Flat BEM Structure (Root Level)**\n\nAll BEM modifiers and independent elements belong at **root level** of the mixin. Never nest BEM class names:\n\n```scss\n@mixin kol-alert-theme {\n\t// βœ… All BEM selectors on root (flat)\n\t.kol-alert { ... }\n\t.kol-alert--variant-msg { ... }\n\t.kol-alert--variant-card { ... }\n\t.kol-alert--type-default { ... }\n\t.kol-alert__container { ... }\n\t.kol-alert__heading { ... }\n}\n```\n\n**Why?** BEM classnames are independent selectors. Each class should be predictable and flat.\n\n#### 2. **Contextual Nesting (When Variants Change Element Behavior)**\n\nNest **only when a modifier changes how a child element behaves**. Keep all rules for an element together:\n\n```scss\n.kol-alert__closer {\n\tplace-self: center;\n\n\t.kol-button {\n\t\tborder-radius: 50%;\n\t\twidth: var(--a11y-min-size);\n\t\theight: var(--a11y-min-size);\n\t\tcursor: pointer;\n\n\t\t// βœ… Variant changes button styling - nest here\n\t\t.kol-alert--variant-msg & {\n\t\t\t--text-color: var(--alert-accent-color);\n\t\t}\n\n\t\t.kol-alert--variant-card & {\n\t\t\t--text-color: var(--color-light);\n\t\t}\n\t}\n}\n```\n\n**Rule of thumb**: All rules for `.kol-button` in `.kol-alert__closer` stay in one place. This keeps related styles together and makes maintenance easier.\n\n#### 3. **Never Use `$root` or `@at-root`**\n\n❌ **Outdated pattern (removed):**\n\n```scss\n.kol-alert {\n\t$root: &;\n\t&__closer {\n\t\t@at-root #{$root}--variant-msg & { ... }\n\t}\n}\n```\n\nβœ… **Modern pattern (direct nesting):**\n\n```scss\n.kol-alert__closer {\n\t.kol-button {\n\t\t.kol-alert--variant-msg & { ... }\n\t}\n}\n```\n\nThis is clearer and doesn't require Sass variable gymnastics.\n\n#### 4. **Structure Template**\n\n```scss\n@mixin kol-component-theme {\n\t// 1. Base component (no children)\n\t.kol-component {\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t}\n\n\t// 2. All BEM modifiers at root (flat)\n\t.kol-component--variant-a {\n\t\t...\n\t}\n\n\t.kol-component--type-default {\n\t\t...\n\t}\n\n\t// 3. Elements with contextual nesting for variants\n\t.kol-component__heading {\n\t\tfont-weight: bold;\n\n\t\t.kol-component--variant-a & {\n\t\t\tcolor: red;\n\t\t}\n\t}\n\n\t.kol-component__content {\n\t\tpadding: 1rem;\n\n\t\t.kol-component--variant-a & {\n\t\t\tbackground: white;\n\t\t}\n\t}\n\n\t// 4. Child components with variant context\n\t.kol-component__button {\n\t\t.kol-button {\n\t\t\tcursor: pointer;\n\n\t\t\t.kol-component--variant-a & {\n\t\t\t\t--text-color: var(--accent);\n\t\t\t}\n\t\t}\n\t}\n}\n```\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- **Never use `$root` variables or `@at-root` in component mixins**: All selectors should be explicit. Use direct child/descendant nesting only when a modifier changes element behavior within a specific context.\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`. 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`.\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.\n - ⚠️ **Note**: TypeScript type checking in the lint script can require built artifacts. If you've made source code changes, lint will handle any necessary compilation. Explicit pre-build is typically unnecessary.\n - You can try to automatically fix linting issues with `pnpm lint:eslint --fix`, but this may not resolve all issues.\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- **For SCSS changes**: Always run `pnpm lint:stylelint --fix` (or `pnpm --filter <package> lint:stylelint --fix`) to automatically correct formatting, property order, and selector structure rules before committing. This ensures compliance with BEM structure and style consistency.\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 - ⚠️ **Note**: Test runners (Vitest, Jest, Playwright, etc.) execute an implicit build automatically before running tests. **Do NOT run a separate `pnpm build` beforehand** β€” this wastes time. The test scripts handle compilation and type checking internally.\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 - These also perform implicit builds, so explicit pre-build is unnecessary.\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",
25
25
  "kind": "doc"
26
26
  },
27
27
  {
@@ -341,7 +341,7 @@
341
341
  "group": "docs",
342
342
  "name": "CVE_OVERVIEW",
343
343
  "path": "docs/CVE_OVERVIEW.md",
344
- "code": "# CVE Overview\n\n> For more security information, see [SECURITY.md](./SECURITY.md)\n\n## 1. Production Dependencies\n\n### Summary\n\n| Severity | v4 | v3 | v2 | v1 |\n| -------- | --: | --: | --: | --: |\n| critical | 0 | 0 | 0 | 0 |\n| high | 0 | 0 | 0 | 4 |\n| moderate | 0 | 0 | 0 | 3 |\n| low | 0 | 0 | 0 | 0 |\n| info | 0 | 0 | 0 | 0 |\n| unknown | 0 | 0 | 0 | 0 |\n\n### Vulnerabilities\n\n| Package | Severity | CVE | Affected Versions | Description |\n| -------------------- | -------- | ------------------- | ----------------- | --------------------------------------------------------------------------------- |\n| lodash.pick | high | CVE-2020-8203 | v1 | Prototype Pollution in lodash |\n| minimatch | high | CVE-2026-27903 | v1 | minimatch has ReDoS: matchOne() combinatorial backtracking via multiple non-adja |\n| minimatch | high | CVE-2026-27904 | v1 | minimatch ReDoS: nested \\*() extglobs generate catastrophically backtracking regu |\n| serialize-javascript | high | GHSA-5c6j-r48x-rmvq | v1 | Serialize JavaScript is Vulnerable to RCE via RegExp.flags and Date.prototype.to |\n| brace-expansion | moderate | CVE-2026-45149 | v1 | brace-expansion: Large numeric range defeats documented `max` DoS protection |\n| serialize-javascript | moderate | CVE-2026-34043 | v1 | Serialize JavaScript has CPU Exhaustion Denial of Service via crafted array-like |\n| ws | moderate | CVE-2026-45736 | v1 | ws: Uninitialized memory disclosure |\n\n## 2. All Dependencies\n\n### Summary\n\n| Severity | v4 | v3 | v2 | v1 |\n| -------- | --: | --: | --: | --: |\n| critical | 0 | 5 | 5 | 3 |\n| high | 3 | 35 | 53 | 30 |\n| moderate | 11 | 30 | 54 | 10 |\n| low | 2 | 5 | 11 | 1 |\n| info | 0 | 0 | 0 | 0 |\n| unknown | 0 | 0 | 0 | 0 |\n\n### Vulnerabilities\n\n| Package | Severity | CVE | Affected Versions | Description |\n| ---------------------------------------- | -------- | ------------------- | ----------------- | ---------------------------------------------------------------------------------- |\n| basic-ftp | critical | CVE-2026-27699 | v3, v2 | Basic FTP has Path Traversal Vulnerability in its downloadToDir()Β method |\n| fast-xml-parser | critical | CVE-2026-25896 | v3, v2 | fast-xml-parser has an entity encoding bypass via regex injection in DOCTYPE ent |\n| handlebars | critical | CVE-2026-33937 | v3, v2, v1 | Handlebars.js has JavaScript Injection via AST Type Confusion |\n| locutus | critical | CVE-2026-25521 | v3, v2, v1 | locutus is vulnerable to Prototype Pollution |\n| locutus | critical | CVE-2026-32304 | v3, v2, v1 | Locutus vulnerable to RCE via unsanitized input in create_function() |\n| @angular/common | high | CVE-2025-66035 | v1 | Angular is Vulnerable to XSRF Token Leakage via Protocol-Relative URLs in Angula |\n| @angular/compiler | high | CVE-2025-66412 | v1 | Angular Stored XSS Vulnerability via SVG Animation, SVG URL and MathML Attribute |\n| @angular/compiler | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| @angular/compiler | high | CVE-2026-32635 | v1 | Angular vulnerable to XSS in i18n attribute bindings |\n| @angular/core | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| @angular/core | high | CVE-2026-27970 | v1 | Angular i18n vulnerable to Cross-Site Scripting |\n| @angular/core | high | CVE-2026-32635 | v1 | Angular vulnerable to XSS in i18n attribute bindings |\n| @babel/plugin-transform-modules-systemjs | high | CVE-2026-44728 | v4, v2, v1 | @babel/plugin-transform-modules-systemjs generates arbitrary code when compiling |\n| @hono/node-server | high | CVE-2026-29087 | v2 | @hono/node-server has authorization bypass for protected static paths via encode |\n| axios | high | CVE-2026-42043 | v3, v2 | Axios: Incomplete Fix for CVE-2025-62718 β€” NO_PROXY Protection Bypassed via RFC |\n| axios | high | CVE-2026-42033 | v3, v2 | Axios: Prototype Pollution Gadgets - Response Tampering, Data Exfiltration, and |\n| axios | high | CVE-2026-42035 | v3, v2 | Axios: Header Injection via Prototype Pollution |\n| axios | high | CVE-2026-25639 | v3, v2 | Axios is Vulnerable to Denial of Service via **proto** Key in mergeConfig |\n| axios | high | CVE-2026-42264 | v3, v2 | Axios has prototype pollution read-side gadgets in HTTP adapter that allow crede |\n| basic-ftp | high | GHSA-6v7q-wjvx-w8wg | v3, v2 | basic-ftp: Incomplete CRLF Injection Protection Allows Arbitrary FTP Command Exe |\n| basic-ftp | high | CVE-2026-41324 | v3, v2 | basic-ftp vulnerable to denial of service via unbounded memory consumption in Cl |\n| basic-ftp | high | CVE-2026-44240 | v3, v2 | basic-ftp allows a malicious FTP server to cause client-side denial of service v |\n| braces | high | CVE-2024-4068 | v3, v2, v1 | Uncontrolled resource consumption in braces |\n| devalue | high | CVE-2026-42570 | v4 | Svelte devalue: DoS via sparse array deserialization |\n| express-rate-limit | high | CVE-2026-30827 | v2 | express-rate-limit: IPv4-mapped IPv6 addresses bypass per-client rate limiting o |\n| fast-uri | high | CVE-2026-6321 | v2 | fast-uri vulnerable to path traversal via percent-encoded dot segments |\n| fast-uri | high | CVE-2026-6322 | v2 | fast-uri vulnerable to host confusion via percent-encoded authority delimiters |\n| fast-xml-parser | high | CVE-2026-25128 | v3, v2 | fast-xml-parser has RangeError DoS Numeric Entities Bug |\n| fast-xml-parser | high | CVE-2026-26278 | v3, v2 | fast-xml-parser affected by DoS through entity expansion in DOCTYPE (no expansio |\n| fast-xml-parser | high | CVE-2026-33036 | v3, v2 | fast-xml-parser affected by numeric entity expansion bypassing all entity expans |\n| flatted | high | CVE-2026-32141 | v3, v2 | flatted vulnerable to unbounded recursion DoS in parse() revive phase |\n| flatted | high | CVE-2026-33228 | v3, v2 | Prototype Pollution via parse() in NodeJS flatted |\n| handlebars | high | CVE-2026-33938 | v3, v2, v1 | Handlebars.js has JavaScript Injection via AST Type Confusion by tampering @part |\n| handlebars | high | CVE-2026-33940 | v3, v2, v1 | Handlebars.js has JavaScript Injection via AST Type Confusion when passing an ob |\n| handlebars | high | CVE-2026-33939 | v3, v2, v1 | Handlebars.js has Denial of Service via Malformed Decorator Syntax in Template C |\n| handlebars | high | CVE-2026-33941 | v3, v2, v1 | Handlebars.js has JavaScript Injection in CLI Precompiler via Unescaped Names an |\n| hono | high | CVE-2026-29045 | v2 | Hono vulnerable to arbitrary file access via serveStatic vulnerability |\n| immutable | high | CVE-2026-29063 | v2 | Immutable is vulnerable to Prototype Pollution |\n| locutus | high | CVE-2026-29091 | v3, v2, v1 | locutus call_user_func_array vulnerable to Remote Code Execution (RCE) due to Co |\n| lodash | high | CVE-2026-4800 | v3 | lodash vulnerable to Code Injection via `_.template` imports key names |\n| lodash.pick | high | CVE-2020-8203 | v2, v1 | Prototype Pollution in lodash |\n| minimatch | high | CVE-2026-27903 | v3, v2, v1 | minimatch has ReDoS: matchOne() combinatorial backtracking via multiple non-adja |\n| minimatch | high | CVE-2026-27904 | v3, v2, v1 | minimatch ReDoS: nested \\*() extglobs generate catastrophically backtracking regu |\n| minimatch | high | CVE-2026-26996 | v3, v2 | minimatch has a ReDoS via repeated wildcards with non-matching literal in patter |\n| node-forge | high | CVE-2026-33896 | v2 | Forge has a basicConstraints bypass in its certificate chain verification (RFC 5 |\n| node-forge | high | CVE-2026-33895 | v2 | Forge has signature forgery in Ed25519 due to missing S > L check |\n| node-forge | high | CVE-2026-33891 | v2 | Forge has Denial of Service via Infinite Loop in BigInteger.modInverse() with Ze |\n| node-forge | high | CVE-2026-33894 | v2 | Forge has signature forgery in RSA-PKCS due to ASN.1 extra field |\n| path-to-regexp | high | CVE-2026-4867 | v3, v2 | path-to-regexp vulnerable to Regular Expression Denial of Service via multiple r |\n| path-to-regexp | high | CVE-2026-4926 | v2 | path-to-regexp vulnerable to Denial of Service via sequential optional groups |\n| rollup | high | CVE-2026-27606 | v1 | Rollup 4 has Arbitrary File Write via Path Traversal |\n| semver | high | CVE-2022-25883 | v2 | semver vulnerable to Regular Expression Denial of Service |\n| serialize-javascript | high | GHSA-5c6j-r48x-rmvq | v4, v3, v2, v1 | Serialize JavaScript is Vulnerable to RCE via RegExp.flags and Date.prototype.to |\n| socket.io-parser | high | CVE-2026-33151 | v3, v2 | socket.io allows an unbounded number of binary attachments |\n| svgo | high | CVE-2026-29074 | v3, v2, v1 | SVGO DoS through entity expansion in DOCTYPE (Billion Laughs) |\n| tar | high | CVE-2026-24842 | v1 | node-tar Vulnerable to Arbitrary File Creation/Overwrite via Hardlink Path Trave |\n| tar | high | CVE-2026-23745 | v1 | node-tar is Vulnerable to Arbitrary File Overwrite and Symlink Poisoning via Ins |\n| tar | high | CVE-2026-26960 | v1 | Arbitrary File Read/Write via Hardlink Target Escape Through Symlink Chain in no |\n| tar | high | CVE-2026-29786 | v1 | tar has Hardlink Path Traversal via Drive-Relative Linkpath |\n| tar | high | CVE-2026-31802 | v1 | node-tar Symlink Path Traversal via Drive-Relative Linkpath |\n| tar | high | CVE-2026-23950 | v1 | Race Condition in node-tar Path Reservations via Unicode Ligature Collisions on |\n| undici | high | CVE-2026-1528 | v3, v2 | Undici: Malicious WebSocket 64-bit length overflows parser and crashes the clien |\n| undici | high | CVE-2026-1526 | v3, v2 | Undici has Unbounded Memory Consumption in WebSocket permessage-deflate Decompre |\n| undici | high | CVE-2026-2229 | v3, v2 | Undici has Unhandled Exception in WebSocket Client Due to Invalid server_max_win |\n| vite | high | CVE-2026-39364 | v1 | Vite: `server.fs.deny` bypassed with queries |\n| vite | high | CVE-2026-39363 | v1 | Vite Vulnerable to Arbitrary File Read via Vite Dev Server WebSocket |\n| @hono/node-server | moderate | CVE-2026-39406 | v2 | @hono/node-server: Middleware bypass via repeated slashes in serveStatic |\n| ajv | moderate | CVE-2025-69873 | v3, v2 | ajv has ReDoS when using `$data` option |\n| axios | moderate | CVE-2025-62718 | v3, v2 | Axios has a NO_PROXY Hostname Normalization Bypass that Leads to SSRF |\n| axios | moderate | CVE-2026-40175 | v3, v2 | Axios has Unrestricted Cloud Metadata Exfiltration via Header Injection Chain |\n| axios | moderate | CVE-2026-42041 | v3, v2 | Axios: Authentication Bypass via Prototype Pollution Gadget in `validateStatus` |\n| axios | moderate | CVE-2026-42044 | v3, v2 | Axios: Invisible JSON Response Tampering via Prototype Pollution Gadget in `pars |\n| axios | moderate | CVE-2026-42037 | v3, v2 | Axios: CRLF Injection in multipart/form-data body via unsanitized blob.type in f |\n| axios | moderate | CVE-2026-42038 | v3, v2 | Axios: no_proxy bypass via IP alias allows SSRF |\n| axios | moderate | CVE-2026-42039 | v3, v2 | Axios: unbounded recursion in toFormData causes DoS via deeply nested request da |\n| axios | moderate | CVE-2026-42034 | v3, v2 | Axios' HTTP adapter-streamed uploads bypass maxBodyLength when maxRedirects: 0 |\n| axios | moderate | CVE-2026-42036 | v3, v2 | Axios: HTTP adapter streamed responses bypass maxContentLength |\n| axios | moderate | CVE-2026-42042 | v3, v2 | Axios: XSRF Token Cross-Origin Leakage via Prototype Pollution Gadget in `withXS |\n| brace-expansion | moderate | CVE-2026-45149 | v3, v2, v1 | brace-expansion: Large numeric range defeats documented `max` DoS protection |\n| brace-expansion | moderate | CVE-2026-33750 | v3, v2 | brace-expansion: Zero-step sequence causes process hang and memory exhaustion |\n| ejs | moderate | CVE-2024-33883 | v2 | ejs lacks certain pollution protection |\n| esbuild | moderate | GHSA-67mh-4wv8-2f99 | v2 | esbuild enables any website to send any requests to the development server and r |\n| fast-xml-parser | moderate | CVE-2026-33349 | v3, v2 | Entity Expansion Limits Bypassed When Set to Zero Due to JavaScript Falsy Evalua |\n| fast-xml-parser | moderate | CVE-2026-41650 | v3, v2 | fast-xml-parser XMLBuilder: XML Comment and CDATA Injection via Unescaped Delimi |\n| file-type | moderate | CVE-2026-31808 | v4 | file-type affected by infinite loop in ASF parser on malformed input with zero-s |\n| handlebars | moderate | CVE-2026-33916 | v3, v2, v1 | Handlebars.js has Prototype Pollution Leading to XSS through Partial Template In |\n| handlebars | moderate | GHSA-7rx3-28cr-v5wh | v3, v2, v1 | Handlebars.js has a Prototype Method Access Control Gap via Missing \\_\\_lookupSett |\n| hono | moderate | CVE-2026-29086 | v2 | Hono Vulnerable to Cookie Attribute Injection via Unsanitized domain and path in |\n| hono | moderate | CVE-2026-29085 | v2 | Hono Vulnerable to SSE Control Field Injection via CR/LF in writeSSE() |\n| hono | moderate | GHSA-v8w9-8mx6-g223 | v2 | Hono vulnerable to Prototype Pollution possible through **proto** key allowed in |\n| hono | moderate | GHSA-26pp-8wgv-hjvm | v2 | Hono missing validation of cookie name on write path in setCookie() |\n| hono | moderate | CVE-2026-39410 | v2 | Hono: Non-breaking space prefix bypass in cookie name handling in getCookie() |\n| hono | moderate | CVE-2026-39408 | v2 | Hono: Path traversal in toSSG() allows writing files outside the output director |\n| hono | moderate | CVE-2026-39407 | v2 | Hono: Middleware bypass via repeated slashes in serveStatic |\n| hono | moderate | GHSA-458j-xx4x-4375 | v2 | hono Improperly Handles JSX Attribute Names Allows HTML Injection in hono/jsx SS |\n| hono | moderate | CVE-2026-39409 | v2 | Hono has incorrect IP matching in ipRestriction() for IPv4-mapped IPv6 addresses |\n| hono | moderate | CVE-2026-44458 | v2 | Hono has CSS Declaration Injection via Style Object Values in JSX SSR |\n| hono | moderate | CVE-2026-44457 | v2 | Hono's Cache Middleware ignores Vary: Authorization / Vary: Cookie leading to cr |\n| hono | moderate | CVE-2026-44456 | v2 | Hono: bodyLimit() can be bypassed for chunked / unknown-length requests |\n| hono | moderate | CVE-2026-44455 | v2 | hono/jsx has Unvalidated JSX Tag Names that May Allow HTML Injection |\n| ip-address | moderate | CVE-2026-42338 | v4, v2 | ip-address has XSS in Address6 HTML-emitting methods |\n| js-yaml | moderate | CVE-2025-64718 | v2 | js-yaml has prototype pollution in merge (<<) |\n| locutus | moderate | CVE-2026-33993 | v3, v2, v1 | Locutus has Prototype Pollution via **proto** Key Injection in unserialize() |\n| lodash | moderate | CVE-2026-2950 | v3 | lodash vulnerable to Prototype Pollution via array path bypass in `_.unset` and |\n| micromatch | moderate | CVE-2024-4067 | v3, v2, v1 | Regular Expression Denial of Service (ReDoS) in micromatch |\n| nanoid | moderate | CVE-2024-55565 | v2 | Predictable results in nanoid generation when given non-integer values |\n| path-to-regexp | moderate | CVE-2026-4923 | v2 | path-to-regexp vulnerable to Regular Expression Denial of Service via multiple w |\n| postcss | moderate | CVE-2026-41305 | v4, v3, v2 | PostCSS has XSS via Unescaped </style> in its CSS Stringify Output |\n| qs | moderate | CVE-2025-15284 | v2 | qs's arrayLimit bypass in its bracket notation allows DoS via memory exhaustion |\n| serialize-javascript | moderate | CVE-2026-34043 | v4, v3, v2, v1 | Serialize JavaScript has CPU Exhaustion Denial of Service via crafted array-like |\n| serialize-javascript | moderate | CVE-2024-11831 | v2 | Cross-site Scripting (XSS) in serialize-javascript |\n| smol-toml | moderate | GHSA-v3rj-xjv7-4jmq | v3, v2, v1 | smol-toml: Denial of Service via TOML documents containing thousands of consecut |\n| svelte | moderate | CVE-2026-42599 | v4 | Svelte SSR vulnerable to cross-site scripting via spread attributes |\n| svelte | moderate | GHSA-f3cj-j4f6-wq85 | v4 | Svelte: SSR XSS via Insecure Promise Serialization in hydratable |\n| svelte | moderate | CVE-2026-42573 | v4 | Svelte Vulnerable to XSS via DOM Clobbering of Internal Framework State |\n| svelte | moderate | CVE-2026-42567 | v4 | Svelte: ReDoS in `<svelte:element>` Tag Validation |\n| undici | moderate | CVE-2026-1525 | v3, v2 | Undici has an HTTP Request/Response Smuggling issue |\n| undici | moderate | CVE-2026-1527 | v3, v2 | Undici has CRLF Injection in undici via `upgrade` option |\n| vite | moderate | CVE-2026-39365 | v1 | Vite Vulnerable to Path Traversal in Optimized Deps `.map` Handling |\n| webpack | moderate | CVE-2024-43788 | v2 | Webpack's AutoPublicPathRuntimeModule has a DOM Clobbering Gadget that leads to |\n| webpack-dev-server | moderate | CVE-2025-30360 | v2 | webpack-dev-server users' source code may be stolen when they access a malicious |\n| webpack-dev-server | moderate | CVE-2025-30359 | v2 | webpack-dev-server users' source code may be stolen when they access a malicious |\n| webpack-dev-server | moderate | CVE-2026-6402 | v4, v3, v2 | webpack-dev-server vulnerable to cross-origin source code exposure on non-HTTPS |\n| ws | moderate | CVE-2026-45736 | v4, v3, v2, v1 | ws: Uninitialized memory disclosure |\n| yaml | moderate | CVE-2026-33532 | v4, v3, v2, v1 | yaml is vulnerable to Stack Overflow via deeply nested YAML collections |\n| @tootallnate/once | low | CVE-2026-3449 | v3, v2 | @tootallnate/once vulnerable to Incorrect Control Flow Scoping |\n| axios | low | CVE-2026-42040 | v3, v2 | Axios: Null Byte Injection via Reverse-Encoding in AxiosURLSearchParams |\n| diff | low | CVE-2026-24001 | v4, v3, v2 | jsdiff has a Denial of Service vulnerability in parsePatch and applyPatch |\n| fast-xml-parser | low | CVE-2026-27942 | v3, v2 | fast-xml-parser has stack overflow in XMLBuilder with preserveOrder |\n| handlebars | low | GHSA-442j-39wm-28r2 | v3, v2, v1 | Handlebars.js has a Property Access Validation Bypass in container.lookup |\n| hono | low | GHSA-gq3j-xvxp-8hrf | v2 | Hono added timing comparison hardening in basicAuth and bearerAuth |\n| hono | low | CVE-2026-44459 | v2 | Hono has improper validation of NumericDate claims (exp, nbf, iat) in JWT verify |\n| qs | low | CVE-2026-2391 | v2 | qs's arrayLimit bypass in comma parsing allows denial of service |\n| tmp | low | CVE-2025-54798 | v4 | tmp allows arbitrary temporary file / directory write via symbolic link `dir` pa |\n| webpack | low | CVE-2025-68458 | v2 | webpack buildHttp: allowedUris allow-list bypass via URL userinfo (@) leading to |\n| webpack | low | CVE-2025-68157 | v2 | webpack buildHttp HttpUriPlugin allowedUris bypass via HTTP redirects β†’ SSRF + c |\n",
344
+ "code": "# CVE Overview\n\n> For more security information, see [SECURITY.md](./SECURITY.md)\n\n## 1. Production Dependencies\n\n### Summary\n\n| Severity | v4 | v3 | v2 | v1 |\n| -------- | --: | --: | --: | --: |\n| critical | 0 | 0 | 1 | 0 |\n| high | 1 | 8 | 6 | 8 |\n| moderate | 0 | 6 | 0 | 4 |\n| low | 0 | 1 | 0 | 0 |\n| info | 0 | 0 | 0 | 0 |\n| unknown | 0 | 0 | 0 | 0 |\n\n### Vulnerabilities\n\n| Package | Severity | CVE | Affected Versions | Description |\n| -------------------- | -------- | ------------------- | ----------------- | -------------------------------------------------------------------------------- |\n| seroval | critical | CVE-2026-59940 | v2 | seroval: `seroval.fromJSON()` Promise resolver type confusion invokes attacker-c |\n| brace-expansion | high | CVE-2026-13149 | v1 | brace-expansion: DoS via exponential-time expansion of consecutive non-expanding |\n| brace-expansion | high | CVE-2026-14257 | v4, v1 | brace-expansion: DoS via unbounded expansion length causing an out-of-memory pro |\n| fast-uri | high | CVE-2026-16221 | v3 | fast-uri vulnerable to host confusion via literal backslash authority delimiter |\n| fast-uri | high | CVE-2026-13676 | v3 | fast-uri vulnerable to host confusion via failed IDN canonicalization |\n| find-my-way | high | CVE-2026-47219 | v3 | find-my-way: DDoS with HTTP2 |\n| immutable | high | CVE-2026-59879 | v3, v2, v1 | Immutable.js `List` 32-bit trie overflow β†’ unrecoverable DoS |\n| immutable | high | CVE-2026-59880 | v3, v2, v1 | Immutabl: Hash-collision algorithmic complexity denial of service in Immutable.M |\n| linkify-it | high | CVE-2026-59887 | v3, v2 | linkify-it: Quadratic-complexity DoS via the `mailto:` validator scan-loop on at |\n| lodash.pick | high | CVE-2020-8203 | v1 | Prototype Pollution in lodash |\n| minimatch | high | CVE-2026-27903 | v1 | minimatch has ReDoS: matchOne() combinatorial backtracking via multiple non-adja |\n| minimatch | high | CVE-2026-27904 | v1 | minimatch ReDoS: nested *() extglobs generate catastrophically backtracking regu |\n| postcss | high | GHSA-r28c-9q8g-f849 | v3, v2 | PostCSS: Path Traversal in Previous Source Map Auto-Loading (sourceMappingURL) l |\n| react-router | high | GHSA-qwww-vcr4-c8h2 | v3, v2 | React Router: RSC Mode CSRF Bypass Allows Action Execution Before 400 Response |\n| serialize-javascript | high | GHSA-5c6j-r48x-rmvq | v1 | Serialize JavaScript is Vulnerable to RCE via RegExp.flags and Date.prototype.to |\n| shell-quote | high | CVE-2026-13311 | v2 | shell-quote: Quadratic-complexity Denial of Service in `parse()` (CWE-407) |\n| @hono/node-server | moderate | GHSA-frvp-7c67-39w9 | v3 | Node.js Adapter for Hono: Path traversal in `serve-static` on Windows via encode |\n| brace-expansion | moderate | CVE-2026-45149 | v1 | brace-expansion: Large numeric range defeats documented `max` DoS protection |\n| hono | moderate | CVE-2026-59897 | v3 | Hono: API Gateway v1 adapter can drop a distinct repeated request header value d |\n| hono | moderate | CVE-2026-59896 | v3 | hono/jsx does not isolate context per request, leading to cross-request data dis |\n| hono | moderate | CVE-2026-59895 | v3 | Hono: Server-Side XSS via JSX Escaping Bypass in cx() Utility |\n| protobufjs | moderate | CVE-2026-59876 | v3 | protobufjs: Text Format string map parsing can mutate returned map object protot |\n| protobufjs | moderate | CVE-2026-59877 | v3 | protobufjs: Denial of Service via infinite loop in .proto option parsing |\n| qs | moderate | CVE-2026-8723 | v1 | qs has a remotely triggerable DoS: qs.stringify crashes with TypeError on null/u |\n| react-router-dom | moderate | CVE-2026-53668 | v1 | React Router: Open redirect leading to XSS |\n| serialize-javascript | moderate | CVE-2026-34043 | v1 | Serialize JavaScript has CPU Exhaustion Denial of Service via crafted array-like |\n| body-parser | low | CVE-2026-12590 | v3 | body-parser vulnerable to denial of service when invalid limit value silently di |\n\n## 2. All Dependencies\n\n### Summary\n\n| Severity | v4 | v3 | v2 | v1 |\n| -------- | --: | --: | --: | --: |\n| critical | 3 | 9 | 8 | 5 |\n| high | 23 | 77 | 96 | 45 |\n| moderate | 40 | 61 | 92 | 22 |\n| low | 6 | 12 | 18 | 3 |\n| info | 0 | 0 | 0 | 0 |\n| unknown | 0 | 0 | 0 | 0 |\n\n### Vulnerabilities\n\n| Package | Severity | CVE | Affected Versions | Description |\n| --------------------- | -------- | ------------------- | ----------------- | -------------------------------------------------------------------------------- |\n| basic-ftp | critical | CVE-2026-27699 | v3, v2 | Basic FTP has Path Traversal Vulnerability in its downloadToDir()Β method |\n| fast-xml-parser | critical | CVE-2026-25896 | v3, v2 | fast-xml-parser has an entity encoding bypass via regex injection in DOCTYPE ent |\n| handlebars | critical | CVE-2026-33937 | v3, v2, v1 | Handlebars.js has JavaScript Injection via AST Type Confusion |\n| locutus | critical | CVE-2026-25521 | v3, v2, v1 | locutus is vulnerable to Prototype Pollution |\n| locutus | critical | CVE-2026-32304 | v3, v2, v1 | Locutus vulnerable to RCE via unsanitized input in create_function() |\n| seroval | critical | CVE-2026-59940 | v4, v3, v2, v1 | seroval: `seroval.fromJSON()` Promise resolver type confusion invokes attacker-c |\n| shell-quote | critical | CVE-2026-9277 | v3 | shell-quote quote() does not escape newlines in object .op values |\n| tar | critical | CVE-2026-59873 | v4, v3, v2, v1 | node-tar: Decompression/parse DoS via unlimited input |\n| websocket-driver | critical | CVE-2026-54466 | v4, v3, v2 | websocket-driver: Message corruption via abuse of protocol length headers |\n| @angular/common | high | CVE-2025-66035 | v1 | Angular is Vulnerable to XSRF Token Leakage via Protocol-Relative URLs in Angula |\n| @angular/common | high | CVE-2026-54268 | v4, v3, v2, v1 | @angular/common: Denial of Service (DoS) via OOM in Date Formatting (formatDate) |\n| @angular/common | high | CVE-2026-54266 | v4, v3, v2, v1 | @angular/common: Weak 32-Bit Cache Key Hashing in `HttpTransferCache` Leading to |\n| @angular/common | high | CVE-2026-50171 | v1 | @angular/common: Denial of Service (DoS) via OOM in Number Formatting (digitsInf |\n| @angular/common | high | CVE-2026-50170 | v1 | @angular/common: Information Leak via Default Caching of Credentialed Requests i |\n| @angular/compiler | high | CVE-2026-32635 | v1 | Angular vulnerable to XSS in i18n attribute bindings |\n| @angular/compiler | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| @angular/compiler | high | CVE-2025-66412 | v1 | Angular Stored XSS Vulnerability via SVG Animation, SVG URL and MathML Attribute |\n| @angular/core | high | CVE-2026-27970 | v1 | Angular i18n vulnerable to Cross-Site Scripting |\n| @angular/core | high | CVE-2026-32635 | v1 | Angular vulnerable to XSS in i18n attribute bindings |\n| @angular/core | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| @angular/core | high | CVE-2026-54267 | v4, v3, v2, v1 | Angular Client Hydration DOM Clobbering & Response-Cache Poisoning |\n| @hono/node-server | high | CVE-2026-29087 | v2 | @hono/node-server has authorization bypass for protected static paths via encode |\n| adm-zip | high | CVE-2026-39244 | v4 | adm-zip: Crafted ZIP file triggers 4GB memory allocation |\n| axios | high | CVE-2026-42043 | v3, v2 | Axios: Incomplete Fix for CVE-2025-62718 β€” NO_PROXY Protection Bypassed via RFC |\n| axios | high | CVE-2026-42033 | v3, v2 | Axios: Prototype Pollution Gadgets - Response Tampering, Data Exfiltration, and |\n| axios | high | CVE-2026-42035 | v3, v2 | Axios: Header Injection via Prototype Pollution |\n| axios | high | CVE-2026-25639 | v3, v2 | Axios is Vulnerable to Denial of Service via **proto** Key in mergeConfig |\n| axios | high | CVE-2026-42264 | v3, v2 | Axios has prototype pollution read-side gadgets in HTTP adapter that allow crede |\n| axios | high | CVE-2026-44496 | v3, v2 | Axios: Regular Expression Denial of Service (ReDoS) via Cookie Name Injection |\n| axios | high | CVE-2026-44488 | v3, v2 | Allocation of Resources Without Limits or Throttling in Axios |\n| axios | high | CVE-2026-44487 | v3, v2 | Axios: Proxy-Authorization Credential Leak to Origin Server Across HTTP-to-HTTPS |\n| axios | high | CVE-2026-44486 | v3, v2 | Axios: Proxy-Authorization header leaks to redirect target when proxy is re-eval |\n| axios | high | CVE-2026-44495 | v3, v2 | axios Vulnerable to Credential Theft and Response Hijacking via Prototype Pollut |\n| axios | high | CVE-2026-44494 | v3, v2 | axios Vulnerable to Full Man-in-the-Middle via Prototype Pollution Gadget in `co |\n| axios | high | GHSA-gcfj-64vw-6mp9 | v4 | Axios Node HTTP adapter can use an inherited proxy after interceptor config clon |\n| basic-ftp | high | GHSA-6v7q-wjvx-w8wg | v3, v2 | basic-ftp: Incomplete CRLF Injection Protection Allows Arbitrary FTP Command Exe |\n| basic-ftp | high | CVE-2026-41324 | v3, v2 | basic-ftp vulnerable to denial of service via unbounded memory consumption in Cl |\n| basic-ftp | high | CVE-2026-44240 | v3, v2 | basic-ftp allows a malicious FTP server to cause client-side denial of service v |\n| brace-expansion | high | CVE-2026-13149 | v3, v2, v1 | brace-expansion: DoS via exponential-time expansion of consecutive non-expanding |\n| brace-expansion | high | CVE-2026-14257 | v4, v3, v2, v1 | brace-expansion: DoS via unbounded expansion length causing an out-of-memory pro |\n| braces | high | CVE-2024-4068 | v3, v2, v1 | Uncontrolled resource consumption in braces |\n| engine.io | high | CVE-2026-59725 | v3, v2 | Socket.IO: Engine.IO Polling Transport Connection Exhaustion |\n| express-rate-limit | high | CVE-2026-30827 | v2 | express-rate-limit: IPv4-mapped IPv6 addresses bypass per-client rate limiting o |\n| fast-uri | high | CVE-2026-6321 | v2 | fast-uri vulnerable to path traversal via percent-encoded dot segments |\n| fast-uri | high | CVE-2026-6322 | v2 | fast-uri vulnerable to host confusion via percent-encoded authority delimiters |\n| fast-uri | high | CVE-2026-16221 | v3, v2 | fast-uri vulnerable to host confusion via literal backslash authority delimiter |\n| fast-uri | high | CVE-2026-13676 | v3, v2 | fast-uri vulnerable to host confusion via failed IDN canonicalization |\n| fast-xml-parser | high | CVE-2026-25128 | v3, v2 | fast-xml-parser has RangeError DoS Numeric Entities Bug |\n| fast-xml-parser | high | CVE-2026-26278 | v3, v2 | fast-xml-parser affected by DoS through entity expansion in DOCTYPE (no expansio |\n| fast-xml-parser | high | CVE-2026-33036 | v3, v2 | fast-xml-parser affected by numeric entity expansion bypassing all entity expans |\n| find-my-way | high | CVE-2026-47219 | v3 | find-my-way: DDoS with HTTP2 |\n| flatted | high | CVE-2026-32141 | v3, v2 | flatted vulnerable to unbounded recursion DoS in parse() revive phase |\n| flatted | high | CVE-2026-33228 | v3, v2 | Prototype Pollution via parse() in NodeJS flatted |\n| form-data | high | CVE-2026-12143 | v3, v2, v1 | form-data: CRLF injection in form-data via unescaped multipart field names and f |\n| handlebars | high | CVE-2026-33938 | v3, v2, v1 | Handlebars.js has JavaScript Injection via AST Type Confusion by tampering @part |\n| handlebars | high | CVE-2026-33940 | v3, v2, v1 | Handlebars.js has JavaScript Injection via AST Type Confusion when passing an ob |\n| handlebars | high | CVE-2026-33939 | v3, v2, v1 | Handlebars.js has Denial of Service via Malformed Decorator Syntax in Template C |\n| handlebars | high | CVE-2026-33941 | v3, v2, v1 | Handlebars.js has JavaScript Injection in CLI Precompiler via Unescaped Names an |\n| hono | high | CVE-2026-29045 | v2 | Hono vulnerable to arbitrary file access via serveStatic vulnerability |\n| hono | high | CVE-2026-54290 | v2 | hono: CORS Middleware reflects any Origin with credentials when `origin` default |\n| http-proxy-middleware | high | CVE-2026-55603 | v3, v2 | http-proxy-middleware: multipart/form-data field injection via unescaped CRLF in |\n| immutable | high | CVE-2026-59879 | v3, v2, v1 | Immutable.js `List` 32-bit trie overflow β†’ unrecoverable DoS |\n| immutable | high | CVE-2026-59880 | v3, v2, v1 | Immutabl: Hash-collision algorithmic complexity denial of service in Immutable.M |\n| immutable | high | CVE-2026-29063 | v2 | Immutable is vulnerable to Prototype Pollution |\n| js-yaml | high | CVE-2026-59869 | v4, v3, v2 | js-yaml: YAML merge-key chains can force quadratic CPU consumption |\n| linkify-it | high | CVE-2026-59887 | v3, v2 | linkify-it: Quadratic-complexity DoS via the `mailto:` validator scan-loop on at |\n| locutus | high | CVE-2026-29091 | v3, v2, v1 | locutus call_user_func_array vulnerable to Remote Code Execution (RCE) due to Co |\n| lodash | high | CVE-2026-4800 | v3 | lodash vulnerable to Code Injection via `_.template` imports key names |\n| lodash.pick | high | CVE-2020-8203 | v2, v1 | Prototype Pollution in lodash |\n| minimatch | high | CVE-2026-27903 | v3, v2, v1 | minimatch has ReDoS: matchOne() combinatorial backtracking via multiple non-adja |\n| minimatch | high | CVE-2026-27904 | v3, v2, v1 | minimatch ReDoS: nested *() extglobs generate catastrophically backtracking regu |\n| minimatch | high | CVE-2026-26996 | v3, v2 | minimatch has a ReDoS via repeated wildcards with non-matching literal in patter |\n| node-forge | high | CVE-2026-33896 | v2 | Forge has a basicConstraints bypass in its certificate chain verification (RFC 5 |\n| node-forge | high | CVE-2026-33895 | v2 | Forge has signature forgery in Ed25519 due to missing S > L check |\n| node-forge | high | CVE-2026-33891 | v2 | Forge has Denial of Service via Infinite Loop in BigInteger.modInverse() with Ze |\n| node-forge | high | CVE-2026-33894 | v2 | Forge has signature forgery in RSA-PKCS due to ASN.1 extra field |\n| path-to-regexp | high | CVE-2026-4867 | v3, v2 | path-to-regexp vulnerable to Regular Expression Denial of Service via multiple r |\n| path-to-regexp | high | CVE-2026-4926 | v2 | path-to-regexp vulnerable to Denial of Service via sequential optional groups |\n| piscina | high | CVE-2026-55388 | v4, v3, v2 | piscina: Prototype Pollution Gadget β†’ RCE via inherited options.filename |\n| postcss | high | CVE-2026-45623 | v4, v3, v2 | PostCSS: Arbitrary file read and information disclosure via attacker-controlled |\n| postcss | high | GHSA-r28c-9q8g-f849 | v4, v3, v2 | PostCSS: Path Traversal in Previous Source Map Auto-Loading (sourceMappingURL) l |\n| react-router | high | GHSA-qwww-vcr4-c8h2 | v3, v2 | React Router: RSC Mode CSRF Bypass Allows Action Execution Before 400 Response |\n| rollup | high | CVE-2026-27606 | v1 | Rollup 4 has Arbitrary File Write via Path Traversal |\n| semver | high | CVE-2022-25883 | v2 | semver vulnerable to Regular Expression Denial of Service |\n| serialize-javascript | high | GHSA-5c6j-r48x-rmvq | v4, v3, v2, v1 | Serialize JavaScript is Vulnerable to RCE via RegExp.flags and Date.prototype.to |\n| shell-quote | high | CVE-2026-13311 | v3, v2 | shell-quote: Quadratic-complexity Denial of Service in `parse()` (CWE-407) |\n| sigstore | high | CVE-2026-48815 | v4, v3, v2, v1 | sigstore's `certificateOIDs` verification constraints are silently dropped and n |\n| socket.io-parser | high | CVE-2026-33151 | v3, v2 | socket.io allows an unbounded number of binary attachments |\n| svgo | high | CVE-2026-29074 | v3, v2, v1 | SVGO DoS through entity expansion in DOCTYPE (Billion Laughs) |\n| svgo | high | GHSA-2p49-hgcm-8545 | v4, v3, v2, v1 | SVGO removeScripts plugin leaves some executable scripts intact |\n| tar | high | CVE-2026-24842 | v1 | node-tar Vulnerable to Arbitrary File Creation/Overwrite via Hardlink Path Trave |\n| tar | high | CVE-2026-23745 | v1 | node-tar is Vulnerable to Arbitrary File Overwrite and Symlink Poisoning via Ins |\n| tar | high | CVE-2026-26960 | v1 | Arbitrary File Read/Write via Hardlink Target Escape Through Symlink Chain in no |\n| tar | high | CVE-2026-29786 | v1 | tar has Hardlink Path Traversal via Drive-Relative Linkpath |\n| tar | high | CVE-2026-31802 | v1 | node-tar Symlink Path Traversal via Drive-Relative Linkpath |\n| tar | high | CVE-2026-23950 | v1 | Race Condition in node-tar Path Reservations via Unicode Ligature Collisions on |\n| tar | high | CVE-2026-59874 | v4, v3, v2, v1 | node-tar: Negative tar entry size causes infinite loop in archive replace |\n| tmp | high | CVE-2026-44705 | v4, v3, v2 | tmp has Path Traversal via unsanitized prefix/postfix that enables directory esc |\n| undici | high | CVE-2026-1528 | v3, v2 | Undici: Malicious WebSocket 64-bit length overflows parser and crashes the clien |\n| undici | high | CVE-2026-1526 | v3, v2 | Undici has Unbounded Memory Consumption in WebSocket permessage-deflate Decompre |\n| undici | high | CVE-2026-2229 | v3, v2 | Undici has Unhandled Exception in WebSocket Client Due to Invalid server_max_win |\n| undici | high | CVE-2026-9697 | v4, v3, v2 | undici vulnerable to TLS certificate validation bypass via dropped requestTls in |\n| undici | high | CVE-2026-12151 | v4, v3, v2 | undici WebSocket client vulnerable to denial of service via fragment count bypas |\n| undici | high | CVE-2026-6734 | v4, v3, v2 | undici vulnerable to cross-origin request routing via SOCKS5 proxy pool reuse |\n| vite | high | CVE-2026-39364 | v1 | Vite: `server.fs.deny` bypassed with queries |\n| vite | high | CVE-2026-39363 | v1 | Vite Vulnerable to Arbitrary File Read via Vite Dev Server WebSocket |\n| vite | high | CVE-2026-53571 | v3, v2, v1 | vite: `server.fs.deny` bypass on Windows alternate paths |\n| ws | high | CVE-2026-48779 | v3, v2, v1 | ws: Memory exhaustion DoS from tiny fragments and data chunks |\n| @angular/compiler | moderate | CVE-2026-54265 | v4, v3, v2, v1 | @angular/compiler: Two-Way Property Binding Sanitization Bypass (XSS) |\n| @angular/compiler | moderate | CVE-2026-50557 | v4, v1 | Angular: Template and Attribute Namespace Sanitization Bypass (XSS) |\n| @angular/core | moderate | CVE-2026-50557 | v4, v1 | Angular: Template and Attribute Namespace Sanitization Bypass (XSS) |\n| @angular/core | moderate | CVE-2026-52725 | v4, v1 | @angular/core: Angular Template and Dynamic Component Namespace Bypass leading t |\n| @hono/node-server | moderate | CVE-2026-39406 | v2 | @hono/node-server: Middleware bypass via repeated slashes in serveStatic |\n| @hono/node-server | moderate | GHSA-frvp-7c67-39w9 | v3, v2 | Node.js Adapter for Hono: Path traversal in `serve-static` on Windows via encode |\n| @opentelemetry/core | moderate | CVE-2026-54285 | v1 | OpenTelemetry Core: Unbounded memory allocation in W3C Baggage propagation |\n| @sigstore/core | moderate | CVE-2026-48758 | v4, v3, v2, v1 | @sigstore/core has DSSE payloadType type-binding failure |\n| ajv | moderate | CVE-2025-69873 | v3, v2 | ajv has ReDoS when using `$data` option |\n| axios | moderate | CVE-2025-62718 | v3, v2 | Axios has a NO_PROXY Hostname Normalization Bypass that Leads to SSRF |\n| axios | moderate | CVE-2026-42041 | v3, v2 | Axios: Authentication Bypass via Prototype Pollution Gadget in `validateStatus` |\n| axios | moderate | CVE-2026-42044 | v3, v2 | Axios: Invisible JSON Response Tampering via Prototype Pollution Gadget in `pars |\n| axios | moderate | CVE-2026-42037 | v3, v2 | Axios: CRLF Injection in multipart/form-data body via unsanitized blob.type in f |\n| axios | moderate | CVE-2026-42038 | v3, v2 | Axios: no_proxy bypass via IP alias allows SSRF |\n| axios | moderate | CVE-2026-42034 | v3, v2 | Axios' HTTP adapter-streamed uploads bypass maxBodyLength when maxRedirects: 0 |\n| axios | moderate | CVE-2026-42036 | v3, v2 | Axios: HTTP adapter streamed responses bypass maxContentLength |\n| axios | moderate | CVE-2026-42042 | v3, v2 | Axios: XSRF Token Cross-Origin Leakage via Prototype Pollution Gadget in `withXS |\n| axios | moderate | CVE-2026-40175 | v3, v2 | Axios has Unrestricted Cloud Metadata Exfiltration via Header Injection Chain |\n| axios | moderate | CVE-2026-42039 | v3, v2 | Axios: unbounded recursion in toFormData causes DoS via deeply nested request da |\n| axios | moderate | CVE-2026-44490 | v3, v2 | axios has DoS & Header Injection via Prototype Pollution Read-Side Gadgets in ax |\n| axios | moderate | GHSA-42h9-826w-cgv3 | v4, v3, v2 | Axios: Excessive recursion in formDataToJSON can cause denial of service |\n| axios | moderate | GHSA-pmv8-rq9r-6j72 | v4, v3, v2 | Axios: Deep formToJSON Key Recursion Can Cause Denial of Service |\n| axios | moderate | GHSA-jqh4-m9w3-8hp9 | v4, v3, v2 | Axios: Fetch adapter `ReadableStream` uploads bypass `maxBodyLength` |\n| axios | moderate | GHSA-mmx7-hfxf-jppx | v4, v3, v2 | Axios: Prototype pollution gadgets can alter axios request construction |\n| axios | moderate | GHSA-7q8q-rj6j-mhjq | v4, v3, v2 | Axios: Nested axios option objects can consume polluted prototype values |\n| axios | moderate | GHSA-xj6q-8x83-jv6g | v4 | Axios: Prototype pollution auth subfields can inject Basic auth |\n| axios | moderate | GHSA-f4gw-2p7v-4548 | v4 | Axios: NO_PROXY bypass for 0.0.0.0 local addresses in axios |\n| axios | moderate | GHSA-hcpx-6fm6-wx23 | v4 | Axios form serializer maxDepth bypass via {} metatoken |\n| axios | moderate | GHSA-mwf2-3pr3-8698 | v4 | Axios: HTTP/2 streamed uploads bypass `maxBodyLength` |\n| brace-expansion | moderate | CVE-2026-45149 | v3, v2, v1 | brace-expansion: Large numeric range defeats documented `max` DoS protection |\n| brace-expansion | moderate | CVE-2026-33750 | v3, v2 | brace-expansion: Zero-step sequence causes process hang and memory exhaustion |\n| ejs | moderate | CVE-2024-33883 | v2 | ejs lacks certain pollution protection |\n| esbuild | moderate | GHSA-67mh-4wv8-2f99 | v2 | esbuild enables any website to send any requests to the development server and r |\n| fast-xml-parser | moderate | CVE-2026-33349 | v3, v2 | Entity Expansion Limits Bypassed When Set to Zero Due to JavaScript Falsy Evalua |\n| fast-xml-parser | moderate | CVE-2026-41650 | v3, v2 | fast-xml-parser XMLBuilder: XML Comment and CDATA Injection via Unescaped Delimi |\n| file-type | moderate | CVE-2026-31808 | v4 | file-type affected by infinite loop in ASF parser on malformed input with zero-s |\n| handlebars | moderate | CVE-2026-33916 | v3, v2, v1 | Handlebars.js has Prototype Pollution Leading to XSS through Partial Template In |\n| handlebars | moderate | GHSA-7rx3-28cr-v5wh | v3, v2, v1 | Handlebars.js has a Prototype Method Access Control Gap via Missing __lookupSett |\n| hono | moderate | CVE-2026-29086 | v2 | Hono Vulnerable to Cookie Attribute Injection via Unsanitized domain and path in |\n| hono | moderate | CVE-2026-29085 | v2 | Hono Vulnerable to SSE Control Field Injection via CR/LF in writeSSE() |\n| hono | moderate | GHSA-v8w9-8mx6-g223 | v2 | Hono vulnerable to Prototype Pollution possible through **proto** key allowed in |\n| hono | moderate | GHSA-26pp-8wgv-hjvm | v2 | Hono missing validation of cookie name on write path in setCookie() |\n| hono | moderate | CVE-2026-39410 | v2 | Hono: Non-breaking space prefix bypass in cookie name handling in getCookie() |\n| hono | moderate | CVE-2026-39408 | v2 | Hono: Path traversal in toSSG() allows writing files outside the output director |\n| hono | moderate | CVE-2026-39407 | v2 | Hono: Middleware bypass via repeated slashes in serveStatic |\n| hono | moderate | CVE-2026-39409 | v2 | Hono has incorrect IP matching in ipRestriction() for IPv4-mapped IPv6 addresses |\n| hono | moderate | CVE-2026-44458 | v2 | Hono has CSS Declaration Injection via Style Object Values in JSX SSR |\n| hono | moderate | CVE-2026-44457 | v2 | Hono's Cache Middleware ignores Vary: Authorization / Vary: Cookie leading to cr |\n| hono | moderate | CVE-2026-44456 | v2 | Hono: bodyLimit() can be bypassed for chunked / unknown-length requests |\n| hono | moderate | CVE-2026-44455 | v2 | hono/jsx has Unvalidated JSX Tag Names that May Allow HTML Injection |\n| hono | moderate | CVE-2026-47674 | v2 | Hono: IP Restriction bypasses static deny rules for non-canonical IPv6 |\n| hono | moderate | CVE-2026-47675 | v2 | Hono: Cookie helper does not sanitize sameSite and priority, allowing Set-Cookie |\n| hono | moderate | CVE-2026-47673 | v2 | Hono: JWT middleware accepts any Authorization scheme, not only Bearer |\n| hono | moderate | CVE-2026-47676 | v2 | Hono: app.mount() strips mount prefix using undecoded path, causing incorrect ro |\n| hono | moderate | CVE-2026-56761 | v2 | hono Improperly Handles JSX Attribute Names Allows HTML Injection in hono/jsx SS |\n| hono | moderate | CVE-2026-54288 | v2 | hono: Body Limit Middleware can be bypassed on AWS Lambda by understating `Conte |\n| hono | moderate | CVE-2026-54289 | v2 | hono: Lambda@Edge adapter keeps only the last value of a repeated request header |\n| hono | moderate | CVE-2026-54286 | v2 | hono: Path traversal in `serve-static` on Windows via encoded backslash (`%5C`) |\n| hono | moderate | CVE-2026-54287 | v2 | hono: AWS Lambda adapter merges multiple `Set-Cookie` headers into one value, dr |\n| hono | moderate | CVE-2026-59897 | v3, v2 | Hono: API Gateway v1 adapter can drop a distinct repeated request header value d |\n| hono | moderate | CVE-2026-59895 | v3, v2 | Hono: Server-Side XSS via JSX Escaping Bypass in cx() Utility |\n| hono | moderate | CVE-2026-59896 | v3 | hono/jsx does not isolate context per request, leading to cross-request data dis |\n| http-proxy-middleware | moderate | CVE-2026-55602 | v4, v3, v2 | http-proxy-middleware `router` host+path substring matching allows Host-header-d |\n| ip-address | moderate | CVE-2026-42338 | v4, v2 | ip-address has XSS in Address6 HTML-emitting methods |\n| js-yaml | moderate | CVE-2025-64718 | v2 | js-yaml has prototype pollution in merge (<<) |\n| js-yaml | moderate | CVE-2026-53550 | v4, v3, v2 | JS-YAML: Quadratic-complexity DoS in merge key handling via repeated aliases |\n| launch-editor | moderate | CVE-2026-53632 | v4, v3, v2 | launch-editor: NTLMv2 hash disclosure via UNC path handling on Windows |\n| locutus | moderate | CVE-2026-33993 | v3, v2, v1 | Locutus has Prototype Pollution via **proto** Key Injection in unserialize() |\n| lodash | moderate | CVE-2026-2950 | v3 | lodash vulnerable to Prototype Pollution via array path bypass in `_.unset` and |\n| micromatch | moderate | CVE-2024-4067 | v3, v2, v1 | Regular Expression Denial of Service (ReDoS) in micromatch |\n| nanoid | moderate | CVE-2024-55565 | v2 | Predictable results in nanoid generation when given non-integer values |\n| path-to-regexp | moderate | CVE-2026-4923 | v2 | path-to-regexp vulnerable to Regular Expression Denial of Service via multiple w |\n| postcss | moderate | CVE-2026-41305 | v4, v3, v2 | PostCSS has XSS via Unescaped </style> in its CSS Stringify Output |\n| protobufjs | moderate | CVE-2026-59876 | v3 | protobufjs: Text Format string map parsing can mutate returned map object protot |\n| protobufjs | moderate | CVE-2026-59877 | v3 | protobufjs: Denial of Service via infinite loop in .proto option parsing |\n| qs | moderate | CVE-2026-8723 | v4, v3, v2, v1 | qs has a remotely triggerable DoS: qs.stringify crashes with TypeError on null/u |\n| qs | moderate | CVE-2025-15284 | v2 | qs's arrayLimit bypass in its bracket notation allows DoS via memory exhaustion |\n| react-router-dom | moderate | CVE-2026-53668 | v1 | React Router: Open redirect leading to XSS |\n| serialize-javascript | moderate | CVE-2026-34043 | v4, v3, v2, v1 | Serialize JavaScript has CPU Exhaustion Denial of Service via crafted array-like |\n| serialize-javascript | moderate | CVE-2024-11831 | v2 | Cross-site Scripting (XSS) in serialize-javascript |\n| smol-toml | moderate | GHSA-v3rj-xjv7-4jmq | v3, v2, v1 | smol-toml: Denial of Service via TOML documents containing thousands of consecut |\n| tar | moderate | CVE-2026-53655 | v4, v3, v2, v1 | node-tar applies PAX size override to intermediary GNU long-name/long-link heade |\n| tar | moderate | CVE-2026-59871 | v4, v3, v2, v1 | node-tar: Process crash via PAX numeric path type confusion |\n| tar | moderate | CVE-2026-59875 | v4, v3, v2, v1 | node-tar: Uncaught Exception DoS via NUL byte in PAX path/linkpath records |\n| tar | moderate | GHSA-r292-9mhp-454m | v4, v3, v2, v1 | node-tar: Uncontrolled recursion in mapHas/filesFilter allows uncatchable stack- |\n| undici | moderate | CVE-2026-1525 | v3, v2 | Undici has an HTTP Request/Response Smuggling issue |\n| undici | moderate | CVE-2026-1527 | v3, v2 | Undici has CRLF Injection in undici via `upgrade` option |\n| undici | moderate | CVE-2026-9679 | v4, v3, v2 | undici vulnerable to HTTP header injection via Set-Cookie percent-decoding |\n| undici | moderate | CVE-2026-9678 | v4, v3, v2 | undici vulnerable to cross-user information disclosure via shared cache whitespa |\n| uuid | moderate | CVE-2026-41907 | v4, v3, v2 | uuid: Missing buffer bounds check in v3/v5/v6 when buf is provided |\n| vite | moderate | CVE-2026-39365 | v1 | Vite Vulnerable to Path Traversal in Optimized Deps `.map` Handling |\n| vite | moderate | CVE-2026-53632 | v3, v2, v1 | launch-editor: NTLMv2 hash disclosure via UNC path handling on Windows |\n| webpack | moderate | CVE-2024-43788 | v2 | Webpack's AutoPublicPathRuntimeModule has a DOM Clobbering Gadget that leads to |\n| webpack-dev-server | moderate | CVE-2025-30360 | v2 | webpack-dev-server users' source code may be stolen when they access a malicious |\n| webpack-dev-server | moderate | CVE-2025-30359 | v2 | webpack-dev-server users' source code may be stolen when they access a malicious |\n| webpack-dev-server | moderate | CVE-2026-6402 | v2 | webpack-dev-server vulnerable to cross-origin source code exposure on non-HTTPS |\n| webpack-dev-server | moderate | CVE-2026-9595 | v2 | webpack-dev-server vulnerable to HMR WebSocket interception via permissive user |\n| webpack-dev-server | moderate | CVE-2026-14620 | v4, v3, v2 | webpack-dev-server vulnerable to cross-site request forgery via internal develop |\n| webpack-dev-server | moderate | CVE-2026-14631 | v4, v3, v2 | webpack-dev-server vulnerable to denial of service via a malformed Host or Origi |\n| websocket-driver | moderate | CVE-2026-54490 | v4, v3, v2 | websocket-driver: Resource limit bypass via message compression |\n| ws | moderate | CVE-2026-45736 | v3, v2 | ws: Uninitialized memory disclosure |\n| yaml | moderate | CVE-2026-33532 | v3, v2, v1 | yaml is vulnerable to Stack Overflow via deeply nested YAML collections |\n| @babel/core | low | CVE-2026-49356 | v3, v2, v1 | @babel/core: Arbitrary File Read via sourceMappingURL Comment |\n| @tootallnate/once | low | CVE-2026-3449 | v3, v2, v1 | @tootallnate/once vulnerable to Incorrect Control Flow Scoping |\n| axios | low | CVE-2026-42040 | v3, v2 | Axios: Null Byte Injection via Reverse-Encoding in AxiosURLSearchParams |\n| body-parser | low | CVE-2026-12590 | v4, v3, v2 | body-parser vulnerable to denial of service when invalid limit value silently di |\n| diff | low | CVE-2026-24001 | v4, v3, v2 | jsdiff has a Denial of Service vulnerability in parsePatch and applyPatch |\n| fast-xml-parser | low | CVE-2026-27942 | v3, v2 | fast-xml-parser has stack overflow in XMLBuilder with preserveOrder |\n| handlebars | low | GHSA-442j-39wm-28r2 | v3, v2, v1 | Handlebars.js has a Property Access Validation Bypass in container.lookup |\n| hono | low | GHSA-gq3j-xvxp-8hrf | v2 | Hono added timing comparison hardening in basicAuth and bearerAuth |\n| hono | low | CVE-2026-44459 | v2 | Hono has improper validation of NumericDate claims (exp, nbf, iat) in JWT verify |\n| qs | low | CVE-2026-2391 | v2 | qs's arrayLimit bypass in comma parsing allows denial of service |\n| undici | low | CVE-2026-6733 | v4, v3, v2 | undici vulnerable to HTTP response queue poisoning via keep-alive socket reuse |\n| undici | low | CVE-2026-11525 | v4, v3, v2 | undici vulnerable to Set-Cookie SameSite attribute downgrade via permissive subs |\n| webpack | low | CVE-2025-68458 | v2 | webpack buildHttp: allowedUris allow-list bypass via URL userinfo (@) leading to |\n| webpack | low | CVE-2025-68157 | v2 | webpack buildHttp HttpUriPlugin allowedUris bypass via HTTP redirects β†’ SSRF + c |\n",
345
345
  "kind": "doc"
346
346
  },
347
347
  {
@@ -397,7 +397,7 @@
397
397
  "group": "docs",
398
398
  "name": "LICENSE_REPORTS",
399
399
  "path": "docs/LICENSE_REPORTS.md",
400
- "code": "# License Reports\n\n> Overview of licenses for all packages in Kolibri.\n\n## adapter-angular-v19\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| rxjs | Apache-2.0 | 7.8.2 | Ben Lesh |\n| typescript | Apache-2.0 | 5.8.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @angular/common | MIT | 19.2.25 | angular |\n| @angular/compiler | MIT | 19.2.25 | angular |\n| @angular/compiler-cli | MIT | 19.2.25 | n/a |\n| @angular/core | MIT | 19.2.21 | angular |\n| @angular/core | MIT | 19.2.21 | angular |\n| zone.js | MIT | 0.15.1 | Brian Ford |\n\n## adapter-angular-v20\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| rxjs | Apache-2.0 | 7.8.2 | Ben Lesh |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @angular/common | MIT | 20.3.25 | angular |\n| @angular/compiler | MIT | 20.3.20 | angular |\n| @angular/compiler-cli | MIT | 20.3.20 | n/a |\n| @angular/core | MIT | 20.3.20 | angular |\n| @angular/core | MIT | 20.3.20 | angular |\n| zone.js | MIT | 0.15.1 | Brian Ford |\n\n## adapter-angular-v21\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| rxjs | Apache-2.0 | 7.8.2 | Ben Lesh |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @angular/common | MIT | 21.2.17 | angular |\n| @angular/compiler | MIT | 21.2.12 | angular |\n| @angular/compiler-cli | MIT | 21.2.12 | n/a |\n| @angular/core | MIT | 21.2.12 | angular |\n| @angular/core | MIT | 21.2.12 | angular |\n| zone.js | MIT | 0.16.2 | Brian Ford |\n\n## adapter-hydrate\n\n| Package | License | Version | Author |\n| -------------------------------- | ------------- | ---------- | -------------------------------------------------- |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| chai | MIT | 6.2.2 | Jake Luer |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| mocha | MIT | 11.7.5 | TJ Holowaychuk |\n| mocha-snapshots | MIT | 4.2.0 | Wellington Guimaraes |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n\n## adapter-preact\n\n| Package | License | Version | Author |\n| --------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| preact | MIT | 10.29.1 | n/a |\n| react | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-react\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @types/react | MIT | 18.3.31 | n/a |\n| @types/react-dom | MIT | 18.3.7 | n/a |\n| react | MIT | 18.3.1 | n/a |\n| react | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-react-standalone\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | ------------------------------------------------------------- |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| cpy-cli | MIT | 7.0.0 | Sindre Sorhus sindresorhus@gmail.com https://sindresorhus.com |\n| react | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| webpack | MIT | 5.107.2 | Tobias Koppers @sokra |\n| webpack-cli | MIT | 6.0.1 | n/a |\n\n## adapter-solid\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| solid-js | MIT | 1.9.12 | Ryan Carniato |\n| solid-js | MIT | 1.9.12 | Ryan Carniato |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-svelte\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @babel/types | MIT | 7.29.7 | The Babel Team (https://babel.dev/team) |\n| svelte | MIT | 5.55.7 | n/a |\n| svelte | MIT | 5.55.7 | n/a |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-vue\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @babel/types | MIT | 7.29.7 | The Babel Team (https://babel.dev/team) |\n| unbuild | MIT | 3.6.1 | n/a |\n| vue | MIT | 3.5.34 | Evan You |\n| vue | MIT | 3.5.34 | Evan You |\n\n## components\n\n| Package | License | Version | Author |\n| ---------------------------------------- | ------------- | ----------- | -------------------------------------------------------------- |\n| @playwright/test | Apache-2.0 | 1.60.0 | Microsoft Corporation |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| terser | BSD-2-Clause | 5.48.0 | Mihai Bazon |\n| twig | BSD-2-Clause | 3.0.0 | John Roepke |\n| wcag-contrast | BSD-2-Clause | 3.0.0 | Tom MacWright |\n| adopted-style-sheets | EUPL-1.2 | 1.1.9-rc.22 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| stencil-awesome-test | EUPL-1.2 | 1.0.6 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| knip | ISC | 6.16.1 | Lars Kappert lars@webpro.nl |\n| @floating-ui/dom | MIT | 1.7.6 | atomiks |\n| @public-ui/stencil-angular-output-target | MIT | 0.9.0 | n/a |\n| @public-ui/stencil-react-output-target | MIT | 0.6.0 | n/a |\n| @public-ui/stencil-solid-output-target | MIT | 0.2.0 | Ionic Team |\n| @public-ui/stencil-vue-output-target | MIT | 0.9.0 | n/a |\n| @revolist/svelte-output-target | MIT | 0.0.7 | Ionic Team |\n| @stencil-community/postcss | MIT | 2.2.0 | Ionic Team |\n| @stencil/core | MIT | 4.38.3 | Ionic Team |\n| @stencil/playwright | MIT | 0.4.3 | Stencil Team |\n| @stencil/sass | MIT | 3.2.3 | Ionic Team |\n| @types/color-convert | MIT | 2.0.4 | n/a |\n| @types/jest | MIT | 29.5.14 | n/a |\n| @types/lodash-es | MIT | 4.17.12 | n/a |\n| @types/markdown-it | MIT | 14.1.2 | n/a |\n| @types/mustache | MIT | 4.2.6 | n/a |\n| @types/pug | MIT | 2.0.10 | n/a |\n| @types/twig | MIT | 1.12.17 | n/a |\n| @types/wcag-contrast | MIT | 3.0.3 | n/a |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| color-convert | MIT | 3.1.3 | Josh Junon |\n| color-rgba | MIT | 2.4.0 | Dmitry Yv |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| cssnano | MIT | 8.0.2 | Ben Briggs beneb.info@gmail.com http://beneb.info |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| eslint-plugin-perfectionist | MIT | 5.9.0 | Azat S. |\n| jest | MIT | 29.7.0 | n/a |\n| jest-cli | MIT | 29.7.0 | n/a |\n| lodash-es | MIT | 4.18.1 | John-David Dalton |\n| markdown-it | MIT | 14.2.0 | n/a |\n| mustache | MIT | 4.2.0 | mustache.js Authors |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| postcss-sorting | MIT | 10.0.0 | Aleks Hudochenkov |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| pug | MIT | 3.0.4 | TJ Holowaychuk |\n| rgba-convert | MIT | 0.3.0 | jeromedecoster |\n| stylelint | MIT | 17.13.0 | stylelint |\n| typed-bem | MIT | 1.0.2 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## icons\n\n| Package | License | Version | Author |\n| ---------------- | ------------- | ------- | ------------------ |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| http-server | MIT | 14.1.1 | n/a |\n| oslllo-svg-fixer | MIT | 6.0.1 | Ghustavh Ehm |\n| svgtofont | MIT | 6.5.2 | Kenny |\n\n## root\n\n| Package | License | Version | Author |\n| --------------------------------- | ---------- | ------- | ------------------------------------------------- |\n| npm-check-updates | Apache-2.0 | 22.2.3 | Tomas Junnonen |\n| @evilmartians/lefthook | MIT | 2.1.9 | mrexox |\n| license-report | MIT | 6.8.5 | BePo65 |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| stylelint | MIT | 17.13.0 | stylelint |\n| stylelint-config-recommended-scss | MIT | 17.0.1 | kristerkari |\n| stylelint-config-standard | MIT | 40.0.0 | Stylelint |\n| stylelint-order | MIT | 8.1.1 | Aleks Hudochenkov |\n| stylelint-scss | MIT | 7.2.0 | Krister Kari |\n\n## sample-react\n\n| Package | License | Version | Author |\n| ---------------------------------- | ----------------- | ----------- | -------------------------------------------------------------- |\n| tslib | 0BSD | 2.8.1 | Microsoft Corp. |\n| @lhci/cli | Apache-2.0 | 0.15.1 | n/a |\n| @playwright/test | Apache-2.0 | 1.60.0 | Microsoft Corporation |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react-hook-form-adapter | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react-v19 | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/themes | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| adopted-style-sheets | EUPL-1.2 | 1.1.9-rc.22 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| knip | ISC | 6.16.1 | Lars Kappert lars@webpro.nl |\n| world_countries_lists | LGPL-3.0-or-later | 3.3.0 | Stefan Gabos |\n| @hookform/resolvers | MIT | 5.4.0 | bluebill1049 |\n| @stencil/core | MIT | 4.38.3 | Ionic Team |\n| @types/node | MIT | 25.9.3 | n/a |\n| @types/papaparse | MIT | 5.5.2 | n/a |\n| @types/react | MIT | 19.2.17 | n/a |\n| @types/react-dom | MIT | 19.2.3 | n/a |\n| @unocss/preset-mini | MIT | 66.7.2 | Anthony Fu |\n| @unocss/vite | MIT | 66.7.2 | Anthony Fu |\n| @vitejs/plugin-react-swc | MIT | 4.3.1 | Arnaud BarrΓ© (https://github.com/ArnaudBarre) |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| http-server | MIT | 14.1.1 | n/a |\n| papaparse | MIT | 5.5.3 | Matthew Holt https://twitter.com/mholt6 |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| react | MIT | 19.2.7 | n/a |\n| react-dom | MIT | 19.2.7 | n/a |\n| react-hook-form | MIT | 7.79.0 | Beier(Bill) Luo |\n| react-number-format | MIT | 5.4.5 | Sudhanshu Yadav |\n| react-router | MIT | 7.17.0 | Remix Software |\n| react-router-dom | MIT | 7.17.0 | Remix Software |\n| stylelint | MIT | 17.13.0 | stylelint |\n| vite | MIT | 7.3.5 | Evan You |\n| zod | MIT | 4.4.3 | Colin McDonnell |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n\n## theme-bwst\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar SegersvΓ€rd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.13.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-default\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar SegersvΓ€rd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.13.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-desy\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar SegersvΓ€rd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.13.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-ecl\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar SegersvΓ€rd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.13.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-kern\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @kern-ux/native | EUPL-1.2 | 2.3.0 | Kern-UX |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar SegersvΓ€rd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.13.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## themes\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | ------------------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar SegersvΓ€rd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cpy-cli | MIT | 7.0.0 | Sindre Sorhus sindresorhus@gmail.com https://sindresorhus.com |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n\n## tools-kolibri-cli\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| knip | ISC | 6.16.1 | Lars Kappert lars@webpro.nl |\n| semver | ISC | 7.8.4 | GitHub Inc. |\n| @types/node | MIT | 25.9.3 | n/a |\n| @types/semver | MIT | 7.7.1 | n/a |\n| chalk | MIT | 5.6.2 | n/a |\n| commander | MIT | 14.0.3 | TJ Holowaychuk |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| deepmerge | MIT | 4.3.1 | n/a |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| gradient-string | MIT | 3.0.0 | Boris K |\n| loglevel | MIT | 1.9.2 | Tim Perry pimterry@gmail.com http://tim-perry.co.uk |\n| mocha | MIT | 11.7.6 | TJ Holowaychuk |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| ts-node | MIT | 10.9.2 | Blake Embrey hello@blakeembrey.com http://blakeembrey.me |\n| typed-bem | MIT | 1.0.2 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n\n## tools-mcp\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------------------- | ---------- | ---------------------------------------------------- |\n| fuse.js | Apache-2.0 | 7.4.2 | Kiro Risk kirollos@gmail.com http://kiro.me |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.1 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| knip | ISC | 6.16.1 | Lars Kappert lars@webpro.nl |\n| @modelcontextprotocol/sdk | MIT | 1.29.0 | Anthropic, PBC (https://anthropic.com) |\n| @types/express | MIT | 5.0.6 | n/a |\n| @types/node | MIT | 25.9.3 | n/a |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| express | MIT | 5.2.1 | TJ Holowaychuk |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| tsx | MIT | 4.22.4 | Hiroki Osame hiroki.osame@gmail.com |\n| unbuild | MIT | 3.6.1 | n/a |\n| zod | MIT | 4.4.3 | Colin McDonnell |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @modelcontextprotocol/inspector | SEE LICENSE IN LICENSE | 0.22.0 | Model Context Protocol a Series of LF Projects, LLC. |\n\n## tools-visual-tests\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | ------------------------------------------------- |\n| @playwright/test | Apache-2.0 | 1.60.0 | Microsoft Corporation |\n| @public-ui/sample-react | EUPL-1.2 | 4.3.0-rc.1 | n/a |\n| knip | ISC | 6.16.1 | Lars Kappert lars@webpro.nl |\n| axe-html-reporter | MIT | 2.2.11 | Liliia Pelypenko (liliia.pelypenko@gmail.com) |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| http-server | MIT | 14.1.1 | n/a |\n| portfinder | MIT | 1.0.38 | Charlie Robbins |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| @axe-core/playwright | MPL-2.0 | 4.11.3 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n",
400
+ "code": "# License Reports\n\n> Overview of licenses for all packages in Kolibri.\n\n## adapter-angular-v19\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| rxjs | Apache-2.0 | 7.8.2 | Ben Lesh |\n| typescript | Apache-2.0 | 5.8.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @angular/common | MIT | 19.2.25 | angular |\n| @angular/compiler | MIT | 19.2.25 | angular |\n| @angular/compiler-cli | MIT | 19.2.25 | n/a |\n| @angular/core | MIT | 19.2.21 | angular |\n| @angular/core | MIT | 19.2.21 | angular |\n| zone.js | MIT | 0.15.1 | Brian Ford |\n\n## adapter-angular-v20\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| rxjs | Apache-2.0 | 7.8.2 | Ben Lesh |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @angular/common | MIT | 20.3.25 | angular |\n| @angular/compiler | MIT | 20.3.20 | angular |\n| @angular/compiler-cli | MIT | 20.3.20 | n/a |\n| @angular/core | MIT | 20.3.20 | angular |\n| @angular/core | MIT | 20.3.20 | angular |\n| zone.js | MIT | 0.15.1 | Brian Ford |\n\n## adapter-angular-v21\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| rxjs | Apache-2.0 | 7.8.2 | Ben Lesh |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @angular/common | MIT | 21.2.17 | angular |\n| @angular/compiler | MIT | 21.2.12 | angular |\n| @angular/compiler-cli | MIT | 21.2.12 | n/a |\n| @angular/core | MIT | 21.2.12 | angular |\n| @angular/core | MIT | 21.2.12 | angular |\n| zone.js | MIT | 0.16.2 | Brian Ford |\n\n## adapter-hydrate\n\n| Package | License | Version | Author |\n| -------------------------------- | ------------- | ---------- | -------------------------------------------------- |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| chai | MIT | 6.2.2 | Jake Luer |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| mocha | MIT | 11.7.5 | TJ Holowaychuk |\n| mocha-snapshots | MIT | 4.2.0 | Wellington Guimaraes |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n\n## adapter-preact\n\n| Package | License | Version | Author |\n| --------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| preact | MIT | 10.29.1 | n/a |\n| react | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-react\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @types/react | MIT | 18.3.31 | n/a |\n| @types/react-dom | MIT | 18.3.7 | n/a |\n| react | MIT | 18.3.1 | n/a |\n| react | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-react-standalone\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | ------------------------------------------------------------- |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| cpy-cli | MIT | 7.0.0 | Sindre Sorhus sindresorhus@gmail.com https://sindresorhus.com |\n| react | MIT | 18.3.1 | n/a |\n| react-dom | MIT | 18.3.1 | n/a |\n| webpack | MIT | 5.107.2 | Tobias Koppers @sokra |\n| webpack-cli | MIT | 6.0.1 | n/a |\n\n## adapter-solid\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| solid-js | MIT | 1.9.12 | Ryan Carniato |\n| solid-js | MIT | 1.9.12 | Ryan Carniato |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-svelte\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @babel/types | MIT | 7.29.7 | The Babel Team (https://babel.dev/team) |\n| svelte | MIT | 5.55.7 | n/a |\n| svelte | MIT | 5.55.7 | n/a |\n| unbuild | MIT | 3.6.1 | n/a |\n\n## adapter-vue\n\n| Package | License | Version | Author |\n| --------------------- | ------------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| minimatch | BlueOak-1.0.0 | 10.2.5 | Isaac Z. Schlueter |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @babel/types | MIT | 7.29.7 | The Babel Team (https://babel.dev/team) |\n| unbuild | MIT | 3.6.1 | n/a |\n| vue | MIT | 3.5.34 | Evan You |\n| vue | MIT | 3.5.34 | Evan You |\n\n## components\n\n| Package | License | Version | Author |\n| ---------------------------------------- | ------------- | ----------- | -------------------------------------------------------------- |\n| @playwright/test | Apache-2.0 | 1.60.0 | Microsoft Corporation |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| terser | BSD-2-Clause | 5.48.0 | Mihai Bazon |\n| twig | BSD-2-Clause | 3.0.0 | John Roepke |\n| wcag-contrast | BSD-2-Clause | 3.0.0 | Tom MacWright |\n| adopted-style-sheets | EUPL-1.2 | 1.1.9-rc.25 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| stencil-awesome-test | EUPL-1.2 | 1.0.6 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| knip | ISC | 6.16.1 | Lars Kappert lars@webpro.nl |\n| @floating-ui/dom | MIT | 1.7.6 | atomiks |\n| @public-ui/stencil-angular-output-target | MIT | 0.9.0 | n/a |\n| @public-ui/stencil-react-output-target | MIT | 0.6.0 | n/a |\n| @public-ui/stencil-solid-output-target | MIT | 0.2.0 | Ionic Team |\n| @public-ui/stencil-vue-output-target | MIT | 0.9.0 | n/a |\n| @revolist/svelte-output-target | MIT | 0.0.7 | Ionic Team |\n| @stencil-community/postcss | MIT | 2.2.0 | Ionic Team |\n| @stencil/core | MIT | 4.38.3 | Ionic Team |\n| @stencil/playwright | MIT | 0.4.3 | Stencil Team |\n| @stencil/sass | MIT | 3.2.3 | Ionic Team |\n| @types/color-convert | MIT | 2.0.4 | n/a |\n| @types/jest | MIT | 29.5.14 | n/a |\n| @types/lodash-es | MIT | 4.17.12 | n/a |\n| @types/markdown-it | MIT | 14.1.2 | n/a |\n| @types/mustache | MIT | 4.2.6 | n/a |\n| @types/pug | MIT | 2.0.10 | n/a |\n| @types/twig | MIT | 1.12.17 | n/a |\n| @types/wcag-contrast | MIT | 3.0.3 | n/a |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| color-convert | MIT | 3.1.3 | Josh Junon |\n| color-rgba | MIT | 2.4.0 | Dmitry Yv |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| cssnano | MIT | 8.0.2 | Ben Briggs beneb.info@gmail.com http://beneb.info |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| eslint-plugin-perfectionist | MIT | 5.9.0 | Azat S. |\n| jest | MIT | 29.7.0 | n/a |\n| jest-cli | MIT | 29.7.0 | n/a |\n| lodash-es | MIT | 4.18.1 | John-David Dalton |\n| markdown-it | MIT | 14.2.0 | n/a |\n| mustache | MIT | 4.2.0 | mustache.js Authors |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| postcss-sorting | MIT | 10.0.0 | Aleks Hudochenkov |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| pug | MIT | 3.0.4 | TJ Holowaychuk |\n| rgba-convert | MIT | 0.3.0 | jeromedecoster |\n| stylelint | MIT | 17.13.0 | stylelint |\n| typed-bem | MIT | 1.0.2 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## icons\n\n| Package | License | Version | Author |\n| ---------------- | ------------- | ------- | ------------------ |\n| rimraf | BlueOak-1.0.0 | 6.1.3 | Isaac Z. Schlueter |\n| http-server | MIT | 14.1.1 | n/a |\n| oslllo-svg-fixer | MIT | 6.0.1 | Ghustavh Ehm |\n| svgtofont | MIT | 6.5.2 | Kenny |\n\n## root\n\n| Package | License | Version | Author |\n| --------------------------------- | ---------- | ------- | ------------------------------------------------- |\n| npm-check-updates | Apache-2.0 | 22.2.3 | Tomas Junnonen |\n| @evilmartians/lefthook | MIT | 2.1.9 | mrexox |\n| license-report | MIT | 6.8.5 | BePo65 |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| stylelint | MIT | 17.13.0 | stylelint |\n| stylelint-config-recommended-scss | MIT | 17.0.1 | kristerkari |\n| stylelint-config-standard | MIT | 40.0.0 | Stylelint |\n| stylelint-order | MIT | 8.1.1 | Aleks Hudochenkov |\n| stylelint-scss | MIT | 7.2.0 | Krister Kari |\n\n## sample-react\n\n| Package | License | Version | Author |\n| ---------------------------------- | ----------------- | ----------- | -------------------------------------------------------------- |\n| tslib | 0BSD | 2.8.1 | Microsoft Corp. |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react-hook-form-adapter | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react-v19 | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| adopted-style-sheets | EUPL-1.2 | 1.1.9-rc.22 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| knip | ISC | 6.16.1 | Lars Kappert lars@webpro.nl |\n| world_countries_lists | LGPL-3.0-or-later | 3.3.0 | Stefan Gabos |\n| @hookform/resolvers | MIT | 5.4.0 | bluebill1049 |\n| @stencil/core | MIT | 4.38.3 | Ionic Team |\n| @types/node | MIT | 25.9.3 | n/a |\n| @types/papaparse | MIT | 5.5.2 | n/a |\n| @types/react | MIT | 19.2.17 | n/a |\n| @types/react-dom | MIT | 19.2.3 | n/a |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| papaparse | MIT | 5.5.3 | Matthew Holt https://twitter.com/mholt6 |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| react | MIT | 19.2.7 | n/a |\n| react-dom | MIT | 19.2.7 | n/a |\n| react-hook-form | MIT | 7.79.0 | Beier(Bill) Luo |\n| react-number-format | MIT | 5.4.5 | Sudhanshu Yadav |\n| react-router | MIT | 7.17.0 | Remix Software |\n| react-router-dom | MIT | 7.17.0 | Remix Software |\n| stylelint | MIT | 17.13.0 | stylelint |\n| zod | MIT | 4.4.3 | Colin McDonnell |\n\n## theme-bwst\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar SegersvΓ€rd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.13.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-default\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar SegersvΓ€rd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.13.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-desy\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar SegersvΓ€rd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.13.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-ecl\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar SegersvΓ€rd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.13.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## theme-kern\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @kern-ux/native | EUPL-1.2 | 2.3.0 | Kern-UX |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/visual-tests | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar SegersvΓ€rd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| stylelint | MIT | 17.13.0 | stylelint |\n| unbuild | MIT | 3.6.1 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @public-ui/stylelint-rules | n/a | 4.1.2-rc.1 | n/a |\n\n## themes\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | ------------------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @rollup/plugin-commonjs | MIT | 29.0.3 | Rich Harris |\n| @rollup/plugin-node-resolve | MIT | 16.0.3 | Rich Harris |\n| @rollup/plugin-typescript | MIT | 12.3.0 | Oskar SegersvΓ€rd |\n| autoprefixer | MIT | 10.5.0 | Andrey Sitnik |\n| cpy-cli | MIT | 7.0.0 | Sindre Sorhus sindresorhus@gmail.com https://sindresorhus.com |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| postcss | MIT | 8.5.15 | Andrey Sitnik |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| rollup | MIT | 4.62.0 | Rich Harris |\n| rollup-plugin-postcss | MIT | 4.0.2 | EGOIST |\n| sass-embedded | MIT | 1.100.0 | Google Inc. |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n\n## tools-kolibri-cli\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ---------- | -------------------------------------------------------------- |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| knip | ISC | 6.16.1 | Lars Kappert lars@webpro.nl |\n| semver | ISC | 7.8.4 | GitHub Inc. |\n| @types/node | MIT | 25.9.3 | n/a |\n| @types/semver | MIT | 7.7.1 | n/a |\n| chalk | MIT | 5.6.2 | n/a |\n| commander | MIT | 14.0.3 | TJ Holowaychuk |\n| cross-env | MIT | 10.1.0 | Kent C. Dodds |\n| deepmerge | MIT | 4.3.1 | n/a |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| gradient-string | MIT | 3.0.0 | Boris K |\n| loglevel | MIT | 1.9.2 | Tim Perry pimterry@gmail.com http://tim-perry.co.uk |\n| mocha | MIT | 11.7.6 | TJ Holowaychuk |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| ts-node | MIT | 10.9.2 | Blake Embrey hello@blakeembrey.com http://blakeembrey.me |\n| typed-bem | MIT | 1.0.2 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n\n## tools-mcp\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------------------- | ---------- | ---------------------------------------------------- |\n| fuse.js | Apache-2.0 | 7.4.2 | Kiro Risk kirollos@gmail.com http://kiro.me |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| knip | ISC | 6.16.1 | Lars Kappert lars@webpro.nl |\n| @modelcontextprotocol/sdk | MIT | 1.29.0 | Anthropic, PBC (https://anthropic.com) |\n| @types/express | MIT | 5.0.6 | n/a |\n| @types/node | MIT | 25.9.3 | n/a |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| express | MIT | 5.2.1 | TJ Holowaychuk |\n| nodemon | MIT | 3.1.14 | Remy Sharp https://github.com/remy |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| tsx | MIT | 4.22.4 | Hiroki Osame hiroki.osame@gmail.com |\n| unbuild | MIT | 3.6.1 | n/a |\n| zod | MIT | 4.4.3 | Colin McDonnell |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n| @modelcontextprotocol/inspector | SEE LICENSE IN LICENSE | 0.22.0 | Model Context Protocol a Series of LF Projects, LLC. |\n\n## tools-visual-tests\n\n| Package | License | Version | Author |\n| -------------------------------- | ---------- | ----------- | -------------------------------------------------------------- |\n| tslib | 0BSD | 2.8.1 | Microsoft Corp. |\n| @playwright/test | Apache-2.0 | 1.60.0 | Microsoft Corporation |\n| typescript | Apache-2.0 | 5.9.3 | Microsoft Corp. |\n| @public-ui/components | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/react-v19 | EUPL-1.2 | 4.3.0-rc.5 | Informationstechnikzentrum Bund kolibri@itzbund.de |\n| @public-ui/sample-react | EUPL-1.2 | 4.3.0-rc.5 | n/a |\n| adopted-style-sheets | EUPL-1.2 | 1.1.9-rc.22 | Martin Oppitz github@martinoppitz.com https://martinoppitz.com |\n| knip | ISC | 6.16.1 | Lars Kappert lars@webpro.nl |\n| @types/node | MIT | 25.9.2 | n/a |\n| @types/react | MIT | 19.2.17 | n/a |\n| @types/react-dom | MIT | 19.2.3 | n/a |\n| @unocss/preset-mini | MIT | 66.7.0 | Anthony Fu |\n| @unocss/vite | MIT | 66.7.0 | Anthony Fu |\n| @vitejs/plugin-react-swc | MIT | 4.3.1 | Arnaud BarrΓ© (https://github.com/ArnaudBarre) |\n| axe-html-reporter | MIT | 2.2.11 | Liliia Pelypenko (liliia.pelypenko@gmail.com) |\n| eslint | MIT | 9.39.4 | Nicholas C. Zakas |\n| http-server | MIT | 14.1.1 | n/a |\n| npm-run-all2 | MIT | 8.0.4 | Toru Nagashima |\n| portfinder | MIT | 1.0.38 | Charlie Robbins |\n| prettier | MIT | 3.8.4 | James Long |\n| prettier-plugin-organize-imports | MIT | 4.3.0 | Simon Haenisch (https://github.com/simonhaenisch) |\n| react | MIT | 19.2.7 | n/a |\n| react-dom | MIT | 19.2.7 | n/a |\n| react-router-dom | MIT | 7.17.0 | Remix Software |\n| vite | MIT | 8.0.16 | Evan You |\n| @axe-core/playwright | MPL-2.0 | 4.11.3 | n/a |\n| @public-ui/eslint-config | n/a | 4.3.0-rc.1 | n/a |\n",
401
401
  "kind": "doc"
402
402
  },
403
403
  {
@@ -445,7 +445,7 @@
445
445
  "group": "docs",
446
446
  "name": "README",
447
447
  "path": "README.md",
448
- "code": "# Welcome to KoliBri\n\n[![npm](https://img.shields.io/npm/v/@public-ui/components)](https://www.npmjs.com/package/@public-ui/components)\n[![license](https://img.shields.io/npm/l/@public-ui/components)](https://github.com/public-ui/kolibri/blob/main/LICENSE)\n[![downloads](https://img.shields.io/npm/dt/@public-ui/components)](https://www.npmjs.com/package/@public-ui/components)\n[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)\n[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)\n[![size](https://img.shields.io/bundlephobia/min/@public-ui/components)](https://bundlephobia.com/result?p=@public-ui/components)\n![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)\n\n> \"The accessible HTML standard\"\n\nKoliBri is **not a design system** in the traditional sense. Rather, we extend the HTML5 standard with self-contained, accessible Web Components β€” new HTML elements that work independently from any design or branding. These atomic components form a foundation that any design library, framework, or style guide can reuse and theme according to their needs.\n\n**KoliBri** stands for \"component library for accessibility\" and was released as\nopen source by the\n[Informationstechnikzentrum Bund (ITZBund)](https://itzbund.de) for reuse and\ncontinued development.\n\n## Vision\n\nTogether we make **HTML** accessible using **reusable web components** to ensure **usability** and **accessibility**.\n\n## Mission\n\nThe [HTML web standard](https://html.spec.whatwg.org) is itself very β€œopenly” specified in order to be as long-lasting and robust as possible. It therefore often happens that HTML compositions are not easily accessible, semantic and valid.\n\nKoliBri is based directly on the [Web standards](https://www.w3.org/standards/webdesign/) of the [W3C](https://www.w3.org) (framework-agnostic), and is generic Reference implementation of the [WCAG standard](https://www.w3.org/WAI/standards-guidelines/wcag/) and the [BITV](https://www.bitvtest.de/bitv_test.html) for accessibility and implemented as a multi-theming capable presentation layer. There is no technical reference and no data transfer functionality. This means that KoliBri is equally reusable for the realization of static websites as well as dynamic web applications with different corporate designs and style guides and is therefore very interesting for open source.\n\n## Roadmap\n\nKoliBri is always actively working on improvements, new features and future-oriented innovations for the latest major release. In parallel, a selected LTS release is maintained with regard to bug fixes.\n\n| Version | Release type | Release | Period | End-of-Support |\n| ------: | :----------: | :------: | :----: | :------------: |\n| 0.x | Initial | Jul 2020 | - | Dec 2021 |\n| 1.x | LTS | Dec 2021 | 3y | Dec 2024 |\n| 2.x | LTS | Dec 2023 | 3y | Dec 2026 |\n| 3.x | STS | Dec 2024 | 15m | Mar 2026 |\n| 4.x | LTS | Dec 2025 | 3y | Dec 2028 |\n| 5.x | STS | Dec 2026 | 15m | Mar 2028 |\n\n```mermaid\ngantt\n title LTS & STS\n dateFormat YYYY-MM-DD\n\n 0.x Initial implementation :, 2020-07-01, 17M\n 1.x (LTS) :, 2021-12-01, 3y\n 2.x (LTS) :, 2023-12-01, 3y\n 3.x (STS) :crit , 2024-12-01, 15M\n 4.x (LTS) :, 2025-12-01, 3y\n 5.x (STS) :crit , 2026-12-01, 15M\n 6.x (LTS) :, 2027-12-01, 3y\n\n```\n\n## Installation\n\nInstall the packages with [pnpm](https://pnpm.io):\n\n```bash\npnpm install\n```\n\nRun the build once to generate the components:\n\n```bash\npnpm -r build\n```\n\n### Quick start\n\nInstall the default theme and register the components:\n\n```ts\npnpm add @public-ui/components @public-ui/theme-default\n\nimport { register } from '@public-ui/components';\nimport { defineCustomElements } from '@public-ui/components/loader';\nimport { DEFAULT } from '@public-ui/theme-default';\n\nregister(DEFAULT, defineCustomElements);\n```\n\n### Avoid CSS Custom Property Collisions\n\nKoliBri themes expose a few CSS custom properties so consumers can adapt the look and feel.\nBecause these properties remain globalβ€”even inside a Shadow DOMβ€”using too many of them can\nclash with variables defined on the host page.\n\nUse namespaced custom properties only for values that must be overridden from the outside.\nFor internal calculations rely on SASS variables instead of additional CSS properties.\nThis keeps components robust and prevents unexpected style leaks.\n\n## Collaboration and cooperation\n\nThe **focus** of KoliBri is on **small** (atomic), very **flexible** and highly **reusable** HTML compositions (e.g. buttons). We offer an accessible, semantic and valid standard implementation of such components that can be reused for any higher-level HTML structure or component (molecule, organism or template).\nThese atomic components are where we should **collaborate** and **cooperate** to combine our skills and knowledge. The synergy effects on the basic components allow you to focus more on subject-specific content.\n\nLet's make KoliBri **better** and **more colorful** together!\n\n> Continue [to **Documentation**](https://public-ui.github.io/en/)…\n\n## Contributing\n\nBug reports and pull requests are welcome. Please read our [contribution guide](./CONTRIBUTING.md) before getting started.\n\n## SLSA/Provenance\n\nWe aim for **SLSA Build Level 3** for the npm packages published from this repository. Releases are built in GitHub Actions with OIDC-based identity and published with npm provenance (`--provenance`), producing verifiable attestations for the published artifacts. See the [publish workflow](./.github/workflows/publish.yml) for the release steps and npm provenance configuration.\n\n**Verification example**\n\n```bash\n# Inspect provenance metadata for a published package\npnpm view @public-ui/components dist.provenance\n\n# (Optional) Verify signatures/provenance if your npm client supports it\npnpm audit signatures --package=@public-ui/components@<version>\n```\n\n## Resources\n\n- [Get Started](https://public-ui.github.io/en/docs/get-started/first-steps)\n- [Contributing](./CONTRIBUTING.md)\n- [Code of Conduct](./CODE_OF_CONDUCT.md)\n- [Known Issues](http://public-ui.github.io/en/docs/known-issues)\n- [Security](./docs/SECURITY.md)\n",
448
+ "code": "# Welcome to KoliBri\n\n[![npm](https://img.shields.io/npm/v/@public-ui/components)](https://www.npmjs.com/package/@public-ui/components)\n[![license](https://img.shields.io/npm/l/@public-ui/components)](https://github.com/public-ui/kolibri/blob/main/LICENSE)\n[![downloads](https://img.shields.io/npm/dt/@public-ui/components)](https://www.npmjs.com/package/@public-ui/components)\n[![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)\n[![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)\n[![size](https://img.shields.io/bundlephobia/min/@public-ui/components)](https://bundlephobia.com/result?p=@public-ui/components)\n![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)\n[![mcp-oplist](https://mcptoplist.com/badge/glama%2Fpublic-ui%2Fkolibri.svg)](https://mcptoplist.com/server/glama%2Fpublic-ui%2Fkolibri)\n\n> \"The accessible HTML standard\"\n\nKoliBri is **not a design system** in the traditional sense. Rather, we extend the HTML5 standard with self-contained, accessible Web Components β€” new HTML elements that work independently from any design or branding. These atomic components form a foundation that any design library, framework, or style guide can reuse and theme according to their needs.\n\n**KoliBri** stands for \"component library for accessibility\" and was released as\nopen source by the\n[Informationstechnikzentrum Bund (ITZBund)](https://itzbund.de) for reuse and\ncontinued development.\n\n## Vision\n\nTogether we make **HTML** accessible using **reusable web components** to ensure **usability** and **accessibility**.\n\n## Mission\n\nThe [HTML web standard](https://html.spec.whatwg.org) is itself very β€œopenly” specified in order to be as long-lasting and robust as possible. It therefore often happens that HTML compositions are not easily accessible, semantic and valid.\n\nKoliBri is based directly on the [Web standards](https://www.w3.org/standards/webdesign/) of the [W3C](https://www.w3.org) (framework-agnostic), and is generic Reference implementation of the [WCAG standard](https://www.w3.org/WAI/standards-guidelines/wcag/) and the [BITV](https://www.bitvtest.de/bitv_test.html) for accessibility and implemented as a multi-theming capable presentation layer. There is no technical reference and no data transfer functionality. This means that KoliBri is equally reusable for the realization of static websites as well as dynamic web applications with different corporate designs and style guides and is therefore very interesting for open source.\n\n## Roadmap\n\nKoliBri is always actively working on improvements, new features and future-oriented innovations for the latest major release. In parallel, a selected LTS release is maintained with regard to bug fixes.\n\n| Version | Release type | Release | Period | End-of-Support |\n| ------: | :----------: | :------: | :----: | :------------: |\n| 0.x | Initial | Jul 2020 | - | Dec 2021 |\n| 1.x | LTS | Dec 2021 | 3y | Dec 2024 |\n| 2.x | LTS | Dec 2023 | 3y | Dec 2026 |\n| 3.x | STS | Dec 2024 | 15m | Mar 2026 |\n| 4.x | LTS | Dec 2025 | 3y | Dec 2028 |\n| 5.x | STS | Dec 2026 | 15m | Mar 2028 |\n\n```mermaid\ngantt\n title LTS & STS\n dateFormat YYYY-MM-DD\n\n 0.x Initial implementation :, 2020-07-01, 17M\n 1.x (LTS) :, 2021-12-01, 3y\n 2.x (LTS) :, 2023-12-01, 3y\n 3.x (STS) :crit , 2024-12-01, 15M\n 4.x (LTS) :, 2025-12-01, 3y\n 5.x (STS) :crit , 2026-12-01, 15M\n 6.x (LTS) :, 2027-12-01, 3y\n\n```\n\n## Installation\n\nInstall the packages with [pnpm](https://pnpm.io):\n\n```bash\npnpm install\n```\n\nRun the build once to generate the components:\n\n```bash\npnpm -r build\n```\n\n### Quick start\n\nInstall the default theme and register the components:\n\n```ts\npnpm add @public-ui/components @public-ui/theme-default\n\nimport { register } from '@public-ui/components';\nimport { defineCustomElements } from '@public-ui/components/loader';\nimport { DEFAULT } from '@public-ui/theme-default';\n\nregister(DEFAULT, defineCustomElements);\n```\n\n### Avoid CSS Custom Property Collisions\n\nKoliBri themes expose a few CSS custom properties so consumers can adapt the look and feel.\nBecause these properties remain globalβ€”even inside a Shadow DOMβ€”using too many of them can\nclash with variables defined on the host page.\n\nUse namespaced custom properties only for values that must be overridden from the outside.\nFor internal calculations rely on SASS variables instead of additional CSS properties.\nThis keeps components robust and prevents unexpected style leaks.\n\n## Collaboration and cooperation\n\nThe **focus** of KoliBri is on **small** (atomic), very **flexible** and highly **reusable** HTML compositions (e.g. buttons). We offer an accessible, semantic and valid standard implementation of such components that can be reused for any higher-level HTML structure or component (molecule, organism or template).\nThese atomic components are where we should **collaborate** and **cooperate** to combine our skills and knowledge. The synergy effects on the basic components allow you to focus more on subject-specific content.\n\nLet's make KoliBri **better** and **more colorful** together!\n\n> Continue [to **Documentation**](https://public-ui.github.io/en/)…\n\n## Contributing\n\nBug reports and pull requests are welcome. Please read our [contribution guide](./CONTRIBUTING.md) before getting started.\n\n## SLSA/Provenance\n\nWe aim for **SLSA Build Level 3** for the npm packages published from this repository. Releases are built in GitHub Actions with OIDC-based identity and published with npm provenance (`--provenance`), producing verifiable attestations for the published artifacts. See the [publish workflow](./.github/workflows/publish.yml) for the release steps and npm provenance configuration.\n\n**Verification example**\n\n```bash\n# Inspect provenance metadata for a published package\npnpm view @public-ui/components dist.provenance\n\n# (Optional) Verify signatures/provenance if your npm client supports it\npnpm audit signatures --package=@public-ui/components@<version>\n```\n\n## Resources\n\n- [Get Started](https://public-ui.github.io/en/docs/get-started/first-steps)\n- [Contributing](./CONTRIBUTING.md)\n- [Code of Conduct](./CODE_OF_CONDUCT.md)\n- [Known Issues](http://public-ui.github.io/en/docs/known-issues)\n- [Security](./docs/SECURITY.md)\n",
449
449
  "kind": "doc"
450
450
  },
451
451
  {
@@ -509,7 +509,7 @@
509
509
  "group": "abbr",
510
510
  "name": "basic",
511
511
  "path": "packages/samples/react/src/components/abbr/basic.tsx",
512
- "code": "import React from 'react';\n\nimport { KolAbbr } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\nexport const AbbrBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolAbbr shows an abbreviation and uses kol-tooltip-wc to display the long form, if provided.</p>\n\t\t</SampleDescription>\n\n\t\t<p>\n\t\t\tI am <KolAbbr _label=\"as an example\">e.g.</KolAbbr> an abbreviation.\n\t\t</p>\n\n\t\t<p>\n\t\t\tI am <KolAbbr>e.g.</KolAbbr> an abbreviation without label.\n\t\t</p>\n\t</>\n);\n",
512
+ "code": "import React from 'react';\n\nimport { KolAbbr } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\nexport const AbbrBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolAbbr shows an abbreviation.</p>\n\t\t</SampleDescription>\n\n\t\t<p>\n\t\t\tI am <KolAbbr>e.g.</KolAbbr> an abbreviation.\n\t\t</p>\n\t</>\n);\n",
513
513
  "kind": "sample"
514
514
  },
515
515
  {
@@ -560,6 +560,14 @@
560
560
  "code": "import { KolAvatar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const AvatarBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolAvatar shows a user&apos;s avatar with customizable colors. It can be used with or without an image. If no image is defined, the name&apos;s initials\n\t\t\t\tare shown instead with a configurable background color.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t<KolAvatar _src=\"assets/img_avatar.jpg\" _label=\"Elke Mustermann\" />\n\n\t\t\t{/* intentional trailing space πŸ‘‡ - it's supposed to be trimmed */}\n\t\t\t<KolAvatar _label=\"Elke Mustermann \" />\n\t\t\t<KolAvatar _label=\"Marianne\" />\n\t\t\t<KolAvatar _color=\"#0000FF\" _label=\"Christian\" />\n\t\t</div>\n\t</>\n);\n",
561
561
  "kind": "sample"
562
562
  },
563
+ {
564
+ "id": "sample/avatar/size",
565
+ "group": "avatar",
566
+ "name": "size",
567
+ "path": "packages/samples/react/src/components/avatar/size.tsx",
568
+ "code": "import { KolAvatar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const AvatarSize: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolAvatar is <code>6.25rem</code> (100px at the default 16px root font-size) wide/tall by default and simply fills its host element, so it can be\n\t\t\t\tresized proportionally with plain CSS <code>width</code> and/or <code>height</code> (set through the <code>style</code> prop). Setting only{' '}\n\t\t\t\t<code>width</code> is the reliable way to size it below the default. If <code>width</code> and <code>height</code> are set to different values, the\n\t\t\t\tavatar stays square by using the larger of the two - it is centered on its host and may visually extend beyond it on the smaller axis. The\n\t\t\t\tinitials&apos; font size always scales with the resulting size automatically.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap items-center gap-4\">\n\t\t\t<KolAvatar style={{ width: '30px' }} _label=\"Elke Mustermann\" />\n\t\t\t<KolAvatar style={{ width: '30px', height: '45px' }} _label=\"Marianne\" />\n\t\t\t<KolAvatar style={{ width: '60px', height: '30px' }} _color=\"#0000FF\" _label=\"Christian\" />\n\t\t\t<KolAvatar _src=\"assets/img_avatar.jpg\" _label=\"Elke Mustermann\" />\n\t\t\t<KolAvatar style={{ width: '150px' }} _src=\"assets/img_avatar.jpg\" _label=\"Elke Mustermann\" />\n\t\t</div>\n\t</>\n);\n",
569
+ "kind": "sample"
570
+ },
563
571
  {
564
572
  "id": "sample/badge/basic",
565
573
  "group": "badge",
@@ -672,6 +680,14 @@
672
680
  "code": "import { KolButton, KolHeading, KolIcon } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useRef } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nimport './expert-slot.tooltip.scss';\n\nconst KolTooltip = 'kol-tooltip-wc' as unknown as React.FC<{ _label: string }>;\n\nexport const ButtonExpertSlot: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst iconButtonRef = useRef<HTMLElement>(null);\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=\"kolicon-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=\"kolicon-kolibri\" _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=\"kolicon-alert-warning\" _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\t<KolButton ref={iconButtonRef as React.Ref<never>} _label=\"\" _variant=\"danger\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<KolIcon _icons=\"kolicon-alert-warning\" _label=\"Delete with custom text\" slot=\"expert\" />\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolTooltip _label=\"Delete with custom text\" />\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=\"kolicon-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=\"kolicon-eye-closed\" _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",
673
681
  "kind": "sample"
674
682
  },
683
+ {
684
+ "id": "sample/button/fixed-grid",
685
+ "group": "button",
686
+ "name": "fixed-grid",
687
+ "path": "packages/samples/react/src/components/button/buttons-in-fixed-grid.tsx",
688
+ "code": "import { KolButton, KolLinkButton } 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 ButtonInFixedGrid: 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>All this buttons are in a grid with fixed height (60px) and width (25% of screen) and should accept this dimensions.</p>\n\t\t\t</SampleDescription>\n\t\t\t<div className=\"grid gap-4 fixed-height-grid\">\n\t\t\t\t<KolButton _variant=\"primary\" _icons=\"kolicon-house\" _label=\"Button\" _on={dummyEventHandler} />\n\t\t\t\t<KolButton _variant=\"primary\" _hideLabel _icons=\"kolicon-house\" _label=\"Button\" _on={dummyEventHandler} />\n\t\t\t\t<KolLinkButton _variant=\"primary\" _href=\"#\" _icons=\"kolicon-house\" _label=\"Link-Button\" _on={dummyEventHandler} />\n\t\t\t\t<KolLinkButton _variant=\"primary\" _hideLabel _href=\"#\" _icons=\"kolicon-house\" _label=\"Link-Button\" _on={dummyEventHandler} />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
689
+ "kind": "sample"
690
+ },
675
691
  {
676
692
  "id": "sample/button/focus-options",
677
693
  "group": "button",
@@ -725,7 +741,7 @@
725
741
  "group": "button",
726
742
  "name": "variants",
727
743
  "path": "packages/samples/react/src/components/button/variants.tsx",
728
- "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=\"kolicon-house\" _label=\"Primary\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-kolibri\" _label=\"Secondary\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-cogwheel\" _label=\"Tertiary\" _variant=\"tertiary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-cogwheel\" _label=\"Normal\" _variant=\"normal\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-alert-warning\" _label=\"Danger\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-eye-closed\" _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",
744
+ "code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useMemo } from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { fetchVariantData } from '../../shares/fetchVariantData';\nimport { getCustomThemes } from '../../shares/store';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonVariants: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst theme = searchParams.get('theme') ?? getCustomThemes()?.[0]?.key;\n\tconst data = useMemo(() => (theme ? fetchVariantData(theme, 'buttonVariants') : []), [theme]);\n\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 showcases all available button variants for this theme. You can import <code>ButtonVariantsEnum</code> from your theme to always use the\n\t\t\t\t\tright variants.\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=\"All theme exclusive button variants\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4 items-center\">\n\t\t\t\t\t\t{!Array.isArray(data) || data.length === 0 ? (\n\t\t\t\t\t\t\t<p>This theme has no variants for this component.</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tdata.map((element) => {\n\t\t\t\t\t\t\t\treturn <KolButton _icons=\"kolicon-house\" _label={`${element}`} _variant={element} key={element} _on={dummyEventHandler} />;\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4 items-center\">\n\t\t\t\t\t\t{!Array.isArray(data) || data.length === 0 ? (\n\t\t\t\t\t\t\t<p>This theme has no variants for this component.</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tdata.map((element) => {\n\t\t\t\t\t\t\t\treturn <KolButton _hideLabel _icons=\"kolicon-settings\" _label={`${element}`} _variant={element} key={element} _on={dummyEventHandler} />;\n\t\t\t\t\t\t\t})\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",
729
745
  "kind": "sample"
730
746
  },
731
747
  {
@@ -792,6 +808,14 @@
792
808
  "code": "import type { FC } from 'react';\nimport React, { useEffect, useRef } from 'react';\n\nimport { KolButton, KolDialog } from '@public-ui/react-v19';\nimport { useSearchParams } from 'react-router';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const DialogBasic: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\n\tconst showDialog = searchParams.get('show-dialog') as string;\n\n\tconst blankRef = useRef<HTMLKolDialogElement>(null);\n\tconst cardRef = useRef<HTMLKolDialogElement>(null);\n\n\tconst onOpenBlankDialog = {\n\t\tonClick: () => blankRef.current?.openModal(),\n\t};\n\tconst onOpenCardDialog = {\n\t\tonClick: () => cardRef.current?.openModal(),\n\t};\n\tconst onCloseBlankDialog = {\n\t\tonClick: () => blankRef.current?.closeModal(),\n\t};\n\n\tuseEffect(() => {\n\t\tif (showDialog === 'true') {\n\t\t\tblankRef.current?.openModal();\n\t\t\tcardRef.current?.openModal();\n\t\t}\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tKolDialog supports the variants <code>blank</code> and <code>card</code>. The card variant includes a <code>KolCard</code> container and a closer\n\t\t\t\t\tbutton.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<div>\n\t\t\t\t\t<KolButton _label=\"Open blank dialog\" _on={onOpenBlankDialog} />\n\t\t\t\t\t<KolDialog ref={blankRef} _label=\"Blank dialog\" _variant=\"blank\" _width=\"40%\">\n\t\t\t\t\t\t<div className=\"bg-white p-4 rounded shadow\">\n\t\t\t\t\t\t\t<p className=\"mt-0\">You must add styling and a close button yourself.</p>\n\t\t\t\t\t\t\t<KolButton _label=\"Open card dialog\" className=\"mr\" _on={onOpenCardDialog} />\n\t\t\t\t\t\t\t<KolButton _label=\"Close\" _on={onCloseBlankDialog} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</KolDialog>\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\t<KolButton _label=\"Open card dialog\" _on={onOpenCardDialog} />\n\t\t\t\t\t<KolDialog ref={cardRef} _label=\"Card dialog\" _variant=\"card\" _width=\"30%\">\n\t\t\t\t\t\t<p className=\"mt-0\">This variant wraps content inside a KolCard.</p>\n\t\t\t\t\t</KolDialog>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
793
809
  "kind": "sample"
794
810
  },
811
+ {
812
+ "id": "sample/dialog/scroll-lock",
813
+ "group": "dialog",
814
+ "name": "scroll-lock",
815
+ "path": "packages/samples/react/src/components/dialog/scroll-lock.tsx",
816
+ "code": "import type { FC } from 'react';\nimport React, { useRef } from 'react';\n\nimport { KolButton, KolDialog, KolDrawer } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const DialogScrollLock: FC = () => {\n\tconst dialogRef = useRef<HTMLKolDialogElement>(null);\n\tconst drawerRef = useRef<HTMLKolDrawerElement>(null);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tDemonstrates that opening <strong>KolDialog</strong>/<strong>KolModal</strong> or <strong>KolDrawer</strong> modally locks the background scroll: the\n\t\t\t\t\tpage behind the overlay must not scroll, neither via mouse wheel/touch over the backdrop nor by dragging the page scrollbar. Non-modal{' '}\n\t\t\t\t\t<code>show()</code> does not lock.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t<strong>How to test:</strong> scroll this long page down a bit, open the dialog or drawer below, then try to scroll the background (mouse wheel over\n\t\t\t\t\tthe dimmed backdrop, or drag the scrollbar) – it should stay put. Close the overlay again and the page should scroll normally, restored to the same\n\t\t\t\t\tposition without a layout shift.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-wrap gap-4 mb-4\">\n\t\t\t\t<KolButton _label=\"Open modal dialog\" _on={{ onClick: () => dialogRef.current?.showModal() }} />\n\t\t\t\t<KolButton _label=\"Open modal drawer\" _on={{ onClick: () => drawerRef.current?.showModal() }} />\n\t\t\t</div>\n\n\t\t\t<KolDialog ref={dialogRef} _label=\"Scroll lock dialog\" _variant=\"card\" _width=\"30%\">\n\t\t\t\t<p className=\"mt-0\">While I am open, the background must not scroll.</p>\n\t\t\t\t<KolButton _label=\"Close\" _on={{ onClick: () => dialogRef.current?.closeModal() }} />\n\t\t\t</KolDialog>\n\n\t\t\t<KolDrawer ref={drawerRef} _label=\"Scroll lock drawer\" _align=\"right\">\n\t\t\t\t<p className=\"mt-0\">While I am open, the background must not scroll.</p>\n\t\t\t\t<KolButton _label=\"Close\" _on={{ onClick: () => drawerRef.current?.close() }} />\n\t\t\t</KolDrawer>\n\n\t\t\t<div style={{ height: '200vh', flexShrink: 0 }} className=\"border border-dashed border-gray p-4\">\n\t\t\t\t<p>This tall block simulates a long page. Scroll down, open an overlay above, and try to scroll here.</p>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
817
+ "kind": "sample"
818
+ },
795
819
  {
796
820
  "id": "sample/dialog/with-alert",
797
821
  "group": "dialog",
@@ -853,7 +877,7 @@
853
877
  "group": "handout",
854
878
  "name": "basic",
855
879
  "path": "packages/samples/react/src/components/handout/basic.tsx",
856
- "code": "import type { KoliBriTableCell, 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 { ComponentProps, 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\ntype KolButtonProps = ComponentProps<typeof KolButton>;\n\nfunction KolButtonWrapper(props: KolButtonProps & { style: Record<string, unknown> }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\treturn <KolButton {...props} _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\twidth: 500,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Weekend',\n\t\t\t\tcolSpan: 2,\n\t\t\t\twidth: 200,\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: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolButtonWrapper _label={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: 100,\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: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#060\" _label={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: 100,\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: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#006\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 110,\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: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#600\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 100,\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: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#303\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 100,\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: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#330\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 100,\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: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#033\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 100,\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\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Noon',\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Evening',\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Night',\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t],\n\t],\n};\n\nconst renderCellContent = (element: HTMLElement, content: React.ReactNode) => {\n\tconst renderElement = document.createElement('div');\n\trenderElement.setAttribute('role', 'presentation');\n\telement.innerHTML = '';\n\telement.appendChild(renderElement);\n\tgetRoot(renderElement).render(content);\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=\"kolicon-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=\"kolicon-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=\"kolicon-house\" _label=\"Link text with icon\"></KolLink>\n\t\t\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"kolicon-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=\"kolicon-house\" _label=\"Link text with icon\"></KolButtonLink>\n\t\t\t\t\t\t\t\t<KolButtonLink _icons=\"kolicon-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: 'kolicon-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: 'kolicon-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: 'kolicon-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: 'kolicon-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: 'kolicon-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: 'kolicon-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: 'kolicon-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: 'kolicon-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: 'kolicon-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': 'kolicon-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=\"gap-2 p-2 flex flex-col\">\n\t\t\t\t\t\t<KolTableStateful _label=\"Table\" _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",
880
+ "code": "import type { KoliBriTableCell, 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 { ComponentProps, 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\ntype KolButtonProps = ComponentProps<typeof KolButton>;\n\nfunction KolButtonWrapper(props: KolButtonProps & { style: Record<string, unknown> }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\treturn <KolButton {...props} _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\twidth: 500,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Weekend',\n\t\t\t\tcolSpan: 2,\n\t\t\t\twidth: 200,\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: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolButtonWrapper _label={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: 100,\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: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#060\" _label={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: 100,\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: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#006\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 110,\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: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#600\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 100,\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: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#303\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 100,\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: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#330\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 100,\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: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#033\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 100,\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\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Noon',\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Evening',\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Night',\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t],\n\t],\n};\n\nconst renderCellContent = (element: HTMLElement, content: React.ReactNode) => {\n\tconst renderElement = document.createElement('div');\n\trenderElement.setAttribute('role', 'presentation');\n\telement.innerHTML = '';\n\telement.appendChild(renderElement);\n\tgetRoot(renderElement).render(content);\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>e.g.</KolAbbr> an abbreviation.\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=\"kolicon-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=\"kolicon-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=\"kolicon-house\" _label=\"Link text with icon\"></KolLink>\n\t\t\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"kolicon-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=\"kolicon-house\" _label=\"Link text with icon\"></KolButtonLink>\n\t\t\t\t\t\t\t\t<KolButtonLink _icons=\"kolicon-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: 'kolicon-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: 'kolicon-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: 'kolicon-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: 'kolicon-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: 'kolicon-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: 'kolicon-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: 'kolicon-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: 'kolicon-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: 'kolicon-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': 'kolicon-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>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=\"gap-2 p-2 flex flex-col\">\n\t\t\t\t\t\t<KolTableStateful _label=\"Table\" _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",
857
881
  "kind": "sample"
858
882
  },
859
883
  {
@@ -1325,7 +1349,7 @@
1325
1349
  "group": "link-button",
1326
1350
  "name": "basic",
1327
1351
  "path": "packages/samples/react/src/components/link-button/basic.tsx",
1328
- "code": "import React from 'react';\n\nimport { KolLinkButton } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nconst ARGS = {\n\t_href: '#/back-page',\n};\n\nexport const LinkButtonBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolLinkButton renders a link that looks like a button. The sample shows the different styling variants.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t<KolLinkButton _label=\"Primary\" _variant=\"primary\" {...ARGS}></KolLinkButton>\n\t\t\t<KolLinkButton _label=\"Secondary\" _variant=\"secondary\" {...ARGS}></KolLinkButton>\n\t\t\t<KolLinkButton _label=\"Normal\" _variant=\"normal\" {...ARGS}></KolLinkButton>\n\t\t\t<KolLinkButton _label=\"Danger\" _variant=\"danger\" {...ARGS}></KolLinkButton>\n\t\t\t<KolLinkButton _label=\"Ghost\" _variant=\"ghost\" {...ARGS}></KolLinkButton>\n\t\t\t<KolLinkButton _label=\"Access Key\" _variant=\"primary\" _accessKey=\"c\" {...ARGS}></KolLinkButton>\n\t\t\t<KolLinkButton _label=\"Short Key\" _variant=\"primary\" _shortKey=\"s\" {...ARGS}></KolLinkButton>\n\t\t</div>\n\t</>\n);\n",
1352
+ "code": "import React, { useMemo } from 'react';\n\nimport { KolLinkButton } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { fetchVariantData } from '../../shares/fetchVariantData';\nimport { getCustomThemes } from '../../shares/store';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkButtonBasic: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst theme = searchParams.get('theme') ?? getCustomThemes()?.[0]?.key;\n\tconst data = useMemo(() => (theme ? fetchVariantData(theme, 'buttonVariants') : []), [theme]);\n\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolLinkButton renders a link that looks like a button. The sample shows the different theme exclusive styling variants.</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<div className=\"flex flex-wrap gap-4 items-center\">\n\t\t\t\t\t\t{!Array.isArray(data) || data.length === 0 ? (\n\t\t\t\t\t\t\t<p>This theme has no variants for this component.</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tdata.map((element) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons=\"kolicon-house\" _label={`${element}`} _variant={element} key={element} _on={dummyEventHandler} />\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</div>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4 items-center\">\n\t\t\t\t\t\t{!Array.isArray(data) || data.length === 0 ? (\n\t\t\t\t\t\t\t<p>This theme has no variants for this component.</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tdata.map((element) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<KolLinkButton\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_hideLabel\n\t\t\t\t\t\t\t\t\t\t_icons=\"kolicon-settings\"\n\t\t\t\t\t\t\t\t\t\t_label={`${element}`}\n\t\t\t\t\t\t\t\t\t\t_variant={element}\n\t\t\t\t\t\t\t\t\t\tkey={element}\n\t\t\t\t\t\t\t\t\t\t_on={dummyEventHandler}\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</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
1329
1353
  "kind": "sample"
1330
1354
  },
1331
1355
  {
@@ -1552,6 +1576,14 @@
1552
1576
  "code": "import { KolSelect } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { InputEventValueDemo } from '../InputEventValueDemo';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const SelectOnInputOnChange: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tShows the callback value from <code>onInput</code> while typing and from <code>onChange</code> after leaving the field.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<InputEventValueDemo\n\t\t\tlabel=\"KolSelect\"\n\t\t\trenderInput={(handlers) => (\n\t\t\t\t<KolSelect\n\t\t\t\t\t_label=\"Select option\"\n\t\t\t\t\t_options={[\n\t\t\t\t\t\t{ label: 'Please select…', value: '' },\n\t\t\t\t\t\t{ label: 'One', value: 'one' },\n\t\t\t\t\t\t{ label: 'Two', value: 'two' },\n\t\t\t\t\t]}\n\t\t\t\t\t_on={handlers}\n\t\t\t\t/>\n\t\t\t)}\n\t\t/>\n\t</>\n);\n",
1553
1577
  "kind": "sample"
1554
1578
  },
1579
+ {
1580
+ "id": "sample/select/multiple-dropdown",
1581
+ "group": "select",
1582
+ "name": "multiple-dropdown",
1583
+ "path": "packages/samples/react/src/components/select/multiple-dropdown.tsx",
1584
+ "code": "import { KolSelect } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { InputEventValueDemo } from '../InputEventValueDemo';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const SelectMultipleDropdown: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>Shows KolSelect with multiple=true and rows=1 - a select with multiselection in a dropdown.</p>\n\t\t</SampleDescription>\n\n\t\t<InputEventValueDemo\n\t\t\tlabel=\"KolSelect\"\n\t\t\trenderInput={(handlers) => (\n\t\t\t\t<KolSelect\n\t\t\t\t\t_label=\"Select options\"\n\t\t\t\t\t_options={[\n\t\t\t\t\t\t{ label: 'One', value: 'one' },\n\t\t\t\t\t\t{ label: 'Two', value: 'two' },\n\t\t\t\t\t\t{ label: 'Three', value: 'three' },\n\t\t\t\t\t\t{ label: 'Four', value: 'four' },\n\t\t\t\t\t\t{ label: 'Five', value: 'five' },\n\t\t\t\t\t\t{ label: 'Six', value: 'six' },\n\t\t\t\t\t\t{ label: 'Seven', value: 'seven' },\n\t\t\t\t\t\t{ label: 'Eight', value: 'eight' },\n\t\t\t\t\t\t{ label: 'Nine', value: 'nine' },\n\t\t\t\t\t]}\n\t\t\t\t\t_multiple={true}\n\t\t\t\t\t_rows={1}\n\t\t\t\t\t_on={handlers}\n\t\t\t\t/>\n\t\t\t)}\n\t\t/>\n\t</>\n);\n",
1585
+ "kind": "sample"
1586
+ },
1555
1587
  {
1556
1588
  "id": "sample/single-select/basic",
1557
1589
  "group": "single-select",
@@ -1725,7 +1757,7 @@
1725
1757
  "group": "table",
1726
1758
  "name": "interactive-child-elements",
1727
1759
  "path": "packages/samples/react/src/components/table/interactive-child-elements.tsx",
1728
- "code": "import type { ButtonVariantPropType, KoliBriTableCell, KoliBriTableHeaderCell } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolButtonLink, KolLink, KolLinkButton, KolTableStateless } from '@public-ui/react-v19';\nimport type { ComponentProps, FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\ntype KolButtonProps = ComponentProps<typeof KolButton>;\n\nfunction KolButtonWrapper(props: KolButtonProps) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\treturn <KolButton {...props} _on={dummyEventHandler} />;\n}\n\nconst getButtonHeaderCell = (variant: ButtonVariantPropType): KoliBriTableHeaderCell => {\n\tconst variantLabel = `${variant}`;\n\tconst capitalizedVariant = variantLabel.charAt(0).toUpperCase() + variantLabel.slice(1);\n\treturn {\n\t\tlabel: capitalizedVariant,\n\t\tkey: variantLabel,\n\t\ttextAlign: 'left',\n\t\twidth: 160,\n\t\trender: (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\tconst { label } = cell as { label: string };\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\tlabel === '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_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: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'Button', width: 120 },\n\t\t\t\t\t\t\t{ label: 'Link-Button', width: 120 },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\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_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\twidth: 180,\n\t\t\t\t\t\t\t\trender: (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\t\t\t\t\tconst commonProps = {\n\t\t\t\t\t\t\t\t\t\t_label: 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\tlabel === '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: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'Link', width: 140 },\n\t\t\t\t\t\t\t{ label: 'Button-Link', width: 140 },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\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",
1760
+ "code": "import type { KoliBriTableCell, KoliBriTableHeaderCell, VariantClassNamePropType } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolButtonLink, KolLink, KolLinkButton, KolTableStateless } from '@public-ui/react-v19';\nimport type { ComponentProps, FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\ntype KolButtonProps = ComponentProps<typeof KolButton>;\n\nfunction KolButtonWrapper(props: KolButtonProps) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\treturn <KolButton {...props} _on={dummyEventHandler} />;\n}\n\nconst getButtonHeaderCell = (variant: VariantClassNamePropType): KoliBriTableHeaderCell => {\n\tconst variantLabel = `${variant}`;\n\tconst capitalizedVariant = variantLabel.charAt(0).toUpperCase() + variantLabel.slice(1);\n\treturn {\n\t\tlabel: capitalizedVariant,\n\t\tkey: variantLabel,\n\t\ttextAlign: 'left',\n\t\twidth: 160,\n\t\trender: (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\tconst { label } = cell as { label: string };\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\tlabel === '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_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: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'Button', width: 120 },\n\t\t\t\t\t\t\t{ label: 'Link-Button', width: 120 },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\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_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\twidth: 180,\n\t\t\t\t\t\t\t\trender: (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\t\t\t\t\tconst commonProps = {\n\t\t\t\t\t\t\t\t\t\t_label: 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\tlabel === '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: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{ label: 'Link', width: 140 },\n\t\t\t\t\t\t\t{ label: 'Button-Link', width: 140 },\n\t\t\t\t\t\t],\n\t\t\t\t\t],\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",
1729
1761
  "kind": "sample"
1730
1762
  },
1731
1763
  {
@@ -1813,7 +1845,7 @@
1813
1845
  "group": "table",
1814
1846
  "name": "stateful-with-selection",
1815
1847
  "path": "packages/samples/react/src/components/table/stateful-with-selection.tsx",
1816
- "code": "import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } 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];\ntype KolTableStatefulElement = {\n\taddEventListener: (type: string, listener: (event: CustomEvent<Data[]>) => void) => void;\n\tremoveEventListener: (type: string, listener: (event: CustomEvent<Data[]>) => void) => void;\n\tgetSelection?: () => Promise<KoliBriTableDataType[] | null>;\n};\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 }: CustomEvent<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 tableElement = kolTableStatefulRef.current as unknown as KolTableStatefulElement | null;\n\t\tconst selection = await tableElement?.getSelection?.();\n\t\tsetSelectedValue(selection as Data[] | null);\n\t};\n\n\tuseEffect(() => {\n\t\tconst tableElement = kolTableStatefulRef.current as unknown as KolTableStatefulElement | null;\n\t\tconst selectionChangeEvent = 'kolSelectionChange';\n\t\ttableElement?.addEventListener(selectionChangeEvent, handleSelectionChangeEvent);\n\n\t\treturn () => {\n\t\t\ttableElement?.removeEventListener(selectionChangeEvent, handleSelectionChangeEvent);\n\t\t};\n\t}, [kolTableStatefulRef]);\n\n\tconst renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\tconst data = (cell as { data?: Data }).data;\n\t\tconst id = data?.id;\n\t\tgetRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${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_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",
1848
+ "code": "import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';\nimport { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { KoliBriTableHeaderCellWithLogic } from '@public-ui/components';\n\ntype ProjectTask = {\n\tid: string;\n\tproject: string;\n\towner: string;\n};\n\nconst HEADERS: { horizontal: KoliBriTableHeaderCellWithLogic[][] } = {\n\thorizontal: [\n\t\t[\n\t\t\t{ key: 'id', label: 'ID', width: 80 },\n\t\t\t{ key: 'project', label: 'Project', width: 200 },\n\t\t\t{ key: 'owner', label: 'Owner', width: 200 },\n\t\t\t{\n\t\t\t\ttype: 'action',\n\t\t\t\tkey: 'actions',\n\t\t\t\tlabel: 'Actions',\n\t\t\t\twidth: 250,\n\t\t\t\tactions: (row) => {\n\t\t\t\t\tconst simpleRow = row as ProjectTask;\n\t\t\t\t\treturn [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t\t_label: 'Details',\n\t\t\t\t\t\t\t_icons: 'kolicon-eye',\n\t\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t\t_on: {\n\t\t\t\t\t\t\t\tonClick: () => alert(`Details: ${simpleRow.id} - ${simpleRow.project}`),\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],\n\t],\n};\n\nconst DATA: ProjectTask[] = [\n\t{\n\t\tid: 'T-01',\n\t\tproject: 'Onboarding checklist',\n\t\towner: 'Alex Rivera',\n\t},\n\t{\n\t\tid: 'T-02',\n\t\tproject: 'Accessibility audit',\n\t\towner: 'Jamie Chen',\n\t},\n\t{\n\t\tid: 'T-03',\n\t\tproject: 'UX audit',\n\t\towner: 'Tyler Gray',\n\t},\n\t{\n\t\tid: 'T-04',\n\t\tproject: 'Software Architectur',\n\t\towner: 'Tess Richardson',\n\t},\n];\n\nexport const TableStatefulWithSelection: FC = () => {\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as ProjectTask).id}`,\n\t\tselectedKeys: ['T-01'],\n\t\tdisabledKeys: ['T-04'],\n\t\tkeyPropertyName: 'id',\n\t};\n\n\tconst handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | null) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tSimple example using the refactored action column: Actions are defined once in the column header definition using a factory function. Two rows with\n\t\t\t\t\tinline action buttons demonstrate clean separation between data and UI behavior.\n\t\t\t\t</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=\"Tasks with action buttons\"\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
1817
1849
  "kind": "sample"
1818
1850
  },
1819
1851
  {
@@ -1821,7 +1853,7 @@
1821
1853
  "group": "table",
1822
1854
  "name": "stateful-with-single-selection",
1823
1855
  "path": "packages/samples/react/src/components/table/stateful-with-single-selection.tsx",
1824
- "code": "import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } 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];\ntype KolTableStatefulElement = {\n\taddEventListener: (type: string, listener: (event: CustomEvent<Data[]>) => void) => void;\n\tremoveEventListener: (type: string, listener: (event: CustomEvent<Data[]>) => void) => void;\n\tgetSelection?: () => Promise<KoliBriTableDataType[] | null>;\n};\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 }: CustomEvent<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 tableElement = kolTableStatefulRef.current as unknown as KolTableStatefulElement | null;\n\t\tconst selection = await tableElement?.getSelection?.();\n\t\tsetSelectedValue(selection as Data | null);\n\t};\n\n\tuseEffect(() => {\n\t\tconst tableElement = kolTableStatefulRef.current as unknown as KolTableStatefulElement | null;\n\t\tconst selectionChangeEvent = 'kolSelectionChange';\n\t\ttableElement?.addEventListener(selectionChangeEvent, handleSelectionChangeEvent);\n\n\t\treturn () => {\n\t\t\ttableElement?.removeEventListener(selectionChangeEvent, handleSelectionChangeEvent);\n\t\t};\n\t}, [kolTableStatefulRef]);\n\n\tconst renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {\n\t\tconst data = (cell as { data?: Data }).data;\n\t\tconst id = data?.id;\n\t\tgetRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${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_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",
1856
+ "code": "import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';\nimport { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { KoliBriTableHeaderCellWithLogic } from '@public-ui/components';\n\ntype ProjectTask = {\n\tid: string;\n\tproject: string;\n\towner: string;\n};\n\nconst HEADERS: { horizontal: KoliBriTableHeaderCellWithLogic[][] } = {\n\thorizontal: [\n\t\t[\n\t\t\t{ key: 'id', label: 'ID', width: 80 },\n\t\t\t{ key: 'project', label: 'Project', width: 200 },\n\t\t\t{ key: 'owner', label: 'Owner', width: 200 },\n\t\t\t{\n\t\t\t\ttype: 'action',\n\t\t\t\tkey: 'actions',\n\t\t\t\tlabel: 'Actions',\n\t\t\t\twidth: 250,\n\t\t\t\tactions: (row) => {\n\t\t\t\t\tconst simpleRow = row as ProjectTask;\n\t\t\t\t\treturn [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t\t_label: 'Start',\n\t\t\t\t\t\t\t_icons: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t_variant: 'secondary',\n\t\t\t\t\t\t\t_on: {\n\t\t\t\t\t\t\t\tonClick: () => alert(`Start task ${simpleRow.id}`),\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],\n\t],\n};\n\nconst DATA: ProjectTask[] = [\n\t{\n\t\tid: 'T-01',\n\t\tproject: 'Onboarding checklist',\n\t\towner: 'Alex Rivera',\n\t},\n\t{\n\t\tid: 'T-02',\n\t\tproject: 'Accessibility audit',\n\t\towner: 'Jamie Chen',\n\t},\n\t{\n\t\tid: 'T-03',\n\t\tproject: 'UX audit',\n\t\towner: 'Tyler Gray',\n\t},\n\t{\n\t\tid: 'T-04',\n\t\tproject: 'Software Architectur',\n\t\towner: 'Tess Richardson',\n\t},\n];\n\nexport const TableStatefulWithSingleSelection: FC = () => {\n\tconst selection: KoliBriTableSelection = {\n\t\tlabel: (row) => `Selection for ${(row as ProjectTask).id}`,\n\t\tselectedKeys: ['T-01'],\n\t\tdisabledKeys: ['T-04'],\n\t\tkeyPropertyName: 'id',\n\t\tmultiple: false,\n\t};\n\n\tconst handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | null) => {\n\t\tconsole.log('Selection change via callback', selection);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tSimple example using the refactored action column: Actions are defined once in the column header definition using a factory function. Two rows with\n\t\t\t\t\tinline action buttons demonstrate clean separation between data and UI behavior.\n\t\t\t\t</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=\"Tasks with action buttons\"\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\tclassName=\"block\"\n\t\t\t\t\t_selection={selection}\n\t\t\t\t\t_on={{ onSelectionChange: handleSelectionChangeCallback }}\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
1825
1857
  "kind": "sample"
1826
1858
  },
1827
1859
  {
@@ -2149,7 +2181,7 @@
2149
2181
  "group": "scenarios",
2150
2182
  "name": "same-height-of-all-interactive-elements",
2151
2183
  "path": "packages/samples/react/src/scenarios/same-height-of-all-interactive-elements.tsx",
2152
- "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",
2184
+ "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=\"kolicon-house\" _label=\"Button\" _on={dummyEventHandler} />\n\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-house\" _label=\"Button\" _on={dummyEventHandler} />\n\t\t\t\t<KolLinkButton _href=\"#\" _icons=\"kolicon-house\" _label=\"Link-Button\" _on={dummyEventHandler} />\n\t\t\t\t<KolLinkButton _hideLabel _href=\"#\" _icons=\"kolicon-house\" _label=\"Link-Button\" _on={dummyEventHandler} />\n\t\t\t\t<KolCombobox _hideLabel _icons=\"kolicon-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: 'kolicon-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=\"kolicon-house\" _label=\"Input-File\" />\n\t\t\t\t<KolInputDate _hideLabel _icons=\"kolicon-house\" _label=\"Input-Date\" />\n\t\t\t\t<KolInputEmail _hideLabel _icons=\"kolicon-house\" _label=\"Input-Email\" />\n\t\t\t\t<KolInputNumber _hideLabel _icons=\"kolicon-house\" _label=\"Input-Number\" />\n\t\t\t\t<KolInputPassword _hideLabel _icons=\"kolicon-house\" _label=\"Input-Password\" />\n\t\t\t\t<KolInputRange _hideLabel _icons=\"kolicon-house\" _label=\"Input-Range\" />\n\t\t\t\t<KolInputText _hideLabel _icons=\"kolicon-house\" _label=\"Input-Text\" />\n\t\t\t\t<KolSelect _hideLabel _icons=\"kolicon-house\" _label=\"Select\" _options={[]} />\n\t\t\t\t<KolSingleSelect _hideLabel _icons=\"kolicon-house\" _label=\"Single Select\" _options={[]} />\n\t\t\t\t<KolTextarea _hideLabel _icons=\"kolicon-house\" _label=\"Textarea\" />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
2153
2185
  "kind": "scenario"
2154
2186
  },
2155
2187
  {
@@ -2213,7 +2245,7 @@
2213
2245
  "group": "spec",
2214
2246
  "name": "abbr",
2215
2247
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/abbr.md",
2216
- "code": "# kol-abbr\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Abbr** component implements the HTML tag `abbr` with an accessible tooltip.\nThe tooltip for the description is displayed and read aloud when the **Abbr** component is focused or hovered.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| -------- | --------- | ------------------------------------------------------------------------------------------------------------------ | --------------------- | ----------- |\n| `_label` | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string \\| undefined` | `undefined` |\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ------------------------------ |\n| | The abbreviation (short form). |\n\n\n----------------------------------------------\n\n\n",
2248
+ "code": "# kol-abbr\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Abbr** component implements the HTML tag `abbr`.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------ | --------------------- | ----------- |\n| `_label` | `_label` | DEPRECATED! Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string \\| undefined` | `undefined` |\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ------------------------------ |\n| | The abbreviation (short form). |\n\n\n----------------------------------------------\n\n\n",
2217
2249
  "kind": "spec"
2218
2250
  },
2219
2251
  {
@@ -2245,7 +2277,7 @@
2245
2277
  "group": "spec",
2246
2278
  "name": "badge",
2247
2279
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/badge.md",
2248
- "code": "# kol-badge\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Badge** component allows you to visually highlight specific information.\nIn addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_color` | `_color` | Defines the backgroundColor and foregroundColor. | `string \\| undefined \\| { backgroundColor: string; foregroundColor: string; }` | `'#000'` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
2280
+ "code": "# kol-badge\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Badge** component allows you to visually highlight specific information.\nIn addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_color` | `_color` | Defines the backgroundColor and foregroundColor. | `string \\| undefined \\| { backgroundColor: string; foregroundColor: string; }` | `'#000'` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \\| string \\| undefined` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _accessKey?: string \\| undefined; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _variant?: VariantClassNamePropType \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
2249
2281
  "kind": "spec"
2250
2282
  },
2251
2283
  {
@@ -2261,7 +2293,7 @@
2261
2293
  "group": "spec",
2262
2294
  "name": "button",
2263
2295
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/button.md",
2264
- "code": "# kol-button\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Button** component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions.\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| `_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; onFocus?: EventCallback<FocusEvent> \\| undefined; onBlur?: EventCallback<FocusEvent> \\| 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| `_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### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. |\n\n\n----------------------------------------------\n\n\n",
2296
+ "code": "# kol-button\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Button** component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions.\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| `_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; onFocus?: EventCallback<FocusEvent> \\| undefined; onBlur?: EventCallback<FocusEvent> \\| 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| `_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. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. |\n\n\n----------------------------------------------\n\n\n",
2265
2297
  "kind": "spec"
2266
2298
  },
2267
2299
  {
@@ -2269,7 +2301,7 @@
2269
2301
  "group": "spec",
2270
2302
  "name": "button-link",
2271
2303
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/button-link.md",
2272
- "code": "# kol-button-link\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **ButtonLink** component is semantically a button but has the appearance of a link. All relevant properties of the Button component are adopted and extended with the design-defining properties of a link.\n\nA button can be disabled, therefore the **ButtonLink** also has the `_disabled` property. How this is styled visually is determined by the UX designer.\n\nInstead of using `_href` as with a regular link, the **ButtonLink**'s behavior is controlled via a click callback using the `_on` property.\n\nA link has the `target` property which optionally opens the link in a new window/tab. This behavior is not yet implemented.\n\nSince a link, unlike a button, is not offered in multiple variants (`primary`, `secondary`, etc.), the `_customClass` and `_variant` properties are not available.\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| `_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; onFocus?: EventCallback<FocusEvent> \\| undefined; onBlur?: EventCallback<FocusEvent> \\| 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| `_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. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. |\n\n\n----------------------------------------------\n\n\n",
2304
+ "code": "# kol-button-link\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **ButtonLink** component is semantically a button but has the appearance of a link. All relevant properties of the Button component are adopted and extended with the design-defining properties of a link.\n\nA button can be disabled, therefore the **ButtonLink** also has the `_disabled` property. How this is styled visually is determined by the UX designer.\n\nInstead of using `_href` as with a regular link, the **ButtonLink**'s behavior is controlled via a click callback using the `_on` property.\n\nA link has the `target` property which optionally opens the link in a new window/tab. This behavior is not yet implemented.\n\nSince a link, unlike a button, is not offered in multiple variants (`primary`, `secondary`, etc.), the `_customClass` and `_variant` properties are not available.\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| `_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; onFocus?: EventCallback<FocusEvent> \\| undefined; onBlur?: EventCallback<FocusEvent> \\| 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| `_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. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. |\n\n\n----------------------------------------------\n\n\n",
2273
2305
  "kind": "spec"
2274
2306
  },
2275
2307
  {
@@ -2285,7 +2317,7 @@
2285
2317
  "group": "spec",
2286
2318
  "name": "combobox",
2287
2319
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/combobox.md",
2288
- "code": "# kol-combobox\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this combobox. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasClearButton` | `_has-clear-button` | Shows the clear button if enabled. | `boolean \\| undefined` | `true` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_suggestions` _(required)_ | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2320
+ "code": "# kol-combobox\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this combobox. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasClearButton` | `_has-clear-button` | Shows the clear button if enabled. | `boolean \\| undefined` | `true` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_suggestions` _(required)_ | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2289
2321
  "kind": "spec"
2290
2322
  },
2291
2323
  {
@@ -2365,7 +2397,7 @@
2365
2397
  "group": "spec",
2366
2398
  "name": "input-color",
2367
2399
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-color.md",
2368
- "code": "# kol-input-color\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Color** input type creates a selection field for defining any color. The color can be entered in hexadecimal, RGB, or HSL notation. It is possible to select a color via a picker or by entering exact color values.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2400
+ "code": "# kol-input-color\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Color** input type creates a selection field for defining any color. The color can be entered in hexadecimal, RGB, or HSL notation. It is possible to select a color via a picker or by entering exact color values.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _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?: VariantClassNamePropType \\| 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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2369
2401
  "kind": "spec"
2370
2402
  },
2371
2403
  {
@@ -2373,7 +2405,7 @@
2373
2405
  "group": "spec",
2374
2406
  "name": "input-date",
2375
2407
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-date.md",
2376
- "code": "# kol-input-date\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Date** input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined `` | `undefined` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined `` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"date\" \\| \"datetime-local\" \\| \"month\" \\| \"time\" \\| \"week\"` | `'date'` |\n| `_value` | `_value` | Defines the value of the element. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| null \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | Date | undefined | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | Date | null | undefined>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2408
+ "code": "# kol-input-date\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Date** input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined `` | `undefined` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` Date \\| `${number}-${number}-${number}T${number}:${number}:${number}` \\| `${number}-${number}-${number}T${number}:${number}` \\| `${number}-${number}-${number}` \\| `${number}-${number}` \\| `${number}-W${number}` \\| `${number}:${number}:${number}` \\| `${number}:${number}` \\| undefined `` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _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?: VariantClassNamePropType \\| 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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | Date | undefined | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | Date | null | undefined>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2377
2409
  "kind": "spec"
2378
2410
  },
2379
2411
  {
@@ -2381,7 +2413,7 @@
2381
2413
  "group": "spec",
2382
2414
  "name": "input-email",
2383
2415
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-email.md",
2384
- "code": "# kol-input-email\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Email** input type creates an input field for email addresses. It supports built-in format validation, multiple addresses via the `_multiple` property, and auto-complete suggestions.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2416
+ "code": "# kol-input-email\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Email** input type creates an input field for email addresses. It supports built-in format validation, multiple addresses via the `_multiple` property, and auto-complete suggestions.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _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?: VariantClassNamePropType \\| 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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2385
2417
  "kind": "spec"
2386
2418
  },
2387
2419
  {
@@ -2389,7 +2421,7 @@
2389
2421
  "group": "spec",
2390
2422
  "name": "input-file",
2391
2423
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-file.md",
2392
- "code": "# kol-input-file\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **File** input type creates an input field for file uploads. One or multiple files can be selected and submitted with a form.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accept` | `_accept` | Defines which file formats are accepted. | `string \\| undefined` | `undefined` |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<FileList | null | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<FileList | null | undefined>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2424
+ "code": "# kol-input-file\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **File** input type creates an input field for file uploads. One or multiple files can be selected and submitted with a form.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accept` | `_accept` | Defines which file formats are accepted. | `string \\| undefined` | `undefined` |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _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?: VariantClassNamePropType \\| 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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<FileList | null | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<FileList | null | undefined>`\n\n\n\n### `reset() => Promise<void>`\n\nResets the component's value.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2393
2425
  "kind": "spec"
2394
2426
  },
2395
2427
  {
@@ -2397,7 +2429,7 @@
2397
2429
  "group": "spec",
2398
2430
  "name": "input-number",
2399
2431
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-number.md",
2400
- "code": "# kol-input-number\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Number** input type creates an input field for numeric values. Use the `_min`, `_max`, and `_step` properties to restrict the accepted value range.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `` `${number}.${number}` \\| `${number}` \\| null \\| number \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<number | NumberString | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | null>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2432
+ "code": "# kol-input-number\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Number** input type creates an input field for numeric values. Use the `_min`, `_max`, and `_step` properties to restrict the accepted value range.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _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?: VariantClassNamePropType \\| 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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<number | NumberString | null>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | null>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2401
2433
  "kind": "spec"
2402
2434
  },
2403
2435
  {
@@ -2405,7 +2437,7 @@
2405
2437
  "group": "spec",
2406
2438
  "name": "input-password",
2407
2439
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-password.md",
2408
- "code": "# kol-input-password\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Password** input type creates an input field for passwords. The input is masked with dot symbols.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n| `_visibilityToggle` | `_visibility-toggle` | Activates the show password button | `boolean \\| undefined` | `false` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2440
+ "code": "# kol-input-password\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Password** input type creates an input field for passwords. The input is masked with dot symbols.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _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?: VariantClassNamePropType \\| 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. | `string \\| string[] \\| undefined` | `undefined` |\n| `_visibilityToggle` | `_visibility-toggle` | Activates the show password button | `boolean \\| undefined` | `false` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2409
2441
  "kind": "spec"
2410
2442
  },
2411
2443
  {
@@ -2413,7 +2445,7 @@
2413
2445
  "group": "spec",
2414
2446
  "name": "input-radio",
2415
2447
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-radio.md",
2416
- "code": "# kol-input-radio\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **InputRadio** input type consists of a collection of radio elements, providing a choice between different values. Only a single value can be selected at a time. Selected radio elements are typically represented by a filled, visually highlighted circle.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` | `_options` | Options the user can choose from. | `RadioOption<StencilUnknown>[] \\| string \\| undefined` | `undefined` |\n| `_orientation` | `_orientation` | Defines whether the orientation of the component is horizontal or vertical. | `\"horizontal\" \\| \"vertical\" \\| undefined` | `'vertical'` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `null` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ---------------------------------------- |\n| | The legend/heading of the radio buttons. |\n\n\n----------------------------------------------\n\n\n",
2448
+ "code": "# kol-input-radio\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **InputRadio** input type consists of a collection of radio elements, providing a choice between different values. Only a single value can be selected at a time. Selected radio elements are typically represented by a filled, visually highlighted circle.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` | `_options` | Options the user can choose from. | `RadioOption<StencilUnknown>[] \\| string \\| undefined` | `undefined` |\n| `_orientation` | `_orientation` | Defines whether the orientation of the component is horizontal or vertical. | `\"horizontal\" \\| \"vertical\" \\| undefined` | `'vertical'` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `null` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ---------------------------------------- |\n| | The legend/heading of the radio buttons. |\n\n\n----------------------------------------------\n\n\n",
2417
2449
  "kind": "spec"
2418
2450
  },
2419
2451
  {
@@ -2421,7 +2453,7 @@
2421
2453
  "group": "spec",
2422
2454
  "name": "input-range",
2423
2455
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-range.md",
2424
- "code": "# kol-input-range\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Range** input type creates a slider control for selecting a numeric value within a defined range. Use the `_min`, `_max`, and `_step` properties to configure the range and step size.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `100` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `0` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<number | NumberString | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2456
+ "code": "# kol-input-range\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Range** input type creates a slider control for selecting a numeric value within a defined range. Use the `_min`, `_max`, and `_step` properties to configure the range and step size.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_max` | `_max` | Defines the maximum value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `100` |\n| `_min` | `_min` | Defines the smallest possible input value. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `0` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_step` | `_step` | Defines the step size for value changes. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `` `${number}.${number}` \\| `${number}` \\| number \\| undefined `` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<number | NumberString | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<number | NumberString | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2425
2457
  "kind": "spec"
2426
2458
  },
2427
2459
  {
@@ -2429,7 +2461,7 @@
2429
2461
  "group": "spec",
2430
2462
  "name": "input-text",
2431
2463
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/input-text.md",
2432
- "code": "# kol-input-text\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Text** input type creates an input field for plain text, search terms, URLs, or phone numbers.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _type?: \"button\" \\| \"reset\" \\| \"submit\" \\| undefined; _accessKey?: string \\| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \\| undefined; _ariaExpanded?: boolean \\| undefined; _tabIndex?: number \\| undefined; _value?: StencilUnknown; _role?: \"tab\" \\| \"treeitem\" \\| undefined; _ariaControls?: string \\| undefined; _ariaDescription?: string \\| undefined; _ariaSelected?: boolean \\| undefined; _customClass?: string \\| undefined; _disabled?: boolean \\| undefined; _hideLabel?: boolean \\| undefined; _icons?: IconsPropType \\| undefined; _id?: string \\| undefined; _inline?: boolean \\| undefined; _name?: string \\| undefined; _shortKey?: string \\| undefined; _syncValueBySelector?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; _variant?: string \\| undefined; }` | `undefined` |\n| `_spellCheck` | `_spell-check` | Defines whether the browser should check the spelling and grammar. | `boolean \\| undefined` | `undefined` |\n| `_suggestions` | `_suggestions` | Suggestions to provide for the input. | `W3CInputValue[] \\| string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_type` | `_type` | Defines either the type of the component or of the components interactive element. | `\"search\" \\| \"tel\" \\| \"text\" \\| \"url\" \\| undefined` | `'text'` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `selectionEnd() => Promise<number | null | undefined>`\n\nGet selection end of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `selectionStart() => Promise<number | null | undefined>`\n\nGet selection start of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `setRangeText(replacement: string, selectionStart?: number, selectionEnd?: number, selectMode?: \"select\" | \"start\" | \"end\" | \"preserve\") => Promise<void>`\n\nAdd string at position of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setRangeText\n\n#### Parameters\n\n| Name | Type | Description |\n| ---------------- | --------------------------------------------------------- | ----------- |\n| `replacement` | `string` | |\n| `selectionStart` | `number \\| undefined` | |\n| `selectionEnd` | `number \\| undefined` | |\n| `selectMode` | `\"select\" \\| \"start\" \\| \"end\" \\| \"preserve\" \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: \"forward\" | \"backward\" | \"none\") => Promise<void>`\n\nSet selection start and end, and optional in which direction, of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setSelectionRange\n\n#### Parameters\n\n| Name | Type | Description |\n| -------------------- | ------------------------------------------------ | ----------- |\n| `selectionStart` | `number` | |\n| `selectionEnd` | `number` | |\n| `selectionDirection` | `\"none\" \\| \"forward\" \\| \"backward\" \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionStart(selectionStart: number) => Promise<void>`\n\nSet selection start (and end = start) of internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| ---------------- | -------- | ----------- |\n| `selectionStart` | `number` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2464
+ "code": "# kol-input-text\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Text** input type creates an input field for plain text, search terms, URLs, or phone numbers.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. | `string \\| undefined` | `undefined` |\n| `_autoComplete` | `_auto-complete` | Defines whether the input can be auto-completed. | `string \\| undefined` | `'off'` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_pattern` | `_pattern` | Defines a validation pattern for the input field. | `string \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \\| undefined \\| { _label: string; } & { _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?: VariantClassNamePropType \\| 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| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n### `selectionEnd() => Promise<number | null | undefined>`\n\nGet selection end of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `selectionStart() => Promise<number | null | undefined>`\n\nGet selection start of internal element.\n\n#### Returns\n\nType: `Promise<number | null | undefined>`\n\n\n\n### `setRangeText(replacement: string, selectionStart?: number, selectionEnd?: number, selectMode?: \"select\" | \"start\" | \"end\" | \"preserve\") => Promise<void>`\n\nAdd string at position of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setRangeText\n\n#### Parameters\n\n| Name | Type | Description |\n| ---------------- | --------------------------------------------------------- | ----------- |\n| `replacement` | `string` | |\n| `selectionStart` | `number \\| undefined` | |\n| `selectionEnd` | `number \\| undefined` | |\n| `selectMode` | `\"select\" \\| \"end\" \\| \"start\" \\| \"preserve\" \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: \"forward\" | \"backward\" | \"none\") => Promise<void>`\n\nSet selection start and end, and optional in which direction, of internal element; just like https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setSelectionRange\n\n#### Parameters\n\n| Name | Type | Description |\n| -------------------- | ------------------------------------------------ | ----------- |\n| `selectionStart` | `number` | |\n| `selectionEnd` | `number` | |\n| `selectionDirection` | `\"none\" \\| \"forward\" \\| \"backward\" \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `setSelectionStart(selectionStart: number) => Promise<void>`\n\nSet selection start (and end = start) of internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| ---------------- | -------- | ----------- |\n| `selectionStart` | `number` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2433
2465
  "kind": "spec"
2434
2466
  },
2435
2467
  {
@@ -2445,7 +2477,7 @@
2445
2477
  "group": "spec",
2446
2478
  "name": "link",
2447
2479
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/link.md",
2448
- "code": "# kol-link\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` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
2480
+ "code": "# kol-link\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` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
2449
2481
  "kind": "spec"
2450
2482
  },
2451
2483
  {
@@ -2453,7 +2485,7 @@
2453
2485
  "group": "spec",
2454
2486
  "name": "link-button",
2455
2487
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/link-button.md",
2456
- "code": "# kol-link-button\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **LinkButton** component is semantically a link but has the appearance of a button. All relevant properties of the Link component are adopted and extended with the design-defining properties of a button.\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### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. |\n\n\n----------------------------------------------\n\n\n",
2488
+ "code": "# kol-link-button\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **LinkButton** component is semantically a link but has the appearance of a button. All relevant properties of the Link component are adopted and extended with the design-defining properties of a button.\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| `_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` | `_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. | `string \\| string[] \\| undefined` | `getFeatureFlag('buttonVariantDefault', this.host) ?? 'normal'` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | -------------------------------------------------- |\n| `\"expert\"` | Custom label content, e.g. for rich text or icons. |\n\n\n----------------------------------------------\n\n\n",
2457
2489
  "kind": "spec"
2458
2490
  },
2459
2491
  {
@@ -2493,7 +2525,7 @@
2493
2525
  "group": "spec",
2494
2526
  "name": "popover-button",
2495
2527
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/popover-button.md",
2496
- "code": "# kol-popover-button\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nA button that toggles the visibility of a popover overlay containing arbitrary content.\nThe popover uses the native HTML Popover API for lightweight, non-modal overlays.\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| `_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| `_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| `_popoverAlign` | `_popover-align` | Defines where to show the Popover preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'bottom'` |\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### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `hidePopover() => Promise<void>`\n\nHides the popover programmatically by forwarding the call to the web component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showPopover() => Promise<void>`\n\nShows the popover programmatically by forwarding the call to the web component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | --------------------------------------------------------------- |\n| | The popover content (displayed when the button is clicked). |\n| `\"expert\"` | Custom label content for the button (when `_label` is `false`). |\n\n\n----------------------------------------------\n\n\n",
2528
+ "code": "# kol-popover-button\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nA button that toggles the visibility of a popover overlay containing arbitrary content.\nThe popover uses the native HTML Popover API for lightweight, non-modal overlays.\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| `_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| `_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| `_popoverAlign` | `_popover-align` | Defines where to show the Popover preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'bottom'` |\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. | `string \\| string[] \\| undefined` | `'normal'` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `hidePopover() => Promise<void>`\n\nHides the popover programmatically by forwarding the call to the web component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showPopover() => Promise<void>`\n\nShows the popover programmatically by forwarding the call to the web component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---------- | --------------------------------------------------------------- |\n| | The popover content (displayed when the button is clicked). |\n| `\"expert\"` | Custom label content for the button (when `_label` is `false`). |\n\n\n----------------------------------------------\n\n\n",
2497
2529
  "kind": "spec"
2498
2530
  },
2499
2531
  {
@@ -2517,7 +2549,7 @@
2517
2549
  "group": "spec",
2518
2550
  "name": "select",
2519
2551
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/select.md",
2520
- "code": "# kol-select\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this select. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` _(required)_ | `_options` | Options the user can choose from. | `(Option<StencilUnknown> \\| Optgroup<StencilUnknown>)[] \\| string` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `StencilUnknown[] \\| boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown[] | StencilUnknown | undefined>`\n\nReturns the selected values.\n\n#### Returns\n\nType: `Promise<StencilUnknown | StencilUnknown[]>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2552
+ "code": "# kol-select\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this select. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_multiple` | `_multiple` | Makes the input accept multiple inputs. | `boolean \\| undefined` | `false` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` _(required)_ | `_options` | Options the user can choose from. | `(Option<StencilUnknown> \\| Optgroup<StencilUnknown>)[] \\| string` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `StencilUnknown[] \\| boolean \\| null \\| number \\| object \\| string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown[] | StencilUnknown | undefined>`\n\nReturns the selected values.\n\n#### Returns\n\nType: `Promise<StencilUnknown | StencilUnknown[]>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2521
2553
  "kind": "spec"
2522
2554
  },
2523
2555
  {
@@ -2525,7 +2557,7 @@
2525
2557
  "group": "spec",
2526
2558
  "name": "single-select",
2527
2559
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/single-select.md",
2528
- "code": "# kol-single-select\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **SingleSelect** component creates a dropdown list from which exactly one predefined option can be selected.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasClearButton` | `_has-clear-button` | Shows the clear button if enabled. | `boolean \\| undefined` | `true` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` _(required)_ | `_options` | Options the user can choose from. | `Option<StencilUnknown>[] \\| string` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `null` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2560
+ "code": "# kol-single-select\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **SingleSelect** component creates a dropdown list from which exactly one predefined option can be selected.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this input. Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS). | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasClearButton` | `_has-clear-button` | Shows the clear button if enabled. | `boolean \\| undefined` | `true` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_options` _(required)_ | `_options` | Options the user can choose from. | `Option<StencilUnknown>[] \\| string` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `boolean \\| null \\| number \\| object \\| string \\| undefined` | `null` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2529
2561
  "kind": "spec"
2530
2562
  },
2531
2563
  {
@@ -2557,7 +2589,7 @@
2557
2589
  "group": "spec",
2558
2590
  "name": "split-button",
2559
2591
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/split-button.md",
2560
- "code": "# kol-split-button\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **SplitButton** component can be used to display a two-part button. The primary button is typically used for\na main action, while the secondary button opens a context menu (`Popover`) that contains additional actions.\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| `_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; onFocus?: EventCallback<FocusEvent> \\| undefined; onBlur?: EventCallback<FocusEvent> \\| 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| `_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### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `closePopup() => Promise<void>`\n\nCloses the dropdown.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ------------------------------------------------------- |\n| | Allows arbitrary HTML to be inserted into the dropdown. |\n\n\n----------------------------------------------\n\n\n",
2592
+ "code": "# kol-split-button\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **SplitButton** component can be used to display a two-part button. The primary button is typically used for\na main action, while the secondary button opens a context menu (`Popover`) that contains additional actions.\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| `_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; onFocus?: EventCallback<FocusEvent> \\| undefined; onBlur?: EventCallback<FocusEvent> \\| 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| `_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. | `string \\| string[] \\| undefined` | `'normal'` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `closePopup() => Promise<void>`\n\nCloses the dropdown.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<StencilUnknown>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<StencilUnknown>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ------------------------------------------------------- |\n| | Allows arbitrary HTML to be inserted into the dropdown. |\n\n\n----------------------------------------------\n\n\n",
2561
2593
  "kind": "spec"
2562
2594
  },
2563
2595
  {
@@ -2565,7 +2597,7 @@
2565
2597
  "group": "spec",
2566
2598
  "name": "table-stateful",
2567
2599
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/table-stateful.md",
2568
- "code": "# kol-table-stateful\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Table** component is primarily used for the clear presentation of data sets. It is designed to automatically determine all data-dependent values and render the table accordingly. This includes optional features such as column sorting and pagination.\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| `_ariaLabelledby` | `_aria-labelledby` | References an external element by ID that serves as the accessible label for this table. Uses ElementInternals.ariaLabelledByElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS) β€” use `_label` instead. | `string \\| 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| `_fixedCols` | -- | Defines the fixed number of columns from start and end of the table | `[number, number] \\| 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| `_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 \\| ({ disabledKeys?: KoliBriTableSelectionKeys \\| undefined; keyPropertyName?: string \\| undefined; label: (row: KoliBriTableDataType) => string; multiple?: boolean \\| undefined; selectedKeys?: KoliBriTableSelectionKeys \\| undefined; })` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| 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### `resetSort() => Promise<void>`\n\nResets the sort state to the default values defined in the `_headers` prop.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
2600
+ "code": "# kol-table-stateful\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Table** component is primarily used for the clear presentation of data sets. It is designed to automatically determine all data-dependent values and render the table accordingly. This includes optional features such as column sorting and pagination.\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| `_ariaLabelledby` | `_aria-labelledby` | References an external element by ID that serves as the accessible label for this table. Uses ElementInternals.ariaLabelledByElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS) β€” use `_label` instead. | `string \\| 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| `_fixedCols` | -- | Defines the fixed number of columns from start and end of the table | `[number, number] \\| 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| `_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 \\| ({ disabledKeys?: KoliBriTableSelectionKeys \\| undefined; keyPropertyName?: string \\| undefined; label: (row: KoliBriTableDataType) => string; multiple?: boolean \\| undefined; selectedKeys?: KoliBriTableSelectionKeys \\| undefined; })` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| 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### `resetSort() => Promise<void>`\n\nResets the sort state to the default values defined in the `_headers` prop.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
2569
2601
  "kind": "spec"
2570
2602
  },
2571
2603
  {
@@ -2573,7 +2605,7 @@
2573
2605
  "group": "spec",
2574
2606
  "name": "table-stateless",
2575
2607
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/table-stateless.md",
2576
- "code": "# kol-table-stateless\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_ariaLabelledby` | `_aria-labelledby` | References an external element by ID that serves as the accessible label for this table. Uses ElementInternals.ariaLabelledByElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS) β€” use `_label` instead. | `string \\| 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| `_fixedCols` | -- | Defines the fixed number of columns from start and end of the table | `[number, number] \\| 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| `_on` | -- | Defines the callback functions for table events. | `undefined \\| { onSort?: EventValueOrEventCallback<MouseEvent, SortEventPayload> \\| undefined; onSelectionChange?: EventValueOrEventCallback<Event, KoliBriTableSelectionKeys> \\| undefined; onChangeHeaderCells?: EventValueOrEventCallback<Event, TableHeaderCells> \\| undefined; }` | `undefined` |\n| `_selection` | `_selection` | Defines how rows can be selected and the current selection. | `string \\| undefined \\| ({ disabledKeys?: KoliBriTableSelectionKeys \\| undefined; keyPropertyName?: string \\| undefined; label: (row: KoliBriTableDataType) => string; multiple?: boolean \\| undefined; selectedKeys?: KoliBriTableSelectionKeys \\| undefined; })` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
2608
+ "code": "# kol-table-stateless\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_ariaLabelledby` | `_aria-labelledby` | References an external element by ID that serves as the accessible label for this table. Uses ElementInternals.ariaLabelledByElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS) β€” use `_label` instead. | `string \\| 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| `_fixedCols` | -- | Defines the fixed number of columns from start and end of the table | `[number, number] \\| 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| `_on` | -- | Defines the callback functions for table events. | `undefined \\| { onSort?: EventValueOrEventCallback<MouseEvent, SortEventPayload> \\| undefined; onSelectionChange?: EventValueOrEventCallback<Event, KoliBriTableSelectionKeys> \\| undefined; onChangeHeaderCells?: EventValueOrEventCallback<Event, TableHeaderCells> \\| undefined; }` | `undefined` |\n| `_selection` | `_selection` | Defines how rows can be selected and the current selection. | `string \\| undefined \\| ({ disabledKeys?: KoliBriTableSelectionKeys \\| undefined; keyPropertyName?: string \\| undefined; label: (row: KoliBriTableDataType) => string; multiple?: boolean \\| undefined; selectedKeys?: KoliBriTableSelectionKeys \\| undefined; })` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
2577
2609
  "kind": "spec"
2578
2610
  },
2579
2611
  {
@@ -2589,7 +2621,7 @@
2589
2621
  "group": "spec",
2590
2622
  "name": "textarea",
2591
2623
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/textarea.md",
2592
- "code": "# kol-textarea\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Textarea** component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_adjustHeight` | `_adjust-height` | Adjusts the height of the element to its content. | `boolean \\| undefined` | `false` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this textarea. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_resize` | `_resize` | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize) In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`. | `\"none\" \\| \"vertical\" \\| undefined` | `'vertical'` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_spellCheck` | `_spell-check` | Defines whether the browser should check the spelling and grammar. | `boolean \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2624
+ "code": "# kol-textarea\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Textarea** component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `_accessKey` | `_access-key` | Defines the key combination that can be used to trigger or focus the component's interactive element. | `string \\| undefined` | `undefined` |\n| `_adjustHeight` | `_adjust-height` | Adjusts the height of the element to its content. | `boolean \\| undefined` | `false` |\n| `_ariaDetails` | `_aria-details` | References an external element by ID that provides accessible details for this textarea. | `string \\| undefined` | `undefined` |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_hasCounter` | `_has-counter` | Shows a character counter for the input element. | `boolean \\| undefined` | `false` |\n| `_hideLabel` | `_hide-label` | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | `boolean \\| undefined` | `false` |\n| `_hideMsg` | `_hide-msg` | Hides the error message but leaves it in the DOM for the input's aria-describedby. | `boolean \\| undefined` | `false` |\n| `_hint` | `_hint` | Defines the hint text. | `string \\| undefined` | `''` |\n| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`). | `string \\| undefined \\| { right?: IconOrIconClass \\| undefined; left?: IconOrIconClass \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string` | `undefined` |\n| `_maxLength` | `_max-length` | Defines the maximum number of input characters. | `number \\| undefined` | `undefined` |\n| `_maxLengthBehavior` | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input. | `\"hard\" \\| \"soft\" \\| undefined` | `'hard'` |\n| `_msg` | `_msg` | Defines the properties for a message rendered as Alert component. | `Omit<AlertProps, \"_on\" \\| \"_label\" \\| \"_level\" \\| \"_variant\" \\| \"_hasCloser\"> & { _description: string; } \\| string \\| undefined` | `undefined` |\n| `_name` | `_name` | Defines the technical name of an input field. | `string \\| undefined` | `undefined` |\n| `_on` | -- | Gibt die EventCallback-Funktionen fΓΌr das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown \\| undefined` | `undefined` |\n| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \\| undefined` | `undefined` |\n| `_readOnly` | `_read-only` | Makes the input element read only. | `boolean \\| undefined` | `false` |\n| `_required` | `_required` | Makes the input element required. | `boolean \\| undefined` | `false` |\n| `_resize` | `_resize` | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize) In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`. | `\"none\" \\| \"vertical\" \\| undefined` | `'vertical'` |\n| `_rows` | `_rows` | Maximum number of visible rows of the element. | `number \\| undefined` | `undefined` |\n| `_shortKey` | `_short-key` | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | `string \\| undefined` | `undefined` |\n| `_spellCheck` | `_spell-check` | Defines whether the browser should check the spelling and grammar. | `boolean \\| undefined` | `undefined` |\n| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `'top'` |\n| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \\| undefined` | `false` |\n| `_value` | `_value` | Defines the value of the element. | `string \\| undefined` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| string[] \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nClicks the primary interactive element inside this component.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void>`\n\nSets focus on the internal element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `getValue() => Promise<string | undefined>`\n\nReturns the current value.\n\n#### Returns\n\nType: `Promise<string | undefined>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ----------------------------- |\n| | The label of the input field. |\n\n\n----------------------------------------------\n\n\n",
2593
2625
  "kind": "spec"
2594
2626
  },
2595
2627
  {
@@ -2613,7 +2645,7 @@
2613
2645
  "group": "spec",
2614
2646
  "name": "tree-item",
2615
2647
  "path": "packages/tools/mcp/node_modules/@public-ui/components/doc/tree-item.md",
2616
- "code": "# kol-tree-item\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------- | ----------- |\n| `_active` | `_active` | If set (to true) the tree item is the active one. | `boolean \\| undefined` | `undefined` |\n| `_href` _(required)_ | `_href` | Defines the target URI of the link. | `string` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_open` | `_open` | Opens/expands the element when truthy, closes/collapses when falsy. | `boolean \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `collapse() => Promise<void | undefined>`\n\nCollapses the tree item.\n\n#### Returns\n\nType: `Promise<void | undefined>`\n\n\n\n### `expand() => Promise<void | undefined>`\n\nExpands the tree item.\n\n#### Returns\n\nType: `Promise<void | undefined>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<any>`\n\nFocuses the link element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<any>`\n\n\n\n### `isOpen() => Promise<boolean>`\n\nReturns whether the tree item is expanded.\n\n#### Returns\n\nType: `Promise<boolean>`\n\n\n\n\n----------------------------------------------\n\n\n",
2648
+ "code": "# kol-tree-item\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------- | ----------- |\n| `_active` | `_active` | If set (to true) the tree item is the active one. | `boolean \\| undefined` | `undefined` |\n| `_href` _(required)_ | `_href` | Defines the target URI of the link. | `string` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_open` | `_open` | Opens/expands the element when truthy, closes/collapses when falsy. | `boolean \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `collapse() => Promise<void | undefined>`\n\nCollapses the tree item.\n\n#### Returns\n\nType: `Promise<void | undefined>`\n\n\n\n### `expand() => Promise<void | undefined>`\n\nExpands the tree item.\n\n#### Returns\n\nType: `Promise<void | undefined>`\n\n\n\n### `focus(options?: KolFocusOptions) => Promise<void | undefined>`\n\nFocuses the link element.\n\n#### Parameters\n\n| Name | Type | Description |\n| --------- | ------------------------------ | ----------- |\n| `options` | `KolFocusOptions \\| undefined` | |\n\n#### Returns\n\nType: `Promise<void | undefined>`\n\n\n\n### `isOpen() => Promise<boolean>`\n\nReturns whether the tree item is expanded.\n\n#### Returns\n\nType: `Promise<boolean>`\n\n\n\n\n----------------------------------------------\n\n\n",
2617
2649
  "kind": "spec"
2618
2650
  },
2619
2651
  {